@tamagui/web 1.46.1 → 1.47.0

package/src/createComponent.tsx

@@ -1,6 +1,7 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { validStyles } from '@tamagui/helpers'
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import React, {
   Children,
   Fragment,
@@ -9,6 +10,7 @@ import React, {
   memo,
   useCallback,
   useContext,
+  useEffect,
   useId,
   useRef,
   useState,
@@ -21,7 +23,6 @@ import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
 import { useSplitStyles } from './helpers/getSplitStyles'
 import { mergeProps } from './helpers/mergeProps'
-import { parseStaticConfig } from './helpers/parseStaticConfig'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { themeable } from './helpers/themeable'
 import { useShallowSetState } from './helpers/useShallowSetState'
@@ -35,7 +36,6 @@ import {
   SpaceValue,
   SpacerProps,
   StaticConfig,
-  StaticConfigParsed,
   TamaguiComponent,
   TamaguiComponentEvents,
   TamaguiComponentState,
@@ -48,17 +48,7 @@ import { Slot } from './views/Slot'
 import { useThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
 
-// let t
-// import { timer } from '@tamagui/timer'
-// if (true || process.env.ANALYZE) {
-//   t = require().timer()
-//   setTimeout(() => {
-//     const out = t.print()
-//     if (isClient) {
-//       alert(out)
-//     }
-//   }, 2000)
-// }
+const timer = require('@tamagui/timer').timer()
 
 // this appears to fix expo / babel not picking this up sometimes? really odd
 process.env.TAMAGUI_TARGET
@@ -118,9 +108,7 @@ export function createComponent<
   ComponentPropTypes extends Object = {},
   Ref = TamaguiElement,
   BaseProps = never
->(staticConfigIn: Partial<StaticConfig> | StaticConfigParsed) {
-  const staticConfig = parseStaticConfig(staticConfigIn)
-
+>(staticConfig: StaticConfig) {
   onConfiguredOnce((conf) => {
     // one time only setup
     if (!tamaguiConfig) {
@@ -151,18 +139,22 @@ export function createComponent<
   const defaultComponentClassName = `is_${staticConfig.componentName}`
   const defaultProps = staticConfig.defaultProps
 
-  if (process.env.NODE_ENV === 'development' && staticConfigIn.defaultProps?.['debug']) {
+  if (process.env.NODE_ENV === 'development' && staticConfig.defaultProps?.['debug']) {
     if (process.env.IS_STATIC !== 'is_static') {
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
       console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
         staticConfig,
         defaultProps,
-        defaultPropsKeyOrder: Object.keys(defaultProps),
+        defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : [],
       })
     }
   }
 
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
+    // const shouldTime = staticConfig.defaultProps?.padding === 5
+    // let time: any
+    // if (shouldTime) time = timer.start()
+
     if (process.env.TAMAGUI_TARGET === 'native') {
       // todo this could be moved to a cleaner location
       if (!hasSetupBaseViews) {
@@ -182,7 +174,6 @@ export function createComponent<
         propsIn['data-test-renders']['current'] += 1
       }
     }
-    // const time = t.start({ quiet: true })
 
     // set variants through context
     // order is after default props but before props
@@ -197,8 +188,8 @@ export function createComponent<
           // because its after default props but before props this annoying amount of checks
           propsIn[key] ||
           propsIn[inverseShorthands[key]] ||
-          defaultProps[key] ||
-          defaultProps[inverseShorthands[key]]
+          defaultProps?.[key] ||
+          defaultProps?.[inverseShorthands[key]]
         // if not set, use context
         if (propVal === undefined) {
           if (contextValue) {
@@ -225,9 +216,8 @@ export function createComponent<
     // React inserts default props after your props for some reason...
     // order important so we do loops, you can't just spread because JS does weird things
     let props: any
-
     if (curDefaultProps) {
-      props = mergeProps(curDefaultProps, propsIn)[0]
+      props = mergeProps(curDefaultProps, propsIn)
     } else {
       props = propsIn
     }
@@ -235,6 +225,8 @@ export function createComponent<
     const debugProp = props['debug'] as DebugProp
     const componentName = props.componentName || staticConfig.componentName
 
+    const isHydrated = useDidFinishSSR()
+
     // conditional but if ever true stays true
     // [animated, inversed]
     const stateRef = useRef(
@@ -246,6 +238,8 @@ export function createComponent<
     )
     stateRef.current ||= {}
 
+    // if (shouldTime) time`stateref`
+
     const hostRef = useRef<TamaguiElement>(null)
 
     /**
@@ -259,13 +253,13 @@ export function createComponent<
       props.animation || (props.style && hasAnimatedStyleValue(props.style))
     )
 
+    // disable for now still ssr issues
+    const supportsCSSVars = animationsConfig?.supportsCSSVars
+
     const willBeAnimated = (() => {
-      if (isServer) return false
+      if (isServer && !supportsCSSVars) return false
       const curState = stateRef.current
       const next = !!(hasAnimationProp && !isHOC && useAnimations)
-      if (next && !curState.hasAnimated) {
-        curState.hasAnimated = true
-      }
       return Boolean(next || curState.hasAnimated)
     })()
 
@@ -273,47 +267,43 @@ export function createComponent<
     const presence = (willBeAnimated && usePresence?.()) || null
 
     const hasEnterStyle = !!props.enterStyle
+    const needsMount = Boolean((isWeb ? isClient : true) && willBeAnimated)
 
-    // disable for now still ssr issues
-    const supportsCSSVariables = false // ?? animationsConfig?.supportsCSSVariables
+    // if (shouldTime) time`pre-use-state`
 
-    const needsMount = Boolean(
-      (isWeb ? willBeAnimated && isClient : true) && willBeAnimated
-    )
-
-    const initialState = needsMount
-      ? supportsCSSVariables
+    const initialState = willBeAnimated
+      ? supportsCSSVars
         ? defaultComponentStateShouldEnter!
         : defaultComponentState!
       : defaultComponentStateMounted!
+
     const states = useState<TamaguiComponentState>(initialState)
 
     const state = propsIn.forceStyle
       ? { ...states[0], [propsIn.forceStyle]: true }
       : states[0]
     const setState = states[1]
+
+    // TODO performance optimization could avoid useCallback and just have this be setStateShallow(setState, state) at call-sites
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
+    // if (shouldTime) time`use-state`
+
     let isAnimated = willBeAnimated
 
-    if (willBeAnimated && !supportsCSSVariables) {
-      // cheat code to not always pay the cost of triple rendering,
-      // after a bit we consider this component hydrated
-      let hasHydrated = false
-      numRenderedOfType[componentName] ??= 0
-      if (willBeAnimated) {
-        if (++numRenderedOfType[componentName] > HYDRATION_CUTOFF) {
-          hasHydrated = true
-        }
-      }
-      const hasPresenceIsHydrated = presence && hasHydrated
-      if (!hasPresenceIsHydrated) {
-        if (isAnimated && (isServer || state.unmounted === true)) {
+    if (willBeAnimated && !supportsCSSVars) {
+      if (!presence && isHydrated) {
+        if (isServer || state.unmounted === true) {
           isAnimated = false
         }
       }
     }
 
+    // once animated, always animated to preserve hooks
+    if (willBeAnimated && !stateRef.current.hasAnimated) {
+      stateRef.current.hasAnimated = true
+    }
+
     const componentClassName = props.asChild
       ? ''
       : props.componentName
@@ -323,6 +313,8 @@ export function createComponent<
     const languageContext = useContext(FontLanguageContext)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
+    // if (shouldTime) time`use-context`
+
     const isTaggable = !Component || typeof Component === 'string'
     // default to tag, fallback to component (when both strings)
     const element = isWeb ? (isTaggable ? props.tag || Component : Component) : Component
@@ -367,6 +359,8 @@ export function createComponent<
     const disableThemeProp = props['data-disable-theme']
     const disableTheme = (disableThemeProp && !willBeAnimated) || isHOC
 
+    // if (shouldTime) time`theme-props`
+
     const themeStateProps = {
       name: props.theme,
       componentName,
@@ -406,17 +400,21 @@ export function createComponent<
           )
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log({ props, state, staticConfig, elementType, themeStateProps, styledContext: { contextProps: styledContextProps, overriddenContextProps }, presence, isAnimated, isHOC, hasAnimationProp, useAnimations, propsInOrder: Object.keys(propsIn), propsOrder: Object.keys(props), curDefaultPropsOrder: Object.keys(curDefaultProps) })
+          console.log({ props, state, staticConfig, elementType, themeStateProps, styledContext: { contextProps: styledContextProps, overriddenContextProps }, presence, isAnimated, isHOC, hasAnimationProp, useAnimations, propsInOrder: Object.keys(propsIn), propsOrder: Object.keys(props) })
           console.groupEnd()
         }
       }
     }
 
-    const themeState = useThemeWithState(themeStateProps)!
+    // if (shouldTime) time`pre-theme-media`
+
+    const [themeState, theme] = useThemeWithState(themeStateProps)
 
     elementType = Component || elementType
     const isStringElement = typeof elementType === 'string'
 
+    // if (shouldTime) time`theme`
+
     const mediaState = useMedia(
       // @ts-ignore, we just pass a stable object so we can get it later with
       // should match to the one used in `setMediaShouldUpdate` below
@@ -424,6 +422,8 @@ export function createComponent<
       debugProp ? { props, staticConfig } : null
     )
 
+    // if (shouldTime) time`media`
+
     setDidGetVariableValue(false)
 
     const resolveVariablesAs =
@@ -435,26 +435,31 @@ export function createComponent<
     // temp: once we fix above we can disable this
     const keepStyleSSR = willBeAnimated && animationsConfig?.keepStyleSSR
 
+    const styleProps = {
+      mediaState,
+      noClassNames,
+      hasTextAncestor,
+      resolveVariablesAs,
+      isExiting,
+      isAnimated,
+      keepStyleSSR,
+    } as const
+
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
-      themeState,
-      {
-        ...state,
-        mediaState,
-        noClassNames,
-        hasTextAncestor,
-        resolveVariablesAs,
-        isExiting,
-        isAnimated,
-        keepStyleSSR,
-      },
+      theme,
+      themeState.state.name,
+      state,
+      styleProps,
       null,
       languageContext || undefined,
       elementType,
       debugProp
     )
 
+    // if (shouldTime) time`split-styles`
+
     stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
@@ -524,21 +529,17 @@ export function createComponent<
         style: splitStylesStyle,
         // style: splitStylesStyle,
         presence,
-        state: {
-          ...state,
-          isAnimated,
-        },
-        theme: themeState.theme,
+        componentState: state,
+        styleProps,
+        theme: themeState.state.theme!,
         pseudos: pseudos || null,
         onDidAnimate: props.onDidAnimate,
         hostRef,
         staticConfig,
       })
 
-      if (isAnimated) {
-        if (animations) {
-          animationStyles = animations.style
-        }
+      if (isAnimated && animations) {
+        animationStyles = animations.style
       }
     }
 
@@ -570,6 +571,8 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn
 
+    // if (shouldTime) time`destructure`
+
     const disabled = props.accessibilityState?.disabled || props.accessibilityDisabled
 
     // these can ultimately be for DOM, react-native-web views, or animated views
@@ -595,7 +598,7 @@ export function createComponent<
     viewProps.ref = useComposedRefs(hostRef as any, forwardedRef)
 
     if (process.env.NODE_ENV === 'development') {
-      if (!isText && isWeb && !isHOC) {
+      if (!isReactNative && !isText && isWeb && !isHOC) {
         Children.toArray(props.children).forEach((item) => {
           // allow newlines because why not its annoying with mdx
           if (typeof item === 'string' && item !== '\n') {
@@ -607,74 +610,59 @@ export function createComponent<
       }
     }
 
+    // if (shouldTime) time`events-hooks`
+
     const unPress = useCallback(() => {
       setStateShallow({
         press: false,
         pressIn: false,
       })
-    }, [setStateShallow])
+    }, [])
 
     const shouldSetMounted = needsMount && state.unmounted
 
-    // combined two effects into one for performance so be careful with logic
-    // because no need for mouseUp removal effect if its not even mounted yet
+    // combined multiple effects into one for performance so be careful with logic
     useIsomorphicLayoutEffect(() => {
-      if (!shouldSetMounted) {
-        return () => {
-          mouseUps.delete(unPress)
-        }
+      if (shouldSetMounted) {
+        const unmounted =
+          state.unmounted === true && hasEnterStyle ? 'should-enter' : false
+        setStateShallow({
+          unmounted,
+        })
+        return
+        // no need for mouseUp removal effect if its not even mounted yet
       }
 
-      const unmounted = state.unmounted === true && hasEnterStyle ? 'should-enter' : false
-      setStateShallow({
-        unmounted,
-      })
+      return () => {
+        mouseUps.delete(unPress)
+      }
     }, [shouldSetMounted, state.unmounted])
 
-    let styles: Record<string, any>[] | undefined
-    const avoidStyle = keepStyleSSR && state.unmounted === true
-
-    if (!avoidStyle) {
-      if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-        styles = {
-          ...(animationStyles ?? splitStylesStyle),
-        }
-      } else {
-        styles = [animationStyles ?? splitStylesStyle]
-
-        // ugly but for now...
-        if (shouldForcePseudo) {
-          const next = {}
-          styles.forEach((style) => Object.assign(next, style))
-          // @ts-ignore
-          Object.assign(splitStyles.style, next)
-        }
-      }
-    }
+    const avoidAnimationStyle = keepStyleSSR && state.unmounted === true
 
     let fontFamily = isText
-      ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily
+      ? splitStyles.fontFamily || staticConfig.defaultProps?.fontFamily
       : null
     if (fontFamily && fontFamily[0] === '$') {
       fontFamily = fontFamily.slice(1)
     }
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
-    const classList = [
-      hasEnterStyle && ((state.unmounted && needsMount) || !isClient)
-        ? 't_will-mount'
-        : '',
-      componentName ? componentClassName : '',
-      fontFamilyClassName,
-      classNames ? Object.values(classNames).join(' ') : '',
-    ]
+    const style = avoidAnimationStyle
+      ? splitStyles.style
+      : animationStyles || splitStyles.style
 
-    const className = classList.join(' ')
+    let className: string | undefined
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      const style = avoidStyle ? null : animationStyles ?? splitStyles.style
-
-      if (isAnimatedReactNativeWeb && !avoidStyle) {
+      const classList = [
+        componentName ? componentClassName : '',
+        fontFamilyClassName,
+        classNames ? Object.values(classNames).join(' ') : '',
+      ]
+      className = classList.join(' ')
+
+      if (isAnimatedReactNativeWeb && !avoidAnimationStyle) {
         viewProps.style = style
       } else if (isReactNative) {
         // TODO these shouldn't really return from getSplitStyles when in Native mode
@@ -683,9 +671,14 @@ export function createComponent<
           cnStyles[name] = name
         }
         viewProps.style = [...(Array.isArray(style) ? style : [style]), cnStyles]
+      } else {
+        viewProps.className = className
+        viewProps.style = style
+      }
 
+      // turn debug data- props into dataSet in dev mode
+      if (isReactNative) {
         if (process.env.NODE_ENV === 'development') {
-          // turn debug data- props into dataSet in dev mode
           Object.keys(viewProps).forEach((key) => {
             if (key.startsWith('data-')) {
               viewProps.dataSet ??= {}
@@ -694,13 +687,10 @@ export function createComponent<
             }
           })
         }
-      } else {
-        viewProps.className = className
-        viewProps.style = style
       }
     } else {
       // native assign styles
-      viewProps.style = styles
+      viewProps.style = style
     }
 
     const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
@@ -723,6 +713,8 @@ export function createComponent<
         (isWeb && noClassNames && 'hoverStyle' in props)
     )
 
+    // if (shouldTime) time`events-setup`
+
     const events: TamaguiComponentEvents | null =
       shouldAttach && !isDisabled && !asChild
         ? {
@@ -789,22 +781,22 @@ export function createComponent<
           }
         : null
 
-    if (process.env.TAMAGUI_TARGET === 'native') {
-      if (events) {
-        // replicating TouchableWithoutFeedback
-        Object.assign(events, {
-          cancelable: !props.rejectResponderTermination,
-          disabled: isDisabled,
-          hitSlop: props.hitSlop,
-          delayLongPress: props.delayLongPress,
-          delayPressIn: props.delayPressIn,
-          delayPressOut: props.delayPressOut,
-          focusable: viewProps.focusable ?? true,
-          minPressDuration: 0,
-        })
-      }
+    if (process.env.TAMAGUI_TARGET === 'native' && events) {
+      // replicating TouchableWithoutFeedback
+      Object.assign(events, {
+        cancelable: !viewProps.rejectResponderTermination,
+        disabled: isDisabled,
+        hitSlop: viewProps.hitSlop,
+        delayLongPress: viewProps.delayLongPress,
+        delayPressIn: viewProps.delayPressIn,
+        delayPressOut: viewProps.delayPressOut,
+        focusable: viewProps.focusable ?? true,
+        minPressDuration: 0,
+      })
     }
 
+    // if (shouldTime) time`events`
+
     if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
       // rome-ignore lint/nursery/noConsoleLog: <explanation>
       console.log(`events`, { events, isHoverable, attachPress })
@@ -820,6 +812,8 @@ export function createComponent<
 
     const direction = props.spaceDirection || 'both'
 
+    // if (shouldTime) time`hooks`
+
     // since we re-render without changing children often for animations or on mount
     // we memo children here. tested this on the site homepage which has hundreds of components
     // and i see no difference in startup performance, but i do see it memoing often
@@ -837,13 +831,12 @@ export function createComponent<
 
     if (asChild) {
       elementType = Slot
-      viewProps = {
-        ...viewProps,
+      Object.assign(viewProps, {
         onPress,
         onLongPress,
         onPressIn,
         onPressOut,
-      }
+      })
     }
 
     content = createElement(elementType, viewProps, content)
@@ -856,14 +849,12 @@ export function createComponent<
           // passPropsToChildren: true,
         })
 
-    if (process.env.NODE_ENV === 'development') {
-      if (props['debug'] === 'visualize') {
-        content = (
-          <ThemeDebug themeState={themeState} themeProps={props}>
-            {content}
-          </ThemeDebug>
-        )
-      }
+    if (process.env.NODE_ENV === 'development' && props['debug'] === 'visualize') {
+      content = (
+        <ThemeDebug themeState={themeState} themeProps={props}>
+          {content}
+        </ThemeDebug>
+      )
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -895,7 +886,11 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development') {
       if (debugProp) {
         const element = typeof elementType === 'string' ? elementType : 'Component'
-        console.groupCollapsed(`render <${element} /> with props`)
+        console.groupCollapsed(
+          `render <${element} /> with props`,
+          initialState,
+          willBeAnimated
+        )
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
         console.log('viewProps', viewProps)
         // rome-ignore lint/nursery/noConsoleLog: <explanation>
@@ -909,16 +904,28 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // rome-ignore lint/nursery/noConsoleLog: <explanation>
-          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, defaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo })
+          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, defaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo, elementType, initialState })
         }
         console.groupEnd()
         console.groupEnd()
       }
     }
 
+    // if (shouldTime) {
+    //   time`rest`
+    //   setTimeout(() => {
+    //     if (!hasLogged) {
+    //       timer.print()
+    //     }
+    //     hasLogged = true
+    //   }, 1000)
+    // }
+
     return content
   })
 
+  // let hasLogged = false
+
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName
   }
@@ -967,7 +974,9 @@ export function createComponent<
 }
 
 // for elements to avoid spacing
-export const Unspaced = (props: { children?: any }) => props.children
+export function Unspaced(props: { children?: any }) {
+  return props.children
+}
 Unspaced['isUnspaced'] = true
 
 // dont used styled() here to avoid circular deps

package/src/createTamagui.ts

@@ -251,7 +251,6 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
 
     const designSystem = `._ovs-contain {overscroll-behavior:contain;}
-.t_unmounted .t_will-mount {opacity:0;visibility:hidden;}
 .is_Text .is_Text {display:inline-flex;}
 ._dsp_contents {display:contents;}
 ${themeConfig.cssRuleSets.join(separator)}`

package/src/helpers/ThemeManager.tsx

@@ -28,7 +28,7 @@ export type ThemeManagerState = {
 const emptyState: ThemeManagerState = { name: '' }
 
 export function getHasThemeUpdatingProps(props: ThemeProps) {
-  return props.name || props.componentName || props.inverse || props.reset
+  return Boolean(props.name || props.componentName || props.inverse || props.reset)
 }
 
 let uid = 0
@@ -139,10 +139,10 @@ export class ThemeManager {
   }
 
   getState(props = this.props, parentManager = this.parentManager) {
-    return (
+    const next =
       getState(props, parentManager) ||
       (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state || null : null)
-    )
+    return next
   }
 
   _allKeys: Set<string> | null = null
@@ -155,9 +155,9 @@ export class ThemeManager {
   }
 
   // gets value going up to parents
-  getValue(key: string, state?: ThemeManagerState) {
+  getValue(key: string, state: ThemeManagerState = this.state) {
     if (!key) return
-    let theme = (state || this.state).theme
+    let theme = state.theme
     let manager = this as ThemeManager | null
     while (theme && manager) {
       if (key in theme) {
@@ -334,7 +334,11 @@ function getState(
     }
   }
 
-  if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+  if (
+    process.env.NODE_ENV === 'development' &&
+    typeof props.debug === 'string' &&
+    typeof window !== 'undefined'
+  ) {
     console.warn('ThemeManager.getState():', {
       result,
     })