Update to Lit 2.0.0 (manually)

Will attempt to get this back to syncing with monorepo history per https://github.com/lit/lit#exporting-starter-templates in a follow-up.
LaagWater · Sep 21, 2021 · a2c3874 · a2c3874
1 parent 1f62cf4
commit a2c3874
Show file tree

Hide file tree

Showing 19 changed files with 31,057 additions and 28,676 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# @lit/lit-starter-ts
+
+## 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]
diff --git a/README.md b/README.md
@@ -36,12 +36,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.
@@ -52,7 +60,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
 
@@ -82,7 +90,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 committing files, but this can be added with Husky and and `pretty-quick`. See the [prettier.io](https://prettier.io/) site for instructions.
 

diff --git a/docs-src/_includes/footer.11ty.cjs b/docs-src/_includes/footer.11ty.cjs
@@ -3,7 +3,7 @@ module.exports = function (data) {
 <footer>
   <p>
     Made with
-    <a href="https://github.com/PolymerLabs/lit-starter-ts">lit-starter-ts</a>
+    <a href="https://github.com/lit/lit-element-starter-ts">lit-starter-ts</a>
   </p>
 </footer>`;
 };
diff --git a/docs-src/api.11ty.cjs b/docs-src/api.11ty.cjs
@@ -11,80 +11,117 @@ 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
-        .map(
-          (tag) => `
-        <h2>&lt;${tag.name}></h2>
-        <div>
-          ${tag.description}
-        </div>
-        ${renderTable(
-          'Attributes',
-          ['name', 'description', 'type', 'default'],
-          tag.attributes
-        )}
-        ${renderTable(
-          'Properties',
-          ['name', 'attribute', 'description', 'type', 'default'],
-          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(
-          'CSS Shadow Parts',
-          ['name', 'description'],
-          tag.cssParts
-        )}
-        ${renderTable(
-          'CSS Custom Properties',
-          ['name', 'description'],
-          tag.cssProperties
-        )}
-        `
-        )
-        .join('')}
-    `;
+     <h1>API</h1>
+     ${elements
+       .map(
+         (element) => `
+       <h2>&lt;${element.tagName}></h2>
+       <div>
+         ${element.description}
+       </div>
+       ${renderTable(
+         'Attributes',
+         ['name', 'description', 'type.text', 'default'],
+         element.attributes
+       )}
+       ${renderTable(
+         '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')
+           .map((m) => ({
+             ...m,
+             parameters: renderTable(
+               '',
+               ['name', 'description', 'type.text'],
+               m.parameters
+             ),
+           }))
+       )}
+       ${renderTable('Events', ['name', 'description'], element.events)}    
+       ${renderTable(
+         'Slots',
+         [['name', '(default)'], 'description'],
+         element.slots
+       )}  
+       ${renderTable(
+         'CSS Shadow Parts',
+         ['name', 'description'],
+         element.cssParts
+       )}
+       ${renderTable(
+         'CSS Custom Properties',
+         ['name', 'description'],
+         element.cssProperties
+       )}
+       `
+       )
+       .join('')}
+   `;
   }
 };
 
+/**
+ * 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>
-    <table>
-      <tr>
-        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
-      </tr>
-      ${data
-        .map(
-          (i) => `
-        <tr>
-          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
-        </tr>
-      `
-        )
-        .join('')}
-    </table>
-  `;
+   ${name ? `<h3>${name}</h3>` : ''}
+   <table>
+     <tr>
+       ${properties
+         .map(
+           (p) =>
+             `<th>${capitalize(
+               (Array.isArray(p) ? p[0] : p).split('.')[0]
+             )}</th>`
+         )
+         .join('')}
+     </tr>
+     ${data
+       .map(
+         (i) => `
+       <tr>
+         ${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
+       </tr>
+     `
+       )
+       .join('')}
+   </table>
+ `;
 };
 
 const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
diff --git a/docs-src/docs.css b/docs-src/docs.css
@@ -159,4 +159,5 @@ td, th {
   border: solid 1px #aaa;
   padding: 4px;
   text-align: left;
+  vertical-align: top;
 }