@tamagui/web 1.112.1 → 1.112.2

package/src/createComponent.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { composeRefs } from '@tamagui/compose-refs'
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
@@ -7,29 +6,21 @@ import {
   composeEventHandlers,
   validStyles,
 } from '@tamagui/helpers'
-
+import React from 'react'
 import { devConfig, getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
 import { isDevTools } from './constants/isDevTools'
 import { ComponentContext } from './contexts/ComponentContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
-import {
-  defaultComponentState,
-  defaultComponentStateMounted,
-  defaultComponentStateShouldEnter,
-} from './defaultComponentState'
-import {
-  createShallowSetState,
-  mergeIfNotShallowEqual,
-} from './helpers/createShallowSetState'
+import { defaultComponentStateMounted } from './defaultComponentState'
 import { useSplitStyles } from './helpers/getSplitStyles'
-import { isObj } from './helpers/isObj'
 import { log } from './helpers/log'
 import { mergeProps } from './helpers/mergeProps'
 import { setElementProps } from './helpers/setElementProps'
+import { subscribeToContextGroup } from './helpers/subscribeToContextGroup'
 import { themeable } from './helpers/themeable'
-import { useDidHydrateOnce } from './hooks/useDidHydrateOnce'
-import { getMediaState, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
+import { useComponentState } from './hooks/useComponentState'
+import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
 import type { TamaguiComponentState } from './interfaces/TamaguiComponentState'
@@ -38,8 +29,6 @@ import { hooks } from './setupHooks'
 import type {
   ComponentContextI,
   DebugProp,
-  GroupState,
-  GroupStateListener,
   LayoutEvent,
   SizeTokens,
   SpaceDirection,
@@ -51,7 +40,6 @@ import type {
   StaticConfig,
   StyleableOptions,
   TamaguiComponent,
-  TamaguiComponentStateRef,
   TamaguiElement,
   TamaguiInternalConfig,
   TextProps,
@@ -140,227 +128,6 @@ if (typeof document !== 'undefined') {
   }
 }
 
-export const useComponentState = (
-  props: StackProps | TextProps | Record<string, any>,
-  { animationDriver, groups }: ComponentContextI,
-  staticConfig: StaticConfig,
-  config: TamaguiInternalConfig
-) => {
-  const useAnimations = animationDriver?.useAnimations as UseAnimationHook | undefined
-
-  const stateRef = React.useRef<TamaguiComponentStateRef>(
-    undefined as any as TamaguiComponentStateRef
-  )
-  if (!stateRef.current) {
-    stateRef.current = {}
-  }
-
-  // after we get states mount we need to turn off isAnimated for server side
-  const hasAnimationProp = Boolean(
-    'animation' in props || (props.style && hasAnimatedStyleValue(props.style))
-  )
-
-  // disable for now still ssr issues
-  const supportsCSSVars = animationDriver?.supportsCSSVars
-  const curStateRef = stateRef.current
-
-  const willBeAnimatedClient = (() => {
-    const next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations)
-    return Boolean(next || curStateRef.hasAnimated)
-  })()
-
-  const willBeAnimated = !isServer && willBeAnimatedClient
-
-  // once animated, always animated to preserve hooks / vdom structure
-  if (willBeAnimated && !curStateRef.hasAnimated) {
-    curStateRef.hasAnimated = true
-  }
-
-  // HOOK
-  const presence =
-    (willBeAnimated &&
-      props['animatePresence'] !== false &&
-      animationDriver?.usePresence?.()) ||
-    null
-  const presenceState = presence?.[2]
-  const isExiting = presenceState?.isPresent === false
-  const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
-
-  const hasEnterStyle = !!props.enterStyle
-  // finish animated logic, avoid isAnimated when unmounted
-  const hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative
-
-  if (process.env.NODE_ENV === 'development' && time) time`pre-use-state`
-
-  const hasEnterState = hasEnterStyle || isEntering
-
-  // this can be conditional because its only ever needed with animations
-  const didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : true
-  const shouldEnter = hasEnterState || (!didHydrateOnce && hasRNAnimation)
-  const shouldEnterFromUnhydrated = isWeb && !didHydrateOnce
-
-  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
-      shouldEnterFromUnhydrated
-      ? defaultComponentState
-      : defaultComponentStateShouldEnter
-    : defaultComponentStateMounted
-
-  // will be nice to deprecate half of these:
-  const disabled = isDisabled(props)
-
-  if (disabled != null) {
-    initialState.disabled = disabled
-  }
-
-  // HOOK
-  const states = React.useState<TamaguiComponentState>(initialState)
-
-  const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0]
-  const setState = states[1]
-
-  const isHydrated = state.unmounted === false || state.unmounted === 'should-enter'
-
-  // only web server + initial client render run this when not hydrated:
-  let isAnimated = willBeAnimated
-  if (isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === true) {
-    isAnimated = false
-    curStateRef.willHydrate = true
-  }
-
-  // immediately update disabled state and reset component state
-  if (disabled !== state.disabled) {
-    state.disabled = disabled
-    // if disabled remove all press/focus/hover states
-    if (disabled) {
-      Object.assign(state, defaultComponentStateMounted)
-    }
-    setState({ ...state })
-  }
-
-  let setStateShallow = createShallowSetState(setState, disabled, false, props.debug)
-
-  // if (isHydrated && state.unmounted === 'should-enter') {
-  //   state.unmounted = true
-  // }
-
-  // set enter/exit variants onto our new props object
-  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-      console.warn(`has presenceState ${JSON.stringify(presenceState)}`)
-    }
-    const { enterVariant, exitVariant, enterExitVariant, custom } = presenceState
-    if (isObj(custom)) {
-      Object.assign(props, custom)
-    }
-    const exv = exitVariant ?? enterExitVariant
-    const env = enterVariant ?? enterExitVariant
-    if (state.unmounted && env && staticConfig.variants[env]) {
-      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-        console.warn(`Animating presence ENTER "${env}"`)
-      }
-      props[env] = true
-    } else if (isExiting && exv) {
-      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
-        console.warn(`Animating presence EXIT "${exv}"`)
-      }
-      props[exv] = exitVariant !== enterExitVariant
-    }
-  }
-
-  let shouldAvoidClasses = !isWeb
-
-  // on server for SSR and animation compat added the && isHydrated but perhaps we want
-  // disableClassName="until-hydrated" to be more straightforward
-  // see issue if not, Button sets disableClassName to true <Button animation="" /> with
-  // the react-native driver errors because it tries to animate var(--color) to rbga(..)
-  if (isWeb) {
-    const { disableClassName } = props
-
-    const isAnimatedAndHydrated =
-      isAnimated && !supportsCSSVars && didHydrateOnce && !isServer
-
-    const isClassNameDisabled =
-      !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce)
-
-    const isDisabledManually =
-      disableClassName && !isServer && didHydrateOnce && state.unmounted === true
-
-    if (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) {
-      shouldAvoidClasses = true
-
-      if (process.env.NODE_ENV === 'development' && props.debug) {
-        log(`avoiding className`, {
-          isAnimatedAndHydrated,
-          isDisabledManually,
-          isClassNameDisabled,
-        })
-      }
-    }
-  }
-
-  const groupName = props.group as any as string
-
-  if (groupName && !curStateRef.group) {
-    const listeners = new Set<GroupStateListener>()
-    curStateRef.group = {
-      listeners,
-      emit(name, state) {
-        listeners.forEach((l) => l(name, state))
-      },
-      subscribe(cb) {
-        listeners.add(cb)
-        return () => {
-          listeners.delete(cb)
-        }
-      },
-    }
-  }
-
-  if (groupName) {
-    // when we set state we also set our group state and emit an event for children listening:
-    const groupContextState = groups.state
-    const og = setStateShallow
-    setStateShallow = (state) => {
-      og(state)
-      curStateRef.group!.emit(groupName, {
-        pseudo: state,
-      })
-      // and mutate the current since its concurrent safe (children throw it in useState on mount)
-      const next = {
-        ...groupContextState[groupName],
-        ...state,
-      }
-      groupContextState[groupName] = next
-    }
-  }
-
-  return {
-    curStateRef,
-    disabled,
-    groupName,
-    hasAnimationProp,
-    hasEnterStyle,
-    isAnimated,
-    isExiting,
-    isHydrated,
-    presence,
-    presenceState,
-    setState,
-    setStateShallow,
-    shouldAvoidClasses,
-    state,
-    stateRef,
-    supportsCSSVars,
-    willBeAnimated,
-    willBeAnimatedClient,
-  }
-}
-
 /**
  * Only on native do we need the actual underlying View/Text
  * On the web we avoid react-native dep altogether.
@@ -406,14 +173,7 @@ export function createComponent<
     }
   })
 
-  const {
-    Component,
-    isText,
-    isZStack,
-    isHOC,
-    validStyles = {},
-    variants = {},
-  } = staticConfig
+  const { Component, isText, isZStack, isHOC } = staticConfig
 
   if (process.env.NODE_ENV === 'development' && staticConfig.defaultProps?.['debug']) {
     if (process.env.IS_STATIC !== 'is_static') {
@@ -1757,75 +1517,5 @@ const AbsoluteFill: any = createComponent({
   },
 })
 
-function hasAnimatedStyleValue(style: Object) {
-  return Object.keys(style).some((k) => {
-    const val = style[k]
-    return val && typeof val === 'object' && '_animation' in val
-  })
-}
-
 const fromPx = (val?: number | string) =>
   typeof val !== 'string' ? val : +val.replace('px', '')
-
-export const isDisabled = (props: any) => {
-  return (
-    props.disabled ||
-    props.accessibilityState?.disabled ||
-    props['aria-disabled'] ||
-    props.accessibilityDisabled ||
-    false
-  )
-}
-
-export const subscribeToContextGroup = ({
-  disabled = false,
-  setStateShallow,
-  pseudoGroups,
-  mediaGroups,
-  componentContext,
-  state,
-}: {
-  disabled?: boolean
-  setStateShallow: (next?: Partial<TamaguiComponentState> | undefined) => void
-  pseudoGroups?: Set<string>
-  mediaGroups?: Set<string>
-  componentContext: ComponentContextI
-  state: TamaguiComponentState
-}) => {
-  // parent group pseudo listening
-  if (pseudoGroups || mediaGroups) {
-    const current = {
-      pseudo: {},
-      media: {},
-    } satisfies GroupState
-
-    if (process.env.NODE_ENV === 'development' && !componentContext.groups) {
-      console.debug(`No context group found`)
-    }
-
-    return componentContext.groups?.subscribe?.((name, { layout, pseudo }) => {
-      if (pseudo && pseudoGroups?.has(String(name))) {
-        // we emit a partial so merge it + change reference so mergeIfNotShallowEqual runs
-        Object.assign(current.pseudo, pseudo)
-        persist()
-      } else if (layout && mediaGroups) {
-        const mediaState = getMediaState(mediaGroups, layout)
-        const next = mergeIfNotShallowEqual(current.media, mediaState)
-        if (next !== current.media) {
-          Object.assign(current.media, next)
-          persist()
-        }
-      }
-      function persist() {
-        // force it to be referentially different so it always updates
-        const group = {
-          ...state.group,
-          [name]: current,
-        }
-        setStateShallow({
-          group,
-        })
-      }
-    })
-  }
-}

package/src/createTamagui.ts

@@ -64,11 +64,18 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   let foundThemes: DedupedThemes | undefined
   if (configIn.themes) {
     const noThemes = Object.keys(configIn.themes).length === 0
-    foundThemes = scanAllSheets(noThemes, tokensParsed)
+    if (noThemes) {
+      foundThemes = scanAllSheets(noThemes, tokensParsed)
+    }
+    if (process.env.TAMAGUI_REACT_19 && process.env.TAMAGUI_SKIP_THEME_OPTIMIZATION) {
+      // save some bundle
+    } else {
+      if (noThemes) {
+        listenForSheetChanges()
+      }
+    }
   }
 
-  listenForSheetChanges()
-
   let fontSizeTokens: Set<string> | null = null
   let fontsParsed:
     | {
@@ -164,7 +171,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
       }
     }
 
-    const themesIn = { ...configIn.themes } as ThemesLikeObject
+    const themesIn = configIn.themes as ThemesLikeObject
     const dedupedThemes = foundThemes ?? getThemesDeduped(themesIn)
     const themes = proxyThemesToParents(dedupedThemes)
 

package/src/helpers/getSplitStyles.tsx

@@ -71,6 +71,7 @@ import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { transformsToString } from './transformsToString'
 import { isActivePlatform } from './isActivePlatform'
+import { sortString } from './sortString'
 
 const consoleGroupCollapsed = isWeb ? console.groupCollapsed : console.info
 
@@ -1108,7 +1109,7 @@ export const getSplitStyles: StyleSplitter = (
       // to the "flat" transform props
       styleState.style ||= {}
       Object.entries(styleState.flatTransforms)
-        .sort(([a], [b]) => a.localeCompare(b))
+        .sort(([a], [b]) => sortString(a, b))
         .forEach(([key, val]) => {
           mergeTransform(styleState.style!, key, val, true)
         })

package/src/helpers/getThemeCSSRules.ts

@@ -6,6 +6,7 @@ import { variableToString } from '../createVariable'
 import type { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
 import { getSetting } from '../config'
+import { sortString } from './sortString'
 
 const darkLight = ['dark', 'light']
 const lightDark = ['light', 'dark']
@@ -114,7 +115,7 @@ export function getThemeCSSRules(props: {
       }
     }
 
-    const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b))
+    const selectors = [...selectorsSet].sort(sortString)
 
     // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
     // this isBaseTheme logic could probably be done more efficiently above

package/src/helpers/insertStyleRule.tsx

@@ -39,6 +39,7 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
   }
 }
 
+// once react 19 onyl supported we can remove most of this
 // gets existing ones (client side)
 // takes ~0.1ms for a fairly large page
 // used now for three things:

package/src/helpers/sortString.ts

@@ -0,0 +1 @@
+export const sortString = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)

package/src/helpers/subscribeToContextGroup.tsx

@@ -0,0 +1,56 @@
+import { mergeIfNotShallowEqual } from './createShallowSetState'
+import { getMediaState } from '../hooks/useMedia'
+import type { TamaguiComponentState, ComponentContextI, GroupState } from '../types'
+
+export const subscribeToContextGroup = ({
+  disabled = false,
+  setStateShallow,
+  pseudoGroups,
+  mediaGroups,
+  componentContext,
+  state,
+}: {
+  disabled?: boolean
+  setStateShallow: (next?: Partial<TamaguiComponentState> | undefined) => void
+  pseudoGroups?: Set<string>
+  mediaGroups?: Set<string>
+  componentContext: ComponentContextI
+  state: TamaguiComponentState
+}) => {
+  // parent group pseudo listening
+  if (pseudoGroups || mediaGroups) {
+    const current = {
+      pseudo: {},
+      media: {},
+    } satisfies GroupState
+
+    if (process.env.NODE_ENV === 'development' && !componentContext.groups) {
+      console.debug(`No context group found`)
+    }
+
+    return componentContext.groups?.subscribe?.((name, { layout, pseudo }) => {
+      if (pseudo && pseudoGroups?.has(String(name))) {
+        // we emit a partial so merge it + change reference so mergeIfNotShallowEqual runs
+        Object.assign(current.pseudo, pseudo)
+        persist()
+      } else if (layout && mediaGroups) {
+        const mediaState = getMediaState(mediaGroups, layout)
+        const next = mergeIfNotShallowEqual(current.media, mediaState)
+        if (next !== current.media) {
+          Object.assign(current.media, next)
+          persist()
+        }
+      }
+      function persist() {
+        // force it to be referentially different so it always updates
+        const group = {
+          ...state.group,
+          [name]: current,
+        }
+        setStateShallow({
+          group,
+        })
+      }
+    })
+  }
+}