From 4b077318fbc21c4350cc21c380d96b54d302759c Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Wed, 29 Mar 2023 09:43:40 -0700 Subject: 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 * fix window check test * implement suggestoins --------- Co-authored-by: Augustine Kim --- packages/integrations/lit/server-shim.js | 41 ++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 13 deletions(-) (limited to 'packages/integrations/lit/server-shim.js') diff --git a/packages/integrations/lit/server-shim.js b/packages/integrations/lit/server-shim.js index 3f4a8df4f..ed371f89a 100644 --- 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); }; -- cgit v1.2.3