@txstate-mws/svelte-components 1.6.14 → 1.6.15

package/dist/actions/glue.js

@@ -1,5 +1,50 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
+/**
+ * All active glue instances share one scroll listener and one requestAnimationFrame
+ * per frame. Each frame runs every registered measure() (the layout reads) and only
+ * then runs the write thunks they return, so for a page with thousands of glued
+ * elements the browser reads layout once per frame and never interleaves reads with
+ * writes. Multiple scroll events that arrive before a frame paints coalesce into a
+ * single measure pass.
+ */
+const glueInstances = new Set();
+let frameRequested = false;
+let scrollBound = false;
+function runGlueFrame() {
+    frameRequested = false;
+    const writes = [];
+    for (const measure of glueInstances) {
+        const write = measure();
+        if (write)
+            writes.push(write);
+    }
+    for (const write of writes)
+        write();
+}
+function scheduleGlueFrame() {
+    if (frameRequested)
+        return;
+    frameRequested = true;
+    requestAnimationFrame(runGlueFrame);
+}
+function onGlueScroll() {
+    scheduleGlueFrame();
+}
+function registerGlue(measure) {
+    glueInstances.add(measure);
+    if (!scrollBound) {
+        document.addEventListener('scroll', onGlueScroll, { capture: true, passive: true });
+        scrollBound = true;
+    }
+}
+function unregisterGlue(measure) {
+    glueInstances.delete(measure);
+    if (glueInstances.size === 0 && scrollBound) {
+        document.removeEventListener('scroll', onGlueScroll, { capture: true });
+        scrollBound = false;
+    }
+}
 /**
  * Make this element `position: fixed` and move it around to align with the target element.
  */
@@ -21,20 +66,33 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
     }
     let lastrect;
-    let timer;
-    function reposition() {
-        const fixedParent = fixedContainingBlock(el);
+    // The containing block (nearest ancestor that establishes a containing block for
+    // position: fixed) is determined by the ancestors' computed styles. Scrolling can
+    // never change it, but it CAN change when an ancestor gains/loses a transform,
+    // filter, will-change, contain, etc. Walking the ancestor chain and calling
+    // getComputedStyle on each node is expensive, so cache it across the high-frequency
+    // scroll events and recompute only when something might have changed: a DOM/style
+    // mutation, a resize, or a target change (see invalidateAndSchedule / update).
+    let fixedParent;
+    let fixedParentComputed = false;
+    // Read-only pass: gather geometry and build the write thunk. Runs inside the shared
+    // frame's measure phase, so it must not write to the DOM.
+    function measure() {
+        if (!fixedParentComputed) {
+            fixedParent = fixedContainingBlock(el);
+            fixedParentComputed = true;
+        }
         let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
         if (fixedParent) {
             const tmpRect = fixedParent.getBoundingClientRect();
             fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom };
         }
         if (!target)
-            return;
+            return undefined;
         const tmpRect = target.getBoundingClientRect();
         const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
-            return;
+            return undefined;
         lastrect = rect;
         let autoalign = align;
         const leftright = rect.right > rect.left ? 'left' : 'right';
@@ -84,81 +142,75 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         const elOffsetHeight = el.offsetHeight;
         const parentClientHeight = parent?.clientHeight ?? 0;
         const parentOverflowY = parent?.style.overflowY;
+        let position;
         if (autoalign === 'bottomleft') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'left';
         }
         else if (autoalign === 'bottomright') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('left');
                 el.style.removeProperty('bottom');
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'right';
         }
         else if (autoalign === 'topleft') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'left';
         }
         else if (autoalign === 'topright') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'right';
         }
         else if (autoalign === 'top') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.removeProperty('top');
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'top';
             halign = 'center';
         }
         else if (autoalign === 'bottom') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'bottom';
             halign = 'center';
         }
         else if (autoalign === 'left') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.removeProperty('bottom');
                 if (cover) {
@@ -170,13 +222,12 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.right = `${rect.right + rect.width + gap}px`;
                 }
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'left';
         }
         else if (autoalign === 'right') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.removeProperty('bottom');
                 if (cover) {
@@ -188,26 +239,35 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.removeProperty('right');
                 }
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'right';
         }
         else if (autoalign === 'middle') {
-            cancelAnimationFrame(timer);
-            timer = requestAnimationFrame(() => {
+            position = () => {
                 el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
                 el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
                 adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
-            });
+            };
             valign = 'center';
             halign = 'center';
         }
-        store?.update(v => ({ ...v, valign, halign }));
+        const fvalign = valign;
+        const fhalign = halign;
+        return () => {
+            position?.();
+            store?.update(v => ({ ...v, valign: fvalign, halign: fhalign }));
+        };
+    }
+    function invalidateAndSchedule() {
+        // A mutation or resize may have changed which ancestor is the containing block.
+        fixedParentComputed = false;
+        scheduleGlueFrame();
     }
-    const { destroy: watchDestroy } = watchForMutations(reposition);
-    document.addEventListener('scroll', reposition, { capture: true });
+    const { destroy: watchDestroy } = watchForMutations(invalidateAndSchedule);
+    registerGlue(measure);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, gap: ugap = 0, store: ustore }) {
             align = ualign;
@@ -223,13 +283,14 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                     el.style.removeProperty('position');
                 else {
                     el.style.position = 'fixed';
-                    reposition();
+                    fixedParentComputed = false;
                 }
+                scheduleGlueFrame();
             }
         },
         destroy() {
+            unregisterGlue(measure);
             watchDestroy();
-            document.removeEventListener('scroll', reposition);
             if (adjustparentheight && parent) {
                 if (formerMinHeight)
                     parent.style.minHeight = formerMinHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.14",
+  "version": "1.6.15",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -29,7 +29,7 @@
     "@sveltejs/package": "^2.0.2",
     "eslint-config-love": "^154.0.0",
     "eslint-plugin-svelte": "^3.0.0",
-    "svelte": "^5.0.0",
+    "svelte": "^5.56.3",
     "svelte-check": "^4.0.0",
     "tslib": "^2.3.1",
     "typescript": "^6.0.3"