@tamagui/use-element-layout 2.0.0-rc.3 → 2.0.0-rc.31

package/dist/cjs/index.cjs

@@ -31,19 +31,24 @@ __export(index_exports, {
   measureInWindow: () => measureInWindow,
   measureLayout: () => measureLayout,
   measureNode: () => measureNode,
+  registerLayoutNode: () => registerLayoutNode,
   setOnLayoutStrategy: () => setOnLayoutStrategy,
   useElementLayout: () => useElementLayout
 });
 module.exports = __toCommonJS(index_exports);
 var import_constants = require("@tamagui/constants"),
-  import_is_equal_shallow = require("@tamagui/is-equal-shallow"),
   import_react = require("react"),
   import_jsx_runtime = require("react/jsx-runtime");
 const LayoutHandlers = /* @__PURE__ */new WeakMap(),
   LayoutDisableKey = /* @__PURE__ */new WeakMap(),
   Nodes = /* @__PURE__ */new Set(),
   IntersectionState = /* @__PURE__ */new WeakMap(),
-  DisableLayoutContextValues = {},
+  usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === !0 || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
+let _debugLayout;
+function isDebugLayout() {
+  return _debugLayout === void 0 && (_debugLayout = typeof window < "u" && new URLSearchParams(window.location.search).has("__tamaDebugLayout")), _debugLayout;
+}
+const DisableLayoutContextValues = {},
   DisableLayoutContextKey = (0, import_react.createContext)(""),
   ENABLE = typeof IntersectionObserver < "u",
   LayoutMeasurementController = ({
@@ -63,8 +68,7 @@ let globalIntersectionObserver = null,
 function setOnLayoutStrategy(state) {
   strategy = state;
 }
-const NodeRectCache = /* @__PURE__ */new WeakMap(),
-  LastChangeTime = /* @__PURE__ */new WeakMap();
+const NodeRectCache = /* @__PURE__ */new WeakMap();
 let avoidUpdates = !0;
 const queuedUpdates = /* @__PURE__ */new Map();
 function enable() {
@@ -72,16 +76,33 @@ function enable() {
 }
 function startGlobalObservers() {
   !ENABLE || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      const node = entry.target;
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i],
+        node = entry.target;
       IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(node, entry.isIntersecting);
-    });
+    }
   }, {
     threshold: 0
   }));
 }
+function rectsEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
 if (ENABLE) {
+  let ensureRectFetchObserver = function () {
+    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);
+      process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50 && console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries"), rectFetchResolve && (rectFetchResolve(!0), rectFetchResolve = null);
+    }, {
+      threshold: 0
+    }), rectFetchObserver);
+  };
   const BoundingRects = /* @__PURE__ */new WeakMap();
+  let rectFetchObserver = null,
+    rectFetchResolve = null,
+    rectFetchStartTime = 0,
+    lastCallbackDelay = 0;
   async function updateLayoutIfChanged(node) {
     const onLayout = LayoutHandlers.get(node);
     if (typeof onLayout != "function") return;
@@ -89,68 +110,90 @@ if (ENABLE) {
     if (!parentNode) return;
     let nodeRect, parentRect;
     if (strategy === "async") {
-      const [nr, pr] = await Promise.all([BoundingRects.get(node), BoundingRects.get(parentNode)]);
-      if (!nr || !pr) return;
-      nodeRect = nr, parentRect = pr;
+      if (nodeRect = BoundingRects.get(node), parentRect = BoundingRects.get(parentNode), !nodeRect || !parentRect) return;
     } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
-    if (!nodeRect || !parentRect) return;
     const cachedRect = NodeRectCache.get(node),
-      cachedParentRect = NodeRectCache.get(parentNode);
-    if (!cachedRect || !cachedParentRect ||
-    // has changed one rect
-    // @ts-expect-error DOMRectReadOnly can go into object
-    !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) ||
-    // @ts-expect-error DOMRectReadOnly can go into object
-    !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect)) {
+      cachedParentRect = NodeRectCache.get(parentNode),
+      nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect),
+      parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+    if (nodeChanged || parentChanged) {
       NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
-      const event = getElementLayoutEvent(nodeRect, parentRect);
-      avoidUpdates ? queuedUpdates.set(node, () => onLayout(event)) : onLayout(event);
+      const event = getElementLayoutEvent(nodeRect, parentRect, node);
+      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
+      }), avoidUpdates ? queuedUpdates.set(node, () => onLayout(event)) : onLayout(event);
     }
   }
-  const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP,
-    RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 14;
+  const rAF = typeof requestAnimationFrame < "u" ? requestAnimationFrame : void 0,
+    userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP,
+    BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10,
+    MAX_SKIP_FRAMES = 20;
+  let skipFrames = BASE_SKIP_FRAMES,
+    frameCount = 0;
   async function layoutOnAnimationFrame() {
-    if (strategy !== "off") {
-      const visibleNodes = [];
-      (await new Promise(res => {
-        const io = new IntersectionObserver(entries => {
-          io.disconnect();
-          for (const entry of entries) BoundingRects.set(entry.target, entry.boundingClientRect);
-          res(!0);
-        }, {
-          threshold: 0
-        });
-        let didObserve = !1;
-        for (const node of Nodes) {
-          if (!(node.parentElement instanceof HTMLElement)) continue;
-          const disableKey = LayoutDisableKey.get(node);
-          disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (didObserve = !0, io.observe(node), io.observe(node.parentElement), visibleNodes.push(node));
+    if (frameCount++ % skipFrames !== 0) {
+      rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+      return;
+    }
+    if (frameCount >= Number.MAX_SAFE_INTEGER && (frameCount = 0), strategy !== "off") {
+      const visibleNodes = [],
+        parentsToObserve = /* @__PURE__ */new Set();
+      for (const node of Nodes) {
+        const parentElement = node.parentElement;
+        if (!(parentElement instanceof HTMLElement)) {
+          cleanupNode(node);
+          continue;
         }
-        didObserve || res(!1);
-      })) && visibleNodes.forEach(node => {
-        updateLayoutIfChanged(node);
-      });
+        const disableKey = LayoutDisableKey.get(node);
+        disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (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);
+        lastCallbackDelay > 50 ? skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES) : lastCallbackDelay < 20 && (skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES));
+        for (let i = 0; i < visibleNodes.length; i++) updateLayoutIfChanged(visibleNodes[i]);
+      }
     }
-    setTimeout(layoutOnAnimationFrame, 16.6667 * RUN_EVERY_X_FRAMES);
+    rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
   }
   layoutOnAnimationFrame();
 }
-const getElementLayoutEvent = (nodeRect, parentRect) => ({
+const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
     nativeEvent: {
-      layout: getRelativeDimensions(nodeRect, parentRect),
+      layout: getRelativeDimensions(nodeRect, parentRect, node),
       target: nodeRect
     },
     timeStamp: Date.now()
   }),
-  getRelativeDimensions = (a, b) => {
+  getPreTransformDimensions = node => ({
+    width: node.offsetWidth,
+    height: node.offsetHeight
+  }),
+  getRelativeDimensions = (a, b, aNode) => {
     const {
-        height,
         left,
-        top,
-        width
+        top
       } = a,
       x = left - b.left,
-      y = top - b.top;
+      y = top - b.top,
+      {
+        width,
+        height
+      } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+        width: a.width,
+        height: a.height
+      };
     return {
       x,
       y,
@@ -160,17 +203,44 @@ const getElementLayoutEvent = (nodeRect, parentRect) => ({
       pageY: a.top
     };
   };
+function registerLayoutNode(node, onChange, disableKey) {
+  return Nodes.add(node), LayoutHandlers.set(node, onChange), disableKey && LayoutDisableKey.set(node, disableKey), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node), IntersectionState.set(node, !0)), () => cleanupNode(node);
+}
+function cleanupNode(node) {
+  Nodes.delete(node), LayoutHandlers.delete(node), LayoutDisableKey.delete(node), NodeRectCache.delete(node), IntersectionState.delete(node), globalIntersectionObserver && globalIntersectionObserver.unobserve(node);
+}
+const PrevHostNode = /* @__PURE__ */new WeakMap();
 function useElementLayout(ref, onLayout) {
   const disableKey = (0, import_react.useContext)(DisableLayoutContextKey),
     node = ensureWebElement(ref.current?.host);
   node && onLayout && (LayoutHandlers.set(node, onLayout), LayoutDisableKey.set(node, disableKey)), (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (!onLayout) return;
+    const nextNode = ensureWebElement(ref.current?.host),
+      prevNode = PrevHostNode.get(ref);
+    if (nextNode === prevNode || (prevNode && cleanupNode(prevNode), PrevHostNode.set(ref, nextNode), !nextNode)) return;
+    Nodes.add(nextNode), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(nextNode), IntersectionState.set(nextNode, !0));
+    const handler = LayoutHandlers.get(nextNode);
+    if (typeof handler != "function") return;
+    const parentNode = nextNode.parentElement;
+    if (!parentNode) return;
+    const nodeRect = nextNode.getBoundingClientRect(),
+      parentRect = parentNode.getBoundingClientRect();
+    NodeRectCache.set(nextNode, nodeRect), NodeRectCache.set(parentNode, parentRect), handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
+  }), (0, import_constants.useIsomorphicLayoutEffect)(() => {
     if (!onLayout) return;
     const node2 = ref.current?.host;
     if (!node2) return;
-    Nodes.add(node2), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0));
+    Nodes.add(node2), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0)), 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
+    });
     const parentNode = node2.parentNode;
-    return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect())), () => {
-      Nodes.delete(node2), LayoutHandlers.delete(node2), NodeRectCache.delete(node2), LastChangeTime.delete(node2), IntersectionState.delete(node2), globalIntersectionObserver && globalIntersectionObserver.unobserve(node2);
+    return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2)), () => {
+      cleanupNode(node2);
+      const swappedNode = PrevHostNode.get(ref);
+      swappedNode && swappedNode !== node2 && cleanupNode(swappedNode), PrevHostNode.delete(ref);
     };
   }, [ref, !!onLayout]);
 }
@@ -188,7 +258,7 @@ const getBoundingClientRectAsync = node => new Promise(res => {
     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);
+      if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
     }
     return null;
   },

package/dist/cjs/index.native.js

@@ -33,13 +33,13 @@ __export(index_exports, {
   measureInWindow: () => measureInWindow,
   measureLayout: () => measureLayout,
   measureNode: () => measureNode,
+  registerLayoutNode: () => registerLayoutNode,
   setOnLayoutStrategy: () => setOnLayoutStrategy,
   useElementLayout: () => useElementLayout
 });
 module.exports = __toCommonJS(index_exports);
 var import_jsx_runtime = require("react/jsx-runtime"),
   import_constants = require("@tamagui/constants"),
-  import_is_equal_shallow = require("@tamagui/is-equal-shallow"),
   import_react = require("react");
 function _instanceof(left, right) {
   return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
@@ -48,7 +48,14 @@ var LayoutHandlers = /* @__PURE__ */new WeakMap(),
   LayoutDisableKey = /* @__PURE__ */new WeakMap(),
   Nodes = /* @__PURE__ */new Set(),
   IntersectionState = /* @__PURE__ */new WeakMap(),
-  DisableLayoutContextValues = {},
+  usePretransformDimensions = function () {
+    return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === !0 || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
+  },
+  _debugLayout;
+function isDebugLayout() {
+  return _debugLayout === void 0 && (_debugLayout = typeof window < "u" && new URLSearchParams(window.location.search).has("__tamaDebugLayout")), _debugLayout;
+}
+var DisableLayoutContextValues = {},
   DisableLayoutContextKey = /* @__PURE__ */(0, import_react.createContext)(""),
   ENABLE = !1,
   LayoutMeasurementController = function (param) {
@@ -70,7 +77,6 @@ function setOnLayoutStrategy(state) {
   strategy = state;
 }
 var NodeRectCache = /* @__PURE__ */new WeakMap(),
-  LastChangeTime = /* @__PURE__ */new WeakMap(),
   avoidUpdates = !0,
   queuedUpdates = /* @__PURE__ */new Map();
 function enable() {
@@ -80,16 +86,34 @@ function enable() {
 }
 function startGlobalObservers() {
   !ENABLE || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(function (entries) {
-    entries.forEach(function (entry) {
-      var node = entry.target;
+    for (var i = 0; i < entries.length; i++) {
+      var entry = entries[i],
+        node = entry.target;
       IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(node, entry.isIntersecting);
-    });
+    }
   }, {
     threshold: 0
   }));
 }
+function rectsEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
 if (ENABLE) {
-  var BoundingRects = /* @__PURE__ */new WeakMap();
+  let ensureRectFetchObserver = function () {
+    return rectFetchObserver || (rectFetchObserver = new IntersectionObserver(function (entries) {
+      lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
+      for (var i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
+      process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50 && console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries"), rectFetchResolve && (rectFetchResolve(!0), rectFetchResolve = null);
+    }, {
+      threshold: 0
+    }), rectFetchObserver);
+  };
+  var ensureRectFetchObserver2 = ensureRectFetchObserver,
+    BoundingRects = /* @__PURE__ */new WeakMap(),
+    rectFetchObserver = null,
+    rectFetchResolve = null,
+    rectFetchStartTime = 0,
+    lastCallbackDelay = 0;
   async function updateLayoutIfChanged(node) {
     var onLayout = LayoutHandlers.get(node);
     if (typeof onLayout == "function") {
@@ -97,107 +121,144 @@ if (ENABLE) {
       if (parentNode) {
         var nodeRect, parentRect;
         if (strategy === "async") {
-          var [nr, pr] = await Promise.all([BoundingRects.get(node), BoundingRects.get(parentNode)]);
-          if (!nr || !pr) return;
-          nodeRect = nr, parentRect = pr;
+          if (nodeRect = BoundingRects.get(node), parentRect = BoundingRects.get(parentNode), !nodeRect || !parentRect) return;
         } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
-        if (!(!nodeRect || !parentRect)) {
-          var cachedRect = NodeRectCache.get(node),
-            cachedParentRect = NodeRectCache.get(parentNode);
-          if (!cachedRect || !cachedParentRect ||
-          // has changed one rect
-          // @ts-expect-error DOMRectReadOnly can go into object
-          !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) ||
-          // @ts-expect-error DOMRectReadOnly can go into object
-          !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect)) {
-            NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
-            var event = getElementLayoutEvent(nodeRect, parentRect);
-            avoidUpdates ? queuedUpdates.set(node, function () {
-              return onLayout(event);
-            }) : onLayout(event);
-          }
+        var cachedRect = NodeRectCache.get(node),
+          cachedParentRect = NodeRectCache.get(parentNode),
+          nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect),
+          parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
+        if (nodeChanged || parentChanged) {
+          NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
+          var event = getElementLayoutEvent(nodeRect, parentRect, node);
+          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
+          }), avoidUpdates ? queuedUpdates.set(node, function () {
+            return onLayout(event);
+          }) : onLayout(event);
         }
       }
     }
   }
-  var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP,
-    RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 14;
+  var rAF = typeof requestAnimationFrame < "u" ? requestAnimationFrame : void 0,
+    userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP,
+    BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10,
+    MAX_SKIP_FRAMES = 20,
+    skipFrames = BASE_SKIP_FRAMES,
+    frameCount = 0;
   async function layoutOnAnimationFrame() {
-    if (strategy !== "off") {
+    if (frameCount++ % skipFrames !== 0) {
+      rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+      return;
+    }
+    if (frameCount >= Number.MAX_SAFE_INTEGER && (frameCount = 0), strategy !== "off") {
       var visibleNodes = [],
-        didRun = await new Promise(function (res) {
-          var io = new IntersectionObserver(function (entries) {
-              io.disconnect();
-              var _iteratorNormalCompletion2 = !0,
-                _didIteratorError2 = !1,
-                _iteratorError2 = void 0;
-              try {
-                for (var _iterator2 = entries[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
-                  var entry = _step2.value;
-                  BoundingRects.set(entry.target, entry.boundingClientRect);
-                }
-              } catch (err) {
-                _didIteratorError2 = !0, _iteratorError2 = err;
-              } finally {
-                try {
-                  !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
-                } finally {
-                  if (_didIteratorError2) throw _iteratorError2;
-                }
-              }
-              res(!0);
-            }, {
-              threshold: 0
-            }),
-            didObserve = !1,
-            _iteratorNormalCompletion = !0,
-            _didIteratorError = !1,
-            _iteratorError = void 0;
+        parentsToObserve = /* @__PURE__ */new Set(),
+        _iteratorNormalCompletion = !0,
+        _didIteratorError = !1,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+          var node = _step.value,
+            parentElement = node.parentElement;
+          if (!_instanceof(parentElement, HTMLElement)) {
+            cleanupNode(node);
+            continue;
+          }
+          var disableKey = LayoutDisableKey.get(node);
+          disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (visibleNodes.push(node), parentsToObserve.add(parentElement));
+        }
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError) throw _iteratorError;
+        }
+      }
+      if (visibleNodes.length > 0) {
+        var io = ensureRectFetchObserver();
+        rectFetchStartTime = performance.now();
+        for (var i = 0; i < visibleNodes.length; i++) io.observe(visibleNodes[i]);
+        var _iteratorNormalCompletion1 = !0,
+          _didIteratorError1 = !1,
+          _iteratorError1 = void 0;
+        try {
+          for (var _iterator1 = parentsToObserve[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
+            var parent = _step1.value;
+            io.observe(parent);
+          }
+        } catch (err) {
+          _didIteratorError1 = !0, _iteratorError1 = err;
+        } finally {
           try {
-            for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-              var node = _step.value;
-              if (_instanceof(node.parentElement, HTMLElement)) {
-                var disableKey = LayoutDisableKey.get(node);
-                disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (didObserve = !0, io.observe(node), io.observe(node.parentElement), visibleNodes.push(node));
-              }
-            }
-          } catch (err) {
-            _didIteratorError = !0, _iteratorError = err;
+            !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
           } finally {
-            try {
-              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-            } finally {
-              if (_didIteratorError) throw _iteratorError;
-            }
+            if (_didIteratorError1) throw _iteratorError1;
           }
-          didObserve || res(!1);
+        }
+        await new Promise(function (res) {
+          rectFetchResolve = res;
         });
-      didRun && visibleNodes.forEach(function (node) {
-        updateLayoutIfChanged(node);
-      });
+        for (var i1 = 0; i1 < visibleNodes.length; i1++) io.unobserve(visibleNodes[i1]);
+        var _iteratorNormalCompletion2 = !0,
+          _didIteratorError2 = !1,
+          _iteratorError2 = void 0;
+        try {
+          for (var _iterator2 = parentsToObserve[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = !0) {
+            var parent1 = _step2.value;
+            io.unobserve(parent1);
+          }
+        } catch (err) {
+          _didIteratorError2 = !0, _iteratorError2 = err;
+        } finally {
+          try {
+            !_iteratorNormalCompletion2 && _iterator2.return != null && _iterator2.return();
+          } finally {
+            if (_didIteratorError2) throw _iteratorError2;
+          }
+        }
+        lastCallbackDelay > 50 ? skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES) : lastCallbackDelay < 20 && (skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES));
+        for (var i2 = 0; i2 < visibleNodes.length; i2++) updateLayoutIfChanged(visibleNodes[i2]);
+      }
     }
-    setTimeout(layoutOnAnimationFrame, 16.6667 * RUN_EVERY_X_FRAMES);
+    rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
   }
   layoutOnAnimationFrame();
 }
-var getElementLayoutEvent = function (nodeRect, parentRect) {
+var getElementLayoutEvent = function (nodeRect, parentRect, node) {
     return {
       nativeEvent: {
-        layout: getRelativeDimensions(nodeRect, parentRect),
+        layout: getRelativeDimensions(nodeRect, parentRect, node),
         target: nodeRect
       },
       timeStamp: Date.now()
     };
   },
-  getRelativeDimensions = function (a, b) {
+  getPreTransformDimensions = function (node) {
+    return {
+      width: node.offsetWidth,
+      height: node.offsetHeight
+    };
+  },
+  getRelativeDimensions = function (a, b, aNode) {
     var {
-        height,
         left,
-        top,
-        width
+        top
       } = a,
       x = left - b.left,
-      y = top - b.top;
+      y = top - b.top,
+      {
+        width,
+        height
+      } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
+        width: a.width,
+        height: a.height
+      };
     return {
       x,
       y,
@@ -207,19 +268,53 @@ var getElementLayoutEvent = function (nodeRect, parentRect) {
       pageY: a.top
     };
   };
+function registerLayoutNode(node, onChange, disableKey) {
+  return Nodes.add(node), LayoutHandlers.set(node, onChange), disableKey && LayoutDisableKey.set(node, disableKey), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node), IntersectionState.set(node, !0)), function () {
+    return cleanupNode(node);
+  };
+}
+function cleanupNode(node) {
+  Nodes.delete(node), LayoutHandlers.delete(node), LayoutDisableKey.delete(node), NodeRectCache.delete(node), IntersectionState.delete(node), globalIntersectionObserver && globalIntersectionObserver.unobserve(node);
+}
+var PrevHostNode = /* @__PURE__ */new WeakMap();
 function useElementLayout(ref, onLayout) {
   var _ref_current,
     disableKey = (0, import_react.useContext)(DisableLayoutContextKey),
     node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
   node && onLayout && (LayoutHandlers.set(node, onLayout), LayoutDisableKey.set(node, disableKey)), (0, import_constants.useIsomorphicLayoutEffect)(function () {
+    var _ref_current2;
+    if (onLayout) {
+      var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host),
+        prevNode = PrevHostNode.get(ref);
+      if (nextNode !== prevNode && (prevNode && cleanupNode(prevNode), PrevHostNode.set(ref, nextNode), !!nextNode)) {
+        Nodes.add(nextNode), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(nextNode), IntersectionState.set(nextNode, !0));
+        var handler = LayoutHandlers.get(nextNode);
+        if (typeof handler == "function") {
+          var parentNode = nextNode.parentElement;
+          if (parentNode) {
+            var nodeRect = nextNode.getBoundingClientRect(),
+              parentRect = parentNode.getBoundingClientRect();
+            NodeRectCache.set(nextNode, nodeRect), NodeRectCache.set(parentNode, parentRect), handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
+          }
+        }
+      }
+    }
+  }), (0, import_constants.useIsomorphicLayoutEffect)(function () {
     var _ref_current2;
     if (onLayout) {
       var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
       if (node2) {
-        Nodes.add(node2), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0));
+        Nodes.add(node2), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0)), 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
+        });
         var parentNode = node2.parentNode;
-        return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect())), function () {
-          Nodes.delete(node2), LayoutHandlers.delete(node2), NodeRectCache.delete(node2), LastChangeTime.delete(node2), IntersectionState.delete(node2), globalIntersectionObserver && globalIntersectionObserver.unobserve(node2);
+        return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2)), function () {
+          cleanupNode(node2);
+          var swappedNode = PrevHostNode.get(ref);
+          swappedNode && swappedNode !== node2 && cleanupNode(swappedNode), PrevHostNode.delete(ref);
         };
       }
     }
@@ -243,7 +338,7 @@ var getBoundingClientRectAsync = function (node) {
     var relativeNode = relativeTo || node?.parentElement;
     if (_instanceof(relativeNode, HTMLElement)) {
       var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
-      if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim);
+      if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
     }
     return null;
   },