@tamagui/web 1.85.3 → 1.85.4

package/src/createComponent.tsx

@@ -8,7 +8,6 @@ import React, {
   createElement,
   forwardRef,
   memo,
-  useCallback,
   useContext,
   useEffect,
   useId,
@@ -33,7 +32,6 @@ import {
 import { useSplitStyles } from './helpers/getSplitStyles'
 import { log } from './helpers/log'
 import { mergeProps } from './helpers/mergeProps'
-import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { themeable } from './helpers/themeable'
 import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
@@ -75,7 +73,6 @@ process.env.TAMAGUI_TARGET
  * All things that need one-time setup after createTamagui is called
  */
 let tamaguiConfig: TamaguiInternalConfig
-let initialTheme: any
 let time: any
 
 let debugKeyListeners: Set<Function> | undefined
@@ -147,33 +144,20 @@ export function createComponent<
   Ref = TamaguiElement,
   BaseProps = never,
 >(staticConfig: StaticConfig) {
+  const { componentName } = staticConfig
+
   let config: TamaguiInternalConfig | null = null
   let defaultProps = staticConfig.defaultProps
 
   onConfiguredOnce((conf) => {
     config = conf
 
-    if (staticConfig.componentName) {
-      const defaultForComponent = conf.defaultProps?.[staticConfig.componentName]
+    if (componentName) {
+      const defaultForComponent = conf.defaultProps?.[componentName]
       if (defaultForComponent) {
         defaultProps = { ...defaultForComponent, ...defaultProps }
       }
     }
-
-    // one time only setup
-    if (!tamaguiConfig) {
-      tamaguiConfig = conf
-
-      if (!initialTheme) {
-        const next = conf.themes[Object.keys(conf.themes)[0]]
-        initialTheme = proxyThemeVariables(next)
-        if (process.env.NODE_ENV === 'development') {
-          if (!initialTheme) {
-            log('Warning: Missing theme')
-          }
-        }
-      }
-    }
   })
 
   const {
@@ -185,11 +169,9 @@ export function createComponent<
     variants = {},
   } = staticConfig
 
-  const defaultComponentClassName = `is_${staticConfig.componentName}`
-
   if (process.env.NODE_ENV === 'development' && staticConfig.defaultProps?.['debug']) {
     if (process.env.IS_STATIC !== 'is_static') {
-      log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
+      log(`🐛 [${componentName || 'Component'}]`, {
         staticConfig,
         defaultProps,
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : [],
@@ -198,6 +180,7 @@ export function createComponent<
   }
 
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn, forwardedRef) => {
+    // HOOK
     const internalID = process.env.NODE_ENV === 'development' ? useId() : ''
 
     if (process.env.NODE_ENV === 'development') {
@@ -227,6 +210,7 @@ export function createComponent<
       }
     }
 
+    // HOOK
     const componentContext = useContext(ComponentContext)
 
     // set variants through context
@@ -237,6 +221,7 @@ export function createComponent<
     const { context } = staticConfig
 
     if (context) {
+      // HOOK 3 (-1 if production)
       contextValue = useContext(context)
       const { inverseShorthands } = getConfig()
       for (const key in context.props) {
@@ -280,6 +265,7 @@ export function createComponent<
     const componentName = props.componentName || staticConfig.componentName
 
     if (process.env.NODE_ENV === 'development' && isClient) {
+      // HOOK
       useEffect(() => {
         let overlay: HTMLSpanElement | null = null
 
@@ -339,18 +325,19 @@ export function createComponent<
     }
     if (process.env.NODE_ENV === 'development' && time) time`start (ignore)`
 
-    const isHydrated = config?.disableSSR ? true : useDidFinishSSR()
-
     if (process.env.NODE_ENV === 'development' && time) time`did-finish-ssr`
 
     // conditional but if ever true stays true
     // [animated, inversed]
+    // HOOK
     const stateRef = useRef(
       {} as any as {
+        willHydrate?: boolean
         hasMeasured?: boolean
         hasAnimated?: boolean
         themeShallow?: boolean
         isListeningToTheme?: boolean
+        unPress?: Function
         group?: {
           listeners: Set<GroupStateListener>
           emit: GroupStateListener
@@ -362,6 +349,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`stateref`
 
     // TODO can remove and fold into stateRef
+    // HOOK
     const hostRef = useRef<TamaguiElement>(null)
 
     /**
@@ -377,43 +365,99 @@ export function createComponent<
 
     // disable for now still ssr issues
     const supportsCSSVars = animationsConfig?.supportsCSSVars
+    const curState = stateRef.current
 
-    const willBeAnimated = (() => {
-      if (isServer && !supportsCSSVars) return false
-      const curState = stateRef.current
+    const willBeAnimatedClient = (() => {
       const next = !!(hasAnimationProp && !isHOC && useAnimations)
       return Boolean(next || curState.hasAnimated)
     })()
 
-    const usePresence = animationsConfig?.usePresence
-    const presence = (willBeAnimated && usePresence?.()) || null
+    const willBeAnimated = !isServer && willBeAnimatedClient
+
+    // once animated, always animated to preserve hooks / vdom structure
+    if (willBeAnimated && !curState.hasAnimated) {
+      curState.hasAnimated = true
+    }
+
+    // HOOK
+    const isHydrated = config?.disableSSR ? true : useDidFinishSSR()
+
+    // HOOK
+    const presence = (willBeAnimated && animationsConfig?.usePresence?.()) || null
+    const presenceState = presence?.[2]
+    const enterExitVariant = presenceState?.enterExitVariant
+    const enterVariant = enterExitVariant ?? presenceState?.enterVariant
 
     const hasEnterStyle = !!props.enterStyle
-    const needsMount = Boolean((isWeb ? isClient : true) && willBeAnimated)
+    // finish animated logic, avoid isAnimated when unmounted
+    const hasRNAnimation = hasAnimationProp && animationsConfig?.isReactNative
+    const isReactNative = staticConfig.isReactNative
+
+    // only web server + initial client render run this when not hydrated:
+    let isAnimated = willBeAnimated
+    if (!isReactNative && hasRNAnimation && !isHOC && !isHydrated) {
+      isAnimated = false
+      curState.willHydrate = true
+    }
 
     if (process.env.NODE_ENV === 'development' && time) time`pre-use-state`
 
-    const initialState = willBeAnimated
-      ? supportsCSSVars
-        ? defaultComponentStateShouldEnter!
-        : defaultComponentState!
-      : defaultComponentStateMounted!
+    const initialState =
+      hasEnterStyle || enterVariant
+        ? !isHydrated
+          ? defaultComponentStateShouldEnter
+          : defaultComponentState
+        : defaultComponentStateMounted
 
+    // HOOK
     const states = useState<TamaguiComponentState>(initialState)
 
-    const state = propsIn.forceStyle
-      ? { ...states[0], [propsIn.forceStyle]: true }
+    const state = props.forceStyle
+      ? { ...states[0], [props.forceStyle]: true }
       : states[0]
+
     const setState = states[1]
+    let setStateShallow = createShallowSetState(setState, debugProp)
+
+    if (isHydrated && state.unmounted === 'should-enter') {
+      state.unmounted = true
+    }
+
+    // set enter/exit variants onto our new props object
+    if (presenceState && isAnimated && isHydrated) {
+      const isExiting = !presenceState.isPresent
+      const exitVariant = enterExitVariant ?? presenceState.exitVariant
+
+      if (state.unmounted && enterVariant) {
+        if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+          console.warn(`Animating presence ENTER "${enterVariant}"`)
+        }
+
+        props[enterVariant] = true
+      } else if (isExiting && exitVariant) {
+        if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+          console.warn(`Animating presence EXIT "${enterVariant}"`)
+        }
 
-    let setStateShallow = createShallowSetState(setState)
+        props[exitVariant] = enterExitVariant ? false : true
+      }
+    }
+
+    const shouldAvoidClasses = Boolean(
+      !isWeb ||
+        (isAnimated && !supportsCSSVars) ||
+        !staticConfig.acceptsClassName ||
+        propsIn.disableClassName
+    )
+    const shouldForcePseudo = !!propsIn.forceStyle
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo
 
     const groupName = props.group as any as string
     const groupClassName = groupName ? `t_group_${props.group}` : ''
 
-    if (groupName && !stateRef.current.group) {
+    if (groupName && !curState.group) {
       const listeners = new Set<GroupStateListener>()
-      stateRef.current.group = {
+      curState.group = {
         listeners,
         emit(name, state) {
           listeners.forEach((l) => l(name, state))
@@ -433,7 +477,7 @@ export function createComponent<
       const og = setStateShallow
       setStateShallow = (state) => {
         og(state)
-        stateRef.current.group!.emit(groupName, {
+        curState.group!.emit(groupName, {
           pseudo: state,
         })
         // and mutate the current since its concurrent safe (children throw it in useState on mount)
@@ -447,26 +491,9 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
-    let isAnimated = willBeAnimated
-
-    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
-        ? `is_${props.componentName}`
-        : defaultComponentClassName
+    const componentNameFinal = props.componentName || componentName
+    const componentClassName =
+      props.asChild || !componentNameFinal ? '' : `is_${componentNameFinal}`
 
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
@@ -481,45 +508,11 @@ export function createComponent<
     const BaseViewComponent = BaseView || element || (hasTextAncestor ? 'span' : 'div')
 
     let elementType = isText ? BaseTextComponent : BaseViewComponent
-    if (animationsConfig && willBeAnimated) {
-      elementType = animationsConfig[isText ? 'Text' : 'View'] || elementType
-    }
 
-    // set enter/exit variants onto our new props object
-    if (isAnimated && presence) {
-      const presenceState = presence[2]
-      if (presenceState) {
-        const isEntering = state.unmounted
-        const isExiting = !presenceState.isPresent
-        const enterExitVariant = presenceState.enterExitVariant
-        const enterVariant = enterExitVariant ?? presenceState.enterVariant
-        const exitVariant = enterExitVariant ?? presenceState.exitVariant
-
-        if (isEntering && enterVariant) {
-          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
-            console.warn(`Animating presence ENTER "${enterVariant}"`)
-          }
-
-          props[enterVariant] = true
-        } else if (isExiting && exitVariant) {
-          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
-            console.warn(`Animating presence EXIT "${enterVariant}"`)
-          }
-
-          props[exitVariant] = enterExitVariant ? false : true
-        }
-      }
+    if (animationsConfig && isAnimated) {
+      elementType = animationsConfig[isText ? 'Text' : 'View'] || elementType
     }
 
-    const isAnimatedReactNative = hasAnimationProp && animationsConfig?.isReactNative
-    const isReactNative = Boolean(staticConfig.isReactNative || isAnimatedReactNative)
-    const shouldAvoidClasses = Boolean(
-      !isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName
-    )
-
-    const shouldForcePseudo = !!propsIn.forceStyle
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo
-
     // internal use only
     const disableThemeProp =
       process.env.TAMAGUI_TARGET === 'native' ? false : props['data-disable-theme']
@@ -528,19 +521,19 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`theme-props`
 
     if (props.themeShallow) {
-      stateRef.current.themeShallow = true
+      curState.themeShallow = true
     }
 
     const themeStateProps: UseThemeWithStateProps = {
       name: props.theme,
       componentName,
       disable: disableTheme,
-      shallow: stateRef.current.themeShallow,
+      shallow: curState.themeShallow,
       inverse: props.themeInverse,
       debug: debugProp,
     }
 
-    if (typeof stateRef.current.isListeningToTheme === 'boolean') {
+    if (typeof curState.isListeningToTheme === 'boolean') {
       themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme
     }
 
@@ -553,45 +546,35 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development') {
       if (debugProp && debugProp !== 'profile') {
-        // prettier-ignore
         const name = `${
           componentName ||
           Component?.displayName ||
           Component?.name ||
           '[Unnamed Component]'
         }`
-        const type = isAnimatedReactNative ? '(animated)' : isReactNative ? '(rnw)' : ''
+        const type =
+          (hasEnterStyle ? '(hasEnter)' : '') +
+          (isAnimated ? '(animated)' : '') +
+          (isReactNative ? '(rnw)' : '')
         const dataIs = propsIn['data-is'] || ''
-        const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type} id ${internalID}`
+        const banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
         console.group(
-          `%c ${banner} (unmounted: ${state.unmounted})${
-            presence ? ` (presence: ${presence[0]})` : ''
-          } ${isHydrated ? '💦' : '🏜️'}`,
+          `%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
           'background: green; color: white;'
         )
         if (!isServer) {
+          // if strict mode or something messes with our nesting this fixes:
+          console.groupEnd()
+          console.groupEnd()
+
           console.groupCollapsed(
             `Info (collapsed): ${state.press || state.pressIn ? 'PRESSED ' : ''}${
               state.hover ? 'HOVERED ' : ''
             }${state.focus ? 'FOCUSED' : ' '}`
           )
-
-          log({
-            propsIn,
-            props,
-            state,
-            staticConfig,
-            elementType,
-            themeStateProps,
-            styledContext: { contextProps: styledContextProps, overriddenContextProps },
-            presence,
-            isAnimated,
-            isHOC,
-            hasAnimationProp,
-            useAnimations,
-            propsInOrder: Object.keys(propsIn),
-            propsOrder: Object.keys(props),
-          })
+          log({ propsIn, props, state, staticConfig, elementType, themeStateProps })
+          log({ contextProps: styledContextProps, overriddenContextProps })
+          log({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations })
           console.groupEnd()
         }
       }
@@ -599,6 +582,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`pre-theme-media`
 
+    // HOOK 10-13 (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
     const [themeState, theme] = useThemeWithState(themeStateProps)
 
     elementType = Component || elementType
@@ -606,6 +590,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`theme`
 
+    // HOOK 14 (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
     const mediaState = useMedia(stateRef, componentContext)
 
     if (process.env.NODE_ENV === 'development' && time) time`media`
@@ -619,18 +604,15 @@ export function createComponent<
         ? 'value'
         : 'auto'
 
-    // temp: once we fix above we can disable this
-    const keepStyleSSR = willBeAnimated && animationsConfig?.keepStyleSSR
-
     const styleProps = {
       mediaState,
       noClassNames,
       resolveValues,
       isExiting,
       isAnimated,
-      keepStyleSSR,
     } as const
 
+    // HOOK 15 (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
@@ -645,13 +627,13 @@ export function createComponent<
     )
 
     // hide strategy will set this opacity = 0 until measured
-    if (props.group && props.untilMeasured === 'hide' && !stateRef.current.hasMeasured) {
+    if (props.group && props.untilMeasured === 'hide' && !curState.hasMeasured) {
       splitStyles.style.opacity = 0
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`split-styles`
 
-    stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
+    curState.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
@@ -667,34 +649,6 @@ export function createComponent<
       keys: mediaListeningKeys,
     })
 
-    // animation setup
-    const isAnimatedReactNativeWeb = hasAnimationProp && isReactNative
-
-    if (process.env.NODE_ENV === 'development') {
-      if (!process.env.TAMAGUI_TARGET) {
-        console.error(
-          `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
-        )
-      }
-
-      if (debugProp && debugProp !== 'profile') {
-        console.groupCollapsed('>>>')
-
-        log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
-        log('splitStyles', splitStyles)
-        log('media', { shouldListenForMedia, isMediaArray, mediaListeningKeys })
-        log('className', Object.values(splitStyles.classNames))
-        if (isClient) {
-          log('ref', hostRef, '(click to view)')
-        }
-        console.groupEnd()
-        if (debugProp === 'break') {
-          // biome-ignore lint/suspicious/noDebugger: ok
-          debugger
-        }
-      }
-    }
-
     const {
       viewProps: viewPropsIn,
       pseudos,
@@ -708,12 +662,17 @@ export function createComponent<
     // once you set animation prop don't remove it, you can set to undefined/false
     // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
     let animationStyles: any
-    if (willBeAnimated && useAnimations && !isHOC) {
+    if (
+      // if it supports css vars we run it on server too to get matching initial style
+      (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) &&
+      useAnimations &&
+      !isHOC
+    ) {
+      // HOOK 16... (depends on driver) (-1 if no animation, -1 if disableSSR, -1 if no context, -1 if production)
       const animations = useAnimations({
         props: propsWithAnimation,
         // if hydrating, send empty style
         style: splitStylesStyle,
-        // style: splitStylesStyle,
         presence,
         componentState: state,
         styleProps,
@@ -723,7 +682,7 @@ export function createComponent<
         staticConfig,
       })
 
-      if (isAnimated && animations) {
+      if ((isAnimated || supportsCSSVars) && animations) {
         animationStyles = animations.style
       }
 
@@ -803,13 +762,16 @@ export function createComponent<
       )
     }
 
-    // if react-native-web view just pass all props down
-    if (process.env.TAMAGUI_TARGET === 'web' && !isReactNative && !asChild) {
-      viewProps = hooks.usePropsTransform?.(elementType, nonTamaguiProps, hostRef)
-    } else {
-      viewProps = nonTamaguiProps
-    }
+    // HOOKS (0-4 more):
+    viewProps =
+      hooks.usePropsTransform?.(
+        elementType,
+        nonTamaguiProps,
+        hostRef,
+        curState.willHydrate
+      ) ?? nonTamaguiProps
 
+    // HOOK (1 more):
     const composedRef = useComposedRefs(hostRef as any, forwardedRef)
     viewProps.ref = composedRef
 
@@ -828,33 +790,24 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`events-hooks`
 
-    let unPress = () =>
-      setStateShallow({
-        press: false,
-        pressIn: false,
-      })
-
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      // needs to be referentially stable for web as we add to mouseUps
-      unPress = useCallback(unPress, [])
-    }
-
     // 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 shouldSetMounted = needsMount && state.unmounted
     const { pseudoGroups, mediaGroups } = splitStyles
 
+    // TODO if you add a group prop setStateShallow changes identity...
+    if (!curState.unPress) {
+      curState.unPress = () => setStateShallow({ press: false, pressIn: false })
+    }
+
+    const unPress = curState.unPress!
+    const shouldEnter = state.unmounted
+
     useEffect(() => {
-      if (shouldSetMounted) {
-        const unmounted =
-          state.unmounted === true && hasEnterStyle ? 'should-enter' : false
-        setStateShallow({
-          unmounted,
-        })
+      if (shouldEnter) {
+        setStateShallow({ unmounted: false })
         return
-        // no need for mouseUp removal effect if its not even mounted yet
       }
 
       // parent group pseudo listening
@@ -896,14 +849,11 @@ export function createComponent<
         mouseUps.delete(unPress)
       }
     }, [
-      shouldSetMounted,
-      state.unmounted,
+      shouldEnter,
       pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
       mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
     ])
 
-    const avoidAnimationStyle = keepStyleSSR && state.unmounted === true
-
     let fontFamily = isText
       ? splitStyles.fontFamily || staticConfig.defaultProps?.fontFamily
       : null
@@ -912,9 +862,7 @@ export function createComponent<
     }
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
-    const style = avoidAnimationStyle
-      ? splitStyles.style
-      : animationStyles || splitStyles.style
+    const style = animationStyles || splitStyles.style
 
     let className: string | undefined
 
@@ -931,10 +879,9 @@ export function createComponent<
 
         className = classList.join(' ')
 
-        if (isAnimatedReactNativeWeb && !avoidAnimationStyle) {
+        if (isAnimated && !supportsCSSVars && isReactNative) {
           viewProps.style = style
         } else if (isReactNative) {
-          // TODO these shouldn't really return from getSplitStyles when in Native mode
           const cnStyles = { $$css: true }
           for (const name of className.split(' ')) {
             cnStyles[name] = name
@@ -1168,14 +1115,20 @@ export function createComponent<
 
     // needs to reset the presence state for nested children
     const ResetPresence = config?.animations?.ResetPresence
-    if (willBeAnimated && presence && ResetPresence && typeof content !== 'string') {
+    if (
+      willBeAnimated &&
+      hasEnterStyle &&
+      ResetPresence &&
+      content &&
+      typeof content !== 'string'
+    ) {
       content = <ResetPresence>{content}</ResetPresence>
     }
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
 
     // must override context so siblings don't clobber initial state
-    const groupState = stateRef.current.group
+    const groupState = curState.group
     const subGroupContext = useMemo(() => {
       if (!groupState || !groupName) return
       groupState.listeners.clear()
@@ -1186,7 +1139,7 @@ export function createComponent<
         state: {
           ...componentContext.groups.state,
           [groupName]: {
-            pseudo: initialState,
+            pseudo: defaultComponentStateMounted,
             // capture just initial width and height if they exist
             // will have top, left, width, height (not x, y)
             layout: {
@@ -1226,11 +1179,17 @@ export function createComponent<
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (isReactNative) {
+      if (isReactNative && !asChild && !isHOC) {
         content = (
           <span
-            className={`${isAnimatedReactNativeWeb ? className : ''} _dsp_contents`}
-            {...(events && getWebEvents(events))}
+            {...(!isHydrated
+              ? {
+                  className: `_dsp_contents`,
+                }
+              : {
+                  className: `_dsp_contents`,
+                  ...(events && getWebEvents(events)),
+                })}
           >
             {content}
           </span>
@@ -1264,19 +1223,19 @@ export function createComponent<
         console.groupCollapsed(`render <${element} /> (${internalID}) with props`)
         try {
           log('viewProps', viewProps)
-          log('viewPropsOrder', Object.keys(viewProps))
-          for (const key in viewProps) {
-            log(' - ', key, viewProps[key])
-          }
           log('children', content)
           if (typeof window !== 'undefined') {
+            log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
             log({
+              shouldListenForMedia,
+              mediaListeningKeys,
+              isMediaArray,
               viewProps,
+              hostRef,
               state,
               styleProps,
               themeState,
               isAnimated,
-              isAnimatedReactNativeWeb,
               defaultProps,
               splitStyles,
               animationStyles,
@@ -1303,7 +1262,10 @@ export function createComponent<
           // RN can run into PayloadTooLargeError: request entity too large
         }
         console.groupEnd()
-        console.groupEnd()
+        if (debugProp === 'break') {
+          // biome-ignore lint/suspicious/noDebugger: ok
+          debugger
+        }
       }
     }