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

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;
   },