@tamagui/web 2.0.0-rc.8 → 2.0.0

package/src/helpers/resolveAnimationDriver.ts

@@ -0,0 +1,23 @@
+import type { AnimationDriver } from '../types'
+
+/**
+ * Resolves a value that might be an AnimationDriver or a multi-driver config object
+ * like { default: motionDriver, css: cssDriver } into an actual AnimationDriver.
+ */
+export function resolveAnimationDriver(
+  driver: AnimationDriver | Record<string, AnimationDriver> | null | undefined
+): AnimationDriver | null {
+  if (!driver) return null
+  // valid driver
+  if (typeof (driver as any).useAnimations === 'function') {
+    return driver as AnimationDriver
+  }
+  // multi-driver object - extract default
+  if (
+    'default' in driver &&
+    typeof (driver as any).default?.useAnimations === 'function'
+  ) {
+    return (driver as any).default
+  }
+  return null
+}

package/src/helpers/resolveCompoundTokens.ts

@@ -0,0 +1,28 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { platformResolveValue } from './platformResolveValue'
+
+const compoundKeys: Record<string, boolean> = {
+  boxShadow: true,
+  textShadow: true,
+  filter: true,
+  backgroundImage: true,
+  border: true,
+  outline: true,
+}
+
+/**
+ * resolves embedded $tokens in compound CSS string values like
+ * boxShadow, textShadow, filter, backgroundImage, border, outline.
+ *
+ * returns the original value unchanged if no resolution is needed.
+ */
+export function resolveCompoundTokens(
+  key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): any {
+  if (!value.includes('$')) return value
+  if (!compoundKeys[key]) return value
+  return platformResolveValue(key, value, styleProps, styleState)
+}

package/src/helpers/skipProps.ts

@@ -9,6 +9,7 @@ export const skipProps = {
   transition: 1,
   space: 1,
   animateOnly: 1,
+  animatedBy: 1,
   disableClassName: 1,
   debug: 1,
   componentName: 1,

package/src/helpers/styleOriginalValues.ts

@@ -0,0 +1,2 @@
+// stores raw style values before token and unit normalization
+export const styleOriginalValues = new WeakMap<object, Record<string, any>>()

package/src/helpers/themeable.tsx

@@ -13,6 +13,8 @@ export function themeable<ComponentType extends (props: any) => any>(
     props: ThemeableProps,
     ref
   ) {
+    'use no memo'
+
     const userDefaults = getDefaultProps(staticConfig, props.componentName)
     const defaultTheme = userDefaults?.theme
     const defaultResetTheme = userDefaults?.themeReset
@@ -24,7 +26,7 @@ export function themeable<ComponentType extends (props: any) => any>(
       for (const key in context.props) {
         const val = props[key]
         if (val !== undefined) {
-          overriddenContextProps ||= {}
+          overriddenContextProps = overriddenContextProps || {}
           overriddenContextProps[key] = val
         }
       }
@@ -48,19 +50,19 @@ export function themeable<ComponentType extends (props: any) => any>(
 
     const compName = componentName || staticConfig?.componentName
     if (compName) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.componentName = compName
     }
     if ('debug' in props) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.debug = props.debug
     }
     if ('theme' in props || defaultTheme) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.name = 'theme' in props ? props.theme : defaultTheme
     }
     if ('themeReset' in props || defaultResetTheme) {
-      filteredProps ||= {}
+      filteredProps = filteredProps || {}
       filteredProps.reset = 'themeReset' in props ? themeReset : defaultResetTheme
     }
 

package/src/helpers/useRenderElement.tsx

@@ -31,6 +31,13 @@ export function evaluateRenderProp(
 
   // String tag - swap element type, reuse props from defaultElement
   if (typeof render === 'string') {
+    // on native, ignore lowercase tags (html/jsx elements like "div", "span")
+    if (
+      process.env.TAMAGUI_TARGET === 'native' &&
+      render[0] === render[0].toLowerCase()
+    ) {
+      return defaultElement
+    }
     return createElement(render, props, defaultChildren)
   }
 

package/src/hooks/useComponentState.ts

@@ -27,6 +27,8 @@ export const useComponentState = (
   staticConfig: StaticConfig,
   config: TamaguiInternalConfig
 ) => {
+  'use no memo'
+
   const isHydrated = useDidFinishSSR()
   const needsHydration = !useIsClientOnly()
 
@@ -53,10 +55,8 @@ export const useComponentState = (
     (props.style && hasAnimatedStyleValue(props.style))
   )
 
-  // for backwards compat, derive from supportsCSS if new props not set
-  const inputStyle =
-    animationDriver?.inputStyle ?? (animationDriver?.supportsCSS ? 'css' : 'inline')
-  const supportsCSS = inputStyle === 'css'
+  const inputStyle = animationDriver?.inputStyle ?? 'css'
+  const outputStyle = animationDriver?.outputStyle ?? 'css'
   const curStateRef = stateRef.current
 
   if (!needsHydration && hasAnimationProp) {
@@ -92,7 +92,9 @@ export const useComponentState = (
   const hasEnterStyle = !!props.enterStyle
 
   const hasAnimationThatNeedsHydrate =
-    hasAnimationProp && !isHydrated && (animationDriver?.isReactNative || !supportsCSS)
+    hasAnimationProp &&
+    !isHydrated &&
+    (animationDriver?.isReactNative || inputStyle !== 'css')
 
   const canImmediatelyEnter = hasEnterStyle || isEntering
 
@@ -206,8 +208,8 @@ export const useComponentState = (
       const isDisabledManually = disableClassName && !state.unmounted
 
       if (
-        // Only disable className for animation drivers that need inline styles
-        (isAnimatedAndHydrated && !animationDriver?.classNameAnimation) ||
+        // Only disable className for animation drivers that output inline styles (not css)
+        (isAnimatedAndHydrated && outputStyle !== 'css') ||
         isDisabledManually ||
         isClassNameDisabled
       ) {
@@ -241,7 +243,8 @@ export const useComponentState = (
     noClass,
     state,
     stateRef,
-    supportsCSS,
+    inputStyle,
+    outputStyle,
     willBeAnimated,
     willBeAnimatedClient,
   }

package/src/hooks/useMedia.tsx

@@ -163,6 +163,8 @@ export function useMedia(
   componentContext?: ComponentContextI,
   debug?: DebugProp
 ): UseMediaState {
+  'use no memo'
+
   const componentState = componentContext ? States.get(componentContext) : null
 
   const internalRef = useRef<{

package/src/hooks/useTheme.tsx

@@ -6,6 +6,8 @@ import { useThemeState } from './useThemeState'
 const EMPTY = {}
 
 export const useTheme = () => {
+  'use no memo'
+
   const [theme] = useThemeWithState(EMPTY)
   const res = theme
   return res as ThemeProxied
@@ -20,6 +22,8 @@ export const useThemeWithState = (
   props: UseThemeWithStateProps,
   isRoot = false
 ): ThemeWithState => {
+  'use no memo'
+
   const keys = useRef<Set<string> | null>(null)
   const schemeKeys = useRef<Set<string> | null>(null)
   const themeState = useThemeState(props, isRoot, keys, schemeKeys)

package/src/hooks/useThemeState.ts

@@ -36,13 +36,17 @@ export const forceUpdateThemes = () => {
   cacheVersion++
   shouldForce = true
   allListeners.forEach((cb) => cb())
+  shouldForce = false
 }
 
 export const getThemeState = (id: ID) => states.get(id)
 
-// const cache = new Map<string, ThemeState>()
 let cacheVersion = 0
 
+// cache for getNewThemeName - invalidated on cacheVersion change
+const themeNameCache = new Map<string, string | null>()
+let themeNameCacheVer = -1
+
 let themes: Record<string, ThemeParsed> | null = null
 
 let rootThemeState: ThemeState | null = null
@@ -57,6 +61,8 @@ export const useThemeState = (
   keys: MutableRefObject<Set<string> | null>,
   schemeKeys?: MutableRefObject<Set<string> | null>
 ): ThemeState => {
+  'use no memo'
+
   const { disable } = props
   const parentId = useContext(ThemeStateContext)
 
@@ -84,7 +90,7 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
   const id = useId()
   const subscribe = useCallback(
     (cb: Function) => {
-      listenersByParent[parentId] ||= new Set()
+      listenersByParent[parentId] = listenersByParent[parentId] || new Set()
       listenersByParent[parentId].add(id)
       allListeners.set(id, () => {
         PendingUpdate.set(id, shouldForce ? 'force' : true)
@@ -107,6 +113,17 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
     let local = localStates.get(id)
     const parentState = states.get(parentId)
 
+    // fast path: nothing changed since last snapshot
+    if (local && !PendingUpdate.has(id)) {
+      if (
+        parentState &&
+        (local as any)._parentName === parentState.name &&
+        (local as any)._propsKey === propsKey
+      ) {
+        return local
+      }
+    }
+
     // check if this is a scheme-only change (light↔dark) where DynamicColorIOS handles it
     const isSchemeOnlyChange =
       process.env.TAMAGUI_TARGET === 'native' &&
@@ -136,13 +153,6 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
               ? true
               : props.needsUpdate?.()
 
-    // const cacheKey = `${cacheVersion}${id}${propsKey}${parentState?.name || ''}${isRoot}`
-    // if (!needsUpdate) {
-    //   if (cache.has(cacheKey)) {
-    //     return cache.get(cacheKey)!
-    //   }
-    // }
-
     const [rerender, next] = getNextState(
       local,
       props,
@@ -182,8 +192,12 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
       console.groupEnd()
     }
 
-    Object.assign(local, next)
-    local.id = id
+    if (next !== local) {
+      Object.assign(local, next)
+      local.id = id
+    }
+    ;(local as any)._parentName = parentState?.name
+    ;(local as any)._propsKey = propsKey
     states.set(id, next)
 
     return local
@@ -264,6 +278,9 @@ const getNextState = (
   }
 
   if (isSameAsParent) {
+    if (!shouldRerender && lastState && lastState.name === parentState!.name) {
+      return [false, lastState]
+    }
     return [shouldRerender, { ...parentState, isNew: false }]
   }
 
@@ -384,6 +401,16 @@ function getNewThemeName(
     )
   }
 
+  // check cache
+  const cacheKey = `${parentName}|${name || ''}|${componentName || ''}|${reset ? 1 : 0}|${forceUpdate ? 1 : 0}`
+  if (themeNameCacheVer !== cacheVersion) {
+    themeNameCache.clear()
+    themeNameCacheVer = cacheVersion
+  } else {
+    const cached = themeNameCache.get(cacheKey)
+    if (cached !== undefined) return cached
+  }
+
   const { themes } = getConfig()
 
   if (reset) {
@@ -393,7 +420,9 @@ function getNewThemeName(
     const isSchemeOnly = parentName === 'light' || parentName === 'dark'
     if (isSchemeOnly) {
       // If parent is just a scheme, go to the opposite scheme
-      return parentName === 'light' ? 'dark' : 'light'
+      const result = parentName === 'light' ? 'dark' : 'light'
+      themeNameCache.set(cacheKey, result)
+      return result
     }
 
     // For compound themes like "dark_blue", extract the scheme
@@ -402,6 +431,7 @@ function getNewThemeName(
     const name = lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex)
     const scheme = parentName.slice(0, lastPartIndex)
     const result = themes[name] ? name : scheme
+    themeNameCache.set(cacheKey, result)
     return result
   }
 
@@ -514,9 +544,11 @@ function getNewThemeName(
     // and we want to avoid reparenting
     !validSchemes[found]
   ) {
+    themeNameCache.set(cacheKey, null)
     return null
   }
 
+  themeNameCache.set(cacheKey, found)
   return found
 }
 

package/src/index.ts

@@ -28,6 +28,7 @@ export * from './helpers/propMapper'
 export * from './helpers/proxyThemeToParents'
 export * from './helpers/proxyThemeVariables'
 export * from './helpers/pseudoDescriptors'
+export * from './helpers/pseudoTransitions'
 export * from './helpers/themeable'
 export * from './helpers/themes'
 export * from './helpers/transformsToString'
@@ -55,6 +56,7 @@ export * from './interfaces/GetRef'
 export {
   getConfig,
   getSetting,
+  getStyleCompat,
   getThemes,
   getToken,
   getTokens,
@@ -63,6 +65,7 @@ export {
   setConfig,
   setupDev,
   updateConfig,
+  type StyleCompat,
 } from './config'
 
 export { setNonce } from './helpers/insertStyleRule'

package/src/styled.tsx

@@ -31,6 +31,7 @@ import type {
   TamaguiComponentPropsBase,
   TextStyle,
   TextStylePropsBase,
+  ThemeValueByCategory,
   ThemeValueGet,
   VariantDefinitions,
   VariantSpreadFunction,
@@ -232,7 +233,6 @@ function styled<
 ) {
   // do type stuff at top for easier readability
 
-  // get parent props without pseudos and medias so we can rebuild both with new variants
   // get parent props without pseudos and medias so we can rebuild both with new variants
   type ParentNonStyledProps = GetNonStyledProps<ParentComponent>
   type ParentStylesBase = GetBaseStyles<ParentComponent, StyledConfig>
@@ -262,7 +262,7 @@ function styled<
                 ? Partial<InferStyleProps<ParentComponent, StyledConfig>>
                 : Accepted[Key] extends 'textStyle'
                   ? Partial<InferStyleProps<typeof Text, StyledConfig>>
-                  : Omit<ThemeValueGet<Accepted[Key]>, 'unset'>)
+                  : ThemeValueByCategory<Accepted[Key]>)
         }
       : {}
 

package/src/styledNonStyleProps.test-d.ts

@@ -0,0 +1,106 @@
+/**
+ * Regression type tests for issue #4010.
+ *
+ * When a config's `Themes` type carries a string index signature (which the generic
+ * config and many real configs do, e.g. @tamagui/config), `keyof Themes` resolves to
+ * `string` and `ThemeMediaKeys` used to become `$theme-${string}`. that template-literal
+ * key collapsed the whole `WithMediaProps` mapped type into a `[key: string]` index
+ * signature, which then swallowed every non-style prop on a styled() component (onPress,
+ * onPressIn, children, ...) and even the styled() options object. the public type then
+ * typed `onPress`/`children` as the style token union instead of a function / react node.
+ *
+ * the index-signature collapse only surfaces against the built declarations a downstream
+ * project consumes (where `keyof Themes` becomes literally `string`). these tests pin the
+ * root-cause type (`ThemeMediaKeys`) directly so the regression is caught from source, and
+ * also assert the resulting styled() public props stay correct.
+ *
+ * Run with: bun run test:web
+ */
+
+import { describe, expectTypeOf, test } from 'vitest'
+import { styled } from './styled'
+import { createStyledContext } from './helpers/createStyledContext'
+import { View } from './views/View'
+import { Text } from './views/Text'
+import type { GetProps, ThemeMediaKeys } from './types'
+
+// builds a mapped type from a key union, mirroring how WithMediaProps maps over its keys
+type IndexedBy<K extends PropertyKey> = { [P in K]?: number }
+type HasStringIndex<T> = string extends keyof T ? true : false
+
+describe('issue #4010 - ThemeMediaKeys must not collapse to a string index', () => {
+  test('a loose Themes (keyof = string) yields no theme media keys', () => {
+    // root cause: without the guard this was `$theme-${string}`, a template-literal key
+    // that turns any mapped type over it into a `[key: string]` index signature
+    expectTypeOf<ThemeMediaKeys<string>>().toEqualTypeOf<never>()
+  })
+
+  test('mapping over the loose-Themes result introduces no string index signature', () => {
+    expectTypeOf<
+      HasStringIndex<IndexedBy<ThemeMediaKeys<string>>>
+    >().toEqualTypeOf<false>()
+  })
+
+  test('concrete themes still produce usable $theme- keys, sub-themes excluded', () => {
+    expectTypeOf<ThemeMediaKeys<'light' | 'dark' | 'light_red'>>().toEqualTypeOf<
+      '$theme-light' | '$theme-dark'
+    >()
+  })
+})
+
+describe('issue #4010 - non-style props survive styled()', () => {
+  // exact repro shape from the official "how to build a button" guide
+  const ButtonContext = createStyledContext({ size: '$md' as any })
+
+  const ButtonFrame = styled(View, {
+    name: 'Button',
+    context: ButtonContext,
+    variants: { size: { $md: { padding: '$3' } } } as const,
+    defaultVariants: { size: '$md' },
+  })
+
+  const ButtonText = styled(Text, { name: 'ButtonText', context: ButtonContext })
+
+  type ButtonFrameProps = GetProps<typeof ButtonFrame>
+  type ButtonTextProps = GetProps<typeof ButtonText>
+
+  test('styled() public props have no string index signature', () => {
+    expectTypeOf<HasStringIndex<ButtonFrameProps>>().toEqualTypeOf<false>()
+    expectTypeOf<HasStringIndex<ButtonTextProps>>().toEqualTypeOf<false>()
+  })
+
+  test('onPress and press handlers are functions, not style values', () => {
+    expectTypeOf<ButtonFrameProps['onPress']>().toMatchTypeOf<
+      ((event: any) => void) | null | undefined
+    >()
+    expectTypeOf<ButtonFrameProps['onPressIn']>().toMatchTypeOf<
+      ((event: any) => void) | null | undefined
+    >()
+    expectTypeOf<ButtonFrameProps['onPressOut']>().toMatchTypeOf<
+      ((event: any) => void) | null | undefined
+    >()
+    expectTypeOf<ButtonFrameProps['onLongPress']>().toMatchTypeOf<
+      ((event: any) => void) | null | undefined
+    >()
+  })
+
+  test('children accepts react nodes on styled(Text) and styled(View)', () => {
+    expectTypeOf<'hello'>().toMatchTypeOf<ButtonTextProps['children']>()
+    expectTypeOf<'hello'>().toMatchTypeOf<ButtonFrameProps['children']>()
+  })
+
+  test('plain styled(View) without context/variants keeps onPress + children', () => {
+    const Plain = styled(View, {})
+    type PlainProps = GetProps<typeof Plain>
+    expectTypeOf<HasStringIndex<PlainProps>>().toEqualTypeOf<false>()
+    expectTypeOf<PlainProps['onPress']>().toMatchTypeOf<
+      ((event: any) => void) | null | undefined
+    >()
+    expectTypeOf<'child'>().toMatchTypeOf<PlainProps['children']>()
+  })
+
+  test('style + variant props still resolve', () => {
+    expectTypeOf<ButtonFrameProps>().toHaveProperty('size')
+    expectTypeOf<ButtonFrameProps>().toHaveProperty('hoverStyle')
+  })
+})