diff --git a/.changeset/lost-days-sick.md b/.changeset/lost-days-sick.md new file mode 100644 index 0000000000..18415e294f --- /dev/null +++ b/.changeset/lost-days-sick.md @@ -0,0 +1,13 @@ +--- +"@patternfly/pfe-core": minor +--- + +`ssrCallConnectedCallback`: exported from `ssr-shims.js`, replacing the deprecated `globalThis.litSsrCallConnectedCallback` global. Pass a predicate to limit which elements receive `connectedCallback` during SSR, or omit it to opt in all elements. + +```typescript +import { ssrCallConnectedCallback } from '@patternfly/pfe-core/ssr-shims.js'; + +ssrCallConnectedCallback(el => + el.localName.startsWith('pf-') || el.localName.startsWith('rh-') +); +``` diff --git a/.changeset/poor-sky-blue.md b/.changeset/poor-sky-blue.md new file mode 100644 index 0000000000..407dbc2479 --- /dev/null +++ b/.changeset/poor-sky-blue.md @@ -0,0 +1,15 @@ +--- +"@patternfly/pfe-tools": minor +--- + +`renderGlobal`: third `connectedCallbackFilter` parameter limits which elements receive `connectedCallback` during SSR. Without it, all elements opt in. + +```typescript +import { renderGlobal } from '@patternfly/pfe-tools/ssr/global.js'; + +const html = await renderGlobal( + '', + ['my-package/my-el.js'], + el => el.localName.startsWith('my-'), +); +``` diff --git a/core/pfe-core/ssr-shims.ts b/core/pfe-core/ssr-shims.ts index 32d0168960..7eef70229a 100644 --- a/core/pfe-core/ssr-shims.ts +++ b/core/pfe-core/ssr-shims.ts @@ -1,4 +1,5 @@ import { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js'; +import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js'; class ObserverShim { observe(): void { @@ -30,8 +31,13 @@ function getComputedStyle() { }; }; -// @ts-expect-error: opt in to event support in ssr -globalThis.litSsrCallConnectedCallback = true; +export function ssrCallConnectedCallback( + predicate: (element: { localName: string }) => boolean = () => true, +): void { + LitElementRenderer.renderOptions.push( + element => predicate(element) ? { connectedCallback: true } : undefined, + ); +} installWindowOnGlobal({ ErrorEvent: Event, diff --git a/package-lock.json b/package-lock.json index e6e5f2b58b..962b137401 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1906,14 +1906,14 @@ } }, "node_modules/@lit-labs/ssr": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-4.0.0.tgz", - "integrity": "sha512-pODr+t7cZVIrCRLuSLuWAACDnztEk5IrRFwFsbxyAyWcP2XP8aKuUZdVM/biXqxvIyHyCKtNZ92Gdcr+pjA5BQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-4.1.0.tgz", + "integrity": "sha512-m0zymVVlHB1ddJQ1lastsV8ROW3whFOiHJhVPQWd04MnGTkTlUUVLQctux1QlyD9BtLXNN6iASxv388vhgKMFg==", "license": "BSD-3-Clause", "peer": true, "dependencies": { "@lit-labs/ssr-client": "^1.1.7", - "@lit-labs/ssr-dom-shim": "^1.5.0", + "@lit-labs/ssr-dom-shim": "^1.6.0", "@lit/reactive-element": "^2.0.4", "@parse5/tools": "^0.3.0", "enhanced-resolve": "^5.10.0", @@ -1948,9 +1948,9 @@ } }, "node_modules/@lit-labs/ssr-dom-shim": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.5.1.tgz", - "integrity": "sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz", + "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==", "license": "BSD-3-Clause" }, "node_modules/@lit/context": { @@ -16022,7 +16022,7 @@ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "@changesets/cli": "^2.29.8", "@koa/router": "^15.1.1", - "@lit-labs/ssr": "^4.0.0", + "@lit-labs/ssr": "^4.1.0", "@open-wc/testing": "^4.0.0", "@playwright/test": "~1.57.0", "@pwrs/mappa": "^0.0.4", diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json index 9951194275..c604a1514b 100644 --- a/tools/pfe-tools/package.json +++ b/tools/pfe-tools/package.json @@ -68,7 +68,7 @@ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "@changesets/cli": "^2.29.8", "@koa/router": "^15.1.1", - "@lit-labs/ssr": "^4.0.0", + "@lit-labs/ssr": "^4.1.0", "@open-wc/testing": "^4.0.0", "@playwright/test": "~1.57.0", "@pwrs/mappa": "^0.0.4", diff --git a/tools/pfe-tools/ssr/global.ts b/tools/pfe-tools/ssr/global.ts index eecb84a620..e23b5a7a48 100644 --- a/tools/pfe-tools/ssr/global.ts +++ b/tools/pfe-tools/ssr/global.ts @@ -3,14 +3,18 @@ * first importing the provided component defintions into nodejs' global scope. * @param html string to render * @param importSpecifiers list of web component definition module import specifiers + * @param connectedCallbackFilter optional predicate to limit which elements + * receive `connectedCallback` during SSR. Defaults to all elements. */ export async function renderGlobal( html: string, importSpecifiers: string[], + connectedCallbackFilter?: (element: { localName: string }) => boolean, ): Promise { // hack to avoid circular typescript project reference const spec = '@patternfly/pfe-core/ssr-shims.js'; - await import(spec); + const { ssrCallConnectedCallback } = await import(spec); + ssrCallConnectedCallback(connectedCallbackFilter); const { ssr } = await import('./ssr.js'); await Promise.all(importSpecifiers.map(x => import(x))); return ssr(html);