Merge pull request #54 from PolymerLabs/update-element-support

Update element support
PolymerLabs · May 19, 2020 · 199cd65 · 199cd65
2 parents e01b9a4 + e93083e
commit 199cd65
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 129 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,8 +49,9 @@
     "koa": "^2.7.0",
     "koa-node-resolve": "^1.0.0-pre.5",
     "koa-static": "^5.0.0",
-    "lit-element": "Polymer/lit-element#hydration",
+    "lit-element": "Polymer/lit-html#hydration-hydrate",
     "lit-html": "Polymer/lit-html#hydration",
+    "template-shadowroot": "webcomponents/template-shadowroot",
     "parse5": "^5.1.0",
     "resolve": "^1.10.1",
     "tape": "^4.11.0"

diff --git a/src/demo/app-client.ts b/src/demo/app-client.ts
@@ -4,25 +4,39 @@
 
 import {render} from 'lit-html';
 import {hydrate} from 'lit-html/lib/hydrate.js';
-import {template} from './module.js';
+import {LitElement} from 'lit-element';
+import {template, initialData} from './module.js';
 
 declare var window: any;
 
-console.log('hydrating');
+// Note, give LitElement a hydrate function.
+(LitElement as any).hydrate = hydrate;
+// TODO(sorvell): Give LitElement a render function to avoid a version
+// conflict that results from the dev server config. Here lit-html is loaded
+// at `node_modules/lit-html` and
+// `node_modules/lit-element/node_modules/lit-html`. This should be addressed
+// by fixing the dev server, but setting it here works around this problem.
+(LitElement as any).render = render;
+
+console.log('Page hydrating with same data as rendered with SSR.');
 // The hydrate() function is run with the same data as used in the server
 // render. It doesn't update the DOM, and just updates the lit-html part values
 // so that future renders() will do the minimal DOM updates.
-hydrate(
-  template('SSR', 'This is a test.', ['foo', 'bar', 'qux']),
-  window.document.body
-);
+hydrate(template(initialData), window.document.body);
 
 window.setTimeout(() => {
-  console.log('updating');
+  console.log('Page updating with new data...');
   // The first call to render() can use new data, and will only update the DOM
   // where this data differs from that passed to hydrate().
   render(
-    template('Hydration', 'This is a test.', ['hy', 'dra', 'ted']),
+    template({
+      name: 'Hydration',
+      message: 'We have now been hydrated and updated with new data.',
+      items: ['hy', 'dra', 'ted'],
+      prop: 'prop-updated',
+      attr: 'attr-updated',
+      wasUpdated: true,
+    }),
     window.document.body
   );
 }, 0);
diff --git a/src/demo/app-server.ts b/src/demo/app-server.ts
@@ -2,15 +2,19 @@
  * This is a server-old module that renders the HTML file shell.
  */
 
-import {render, getScopedStyles} from '../lib/render-lit-html.js';
-import {template} from './module.js';
+import {render} from '../lib/render-lit-html.js';
+import {template, initialData} from './module.js';
+
+export function renderAppWithInitialData() {
+  return renderApp(initialData);
+}
 
 // This module runs in the app context with the client-side code, but is a
 // server-only module. It doesn't use lit-html so that it can render the HTML
 // shell in unbalanced fragments. By yielding the HTML pramable immediately
 // with no lit-html template preparation or rendering needed, we minimize TTFB,
 // And can get the browser to start prefetch as soon as possible.
-export async function* renderApp(data: any) {
+export function* renderApp(data: any) {
   yield `
     <!doctype html>
     <html>
@@ -23,17 +27,19 @@ export async function* renderApp(data: any) {
             import('/demo/app-client.js');
           });
         </script>
+        <script type="module">
+          import {hydrateShadowRoots} from './node_modules/template-shadowroot/template-shadowroot.js';
+          hydrateShadowRoots(document.body);
+        </script>
         `;
-  yield* getScopedStyles();
-
   yield `
       </head>
       <body>
         <button>Hydrate</button>
         <div>`;
 
   // Call the SSR render() function to render a client/server shared template.
-  yield* render(template(data.name, data.message, data.items));
+  yield* render(template(data));
 
   yield `
         </div>