Enable SSR for 11ty (#1400)

Author: justinfagnani

package.json

@@ -54,6 +54,7 @@
         "./packages/custom-elements-manifest-tools:build",
         "./packages/catalog-api:build",
         "./packages/catalog-server:build",
+        "./packages/site-server:build",
         "./packages/site-content:build",
         "./packages/site-client:build"
       ]

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

@@ -6,7 +6,6 @@
 
 import {html, css, LitElement} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import './wco-top-bar.js';
 import './wco-catalog-search.js';
 
 @customElement('wco-catalog-page')
@@ -19,7 +18,6 @@ export class WCOCatalogPage extends LitElement {
 
   render() {
     return html`
-      <wco-top-bar></wco-top-bar>
       <h1>Catalog</h1>
       <wco-catalog-search></wco-catalog-search>
     `;

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

@@ -15,8 +15,6 @@ import {
   normalizeModulePath,
 } from '@webcomponents/custom-elements-manifest-tools';
 
-import './wco-top-bar.js';
-
 export interface ElementData {
   packageName: string;
   elementName: string;
@@ -46,10 +44,7 @@ export class WCOElementPage extends LitElement {
 
   render() {
     if (this.elementData === undefined) {
-      return html`
-        <wco-top-bar></wco-top-bar>
-        <div class="full-screen-error">No element to display</div>
-      `;
+      return html` <div class="full-screen-error">No element to display</div> `;
     }
     const {
       packageName,
@@ -71,7 +66,6 @@ export class WCOElementPage extends LitElement {
 
     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>
       `;
     }
@@ -80,7 +74,6 @@ export class WCOElementPage extends LitElement {
     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>
 

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

@@ -4,10 +4,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {renderElementPage} from './element.js';
 import {hydrate} from 'lit/experimental-hydrate.js';
+import {renderBody} from '../templates/body.js';
+import {renderElementPage} from './element.js';
 
 const data = (
   window as unknown as {__ssrData: Parameters<typeof renderElementPage>}
 ).__ssrData;
-hydrate(renderElementPage(...data), document.body);
+
+// We need to hydrate the whole page to remove any defer-hydration attributes.
+// We could also remove the attribute manually, or not use deferhydration, but
+// instead manually assign the data into the <wco-element-page> element, and
+// time imports so that automatic element hydration happend after.
+hydrate(renderBody(renderElementPage(...data)), document.body);

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

@@ -3,5 +3,4 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import '../components/wco-top-bar.js';
+import 'lit/experimental-hydrate-support.js';

packages/site-client/src/templates/body.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html} from 'lit';
+import '../components/wco-top-bar.js';
+
+export const renderBody = (content: unknown) => html`<wco-top-bar></wco-top-bar>
+  ${content}`;

packages/site-content/package.json

@@ -54,6 +54,9 @@
     },
     "build:templates": {
       "command": "find templates/src -name \"*.ts\" | xargs esbuild --color --outdir=templates/lib",
+      "dependencies": [
+        "../site-client:build"
+      ],
       "files": [
         "templates/src/**/*.ts"
       ],
@@ -73,7 +76,8 @@
       ],
       "dependencies": [
         "../catalog-api:build",
-        "../custom-elements-manifest-tools:build"
+        "../custom-elements-manifest-tools:build",
+        "../site-client:build"
       ],
       "clean": "if-file-deleted"
     },
@@ -90,6 +94,7 @@
   },
   "dependencies": {
     "@11ty/eleventy": "^1.0.2",
+    "@webcomponents/internal-site-client": "^0.0.0",
     "@webcomponents/internal-site-server": "^0.0.0"
   }
 }

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

@@ -6,16 +6,13 @@
 
 module.exports = {
   async render(data) {
-    const {renderPage} = await import('../../../templates/lib/base.js');
-    // TODO (justinfagnani): move the top-bar to a real template or
-    // back into the base template when we enable 11ty / Lit SSR integration
+    const {renderPage, unsafeHTML} = await import(
+      '../../../templates/lib/base.js'
+    );
     return [
       ...renderPage({
         ...data,
-        content: `
-    <wco-top-bar></wco-top-bar>
-    ${data.content}
-    `,
+        content: unsafeHTML(data.content),
       }),
     ].join('');
   },

packages/site-content/templates/src/base.ts

@@ -3,15 +3,30 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+
+// This must be imported before lit
+import {
+  render,
+  RenderInfo,
+} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
+
+import type {TemplateResult} from 'lit';
+import type {DirectiveResult} from 'lit/directive.js';
+import {renderBody} from '@webcomponents/internal-site-client/lib/templates/body.js';
+
 import {escapeHTML} from './escape-html.js';
+export {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
-export function* renderPage(data: {
-  scripts?: Array<string>;
-  title?: string;
-  content: string | Iterable<string>;
-  initialData?: object;
-  initScript?: string;
-}) {
+export function* renderPage(
+  data: {
+    scripts?: Array<string>;
+    title?: string;
+    content: TemplateResult | DirectiveResult;
+    initialData?: object;
+    initScript?: string;
+  },
+  options?: Partial<RenderInfo>
+) {
   yield `<!doctype html>
 <html lang="en">
   <head>
@@ -55,11 +70,7 @@ export function* renderPage(data: {
   </head>
   <body>
 `;
-  if (typeof data.content === 'string') {
-    yield data.content;
-  } else {
-    yield* data.content;
-  }
+  yield* render(renderBody(data.content), options);
 
   if (data.initialData !== undefined) {
     yield `<script>window.__ssrData = ${JSON.stringify(

packages/site-server/package.json

@@ -56,7 +56,9 @@
         "../../tsconfig.base.json",
         "src/**/*.ts"
       ],
-      "output": [],
+      "output": [
+        "tsconfig.tsbuildinfo"
+      ],
       "dependencies": [
         "../site-client:build:types",
         "../site-content:build:templates:types"
@@ -89,6 +91,7 @@
     "@types/koa-etag": "^3.0.0",
     "@types/koa-static": "^4.0.2",
     "@web/dev-server": "^0.1.34",
+    "@webcomponents/internal-site-content": "^0.0.0",
     "koa": "^2.13.4",
     "koa-conditional-get": "^3.0.0",
     "koa-etag": "^4.0.0",