@tamagui/core 1.112.1 → 1.112.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.112.1",
+  "version": "1.112.3",
   "source": "src/index.tsx",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -35,17 +35,17 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/react-native-use-pressable": "1.112.1",
-    "@tamagui/react-native-use-responder-events": "1.112.1",
-    "@tamagui/use-event": "1.112.1",
-    "@tamagui/web": "1.112.1"
+    "@tamagui/react-native-use-pressable": "1.112.3",
+    "@tamagui/react-native-use-responder-events": "1.112.3",
+    "@tamagui/use-event": "1.112.3",
+    "@tamagui/web": "1.112.3"
   },
   "devDependencies": {
-    "@tamagui/build": "1.112.1",
+    "@tamagui/build": "1.112.3",
     "@testing-library/react": "^16.0.0",
     "csstype": "^3.0.10",
     "typescript": "^5.5.2",
-    "vitest": "0.34.3"
+    "vitest": "2.1.1"
   },
   "exports": {
     "./package.json": "./package.json",

package/src/hooks/useElementLayout.tsx

@@ -1,4 +1,5 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import type { TamaguiComponentStateRef } from '@tamagui/web'
 import type { RefObject } from 'react'
 import { getBoundingClientRect } from '../helpers/getBoundingClientRect'
 
@@ -125,30 +126,35 @@ const getBoundingClientRectAsync = (
 }
 
 export function useElementLayout(
-  ref: RefObject<Element>,
+  ref: RefObject<TamaguiComponentStateRef>,
   onLayout?: ((e: LayoutEvent) => void) | null
 ) {
-  // two effects because expensive to re-run on every change of onLayout
-  useIsomorphicLayoutEffect(() => {
-    if (!onLayout) return
-    const node = ref.current
-    if (!node) return
+  const node = ref.current?.host as Element
+
+  // ensure always up to date so we can avoid re-running effect
+  if (node && onLayout) {
     LayoutHandlers.set(node, onLayout)
-  }, [ref, onLayout])
+  }
 
   useIsomorphicLayoutEffect(() => {
-    if (!resizeObserver) return
-    const node = ref.current
+    if (!resizeObserver || !onLayout) return
+    const node = ref.current?.host as Element
     if (!node) return
-    if (!LayoutHandlers.has(node)) return
+
+    // setup once
+    LayoutHandlers.set(node, onLayout)
+
     const onResize = () => {
       measureElement(node as HTMLElement).then(onLayout)
     }
+
     resizeListeners.add(onResize)
     resizeObserver.observe(node)
+
     return () => {
+      LayoutHandlers.delete(node)
       resizeListeners.delete(onResize)
       resizeObserver?.unobserve(node)
     }
-  }, [ref])
+  }, [ref, !!onLayout])
 }

package/src/index.tsx

@@ -1,15 +1,14 @@
-import React from 'react'
 import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
 import type {
   StackNonStyleProps,
   StackStyleBase,
+  TamaDefer,
   TamaguiComponent,
   TamaguiElement,
   TamaguiTextElement,
   TextNonStyleProps,
   TextProps,
   TextStylePropsBase,
-  TamaDefer,
 } from '@tamagui/web'
 import {
   Stack as WebStack,
@@ -18,11 +17,12 @@ import {
   composeEventHandlers,
   setupHooks,
 } from '@tamagui/web'
+import React from 'react'
 
 import { createOptimizedView } from './createOptimizedView'
 import { getBaseViews } from './getBaseViews'
-import { useElementLayout } from './hooks/useElementLayout'
-import { usePlatformMethods } from './hooks/usePlatformMethods'
+import { getRect } from './helpers/getRect'
+import { measureLayout, useElementLayout } from './hooks/useElementLayout'
 import type { RNTextProps, RNViewProps } from './reactNativeTypes'
 import { usePressability } from './vendor/Pressability'
 
@@ -67,6 +67,24 @@ const baseViews = getBaseViews()
 setupHooks({
   getBaseViews,
 
+  setElementProps: (node) => {
+    // web only
+    if (node && !node['measure']) {
+      // @ts-ignore
+      node.measure ||= (callback) => measureLayout(node, null, callback)
+      // @ts-ignore
+      node.measureLayout ||= (relativeToNode, success) =>
+        measureLayout(node as HTMLElement, relativeToNode, success)
+      // @ts-ignore
+      node.measureInWindow ||= (callback) => {
+        setTimeout(() => {
+          const { height, left, top, width } = getRect(node as HTMLElement)!
+          callback(left, top, width, height)
+        }, 0)
+      }
+    }
+  },
+
   usePropsTransform(elementType, propsIn, stateRef, willHydrate) {
     if (process.env.TAMAGUI_TARGET === 'web') {
       const isDOM = typeof elementType === 'string'
@@ -106,19 +124,9 @@ setupHooks({
       } = propsIn
 
       if (willHydrate || isDOM) {
-        // only necessary for DOM elements, but we need the hooks to stay around
-        const hostRef = React.useMemo(
-          () => ({
-            get current() {
-              return stateRef.current.host as Element
-            },
-          }),
-          [stateRef]
-        )
-        usePlatformMethods(hostRef)
-        useElementLayout(hostRef, !isDOM ? undefined : (onLayout as any))
+        useElementLayout(stateRef, !isDOM ? undefined : (onLayout as any))
         useResponderEvents(
-          hostRef,
+          stateRef,
           !isDOM
             ? undefined
             : ({

package/types/hooks/useElementLayout.d.ts

@@ -1,3 +1,4 @@
+import type { TamaguiComponentStateRef } from '@tamagui/web';
 import type { RefObject } from 'react';
 export type LayoutValue = {
     x: number;
@@ -16,5 +17,5 @@ export type LayoutEvent = {
 };
 export declare const measureElement: (target: HTMLElement) => Promise<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<Element>, onLayout?: ((e: LayoutEvent) => void) | null): 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,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,WAAkB,WAAW,KAAG,OAAO,CAAC,WAAW,CAY7E,CAAA;AAID,eAAO,MAAM,aAAa,SAClB,WAAW,cACL,WAAW,GAAG,IAAI,YACpB,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,OAAO,CAAC,EACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC,GAAG,IAAI,QAyB7C"}
+{"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,WAAkB,WAAW,KAAG,OAAO,CAAC,WAAW,CAY7E,CAAA;AAID,eAAO,MAAM,aAAa,SAClB,WAAW,cACL,WAAW,GAAG,IAAI,YACpB,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"}

package/types/hooks/usePlatformMethods.d.ts

@@ -1,3 +1,4 @@
 import type { RefObject } from 'react';
-export declare function usePlatformMethods(hostRef: RefObject<Element>): void;
+import type { TamaguiComponentStateRef } from '@tamagui/web';
+export declare function usePlatformMethods(stateRef: RefObject<TamaguiComponentStateRef>, props?: Object): void;
 //# sourceMappingURL=usePlatformMethods.d.ts.map

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { StackNonStyleProps, StackStyleBase, TamaguiComponent, TamaguiElement, TamaguiTextElement, TextNonStyleProps, TextProps, TextStylePropsBase, TamaDefer } from '@tamagui/web';
+import type { StackNonStyleProps, StackStyleBase, TamaDefer, TamaguiComponent, TamaguiElement, TamaguiTextElement, TextNonStyleProps, TextProps, TextStylePropsBase } from '@tamagui/web';
 import type { RNTextProps, RNViewProps } from './reactNativeTypes';
 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,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,SAAS,EACV,MAAM,cAAc,CAAA;AAarB,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAKlE,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;AAiMlC,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":"AACA,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,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAKlE,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;AAyMlC,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA;AACnD,eAAO,MAAM,KAAK,EAAsB,aAAa,CAAA;AACrD,eAAO,MAAM,IAAI,EAAqB,aAAa,CAAA"}

package/src/hooks/usePlatformMethods.ts

@@ -1,27 +0,0 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import type { RefObject } from 'react'
-
-import { getRect } from '../helpers/getRect'
-import { measureLayout } from './useElementLayout'
-
-// react native compat (web only)
-export function usePlatformMethods(hostRef: RefObject<Element>) {
-  useIsomorphicLayoutEffect(() => {
-    const node = hostRef.current
-    if (node) {
-      // @ts-ignore
-      node.measure ||= (callback) => measureLayout(node, null, callback)
-      // @ts-ignore
-      node.measureLayout ||= (relativeToNode, success) =>
-        measureLayout(node as HTMLElement, relativeToNode, success)
-      // @ts-ignore
-      node.measureInWindow ||= (callback) => {
-        if (!node) return
-        setTimeout(() => {
-          const { height, left, top, width } = getRect(node as HTMLElement)!
-          callback(left, top, width, height)
-        }, 0)
-      }
-    }
-  }, [hostRef])
-}