Merge branch 'main' into 2887-pf-text-input-autocomplete

Author: ArathyKumar

.github/workflows/preview.yml

@@ -22,6 +22,9 @@ jobs:
       - name: POP Debug Info
         run: curl https://cachefly.cachefly.net/CacheFlyDebug
 
+      # Set up GitHub Actions caching for Wireit.
+      - uses: google/wireit@setup-github-actions-caching/v2  
+
       - run: npm ci --prefer-offline
       - run: npm run docs
       - run: cat _site/components/icon/demo/custom-icon-sets/index.html

.github/workflows/release.yml

@@ -16,6 +16,9 @@ jobs:
         with:
           node-version: '20'
           cache: npm
+      
+      # Set up GitHub Actions caching for Wireit.
+      - uses: google/wireit@setup-github-actions-caching/v2
 
       - run: npm ci --prefer-offline
       - run: npm run build

.github/workflows/tests.yml

@@ -55,6 +55,9 @@ jobs:
           node-version-file: '.nvmrc'
           cache: npm
 
+      # Set up GitHub Actions caching for Wireit.
+      - uses: google/wireit@setup-github-actions-caching/v2
+
       - name: Install dependencies
         run: npm ci --prefer-offline
 

.github/workflows/visual-regression.yml

@@ -31,6 +31,10 @@ jobs:
         with:
           node-version: '20'
           cache: npm
+
+      # Set up GitHub Actions caching for Wireit.
+      - uses: google/wireit@setup-github-actions-caching/v2
+
       - run: npm ci --prefer-offline
 
       - name: Visual Regression Tests

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v22.13.0

core/pfe-core/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @patternfly/pfe-core
 
+## 5.0.1
+### Patch Changes
+
+- fefd8bb: `SlotController`: correctly report slot content after updating
+
+## 5.0.0
+### Major Changes
+
+- 0277045: Enable `connectedCallback()` and context protocol in SSR scenarios.
+  
+  BREAKING CHANGE
+  This change affects any element which is expected to execute in node JS when
+  lit-ssr shims are present. By enabling the `connectedCallback()` to execute
+  server side. Elements must ensure that their connectedCallbacks do not try to
+  access the DOM.
+  
+  Before:
+  
+  ```js
+  connectedCallback() {
+    super.connectedCallback();
+    this.items = [...this.querySelectorAll('my-item')];
+  }
+  ```
+  
+  After:
+  ```js
+  connectedCallback() {
+    super.connectedCallback();
+    if (!isServer) {
+      this.items = isServer ? [] : [...this.querySelectorAll('my-item')];
+    }
+  }
+  ```
+
+### Minor Changes
+
+- 8b5b699: **SSR**: added `ssr-hint-has-slotted` and `ssr-hint-has-slotted-default` attributes to elements that use slot controller.
+  
+  When running SSR on elements with slots, add these attributes to ensure they render correctly.
+  
+  ```html
+  <pf-card ssr-hint-has-slotted-default
+           ssr-hint-has-slotted="header,footer">
+    <h2 slot="header">Header Content</h2>
+    <p>Default content</p>
+    <span slot="footer">Footer Content</span>
+  </pf-card>
+  ```
+
+### Patch Changes
+
+- a2f3254: `ScrollSpyController`: respond to hashchange events
+
 ## 4.0.5
 ### Patch Changes
 

core/pfe-core/controllers/light-dom-controller.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveElement } from 'lit';
+import { isServer, type ReactiveController, type ReactiveElement } from 'lit';
 
 import { Logger } from './logger.js';
 
@@ -52,9 +52,13 @@ export class LightDOMController implements ReactiveController {
    * Returns a boolean statement of whether or not this component contains any light DOM.
    */
   hasLightDOM(): boolean {
-    return !!(
-      this.host.children.length > 0
-      || (this.host.textContent ?? '').trim().length > 0
-    );
+    if (isServer) {
+      return false;
+    } else {
+      return !!(
+        this.host.children.length > 0
+        || (this.host.textContent ?? '').trim().length > 0
+      );
+    }
   }
 }

core/pfe-core/controllers/scroll-spy-controller.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { isServer, type ReactiveController, type ReactiveControllerHost } from 'lit';
 
 export interface ScrollSpyControllerOptions extends IntersectionObserverInit {
   /**
@@ -18,11 +18,13 @@ export interface ScrollSpyControllerOptions extends IntersectionObserverInit {
    * @default the host's root node
    */
   rootNode?: Node;
+
   /**
    * function to call on link children to get their URL hash (i.e. id to scroll to)
    * @default el => el.getAttribute('href');
    */
   getHash?: (el: Element) => string | null;
+
   /**
    * Optional callback for when an intersection occurs
    */
@@ -33,16 +35,24 @@ export class ScrollSpyController implements ReactiveController {
   static #instances = new Set<ScrollSpyController>;
 
   static {
-    addEventListener('scroll', () => {
-      if (Math.round(window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+    if (!isServer) {
+      addEventListener('scroll', () => {
+        if (Math.round(window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+          this.#instances.forEach(ssc => {
+            ssc.#setActive(ssc.#linkChildren.at(-1));
+          });
+        }
+      }, { passive: true });
+      addEventListener('hashchange', () => {
         this.#instances.forEach(ssc => {
-          ssc.#setActive(ssc.#linkChildren.at(-1));
+          ssc.#activateHash();
         });
-      }
-    }, { passive: true });
+      });
+    }
   }
 
   #tagNames: string[];
+
   #activeAttribute: string;
 
   #io?: IntersectionObserver;
@@ -57,17 +67,28 @@ export class ScrollSpyController implements ReactiveController {
   #intersected = false;
 
   #root: ScrollSpyControllerOptions['root'];
+
   #rootMargin?: string;
+
   #threshold: number | number[];
-  #intersectingElements: Element[] = [];
 
-  #getRootNode: () => Node;
+  #intersectingTargets = new Set<Element>();
+
+  #linkTargetMap = new Map<Element, Element | null>();
+
+  #getRootNode: () => Node | null;
+
   #getHash: (el: Element) => string | null;
+
   #onIntersection?: () => void;
 
   get #linkChildren(): Element[] {
-    return Array.from(this.host.querySelectorAll(this.#tagNames.join(',')))
-        .filter(this.#getHash);
+    if (isServer) {
+      return [];
+    } else {
+      return Array.from(this.host.querySelectorAll(this.#tagNames.join(',')))
+          .filter(this.#getHash);
+    }
   }
 
   get root(): Element | Document | null | undefined {
@@ -110,7 +131,7 @@ export class ScrollSpyController implements ReactiveController {
     this.#rootMargin = options.rootMargin;
     this.#activeAttribute = options.activeAttribute ?? 'active';
     this.#threshold = options.threshold ?? 0.85;
-    this.#getRootNode = () => options.rootNode ?? host.getRootNode();
+    this.#getRootNode = () => options.rootNode ?? host.getRootNode?.() ?? null;
     this.#getHash = options?.getHash ?? ((el: Element) => el.getAttribute('href'));
     this.#onIntersection = options?.onIntersection;
   }
@@ -132,12 +153,16 @@ export class ScrollSpyController implements ReactiveController {
     if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
       const { rootMargin, threshold, root } = this;
       this.#io = new IntersectionObserver(r => this.#onIo(r), { root, rootMargin, threshold });
-      this.#linkChildren
-          .map(x => this.#getHash(x))
-          .filter((x): x is string => !!x)
-          .map(x => rootNode.getElementById(x.replace('#', '')))
-          .filter((x): x is HTMLElement => !!x)
-          .forEach(target => this.#io?.observe(target));
+      for (const link of this.#linkChildren) {
+        const id = this.#getHash(link)?.replace('#', '');
+        if (id) {
+          const target = document.getElementById(id);
+          if (target) {
+            this.#io?.observe(target);
+            this.#linkTargetMap.set(link, target);
+          }
+        }
+      }
     }
   }
 
@@ -155,6 +180,17 @@ export class ScrollSpyController implements ReactiveController {
     }
   }
 
+  async #activateHash() {
+    const links = this.#linkChildren;
+    const { hash } = location;
+    if (!hash) {
+      this.setActive(links.at(0) ?? null);
+    } else {
+      await this.#nextIntersection();
+      this.setActive(links.find(x => this.#getHash(x) === hash) ?? null);
+    }
+  }
+
   async #nextIntersection() {
     this.#intersected = false;
     // safeguard the loop
@@ -178,13 +214,15 @@ export class ScrollSpyController implements ReactiveController {
       this.#setActive(last ?? this.#linkChildren.at(0));
     }
     this.#intersected = true;
-    this.#intersectingElements =
-      entries
-          .filter(x => x.isIntersecting)
-          .map(x => x.target);
+    this.#intersectingTargets.clear();
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        this.#intersectingTargets.add(entry.target);
+      }
+    }
     if (this.#initializing) {
       const ints = entries?.filter(x => x.isIntersecting) ?? [];
-      if (this.#intersectingElements) {
+      if (this.#intersectingTargets.size > 0) {
         const [{ target = null } = {}] = ints;
         const { id } = target ?? {};
         if (id) {

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

@@ -0,0 +1,43 @@
+import type { ReactiveElement } from 'lit';
+import {
+  type SlotControllerArgs,
+  type SlotControllerPublicAPI,
+} from './slot-controller.js';
+
+export class SlotController implements SlotControllerPublicAPI {
+  public static default = Symbol('default slot') satisfies symbol as symbol;
+
+  /** @deprecated use `default` */
+  public static anonymous: symbol = this.default;
+
+  static attribute = 'ssr-hint-has-slotted' as const;
+
+  static anonymousAttribute = 'ssr-hint-has-slotted-default' as const;
+
+  constructor(public host: ReactiveElement, ..._: SlotControllerArgs) {
+    host.addController(this);
+  }
+
+  hostConnected?(): Promise<void>;
+
+  private fromAttribute(slots: string | null) {
+    return (slots ?? '')
+        .split(/[, ]/)
+        .map(x => x.trim());
+  }
+
+  getSlotted<T extends Element = Element>(..._: string[]): T[] {
+    return [];
+  }
+
+  hasSlotted(...names: (string | null)[]): boolean {
+    const attr = this.host.getAttribute(SlotController.attribute);
+    const anon = this.host.hasAttribute(SlotController.anonymousAttribute);
+    const hints = new Set(this.fromAttribute(attr));
+    return names.every(x => x === null ? anon : hints.has(x));
+  }
+
+  isEmpty(...names: (string | null)[]): boolean {
+    return !this.hasSlotted(...names);
+  }
+}