@tamagui/web 3.0.0-beta.765.1 → 3.0.0-beta.806.1

package/src/createComponent.tsx

@@ -21,8 +21,7 @@ import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
 import { getDefaultProps } from './helpers/getDefaultProps'
 import { componentDisplayName } from './helpers/componentDisplayName'
-import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
-import { getSplitStyles, useSplitStyles } from './helpers/getSplitStyles'
+import { getSplitStyles, prepareStyleStaticConfig } from './helpers/getSplitStyles'
 import {
   getNativeStyleEngine,
   queueNativeViewState,
@@ -33,20 +32,24 @@ import { log } from './helpers/log'
 import { type GenericProps, mergeComponentProps } from './helpers/mergeProps'
 import { mergeRenderElementProps } from './helpers/mergeRenderElementProps'
 import { getMedia } from './helpers/mediaState'
-import { objectIdentityKey } from './helpers/objectIdentityKey'
 import { usePointerEvents } from './helpers/pointerEvents'
 import { extractPseudoState } from './helpers/extractPseudoState'
 import { subscribeToSafeArea } from './helpers/resolveSafeAreaVariable'
 import { setElementProps } from './helpers/setElementProps'
-import { subscribeToContextGroup } from './helpers/subscribeToContextGroup'
+import {
+  subscribeToContextGroup,
+  useGroupSetRevision,
+} from './helpers/subscribeToContextGroup'
 import { getStyleTags } from './helpers/wrapStyleTags'
 import { useComponentState } from './hooks/useComponentState'
+import { useSplitStyles } from './hooks/useSplitStyles'
 import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
 import { hooks } from './setupHooks'
 import type {
   AllGroupContexts,
+  AnimationDriverLike,
   ComponentGroupEmitter,
   DebugProp,
   GroupStateListener,
@@ -100,25 +103,6 @@ const groupPseudoKeys = [
   'focusWithin',
 ] as const satisfies readonly (keyof PseudoGroupState)[]
 
-function getStyledContextKeys(
-  staticConfig: StaticConfig,
-  styledContextValue: GenericProps | undefined
-) {
-  const propKeys = staticConfig.contextProps || staticConfig.context?.propKeys
-  if (!propKeys) {
-    return styledContextValue
-  }
-
-  const out: GenericProps = {}
-  for (const key of propKeys) {
-    out[key] = true
-  }
-  if (styledContextValue) {
-    Object.assign(out, styledContextValue)
-  }
-  return out
-}
-
 if (process.env.TAMAGUI_TARGET !== 'native' && typeof window !== 'undefined') {
   const cancelPresses = () => {
     // clear all press downs
@@ -283,9 +267,16 @@ export function createComponent<
     )
   }
 
+  prepareStyleStaticConfig(staticConfig)
+
   let config: TamaguiInternalConfig | null = null
   let resolvedDefaultProps: Record<string, any> | undefined
   let didResolveDefaultProps = false
+  const styledContextPropKeys =
+    staticConfig.contextProps || staticConfig.context?.propKeys
+  const styledContextKeys = styledContextPropKeys
+    ? new Set(styledContextPropKeys)
+    : undefined
 
   const { Component, isText, isHOC } = staticConfig
 
@@ -350,7 +341,7 @@ export function createComponent<
 
     // set variants through context
     // order is after default props but before props
-    const { context, isReactNative } = staticConfig
+    const { context } = staticConfig
     const debugProp = propsIn['debug'] as DebugProp
 
     const styledContextValue: GenericProps | undefined = context
@@ -419,17 +410,6 @@ export function createComponent<
     props = nextProps as ViewProps | TextProps
     overriddenContextProps = overrides
 
-    // frontend single pass (hoisted): the component's descriptor tokenizes className +
-    // flattens props ONCE here, so flat values and transition props are in place before
-    // the state machine / variant / animation driver below read them. preprocessProps
-    // marks its result, so getSplitStyles skips its own preprocess.
-    // components without a descriptor pay one property read.
-    if (staticConfig.styleFrontend) {
-      props = staticConfig.styleFrontend.preprocessProps(props, config) as
-        | ViewProps
-        | TextProps
-    }
-
     if (process.env.NODE_ENV === 'development' && isClient) {
       React.useEffect(() => {
         let node: HTMLElement | undefined
@@ -496,27 +476,24 @@ export function createComponent<
     const groupContextParent = React.useContext(GroupContext)
 
     // Get animation driver - either from animatedBy prop lookup or context/config fallback
-    const animationDriver = (() => {
+    const animationDriver: AnimationDriverLike | null = (() => {
       if (props.animatedBy && config) {
-        let selectedDriver
         // check animationDrivers for multi-driver config
         if (config.animationDrivers) {
-          selectedDriver =
-            (config.animationDrivers as Record<string, any>)[props.animatedBy] ??
-            config.animations
-        } else {
-          // single driver config - only 'default' makes sense
-          selectedDriver = props.animatedBy === 'default' ? config.animations : null
+          return (
+            props.animatedBy in config.animationDrivers
+              ? config.animationDrivers[props.animatedBy]
+              : config.animations
+          ) as AnimationDriverLike | null
         }
-        return resolveAnimationDriver(selectedDriver)
+        // single driver config - only 'default' makes sense
+        return props.animatedBy === 'default'
+          ? (config.animations as AnimationDriverLike)
+          : null
       }
-      // fall back to context driver, then config.animations
-      // resolveAnimationDriver validates it's a real driver (not a raw multi-driver object)
-      return (
-        resolveAnimationDriver(componentContext.animationDriver) ??
-        resolveAnimationDriver(config?.animations) ??
-        null
-      )
+      return (componentContext.animationDriver ??
+        config?.animations ??
+        null) as AnimationDriverLike | null
     })()
 
     const useAnimations = animationDriver?.isStub
@@ -532,10 +509,7 @@ export function createComponent<
 
     const {
       disabled,
-      groupName,
       hasAnimationProp,
-      hasEnterStyle,
-      isAnimated,
       isExiting,
       isHydrated,
       presence,
@@ -546,10 +520,15 @@ export function createComponent<
       stateRef,
       inputStyle,
       outputStyle,
+      startedUnhydrated,
+    } = componentState
+    let { groupName } = componentState
+    let {
+      hasEnterStyle,
+      isAnimated,
       willBeAnimated,
       willBeAnimatedClient,
       platformPseudo,
-      startedUnhydrated,
     } = componentState
 
     // adopt the props object useComponentState resolved: on the enter/exit presence
@@ -619,72 +598,6 @@ export function createComponent<
       })
     }, [platformPseudo, props.disabled])
 
-    // a component is a query container when any container prop says so; the
-    // boolean `container` is the unnamed inline-size shorthand (decision 17)
-    const containerName = props.containerName as string | undefined
-    const isContainer = !!(
-      props.container ||
-      containerName ||
-      (props.containerType && props.containerType !== 'normal')
-    )
-
-    // create new context with groups, or else sublings will grab the same one
-    const allGroupContexts = useMemo((): AllGroupContexts | null => {
-      if ((!groupName && !isContainer) || props.passThrough) {
-        return groupContextParent
-      }
-
-      const listeners = new Set<GroupStateListener>()
-      stateRef.current.group?.listeners?.clear()
-      stateRef.current.group = {
-        listeners,
-        emit(state) {
-          listeners.forEach((l) => l(state))
-        },
-        subscribe(cb) {
-          listeners.add(cb)
-          if (listeners.size === 1) {
-            setStateShallow({ hasDynGroupChildren: true })
-          }
-          return () => {
-            listeners.delete(cb)
-            if (listeners.size === 0) {
-              setStateShallow({ hasDynGroupChildren: false })
-            }
-          }
-        },
-      }
-
-      // one entry object serves every key this component provides: the group
-      // name and the container keys share the same state and emitter
-      const entry: SingleGroupContext = {
-        state: {
-          pseudo: defaultComponentStateMounted,
-        },
-        subscribe: (listener) => {
-          const dispose = stateRef.current.group?.subscribe(listener)
-          return () => {
-            dispose?.()
-          }
-        },
-      }
-
-      const next: AllGroupContexts = { ...groupContextParent }
-      if (groupName) {
-        next[groupName] = entry
-      }
-      if (isContainer) {
-        // `@sm:` reads the nearest container of any name, so every container
-        // writes the `@` key; a named one also writes `@name`. group names
-        // cannot contain `@`, so the namespaces never collide
-        next['@'] = entry
-        if (containerName) {
-          next[`@${containerName}`] = entry
-        }
-      }
-      return next
-    }, [stateRef, groupName, containerName, isContainer, groupContextParent])
-
     // if our animation driver supports avoidReRenders, we'll replace this below with
     // a version that essentially uses an internall emitter rather than setting state
     // but still stores the current state and applies if it it needs to during render
@@ -764,7 +677,6 @@ export function createComponent<
         const type =
           (hasEnterStyle ? '(hasEnter)' : ' ') +
           (isAnimated ? '(animated)' : ' ') +
-          (isReactNative ? '(rnw)' : ' ') +
           (noClass ? '(noClass)' : ' ') +
           (state.press || state.pressIn ? '(PRESSED)' : ' ') +
           (state.hover ? '(HOVERED)' : ' ') +
@@ -792,7 +704,7 @@ export function createComponent<
 
             console.groupCollapsed(`${childLog} [inspect props, state, context 👇]`)
             log('props in:', propsIn)
-            log('final props:', props, Object.keys(props))
+            log('final props:', props)
             log({ state, staticConfig, elementType, themeStateProps })
             log({
               context,
@@ -848,8 +760,10 @@ export function createComponent<
       isExiting,
       isAnimated,
       willBeAnimated,
+      canPlatformPseudo: componentState.platformPseudo,
       displayName,
-      styledContext: getStyledContextKeys(staticConfig, styledContextValue),
+      styledContext: styledContextValue,
+      styledContextKeys,
     } as const
 
     const themeName = themeState?.name || ''
@@ -865,13 +779,91 @@ export function createComponent<
       styleProps,
       null,
       componentContext,
-      allGroupContexts,
+      groupContextParent,
       elementType,
       startedUnhydrated,
       debugProp,
       animationDriver
     )
 
+    const finalizedComponentState = componentState.finalizeStyleFlags(
+      !!splitStyles?.hasEnterStyle,
+      !!splitStyles?.platformPseudo
+    )
+    hasEnterStyle = finalizedComponentState.hasEnterStyle
+    isAnimated = finalizedComponentState.isAnimated
+    willBeAnimated = finalizedComponentState.willBeAnimated
+    willBeAnimatedClient = finalizedComponentState.willBeAnimatedClient
+    platformPseudo = finalizedComponentState.platformPseudo
+
+    groupName = (splitStyles?.frontendGroup ?? groupName) as typeof groupName
+    const containerProp = splitStyles?.frontendContainer ?? props.container
+    const containerName =
+      (props.containerName as string | undefined) ||
+      (typeof containerProp === 'string' ? containerProp : undefined)
+    const containerType =
+      (splitStyles?.frontendContainerType as string | undefined) ||
+      (props.containerType as string | undefined) ||
+      (containerProp ? 'inline-size' : undefined)
+    const isContainer = !!containerType && containerType !== 'normal'
+
+    // create new context with groups, or else siblings will grab the same one
+    const allGroupContexts = useMemo((): AllGroupContexts | null => {
+      if ((!groupName && !isContainer) || props.passThrough) {
+        return groupContextParent
+      }
+
+      const listeners = new Set<GroupStateListener>()
+      stateRef.current.group?.listeners?.clear()
+      stateRef.current.group = {
+        listeners,
+        emit(state) {
+          listeners.forEach((l) => l(state))
+        },
+        subscribe(cb) {
+          listeners.add(cb)
+          if (listeners.size === 1) {
+            setStateShallow({ hasDynGroupChildren: true })
+          }
+          return () => {
+            listeners.delete(cb)
+            if (listeners.size === 0) {
+              setStateShallow({ hasDynGroupChildren: false })
+            }
+          }
+        },
+      }
+
+      // one entry object serves every key this component provides: the group
+      // name and the container keys share the same state and emitter
+      const entry: SingleGroupContext = {
+        state: {
+          pseudo: defaultComponentStateMounted,
+        },
+        subscribe: (listener) => {
+          const dispose = stateRef.current.group?.subscribe(listener)
+          return () => {
+            dispose?.()
+          }
+        },
+      }
+
+      const next: AllGroupContexts = { ...groupContextParent }
+      if (groupName) {
+        next[groupName] = entry
+      }
+      if (isContainer) {
+        // `@sm:` reads the nearest container of any name, so every container
+        // writes the `@` key; a named one also writes `@name`. group names
+        // cannot contain `@`, so the namespaces never collide
+        next['@'] = entry
+        if (containerName) {
+          next[`@${containerName}`] = entry
+        }
+      }
+      return next
+    }, [stateRef, groupName, containerName, isContainer, groupContextParent])
+
     const isPassthrough = !splitStyles
 
     // splitStyles === null === passThrough
@@ -1058,7 +1050,7 @@ export function createComponent<
       !isPassthrough &&
       groupContext &&
       // avoids onLayout if we don't need it
-      props.containerType !== 'normal'
+      isContainer
     ) {
       const groupState = groupContext?.state
       if (groupState && groupState.layout === undefined) {
@@ -1209,9 +1201,13 @@ export function createComponent<
         }
 
         // 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)
-        )
+        let canAvoidReRender = true
+        for (const key in next) {
+          if (!avoidReRenderKeys.has(key)) {
+            canAvoidReRender = false
+            break
+          }
+        }
 
         const updatedState = {
           ...prev,
@@ -1296,6 +1292,7 @@ export function createComponent<
       pseudoGroups,
       mediaGroups,
     } = splitStyles || {}
+    const groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups)
 
     const propsWithAnimation = props as UseAnimationProps
 
@@ -1327,8 +1324,7 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn || {}
 
-    // these can ultimately be for DOM, react-native-web views, or animated views
-    // so the type is pretty loose
+    // these can ultimately be for DOM or custom animated views, so the type is loose
     let viewProps = nonTamaguiProps
 
     if (props.forceStyle) {
@@ -1432,9 +1428,9 @@ export function createComponent<
       viewProps.className = `t_exiting ${viewProps.className || ''}`
     }
 
-    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !props.group) {
+    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !isContainer) {
       console.warn(
-        `You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use a group clause.\n\nIf you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`
+        `You set untilMeasured without establishing a container. Set it on the parent with container or container="name", not on the child using a container clause.`
       )
     }
 
@@ -1443,7 +1439,7 @@ export function createComponent<
     if (
       !isPassthrough &&
       groupContext && // avoids onLayout if we don't need it
-      props.containerType !== 'normal'
+      isContainer
     ) {
       nonTamaguiProps.onLayout = composeEventHandlers(
         nonTamaguiProps.onLayout,
@@ -1503,7 +1499,7 @@ export function createComponent<
     usePointerEvents(props, viewProps)
 
     if (process.env.NODE_ENV === 'development') {
-      if (!isReactNative && !isText && isWeb && !isHOC) {
+      if (!isText && isWeb && !isHOC) {
         React.Children.toArray(props.children).forEach((item) => {
           // allow newlines because why not its annoying with mdx
           if (typeof item === 'string' && item !== '\n') {
@@ -1606,7 +1602,9 @@ export function createComponent<
         disposeSafeArea = subscribeToSafeArea(updateSafeArea)
         // close the render-to-subscribe race: the provider tracker may have
         // published new insets after this component evaluated its styles.
-        updateSafeArea()
+        if (process.env.TAMAGUI_TARGET === 'native') {
+          updateSafeArea()
+        }
       }
 
       if (disabled) return disposeSafeArea
@@ -1624,13 +1622,7 @@ export function createComponent<
         disposeSafeArea()
         disposeGroup?.()
       }
-    }, [
-      allGroupContexts,
-      disabled,
-      splitStyles?.usesSafeArea,
-      pseudoGroups ? objectIdentityKey(pseudoGroups) : 0,
-      mediaGroups ? objectIdentityKey(mediaGroups) : 0,
-    ])
+    }, [allGroupContexts, disabled, splitStyles?.usesSafeArea, groupSetRevision])
 
     const groupEmitter = stateRef.current.group
     useIsomorphicLayoutEffect(() => {
@@ -1846,7 +1838,7 @@ export function createComponent<
       })
     }
 
-    if (process.env.TAMAGUI_TARGET === 'web' && events && !isReactNative) {
+    if (process.env.TAMAGUI_TARGET === 'web' && events) {
       Object.assign(viewProps, getWebEvents(events))
     }
 
@@ -1856,38 +1848,39 @@ export function createComponent<
       log(`events`, { events, attachHover, attachPress })
     }
 
-    const propsWithHref = props as typeof props & { href?: unknown }
-    const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
-
-    const pressDebugDetail =
-      props.testID ??
-      propsIn.testID ??
-      props.accessibilityLabel ??
-      propsIn.accessibilityLabel ??
-      (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
-      (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
-
-    const pressDebugName =
-      [displayName, pressDebugDetail].filter(Boolean).join(':') || null
-
     // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
     // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
     // hasRealPressEvents distinguishes user-provided handlers from events.onPress
     // synthesized for press clauses alone — only the former should claim the responder.
-    const hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress)
-    const pressGesture =
-      process.env.TAMAGUI_TARGET === 'native'
-        ? useEvents(
-            events,
-            viewProps,
-            stateRef,
-            staticConfig,
-            isHOC,
-            isInsideNativeMenu,
-            pressDebugName,
-            hasRealPressEvents
-          )
-        : null
+    let hasRealPressEvents = false
+    let pressGesture: ReturnType<typeof useEvents> = null
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      const propsWithHref = props as typeof props & { href?: unknown }
+      const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
+      const pressDebugDetail =
+        props.testID ??
+        propsIn.testID ??
+        props.accessibilityLabel ??
+        propsIn.accessibilityLabel ??
+        (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
+        (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
+      const pressDebugName = displayName
+        ? pressDebugDetail
+          ? `${displayName}:${pressDebugDetail}`
+          : displayName
+        : pressDebugDetail || null
+      hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress)
+      pressGesture = useEvents(
+        events,
+        viewProps,
+        stateRef,
+        staticConfig,
+        isHOC,
+        isInsideNativeMenu,
+        pressDebugName,
+        hasRealPressEvents
+      )
+    }
 
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
@@ -2040,12 +2033,10 @@ export function createComponent<
       )
     }
 
-    // containers provide the same context channel groups do: a container-only
-    // parent (`container`, `containerName`, `containerType`) must mount the
-    // provider or its descendants' `@size:` clauses can never subscribe —
-    // the context entry existed but was never provided (found 2026-07-31 by
-    // real parent/descendant integration; injected-context tests masked it)
-    if ('group' in props || isContainer) {
+    // containers provide the same context channel groups do. Mount the
+    // provider whenever the resolved component establishes either capability
+    // so descendant clauses can subscribe.
+    if (groupName || isContainer) {
       content = (
         <GroupContext.Provider value={allGroupContexts}>{content}</GroupContext.Provider>
       )
@@ -2069,19 +2060,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      if (isReactNative && !asChild) {
-        content = (
-          <span
-            className="_dsp_contents"
-            {...(!isPassthrough && isHydrated && events && getWebEvents(events))}
-          >
-            {content}
-          </span>
-        )
-      }
-    }
-
     if (overriddenContextProps && contextForOverride) {
       const Provider = contextForOverride.Provider!
 
@@ -2103,7 +2081,12 @@ export function createComponent<
 
     // SSR style support - for non compiled styles we render them inline until client takes over
     // on client we then switch over to our global sheet insert, because rendering inline is expensive
-    if (process.env.TAMAGUI_TARGET === 'web' && startedUnhydrated && splitStyles) {
+    if (
+      !process.env.TAMAGUI_DID_OUTPUT_CSS &&
+      process.env.TAMAGUI_TARGET === 'web' &&
+      startedUnhydrated &&
+      splitStyles
+    ) {
       content = (
         <>
           {content}

package/src/createTamagui.ts

@@ -20,6 +20,7 @@ import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
 import type {
   CreateTamaguiProps,
+  AnimationDriverLike,
   DedupedTheme,
   DedupedThemes,
   GenericFont,
@@ -249,10 +250,13 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   const resolvedDriver = resolveAnimationDriver(inputAnimations)
   // multi-driver when resolveAnimationDriver extracted .default (returned different ref)
   const isMultiDriver = resolvedDriver !== null && resolvedDriver !== inputAnimations
-  const resolvedAnimations = resolvedDriver ?? inputAnimations
-  const animationDrivers = isMultiDriver
-    ? (inputAnimations as Record<string, any>)
-    : undefined
+  let animationDrivers: Record<string, AnimationDriverLike | null> | undefined
+  if (isMultiDriver) {
+    animationDrivers = {}
+    for (const name in inputAnimations) {
+      animationDrivers[name] = resolveAnimationDriver(inputAnimations[name])
+    }
+  }
 
   const config: TamaguiInternalConfig = {
     fonts: {},
@@ -261,12 +265,9 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     media: {},
     ...configIn,
     // normalized animations (resolved from multi-driver format if needed)
-    animations: resolvedAnimations ?? defaultAnimationDriver,
+    animations: resolvedDriver ?? defaultAnimationDriver,
     animationDrivers,
-    settings: {
-      webContainerType: 'inline-size',
-      ...settingsIn,
-    },
+    settings: settingsIn,
     tokens: tokens as any,
     // vite made this into a function if it wasn't set
     shorthands,

package/src/helpers/defaultAnimationDriver.tsx

@@ -7,7 +7,6 @@ const noAnimationDriver = (method: string): any => {
 }
 
 const createEmptyAnimationDriver = (): AnimationDriver => ({
-  isReactNative: false,
   inputStyle: 'css',
   outputStyle: 'css',
   isStub: true,

package/src/helpers/directStyleCSS.native.ts

@@ -0,0 +1 @@
+export * from './directStyleCSSCompiled'