diff --git a/packages/create-app/index.js b/packages/create-app/index.js
index d3b2f56118ca26..20476ca51d5755 100755
--- 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
new file mode 100644
index 00000000000000..759ef536c80bce
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..b00bc926b11fa6
--- /dev/null
+++ b/packages/create-app/template-lit-element-ts/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Vite + Lit-Element App
+
+
+
+
+ This is child content
+
+
+
diff --git a/packages/create-app/template-lit-element-ts/package.json b/packages/create-app/template-lit-element-ts/package.json
new file mode 100644
index 00000000000000..c4c4234f47e176
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..e7bceb52b0e78f
--- /dev/null
+++ 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`
+ Hello, ${this.name}!
+
+
+ `
+ }
+
+ 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
new file mode 100644
index 00000000000000..18408e59ebca10
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..21ecab08cec62f
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..d451ff16c1010b
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..697460cac07c22
--- /dev/null
+++ b/packages/create-app/template-lit-element/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Vite + Lit-Element App
+
+
+
+
+ This is child content
+
+
+
diff --git a/packages/create-app/template-lit-element/package.json b/packages/create-app/template-lit-element/package.json
new file mode 100644
index 00000000000000..69156948bd0756
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..cc9236118dfb6a
--- /dev/null
+++ 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`
+ Hello, ${this.name}!
+
+
+ `
+ }
+
+ _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
new file mode 100644
index 00000000000000..4580223e12b4c6
--- /dev/null
+++ 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/
+ }
+ }
+}