Skip to content

Commit

Permalink
Update lit-ssr dependency (#6681)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
e111077 and augustjk authored Mar 29, 2023
1 parent f0b732d commit 4b07731
Show file tree
Hide file tree
Showing 13 changed files with 107 additions and 82 deletions.
8 changes: 8 additions & 0 deletions .changeset/gold-windows-fly.md
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 2 additions & 2 deletions examples/framework-lit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/lit-component/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/astro/e2e/fixtures/multiple-frameworks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions packages/astro/e2e/lit-component.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({});
Expand Down Expand Up @@ -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 = () => {};
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/test/fixtures/lit-element/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions packages/astro/test/ssr-lit.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
9 changes: 5 additions & 4 deletions packages/integrations/lit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
41 changes: 28 additions & 13 deletions packages/integrations/lit/server-shim.js
Original file line number Diff line number Diff line change
@@ -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);
};
1 change: 0 additions & 1 deletion packages/integrations/lit/server.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
10 changes: 8 additions & 2 deletions packages/integrations/lit/test/server.test.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
});
Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 4b07731

Please sign in to comment.