Merge lit-next into master

.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',
+    },
   };
 };

.eslintignore

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

.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
+      }
+    }
+  ]
 }

.gitignore

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

.prettierrc.json

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

.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": []
 }

LICENSE

@@ -1,20 +1,20 @@
 BSD 3-Clause License
 
-Copyright (c) 2019, The Polymer Authors. All rights reserved.
+Copyright (c) 2019 Google LLC. All rights reserved.
 
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
 
-* Redistributions in binary form must reproduce the above copyright notice,
-  this list of conditions and the following disclaimer in the documentation
-  and/or other materials provided with the distribution.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-* Neither the name of the copyright holder nor the names of its
-  contributors may be used to endorse or promote products derived from
-  this software without specific prior written permission.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
@@ -25,4 +25,4 @@ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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.

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>"
-        }
-      ]
     }
   ]
 }

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,15 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
 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-js">lit-element-starter-js</a>
+    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</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()}