@hanzogui/use-element-layout 8.3.0 → 8.3.2

package/dist/esm/index.js

@@ -1,324 +1,427 @@
-import { useIsomorphicLayoutEffect } from "@hanzogui/constants";
-import { createContext, useContext, useId } from "react";
-import { jsx } from "react/jsx-runtime";
-const LayoutHandlers = /* @__PURE__ */new WeakMap();
-const LayoutDisableKey = /* @__PURE__ */new WeakMap();
-const Nodes = /* @__PURE__ */new Set();
-const IntersectionState = /* @__PURE__ */new WeakMap();
-const usePretransformDimensions = () => globalThis.__GUI_ONLAYOUT_PRETRANSFORM === true || process.env.GUI_ONLAYOUT_PRETRANSFORM === "1";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from '@hanzogui/constants';
+import { createContext, useContext, useId } from 'react';
+const LayoutHandlers = new WeakMap();
+const LayoutDisableKey = new WeakMap();
+const Nodes = new Set();
+const IntersectionState = new WeakMap();
+// feature flag to enable pre-transform dimension reporting (matches RN behavior)
+// can be set via env var at build time or runtime global for testing
+// see: https://github.com/hanzoai/gui/pull/2329
+const usePretransformDimensions = () => globalThis.__GUI_ONLAYOUT_PRETRANSFORM === true ||
+    process.env.GUI_ONLAYOUT_PRETRANSFORM === '1';
 let _debugLayout;
 function isDebugLayout() {
-  if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
-  return _debugLayout;
+    if (_debugLayout === undefined) {
+        _debugLayout =
+            typeof window !== 'undefined' &&
+                new URLSearchParams(window.location.search).has('__tamaDebugLayout');
+    }
+    return _debugLayout;
 }
+// separating to avoid all re-rendering
 const DisableLayoutContextValues = {};
-const DisableLayoutContextKey = createContext("");
-const ENABLE = typeof IntersectionObserver !== "undefined";
-const LayoutMeasurementController = ({
-  disable,
-  children
-}) => {
-  const id = useId();
-  useIsomorphicLayoutEffect(() => {
-    DisableLayoutContextValues[id] = disable;
-  }, [disable, id]);
-  return /* @__PURE__ */jsx(DisableLayoutContextKey.Provider, {
-    value: id,
-    children
-  });
+const DisableLayoutContextKey = createContext('');
+const ENABLE = "web" === 'web' && typeof IntersectionObserver !== 'undefined';
+// internal testing - advanced helper to turn off layout measurement for extra performance
+// TODO document!
+// TODO could add frame skip control here
+export const LayoutMeasurementController = ({ disable, children, }) => {
+    const id = useId();
+    useIsomorphicLayoutEffect(() => {
+        DisableLayoutContextValues[id] = disable;
+    }, [disable, id]);
+    return (_jsx(DisableLayoutContextKey.Provider, { value: id, children: children }));
 };
+// Single persistent IntersectionObserver for visibility tracking
 let globalIntersectionObserver = null;
-let strategy = "async";
-function setOnLayoutStrategy(state) {
-  strategy = state;
+let strategy = 'async';
+export function setOnLayoutStrategy(state) {
+    strategy = state;
 }
-const NodeRectCache = /* @__PURE__ */new WeakMap();
+const NodeRectCache = new WeakMap();
+// prevent thrashing during first hydration (somewhat, streaming gets trickier)
 let avoidUpdates = true;
-const queuedUpdates = /* @__PURE__ */new Map();
-function enable() {
-  if (avoidUpdates) {
-    avoidUpdates = false;
-    if (queuedUpdates) {
-      queuedUpdates.forEach(cb => cb());
-      queuedUpdates.clear();
+const queuedUpdates = new Map();
+export function enable() {
+    if (avoidUpdates) {
+        avoidUpdates = false;
+        if (queuedUpdates) {
+            queuedUpdates.forEach((cb) => cb());
+            queuedUpdates.clear();
+        }
     }
-  }
 }
 function startGlobalObservers() {
-  if (!ENABLE || globalIntersectionObserver) return;
-  globalIntersectionObserver = new IntersectionObserver(entries => {
-    for (let i = 0; i < entries.length; i++) {
-      const entry = entries[i];
-      const node = entry.target;
-      if (IntersectionState.get(node) !== entry.isIntersecting) IntersectionState.set(node, entry.isIntersecting);
-    }
-  }, {
-    threshold: 0
-  });
+    if (!ENABLE || globalIntersectionObserver)
+        return;
+    globalIntersectionObserver = new IntersectionObserver((entries) => {
+        for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i];
+            const node = entry.target;
+            if (IntersectionState.get(node) !== entry.isIntersecting) {
+                IntersectionState.set(node, entry.isIntersecting);
+            }
+        }
+    }, {
+        threshold: 0,
+    });
 }
+// optimization: inline rect comparison to avoid function call overhead on hot path
 function rectsEqual(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 }
 if (ENABLE) {
-  let ensureRectFetchObserver = function () {
-    if (rectFetchObserver) return rectFetchObserver;
-    rectFetchObserver = new IntersectionObserver(entries => {
-      lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
-      for (let i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
-      if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
-      if (rectFetchResolve) {
-        rectFetchResolve(true);
-        rectFetchResolve = null;
-      }
-    }, {
-      threshold: 0
-    });
-    return rectFetchObserver;
-  };
-  const BoundingRects = /* @__PURE__ */new WeakMap();
-  let rectFetchObserver = null;
-  let rectFetchResolve = null;
-  let rectFetchStartTime = 0;
-  let lastCallbackDelay = 0;
-  async function updateLayoutIfChanged(node) {
-    if (typeof LayoutHandlers.get(node) !== "function") return;
-    const parentNode = node.parentElement;
-    if (!parentNode) return;
-    let nodeRect;
-    let parentRect;
-    if (strategy === "async") {
-      nodeRect = BoundingRects.get(node);
-      parentRect = BoundingRects.get(parentNode);
-      if (!nodeRect || !parentRect) return;
-    } else {
-      nodeRect = node.getBoundingClientRect();
-      parentRect = parentNode.getBoundingClientRect();
+    const BoundingRects = new WeakMap();
+    // optimization: persistent IO for rect fetching, reused across cycles
+    let rectFetchObserver = null;
+    let rectFetchResolve = null;
+    let rectFetchStartTime = 0;
+    let lastCallbackDelay = 0;
+    function ensureRectFetchObserver() {
+        if (rectFetchObserver)
+            return rectFetchObserver;
+        rectFetchObserver = new IntersectionObserver((entries) => {
+            lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
+            // store all rects
+            for (let i = 0; i < entries.length; i++) {
+                BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
+            }
+            if (process.env.NODE_ENV === 'development' &&
+                isDebugLayout() &&
+                lastCallbackDelay > 50) {
+                console.warn('[onLayout-io-delay]', lastCallbackDelay + 'ms', entries.length, 'entries');
+            }
+            if (rectFetchResolve) {
+                rectFetchResolve(true);
+                rectFetchResolve = null;
+            }
+        }, {
+            threshold: 0,
+        });
+        return rectFetchObserver;
     }
-    emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
-  }
-  const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
-  const userSkipVal = process.env.GUI_LAYOUT_FRAME_SKIP;
-  const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
-  const MAX_SKIP_FRAMES = 20;
-  let skipFrames = BASE_SKIP_FRAMES;
-  let frameCount = 0;
-  async function layoutOnAnimationFrame() {
-    if (frameCount++ % skipFrames !== 0) {
-      rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-      return;
+    async function updateLayoutIfChanged(node) {
+        const onLayout = LayoutHandlers.get(node);
+        if (typeof onLayout !== 'function')
+            return;
+        const parentNode = node.parentElement;
+        if (!parentNode)
+            return;
+        let nodeRect;
+        let parentRect;
+        // respect the strategy contract
+        if (strategy === 'async') {
+            nodeRect = BoundingRects.get(node);
+            parentRect = BoundingRects.get(parentNode);
+            if (!nodeRect || !parentRect) {
+                return;
+            }
+        }
+        else {
+            nodeRect = node.getBoundingClientRect();
+            parentRect = parentNode.getBoundingClientRect();
+        }
+        emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
     }
-    if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
-    if (strategy !== "off") {
-      const visibleNodes = [];
-      const parentsToObserve = /* @__PURE__ */new Set();
-      for (const node of Nodes) {
-        const parentElement = node.parentElement;
-        if (!(parentElement instanceof HTMLElement)) {
-          cleanupNode(node);
-          continue;
+    const rAF = typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : undefined;
+    // adaptive frame skipping with backoff
+    const userSkipVal = process.env.GUI_LAYOUT_FRAME_SKIP;
+    const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
+    const MAX_SKIP_FRAMES = 20;
+    let skipFrames = BASE_SKIP_FRAMES;
+    let frameCount = 0;
+    async function layoutOnAnimationFrame() {
+        // skip frames based on adaptive rate
+        if (frameCount++ % skipFrames !== 0) {
+            rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+            return;
         }
-        const disableKey = LayoutDisableKey.get(node);
-        if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
-        if (IntersectionState.get(node) === false) continue;
-        visibleNodes.push(node);
-        parentsToObserve.add(parentElement);
-      }
-      if (visibleNodes.length > 0) {
-        const io = ensureRectFetchObserver();
-        rectFetchStartTime = performance.now();
-        for (let i = 0; i < visibleNodes.length; i++) io.observe(visibleNodes[i]);
-        for (const parent of parentsToObserve) io.observe(parent);
-        await new Promise(res => {
-          rectFetchResolve = res;
-        });
-        for (let i = 0; i < visibleNodes.length; i++) io.unobserve(visibleNodes[i]);
-        for (const parent of parentsToObserve) io.unobserve(parent);
-        if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
-        for (let i = 0; i < visibleNodes.length; i++) updateLayoutIfChanged(visibleNodes[i]);
-      }
+        // reset frame count to avoid overflow
+        if (frameCount >= Number.MAX_SAFE_INTEGER) {
+            frameCount = 0;
+        }
+        if (strategy !== 'off') {
+            const visibleNodes = [];
+            // optimization: deduplicate parent observations
+            const parentsToObserve = new Set();
+            // collect visible nodes and their unique parents
+            for (const node of Nodes) {
+                const parentElement = node.parentElement;
+                if (!(parentElement instanceof HTMLElement)) {
+                    cleanupNode(node);
+                    continue;
+                }
+                const disableKey = LayoutDisableKey.get(node);
+                if (disableKey && DisableLayoutContextValues[disableKey] === true)
+                    continue;
+                if (IntersectionState.get(node) === false)
+                    continue;
+                visibleNodes.push(node);
+                parentsToObserve.add(parentElement);
+            }
+            if (visibleNodes.length > 0) {
+                const io = ensureRectFetchObserver();
+                rectFetchStartTime = performance.now();
+                // observe all nodes
+                for (let i = 0; i < visibleNodes.length; i++) {
+                    io.observe(visibleNodes[i]);
+                }
+                // optimization: observe unique parents only (not N times for N children)
+                for (const parent of parentsToObserve) {
+                    io.observe(parent);
+                }
+                // wait for callback
+                await new Promise((res) => {
+                    rectFetchResolve = res;
+                });
+                // unobserve all to reset for next cycle
+                for (let i = 0; i < visibleNodes.length; i++) {
+                    io.unobserve(visibleNodes[i]);
+                }
+                for (const parent of parentsToObserve) {
+                    io.unobserve(parent);
+                }
+                // adaptive backoff: if IO was slow, skip more frames next cycle
+                if (lastCallbackDelay > 50) {
+                    skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
+                }
+                else if (lastCallbackDelay < 20) {
+                    // recover back to base rate when things are fast
+                    skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
+                }
+                // process updates
+                for (let i = 0; i < visibleNodes.length; i++) {
+                    updateLayoutIfChanged(visibleNodes[i]);
+                }
+            }
+        }
+        // schedule next frame
+        rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
     }
-    rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-  }
-  layoutOnAnimationFrame();
+    layoutOnAnimationFrame();
 }
-const getElementLayoutEvent = (nodeRect, parentRect, node) => {
-  return {
-    nativeEvent: {
-      layout: getRelativeDimensions(nodeRect, parentRect, node),
-      target: nodeRect
-    },
-    timeStamp: Date.now()
-  };
+export const getElementLayoutEvent = (nodeRect, parentRect, node) => {
+    return {
+        nativeEvent: {
+            layout: getRelativeDimensions(nodeRect, parentRect, node),
+            target: nodeRect,
+        },
+        timeStamp: Date.now(),
+    };
 };
-const getPreTransformDimensions = node => {
-  return {
-    width: node.offsetWidth,
-    height: node.offsetHeight
-  };
+/**
+ * get pre-transform dimensions for a node.
+ * uses offsetWidth/offsetHeight which report CSS layout dimensions
+ * unaffected by transforms - this matches React Native's onLayout behavior.
+ *
+ * see: https://github.com/hanzoai/gui/pull/2329
+ */
+const getPreTransformDimensions = (node) => {
+    return {
+        width: node.offsetWidth,
+        height: node.offsetHeight,
+    };
 };
 const getRelativeDimensions = (a, b, aNode) => {
-  const {
-    left,
-    top
-  } = a;
-  const x = left - b.left;
-  const y = top - b.top;
-  const {
-    width,
-    height
-  } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
-    width: a.width,
-    height: a.height
-  };
-  return {
-    x,
-    y,
-    width,
-    height,
-    pageX: a.left,
-    pageY: a.top
-  };
+    const { left, top } = a;
+    const x = left - b.left;
+    const y = top - b.top;
+    // get pre-transform dimensions when flag is enabled and node is available
+    const { width, height } = usePretransformDimensions() && aNode
+        ? getPreTransformDimensions(aNode)
+        : { width: a.width, height: a.height };
+    return { x, y, width, height, pageX: a.left, pageY: a.top };
 };
 function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const cachedRect = NodeRectCache.get(node);
-  const cachedParentRect = NodeRectCache.get(parentNode);
-  const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
-  const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
-  if (!nodeChanged && !parentChanged) return;
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  const event = getElementLayoutEvent(nodeRect, parentRect, node);
-  if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
-    tag: node.tagName,
-    id: node.id || void 0,
-    className: (node.className || "").slice(0, 60) || void 0,
-    layout: event.nativeEvent.layout,
-    first: !cachedRect
-  });
-  if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));else onLayout(event);
+    const onLayout = LayoutHandlers.get(node);
+    if (typeof onLayout !== 'function')
+        return;
+    const cachedRect = NodeRectCache.get(node);
+    const cachedParentRect = NodeRectCache.get(parentNode);
+    const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
+    const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+    if (!nodeChanged && !parentChanged)
+        return;
+    NodeRectCache.set(node, nodeRect);
+    NodeRectCache.set(parentNode, parentRect);
+    const event = getElementLayoutEvent(nodeRect, parentRect, node);
+    if (process.env.NODE_ENV === 'development' && isDebugLayout()) {
+        console.log('[useElementLayout] change', {
+            tag: node.tagName,
+            id: node.id || undefined,
+            className: (node.className || '').slice(0, 60) || undefined,
+            layout: event.nativeEvent.layout,
+            first: !cachedRect,
+        });
+    }
+    if (avoidUpdates) {
+        queuedUpdates.set(node, () => onLayout(event));
+    }
+    else {
+        onLayout(event);
+    }
 }
 function observeLayoutNode(node, disableKey) {
-  Nodes.add(node);
-  if (disableKey) LayoutDisableKey.set(node, disableKey);else LayoutDisableKey.delete(node);
-  startGlobalObservers();
-  if (globalIntersectionObserver) {
-    globalIntersectionObserver.observe(node);
-    IntersectionState.set(node, true);
-  }
+    Nodes.add(node);
+    if (disableKey) {
+        LayoutDisableKey.set(node, disableKey);
+    }
+    else {
+        LayoutDisableKey.delete(node);
+    }
+    startGlobalObservers();
+    if (globalIntersectionObserver) {
+        globalIntersectionObserver.observe(node);
+        IntersectionState.set(node, true);
+    }
 }
-function registerLayoutNode(node, onChange, disableKey) {
-  LayoutHandlers.set(node, onChange);
-  observeLayoutNode(node, disableKey);
-  return () => cleanupNode(node);
+// register an arbitrary DOM element into the measurement loop without React lifecycle
+export function registerLayoutNode(node, onChange, disableKey) {
+    LayoutHandlers.set(node, onChange);
+    observeLayoutNode(node, disableKey);
+    return () => cleanupNode(node);
 }
 function cleanupNode(node) {
-  Nodes.delete(node);
-  LayoutHandlers.delete(node);
-  LayoutDisableKey.delete(node);
-  NodeRectCache.delete(node);
-  IntersectionState.delete(node);
-  if (globalIntersectionObserver) globalIntersectionObserver.unobserve(node);
+    Nodes.delete(node);
+    LayoutHandlers.delete(node);
+    LayoutDisableKey.delete(node);
+    NodeRectCache.delete(node);
+    IntersectionState.delete(node);
+    if (globalIntersectionObserver) {
+        globalIntersectionObserver.unobserve(node);
+    }
 }
-const PrevHostNode = /* @__PURE__ */new WeakMap();
+const PrevHostNode = new WeakMap();
+// spec: onLayout fires one synchronous initial event on mount and on host swap
+// (RN parity, and before-paint so consumers can position without flicker).
+// bypasses the avoidUpdates queue on purpose; seeds the rect cache so the
+// measurement loop doesn't re-emit an identical event a frame later.
 function emitLayoutSync(node) {
-  const onLayout = LayoutHandlers.get(node);
-  if (typeof onLayout !== "function") return;
-  const parentNode = node.parentElement;
-  if (!parentNode) return;
-  const nodeRect = node.getBoundingClientRect();
-  const parentRect = parentNode.getBoundingClientRect();
-  NodeRectCache.set(node, nodeRect);
-  NodeRectCache.set(parentNode, parentRect);
-  onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
+    const onLayout = LayoutHandlers.get(node);
+    if (typeof onLayout !== 'function')
+        return;
+    const parentNode = node.parentElement;
+    if (!parentNode)
+        return;
+    const nodeRect = node.getBoundingClientRect();
+    const parentRect = parentNode.getBoundingClientRect();
+    NodeRectCache.set(node, nodeRect);
+    NodeRectCache.set(parentNode, parentRect);
+    onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
 }
-function useElementLayout(ref, onLayout) {
-  const disableKey = useContext(DisableLayoutContextKey);
-  const node = ensureWebElement(ref.current?.host);
-  if (node && onLayout) {
-    LayoutHandlers.set(node, onLayout);
-    LayoutDisableKey.set(node, disableKey);
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (!onLayout) return;
-    const nextNode = ensureWebElement(ref.current?.host);
-    const prevNode = PrevHostNode.get(ref);
-    if (nextNode === prevNode) return;
-    if (prevNode) cleanupNode(prevNode);
-    PrevHostNode.set(ref, nextNode);
-    if (!nextNode) return;
-    LayoutHandlers.set(nextNode, onLayout);
-    observeLayoutNode(nextNode, disableKey);
-    emitLayoutSync(nextNode);
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (!onLayout) return;
-    const node2 = ref.current?.host;
-    if (!node2) return;
-    LayoutHandlers.set(node2, onLayout);
-    observeLayoutNode(node2, disableKey);
-    if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
-      tag: node2.tagName,
-      id: node2.id || void 0,
-      className: (node2.className || "").slice(0, 60) || void 0,
-      totalNodes: Nodes.size
+export function useElementLayout(ref, onLayout) {
+    const disableKey = useContext(DisableLayoutContextKey);
+    // keep handlers up to date so polling always calls the latest callback
+    const node = ensureWebElement(ref.current?.host);
+    if (node && onLayout) {
+        LayoutHandlers.set(node, onLayout);
+        LayoutDisableKey.set(node, disableKey);
+    }
+    // detect mounts + host swaps after commit and fire the immediate sync layout event
+    useIsomorphicLayoutEffect(() => {
+        if (!onLayout)
+            return;
+        const nextNode = ensureWebElement(ref.current?.host);
+        const prevNode = PrevHostNode.get(ref);
+        if (nextNode === prevNode)
+            return;
+        if (prevNode)
+            cleanupNode(prevNode);
+        PrevHostNode.set(ref, nextNode);
+        if (!nextNode)
+            return;
+        LayoutHandlers.set(nextNode, onLayout);
+        observeLayoutNode(nextNode, disableKey);
+        emitLayoutSync(nextNode);
     });
-    return () => {
-      cleanupNode(node2);
-      const swappedNode = PrevHostNode.get(ref);
-      if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
-      PrevHostNode.delete(ref);
-    };
-  }, [ref, !!onLayout]);
+    useIsomorphicLayoutEffect(() => {
+        if (!onLayout)
+            return;
+        const node = ref.current?.host;
+        if (!node)
+            return;
+        LayoutHandlers.set(node, onLayout);
+        observeLayoutNode(node, disableKey);
+        if (process.env.NODE_ENV === 'development' && isDebugLayout()) {
+            console.log('[useElementLayout] register', {
+                tag: node.tagName,
+                id: node.id || undefined,
+                className: (node.className || '').slice(0, 60) || undefined,
+                totalNodes: Nodes.size,
+            });
+        }
+        return () => {
+            cleanupNode(node);
+            // also clean up any node from a mid-lifecycle host swap
+            const swappedNode = PrevHostNode.get(ref);
+            if (swappedNode && swappedNode !== node) {
+                cleanupNode(swappedNode);
+            }
+            PrevHostNode.delete(ref);
+        };
+    }, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (typeof HTMLElement === "undefined") return;
-  return x instanceof HTMLElement ? x : void 0;
+    if (typeof HTMLElement === 'undefined') {
+        return undefined;
+    }
+    return x instanceof HTMLElement ? x : undefined;
 }
-const getBoundingClientRectAsync = node => {
-  return new Promise(res => {
-    if (!node || node.nodeType !== 1) return res(false);
-    const io = new IntersectionObserver(entries => {
-      io.disconnect();
-      return res(entries[0].boundingClientRect);
-    }, {
-      threshold: 0
+export const getBoundingClientRectAsync = (node) => {
+    return new Promise((res) => {
+        if (!node || node.nodeType !== 1)
+            return res(false);
+        const io = new IntersectionObserver((entries) => {
+            io.disconnect();
+            return res(entries[0].boundingClientRect);
+        }, {
+            threshold: 0,
+        });
+        io.observe(node);
     });
-    io.observe(node);
-  });
 };
-const measureNode = async (node, relativeTo) => {
-  const relativeNode = relativeTo || node?.parentElement;
-  if (relativeNode instanceof HTMLElement) {
-    const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
-    if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
-  }
-  return null;
+export const measureNode = async (node, relativeTo) => {
+    const relativeNode = relativeTo || node?.parentElement;
+    if (relativeNode instanceof HTMLElement) {
+        const [nodeDim, relativeNodeDim] = await Promise.all([
+            getBoundingClientRectAsync(node),
+            getBoundingClientRectAsync(relativeNode),
+        ]);
+        if (relativeNodeDim && nodeDim) {
+            return getRelativeDimensions(nodeDim, relativeNodeDim, node);
+        }
+    }
+    return null;
 };
-const measure = async (node, callback) => {
-  const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+export const measure = async (node, callback) => {
+    const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
+    if (out) {
+        callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+    }
+    return out;
 };
-function createMeasure(node) {
-  return callback => measure(node, callback);
+export function createMeasure(node) {
+    return (callback) => measure(node, callback);
 }
-const measureInWindow = async (node, callback) => {
-  const out = await measureNode(node, null);
-  if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
-  return out;
+export const measureInWindow = async (node, callback) => {
+    const out = await measureNode(node, null);
+    if (out) {
+        callback?.(out.pageX, out.pageY, out.width, out.height);
+    }
+    return out;
 };
-const createMeasureInWindow = node => {
-  return callback => measureInWindow(node, callback);
+export const createMeasureInWindow = (node) => {
+    return (callback) => measureInWindow(node, callback);
 };
-const measureLayout = async (node, relativeNode, callback) => {
-  const out = await measureNode(node, relativeNode);
-  if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
-  return out;
+export const measureLayout = async (node, relativeNode, callback) => {
+    const out = await measureNode(node, relativeNode);
+    if (out) {
+        callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
+    }
+    return out;
 };
-function createMeasureLayout(node) {
-  return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
+export function createMeasureLayout(node) {
+    return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
 }
-export { LayoutMeasurementController, createMeasure, createMeasureInWindow, createMeasureLayout, enable, getBoundingClientRectAsync, getElementLayoutEvent, measure, measureInWindow, measureLayout, measureNode, registerLayoutNode, setOnLayoutStrategy, useElementLayout };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map