Skip to content

Commit

Permalink
fix: ssr resizeobserver shim (#2859)
Browse files Browse the repository at this point in the history
* fix: ssr resizeobserver shim

* chore: test workflow

* fix(tools): path
  • Loading branch information
bennypowers authored Oct 9, 2024
1 parent e1f9d66 commit 4a03ced
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 35 deletions.
6 changes: 6 additions & 0 deletions .changeset/few-pumpkins-sit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@patternfly/pfe-tools": patch
"@patternfly/pfe-core": patch
---

SSR: add shim for `ResizeObserver`
8 changes: 4 additions & 4 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ jobs:
- name: Configure node version
uses: actions/setup-node@v4
with:
node-version: '20'
node-version-file: '.nvmrc'
cache: npm

- name: Install dependencies
Expand All @@ -100,7 +100,7 @@ jobs:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
node-version-file: '.nvmrc'
cache: npm
- run: npm ci --prefer-offline
- run: npm run build
Expand All @@ -110,7 +110,7 @@ jobs:
env:
HOME: /root

- uses: actions/upload-artifact@v2
- uses: actions/upload-artifact@v4
if: always()
with:
name: ${{ env.PLAYWRIGHT_REPORT_DIR }}
Expand All @@ -130,7 +130,7 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Download zipped HTML report
uses: actions/download-artifact@v4.1.7
uses: actions/download-artifact@v4
with:
name: ${{ env.PLAYWRIGHT_REPORT_DIR }}
path: ${{ env.PLAYWRIGHT_REPORT_DIR }}/
Expand Down
2 changes: 2 additions & 0 deletions core/pfe-core/ssr-shims.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ globalThis.IntersectionObserver ??= ObserverShim;
// @ts-expect-error: this runs in node
globalThis.MutationObserver ??= ObserverShim;
// @ts-expect-error: this runs in node
globalThis.ResizeObserver ??= ObserverShim;
// @ts-expect-error: this runs in node
globalThis.getComputedStyle ??= function() {
return {
getPropertyPriority() {
Expand Down
3 changes: 2 additions & 1 deletion tools/pfe-tools/ssr/global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ export async function renderGlobal(
html: string,
importSpecifiers: string[],
): Promise<string> {
await import('./shims.js');
// avoid tsconfig problems
await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/'));
const { ssr } = await import('./ssr.js');

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-accordion/test/pf-accordion.e2e.ts:14:3 › pf-accordion › ssr

1) elements/pf-accordion/test/pf-accordion.e2e.ts:14:3 › pf-accordion › ssr ────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-accordion/test/pf-accordion.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-avatar/test/pf-avatar.e2e.ts:14:3 › pf-avatar › ssr

2) elements/pf-avatar/test/pf-avatar.e2e.ts:14:3 › pf-avatar › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-avatar/test/pf-avatar.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:14:3 › pf-back-to-top › ssr

3) elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:14:3 › pf-back-to-top › ssr ──────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-background-image/test/pf-background-image.e2e.ts:14:3 › pf-background-image › ssr

4) elements/pf-background-image/test/pf-background-image.e2e.ts:14:3 › pf-background-image › ssr ─ Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-background-image/test/pf-background-image.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-badge/test/pf-badge.e2e.ts:14:3 › pf-badge › ssr

5) elements/pf-badge/test/pf-badge.e2e.ts:14:3 › pf-badge › ssr ────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-badge/test/pf-badge.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-banner/test/pf-banner.e2e.ts:14:3 › pf-banner › ssr

6) elements/pf-banner/test/pf-banner.e2e.ts:14:3 › pf-banner › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-banner/test/pf-banner.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-button/test/pf-button.e2e.ts:14:3 › pf-button › ssr

7) elements/pf-button/test/pf-button.e2e.ts:14:3 › pf-button › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-button/test/pf-button.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-card/test/pf-card.e2e.ts:14:3 › pf-card › ssr

8) elements/pf-card/test/pf-card.e2e.ts:14:3 › pf-card › ssr ───────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-card/test/pf-card.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-chip/test/pf-chip.e2e.ts:14:3 › pf-chip › ssr

9) elements/pf-chip/test/pf-chip.e2e.ts:14:3 › pf-chip › ssr ───────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-chip/test/pf-chip.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

View workflow job for this annotation

GitHub Actions / SSR Tests (Playwright)

elements/pf-clipboard-copy/test/pf-clipboard-copy.e2e.ts:14:3 › pf-clipboard-copy › ssr

10) elements/pf-clipboard-copy/test/pf-clipboard-copy.e2e.ts:14:3 › pf-clipboard-copy › ssr ────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:43:33 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:112:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:95:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-clipboard-copy/test/pf-clipboard-copy.e2e.ts:23:5
await Promise.all(importSpecifiers.map(x => import(x)));
return ssr(html);
Expand Down
30 changes: 0 additions & 30 deletions tools/pfe-tools/ssr/shims.ts

This file was deleted.

0 comments on commit 4a03ced

Please sign in to comment.