Update lit-starter-ts to lit-next

* Upgrades the source to work with lit-next
* Aligns the linting and formatting rules/settings & ignores with the monorepo
* Upgrades to the same version of typescript and tsconfig settings as the monorepo
* Upgrades the test runner from karma to web-test-runner
* Upgrades the dev server from es-dev-server to @web/dev-server

.eleventy.cjs

@@ -2,8 +2,12 @@ const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
-  eleventyConfig.addPassthroughCopy("docs-src/docs.css");
-  eleventyConfig.addPassthroughCopy("docs-src/.nojekyll");
+  eleventyConfig.addPassthroughCopy('docs-src/docs.css');
+  eleventyConfig.addPassthroughCopy('docs-src/.nojekyll');
+  eleventyConfig.addPassthroughCopy(
+    'node_modules/@webcomponents/webcomponentsjs'
+  );
+  eleventyConfig.addPassthroughCopy('node_modules/lit/polyfill-support.js');
   return {
     dir: {
       input: 'docs-src',

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/*
+docs/*
+docs-src/*
+rollup-config.js
+custom-elements.json

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
@@ -10,17 +11,41 @@
     "sourceType": "module"
   },
   "plugins": ["@typescript-eslint"],
+  "env": {
+    "browser": true
+  },
   "rules": {
-    "no-unexpected-multiline": "off",
-    "@typescript-eslint/indent": "off",
+    "no-prototype-builtins": "off",
+    "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
         "argsIgnorePattern": "^_"
       }
     ]
+  },
+  "overrides": [
+    {
+      "files": ["rollup.config.js", "web-test-runner.config.js"],
+      "env": {
+        "node": true
       }
+    },
+    {
+      "files": [
+        "*_test.ts",
+        "**/custom_typings/*.ts",
+        "packages/lit-ssr/src/test/integration/tests/**",
+        "packages/lit-ssr/src/lib/util/parse5-utils.ts"
+      ],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
 }

.gitignore

@@ -1,7 +1,7 @@
 /node_modules/
 /lib/
 /test/
-
+custom-elements.json
 # top level source
 my-element.js
 my-element.js.map

.vscode/extensions.json

@@ -3,11 +3,7 @@
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
   // List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-		"runem.lit-plugin"
-	],
+  "recommendations": ["runem.lit-plugin"],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-	"unwantedRecommendations": [
-
-	]
+  "unwantedRecommendations": []
 }

README.md

@@ -30,7 +30,11 @@ Both the TypeScript compiler and lit-analyzer are configured to be very strict.
 
 ## Testing
 
-This sample uses Karma, Chai, Mocha, and the open-wc test helpers for testing. See the [open-wc testing documentation](https://open-wc.org/testing/testing.html) for more information.
+This sample modern-web.dev's
+[@web/test-runner](https://www.npmjs.com/package/@web/test-runner) along with
+Mocha, Chai, and some related helpers for testing. See the
+[modern-web.dev testing documentation](https://modern-web.dev/docs/test-runner/overview) for
+more information.
 
 Tests can be run with the `test` script:
 
@@ -40,7 +44,7 @@ npm test
 
 ## Dev Server
 
-This sample uses open-wc's [es-dev-server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) for previewing the project without additional build steps. ES dev server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers.
+This sample uses modern-web.dev's [@web/dev-server](https://www.npmjs.com/package/@web/dev-server) for previewing the project without additional build steps. Web Dev Server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers. See [modern-web.dev's Web Dev Server documentation](https://modern-web.dev/docs/dev-server/overview/) for more information.
 
 To run the dev server and open the project in a new browser tab:
 
@@ -53,15 +57,16 @@ There is a development HTML file located at `/dev/index.html` that you can view
 ## Editing
 
 If you use VS Code, we highly reccomend the [lit-plugin extension](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin), which enables some extremely useful features for lit-html templates:
-  - Syntax highlighting
-  - Type-checking
-  - Code completion
-  - Hover-over docs
-  - Jump to definition
-  - Linting
-  - Quick Fixes
 
-  The project is setup to reccomend lit-plugin to VS Code users if they don't already have it installed.
+- Syntax highlighting
+- Type-checking
+- Code completion
+- Hover-over docs
+- Jump to definition
+- Linting
+- Quick Fixes
+
+The project is setup to reccomend lit-plugin to VS Code users if they don't already have it installed.
 
 ## Linting
 

custom-elements.json

@@ -33,6 +33,24 @@
           "description": "The number of times the button has been clicked.",
           "type": "number",
           "default": "0"
+        },
+        {
+          "name": "renderRoot",
+          "description": "Node or ShadowRoot into which element DOM should be rendered. Defaults\nto an open shadowRoot.",
+          "type": "HTMLElement | ShadowRoot"
+        },
+        {
+          "name": "isUpdatePending",
+          "type": "boolean"
+        },
+        {
+          "name": "hasUpdated",
+          "type": "boolean"
+        },
+        {
+          "name": "updateComplete",
+          "description": "Returns a Promise that resolves when the element has completed updating.\nThe Promise value is a boolean that is `true` if the element completed the\nupdate without triggering another update. The Promise result is `false` if\na property was set inside `updated()`. If the Promise is rejected, an\nexception was thrown during the update.\n\nTo await additional asynchronous work, override the `getUpdateComplete`\nmethod. For example, it is sometimes useful to await a rendered element\nbefore fulfilling this Promise. To do this, first await\n`super.getUpdateComplete()`, then any subsequent state.",
+          "type": "Promise<boolean>"
         }
       ],
       "slots": [

dev/README.md

@@ -1,2 +1 @@
-
 This directory contains HTML files containing your element for development. By running `npm run build:watch` and `npm run serve` you can edit and see changes without bundling.

dev/index.html

@@ -1,9 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>&lt;my-element> Demo</title>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../my-element.js"></script>
     <style>
       p {

docs-src/.eleventyignore

@@ -0,0 +1,2 @@
+# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
+_*.md

docs-src/_data/api.11tydata.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 
 module.exports = () => {
-  const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
+  const customElements = JSON.parse(
+    fs.readFileSync('custom-elements.json', 'utf-8')
+  );
   return {
     customElements,
   };

docs-src/_includes/example.11ty.cjs

@@ -4,8 +4,7 @@ const relative = require('./relative-path.cjs');
 /**
  * This template extends the page template and adds an examples list.
  */
-module.exports = function(data) {
-
+module.exports = function (data) {
   return page({
     ...data,
     content: renderExample(data),
@@ -18,13 +17,22 @@ const renderExample = ({name, content, collections, page}) => {
     <section class="examples">
       <nav class="collection">
         <ul>
-          ${collections.example === undefined
+          ${
+            collections.example === undefined
               ? ''
-              : collections.example.map((post) => `
+              : collections.example
+                  .map(
+                    (post) => `
                   <li class=${post.url === page.url ? 'selected' : ''}>
-                    <a href="${relative(page.url, post.url)}">${post.data.description.replace('<', '&lt;')}</a>
+                    <a href="${relative(
+                      page.url,
+                      post.url
+                    )}">${post.data.description.replace('<', '&lt;')}</a>
                   </li>
-                `).join('')}
+                `
+                  )
+                  .join('')
+          }
         </ul>
       </nav>
       <div>

docs-src/_includes/footer.11ty.cjs

@@ -1,9 +1,9 @@
-module.exports = function(data) {
+module.exports = function (data) {
   return `
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>`;
 };

docs-src/_includes/header.11ty.cjs

@@ -1,4 +1,4 @@
-module.exports = function(data) {
+module.exports = function (data) {
   return `
 <header>
   <h1>&lt;my-element></h1>

docs-src/_includes/nav.11ty.cjs

@@ -1,6 +1,6 @@
 const relative = require('./relative-path.cjs');
 
-module.exports = function({page}) {
+module.exports = function ({page}) {
   return `
 <nav>
   <a href="${relative(page.url, '/')}">Home</a>

docs-src/_includes/page.11ty.cjs

@@ -3,7 +3,7 @@ const footer = require('./footer.11ty.cjs');
 const nav = require('./nav.11ty.cjs');
 const relative = require('./relative-path.cjs');
 
-module.exports = function(data) {
+module.exports = function (data) {
   const {title, page, content} = data;
   return `
 <!doctype html>
@@ -16,7 +16,12 @@ module.exports = function(data) {
     <link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
-    <script type="module" src="${relative(page.url, '/my-element.bundled.js')}"></script>
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
+    <script type="module" src="${relative(
+      page.url,
+      '/my-element.bundled.js'
+    )}"></script>
   </head>
   <body>
     ${header()}

docs-src/api.11ty.cjs

@@ -15,7 +15,9 @@ module.exports = class Docs {
     const tags = customElements.tags;
     return `
       <h1>API</h1>
-      ${tags.map((tag) => `
+      ${tags
+        .map(
+          (tag) => `
         <h2>&lt;${tag.name}></h2>
         <div>
           ${tag.description}
@@ -23,41 +25,40 @@ module.exports = class Docs {
         ${renderTable(
           'Attributes',
           ['name', 'description', 'type', 'default'],
-          tag.attributes)}
+          tag.attributes
+        )}
         ${renderTable(
           'Properties',
           ['name', 'attribute', 'description', 'type', 'default'],
-          tag.properties)}  
-        ${/*
+          tag.properties
+        )}  
+        ${
+          /*
            * Methods are not output by web-component-analyzer yet (a bug), so
            * this is a placeholder so that at least _something_ will be output
            * when that is fixed, and element maintainers will hopefully have a
            * signal to update this file to add the neccessary columns.
            */
-          renderTable(
-          'Methods',
-          ['name', 'description'],
-          tag.methods)}
-        ${renderTable(
-          'Events',
-          ['name', 'description'],
-          tag.events)}    
-        ${renderTable(
-          'Slots',
-          ['name', 'description'],
-          tag.slots)}  
+          renderTable('Methods', ['name', 'description'], tag.methods)
+        }
+        ${renderTable('Events', ['name', 'description'], tag.events)}    
+        ${renderTable('Slots', ['name', 'description'], tag.slots)}  
         ${renderTable(
           'CSS Shadow Parts',
           ['name', 'description'],
-          tag.cssParts)}
+          tag.cssParts
+        )}
         ${renderTable(
           'CSS Custom Properties',
           ['name', 'description'],
-          tag.cssProperties)}
-        `).join('')}
+          tag.cssProperties
+        )}
+        `
+        )
+        .join('')}
     `;
   }
-}
+};
 
 /**
  * Renders a table of data, plucking the given properties from each item in
@@ -65,7 +66,7 @@ module.exports = class Docs {
  */
 const renderTable = (name, properties, data) => {
   if (data === undefined) {
-    return ''
+    return '';
   }
   return `
     <h3>${name}</h3>
@@ -73,13 +74,17 @@ const renderTable = (name, properties, data) => {
       <tr>
         ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
       </tr>
-      ${data.map((i) => `
+      ${data
+        .map(
+          (i) => `
         <tr>
           ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
         </tr>
-      `).join('')}
-    </table>
       `
+        )
+        .join('')}
+    </table>
+  `;
 };
 
 const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

docs-src/examples/index.md

@@ -19,10 +19,10 @@ description: A basic example
 <h3>CSS</h3>
 
 ```css
-  p {
+p {
   border: solid 1px blue;
   padding: 8px;
-  }
+}
 ```
 
 <h3>HTML</h3>

docs-src/index.md

@@ -55,12 +55,15 @@ title: <my-element> ⌲ Home
 ```js
 import {html, render} from 'lit-html';
 
-const name="lit-html";
+const name = 'lit-html';
 
-render(html`
+render(
+  html`
     <h2>This is a &lt;my-element&gt;</h2>
     <my-element .name=${name}></my-element>
-`, document.body);
+  `,
+  document.body
+);
 ```
 
   </div>

docs-src/install.md

@@ -20,11 +20,13 @@ npm CDNs like [unpkg.com]() can directly serve files that have been published to
 For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specificers to full URLs.
 
 ### HTML
+
 ```html
 <script type="module" src="https://unpkg.com/my-element?module"></script>
 ```
 
 ### JavaScript
+
 ```html
 import {MyElement} from 'https://unpkg.com/my-element?module';
 ```

docs/_README/index.html

@@ -1,4 +0,0 @@
-<p>This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the <a href="11ty.dev">eleventy</a> static site generator.</p>
-<p>The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
-<p>To view the site locally, run <code>npm run docs:serve</code>.</p>
-<p>To edit the site, add to or edit the files in this directory then run <code>npm run docs</code> to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.</p>

docs/api/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../my-element.bundled.js"></script>
   </head>
   <body>
@@ -65,6 +67,32 @@
           <td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
         </tr>
       
+        <tr>
+          <td>renderRoot</td><td>undefined</td><td>Node or ShadowRoot into which element DOM should be rendered. Defaults
+to an open shadowRoot.</td><td>HTMLElement | ShadowRoot</td><td>undefined</td>
+        </tr>
+      
+        <tr>
+          <td>isUpdatePending</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+        </tr>
+      
+        <tr>
+          <td>hasUpdated</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+        </tr>
+      
+        <tr>
+          <td>updateComplete</td><td>undefined</td><td>Returns a Promise that resolves when the element has completed updating.
+The Promise value is a boolean that is `true` if the element completed the
+update without triggering another update. The Promise result is `false` if
+a property was set inside `updated()`. If the Promise is rejected, an
+exception was thrown during the update.
+
+To await additional asynchronous work, override the `getUpdateComplete`
+method. For example, it is sometimes useful to await a rendered element
+before fulfilling this Promise. To do this, first await
+`super.getUpdateComplete()`, then any subsequent state.</td><td>Promise<boolean></td><td>undefined</td>
+        </tr>
+      
     </table>
     
         
@@ -104,7 +132,7 @@
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>
   </body>

docs/examples/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../my-element.bundled.js"></script>
   </head>
   <body>
@@ -53,7 +55,7 @@
   <p>This is child content</p>
 </my-element>
 <h3>CSS</h3>
-<pre class="language-css"><code class="language-css">  <span class="token selector">p</span> <span class="token punctuation">{</span><br>    <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br>    <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br>  <span class="token punctuation">}</span></code></pre>
+<pre class="language-css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br>  <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br>  <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
 <h3>HTML</h3>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><br>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
 
@@ -66,7 +68,7 @@
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>
   </body>

docs/examples/name-property/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="../../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../../prism-okaidia.css" rel="stylesheet" />
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../../my-element.bundled.js"></script>
   </head>
   <body>
@@ -56,7 +58,7 @@
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>
   </body>

docs/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="prism-okaidia.css" rel="stylesheet" />
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="my-element.bundled.js"></script>
   </head>
   <body>
@@ -52,7 +54,7 @@
 <section class="columns">
   <div>
 <p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
-<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span>html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>  &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br>  &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
+<pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span><br><br><span class="token function">render</span><span class="token punctuation">(</span><br>  html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br>    &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br>    &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element><br>  </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span><br>  document<span class="token punctuation">.</span>body<br><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
   </div>
   <div>
 <h2>This is a &lt;my-element&gt;</h2>
@@ -66,7 +68,7 @@
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>
   </body>

docs/install/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="../docs.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
     <link href="../prism-okaidia.css" rel="stylesheet" />
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="/node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../my-element.bundled.js"></script>
   </head>
   <body>
@@ -44,7 +46,7 @@
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
   </p>
 </footer>
   </body>

karma.conf.cjs

@@ -1,24 +0,0 @@
-const {createDefaultConfig} = require('@open-wc/testing-karma');
-const merge = require('deepmerge');
-
-module.exports = (config) => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      frameworks: ['mocha', 'chai'],
-      client: {
-        mocha: {ui: 'tdd'},
-      },
-      files: [
-        {
-          pattern: config.grep ? config.grep : 'test/**/*_test.js',
-          type: 'module',
-        },
-      ],
-      // See the karma-esm docs for all options
-      esm: {
-        nodeResolve: true,
-      },
-    })
-  );
-  return config;
-};

package.json

@@ -1,5 +1,6 @@
 {
-  "name": "lit-element-starter-ts",
+  "name": "@lit/lit-starter-ts",
+  "private": true,
   "version": "0.0.0",
   "description": "A simple web component",
   "main": "my-element.js",
@@ -12,57 +13,59 @@
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer",
-    "format": "prettier src/* --write",
+    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
     "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
     "docs:clean": "rimraf docs",
     "docs:gen": "eleventy --config=.eleventy.cjs",
     "docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
     "docs:build": "rollup -c --file docs/my-element.bundled.js",
     "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
-    "docs:serve": "es-dev-server --root-dir=docs --node-resolve --watch",
+    "docs:serve": "wds --root-dir=docs --node-resolve --watch",
     "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
-    "serve": "es-dev-server --node-resolve --watch",
-    "test": "karma start karma.conf.cjs",
-    "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
-    "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
-    "test:prune-snapshots": "karma start karma.conf.cjs --prune-snapshots",
+    "serve": "wds --watch",
+    "test": "wtr",
+    "test:watch": "npm run test -- --watch",
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
   },
   "keywords": [
     "web-components",
     "lit-element",
-    "typescript"
+    "typescript",
+    "lit"
   ],
   "author": "The Polymer Authors",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "lit-element": "^2.3.1"
+    "lit": "^2.0.0-pre.1",
+    "lit-element": "^3.0.0-pre.2"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.10.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
-    "@open-wc/testing": "^2.5.10",
+    "@esm-bundle/chai": "^4.1.5",
+    "@open-wc/testing": "^2.5.32",
     "@open-wc/testing-karma": "^3.3.11",
-    "@rollup/plugin-replace": "^2.3.1",
-    "@types/chai": "^4.2.11",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "@types/mocha": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
-    "chai": "^4.2.0",
+    "@web/dev-server": "0.0.29",
+    "@web/dev-server-legacy": "^0.1.4",
+    "@web/dev-server-rollup": "^0.2.7",
+    "@web/test-runner": "^0.10.2",
+    "@web/test-runner-mocha": "^0.3.5",
+    "@web/test-runner-playwright": "^0.5.7",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
     "deepmerge": "^4.2.2",
-    "es-dev-server": "^1.46.1",
     "eslint": "^6.8.0",
-    "karma": "^4.4.1",
-    "karma-chai": "^0.1.0",
-    "karma-mocha": "^1.3.0",
     "lit-analyzer": "^1.1.10",
     "mocha": "^7.1.1",
     "prettier": "^2.0.4",
     "rimraf": "^3.0.2",
-    "rollup": "^1.32.1",
-    "rollup-plugin-filesize": "^7.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.3.0",
+    "rollup": "^2.28.2",
+    "rollup-plugin-summary": "^1.2.3",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^3.8.3",
     "web-component-analyzer": "^1.0.3"
   }

rollup.config.js

@@ -12,9 +12,9 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import filesize from 'rollup-plugin-filesize';
+import summary from 'rollup-plugin-summary';
 import {terser} from 'rollup-plugin-terser';
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 
 export default {
@@ -32,6 +32,7 @@ export default {
     replace({'Reflect.decorate': 'undefined'}),
     resolve(),
     terser({
+      ecma: 2017,
       module: true,
       warnings: true,
       mangle: {
@@ -40,8 +41,6 @@ export default {
         },
       },
     }),
-    filesize({
-      showBrotliSize: true,
-    }),
+    summary(),
   ],
 };

src/my-element.ts

@@ -12,7 +12,8 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import {LitElement, html, customElement, property, css} from 'lit-element';
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators';
 
 /**
  * An example element.

src/test/my-element_test.ts

@@ -1,4 +1,5 @@
 import {MyElement} from '../my-element.js';
+
 import {fixture, html} from '@open-wc/testing';
 
 const assert = chai.assert;

tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    "target": "es2017",
-    "module": "es2015",
-    "lib": ["es2017", "dom", "dom.iterable"],
+    "target": "es2020",
+    "module": "es2020",
+    "lib": ["es2020", "DOM", "DOM.Iterable"],
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
+    "inlineSources": true,
     "outDir": "./",
     "rootDir": "./src",
     "strict": true,
@@ -13,6 +14,8 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,

web-dev-server.config.js

@@ -0,0 +1,14 @@
+import {legacyPlugin} from '@web/dev-server-legacy';
+
+export default {
+  nodeResolve: true,
+  preserveSymlinks: true,
+  plugins: [
+    legacyPlugin({
+      polyfills: {
+        // Manually imported in index.html file
+        webcomponents: false,
+      },
+    }),
+  ],
+};

web-test-runner.config.js

@@ -0,0 +1,39 @@
+import {playwrightLauncher} from '@web/test-runner-playwright';
+import {legacyPlugin} from '@web/dev-server-legacy';
+
+let commandLineBrowsers;
+try {
+  commandLineBrowsers = process.env.BROWSERS?.split(',').map((b) =>
+    playwrightLauncher({product: b})
+  );
+} catch {
+  console.warn(`BROWSER ${process.env.BROWSERS} unknown; using defaults`);
+}
+
+// https://modern-web.dev/docs/test-runner/cli-and-configuration/
+export default {
+  rootDir: '.',
+  files: ['./test/**/*_test.js'],
+  nodeResolve: true,
+  preserveSymlinks: true,
+  browsers: commandLineBrowsers ?? [
+    playwrightLauncher({product: 'chromium'}),
+    playwrightLauncher({product: 'firefox'}),
+    playwrightLauncher({product: 'webkit'}),
+  ],
+  testFramework: {
+    // https://mochajs.org/api/mocha
+    config: {
+      ui: 'tdd',
+    },
+  },
+  plugins: [
+    // Detect browsers without modules (e.g. IE11) and transform to SystemJS
+    // (https://modern-web.dev/docs/dev-server/plugins/legacy/).
+    legacyPlugin({
+      polyfills: {
+        webcomponents: true,
+      },
+    }),
+  ],
+};