Upgrade to new Lit SSR with automatic DOM shimming

Author: aomarks

package-lock.json

@@ -112,7 +112,7 @@
     "firebase-admin": "^11.0.0",
     "graphql-helix": "^1.13.0",
     "koa-bodyparser": "^4.3.0",
-    "lit": "^2.4.0",
+    "lit": "^2.6.0",
     "natural": "^5.2.3",
     "semver": "^7.3.7"
   }

packages/catalog-server/package.json

@@ -89,7 +89,7 @@
     "@urql/core": "^3.0.4",
     "@webcomponents/catalog-api": "^0.0.0",
     "graphql": "^16.6.0",
-    "lit": "^2.3.1",
+    "lit": "^2.6.0",
     "lit-analyzer": "^1.2.1"
   }
 }

packages/site-client/package.json

@@ -67,7 +67,9 @@ export class WCOCatalogSearch extends LitElement {
   protected firstUpdated() {
     // TODO (justinfagnani): we may want to use a router (and write the search
     // to the URL) but this is easy for now.
-    const urlQuery = new URLSearchParams(window.location.search).get('query');
+    const urlQuery = new URLSearchParams(globalThis.location.search).get(
+      'query'
+    );
     if (urlQuery) {
       this._search.value = urlQuery;
       this._onChange();

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

@@ -8,7 +8,8 @@ import {html, css, LitElement} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
-const pathStartsWith = (s: string) => window.location.pathname.startsWith(s);
+const pathStartsWith = (s: string) =>
+  globalThis.location.pathname.startsWith(s);
 
 @customElement('wco-top-bar')
 export class WCOTopBar extends LitElement {

packages/site-client/src/components/wco-top-bar.ts

@@ -8,7 +8,7 @@ import {hydrate} from 'lit/experimental-hydrate.js';
 import {renderElementPage} from './element.js';
 
 const data = (
-  window as unknown as {__ssrData: Parameters<typeof renderElementPage>}
+  globalThis as unknown as {__ssrData: Parameters<typeof renderElementPage>}
 ).__ssrData;
 
 // We need to hydrate the whole page to remove any defer-hydration attributes.

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

@@ -9,10 +9,13 @@ module.exports = {
     const {renderPage, html, unsafeHTML} = await import(
       '../../../templates/lib/base.js'
     );
-    await import('@webcomponents/internal-site-client/lib/components/wco-nav-page.js');
+    await import(
+      '@webcomponents/internal-site-client/lib/components/wco-nav-page.js'
+    );
 
-    // URL isn't exactly a Location, but it's close enough for read-only uses
-    window.location = new URL('http://localhost:5450/docs/');
+    // Set location because wco-nav-bar reads pathname from it. URL isn't
+    // exactly a Location, but it's close enough for read-only uses
+    globalThis.location = new URL('http://localhost:5450/docs/');
 
     const navigationEntries = this.eleventyNavigation(data.collections.all);
 
@@ -24,11 +27,10 @@ module.exports = {
     return [
       ...renderPage({
         ...data,
-        content: html`
-          <wco-nav-page>
-            <div slot="outline">${unsafeHTML(navigationHTML)}</div>
-            ${unsafeHTML(data.content)}
-          </wco-nav-page>`,
+        content: html`<wco-nav-page>
+          <div slot="outline">${unsafeHTML(navigationHTML)}</div>
+          ${unsafeHTML(data.content)}
+        </wco-nav-page>`,
       }),
     ].join('');
   },

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

@@ -9,11 +9,18 @@ module.exports = {
     const {renderPage, html, unsafeHTML} = await import(
       '../../../templates/lib/base.js'
     );
-    await import('@webcomponents/internal-site-client/lib/components/wco-home-page.js');
+    await import(
+      '@webcomponents/internal-site-client/lib/components/wco-home-page.js'
+    );
+    // Set location because wco-nav-bar reads pathname from it. URL isn't
+    // exactly a Location, but it's close enough for read-only uses
+    globalThis.location = new URL('http://localhost:5450/');
     return [
       ...renderPage({
         ...data,
-        content: html`<wco-home-page>${unsafeHTML(data.content)}</wco-home-page>`,
+        content: html`<wco-home-page
+          >${unsafeHTML(data.content)}</wco-home-page
+        >`,
       }),
     ].join('');
   },

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

@@ -5,10 +5,7 @@
  */
 
 // This must be imported before lit
-import {
-  render,
-  RenderInfo,
-} from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
+import {render, RenderInfo} from '@lit-labs/ssr';
 
 import type {TemplateResult} from 'lit';
 import type {DirectiveResult} from 'lit/directive.js';

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

@@ -96,7 +96,7 @@
     "@apollo/client": "^3.7.0",
     "@koa/cors": "^4.0.0",
     "@koa/router": "^12.0.0",
-    "@lit-labs/ssr": "^2.2.3",
+    "@lit-labs/ssr": "^3.0.0",
     "@types/koa": "^2.13.5",
     "@types/koa__cors": "^3.3.0",
     "@types/koa__router": "^12.0.0",