feat: lit-element templates

close #1684
vitejs · Jan 25, 2021 · 830f3d3 · 830f3d3
1 parent 3240db1
commit 830f3d3
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 2 deletions.
diff --git a/packages/create-app/index.js b/packages/create-app/index.js
@@ -5,7 +5,14 @@ const fs = require('fs')
 const path = require('path')
 const argv = require('minimist')(process.argv.slice(2))
 const { prompt } = require('enquirer')
-const { yellow, green, cyan, magenta, stripColors } = require('kolorist')
+const {
+  yellow,
+  green,
+  cyan,
+  magenta,
+  lightRed,
+  stripColors
+} = require('kolorist')
 
 const cwd = process.cwd()
 
@@ -16,7 +23,9 @@ const TEMPLATES = [
   cyan('react'),
   cyan('react-ts'),
   magenta('preact'),
-  magenta('preact-ts')
+  magenta('preact-ts'),
+  lightRed('lit-element'),
+  lightRed('lit-element-ts')
 ]
 
 const renameFiles = {

diff --git a/packages/create-app/template-lit-element-ts/_gitignore b/packages/create-app/template-lit-element-ts/_gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+types
+*.local
diff --git a/packages/create-app/template-lit-element-ts/index.html b/packages/create-app/template-lit-element-ts/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit-Element App</title>
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <p>This is child content</p>
+    </my-element>
+  </body>
+</html>
diff --git a/packages/create-app/template-lit-element-ts/package.json b/packages/create-app/template-lit-element-ts/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "my-vite-element",
+  "version": "0.0.0",
+  "main": "dist/my-vite-element.es.js",
+  "exports": {
+    ".": "./dist/my-vite-element.es.js"
+  },
+  "types": "types/my-element.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --emitDeclarationOnly && vite build"
+  },
+  "dependencies": {
+    "lit-element": "^2.4.0"
+  },
+  "devDependencies": {
+    "vite": "^2.0.0-beta.45",
+    "typescript": "^4.1.3"
+  }
+}
diff --git a/packages/create-app/template-lit-element-ts/src/my-element.ts b/packages/create-app/template-lit-element-ts/src/my-element.ts
@@ -0,0 +1,55 @@
+import { LitElement, html, customElement, property, css } from 'lit-element'
+
+/**
+ * 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`
+      <h1>Hello, ${this.name}!</h1>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
+      <slot></slot>
+    `
+  }
+
+  private _onClick() {
+    this.count++
+  }
+
+  foo(): string {
+    return 'foo'
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement
+  }
+}
diff --git a/packages/create-app/template-lit-element-ts/tsconfig.json b/packages/create-app/template-lit-element-ts/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./types",
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": []
+}
diff --git a/packages/create-app/template-lit-element-ts/vite.config.ts b/packages/create-app/template-lit-element-ts/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/my-element.ts',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: /^lit-element/
+    }
+  }
+})
diff --git a/packages/create-app/template-lit-element/_gitignore b/packages/create-app/template-lit-element/_gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/packages/create-app/template-lit-element/index.html b/packages/create-app/template-lit-element/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit-Element App</title>
+    <script type="module" src="/src/my-element.js"></script>
+  </head>
+  <body>
+    <my-element>
+      <p>This is child content</p>
+    </my-element>
+  </body>
+</html>
diff --git a/packages/create-app/template-lit-element/package.json b/packages/create-app/template-lit-element/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "my-vite-element",
+  "version": "0.0.0",
+  "main": "dist/my-vite-element.es.js",
+  "exports": {
+    ".": "./dist/my-vite-element.es.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "lit-element": "^2.4.0"
+  },
+  "devDependencies": {
+    "vite": "^2.0.0-beta.45"
+  }
+}
diff --git a/packages/create-app/template-lit-element/src/my-element.js b/packages/create-app/template-lit-element/src/my-element.js
@@ -0,0 +1,56 @@
+import { LitElement, html, css } from 'lit-element'
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class MyElement extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        border: solid 1px gray;
+        padding: 16px;
+        max-width: 800px;
+      }
+    `
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The name to say "Hello" to.
+       */
+      name: { type: String },
+
+      /**
+       * The number of times the button has been clicked.
+       */
+      count: { type: Number }
+    }
+  }
+
+  constructor() {
+    super()
+    this.name = 'World'
+    this.count = 0
+  }
+
+  render() {
+    return html`
+      <h1>Hello, ${this.name}!</h1>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
+      <slot></slot>
+    `
+  }
+
+  _onClick() {
+    this.count++
+  }
+}
+
+window.customElements.define('my-element', MyElement)
diff --git a/packages/create-app/template-lit-element/vite.config.js b/packages/create-app/template-lit-element/vite.config.js
@@ -0,0 +1,14 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+export default {
+  build: {
+    lib: {
+      entry: 'src/my-element.js',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: /^lit-element/
+    }
+  }
+}