Hydrate the element page

justinfagnani · justinfagnani · commit 4a2e41a95584 · 2022-10-21T14:24:31.000-07:00
diff --git a/packages/site-client/src/components/wco-element-page.ts b/packages/site-client/src/components/wco-element-page.ts
@@ -41,7 +41,7 @@ export class WCOElementPage extends LitElement {
     }
   `;
 
-  @property()
+  @property({attribute: false})
   elementData?: ElementData;
 
   render() {
diff --git a/packages/site-client/src/entrypoints/element-hydrate.ts b/packages/site-client/src/entrypoints/element-hydrate.ts
@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {renderElementPage} from './element.js';
+import {hydrate} from 'lit/experimental-hydrate.js';
+
+const data = (
+  window as unknown as {__ssrData: Parameters<typeof renderElementPage>}
+).__ssrData;
+hydrate(renderElementPage(...data), document.body);
diff --git a/packages/site-client/src/entrypoints/element.ts b/packages/site-client/src/entrypoints/element.ts
@@ -5,3 +5,8 @@
  */
 
 import '../components/wco-element-page.js';
+import type {ElementData} from '../components/wco-element-page.js';
+import {html} from 'lit';
+
+export const renderElementPage = (elementData: ElementData) =>
+  html`<wco-element-page .elementData=${elementData}></wco-element-page>`;
diff --git a/packages/site-server/src/catalog/routes/element/element-route.ts b/packages/site-server/src/catalog/routes/element/element-route.ts
@@ -8,12 +8,11 @@
 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 '@webcomponents/internal-site-client/lib/entrypoints/element.js';
+import {renderElementPage} from '@webcomponents/internal-site-client/lib/entrypoints/element.js';
 import {renderPage} from '../../../templates/base.js';
 import {client} from '../../graphql.js';
 
@@ -96,12 +95,11 @@ export const handleElementRoute = async (
     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}
-      ),
+      initScript: '/js/element-hydrate.js',
+      content: render(renderElementPage(elementData), {deferHydration: true}),
+      initialData: [
+        elementData
+      ],
     })
   );
 };
diff --git a/packages/site-server/src/templates/base.ts b/packages/site-server/src/templates/base.ts
@@ -9,6 +9,8 @@ export function* renderPage(data: {
   scripts?: Array<string>;
   title?: string;
   content: string | Iterable<string>;
+  initialData?: object;
+  initScript?: string;
 }) {
   yield `<!doctype html>
 <html lang="en">
@@ -58,6 +60,17 @@ export function* renderPage(data: {
   } else {
     yield* data.content;
   }
+
+  if (data.initialData !== undefined) {
+    yield `<script>window.__ssrData = ${JSON.stringify(
+      data.initialData
+    ).replace(/</g, '\\u003c')}</script>`;
+  }
+
+  if (data.initScript !== undefined) {
+    yield `<script type="module" src="${data.initScript}"></script>`;
+  }
+
   yield `
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class WCOElementPage extends LitElement {`
`41`	`41`	`}`
`42`	`42`	`;
`43`	`43`
`44`		`- @property()`
	`44`	`+ @property({attribute: false})`
`45`	`45`	`elementData?: ElementData;`
`46`	`46`
`47`	`47`	`render() {`