@tamagui/core 1.126.13-1747671613486 → 1.126.13-1747874018127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.126.13-1747671613486",
+  "version": "1.126.13-1747874018127",
   "source": "src/index.tsx",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -35,14 +35,14 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/react-native-media-driver": "1.126.13-1747671613486",
-    "@tamagui/react-native-use-pressable": "1.126.13-1747671613486",
-    "@tamagui/react-native-use-responder-events": "1.126.13-1747671613486",
-    "@tamagui/use-event": "1.126.13-1747671613486",
-    "@tamagui/web": "1.126.13-1747671613486"
+    "@tamagui/react-native-media-driver": "1.126.13-1747874018127",
+    "@tamagui/react-native-use-pressable": "1.126.13-1747874018127",
+    "@tamagui/react-native-use-responder-events": "1.126.13-1747874018127",
+    "@tamagui/use-event": "1.126.13-1747874018127",
+    "@tamagui/web": "1.126.13-1747874018127"
   },
   "devDependencies": {
-    "@tamagui/build": "1.126.13-1747671613486",
+    "@tamagui/build": "1.126.13-1747874018127",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "typescript": "^5.8.2",

package/src/hooks/useElementLayout.tsx

@@ -1,10 +1,13 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import type { TamaguiComponentStateRef } from '@tamagui/web'
+import { isClient, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import {
+  isEqualShallow,
+  type TamaguiComponentStateRef,
+  ___onDidFinishClientRender,
+} from '@tamagui/web'
 import type { RefObject } from 'react'
-import { getBoundingClientRect } from '../helpers/getBoundingClientRect'
 
-const LayoutHandlers = new WeakMap<Element, Function>()
-const resizeListeners = new Set<Function>()
+const LayoutHandlers = new WeakMap<HTMLElement, Function>()
+const Nodes = new Set<HTMLElement>()
 
 export type LayoutValue = {
   x: number
@@ -23,48 +26,78 @@ export type LayoutEvent = {
   timeStamp: number
 }
 
-let resizeObserver: ResizeObserver | null = null
+const NodeRectCache = new WeakMap<HTMLElement, DOMRect>()
+const ParentRectCache = new WeakMap<HTMLElement, DOMRect>()
 
-if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
-  // node resize/move
-  resizeObserver = new ResizeObserver((entries) => {
-    for (const { target } of entries) {
-      const onLayout = LayoutHandlers.get(target)
-      if (typeof onLayout !== 'function') return
-      measureElement(target as HTMLElement).then((event) => {
-        onLayout(event)
-      })
+if (isClient && typeof requestAnimationFrame === 'function') {
+  // prevent thrashing during first hydration (somewhat, streaming gets trickier)
+  let avoidUpdates = true
+  const queuedUpdates = new Map<HTMLElement, Function>()
+
+  ___onDidFinishClientRender(() => {
+    avoidUpdates = false
+    if (queuedUpdates) {
+      queuedUpdates.forEach((cb) => cb())
+      queuedUpdates.clear()
     }
   })
 
-  // window resize
-  if (typeof window.addEventListener === 'function') {
-    let tm
-    window.addEventListener('resize', () => {
-      clearTimeout(tm)
-      tm = setTimeout(() => {
-        resizeListeners.forEach((cb) => cb())
-      }, 4)
-    })
+  function updateLayoutIfChanged(node: HTMLElement) {
+    const nodeRect = node.getBoundingClientRect()
+    const parentNode = node.parentElement
+    const parentRect = parentNode?.getBoundingClientRect()
+
+    const onLayout = LayoutHandlers.get(node)
+    if (typeof onLayout !== 'function') return
+
+    const cachedRect = NodeRectCache.get(node)
+    const cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null
+
+    if (
+      !cachedRect ||
+      // has changed one rect
+      (!isEqualShallow(cachedRect, nodeRect) &&
+        (!cachedParentRect || !isEqualShallow(cachedParentRect, parentRect)))
+    ) {
+      NodeRectCache.set(node, nodeRect)
+      if (parentRect && parentNode) {
+        ParentRectCache.set(parentNode, parentRect)
+      }
+      const event = getElementLayoutEvent(node)
+      if (avoidUpdates) {
+        queuedUpdates.set(node, () => onLayout(event))
+      } else {
+        onLayout(event)
+      }
+    }
+  }
+
+  // note that getBoundingClientRect() does not thrash layout if its after an animation frame
+  requestAnimationFrame(layoutOnAnimationFrame)
+  function layoutOnAnimationFrame() {
+    Nodes.forEach(updateLayoutIfChanged)
+    requestAnimationFrame(layoutOnAnimationFrame)
   }
 }
 
-export const measureElement = async (target: HTMLElement): Promise<LayoutEvent> => {
-  return new Promise((res) => {
-    measureLayout(target, null, (x, y, width, height, left, top) => {
-      res({
-        nativeEvent: {
-          layout: { x, y, width, height, left, top },
-          target,
-        },
-        timeStamp: Date.now(),
-      })
-    })
+export const getElementLayoutEvent = (target: HTMLElement): LayoutEvent => {
+  let res: LayoutEvent | null = null
+  measureLayout(target, null, (x, y, width, height, left, top) => {
+    res = {
+      nativeEvent: {
+        layout: { x, y, width, height, left, top },
+        target,
+      },
+      timeStamp: Date.now(),
+    }
   })
+  if (!res) {
+    throw new Error(`‼️`) // impossible
+  }
+  return res
 }
 
-const cache = new WeakMap()
-
+// matching old RN callback API (can we remove?)
 export const measureLayout = (
   node: HTMLElement,
   relativeTo: HTMLElement | null,
@@ -77,22 +110,17 @@ export const measureLayout = (
     top: number
   ) => void
 ) => {
-  const relativeNode = relativeTo || node?.parentNode
+  const relativeNode = relativeTo || node?.parentElement
   if (relativeNode instanceof HTMLElement) {
-    const now = Date.now()
-    cache.set(node, now)
-    Promise.all([
-      getBoundingClientRectAsync(node),
-      getBoundingClientRectAsync(relativeNode),
-    ]).then(([nodeDim, relativeNodeDim]) => {
-      if (relativeNodeDim && nodeDim && cache.get(node) === now) {
-        const { x, y, width, height, left, top } = getRelativeDimensions(
-          nodeDim,
-          relativeNodeDim
-        )
-        callback(x, y, width, height, left, top)
-      }
-    })
+    const nodeDim = node.getBoundingClientRect()
+    const relativeNodeDim = relativeNode.getBoundingClientRect()
+    if (relativeNodeDim && nodeDim) {
+      const { x, y, width, height, left, top } = getRelativeDimensions(
+        nodeDim,
+        relativeNodeDim
+      )
+      callback(x, y, width, height, left, top)
+    }
   }
 }
 
@@ -103,58 +131,29 @@ const getRelativeDimensions = (a: DOMRectReadOnly, b: DOMRectReadOnly) => {
   return { x, y, width, height, left, top }
 }
 
-const getBoundingClientRectAsync = (
-  element: HTMLElement
-): Promise<DOMRectReadOnly | undefined> => {
-  return new Promise((resolve) => {
-    function fallbackToSync() {
-      resolve(getBoundingClientRect(element))
-    }
-    const tm = setTimeout(fallbackToSync, 10)
-    const observer = new IntersectionObserver(
-      (entries, ob) => {
-        clearTimeout(tm)
-        ob.disconnect()
-        resolve(entries[0]?.boundingClientRect)
-      },
-      {
-        threshold: 0.0001,
-      }
-    )
-    observer.observe(element)
-  })
-}
-
 export function useElementLayout(
   ref: RefObject<TamaguiComponentStateRef>,
   onLayout?: ((e: LayoutEvent) => void) | null
 ) {
-  const node = ref.current?.host as Element
-
   // ensure always up to date so we can avoid re-running effect
+  const node = ref.current?.host as HTMLElement
   if (node && onLayout) {
     LayoutHandlers.set(node, onLayout)
   }
 
   useIsomorphicLayoutEffect(() => {
-    if (!resizeObserver || !onLayout) return
-    const node = ref.current?.host as Element
+    if (!onLayout) return
+    const node = ref.current?.host as HTMLElement
     if (!node) return
 
-    // setup once
     LayoutHandlers.set(node, onLayout)
-
-    const onResize = () => {
-      measureElement(node as HTMLElement).then(onLayout)
-    }
-
-    resizeListeners.add(onResize)
-    resizeObserver.observe(node)
+    Nodes.add(node)
+    onLayout(getElementLayoutEvent(node))
 
     return () => {
+      Nodes.delete(node)
       LayoutHandlers.delete(node)
-      resizeListeners.delete(onResize)
-      resizeObserver?.unobserve(node)
+      NodeRectCache.delete(node)
     }
   }, [ref, !!onLayout])
 }

package/src/index.tsx

@@ -29,6 +29,12 @@ import type { RNTextProps, RNViewProps } from './reactNativeTypes'
 import { usePressability } from './vendor/Pressability'
 import { addNativeValidStyles } from './addNativeValidStyles'
 
+// helpful for usage outside of tamagui
+export {
+  getElementLayoutEvent,
+  type LayoutEvent,
+} from './hooks/useElementLayout'
+
 // add newer style props based on react native version
 addNativeValidStyles()
 

package/types/hooks/useElementLayout.d.ts

@@ -1,4 +1,4 @@
-import type { TamaguiComponentStateRef } from '@tamagui/web';
+import { type TamaguiComponentStateRef } from '@tamagui/web';
 import type { RefObject } from 'react';
 export type LayoutValue = {
     x: number;
@@ -15,7 +15,7 @@ export type LayoutEvent = {
     };
     timeStamp: number;
 };
-export declare const measureElement: (target: HTMLElement) => Promise<LayoutEvent>;
+export declare const getElementLayoutEvent: (target: HTMLElement) => LayoutEvent;
 export declare const measureLayout: (node: HTMLElement, relativeTo: HTMLElement | null, callback: (x: number, y: number, width: number, height: number, left: number, top: number) => void) => void;
 export declare function useElementLayout(ref: RefObject<TamaguiComponentStateRef>, onLayout?: ((e: LayoutEvent) => void) | null): void;
 //# sourceMappingURL=useElementLayout.d.ts.map

package/types/hooks/useElementLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useElementLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,EAAE,GAAG,CAAA;KACZ,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AA4BD,eAAO,MAAM,cAAc,GAAU,QAAQ,WAAW,KAAG,OAAO,CAAC,WAAW,CAY7E,CAAA;AAID,eAAO,MAAM,aAAa,GACxB,MAAM,WAAW,EACjB,YAAY,WAAW,GAAG,IAAI,EAC9B,UAAU,CACR,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,KACR,IAAI,SAmBV,CAAA;AA+BD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QA8B7C"}
+{"version":3,"file":"useElementLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementLayout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE;QACX,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,EAAE,GAAG,CAAA;KACZ,CAAA;IACD,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAwDD,eAAO,MAAM,qBAAqB,GAAI,QAAQ,WAAW,KAAG,WAe3D,CAAA;AAGD,eAAO,MAAM,aAAa,GACxB,MAAM,WAAW,EACjB,YAAY,WAAW,GAAG,IAAI,EAC9B,UAAU,CACR,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,KACR,IAAI,SAcV,CAAA;AASD,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,SAAS,CAAC,wBAAwB,CAAC,EACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QAuB7C"}

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import type { StackNonStyleProps, StackStyleBase, TamaDefer, TamaguiComponent, TamaguiElement, TamaguiTextElement, TextNonStyleProps, TextProps, TextStylePropsBase } from '@tamagui/web';
 import { createTamagui as createTamaguiWeb } from '@tamagui/web';
 import type { RNTextProps, RNViewProps } from './reactNativeTypes';
+export { getElementLayoutEvent, type LayoutEvent, } from './hooks/useElementLayout';
 type RNExclusiveViewProps = Omit<RNViewProps, keyof StackNonStyleProps>;
 export interface RNTamaguiViewNonStyleProps extends StackNonStyleProps, RNExclusiveViewProps {
 }

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EACnB,MAAM,cAAc,CAAA;AACrB,OAAO,EAKL,aAAa,IAAI,gBAAgB,EAElC,MAAM,cAAc,CAAA;AAOrB,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AASlE,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,kBAAkB,CAAC,CAAA;AACvE,MAAM,WAAW,0BACf,SAAQ,kBAAkB,EACxB,oBAAoB;CAAG;AAE3B,KAAK,aAAa,GAAG,gBAAgB,CACnC,SAAS,EACT,cAAc,EACd,0BAA0B,EAC1B,cAAc,EACd,EAAE,CACH,CAAA;AAED,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,SAAS,CAAC,CAAA;AAC9D,MAAM,WAAW,0BACf,SAAQ,iBAAiB,EACvB,oBAAoB;CAAG;AAE3B,KAAK,aAAa,GAAG,gBAAgB,CACnC,SAAS,EACT,kBAAkB,EAClB,0BAA0B,EAC1B,kBAAkB,EAClB,EAAE,CACH,CAAA;AAGD,cAAc,cAAc,CAAA;AAG5B,cAAc,oBAAoB,CAAA;AAGlC,eAAO,MAAM,aAAa,EAAE,OAAO,gBAOlC,CAAA;AAmLD,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA;AACnD,eAAO,MAAM,KAAK,EAAsB,aAAa,CAAA;AACrD,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EACnB,MAAM,cAAc,CAAA;AACrB,OAAO,EAKL,aAAa,IAAI,gBAAgB,EAElC,MAAM,cAAc,CAAA;AAOrB,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAKlE,OAAO,EACL,qBAAqB,EACrB,KAAK,WAAW,GACjB,MAAM,0BAA0B,CAAA;AAOjC,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,kBAAkB,CAAC,CAAA;AACvE,MAAM,WAAW,0BACf,SAAQ,kBAAkB,EACxB,oBAAoB;CAAG;AAE3B,KAAK,aAAa,GAAG,gBAAgB,CACnC,SAAS,EACT,cAAc,EACd,0BAA0B,EAC1B,cAAc,EACd,EAAE,CACH,CAAA;AAED,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,SAAS,CAAC,CAAA;AAC9D,MAAM,WAAW,0BACf,SAAQ,iBAAiB,EACvB,oBAAoB;CAAG;AAE3B,KAAK,aAAa,GAAG,gBAAgB,CACnC,SAAS,EACT,kBAAkB,EAClB,0BAA0B,EAC1B,kBAAkB,EAClB,EAAE,CACH,CAAA;AAGD,cAAc,cAAc,CAAA;AAG5B,cAAc,oBAAoB,CAAA;AAGlC,eAAO,MAAM,aAAa,EAAE,OAAO,gBAOlC,CAAA;AAmLD,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA;AACnD,eAAO,MAAM,KAAK,EAAsB,aAAa,CAAA;AACrD,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA"}