From d66ea0f420eb7926d927b64e40ecaf83d9388e63 Mon Sep 17 00:00:00 2001
From: Rody Davis <31253215+rodydavis@users.noreply.github.com>
Date: Sat, 25 Sep 2021 02:37:31 -0700
Subject: [PATCH] feat(create-vite): migrate lit-element to lit (#5012)

---
 docs/guide/index.md                                         | 4 ++--
 packages/create-vite/README.md                              | 4 ++--
 packages/create-vite/index.js                               | 6 +++---
 .../{template-lit-element-ts => template-lit-ts}/_gitignore | 0
 .../{template-lit-element-ts => template-lit-ts}/index.html | 2 +-
 .../package.json                                            | 4 ++--
 .../src/favicon.svg                                         | 0
 .../src/my-element.ts                                       | 3 ++-
 .../src/vite-env.d.ts                                       | 0
 .../tsconfig.json                                           | 0
 .../vite.config.ts                                          | 2 +-
 .../{template-lit-element => template-lit}/_gitignore       | 2 +-
 .../{template-lit-element => template-lit}/index.html       | 2 +-
 .../{template-lit-element => template-lit}/package.json     | 4 ++--
 .../{template-lit-element => template-lit}/src/favicon.svg  | 0
 .../src/my-element.js                                       | 2 +-
 .../{template-lit-element => template-lit}/vite.config.js   | 2 +-
 .../example-external-component/ExampleExternalComponent.vue | 6 +++---
 18 files changed, 22 insertions(+), 21 deletions(-)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/_gitignore (100%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/index.html (90%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/package.json (84%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/src/favicon.svg (100%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/src/my-element.ts (89%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/src/vite-env.d.ts (100%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/tsconfig.json (100%)
 rename packages/create-vite/{template-lit-element-ts => template-lit-ts}/vite.config.ts (87%)
 rename packages/create-vite/{template-lit-element => template-lit}/_gitignore (80%)
 rename packages/create-vite/{template-lit-element => template-lit}/index.html (90%)
 rename packages/create-vite/{template-lit-element => template-lit}/package.json (81%)
 rename packages/create-vite/{template-lit-element => template-lit}/src/favicon.svg (100%)
 rename packages/create-vite/{template-lit-element => template-lit}/src/my-element.js (94%)
 rename packages/create-vite/{template-lit-element => template-lit}/vite.config.js (87%)

diff --git a/docs/guide/index.md b/docs/guide/index.md
index 3a358c9b5d1ac3..dae44ce09b3910 100644
--- 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
index b659486141f2d2..16f84aa6cabf3f 100644
--- 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
index 335a2109d40663..2d5fe774b8fdae 100755
--- 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-element-ts/_gitignore b/packages/create-vite/template-lit-ts/_gitignore
similarity index 100%
rename from packages/create-vite/template-lit-element-ts/_gitignore
rename to packages/create-vite/template-lit-ts/_gitignore
diff --git a/packages/create-vite/template-lit-element-ts/index.html b/packages/create-vite/template-lit-ts/index.html
similarity index 90%
rename from packages/create-vite/template-lit-element-ts/index.html
rename to packages/create-vite/template-lit-ts/index.html
index 30bf7f9c81694e..d8846e99db1d36 100644
--- a/packages/create-vite/template-lit-element-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-element-ts/package.json b/packages/create-vite/template-lit-ts/package.json
similarity index 84%
rename from packages/create-vite/template-lit-element-ts/package.json
rename to packages/create-vite/template-lit-ts/package.json
index e40e8d68eb1be5..be91a4f7e57401 100644
--- a/packages/create-vite/template-lit-element-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-element-ts/src/favicon.svg b/packages/create-vite/template-lit-ts/src/favicon.svg
similarity index 100%
rename from packages/create-vite/template-lit-element-ts/src/favicon.svg
rename to packages/create-vite/template-lit-ts/src/favicon.svg
diff --git a/packages/create-vite/template-lit-element-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
similarity index 89%
rename from packages/create-vite/template-lit-element-ts/src/my-element.ts
rename to packages/create-vite/template-lit-ts/src/my-element.ts
index e7bceb52b0e78f..c7fd4c6d6982f4 100644
--- a/packages/create-vite/template-lit-element-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-element-ts/src/vite-env.d.ts b/packages/create-vite/template-lit-ts/src/vite-env.d.ts
similarity index 100%
rename from packages/create-vite/template-lit-element-ts/src/vite-env.d.ts
rename to packages/create-vite/template-lit-ts/src/vite-env.d.ts
diff --git a/packages/create-vite/template-lit-element-ts/tsconfig.json b/packages/create-vite/template-lit-ts/tsconfig.json
similarity index 100%
rename from packages/create-vite/template-lit-element-ts/tsconfig.json
rename to packages/create-vite/template-lit-ts/tsconfig.json
diff --git a/packages/create-vite/template-lit-element-ts/vite.config.ts b/packages/create-vite/template-lit-ts/vite.config.ts
similarity index 87%
rename from packages/create-vite/template-lit-element-ts/vite.config.ts
rename to packages/create-vite/template-lit-ts/vite.config.ts
index 668aa6dd75c1d1..14639f4b1c5178 100644
--- a/packages/create-vite/template-lit-element-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-element/_gitignore b/packages/create-vite/template-lit/_gitignore
similarity index 80%
rename from packages/create-vite/template-lit-element/_gitignore
rename to packages/create-vite/template-lit/_gitignore
index d451ff16c1010b..759ef536c80bce 100644
--- a/packages/create-vite/template-lit-element/_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-element/index.html b/packages/create-vite/template-lit/index.html
similarity index 90%
rename from packages/create-vite/template-lit-element/index.html
rename to packages/create-vite/template-lit/index.html
index ad2c3e9ac596f8..2c9742f1c3bcff 100644
--- a/packages/create-vite/template-lit-element/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-element/package.json b/packages/create-vite/template-lit/package.json
similarity index 81%
rename from packages/create-vite/template-lit-element/package.json
rename to packages/create-vite/template-lit/package.json
index e2757fcc74fcdb..47fa504f3019c8 100644
--- a/packages/create-vite/template-lit-element/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-element/src/favicon.svg b/packages/create-vite/template-lit/src/favicon.svg
similarity index 100%
rename from packages/create-vite/template-lit-element/src/favicon.svg
rename to packages/create-vite/template-lit/src/favicon.svg
diff --git a/packages/create-vite/template-lit-element/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js
similarity index 94%
rename from packages/create-vite/template-lit-element/src/my-element.js
rename to packages/create-vite/template-lit/src/my-element.js
index cc9236118dfb6a..83b11fa869c26c 100644
--- a/packages/create-vite/template-lit-element/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-element/vite.config.js b/packages/create-vite/template-lit/vite.config.js
similarity index 87%
rename from packages/create-vite/template-lit-element/vite.config.js
rename to packages/create-vite/template-lit/vite.config.js
index 11ddab292226c2..45cfc00cd01365 100644
--- a/packages/create-vite/template-lit-element/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
index 93a9e89dc25ca9..58d45c82b4ab1b 100644
--- 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>
\ No newline at end of file