@tamagui/web 3.0.0-beta.755.1 → 3.0.0-beta.804.1

package/src/hooks/useComponentState.ts

@@ -1,10 +1,4 @@
 import { getPlatformDriver, isServer, isWeb } from '@tamagui/constants'
-import { stylePropsAll } from '@tamagui/helpers'
-import {
-  canonicalClauseModifier,
-  scanFlatValue,
-  type FlatValueHandler,
-} from '@tamagui/style-grammar/runtime'
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@tamagui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
@@ -29,101 +23,6 @@ import type {
 } from '../types'
 import type { ViewProps } from '../views/View'
 
-// canonical spellings only: `canonicalClauseModifier` folds `active` and
-// `pressed` into `press` and `starting` into `enter` before the lookup, so the
-// alias table in @tamagui/style-grammar stays the only place they are listed
-const platformPseudoModifiers = new Set(['hover', 'press', 'focus'])
-const enterModifier = new Set(['enter'])
-
-type LifecycleScanContext = TamaguiComponentStateRef & {
-  // source, wanted modifiers, found, and pending match. created once per
-  // component and reused by both lifecycle questions on every render.
-  flatScan?: [string, ReadonlySet<string>, boolean, boolean]
-}
-
-const lifecycleHandler: FlatValueHandler<LifecycleScanContext> = {
-  segment(ctx, start, end, isBase, valid) {
-    const scan = ctx.flatScan!
-    if (!isBase && valid && start < end && scan[3]) scan[2] = true
-    scan[3] = false
-  },
-  chain(ctx, start, end, valid) {
-    const scan = ctx.flatScan!
-    scan[3] = false
-    if (!valid) return true
-    for (let index = start; index <= end; index++) {
-      if (index !== end && scan[0].charCodeAt(index) !== 58) continue
-      if (scan[1].has(canonicalClauseModifier(scan[0].slice(start, index)))) {
-        scan[3] = true
-      }
-      start = index + 1
-    }
-    return true
-  },
-}
-
-/**
- * Does any flat style value on this component carry one of `modifiers`?
- *
- * It runs the same `scanFlatValue` lexer the style scanner runs, which is the
- * whole reason it exists in this shape: a value the style scanner throws away
- * used to still put the component on the should-enter path here, so it rendered
- * an enter frame for a style that never arrived.
- */
-function hasFlatModifier(
-  props: Record<string, any>,
-  config: TamaguiInternalConfig,
-  modifiers: ReadonlySet<string>,
-  ctx: LifecycleScanContext,
-  variants?: Record<string, any>
-): boolean {
-  const scan = (ctx.flatScan ||= ['', enterModifier, false, false])
-  for (const key in props) {
-    const value = props[key]
-    const isString = typeof value === 'string'
-    if (isString ? value.indexOf(':') === -1 : !value || typeof value !== 'object') {
-      continue
-    }
-    const property = config.shorthands[key] || key
-    if (
-      !(property in stylePropsAll) &&
-      property !== 'transition' &&
-      // conditional variant props resolve style branches too, so their
-      // lifecycle clauses drive the same decision
-      !(variants && key in variants)
-    ) {
-      continue
-    }
-    if (!isString) {
-      // an object-valued transition is the driver's per-lifecycle config
-      // grammar (`{ default, enter, exit }` timings), not a flat conditional
-      // style value — its keys name when to run, not what style arrives
-      if (property === 'transition') continue
-      // flat conditional objects carry the chain as the key; a structured leaf
-      // (shadowOffset) has no modifier-named key so it never matches
-      for (const chain in value) {
-        if (chain === 'default' || value[chain] == null) continue
-        let start = 0
-        for (let index = 0; index <= chain.length; index++) {
-          if (index !== chain.length && chain.charCodeAt(index) !== 58) continue
-          if (modifiers.has(canonicalClauseModifier(chain.slice(start, index)))) {
-            return true
-          }
-          start = index + 1
-        }
-      }
-      continue
-    }
-    scan[0] = value
-    scan[1] = modifiers
-    scan[2] = false
-    scan[3] = false
-    scanFlatValue(value, lifecycleHandler, ctx)
-    if (scan[2]) return true
-  }
-  return false
-}
-
 export const useComponentState = (
   props: ViewProps | TextProps | Record<string, any>,
   animationDriver: ComponentContextI['animationDriver'],
@@ -173,86 +72,70 @@ export const useComponentState = (
   // driver-sourced (hover) or event-sourced (press/focus) but either way applies
   // through the emitter with zero React commits; with no transition declared it
   // resolves instant (see createComponent's effectiveTransition default).
-  const platformPseudo = Boolean(
+  const platformPseudoPossible = Boolean(
     !isHOC &&
     useAnimations &&
     animationDriver?.avoidReRenders &&
-    getPlatformDriver()?.pseudo &&
-    hasFlatModifier(
-      props,
-      config,
-      platformPseudoModifiers,
-      curStateRef as LifecycleScanContext,
-      staticConfig.variants
-    )
+    getPlatformDriver()?.pseudo
   )
 
-  const willBeAnimatedClient = (() => {
-    const next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations)
+  let willBeAnimatedClient = (() => {
+    const next = !!(
+      (hasAnimationProp || platformPseudoPossible) &&
+      !isHOC &&
+      useAnimations
+    )
     return Boolean(next || curStateRef.hasAnimated)
   })()
 
-  const willBeAnimated = !isServer && willBeAnimatedClient
+  let willBeAnimated = !isServer && willBeAnimatedClient
 
   // once animated, always animated to preserve hooks / vdom structure
-  if (willBeAnimated && !curStateRef.hasAnimated) {
+  if (willBeAnimated && hasAnimationProp && !curStateRef.hasAnimated) {
     curStateRef.hasAnimated = true
   }
 
   const { disableClassName } = props
 
   // HOOK
+  // the registration decision must be current BEFORE this render commits: a
+  // presence parent with zero registered consumers completes an exit
+  // instantly, so an animated frame that only registers after a later
+  // finalize pass never animates out. Everything the decision needs for the
+  // transition-prop case is pre-pass knowledge; finalizeStyleFlags can only
+  // widen it (pass-discovered platform pseudo), and a passThrough render
+  // keeps the widened value.
+  if (willBeAnimated && !isHOC && props['animatePresence'] !== false) {
+    curStateRef.shouldRegisterPresence = true
+  } else {
+    curStateRef.shouldRegisterPresence ??= false
+  }
+  const presenceResult = animationDriver?.usePresence?.(curStateRef) || null
+  // the hook call position is fixed, but the OBSERVED presence keeps the old
+  // conditional-call semantics: a frame that opted out (animatePresence false,
+  // HOC, not animated) must not see presence state — downstream that state
+  // wraps children in ResetPresence, which would null the context for the
+  // frame that actually animates the exit
   const presence =
-    (!isHOC &&
-      willBeAnimated &&
-      props['animatePresence'] !== false &&
-      animationDriver?.usePresence?.()) ||
-    null
+    !isHOC && willBeAnimated && props['animatePresence'] !== false ? presenceResult : null
 
   const presenceState = presence?.[2]
   const isExiting = presenceState?.isPresent === false
   const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
 
-  const hasEnterStyle = hasFlatModifier(
-    props,
-    config,
-    enterModifier,
-    curStateRef as LifecycleScanContext,
-    staticConfig.variants
-  )
-
   const hasAnimationThatNeedsHydrate =
-    hasAnimationProp &&
-    !isHydrated &&
-    (animationDriver?.isReactNative || inputStyle !== 'css')
-
-  const canImmediatelyEnter = hasEnterStyle || isEntering
-
-  // this can be conditional because its only ever needed with animations
-  const shouldEnter =
-    !isHOC &&
-    (hasEnterStyle ||
-      isEntering ||
-      hasAnimationThatNeedsHydrate ||
-      // disableClassName doesnt work server side, only client, so needs hydrate
-      // this is just for a better ux, supports css variables for light/dark, media queries, etc
-      disableClassName)
+    hasAnimationProp && !isHydrated && inputStyle !== 'css'
 
   // two stage enter: because we switch from css driver to spring driver
   //   - first render: render to match server with css driver
   //   - second render: state.unmounted = should-enter, still rendering the initial,
   //     non-entered state but now with the spring animation driver
 
-  const initialState = shouldEnter
-    ? // on the very first render we switch all spring animation drivers to css rendering
-      // this is because we need to use css variables, which they don't support to do proper SSR
-      // without flickers of the wrong colors.
-      // but once we do that initial hydration and we are in client side rendering mode,
-      // we can avoid the extra re-render on mount
-      canImmediatelyEnter
-      ? defaultComponentStateShouldEnter
-      : defaultComponentState
-    : defaultComponentStateMounted
+  // the sole style pass decides whether an enter clause exists. A fresh first
+  // frame stays provisionally unmounted until that pass reports its flags —
+  // except an HOC, which never enters (shouldEnter is !isHOC && ...), so its
+  // pass must not resolve enter clauses as active on the first frame
+  const initialState = { ...defaultComponentStateMounted }
 
   // will be nice to deprecate half of these:
   const disabled = isDisabled(props)
@@ -264,8 +147,43 @@ export const useComponentState = (
   // HOOK
   const states = useState<TamaguiComponentState>(initialState)
 
-  const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0]
-  const setState = states[1]
+  // React owns a mounted state from the start. The first style pass gets a
+  // render-local provisional `unmounted` value so it can discover enter
+  // clauses without mutating React state during render. Only a real enter
+  // frame is carried in the ref until the first state update consumes it.
+  const initialStyleFrameUnmounted = curStateRef.initialStyleFrameUnmounted
+  let state =
+    (!curStateRef.didFinalizeInitialStyleFrame && !isHOC) ||
+    initialStyleFrameUnmounted !== undefined
+      ? { ...states[0] }
+      : states[0]
+  if (!curStateRef.didFinalizeInitialStyleFrame && !isHOC) {
+    state.unmounted = true
+  }
+  if (initialStyleFrameUnmounted !== undefined) {
+    state.unmounted = initialStyleFrameUnmounted
+  }
+  if (props.forceStyle) {
+    if (state === states[0]) state = { ...state }
+    state[props.forceStyle] = true
+  }
+  if (!curStateRef.setState) {
+    const reactSetState = states[1]
+    curStateRef.setState = (stateOrGetState) => {
+      const pendingUnmounted = curStateRef.initialStyleFrameUnmounted
+      curStateRef.initialStyleFrameUnmounted = undefined
+      reactSetState((previous) => {
+        const current =
+          pendingUnmounted !== undefined && previous.unmounted !== pendingUnmounted
+            ? { ...previous, unmounted: pendingUnmounted }
+            : previous
+        return typeof stateOrGetState === 'function'
+          ? stateOrGetState(current)
+          : stateOrGetState
+      })
+    }
+  }
+  const setState = curStateRef.setState
 
   // apply states we never updated from avoiding re-renders in animation driver
   // unsafe yea yea
@@ -369,7 +287,9 @@ export const useComponentState = (
     // no matter what if fully unmounted or on the server we use className
     // only once we hydrate do we switch to spring animation drivers or disableClassName etc
     if (isWeb && isHydrated) {
-      const isAnimatedAndHydrated = isAnimated && isHydrated
+      const isAnimatedAndHydrated =
+        !!((hasAnimationProp || curStateRef.hasAnimated) && useAnimations && !isHOC) &&
+        isHydrated
 
       const isClassNameDisabled =
         !staticConfig.acceptsClassName && (getSetting('disableSSR') || !state.unmounted)
@@ -395,14 +315,14 @@ export const useComponentState = (
     }
   }
 
-  return {
+  const result = {
     props: outProps,
     startedUnhydrated: curStateRef.startedUnhydrated,
     curStateRef,
     disabled,
     groupName,
     hasAnimationProp,
-    hasEnterStyle,
+    hasEnterStyle: false,
     isAnimated,
     isExiting,
     isHydrated,
@@ -417,8 +337,48 @@ export const useComponentState = (
     outputStyle,
     willBeAnimated,
     willBeAnimatedClient,
-    platformPseudo,
+    platformPseudo: platformPseudoPossible,
+    finalizeStyleFlags(hasEnterStyle: boolean, hasPlatformPseudo: boolean) {
+      const platformPseudo = platformPseudoPossible && hasPlatformPseudo
+      const nextWillBeAnimatedClient = Boolean(
+        ((hasAnimationProp || platformPseudo) && !isHOC && useAnimations) ||
+        curStateRef.hasAnimated
+      )
+      const nextWillBeAnimated = !isServer && nextWillBeAnimatedClient
+      if (nextWillBeAnimated && !curStateRef.hasAnimated) {
+        curStateRef.hasAnimated = true
+      }
+      if (!curStateRef.didFinalizeInitialStyleFrame) {
+        curStateRef.didFinalizeInitialStyleFrame = true
+        const shouldEnter =
+          !isHOC &&
+          (hasEnterStyle ||
+            isEntering ||
+            hasAnimationThatNeedsHydrate ||
+            disableClassName)
+        const unmounted = shouldEnter
+          ? hasEnterStyle || isEntering
+            ? 'should-enter'
+            : true
+          : false
+        state.unmounted = unmounted
+        curStateRef.initialStyleFrameUnmounted = unmounted || undefined
+      }
+      result.hasEnterStyle = hasEnterStyle
+      result.platformPseudo = platformPseudo
+      result.willBeAnimatedClient = nextWillBeAnimatedClient
+      result.willBeAnimated = nextWillBeAnimated
+      result.isAnimated =
+        isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated
+          ? false
+          : nextWillBeAnimated
+      if (nextWillBeAnimated && !isHOC && props['animatePresence'] !== false) {
+        curStateRef.shouldRegisterPresence = true
+      }
+      return result
+    },
   }
+  return result
 }
 
 function hasAnimatedStyleValue(style: object) {

package/src/hooks/useMedia.tsx

@@ -7,10 +7,12 @@ import { matchMedia } from '../helpers/matchMedia'
 import { mediaObjectToString } from '../helpers/mediaObjectToString'
 import {
   getMedia,
+  mediaKeyMatch,
   mediaKeys,
   mediaQueryConfig,
   setMediaState,
 } from '../helpers/mediaState'
+export { mediaKeyMatch } from '../helpers/mediaState'
 import type {
   ComponentContextI,
   DebugProp,
@@ -526,21 +528,3 @@ export function mediaKeyToQuery(key: string) {
     (cachedMediaKeyToQuery[key] = mediaObjectToString(mediaQueryConfig[key]))
   )
 }
-
-export function mediaKeyMatch(
-  key: string,
-  dimensions: { width: number; height: number }
-) {
-  const mediaQueries = mediaQueryConfig[key]
-  for (const query in mediaQueries) {
-    const expectedVal = +mediaQueries[query]
-    const isMax = query.startsWith('max')
-    const isWidth = query.endsWith('Width')
-    const givenVal = dimensions[isWidth ? 'width' : 'height']
-    // if not max then min
-    if (isMax ? givenVal >= expectedVal : givenVal <= expectedVal) {
-      return false
-    }
-  }
-  return true
-}

package/src/hooks/useProps.tsx

@@ -3,9 +3,12 @@ import React from 'react'
 import { getConfig } from '../config'
 import { ComponentContext } from '../contexts/ComponentContext'
 import { GroupContext } from '../contexts/GroupContext'
-import { useSplitStyles } from '../helpers/getSplitStyles'
+import { useSplitStyles } from './useSplitStyles'
 import { subscribeToSafeArea } from '../helpers/resolveSafeAreaVariable'
-import { subscribeToContextGroup } from '../helpers/subscribeToContextGroup'
+import {
+  subscribeToContextGroup,
+  useGroupSetRevision,
+} from '../helpers/subscribeToContextGroup'
 import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '../types'
 import type { ViewProps, ViewStyle } from '../views/View'
 import { View } from '../views/View'
@@ -90,18 +93,19 @@ export function usePropsAndStyle<A extends PropsLikeObject>(
   // useComponentState injects enter/exit presence variants onto a fresh copy
   // (it no longer mutates our `props` in place), so use the returned object for
   // style resolution below to keep those variants applied
+  const componentState = useComponentState(
+    props,
+    componentContext.animationDriver,
+    staticConfig,
+    getConfig()
+  )
   const {
     props: statefulProps,
     state,
     disabled,
     setState,
     setStateShallow,
-  } = useComponentState(
-    props,
-    componentContext.animationDriver,
-    staticConfig,
-    getConfig()
-  )
+  } = componentState
 
   const mediaStateNow = opts?.noMedia
     ? // not safe to use mediaState but really marginal to hit this
@@ -128,7 +132,13 @@ export function usePropsAndStyle<A extends PropsLikeObject>(
     groupContext
   )
 
+  componentState.finalizeStyleFlags(
+    !!splitStyles?.hasEnterStyle,
+    !!splitStyles?.platformPseudo
+  )
+
   const { mediaGroups, pseudoGroups } = splitStyles || {}
+  const groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups)
 
   useIsomorphicLayoutEffect(() => {
     let disposeSafeArea: (() => void) | undefined
@@ -165,13 +175,7 @@ export function usePropsAndStyle<A extends PropsLikeObject>(
       }
     }
     return disposeSafeArea
-  }, [
-    disabled,
-    groupContext,
-    splitStyles?.usesSafeArea,
-    pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
-    mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
-  ])
+  }, [disabled, groupContext, splitStyles?.usesSafeArea, groupSetRevision])
 
   return [
     splitStyles?.viewProps || {},

package/src/hooks/useSplitStyles.tsx

@@ -0,0 +1,26 @@
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import React from 'react'
+import { getSplitStyles, type StyleSplitter } from '../helpers/getSplitStyles'
+import { insertStyleRules } from '../helpers/insertStyleRule'
+
+// on native no need to insert any css
+const useInsertEffectCompat = isWeb
+  ? React.useInsertionEffect || useIsomorphicLayoutEffect
+  : () => {}
+
+// perf: ...args a bit expensive on native
+export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+  'use no memo'
+
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m)
+
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET !== 'native') {
+    useInsertEffectCompat(() => {
+      if (res) {
+        insertStyleRules(res.rulesToInsert)
+      }
+    }, [res?.rulesToInsert])
+  }
+
+  return res
+}