perf(toc): reuse IntersectionObserver

Author: vnphanquang

.changeset/seven-badgers-act.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/toc': patch
+---
+
+use as few IntersectionObserver as possible, only create for each new threshold, otherwise reuse

packages/actions/toc/api/toc.api.md

@@ -7,20 +7,6 @@
 import type { Action } from 'svelte/action';
 import { Writable } from 'svelte/store';
 
-// Warning: (ae-internal-missing-underscore) The name "ATTRIBUTES" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const ATTRIBUTES: {
-    autoslug: string;
-    autoSlugAnchor: string;
-    toc: string;
-    anchor: string;
-    id: string;
-    ignore: string;
-    strategy: string;
-    threshold: string;
-};
-
 // @public
 export function createTocStore(): Writable<TocStoreValue>;
 
@@ -47,14 +33,6 @@ export const DEFAULT_TOC_PARAMETERS: {
     };
 };
 
-// Warning: (ae-internal-missing-underscore) The name "EVENTS" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const EVENTS: {
-    init: string;
-    change: string;
-};
-
 // Warning: (ae-internal-missing-underscore) The name "ResolvedTocParameters" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal

packages/actions/toc/src/lib/toc.action.ts

@@ -3,6 +3,8 @@ import { tick } from 'svelte';
 import type { Action, ActionReturn } from 'svelte/action';
 import { writable } from 'svelte/store';
 
+import { ATTRIBUTES, EVENTS, cache, intersectionObserverCallback } from './toc.internal';
+import type { ActiveTocItemStore } from './toc.internal';
 import { compare, resolve } from './toc.parameters';
 import type {
   ResolvedTocParameters,
@@ -15,32 +17,6 @@ import type {
 } from './toc.types';
 import { slugify } from './toc.utils';
 
-/**
- * all relevant data attribute name literals
- * @internal
- */
-export const ATTRIBUTES = {
-  autoslug: 'data-auto-slug',
-  autoSlugAnchor: 'data-auto-slug-anchor',
-  toc: 'data-toc',
-  anchor: 'data-toc-anchor',
-  id: 'data-toc-id',
-  ignore: 'data-toc-ignore',
-  strategy: 'data-toc-strategy',
-  threshold: 'data-toc-threshold',
-};
-
-/**
- * all relevant event name literals
- * @internal
- */
-export const EVENTS = {
-  init: 'tocinit',
-  change: 'tocchange',
-};
-
-const cache: Record<string, TocCacheItem> = {};
-
 /**
  * search for matching elements, inject anchor element, watch for active element
  * in viewport with `IntersectionObserver`. All for building table of contents.
@@ -121,7 +97,11 @@ export const toc: Action<HTMLElement, UserTocParameters, TocAttributes> = functi
   let resolved = resolve(parameters);
 
   let items: TocCacheItem['items'] = {};
-  const activeTocItemStore = writable<string | undefined>(undefined);
+  const activeTocItemStore = writable<string | undefined>(undefined) satisfies ActiveTocItemStore;
+
+  // stay minimal by reusing as few `IntersectionObserver` as possible
+  // only create new `IntersectionObserver` for each new `threshold`
+  const observers: Record<number, IntersectionObserver> = {};
 
   const activeTocItemStoreUnsubscribe = activeTocItemStore.subscribe((activeTocItemId) => {
     if (activeTocItemId) {
@@ -134,15 +114,6 @@ export const toc: Action<HTMLElement, UserTocParameters, TocAttributes> = functi
     }
   });
 
-  const createObserverCallback: (tocId: string) => IntersectionObserverCallback =
-    (tocId) => (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting && tocId) {
-          activeTocItemStore.set(tocId);
-        }
-      }
-    };
-
   tick().then(async () => {
     const { id, selector, anchor, observe, scrollMarginTop } = resolved;
     const elements: HTMLElement[] = Array.from(node.querySelectorAll(selector));
@@ -252,11 +223,18 @@ export const toc: Action<HTMLElement, UserTocParameters, TocAttributes> = functi
                 : observe.threshold;
           }
           const { root, rootMargin } = observe;
-          const observer = new IntersectionObserver(createObserverCallback(tocId), {
-            threshold,
-            rootMargin,
-            root,
-          });
+          nodeToObserve.setAttribute(ATTRIBUTES.observeFor, tocId);
+          let observer: IntersectionObserver;
+          if (observers[threshold]) {
+            observer = observers[threshold];
+          } else {
+            observer = new IntersectionObserver(intersectionObserverCallback(activeTocItemStore), {
+              threshold,
+              rootMargin,
+              root,
+            });
+            observers[threshold] = observer;
+          }
           observer.observe(nodeToObserve);
           rObserve = { strategy: rStrategy, observer, threshold };
         }
@@ -285,9 +263,18 @@ export const toc: Action<HTMLElement, UserTocParameters, TocAttributes> = functi
   return {
     update(update) {
       resolved = resolve(update);
+      // right now `toc` does not support dynamic parameter updates
+      // meaning it'll only run once on component initialization
+      // and not on subsequent updates
+      // this is because the effort to support dynamic updates is rather high:
+      // - revert all previous operation (or detect which ones are still valid/invalid)
+      // - re-run operations
     },
     destroy() {
       activeTocItemStoreUnsubscribe();
+      for (const observer of Object.values(observers)) {
+        observer.disconnect();
+      }
     },
   };
 };

packages/actions/toc/src/lib/toc.internal.ts

@@ -0,0 +1,57 @@
+import type { Writable } from 'svelte/store';
+
+import type { TocCacheItem } from './toc.types';
+/**
+ * all relevant data attribute name literals
+ * @internal
+ */
+export const ATTRIBUTES = {
+  // markers from `@svelte-put/preprocess-auo-slug`
+  autoslug: 'data-auto-slug',
+  autoSlugAnchor: 'data-auto-slug-anchor',
+  // markers
+  toc: 'data-toc',
+  anchor: 'data-toc-anchor',
+  // customization per matching element
+  id: 'data-toc-id',
+  ignore: 'data-toc-ignore',
+  strategy: 'data-toc-strategy',
+  threshold: 'data-toc-threshold',
+  // tracking information for `IntersectionObserver`
+  observeFor: 'data-toc-observe-for',
+};
+
+/**
+ * all relevant event name literals
+ * @internal
+ */
+export const EVENTS = {
+  init: 'tocinit',
+  change: 'tocchange',
+};
+
+/**
+ * @internal
+ */
+export const cache: Record<string, TocCacheItem> = {};
+
+/**
+ * @internal
+ */
+export type ActiveTocItemStore = Writable<string | undefined>;
+
+/**
+ * @internal
+ */
+export const intersectionObserverCallback: (
+  store: ActiveTocItemStore,
+) => IntersectionObserverCallback = (store) => {
+  return (entries) => {
+    for (const entry of entries) {
+      const tocId = entry.target.getAttribute(ATTRIBUTES.observeFor);
+      if (tocId && entry.isIntersecting) {
+        store.set(tocId);
+      }
+    }
+  };
+};