feat(core): scroll-spy-controller hashchange

Author: bennypowers

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 {
   /**
@@ -23,6 +23,7 @@ export interface ScrollSpyControllerOptions extends IntersectionObserverInit {
    * @default el => el.getAttribute('href');
    */
   getHash?: (el: Element) => string | null;
+
   /**
    * Optional callback for when an intersection occurs
    */
@@ -40,9 +41,15 @@ export class ScrollSpyController implements ReactiveController {
         });
       }
     }, { passive: true });
+    addEventListener('hashchange', () => {
+      this.#instances.forEach(ssc => {
+        ssc.#activateHash();
+      });
+    });
   }
 
   #tagNames: string[];
+
   #activeAttribute: string;
 
   #io?: IntersectionObserver;
@@ -57,17 +64,28 @@ export class ScrollSpyController implements ReactiveController {
   #intersected = false;
 
   #root: ScrollSpyControllerOptions['root'];
+
   #rootMargin?: string;
+
   #threshold: number | number[];
-  #intersectingElements: Element[] = [];
+
+  #intersectingTargets = new Set<Element>();
+
+  #linkTargetMap = new Map<Element, Element | null>();
 
   #getRootNode: () => Node;
+
   #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 {
@@ -132,12 +150,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 +177,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 +211,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) {