wip: manifest v1 and lit 2

Author: bennypowers

package.json

@@ -44,11 +44,10 @@
     "!lib/fixtures"
   ],
   "dependencies": {
-    "@types/dompurify": "^2.0.4",
-    "dompurify": "^2.0.15",
+    "@types/dompurify": "^2.3.1",
+    "dompurify": "^2.3.3",
     "highlight-ts": "9.12.1-2",
-    "lit-element": "^2.0.0",
-    "lit-html": "^1.0.0",
+    "lit": "^2.0.2",
     "marked": "^2.0.0",
     "tslib": "^2.3.1"
   },
@@ -61,10 +60,10 @@
     "@web/rollup-plugin-html": "^1.10.1",
     "deepmerge": "4.2.2",
     "eslint": "^8.0.0",
-    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-lit": "1.3.0",
+    "eslint-plugin-lit": "1.6.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-wc": "^1.3.2",
     "lint-staged": "^11.2.3",

src/api-demo-base.ts

@@ -1,26 +1,30 @@
-import { LitElement, html, property, TemplateResult } from 'lit-element';
-import { until } from 'lit-html/directives/until.js';
-import { ElementPromise } from './lib/types.js';
+import type * as Manifest from 'custom-elements-manifest/schema';
+import type { TemplateResult } from 'lit';
+
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { until } from 'lit/directives/until.js';
 import { ApiViewerMixin, emptyDataWarning } from './api-viewer-mixin.js';
 import './api-demo-content.js';
+import { getElements } from './lib/utils.js';
 
 async function renderDemo(
-  jsonFetched: ElementPromise,
+  jsonFetched: Promise<Manifest.Package | null>,
   selected?: string,
   id?: number,
   exclude = ''
 ): Promise<TemplateResult> {
-  const elements = await jsonFetched;
+  const elements = await getElements(jsonFetched);
 
   const index = elements.findIndex((el) => el.name === selected);
 
   return elements.length
     ? html`
         <api-demo-content
-          .elements="${elements}"
-          .selected="${index >= 0 ? index : 0}"
-          .exclude="${exclude}"
-          .vid="${id}"
+          .elements=${elements}
+          .selected=${index >= 0 ? index : 0}
+          .exclude=${exclude}
+          .vid=${id}
         ></api-demo-content>
       `
     : emptyDataWarning;
@@ -42,7 +46,12 @@ export class ApiDemoBase extends ApiViewerMixin(LitElement) {
   protected render(): TemplateResult {
     return html`
       ${until(
-        renderDemo(this.jsonFetched, this.selected, this._id, this.excludeKnobs)
+        renderDemo(
+          Promise.resolve(this.jsonFetched ?? null),
+          this.selected,
+          this._id,
+          this.excludeKnobs
+        )
       )}
     `;
   }

src/api-demo-content.ts

@@ -1,32 +1,36 @@
-import {
-  LitElement,
-  html,
-  customElement,
-  property,
-  TemplateResult
-} from 'lit-element';
-import { ElementInfo } from './lib/types.js';
+import type * as Manifest from 'custom-elements-manifest/schema';
+import type { TemplateResult } from 'lit';
+
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
 import { EMPTY_ELEMENT } from './lib/constants.js';
 import './api-viewer-demo.js';
 
 @customElement('api-demo-content')
 export class ApiDemoContent extends LitElement {
-  @property({ attribute: false }) elements: ElementInfo[] = [];
+  @property({ attribute: false }) elements: Manifest.CustomElement[] = [];
 
   @property({ type: Number }) selected = 0;
 
   @property() exclude = '';
 
   @property({ type: Number }) vid?: number;
 
-  protected createRenderRoot() {
+  protected createRenderRoot(): this {
     return this;
   }
 
   protected render(): TemplateResult {
     const { elements, selected, exclude, vid } = this;
 
-    const { name, properties, slots, events, cssProperties } = {
+    const {
+      name,
+      members = [],
+      slots,
+      events,
+      cssProperties
+    } = {
       ...EMPTY_ELEMENT,
       ...(elements[selected] || {})
     };
@@ -42,26 +46,26 @@ export class ApiDemoContent extends LitElement {
         <nav>
           <label part="select-label">
             <select
-              @change="${this._onSelect}"
-              .value="${String(selected)}"
-              ?hidden="${elements.length === 1}"
+              @change=${this._onSelect}
+              .value=${String(selected)}
+              ?hidden=${elements.length === 1}
               part="select"
             >
               ${elements.map(
-                (tag, idx) => html`<option value="${idx}">${tag.name}</option>`
+                (tag, idx) => html`<option value=${idx}>${tag.name}</option>`
               )}
             </select>
           </label>
         </nav>
       </header>
       <api-viewer-demo
-        .name="${name}"
-        .props="${properties}"
-        .slots="${slots}"
-        .events="${events}"
-        .cssProps="${cssProps}"
-        .exclude="${exclude}"
-        .vid="${vid}"
+        .name=${name}
+        .props=${members.filter((x) => x.kind === 'field')}
+        .slots=${slots}
+        .events=${events}
+        .cssProps=${cssProps}
+        .exclude=${exclude}
+        .vid=${vid}
       ></api-viewer-demo>
     `;
   }