Merge pull request #20 from lit/ga-release

Update to Lit 2.0.0 (manually)

Author: kevinpschaaf

CHANGELOG.md

@@ -0,0 +1,14 @@
+# @lit/lit-starter-js
+
+## 1.0.0
+
+### Patch Changes
+
+- [#2113](https://github.com/lit/lit/pull/2113) [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047) - Dependency upgrades including TypeScript 4.4.2
+
+- [#2103](https://github.com/lit/lit/pull/2103) [`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b) - Added Lit dev mode to test and serve commands, controlled via the MODE=dev or MODE=prod environment variables.
+
+- [#2117](https://github.com/lit/lit/pull/2117) [`eff2fbc7`](https://github.com/lit/lit/commit/eff2fbc7e45cfc2a7b8df21e18c84619dfbcb277) - Updated starter templates to use open-wc analyzer for generating custom-elements.json, and updated basic API docs generater included in the template to the new manifest format.
+
+- Updated dependencies [[`15a8356d`](https://github.com/lit/lit/commit/15a8356ddd59a1e80880a93acd21fadc9c24e14b), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5b2f3642`](https://github.com/lit/lit/commit/5b2f3642ff91931b5b01f8bdd2ed98aba24f1047), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`5fabe2b5`](https://github.com/lit/lit/commit/5fabe2b5ae4ab8fba9dc2d23a69105d32e4c0705), [`0312f3e5`](https://github.com/lit/lit/commit/0312f3e533611eb3f4f9381594485a33ad003b74)]:
+  - [email protected]

README.md

@@ -18,12 +18,20 @@ 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:
+Tests can be run with the `test` script, which will run your tests against Lit's development mode (with more verbose errors) as well as against Lit's production mode:
 
 ```bash
 npm test
 ```
 
+For local testing during development, the `test:dev:watch` command will run your tests in Lit's development mode (with verbose errors) on every change to your source files:
+
+```bash
+npm test:watch
+```
+
+Alternatively the `test:prod` and `test:prod:watch` commands will run your tests in Lit's production mode.
+
 ## Dev Server
 
 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.
@@ -34,7 +42,7 @@ To run the dev server and open the project in a new browser tab:
 npm run serve
 ```
 
-There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html.
+There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html. Note that this command will serve your code using Lit's development mode (with more verbose errors). To serve your code against Lit's production mode, use `npm run serve:prod`.
 
 ## Editing
 
@@ -64,7 +72,7 @@ npm run lint
 
 ## Formatting
 
-[Prettier](https://prettier.io/) is used for code formatting. It has been pre-configured according to the Polymer Project's style. You can change this in `.prettierrc.json`.
+[Prettier](https://prettier.io/) is used for code formatting. It has been pre-configured according to the Lit's style. You can change this in `.prettierrc.json`.
 
 Prettier has not been configured to run when commiting files, but this can be added with Husky and and `pretty-quick`. See the [prettier.io](https://prettier.io/) site for instructions.
 
@@ -98,8 +106,8 @@ The site will usually be served at http://localhost:8000.
 
 This starter project doesn't include any build-time optimizations like bundling or minification. We recommend publishing components as unoptimized JavaScript modules, and performing build-time optimizations at the application level. This gives build tools the best chance to deduplicate code, remove dead code, and so on.
 
-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.
+For information on building application projects that include LitElement components, see [Build for production](https://lit.dev/docs/tools/production/) on the LitElement site.
 
 ## More information
 
-See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for more information.
+See [Get started](https://lit.dev/docs/getting-started/) on the Lit site for more information.

docs-src/.DS_Store

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

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

@@ -11,47 +11,67 @@ module.exports = class Docs {
   }
 
   render(data) {
-    const customElements = data.api['11tydata'].customElements;
-    const tags = customElements.tags;
+    const manifest = data.api['11tydata'].customElements;
+    const elements = manifest.modules.reduce(
+      (els, module) =>
+        els.concat(
+          module.declarations?.filter((dec) => dec.customElement) ?? []
+        ),
+      []
+    );
     return `
       <h1>API</h1>
-      ${tags
+      ${elements
         .map(
-          (tag) => `
-        <h2>&lt;${tag.name}></h2>
+          (element) => `
+        <h2>&lt;${element.tagName}></h2>
         <div>
-          ${tag.description}
+          ${element.description}
         </div>
         ${renderTable(
           'Attributes',
-          ['name', 'description', 'type', 'default'],
-          tag.attributes
+          ['name', 'description', 'type.text', 'default'],
+          element.attributes
         )}
         ${renderTable(
           'Properties',
-          ['name', 'attribute', 'description', 'type', 'default'],
-          tag.properties
+          ['name', 'attribute', 'description', 'type.text', 'default'],
+          element.members.filter((m) => m.kind === 'field')
+        )}  
+        ${renderTable(
+          'Methods',
+          ['name', 'parameters', 'description', 'return.type.text'],
+          element.members
+            .filter(
+              (m) =>
+                m.kind === 'method' &&
+                m.privacy !== 'private' &&
+                m.name[0] !== '_'
+            )
+            .map((m) => ({
+              ...m,
+              parameters: renderTable(
+                '',
+                ['name', 'description', 'type.text'],
+                m.parameters
+              ),
+            }))
+        )}
+        ${renderTable('Events', ['name', 'description'], element.events)}    
+        ${renderTable(
+          'Slots',
+          [['name', '(default)'], 'description'],
+          element.slots
         )}  
-        ${
-          /*
-           * 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(
           'CSS Shadow Parts',
           ['name', 'description'],
-          tag.cssParts
+          element.cssParts
         )}
         ${renderTable(
           'CSS Custom Properties',
           ['name', 'description'],
-          tag.cssProperties
+          element.cssProperties
         )}
         `
         )
@@ -60,25 +80,47 @@ module.exports = class Docs {
   }
 };
 
+/**
+ * Reads a (possibly deep) path off of an object.
+ */
+const get = (obj, path) => {
+  let fallback = '';
+  if (Array.isArray(path)) {
+    [path, fallback] = path;
+  }
+  const parts = path.split('.');
+  while (obj && parts.length) {
+    obj = obj[parts.shift()];
+  }
+  return obj == null || obj === '' ? fallback : obj;
+};
+
 /**
  * Renders a table of data, plucking the given properties from each item in
  * `data`.
  */
 const renderTable = (name, properties, data) => {
-  if (data === undefined) {
+  if (data === undefined || data.length === 0) {
     return '';
   }
   return `
-    <h3>${name}</h3>
+    ${name ? `<h3>${name}</h3>` : ''}
     <table>
       <tr>
-        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
+        ${properties
+          .map(
+            (p) =>
+              `<th>${capitalize(
+                (Array.isArray(p) ? p[0] : p).split('.')[0]
+              )}</th>`
+          )
+          .join('')}
       </tr>
       ${data
         .map(
           (i) => `
         <tr>
-          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
+          ${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
         </tr>
       `
         )

docs-src/api.11ty.cjs

@@ -159,4 +159,5 @@ td, th {
   border: solid 1px #aaa;
   padding: 4px;
   text-align: left;
+  vertical-align: top;
 }

docs-src/docs.css

@@ -43,11 +43,11 @@ <h3>Attributes</h3>
       </tr>
 
         <tr>
-          <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+          <td>name</td><td>The name to say "Hello" to.</td><td>string</td><td></td>
         </tr>
 
         <tr>
-          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
+          <td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td></td>
         </tr>
 
     </table>
@@ -60,43 +60,53 @@ <h3>Properties</h3>
       </tr>
 
         <tr>
-          <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
+          <td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>'World'</td>
         </tr>
 
         <tr>
           <td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
         </tr>
 
+    </table>
+    
+        
+    <h3>Methods</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Parameters</th><th>Description</th><th>Return</th>
+      </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>
+          <td>sayHello</td><td>
+    
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th><th>Type</th>
+      </tr>
 
         <tr>
-          <td>isUpdatePending</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+          <td>name</td><td>The name to say "Hello" to</td><td>string</td>
         </tr>
 
-        <tr>
-          <td>hasUpdated</td><td>undefined</td><td>undefined</td><td>boolean</td><td>undefined</td>
+    </table>
+  </td><td>Formats a greeting</td><td>string</td>
         </tr>
 
+    </table>
+  
+        
+    <h3>Events</h3>
+    <table>
+      <tr>
+        <th>Name</th><th>Description</th>
+      </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>
+          <td>count-changed</td><td>Indicates when the count changes</td>
         </tr>
 
     </table>
-    
-        
-            
+      
 
     <h3>Slots</h3>
     <table>
@@ -105,7 +115,7 @@ <h3>Slots</h3>
       </tr>
 
         <tr>
-          <td></td><td>This element has a slot</td>
+          <td>(default)</td><td>This element has a slot</td>
         </tr>
 
     </table>
@@ -132,7 +142,7 @@ <h3>CSS Shadow Parts</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/api/index.html

@@ -159,4 +159,5 @@ td, th {
   border: solid 1px #aaa;
   padding: 4px;
   text-align: left;
+  vertical-align: top;
 }

docs/docs.css

@@ -68,7 +68,7 @@ <h3>HTML</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/examples/index.html

@@ -58,7 +58,7 @@ <h3>HTML</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/examples/name-property/index.html

@@ -68,7 +68,7 @@ <h2>This is a &lt;my-element&gt;</h2>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>

docs/index.html

@@ -46,7 +46,7 @@ <h3>JavaScript</h3>
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-js">lit-starter-js</a>
+    <a href="https://github.com/lit/lit-element-starter-js">lit-starter-js</a>
   </p>
 </footer>
   </body>