From 59da9251efdfd8f108ff739cd6ce28bf591187ef Mon Sep 17 00:00:00 2001 From: JesmoDev Date: Tue, 17 May 2022 09:22:18 +0200 Subject: [PATCH] vite lit ts setup --- .../umbraco-cms-backoffice/.gitignore | 24 ++++++++ .../umbraco-cms-backoffice/index.html | 15 +++++ .../umbraco-cms-backoffice/package.json | 25 +++++++++ .../umbraco-cms-backoffice/src/favicon.svg | 15 +++++ .../umbraco-cms-backoffice/src/my-element.ts | 56 +++++++++++++++++++ .../umbraco-cms-backoffice/src/vite-env.d.ts | 1 + .../umbraco-cms-backoffice/tsconfig.json | 23 ++++++++ .../umbraco-cms-backoffice/tsconfig.node.json | 8 +++ .../umbraco-cms-backoffice/vite.config.ts | 14 +++++ 9 files changed, 181 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/.gitignore create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/index.html create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/package.json create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/favicon.svg create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/my-element.ts create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/vite-env.d.ts create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.json create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.node.json create mode 100644 src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/vite.config.ts diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/.gitignore b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/.gitignore new file mode 100644 index 0000000000..a547bf36d8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/index.html b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/index.html new file mode 100644 index 0000000000..d8846e99db --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/index.html @@ -0,0 +1,15 @@ + + + + + + + Vite + Lit App + + + + +

This is child content

+ + + diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/package.json b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/package.json new file mode 100644 index 0000000000..7d0a09e5ea --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/package.json @@ -0,0 +1,25 @@ +{ + "name": "umbraco-cms-backoffice", + "private": true, + "version": "0.0.0", + "main": "dist/my-element.es.js", + "exports": { + ".": "./dist/my-element.es.js" + }, + "types": "types/my-element.d.ts", + "files": [ + "dist", + "types" + ], + "scripts": { + "dev": "vite", + "build": "tsc && vite build" + }, + "dependencies": { + "lit": "^2.0.2" + }, + "devDependencies": { + "vite": "^2.9.9", + "typescript": "^4.5.4" + } +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/favicon.svg b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/favicon.svg new file mode 100644 index 0000000000..de4aeddc12 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/my-element.ts b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/my-element.ts new file mode 100644 index 0000000000..c7fd4c6d69 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/my-element.ts @@ -0,0 +1,56 @@ +import { html, css, LitElement } from 'lit' +import { customElement, property } from 'lit/decorators.js' + +/** + * An example element. + * + * @slot - This element has a slot + * @csspart button - The button + */ +@customElement('my-element') +export class MyElement extends LitElement { + static styles = css` + :host { + display: block; + border: solid 1px gray; + padding: 16px; + max-width: 800px; + } + ` + + /** + * The name to say "Hello" to. + */ + @property() + name = 'World' + + /** + * The number of times the button has been clicked. + */ + @property({ type: Number }) + count = 0 + + render() { + return html` +

Hello, ${this.name}!

+ + + ` + } + + private _onClick() { + this.count++ + } + + foo(): string { + return 'foo' + } +} + +declare global { + interface HTMLElementTagNameMap { + 'my-element': MyElement + } +} diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/vite-env.d.ts b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.json b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.json new file mode 100644 index 0000000000..91a731fd86 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "esnext", + "lib": ["es2017", "dom", "dom.iterable"], + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "./types", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "isolatedModules": true, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "forceConsistentCasingInFileNames": true, + "useDefineForClassFields": false, + "skipLibCheck": true + }, + "include": ["src/**/*.ts"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.node.json b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.node.json new file mode 100644 index 0000000000..e993792cb1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/vite.config.ts b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/vite.config.ts new file mode 100644 index 0000000000..14639f4b1c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/umbraco-cms-backoffice/vite.config.ts @@ -0,0 +1,14 @@ +import { defineConfig } from 'vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + build: { + lib: { + entry: 'src/my-element.ts', + formats: ['es'] + }, + rollupOptions: { + external: /^lit/ + } + } +})