Merge branch 'master' of https://github.com/PolymerLabs/lit-element-starter-ts into clean-script

.eleventy.cjs

@@ -1,4 +1,4 @@
-const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -6,12 +6,12 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("docs-src/.nojekyll");
   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',
+    },
   };
 };

.eslintrc.json

@@ -9,17 +9,18 @@
     "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unexpected-multiline": "off",
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", {
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
         "argsIgnorePattern": "^_"
-    }]
+      }
+    ]
   }
 }

custom-elements.json

@@ -3,6 +3,7 @@
   "tags": [
     {
       "name": "my-element",
+      "path": "./src/my-element.ts",
       "description": "An example element.",
       "attributes": [
         {

docs/examples/index.html

@@ -53,9 +53,9 @@
   <p>This is child content</p>
 </my-element>
 <h3>CSS</h3>
-<pre class="language-css"><code class="language-css"><span class="highlight-line">  <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line">  <span class="token punctuation">}</span></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="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line">  <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></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+<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>
 
       </div>
     </section>

docs/examples/name-property/index.html

@@ -45,7 +45,7 @@
       <div>
         <p><my-element name="Earth"></my-element></p>
 <h3>HTML</h3>
-<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+<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 attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><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>
 
       </div>
     </section>

docs/index.html

@@ -32,7 +32,7 @@
 <section class="columns">
   <div>
 <p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
-<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+<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><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>
   </div>
   <div>
 <p><my-element></my-element></p>
@@ -42,7 +42,7 @@
 <section class="columns">
   <div>
 <p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
-<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
+<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 attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><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>
   </div>
   <div>
 <p><my-element name="HTML"></my-element></p>
@@ -52,7 +52,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="highlight-line"><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></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><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><span class="highlight-line">  &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2></span><br><span class="highlight-line">  &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></span><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>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>
   </div>
   <div>
 <h2>This is a &lt;my-element&gt;</h2>

docs/install/index.html

@@ -29,14 +29,14 @@
         <h1>Install</h1>
 <p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
 <h2>Local Installation</h2>
-<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">npm</span> i my-element</span></code></pre>
+<pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
 <h2>CDN</h2>
 <p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
 <p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specificers to full URLs.</p>
 <h3>HTML</h3>
-<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
 <h3>JavaScript</h3>
-<pre class="language-html"><code class="language-html"><span class="highlight-line">import {MyElement} from 'https://unpkg.com/my-element?module';</span></code></pre>
+<pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
 
       </main>
     </div>

docs/prism-okaidia.css

@@ -59,7 +59,7 @@ pre[class*="language-"] {
 	color: #f8f8f2;
 }
 
-.namespace {
+.token.namespace {
 	opacity: .7;
 }
 

karma.conf.cjs

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

package.json

@@ -9,7 +9,9 @@
     "build": "tsc",
     "build:watch": "tsc --watch",
     "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
-    "lint": "lit-analyzer && eslint 'src/**/*.ts'",
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
     "format": "prettier src/* --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",
@@ -27,41 +29,41 @@
     "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
   },
   "keywords": [
-    "web component",
+    "web-components",
     "lit-element",
     "typescript"
   ],
   "author": "The Polymer Authors",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "lit-element": "^2.2.1"
+    "lit-element": "^2.3.1"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.9.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
-    "@open-wc/testing": "^2.4.2",
-    "@open-wc/testing-karma": "^3.2.19",
-    "@rollup/plugin-replace": "^2.2.1",
-    "@types/chai": "^4.2.7",
-    "@types/mocha": "^5.2.7",
-    "@typescript-eslint/eslint-plugin": "^2.12.0",
-    "@typescript-eslint/parser": "^2.12.0",
+    "@11ty/eleventy": "^0.10.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "@open-wc/testing": "^2.5.10",
+    "@open-wc/testing-karma": "^3.3.11",
+    "@rollup/plugin-replace": "^2.3.1",
+    "@types/chai": "^4.2.11",
+    "@types/mocha": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^2.27.0",
+    "@typescript-eslint/parser": "^2.27.0",
     "chai": "^4.2.0",
     "deepmerge": "^4.2.2",
-    "es-dev-server": "^1.23.1",
-    "eslint": "^6.7.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.9",
-    "mocha": "^6.2.2",
-    "prettier": "^1.19.1",
+    "lit-analyzer": "^1.1.10",
+    "mocha": "^7.1.1",
+    "prettier": "^2.0.4",
     "rimraf": "^3.0.2",
-    "rollup": "^1.27.13",
-    "rollup-plugin-filesize": "^6.2.1",
+    "rollup": "^1.32.1",
+    "rollup-plugin-filesize": "^7.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.1.3",
-    "typescript": "^3.7.2",
-    "web-component-analyzer": "^1.0.0"
+    "rollup-plugin-terser": "^5.3.0",
+    "typescript": "^3.8.3",
+    "web-component-analyzer": "^1.0.3"
   }
 }

rollup.config.js

@@ -42,6 +42,6 @@ export default {
     }),
     filesize({
       showBrotliSize: true,
-    })
-  ]
-}
+    }),
+  ],
+};

src/test/my-element_test.ts

@@ -4,7 +4,6 @@ import {fixture, html} from '@open-wc/testing';
 const assert = chai.assert;
 
 suite('my-element', () => {
-
   test('is defined', () => {
     const el = document.createElement('my-element');
     assert.instanceOf(el, MyElement);
@@ -12,32 +11,40 @@ suite('my-element', () => {
 
   test('renders with default values', async () => {
     const el = await fixture(html`<my-element></my-element>`);
-    assert.shadowDom.equal(el, `
+    assert.shadowDom.equal(
+      el,
+      `
       <h1>Hello, World!</h1>
       <button part="button">Click Count: 0</button>
       <slot></slot>
-    `);
+    `
+    );
   });
 
   test('renders with a set name', async () => {
     const el = await fixture(html`<my-element name="Test"></my-element>`);
-    assert.shadowDom.equal(el, `
+    assert.shadowDom.equal(
+      el,
+      `
       <h1>Hello, Test!</h1>
       <button part="button">Click Count: 0</button>
       <slot></slot>
-    `);
+    `
+    );
   });
 
   test('handles a click', async () => {
-    const el = await fixture(html`<my-element></my-element>`) as MyElement;
+    const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
     const button = el.shadowRoot!.querySelector('button')!;
     button.click();
     await el.updateComplete;
-    assert.shadowDom.equal(el, `
+    assert.shadowDom.equal(
+      el,
+      `
       <h1>Hello, World!</h1>
       <button part="button">Click Count: 1</button>
       <slot></slot>
-    `);
+    `
+    );
   });
-
 });

tsconfig.json

@@ -20,7 +20,7 @@
     "plugins": [
       {
         "name": "ts-lit-plugin",
-        "strict": true,
+        "strict": true
       }
     ]
   },