@tamagui/web 1.129.18 → 1.130.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.129.18",
+  "version": "1.130.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,16 +27,16 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.129.18",
-    "@tamagui/constants": "1.129.18",
-    "@tamagui/helpers": "1.129.18",
-    "@tamagui/is-equal-shallow": "1.129.18",
-    "@tamagui/normalize-css-color": "1.129.18",
-    "@tamagui/timer": "1.129.18",
-    "@tamagui/types": "1.129.18",
-    "@tamagui/use-did-finish-ssr": "1.129.18",
-    "@tamagui/use-event": "1.129.18",
-    "@tamagui/use-force-update": "1.129.18"
+    "@tamagui/compose-refs": "1.130.0",
+    "@tamagui/constants": "1.130.0",
+    "@tamagui/helpers": "1.130.0",
+    "@tamagui/is-equal-shallow": "1.130.0",
+    "@tamagui/normalize-css-color": "1.130.0",
+    "@tamagui/timer": "1.130.0",
+    "@tamagui/types": "1.130.0",
+    "@tamagui/use-did-finish-ssr": "1.130.0",
+    "@tamagui/use-event": "1.130.0",
+    "@tamagui/use-force-update": "1.130.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -44,7 +44,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.129.18",
+    "@tamagui/build": "1.130.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",

package/src/createComponent.tsx

@@ -9,7 +9,7 @@ import {
 } from '@tamagui/constants'
 import { composeEventHandlers, validStyles } from '@tamagui/helpers'
 import { isEqualShallow } from '@tamagui/is-equal-shallow'
-import React, { type RefObject, useEffect, useId, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { devConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
 import { isDevTools } from './constants/isDevTools'
@@ -33,13 +33,13 @@ import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
 import type { WebOnlyPressEvents } from './interfaces/WebOnlyPressEvents'
 import { hooks } from './setupHooks'
 import type {
+  AllGroupContexts,
   ComponentGroupEmitter,
-  ComponentGroupState,
   DebugProp,
-  AllGroupContexts,
   GroupStateListener,
   LayoutEvent,
   PseudoGroupState,
+  SingleGroupContext,
   SizeTokens,
   SpaceDirection,
   SpacerProps,
@@ -50,7 +50,6 @@ import type {
   StaticConfig,
   StyleableOptions,
   TamaguiComponent,
-  TamaguiComponentStateRef,
   TamaguiElement,
   TamaguiInternalConfig,
   TextProps,
@@ -58,7 +57,6 @@ import type {
   UseAnimationProps,
   UseStyleEmitter,
   UseThemeWithStateProps,
-  SingleGroupContext,
 } from './types'
 import { Slot } from './views/Slot'
 import { getThemedChildren } from './views/Theme'
@@ -317,20 +315,34 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && isClient) {
       React.useEffect(() => {
+        let node: HTMLElement | undefined
         let overlay: HTMLSpanElement | null = null
 
+        const remove = () => {
+          if (overlay) {
+            try {
+              overlay.parentNode?.removeChild(overlay)
+              overlay = null
+            } catch {
+              // may have unmounted
+            }
+          }
+        }
+
         const debugVisualizerHandler = (show = false) => {
-          const node = stateRef.current.host as HTMLElement
+          node = stateRef.current.host as HTMLElement | undefined
           if (!node) return
 
           if (show) {
-            overlay = document.createElement('span')
-            overlay.style.inset = '0px'
-            overlay.style.zIndex = '1000000'
-            overlay.style.position = 'absolute'
-            overlay.style.borderColor = 'red'
-            overlay.style.borderWidth = '1px'
-            overlay.style.borderStyle = 'dotted'
+            if (!overlay) {
+              overlay = document.createElement('span')
+              overlay.style.inset = '0px'
+              overlay.style.zIndex = '1000000'
+              overlay.style.position = 'absolute'
+              overlay.style.borderColor = 'red'
+              overlay.style.borderWidth = '1px'
+              overlay.style.borderStyle = 'dotted'
+            }
 
             const dataAt = node.getAttribute('data-at') || ''
             const dataIn = node.getAttribute('data-in') || ''
@@ -345,20 +357,18 @@ export function createComponent<
             tooltip.style.fontSize = '12px'
             tooltip.style.lineHeight = '12px'
             tooltip.style.fontFamily = 'monospace'
-            tooltip.style['webkitFontSmoothing'] = 'none'
             tooltip.innerText = `${componentName || ''} ${dataAt} ${dataIn}`.trim()
 
             overlay.appendChild(tooltip)
             node.appendChild(overlay)
           } else {
-            if (overlay) {
-              node.removeChild(overlay)
-            }
+            remove()
           }
         }
         debugKeyListeners ||= new Set()
         debugKeyListeners.add(debugVisualizerHandler)
         return () => {
+          remove()
           debugKeyListeners?.delete(debugVisualizerHandler)
         }
       }, [componentName])
@@ -408,7 +418,7 @@ export function createComponent<
 
     // create new context with groups, or else sublings will grab the same one
     const allGroupContexts = useMemo((): AllGroupContexts | null => {
-      if (!groupName) {
+      if (!groupName || props.passThrough) {
         return groupContextParent
       }
 
@@ -622,11 +632,13 @@ export function createComponent<
       debugProp
     )
 
+    // splitStyles === null === passThrough
+
     const groupContext = groupName ? allGroupContexts?.[groupName] || null : null
 
     // one tiny mutation 🙏 get width/height optimistically from raw values if possible
     // if set hardcoded it avoids extra renders
-    if (groupContext) {
+    if (splitStyles && groupContext) {
       const groupState = groupContext?.state
       if (groupState && groupState.layout === undefined) {
         if (splitStyles.style?.width || splitStyles.style?.height) {
@@ -640,116 +652,124 @@ export function createComponent<
 
     // avoids re-rendering if animation driver supports it
     // TODO believe we need to set some sort of "pendingState" in case it re-renders
-    if ((hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
-      const styleListener = stateRef.current.useStyleListener
-      const ogSetStateShallow = setStateShallow
+    if (splitStyles) {
+      if ((!hasAnimationProp || groupName) && animationDriver?.avoidReRenders) {
+        const useStyleListener = stateRef.current.useStyleListener
+        const ogSetStateShallow = setStateShallow
 
-      stateRef.current.setStateShallow = (nextOrGetNext) => {
-        const prev = NextState.get(stateRef) || state
-        const next =
-          typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
+        stateRef.current.setStateShallow = (nextOrGetNext) => {
+          const prev = NextState.get(stateRef) || state
+          const next =
+            typeof nextOrGetNext === 'function' ? nextOrGetNext(prev) : nextOrGetNext
 
-        if (next === prev || isEqualShallow(prev, next)) {
-          return
-        }
+          if (next === prev || isEqualShallow(prev, next)) {
+            return
+          }
 
-        // one thing we have to handle here and where it gets a bit more complex is group styles
-        const canAvoidReRender = Object.keys(next).every((key) =>
-          avoidReRenderKeys.has(key)
-        )
+          // one thing we have to handle here and where it gets a bit more complex is group styles
+          const canAvoidReRender = Object.keys(next).every((key) =>
+            avoidReRenderKeys.has(key)
+          )
 
-        if (canAvoidReRender) {
-          const updatedState = {
-            ...prev,
-            ...next,
-          }
-          NextState.set(stateRef, updatedState)
-
-          if (
-            process.env.NODE_ENV === 'development' &&
-            debugProp &&
-            debugProp !== 'profile'
-          ) {
-            console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
-            console.info(stateRef.current.host)
-            console.groupEnd()
-          }
+          if (canAvoidReRender) {
+            const updatedState = {
+              ...prev,
+              ...next,
+            }
+            NextState.set(stateRef, updatedState)
+
+            if (
+              process.env.NODE_ENV === 'development' &&
+              debugProp &&
+              debugProp !== 'profile'
+            ) {
+              console.groupCollapsed(`[⚡️] avoid setState`, next, { updatedState, props })
+              console.info(stateRef.current.host)
+              console.groupEnd()
+            }
 
-          const {
-            group,
-            hasDynGroupChildren,
-            unmounted,
-            animation,
-            ...childrenGroupState
-          } = updatedState
-
-          // update before getting styles
-          if (groupContext) {
-            notifyGroupSubscribers(
-              groupContext,
-              stateRef.current.group || null,
-              childrenGroupState
-            )
-          }
+            const {
+              group,
+              hasDynGroupChildren,
+              unmounted,
+              animation,
+              ...childrenGroupState
+            } = updatedState
+
+            // update before getting styles
+            if (groupContext) {
+              notifyGroupSubscribers(
+                groupContext,
+                stateRef.current.group || null,
+                childrenGroupState
+              )
+            }
 
-          // we just emit and return for group without animation ^
-          if (!hasAnimationProp || !styleListener) {
-            return
-          }
+            // we just emit and return for group without animation ^
+            if (!hasAnimationProp || !useStyleListener) {
+              return
+            }
 
-          const nextStyles = getSplitStyles(
-            props,
-            staticConfig,
-            theme,
-            themeName,
-            updatedState,
-            styleProps,
-            null,
-            componentContext,
-            allGroupContexts,
-            elementType,
-            startedUnhydrated,
-            debugProp
-          )
+            const nextStyles = getSplitStyles(
+              props,
+              staticConfig,
+              theme,
+              themeName,
+              updatedState,
+              styleProps,
+              null,
+              componentContext,
+              allGroupContexts,
+              elementType,
+              startedUnhydrated,
+              debugProp
+            )
 
-          styleListener(nextStyles.style as any)
-        } else {
-          if (
-            process.env.NODE_ENV === 'development' &&
-            debugProp &&
-            debugProp !== 'profile'
-          ) {
-            console.info(`[🐌] re-render`, { canAvoidReRender, next })
+            useStyleListener((nextStyles?.style || {}) as any)
+          } else {
+            if (
+              process.env.NODE_ENV === 'development' &&
+              debugProp &&
+              debugProp !== 'profile'
+            ) {
+              console.info(`[🐌] re-render`, { canAvoidReRender, next })
+            }
+            ogSetStateShallow(next)
           }
-          ogSetStateShallow(next)
         }
-      }
 
-      // needs to capture latest props (it's called from memoized `events`)
-      setStateShallow = (state) => {
-        stateRef.current.setStateShallow?.(state)
+        // needs to capture latest props (it's called from memoized `events`)
+        setStateShallow = (state) => {
+          stateRef.current.setStateShallow?.(state)
+        }
       }
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`split-styles`
 
     // hide strategy will set this opacity = 0 until measured
-    if (props.group && props.untilMeasured === 'hide' && !stateRef.current.hasMeasured) {
-      splitStyles.style ||= {}
-      splitStyles.style.opacity = 0
-    }
+    if (splitStyles) {
+      if (
+        props.group &&
+        props.untilMeasured === 'hide' &&
+        !stateRef.current.hasMeasured
+      ) {
+        splitStyles.style ||= {}
+        splitStyles.style.opacity = 0
+      }
 
-    if (splitStyles.dynamicThemeAccess != null) {
-      stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
+      if (splitStyles.dynamicThemeAccess != null) {
+        stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
+      }
     }
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
     // array = space media breakpoints
-    const hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== true
+    const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true
     const shouldListenForMedia =
       didGetVariableValue() ||
       hasRuntimeMediaKeys ||
-      (noClass && splitStyles.hasMedia === true)
+      (noClass && splitStyles?.hasMedia === true)
 
     const mediaListeningKeys = hasRuntimeMediaKeys
       ? (splitStyles.hasMedia as Set<string>)
@@ -766,7 +786,9 @@ export function createComponent<
       style: splitStylesStyle,
       classNames,
       space,
-    } = splitStyles
+      pseudoGroups,
+      mediaGroups,
+    } = splitStyles || {}
 
     const propsWithAnimation = props as UseAnimationProps
 
@@ -794,7 +816,7 @@ export function createComponent<
       onClick,
       theme: _themeProp,
       ...nonTamaguiProps
-    } = viewPropsIn
+    } = viewPropsIn || {}
 
     // these can ultimately be for DOM, react-native-web views, or animated views
     // so the type is pretty loose
@@ -844,17 +866,19 @@ export function createComponent<
         stateRef,
       })
 
-      if (isHydrated && animations) {
-        animationStyles = animations.style
-        viewProps.style = animationStyles
-        if (animations.className) {
-          viewProps.className = `${state.unmounted === 'should-enter' ? 't_unmounted ' : ''}${viewProps.className || ''} ${animations.className}`
-        }
-        // @ts-ignore
+      if (animations) {
         if (animations.ref) {
           // @ts-ignore
           animatedRef = animations.ref
         }
+
+        if (isHydrated && animations) {
+          animationStyles = animations.style
+          viewProps.style = animationStyles
+          if (animations.className) {
+            viewProps.className = `${state.unmounted === 'should-enter' ? 't_unmounted ' : ''}${viewProps.className || ''} ${animations.className}`
+          }
+        }
       }
 
       if (process.env.NODE_ENV === 'development' && time) time`animations`
@@ -868,7 +892,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
-    if (groupContext) {
+    if (splitStyles && groupContext) {
       nonTamaguiProps.onLayout = composeEventHandlers(
         nonTamaguiProps.onLayout,
         (e: LayoutEvent) => {
@@ -923,12 +947,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`events-hooks`
 
-    // combined multiple effects into one for performance so be careful with logic
-    // should not be a layout effect because otherwise it wont render the initial state
-    // for example css driver needs to render once with the first styles, then again with the next
-    // if its a layout effect it will just skip that first <render >output
-    const { pseudoGroups, mediaGroups } = splitStyles
-
     const unPress = () => {
       setStateShallow({ press: false, pressIn: false })
     }
@@ -944,9 +962,11 @@ export function createComponent<
             }
             return styleObject
           }
-          const computed = cssStyleDeclarationToObject(
-            getComputedStyle(stateRef.current.host! as Element)
-          )
+          const computed = stateRef.current.host
+            ? cssStyleDeclarationToObject(
+                getComputedStyle(stateRef.current.host as Element)
+              )
+            : {}
           console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`)
           console.warn(stateRef.current.host)
           console.warn(computed)
@@ -1214,7 +1234,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
     let content =
-      !children || asChild
+      !children || asChild || !splitStyles
         ? children
         : spacedChildren({
             separator,
@@ -1258,6 +1278,17 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`use-children`
 
+    // passthrough mode - only pass style display contents, nothing else
+    if (!splitStyles) {
+      elementType = 'span'
+      content = propsIn.children
+      viewProps = {
+        style: {
+          display: 'contents',
+        },
+      }
+    }
+
     if (useChildrenResult) {
       content = useChildrenResult
     } else {
@@ -1266,14 +1297,25 @@ export function createComponent<
 
     // needs to reset the presence state for nested children
     const ResetPresence = config?.animations?.ResetPresence
-    if (
-      ResetPresence &&
-      willBeAnimated &&
-      (hasEnterStyle || presenceState) &&
-      content &&
-      typeof content !== 'string'
-    ) {
-      content = <ResetPresence>{content}</ResetPresence>
+    const needsReset = Boolean(
+      // not when passing down to child
+      !asChild &&
+        // not when passThrough
+        splitStyles &&
+        // not when HOC
+        !isHOC &&
+        ResetPresence &&
+        willBeAnimated &&
+        (hasEnterStyle || presenceState)
+    )
+    // avoid re-parenting
+    const hasEverReset = stateRef.current.hasEverResetPresence
+    if (needsReset && !hasEverReset) {
+      stateRef.current.hasEverResetPresence = true
+    }
+    const renderReset = needsReset || hasEverReset
+    if (renderReset && ResetPresence) {
+      content = <ResetPresence disabled={!needsReset}>{content}</ResetPresence>
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
@@ -1297,9 +1339,10 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`group-context`
 
-    content = disableTheme
-      ? content
-      : getThemedChildren(themeState, content, themeStateProps, false, stateRef)
+    content =
+      disableTheme || !splitStyles
+        ? content
+        : getThemedChildren(themeState, content, themeStateProps, false, stateRef)
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
@@ -1308,7 +1351,7 @@ export function createComponent<
         content = (
           <span
             className="_dsp_contents"
-            {...(isHydrated && events && getWebEvents(events))}
+            {...(splitStyles && isHydrated && events && getWebEvents(events))}
           >
             {content}
           </span>
@@ -1342,6 +1385,7 @@ export function createComponent<
     if (process.env.TAMAGUI_TARGET === 'web' && startedUnhydrated) {
       // breaking rules of hooks but startedUnhydrated NEVER changes
       const styleTags = useMemo(() => {
+        if (!splitStyles) return
         return getStyleTags(Object.values(splitStyles.rulesToInsert))
       }, [])
       // this is only to appease react hydration really
@@ -1494,7 +1538,7 @@ export function createComponent<
 
     out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
 
-    if (process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
+    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
       out = React.memo(out)
     }
 

package/src/helpers/getSplitStyles.tsx

@@ -97,7 +97,7 @@ type StyleSplitter = (
   elementType?: string,
   startedUnhydrated?: boolean,
   debug?: DebugProp
-) => GetStyleResult
+) => null | GetStyleResult
 
 export const PROP_SPLIT = '-'
 
@@ -147,6 +147,10 @@ export const getSplitStyles: StyleSplitter = (
   conf = conf || getConfig()
   const animationDriver = componentContext?.animationDriver || conf.animations
 
+  if (props.passThrough) {
+    return null
+  }
+
   // a bit icky, we need no normalize but not fully
   if (
     isWeb &&
@@ -579,6 +583,10 @@ export const getSplitStyles: StyleSplitter = (
 
       passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo)
 
+      if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+        console.groupEnd()
+      }
+
       // if it's a variant here, we have a two layer variant...
       // aka styled(Input, { unstyled: true, variants: { unstyled: {} } })
       // which now has it's own unstyled + the child unstyled...
@@ -591,6 +599,9 @@ export const getSplitStyles: StyleSplitter = (
     // after shouldPassThrough
     if (!noSkip) {
       if (keyInit in skipProps) {
+        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+          console.groupEnd()
+        }
         continue
       }
     }
@@ -1517,8 +1528,10 @@ export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {
-      insertStyleRules(res.rulesToInsert)
-    }, [res.rulesToInsert])
+      if (res) {
+        insertStyleRules(res.rulesToInsert)
+      }
+    }, [res?.rulesToInsert])
   }
 
   return res