Merge branch 'main' into feat/ssr/slot-controller-has-slotted

Author: zeroedin

.changeset/dull-stingrays-film.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/create-element": patch
+---
+
+Fixed type errors in create-element template

.changeset/olive-rivers-stick.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-core": patch
+---
+`SlotController`: `hasContent`/`isEmpty` now respects text nodes

.github/workflows/tests.yml

@@ -52,7 +52,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v4
         with:
-          node-version-file: .nvmrc
+          node-version-file: '.nvmrc'
           cache: npm
 
       - name: Install dependencies
@@ -73,7 +73,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v4
         with:
-          node-version-file: .nvmrc
+          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-file: .nvmrc
+          node-version-file: '.nvmrc'
           cache: npm
       - run: npm ci --prefer-offline
       - run: npm run build

core/pfe-core/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @patternfly/pfe-core
 
+## 4.0.4
+
+### Patch Changes
+
+- 4a03ced: SSR: add shim for `ResizeObserver`
+
+## 4.0.3
+
+### Patch Changes
+
+- 7c855a6: `TabsARIAController`: improve SSR compatibility
+
+## 4.0.2
+
+### Patch Changes
+
+- 0ec7338: `OverflowController`: prevent browser from locking up in some scenarios
+
 ## 4.0.1
 
 ### Patch Changes

core/pfe-core/controllers/overflow-controller.ts

@@ -45,7 +45,9 @@ export class OverflowController implements ReactiveController {
   });
 
   #ro = new ResizeObserver(() => {
-    this.#setOverflowState();
+    requestAnimationFrame(() => {
+      this.#setOverflowState();
+    });
   });
 
   showScrollButtons = false;

core/pfe-core/controllers/slot-controller.ts

@@ -201,7 +201,8 @@ export class SlotController implements ReactiveController {
       ?? this.#getChildrenForSlot(name);
     const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])';
     const slot = this.host.shadowRoot?.querySelector?.<HTMLSlotElement>(selector) ?? null;
-    const hasContent = !!elements.length;
+    const nodes = slot?.assignedNodes?.();
+    const hasContent = !!elements.length || !!nodes?.filter(x => x.textContent?.trim()).length;
     this.#nodes.set(name, { elements, name: slotName ?? '', hasContent, slot });
     this.#logger.debug(slotName, hasContent);
   };

core/pfe-core/controllers/tabs-aria-controller.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { isServer, type ReactiveController, type ReactiveControllerHost } from 'lit';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
@@ -19,7 +19,7 @@ export class TabsAriaController<
 
   #host: ReactiveControllerHost;
 
-  #element: HTMLElement;
+  #element!: HTMLElement;
 
   #tabPanelMap = new Map<Tab, Panel>();
 
@@ -52,6 +52,10 @@ export class TabsAriaController<
   ) {
     this.#options = options;
     this.#logger = new Logger(host);
+    (this.#host = host).addController(this);
+    if (isServer) {
+      return;
+    }
     if (host instanceof HTMLElement) {
       this.#element = host;
     } else {
@@ -63,7 +67,6 @@ export class TabsAriaController<
       }
       this.#element = element;
     }
-    (this.#host = host).addController(this);
     this.#element.addEventListener('slotchange', this.#onSlotchange);
     if (this.#element.isConnected) {
       this.hostConnected();
@@ -93,7 +96,7 @@ export class TabsAriaController<
     this.#tabPanelMap.clear();
     const tabs = [];
     const panels = [];
-    for (const child of this.#element.children) {
+    for (const child of this.#element?.children ?? []) {
       if (this.#options.isTab(child)) {
         tabs.push(child);
         child.role ??= 'tab';

core/pfe-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "4.0.1",
+  "version": "4.0.4",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",

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

docs/_data/importMap.cjs

@@ -85,6 +85,13 @@ module.exports = async function() {
   const map = generator.getMap();
   map.imports['/docs/zero-md.js'] = '/zero-md.js';
   map.imports['@patternfly/elements'] = '/pfe.min.js';
+  map.imports['@patternfly/pfe-core'] = '/pfe.min.js';
+  map.imports['@patternfly/icons/'] = '/assets/@patternfly/icons/';
+  map.imports['@patternfly/pfe-core/decorators.js'] = '/pfe.min.js';
+  map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js';
+  map.imports['lit/'] = map.imports.lit.replace('index.js', '');
+  map.scopes['https://cdn.jsdelivr.net/'].lit = map.imports.lit;
+  map.scopes['https://cdn.jsdelivr.net/']['lit/'] = map.imports.lit.replace('index.js', '');
 
   // add imports for imports under pfe-core
   const pfeCoreImports = (await glob('./{functions,controllers,decorators}/*.ts', {
@@ -110,20 +117,5 @@ module.exports = async function() {
       }
     }
   }
-
-  map.imports['@patternfly/pfe-tools/environment.js'] = '/tools/environment.js';
-
-
-  // add imports for all icon files in /node_modules/@patternfly/icons/{far, fas, fab, patternfly}/
-  const iconsImports = (await glob('./{far,fas,fab,patternfly}/*.js', {
-    cwd: path.join(__dirname, '../../node_modules/@patternfly/icons'),
-  }))
-      .filter(x => !x.endsWith('.d.ts'))
-      .map(x => x);
-
-  for (const icon of iconsImports) {
-    map.imports[`@patternfly/icons/${icon}`] = `/assets/@patternfly/icons/${icon}`;
-  }
-
   return map;
 };