feat(create-vite): migrate lit-element to lit (#5012)

rodydavis · web-flow · commit d66ea0f420eb · 2021-09-25T11:37:31.000+02:00
diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -69,8 +69,8 @@ Supported template presets include:
 - `react-ts`
 - `preact`
 - `preact-ts`
-- `lit-element`
-- `lit-element-ts`
+- `lit`
+- `lit-ts`
 - `svelte`
 - `svelte-ts`
 
diff --git a/packages/create-vite/README.md b/packages/create-vite/README.md
@@ -51,8 +51,8 @@ Currently supported template presets include:
 - `react-ts`
 - `preact`
 - `preact-ts`
-- `lit-element`
-- `lit-element-ts`
+- `lit`
+- `lit-ts`
 - `svelte`
 - `svelte-ts`
 
diff --git a/packages/create-vite/index.js b/packages/create-vite/index.js
@@ -86,16 +86,16 @@ const FRAMEWORKS = [
     ]
   },
   {
-    name: 'lit-element',
+    name: 'lit',
     color: lightRed,
     variants: [
       {
-        name: 'lit-element',
+        name: 'lit',
         display: 'JavaScript',
         color: yellow
       },
       {
-        name: 'lit-element-ts',
+        name: 'lit-ts',
         display: 'TypeScript',
         color: blue
       }
diff --git a/packages/create-vite/template-lit-ts/_gitignore b/packages/create-vite/template-lit-ts/_gitignore
diff --git a/packages/create-vite/template-lit-ts/index.html b/packages/create-vite/template-lit-ts/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit-Element App</title>
+    <title>Vite + Lit App</title>
     <script type="module" src="/src/my-element.ts"></script>
   </head>
   <body>
diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-lit-element-ts-starter",
+  "name": "vite-lit-ts-starter",
   "version": "0.0.0",
   "main": "dist/my-element.es.js",
   "exports": {
@@ -15,7 +15,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "vite": "^2.5.4",
diff --git a/packages/create-vite/template-lit-ts/src/favicon.svg b/packages/create-vite/template-lit-ts/src/favicon.svg
diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
@@ -1,4 +1,5 @@
-import { LitElement, html, customElement, property, css } from 'lit-element'
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 
 /**
  * An example element.
diff --git a/packages/create-vite/template-lit-ts/src/vite-env.d.ts b/packages/create-vite/template-lit-ts/src/vite-env.d.ts
diff --git a/packages/create-vite/template-lit-ts/tsconfig.json b/packages/create-vite/template-lit-ts/tsconfig.json
diff --git a/packages/create-vite/template-lit-ts/vite.config.ts b/packages/create-vite/template-lit-ts/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
       formats: ['es']
     },
     rollupOptions: {
-      external: /^lit-element/
+      external: /^lit/
     }
   }
 })
diff --git a/packages/create-vite/template-lit/_gitignore b/packages/create-vite/template-lit/_gitignore
@@ -1,5 +1,5 @@
 node_modules
 .DS_Store
 dist
-dist-ssr
+types
 *.local
diff --git a/packages/create-vite/template-lit/index.html b/packages/create-vite/template-lit/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit-Element App</title>
+    <title>Vite + Lit App</title>
     <script type="module" src="/src/my-element.js"></script>
   </head>
   <body>
diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-lit-element-starter",
+  "name": "vite-lit-starter",
   "version": "0.0.0",
   "main": "dist/my-element.es.js",
   "exports": {
@@ -13,7 +13,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "lit-element": "^2.4.0"
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "vite": "^2.5.4"
diff --git a/packages/create-vite/template-lit/src/favicon.svg b/packages/create-vite/template-lit/src/favicon.svg
diff --git a/packages/create-vite/template-lit/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element'
+import { html, css, LitElement } from 'lit'
 
 /**
  * An example element.
diff --git a/packages/create-vite/template-lit/vite.config.js b/packages/create-vite/template-lit/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
       formats: ['es']
     },
     rollupOptions: {
-      external: /^lit-element/
+      external: /^lit/
     }
   }
 })
diff --git a/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue b/packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue
@@ -1,3 +1,3 @@
-<template>
-  <div>Example external component content</div>
-</template>
+<template>
+  <div>Example external component content</div>
+</template>

Original file line number	Diff line number	Diff line change
`@@ -86,16 +86,16 @@ const FRAMEWORKS = [`
`86`	`86`	`]`
`87`	`87`	`},`
`88`	`88`	`{`
`89`		`- name: 'lit-element',`
	`89`	`+ name: 'lit',`
`90`	`90`	`color: lightRed,`
`91`	`91`	`variants: [`
`92`	`92`	`{`
`93`		`- name: 'lit-element',`
	`93`	`+ name: 'lit',`
`94`	`94`	`display: 'JavaScript',`
`95`	`95`	`color: yellow`
`96`	`96`	`},`
`97`	`97`	`{`
`98`		`- name: 'lit-element-ts',`
	`98`	`+ name: 'lit-ts',`
`99`	`99`	`display: 'TypeScript',`
`100`	`100`	`color: blue`
`101`	`101`	`}`