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
LaagWater · Jan 30, 2021 · fddb011 · fddb011
1 parent 6b7f29a
commit fddb011
Show file tree

Hide file tree

Showing 36 changed files with 5,581 additions and 373 deletions.
diff --git a/.eleventy.cjs b/.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',

diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+node_modules/*
+docs/*
+docs-src/*
+rollup-config.js
+custom-elements.json
diff --git a/.eslintrc.json b/.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"
+      }
+    }
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 /node_modules/
 /lib/
 /test/
-
+custom-elements.json
 # top level source
 my-element.js
 my-element.js.map

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,13 +1,9 @@
 {
-	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
-	// List of extensions which should be recommended for users of this workspace.
-	"recommendations": [
-		"runem.lit-plugin"
-	],
-	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-	"unwantedRecommendations": [
-
-	]
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": ["runem.lit-plugin"],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
 }
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# LitElement TypeScript starter 
+# LitElement TypeScript starter
 
 This project includes a sample component using LitElement with TypeScript.
 
@@ -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
 

diff --git a/custom-elements.json b/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": [

diff --git a/dev/README.md b/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.
diff --git a/dev/index.html b/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 {

diff --git a/docs-src/.eleventyignore b/docs-src/.eleventyignore
@@ -0,0 +1,2 @@
+# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
+_*.md
diff --git a/docs-src/_data/api.11tydata.js b/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,
   };

diff --git a/docs-src/_includes/example.11ty.cjs b/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>

diff --git a/docs-src/_includes/footer.11ty.cjs b/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>`;
 };
diff --git a/docs-src/_includes/header.11ty.cjs b/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>

diff --git a/docs-src/_includes/nav.11ty.cjs b/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>

diff --git a/docs-src/_includes/page.11ty.cjs b/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()}

diff --git a/docs-src/api.11ty.cjs b/docs-src/api.11ty.cjs
@@ -15,71 +15,76 @@ 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}
         </div>
         ${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
  * `data`.
  */
 const renderTable = (name, properties, data) => {
   if (data === undefined) {
-    return ''
+    return '';
   }
   return `
     <h3>${name}</h3>
     <table>
       <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('')}
+      `
+        )
+        .join('')}
     </table>
-  `
+  `;
 };
 
 const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
Original file line number	Diff line number	Diff line change
		@@ -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.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
		_*.md