@tamagui/use-element-layout 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/dist/cjs/index.cjs

@@ -32,7 +32,6 @@ __export(index_exports, {
 	measureLayout: () => measureLayout,
 	measureNode: () => measureNode,
 	registerLayoutNode: () => registerLayoutNode,
-	setOnLayoutStrategy: () => setOnLayoutStrategy,
 	useElementLayout: () => useElementLayout
 });
 module.exports = __toCommonJS(index_exports);
@@ -42,12 +41,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 const LayoutHandlers = /* @__PURE__ */ new WeakMap();
 const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
 const Nodes = /* @__PURE__ */ new Set();
+const NodeRectCache = /* @__PURE__ */ new WeakMap();
+const PrevHostNode = /* @__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 isDebugLayout = () => typeof window !== "undefined" && window.location?.search?.includes("__tamaDebugLayout");
 const DisableLayoutContextValues = {};
 const DisableLayoutContextKey = (0, import_react.createContext)("");
 const ENABLE = typeof IntersectionObserver !== "undefined";
@@ -66,11 +63,6 @@ const LayoutMeasurementController = ({ disable, children }) => {
 let strategy = "async";
 let resumeLayoutLoop;
 let measureOnNextFrame;
-function setOnLayoutStrategy(state) {
-	strategy = state;
-	resumeLayoutLoop?.();
-}
-const NodeRectCache = /* @__PURE__ */ new WeakMap();
 let avoidUpdates = true;
 const queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
@@ -98,17 +90,7 @@ if (ENABLE) {
 			}
 		}, { threshold: 0 });
 		return rectFetchObserver;
-	}, scheduleLayoutFrame = function() {
-		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
-		frameScheduled = true;
-		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-	};
-	const BoundingRects = /* @__PURE__ */ new WeakMap();
-	let rectFetchObserver = null;
-	let rectFetchResolve = null;
-	let rectFetchStartTime = 0;
-	let lastCallbackDelay = 0;
-	async function updateLayoutIfChanged(node) {
+	}, updateLayoutIfChanged = function(node) {
 		if (typeof LayoutHandlers.get(node) !== "function") return;
 		const parentNode = node.parentElement;
 		if (!parentNode) return;
@@ -123,7 +105,16 @@ if (ENABLE) {
 			parentRect = parentNode.getBoundingClientRect();
 		}
 		emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
-	}
+	}, scheduleLayoutFrame = function() {
+		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
+		frameScheduled = true;
+		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+	};
+	const BoundingRects = /* @__PURE__ */ new WeakMap();
+	let rectFetchObserver = null;
+	let rectFetchResolve = null;
+	let rectFetchStartTime = 0;
+	let lastCallbackDelay = 0;
 	const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
 	const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
 	const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
@@ -178,32 +169,27 @@ if (ENABLE) {
 	document.addEventListener("visibilitychange", scheduleLayoutFrame);
 	scheduleLayoutFrame();
 }
-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
-	};
-};
+const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
+	nativeEvent: {
+		layout: getRelativeDimensions(nodeRect, parentRect, node),
+		target: nodeRect
+	},
+	timeStamp: Date.now()
+});
+const getPreTransformDimensions = (node) => ({
+	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 left = a.left - b.left;
+	const top = a.top - b.top;
 	const { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
 		width: a.width,
 		height: a.height
 	};
 	return {
-		x,
-		y,
+		x: left,
+		y: top,
 		width,
 		height,
 		pageX: a.left,
@@ -221,13 +207,6 @@ function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
 	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);
 }
@@ -248,7 +227,6 @@ function cleanupNode(node) {
 	LayoutDisableKey.delete(node);
 	NodeRectCache.delete(node);
 }
-const PrevHostNode = /* @__PURE__ */ new WeakMap();
 function emitLayoutSync(node) {
 	const onLayout = LayoutHandlers.get(node);
 	if (typeof onLayout !== "function") return;
@@ -271,48 +249,36 @@ function useElementLayout(ref, onLayout) {
 		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);
-	});
-	(0, import_constants.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
-		});
+		if (nextNode !== prevNode) {
+			if (prevNode) cleanupNode(prevNode);
+			PrevHostNode.set(ref, nextNode);
+			if (nextNode) {
+				LayoutHandlers.set(nextNode, onLayout);
+				observeLayoutNode(nextNode, disableKey);
+				emitLayoutSync(nextNode);
+			}
+		}
 		return () => {
-			cleanupNode(node2);
-			const swappedNode = PrevHostNode.get(ref);
-			if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
+			const activeNode = ensureWebElement(ref.current?.host);
+			if (activeNode) cleanupNode(activeNode);
+			const swapped = PrevHostNode.get(ref);
+			if (swapped && swapped !== activeNode) cleanupNode(swapped);
 			PrevHostNode.delete(ref);
 		};
 	}, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-	if (typeof HTMLElement === "undefined") return;
+	if (typeof HTMLElement === "undefined") return void 0;
 	return x instanceof HTMLElement ? x : void 0;
 }
-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);
+const getBoundingClientRectAsync = (node) => new Promise((res) => {
+	if (!node || node.nodeType !== 1) return res(false);
+	const io = new IntersectionObserver((entries) => {
+		io.disconnect();
+		res(entries[0].boundingClientRect);
 	});
-};
+	io.observe(node);
+});
 const measureNode = async (node, relativeTo) => {
 	const relativeNode = relativeTo || node?.parentElement;
 	if (relativeNode instanceof HTMLElement) {
@@ -322,26 +288,20 @@ const measureNode = async (node, relativeTo) => {
 	return null;
 };
 const measure = async (node, callback) => {
-	const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
+	const out = await measureNode(node, node.parentElement);
 	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 createMeasure = (node) => (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;
 };
-const createMeasureInWindow = (node) => {
-	return (callback) => measureInWindow(node, callback);
-};
+const createMeasureInWindow = (node) => (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);
-}
+const createMeasureLayout = (node) => (relativeTo, callback) => measureLayout(node, relativeTo, callback);

package/dist/cjs/index.native.cjs

@@ -34,7 +34,6 @@ __export(index_exports, {
 	measureLayout: () => measureLayout,
 	measureNode: () => measureNode,
 	registerLayoutNode: () => registerLayoutNode,
-	setOnLayoutStrategy: () => setOnLayoutStrategy,
 	useElementLayout: () => useElementLayout
 });
 module.exports = __toCommonJS(index_exports);
@@ -48,14 +47,15 @@ function _instanceof(left, right) {
 var LayoutHandlers = /* @__PURE__ */ new WeakMap();
 var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
 var Nodes = /* @__PURE__ */ new Set();
+var NodeRectCache = /* @__PURE__ */ new WeakMap();
+var PrevHostNode = /* @__PURE__ */ new WeakMap();
 var usePretransformDimensions = function() {
 	return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
 };
-var _debugLayout;
-function isDebugLayout() {
-	if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
-	return _debugLayout;
-}
+var isDebugLayout = function() {
+	var _window_location_search, _window_location;
+	return typeof window !== "undefined" && ((_window_location = window.location) === null || _window_location === void 0 ? void 0 : (_window_location_search = _window_location.search) === null || _window_location_search === void 0 ? void 0 : _window_location_search.includes("__tamaDebugLayout"));
+};
 var DisableLayoutContextValues = {};
 var DisableLayoutContextKey = /* @__PURE__ */ (0, import_react.createContext)("");
 var ENABLE = false;
@@ -75,11 +75,6 @@ var LayoutMeasurementController = function(param) {
 var strategy = "async";
 var resumeLayoutLoop;
 var measureOnNextFrame;
-function setOnLayoutStrategy(state) {
-	strategy = state;
-	resumeLayoutLoop === null || resumeLayoutLoop === void 0 || resumeLayoutLoop();
-}
-var NodeRectCache = /* @__PURE__ */ new WeakMap();
 var avoidUpdates = true;
 var queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
@@ -109,17 +104,7 @@ if (ENABLE) {
 			}
 		}, { threshold: 0 });
 		return rectFetchObserver;
-	}, scheduleLayoutFrame2 = function() {
-		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
-		frameScheduled = true;
-		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
-	};
-	var BoundingRects = /* @__PURE__ */ new WeakMap();
-	var rectFetchObserver = null;
-	var rectFetchResolve = null;
-	var rectFetchStartTime = 0;
-	var lastCallbackDelay = 0;
-	async function updateLayoutIfChanged(node) {
+	}, updateLayoutIfChanged2 = function(node) {
 		if (typeof LayoutHandlers.get(node) !== "function") return;
 		var parentNode = node.parentElement;
 		if (!parentNode) return;
@@ -134,7 +119,16 @@ if (ENABLE) {
 			parentRect = parentNode.getBoundingClientRect();
 		}
 		emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
-	}
+	}, scheduleLayoutFrame2 = function() {
+		if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
+		frameScheduled = true;
+		rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
+	};
+	var BoundingRects = /* @__PURE__ */ new WeakMap();
+	var rectFetchObserver = null;
+	var rectFetchResolve = null;
+	var rectFetchStartTime = 0;
+	var lastCallbackDelay = 0;
 	var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
 	var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
 	var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
@@ -218,7 +212,7 @@ if (ENABLE) {
 				}
 				if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
 				else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
-				for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged(activeNodes[i2]);
+				for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged2(activeNodes[i2]);
 			}
 		}
 		frameScheduled = false;
@@ -248,16 +242,15 @@ var getPreTransformDimensions = function(node) {
 	};
 };
 var getRelativeDimensions = function(a, b, aNode) {
-	var { left, top } = a;
-	var x = left - b.left;
-	var y = top - b.top;
+	var left = a.left - b.left;
+	var top = a.top - b.top;
 	var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
 		width: a.width,
 		height: a.height
 	};
 	return {
-		x,
-		y,
+		x: left,
+		y: top,
 		width,
 		height,
 		pageX: a.left,
@@ -275,13 +268,6 @@ function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
 	NodeRectCache.set(node, nodeRect);
 	NodeRectCache.set(parentNode, parentRect);
 	var 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, function() {
 		return onLayout(event);
 	});
@@ -306,7 +292,6 @@ function cleanupNode(node) {
 	LayoutDisableKey.delete(node);
 	NodeRectCache.delete(node);
 }
-var PrevHostNode = /* @__PURE__ */ new WeakMap();
 function emitLayoutSync(node) {
 	var onLayout = LayoutHandlers.get(node);
 	if (typeof onLayout !== "function") return;
@@ -331,37 +316,27 @@ function useElementLayout(ref, onLayout) {
 		if (!onLayout) return;
 		var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
 		var 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);
-	});
-	(0, import_constants.useIsomorphicLayoutEffect)(function() {
-		var _ref_current2;
-		if (!onLayout) return;
-		var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.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
-		});
+		if (nextNode !== prevNode) {
+			if (prevNode) cleanupNode(prevNode);
+			PrevHostNode.set(ref, nextNode);
+			if (nextNode) {
+				LayoutHandlers.set(nextNode, onLayout);
+				observeLayoutNode(nextNode, disableKey);
+				emitLayoutSync(nextNode);
+			}
+		}
 		return function() {
-			cleanupNode(node2);
-			var swappedNode = PrevHostNode.get(ref);
-			if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
+			var _ref_current3;
+			var activeNode = ensureWebElement((_ref_current3 = ref.current) === null || _ref_current3 === void 0 ? void 0 : _ref_current3.host);
+			if (activeNode) cleanupNode(activeNode);
+			var swapped = PrevHostNode.get(ref);
+			if (swapped && swapped !== activeNode) cleanupNode(swapped);
 			PrevHostNode.delete(ref);
 		};
 	}, [ref, !!onLayout]);
 }
 function ensureWebElement(x) {
-	if (typeof HTMLElement === "undefined") return;
+	if (typeof HTMLElement === "undefined") return void 0;
 	return _instanceof(x, HTMLElement) ? x : void 0;
 }
 var getBoundingClientRectAsync = function(node) {
@@ -369,8 +344,8 @@ var getBoundingClientRectAsync = function(node) {
 		if (!node || node.nodeType !== 1) return res(false);
 		var io = new IntersectionObserver(function(entries) {
 			io.disconnect();
-			return res(entries[0].boundingClientRect);
-		}, { threshold: 0 });
+			res(entries[0].boundingClientRect);
+		});
 		io.observe(node);
 	});
 };
@@ -383,15 +358,15 @@ var measureNode = async function(node, relativeTo) {
 	return null;
 };
 var measure = async function(node, callback) {
-	var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
+	var out = await measureNode(node, node.parentElement);
 	if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
 	return out;
 };
-function createMeasure(node) {
+var createMeasure = function(node) {
 	return function(callback) {
 		return measure(node, callback);
 	};
-}
+};
 var measureInWindow = async function(node, callback) {
 	var out = await measureNode(node, null);
 	if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
@@ -407,8 +382,8 @@ var measureLayout = async function(node, relativeNode, callback) {
 	if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
 	return out;
 };
-function createMeasureLayout(node) {
+var createMeasureLayout = function(node) {
 	return function(relativeTo, callback) {
 		return measureLayout(node, relativeTo, callback);
 	};
-}
+};