fix: ssr resizeobserver shim (#2859)

* fix: ssr resizeobserver shim

* chore: test workflow

* fix(tools): path

Author: bennypowers

.changeset/few-pumpkins-sit.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-tools": patch
+"@patternfly/pfe-core": patch
+---
+
+SSR: add shim for `ResizeObserver`

.github/workflows/tests.yml

@@ -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
@@ -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
@@ -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 }}
@@ -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 }}/

core/pfe-core/ssr-shims.ts

@@ -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() {

tools/pfe-tools/ssr/global.ts

@@ -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');
   await Promise.all(importSpecifiers.map(x => import(x)));
   return ssr(html);