Use Lit SSR to render the element page (#1375)

Author: justinfagnani

package-lock.json

@@ -82,6 +82,7 @@
     "@google-cloud/firestore": "^6.0.0",
     "@js-temporal/polyfill": "^0.4.2",
     "@koa/router": "^12.0.0",
+    "@lit-labs/ssr": "^2.2.3",
     "@types/koa__router": "^12.0.0",
     "@types/koa-bodyparser": "^4.3.8",
     "@types/natural": "^5.1.1",
@@ -92,6 +93,7 @@
     "firebase-admin": "^11.0.0",
     "graphql-helix": "^1.13.0",
     "koa-bodyparser": "^4.3.0",
+    "lit": "^2.4.0",
     "natural": "^5.2.3",
     "node-fetch": "^3.2.3",
     "npm-registry-fetch": "^13.1.0",

packages/catalog-server/package.json

@@ -9,6 +9,6 @@ module.exports = {
     const {renderPage} = await import(
       '@webcomponents/internal-site-server/lib/templates/base.js'
     );
-    return renderPage(data);
+    return [...renderPage(data)].join('');
   },
 };

packages/site-content/site/_includes/layouts/base.11ty.cjs

@@ -3,13 +3,14 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import {render} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
 import Router from '@koa/router';
 import {gql} from '@apollo/client/core/index.js';
 import {renderPage} from '../../../templates/base.js';
 import {renderElement} from './element-template.js';
 import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
-import { client } from '../../graphql.js';
+import {client} from '../../graphql.js';
+import {Readable} from 'stream';
 
 export const handleElementRoute = async (
   context: ParameterizedContext<
@@ -76,15 +77,18 @@ export const handleElementRoute = async (
     throw new Error('Internal error');
   }
 
-  const content = renderElement({
-    packageName: packageName,
-    elementName: elementName,
-    declarationReference: customElement.declaration,
-    customElementExport: customElement.export,
-    manifest: customElementsManifest,
-  });
-
-  context.body = renderPage({title: `${packageName}/${elementName}`, content});
+  context.body = Readable.from(renderPage({
+    title: `${packageName}/${elementName}`,
+    content: render(
+      renderElement({
+        packageName: packageName,
+        elementName: elementName,
+        declarationReference: customElement.declaration,
+        customElementExport: customElement.export,
+        manifest: customElementsManifest,
+      })
+    ),
+  }));
   context.type = 'html';
   context.status = 200;
 };

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

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import {html, TemplateResult} from 'lit';
 import type {Package} from 'custom-elements-manifest/schema.js';
 import {
   getModule,
   parseReferenceString,
   resolveReference,
   normalizeModulePath,
 } from '@webcomponents/custom-elements-manifest-tools';
-import {escapeHTML} from '../../escape-html.js';
 
 export const renderElement = ({
   packageName,
@@ -24,18 +24,18 @@ export const renderElement = ({
   declarationReference: string;
   customElementExport: string;
   manifest: Package;
-}): string => {
+}): TemplateResult => {
   const declarationRef = parseReferenceString(declarationReference);
   if (declarationRef.module === undefined) {
-    return `
+    return html`
       <h1>Error</h1>
       <p>${declarationReference} has no module</p>
     `;
   }
   const module = getModule(manifest, declarationRef.module);
 
   if (module === undefined) {
-    return `
+    return html`
       <h1>Error</h1>
       <p>Module ${declarationRef.module} not found</p>
     `;
@@ -48,46 +48,35 @@ export const renderElement = ({
     packageName,
     ''
   );
-  console.log('elementDeclaration', declaration);
 
   if (declaration === undefined || declaration.kind !== 'class') {
-    return `
+    return html`
       <h1>Error</h1>
       <h2>Element declaration not found</h2>
     `;
   }
 
-  return `
-     <h1>${packageName}/${elementName}</h1>
-     ${declaration.description}
-     <h2>Usage</h2>
-     <pre><code>
+  return html`
+    <h1>${packageName}/${elementName}</h1>
+    ${declaration.description}
+    <h2>Usage</h2>
+    <pre><code>
      <!-- TODO: this is wrong. We need the jsExport in the db -->
-     import {${declaration.name}} from '${
-    declarationRef.package
-  }/${normalizeModulePath(declarationRef.module)}';
+     import {${declaration.name}} from '${declarationRef.package}/${normalizeModulePath(
+      declarationRef.module
+    )}';
      </code></pre>
-     <h2>Fields</h2>
-     <ul>
-     ${declaration.members
-       ?.filter((m) => m.kind === 'field')
-       .map(
-         (m) => `
-       <li>${m.name}: ${escapeHTML(m.description)}</li>
-     `
-       )
-       .join('\n')}
-     </ul>
-     <h2>Methods</h2>
-     <ul>
-     ${declaration.members
-       ?.filter((m) => m.kind === 'method')
-       .map(
-         (m) => `
-       <li>${m.name}: ${escapeHTML(m.description)}</li>
-     `
-       )
-       .join('\n')}
-     </ul>
-   `;
+    <h2>Fields</h2>
+    <ul>
+      ${declaration.members
+        ?.filter((m) => m.kind === 'field')
+        .map((m) => html` <li>${m.name}: ${m.description}</li> `)}
+    </ul>
+    <h2>Methods</h2>
+    <ul>
+      ${declaration.members
+        ?.filter((m) => m.kind === 'method')
+        .map((m) => html` <li>${m.name}: ${m.description}</li> `)}
+    </ul>
+  `;
 };

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

@@ -5,12 +5,12 @@
  */
 import {escapeHTML} from '../catalog/escape-html.js';
 
-export const renderPage = (data: {
+export function* renderPage(data: {
   scripts?: Array<string>;
   title?: string;
-  content?: string;
-}) => {
-  return `<!doctype html>
+  content: string | Iterable<string>;
+}) {
+  yield `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -27,11 +27,15 @@ export const renderPage = (data: {
          compiled any process access out. DO_NOT_LAUNCH -->
     <script>
       window.process = {env: {NODE_ENV: 'development'}};
-    </script>
-    ${(data.scripts ?? [])
-      .map((s) => `<script type="module" src="${s}"></script>`)
-      .join('\n')}
-    <style>
+    </script>`;
+
+  if (data.scripts !== undefined) {
+    yield* data.scripts.map(
+      (s) => `<script type="module" src="${s}"></script>`
+    );
+  }
+
+  yield `<style>
       body {
         margin: 0;
         --mdc-typography-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
@@ -48,9 +52,14 @@ export const renderPage = (data: {
     <title>${escapeHTML(data.title)}</title>
   </head>
   <body>
-    <wco-top-bar></wco-top-bar>
-    ${data.content}
+    <wco-top-bar></wco-top-bar>`;
+  if (typeof data.content === 'string') {
+    yield data.content;
+  } else {
+    yield* data.content;
+  }
+  yield `
   </body>
 </html>
 `;
-};
+}