@tamagui/use-element-layout 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/index.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var index_exports = {};
 __export(index_exports, {
@@ -31,183 +33,331 @@ __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 = {},
-  DisableLayoutContextKey = (0, import_react.createContext)(""),
-  ENABLE = typeof IntersectionObserver < "u",
-  LayoutMeasurementController = ({
-    disable,
+var import_constants = require("@tamagui/constants");
+var import_react = require("react");
+var import_jsx_runtime = require("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.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
+let _debugLayout;
+function isDebugLayout() {
+  if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
+  return _debugLayout;
+}
+const DisableLayoutContextValues = {};
+const DisableLayoutContextKey = (0, import_react.createContext)("");
+const ENABLE = typeof IntersectionObserver !== "undefined";
+const LayoutMeasurementController = ({
+  disable,
+  children
+}) => {
+  const id = (0, import_react.useId)();
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    DisableLayoutContextValues[id] = disable;
+  }, [disable, id]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
+    value: id,
     children
-  }) => {
-    const id = (0, import_react.useId)();
-    return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      DisableLayoutContextValues[id] = disable;
-    }, [disable, id]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
-      value: id,
-      children
-    });
-  };
-let globalIntersectionObserver = null,
-  strategy = "async";
+  });
+};
+let globalIntersectionObserver = null;
+let strategy = "async";
 function setOnLayoutStrategy(state) {
   strategy = state;
 }
-const NodeRectCache = /* @__PURE__ */new WeakMap(),
-  LastChangeTime = /* @__PURE__ */new WeakMap();
-let avoidUpdates = !0;
+const NodeRectCache = /* @__PURE__ */new WeakMap();
+let avoidUpdates = true;
 const queuedUpdates = /* @__PURE__ */new Map();
 function enable() {
-  avoidUpdates && (avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(cb => cb()), queuedUpdates.clear()));
+  if (avoidUpdates) {
+    avoidUpdates = false;
+    if (queuedUpdates) {
+      queuedUpdates.forEach(cb => cb());
+      queuedUpdates.clear();
+    }
+  }
 }
 function startGlobalObservers() {
-  !ENABLE || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
+  if (!ENABLE || globalIntersectionObserver) return;
+  globalIntersectionObserver = new IntersectionObserver(entries => {
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
       const node = entry.target;
-      IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(node, entry.isIntersecting);
-    });
+      if (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 () {
+    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) {
     const onLayout = LayoutHandlers.get(node);
-    if (typeof onLayout != "function") return;
+    if (typeof onLayout !== "function") return;
     const parentNode = node.parentElement;
     if (!parentNode) return;
-    let nodeRect, parentRect;
+    let nodeRect;
+    let parentRect;
     if (strategy === "async") {
-      const [nr, pr] = await Promise.all([BoundingRects.get(node), BoundingRects.get(parentNode)]);
-      if (!nr || !pr) return;
-      nodeRect = nr, parentRect = pr;
-    } 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)) {
-      NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
-      const event = getElementLayoutEvent(nodeRect, parentRect);
-      avoidUpdates ? queuedUpdates.set(node, () => onLayout(event)) : onLayout(event);
+      nodeRect = BoundingRects.get(node);
+      parentRect = BoundingRects.get(parentNode);
+      if (!nodeRect || !parentRect) return;
+    } else {
+      nodeRect = node.getBoundingClientRect();
+      parentRect = parentNode.getBoundingClientRect();
+    }
+    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) {
+      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 userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP,
-    RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 14;
+  const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
+  const userSkipVal = process.env.TAMAGUI_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;
+    }
+    if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
     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));
+      const 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);
+        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]);
+      }
     }
-    setTimeout(layoutOnAnimationFrame, 16.6667 * RUN_EVERY_X_FRAMES);
+    rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
   }
   layoutOnAnimationFrame();
 }
-const getElementLayoutEvent = (nodeRect, parentRect) => ({
+const getElementLayoutEvent = (nodeRect, parentRect, node) => {
+  return {
     nativeEvent: {
-      layout: getRelativeDimensions(nodeRect, parentRect),
+      layout: getRelativeDimensions(nodeRect, parentRect, node),
       target: nodeRect
     },
     timeStamp: Date.now()
-  }),
-  getRelativeDimensions = (a, b) => {
-    const {
-        height,
-        left,
-        top,
-        width
-      } = a,
-      x = left - b.left,
-      y = top - b.top;
-    return {
-      x,
-      y,
-      width,
-      height,
-      pageX: a.left,
-      pageY: a.top
-    };
   };
+};
+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
+  };
+};
+function registerLayoutNode(node, onChange, disableKey) {
+  Nodes.add(node);
+  LayoutHandlers.set(node, onChange);
+  if (disableKey) LayoutDisableKey.set(node, disableKey);
+  startGlobalObservers();
+  if (globalIntersectionObserver) {
+    globalIntersectionObserver.observe(node);
+    IntersectionState.set(node, true);
+  }
+  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);
+}
+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)(() => {
+  const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
+  const node = ensureWebElement(ref.current?.host);
+  if (node && onLayout) {
+    LayoutHandlers.set(node, onLayout);
+    LayoutDisableKey.set(node, disableKey);
+  }
+  (0, import_constants.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;
+    Nodes.add(nextNode);
+    startGlobalObservers();
+    if (globalIntersectionObserver) {
+      globalIntersectionObserver.observe(nextNode);
+      IntersectionState.set(nextNode, true);
+    }
+    const handler = LayoutHandlers.get(nextNode);
+    if (typeof handler !== "function") return;
+    const parentNode = nextNode.parentElement;
+    if (!parentNode) return;
+    const nodeRect = nextNode.getBoundingClientRect();
+    const 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();
+    if (globalIntersectionObserver) {
+      globalIntersectionObserver.observe(node2);
+      IntersectionState.set(node2, true);
+    }
+    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
+    });
     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);
+    if (parentNode) onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
+    return () => {
+      cleanupNode(node2);
+      const swappedNode = PrevHostNode.get(ref);
+      if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
+      PrevHostNode.delete(ref);
     };
   }, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-  if (!(typeof HTMLElement > "u")) return x instanceof HTMLElement ? x : void 0;
+  if (typeof HTMLElement === "undefined") return;
+  return x instanceof HTMLElement ? x : void 0;
 }
-const getBoundingClientRectAsync = node => new Promise(res => {
-    if (!node || node.nodeType !== 1) return res(!1);
-    const io = new IntersectionObserver(entries => (io.disconnect(), res(entries[0].boundingClientRect)), {
+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);
-  }),
-  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);
-    }
-    return null;
-  },
-  measure = async (node, callback) => {
-    const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
-    return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
-  };
+  });
+};
+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;
+};
 function createMeasure(node) {
   return callback => measure(node, callback);
 }
 const measureInWindow = async (node, callback) => {
-    const out = await measureNode(node, null);
-    return out && callback?.(out.pageX, out.pageY, out.width, out.height), out;
-  },
-  createMeasureInWindow = node => callback => measureInWindow(node, callback),
-  measureLayout = async (node, relativeNode, callback) => {
-    const out = await measureNode(node, relativeNode);
-    return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
-  };
+  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);
+};
+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);
 }