Update lit-ssr dependency (#6681)

* update lit-ssr dependency * delete unnecessary lit shim checks * delete another unused lit shim feature * fix sass build * bump lit and polyfill versions to match ssr req * shim HTMLElement in test * remove lit global shim workarounds * re-shim Astro's ce.define * remove fix window test and shim HTML Element * Update .changeset/gold-windows-fly.md Co-authored-by: Augustine Kim <ajk830@gmail.com> * fix window check test * implement suggestoins --------- Co-authored-by: Augustine Kim <ajk830@gmail.com>
withastro · Mar 29, 2023 · 4b07731 · 4b07731
1 parent f0b732d
commit 4b07731
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 82 deletions.
diff --git a/.changeset/gold-windows-fly.md b/.changeset/gold-windows-fly.md
@@ -0,0 +1,8 @@
+---
+'@astrojs/lit': major
+---
+
+Update to use `@lit-labs/ssr@^3`
+**[BREAKING]** DOM shim required for Lit SSR has been greatly reduced. `window`, `document`, and other objects are no longer available in global. Most SSR-ready component code should not be affected but, if so, they can be fixed with optional chaining or by using the `isServer` environment checker from the `lit` package. See [lit.dev docs on authoring components for SSR].(https://lit.dev/docs/ssr/authoring/#browser-only-code)
+**[BREAKING]** Adds compatibility with `lit@2.7.0` hydration behavior. Do not update if you're using `lit@2.6.1` or lower.
+Includes support for template[shadowrootmode] support.
diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json
@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "astro": "^2.1.8",
-    "lit": "^2.2.5",
+    "lit": "^2.7.0",
     "@astrojs/lit": "^1.3.0",
-    "@webcomponents/template-shadowroot": "^0.1.0"
+    "@webcomponents/template-shadowroot": "^0.2.1"
   }
 }
diff --git a/packages/astro/e2e/fixtures/lit-component/package.json b/packages/astro/e2e/fixtures/lit-component/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@astrojs/lit": "workspace:*",
-    "@webcomponents/template-shadowroot": "^0.1.0",
+    "@webcomponents/template-shadowroot": "^0.2.1",
     "astro": "workspace:*",
-    "lit": "^2.2.5"
+    "lit": "^2.7.0"
   }
 }
diff --git a/packages/astro/e2e/fixtures/multiple-frameworks/package.json b/packages/astro/e2e/fixtures/multiple-frameworks/package.json
@@ -12,8 +12,8 @@
     "astro": "workspace:*"
   },
   "dependencies": {
-    "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.2.5",
+    "@webcomponents/template-shadowroot": "^0.2.1",
+    "lit": "^2.7.0",
     "preact": "^10.7.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js
@@ -8,10 +8,6 @@ const test = testFactory({
 // TODO: configure playwright to handle web component APIs
 // https://github.com/microsoft/playwright/issues/14241
 test.describe('Lit components', () => {
-	test.beforeAll(() => {
-		delete globalThis.window;
-	});
-
 	test.describe('Development', () => {
 		let devServer;
 		const t = test.extend({});
@@ -158,7 +154,6 @@ test.describe('Lit components', () => {
 		const t = test.extend({});
 
 		t.beforeAll(async ({ astro }) => {
-			delete globalThis.window;
 			// Playwright's Node version doesn't have these functions, so stub them.
 			process.stdout.clearLine = () => {};
 			process.stdout.cursorTo = () => {};

diff --git a/packages/astro/test/fixtures/lit-element/package.json b/packages/astro/test/fixtures/lit-element/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@astrojs/lit": "workspace:*",
-    "@webcomponents/template-shadowroot": "^0.1.0",
+    "@webcomponents/template-shadowroot": "^0.2.1",
     "astro": "workspace:*",
-    "lit": "^2.2.5"
+    "lit": "^2.7.0"
   }
 }
diff --git a/packages/astro/test/fixtures/lit-element/src/components/my-element.ts b/packages/astro/test/fixtures/lit-element/src/components/my-element.ts
@@ -26,13 +26,11 @@ export class MyElement extends LitElement {
     this.reflectedStr = 'default reflected string';
   }
   render() {
-		let typeofwindow = typeof window.Window;
     return html`
       <div>Testing...</div>
       <div id="bool">${this.bool ? 'A' : 'B'}</div>
       <div id="str">${this.str}</div>
       <div id="data">data: ${this.obj.data}</div>
-			<div id="win">${typeofwindow}</div>
 
 			<!-- Slots -->
 			<div id="default"><slot /></div>

diff --git a/packages/astro/test/ssr-lit.test.js b/packages/astro/test/ssr-lit.test.js
@@ -25,9 +25,8 @@ describe('Lit integration in SSR', () => {
 	}
 
 	it('Is able to load', async () => {
-		delete globalThis.window; // On Windows this results in `ReferenceError: window is not defined`
 		const html = await fetchHTML('/');
 		const $ = cheerioLoad(html);
-		expect($('#win').text()).to.equal('function');
+		expect($('#str').text()).to.equal('initialized');
 	});
 });
diff --git a/packages/integrations/lit/package.json b/packages/integrations/lit/package.json
@@ -34,20 +34,21 @@
     "test": "mocha"
   },
   "dependencies": {
-    "@lit-labs/ssr": "^2.2.0",
+    "@lit-labs/ssr": "^3.1.0",
+    "@lit-labs/ssr-dom-shim": "^1.1.0",
     "parse5": "^7.1.2"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
-    "lit": "^2.2.5",
+    "lit": "^2.7.0",
     "mocha": "^9.2.2",
     "sass": "^1.52.2"
   },
   "peerDependencies": {
-    "@webcomponents/template-shadowroot": "^0.1.0",
-    "lit": "^2.1.3"
+    "@webcomponents/template-shadowroot": "^0.2.1",
+    "lit": "^2.7.0"
   }
 }
diff --git a/packages/integrations/lit/server-shim.js b/packages/integrations/lit/server-shim.js
@@ -1,20 +1,35 @@
-import { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js';
+import { customElements as litCE, HTMLElement as litShimHTMLElement } from '@lit-labs/ssr-dom-shim';
 
-if (typeof fetch === 'function') {
-	const _fetch = fetch;
-	installWindowOnGlobal();
-	globalThis.fetch = window.fetch = _fetch;
-} else {
-	installWindowOnGlobal();
+// Something at build time injects document.currentScript = undefined instead of
+// document.currentScript = null. This causes Sass build to fail because it
+// seems to be expecting `=== null`. This set to `undefined` doesn't seem to be
+// caused by Lit and only happens at build / test time, but not in dev or
+// preview time.
+if (globalThis.document) {
+	document.currentScript = null;
 }
 
-window.global = window;
-document.getElementsByTagName = () => [];
-// See https://github.com/lit/lit/issues/2393
-document.currentScript = null;
+if (globalThis.HTMLElement) {
+	// Seems Astro's Element shim does nothing when `.setAttribute` is called
+	// and subsequently `.getAttribute` is called. Causes Lit to not SSR attrs
+	globalThis.HTMLElement = litShimHTMLElement;
+}
+
+// Astro seems to have a DOM shim and the only real difference that we need out
+// of the Lit DOM shim is that the Lit DOM shim reads
+// `HTMLElement.observedAttributes` which is meant to trigger
+// `ReactiveElement.finalize()`. So this is the only thing we will re-shim since
+// Lit will try to respect other global DOM shims.
+globalThis.customElements = litCE;
+
+const litCeDefine = customElements.define;
 
-const ceDefine = customElements.define;
+// We need to patch customElements.define to keep track of the tagName on the
+// class itself so that we can transform JSX custom element class definintion to
+// a DSD string on the server, because there is no way to get the tagName from a
+// CE class otherwise. Not an issue on client:only because the browser supports
+// appending a class instance directly to the DOM.
 customElements.define = function (tagName, Ctr) {
 	Ctr[Symbol.for('tagName')] = tagName;
-	return ceDefine.call(this, tagName, Ctr);
+	return litCeDefine.call(this, tagName, Ctr);
 };
diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
@@ -1,5 +1,4 @@
 import './server-shim.js';
-import '@lit-labs/ssr/lib/render-lit-html.js';
 import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
 import * as parse5 from 'parse5';
 

diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js
@@ -1,6 +1,8 @@
 import { expect } from 'chai';
-import server from '../server.js';
 import { LitElement, html } from 'lit';
+// Must come after lit import because @lit/reactive-element defines
+// globalThis.customElements which the server shim expects to be defined.
+import server from '../server.js';
 import * as cheerio from 'cheerio';
 
 const { check, renderToStaticMarkup } = server;
@@ -12,6 +14,10 @@ describe('check', () => {
 
 	it('should be false with a registered non-lit component', async () => {
 		const tagName = 'non-lit-component';
+		// Lit no longer shims HTMLElement globally, so we need to do it ourselves.
+		if (!globalThis.HTMLElement) {
+			globalThis.HTMLElement = class {};
+		}
 		customElements.define(tagName, class TestComponent extends HTMLElement {});
 		expect(await check(tagName)).to.equal(false);
 	});
@@ -85,7 +91,7 @@ describe('renderToStaticMarkup', () => {
 	});
 
 	it('should render DSD attributes based on shadowRootOptions', async () => {
-		const tagName = 'lit-component';
+		const tagName = 'shadow-root-options-component';
 		customElements.define(
 			tagName,
 			class extends LitElement {