Add <wco-element-page>

Author: justinfagnani

packages/site-client/src/components/wco-element-page.ts

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, css, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+import type {Package, Reference} from 'custom-elements-manifest/schema.js';
+import {
+  getModule,
+  parseReferenceString,
+  resolveReference,
+  normalizeModulePath,
+} from '@webcomponents/custom-elements-manifest-tools';
+
+import './wco-top-bar.js';
+
+export interface ElementData {
+  packageName: string;
+  elementName: string;
+  declarationReference: string;
+  customElementExport: string;
+  manifest: Package;
+}
+
+@customElement('wco-element-page')
+export class WCOElementPage extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .full-screen-error {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-items: center;
+    }
+  `;
+
+  @property()
+  elementData?: ElementData;
+
+  render() {
+    if (this.elementData === undefined) {
+      return html`
+        <wco-top-bar></wco-top-bar>
+        <div class="full-screen-error">No element to display</div>
+      `;
+    }
+    const {
+      packageName,
+      elementName,
+      declarationReference,
+      customElementExport,
+      manifest,
+    } = this.elementData;
+    const ceExportRef = parseReferenceString(customElementExport);
+    const declarationRef = parseReferenceString(declarationReference);
+    const module =
+      declarationRef.module === undefined
+        ? undefined
+        : getModule(manifest, declarationRef.module);
+    const declaration =
+      module === undefined
+        ? undefined
+        : resolveReference(manifest, module, declarationRef, packageName, '');
+
+    if (declaration === undefined || declaration.kind !== 'class') {
+      return html`
+        <wco-top-bar></wco-top-bar>
+        <div class="full-screen-error">Could not find element declaration</div>
+      `;
+    }
+
+    const fields = declaration.members?.filter((m) => m.kind === 'field');
+    const methods = declaration.members?.filter((m) => m.kind === 'method');
+
+    return html`
+      <wco-top-bar></wco-top-bar>
+      <h1>${packageName}/${elementName}</h1>
+      <h3>${declaration.summary}</h3>
+
+      <p>${declaration.description}</p>
+
+      <h2>Usage</h2>
+      <pre><code>
+import '${getElementImportSpecifier(packageName, ceExportRef)}';
+     </code></pre>
+
+      <h2>Fields</h2>
+      <ul>
+        ${fields?.map((f) => html`<li>${f.name}: ${f.description}</li>`)}
+      </ul>
+
+      <h2>Methods</h2>
+      <ul>
+        ${methods?.map((m) => html`<li>${m.name}: ${m.description}</li>`)}
+      </ul>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-element-page': WCOElementPage;
+  }
+}
+
+const getElementImportSpecifier = (
+  packageName: string,
+  ceExportRef: Reference
+) =>
+  ceExportRef.module === undefined
+    ? packageName
+    : `${packageName}/${normalizeModulePath(ceExportRef.module)}`;

packages/site-client/src/entrypoints/element.ts

@@ -4,4 +4,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../components/wco-top-bar.js';
+import '../components/wco-element-page.js';

packages/site-server/src/catalog/routes/element/element-route.ts

@@ -3,15 +3,19 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+
+// This must be imported before lit
+import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
+
 import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
+import {html} from 'lit';
 import {Readable} from 'stream';
 import {gql} from '@apollo/client/core/index.js';
 import Router from '@koa/router';
-import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
 
+import '@webcomponents/internal-site-client/lib/entrypoints/element.js';
 import {renderPage} from '../../../templates/base.js';
 import {client} from '../../graphql.js';
-import {renderElement} from './element-template.js';
 
 export const handleElementRoute = async (
   context: ParameterizedContext<
@@ -78,22 +82,26 @@ export const handleElementRoute = async (
     throw new Error('Internal error');
   }
 
-  context.body = Readable.from(renderPage({
-    title: `${packageName}/${elementName}`,
-    scripts: [
-      '/js/hydrate.js',
-      '/js/element.js'
-    ],
-    content: render(
-      renderElement({
-        packageName: packageName,
-        elementName: elementName,
-        declarationReference: customElement.declaration,
-        customElementExport: customElement.export,
-        manifest: customElementsManifest,
-      })
-    ),
-  }));
+  const elementData = {
+    packageName: packageName,
+    elementName: elementName,
+    declarationReference: customElement.declaration,
+    customElementExport: customElement.customElementExport,
+    manifest: customElementsManifest,
+  };
+
   context.type = 'html';
   context.status = 200;
+  context.body = Readable.from(
+    renderPage({
+      title: `${packageName}/${elementName}`,
+      scripts: ['/js/hydrate.js', '/js/element.js'],
+      // TODO (justinfagnani): If we want to hydrate, we need to serialize the
+      // initial data and embed in the response
+      content: render(
+        html`<wco-element-page .elementData=${elementData}></wco-element-page>`,
+        {deferHydration: true}
+      ),
+    })
+  );
 };