Update lit-starter-js 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

Author: kevinpschaaf

.eslintignore

@@ -98,6 +98,16 @@ packages/lit-starter-ts/docs-src/*
 packages/lit-starter-ts/**/rollup-config.js
 packages/lit-starter-ts/**/custom-elements.json
 
+packages/lit-starter-js/node_modules/
+packages/lit-starter-js/**/custom-elements.json
+# only generated for size check
+packages/lit-starter-js/**/my-element.bundled.js
+packages/lit-starter-js/node_modules/*
+packages/lit-starter-js/docs/*
+packages/lit-starter-js/docs-src/*
+packages/lit-starter-js/**/rollup-config.js
+packages/lit-starter-js/**/custom-elements.json
+
 packages/localize/lib/
 packages/localize/lib_client/
 packages/localize/node_modules/

.eslintignore-sync

@@ -11,6 +11,8 @@ packages/lit-html/.gitignore
 packages/lit-ssr/.gitignore
 packages/lit-starter-ts/.gitignore
 packages/lit-starter-ts/.eslintignore
+packages/lit-starter-js/.gitignore
+packages/lit-starter-js/.eslintignore
 packages/localize/.gitignore
 packages/tests/.gitignore
 packages/reactive-element/.gitignore

.prettierignore

@@ -98,6 +98,16 @@ packages/lit-starter-ts/docs-src/*
 packages/lit-starter-ts/**/rollup-config.js
 packages/lit-starter-ts/**/custom-elements.json
 
+packages/lit-starter-js/node_modules/
+packages/lit-starter-js/**/custom-elements.json
+# only generated for size check
+packages/lit-starter-js/**/my-element.bundled.js
+packages/lit-starter-js/node_modules/*
+packages/lit-starter-js/docs/*
+packages/lit-starter-js/docs-src/*
+packages/lit-starter-js/**/rollup-config.js
+packages/lit-starter-js/**/custom-elements.json
+
 packages/localize/lib/
 packages/localize/lib_client/
 packages/localize/node_modules/

.prettierignore-sync

@@ -11,6 +11,8 @@ packages/lit-html/.gitignore
 packages/lit-ssr/.gitignore
 packages/lit-starter-ts/.gitignore
 packages/lit-starter-ts/.eslintignore
+packages/lit-starter-js/.gitignore
+packages/lit-starter-js/.eslintignore
 packages/localize/.gitignore
 packages/tests/.gitignore
 packages/reactive-element/.gitignore

package.json

@@ -10,7 +10,7 @@
     "ignore-sync": "ignore-sync .",
     "lint": "eslint \"**/*.{js,ts}\"",
     "nuke": "rm -rf node_modules packages/*/{node_modules} && npm install && npm run bootstrap",
-    "test": "(cd packages/tests && npm test) && (cd packages/lit-ssr && npm test) && (cd packages/localize && npm test) && (cd packages/lit-starter-ts && npm test)"
+    "test": "(cd packages/tests && npm test) && (cd packages/lit-ssr && npm test) && (cd packages/localize && npm test) && (cd packages/lit-starter-ts && npm test) && (cd packages/lit-starter-js && npm test)"
   },
   "dependencies": {
     "lerna": "^3.22.1"

packages/lit-starter-js/.eleventy.cjs

@@ -1,17 +1,21 @@
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 
-module.exports = function(eleventyConfig) {
+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",
-      output: "docs"
+      input: 'docs-src',
+      output: 'docs',
     },
     templateExtensionAliases: {
-      "11ty.cjs": "11ty.js",
-      "11tydata.cjs": "11tydata.js"
-    }
+      '11ty.cjs': '11ty.js',
+      '11tydata.cjs': '11tydata.js',
+    },
   };
 };

packages/lit-starter-js/.eslintignore

@@ -2,3 +2,4 @@ node_modules/*
 docs/*
 docs-src/*
 rollup-config.js
+custom-elements.json

packages/lit-starter-js/.eslintrc.json

@@ -1,19 +1,26 @@
 {
-  "extends": [
-    "eslint:recommended"
-  ],
-  "env": {
-    "browser": true,
-    "mocha": true
-  },
+  "root": true,
+  "extends": ["eslint:recommended"],
+  "parser": "babel-eslint",
   "globals": {
     "chai": "readonly"
   },
-  "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module"
   },
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
   "rules": {
     "no-unexpected-multiline": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["rollup.config.js", "web-test-runner.config.js"],
+      "env": {
+        "node": true
+      }
+    }
+  ]
 }

packages/lit-starter-js/.gitignore

@@ -1,4 +1,4 @@
 /node_modules/
-
+custom-elements.json
 # only generated for size check
-my-element.bundled.js
+my-element.bundled.js

packages/lit-starter-js/.prettierrc.json

@@ -1,4 +1,7 @@
 {
+  "trailingComma": "es5",
+  "tabWidth": 2,
   "singleQuote": true,
-  "bracketSpacing": false
+  "bracketSpacing": false,
+  "arrowParens": "always"
 }

packages/lit-starter-js/.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": []
 }

packages/lit-starter-js/README.md

@@ -1,4 +1,4 @@
-# LitElement JavaScript starter 
+# LitElement JavaScript starter
 
 This project includes a sample component using LitElement with JavaScript.
 
@@ -12,7 +12,11 @@ npm i
 
 ## 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:
 
@@ -22,7 +26,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:
 
@@ -35,15 +39,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
 
@@ -95,7 +100,6 @@ This starter project doesn't include any build-time optimizations like bundling
 
 For information on building application projects that include LitElement components, see [Build for production](https://lit-element.polymer-project.org/guide/build) on the LitElement site.
 
-
 ## More information
 
 See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for more information.

packages/lit-starter-js/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": [
@@ -47,40 +65,6 @@
           "description": "The button"
         }
       ]
-    },
-    {
-      "name": "my-element",
-      "path": "./docs-/my-element.bundled.js",
-      "attributes": [
-        {
-          "name": "name",
-          "type": "string"
-        },
-        {
-          "name": "count",
-          "type": "number"
-        }
-      ],
-      "properties": [
-        {
-          "name": "name",
-          "attribute": "name",
-          "type": "string"
-        },
-        {
-          "name": "count",
-          "attribute": "count",
-          "type": "number"
-        },
-        {
-          "name": "hasUpdated",
-          "type": "number"
-        },
-        {
-          "name": "updateComplete",
-          "type": "Promise<any>"
-        }
-      ]
     }
   ]
 }

packages/lit-starter-js/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.

packages/lit-starter-js/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 {

packages/lit-starter-js/docs-src/.eleventyignore

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

packages/lit-starter-js/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,
   };

packages/lit-starter-js/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>

packages/lit-starter-js/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-js">lit-element-starter-js</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
   </p>
 </footer>`;
 };

packages/lit-starter-js/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>

packages/lit-starter-js/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>