@tamagui/web 2.0.0-rc.3 → 2.0.0-rc.31

package/src/hooks/useMedia.tsx

@@ -1,15 +1,20 @@
 import { isServer, isWeb } from '@tamagui/constants'
 import { useRef, useSyncExternalStore } from 'react'
-import { getConfig, getSetting } from '../config'
+import { getSetting } from '../config'
 import { resetMediaStyleCache } from '../helpers/createMediaStyle'
 import { matchMedia } from '../helpers/matchMedia'
+import { mediaObjectToString } from '../helpers/mediaObjectToString'
+import {
+  getMedia,
+  mediaKeys,
+  mediaQueryConfig,
+  setMediaState,
+} from '../helpers/mediaState'
 import type {
   ComponentContextI,
   DebugProp,
   GetStyleState,
   IsMediaType,
-  MediaQueries,
-  MediaQueryObject,
   MediaQueryState,
   TamaguiInternalConfig,
   UseMediaState,
@@ -17,33 +22,6 @@ import type {
 } from '../types'
 import { defaultMediaImportance } from '../helpers/pseudoDescriptors'
 
-export let mediaState: MediaQueryState =
-  // development only safeguard
-  process.env.NODE_ENV === 'development'
-    ? new Proxy(
-        {},
-        {
-          get(target, key) {
-            if (
-              typeof key === 'string' &&
-              key[0] === '$' &&
-              // dont error on $$typeof
-              key[1] !== '$'
-            ) {
-              throw new Error(`Access mediaState should not use "$": ${key}`)
-            }
-            return Reflect.get(target, key)
-          },
-        }
-      )
-    : ({} as any)
-
-export const mediaQueryConfig: MediaQueries = {}
-
-export const getMedia = () => mediaState
-
-export const mediaKeys = new Set<string>() // with $ prefix
-
 const mediaKeyRegex = /\$(platform|theme|group)-/
 
 export const isMediaKey = (key: string): boolean => {
@@ -89,11 +67,11 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   // reset cached media style prefixes/selectors so they get recalculated with new key order
   resetMediaStyleCache()
   for (const key in media) {
-    mediaState[key] = mediaQueryDefaultActive?.[key] || false
+    getMedia()[key] = mediaQueryDefaultActive?.[key] || false
     mediaKeys.add(`$${key}`)
   }
   Object.assign(mediaQueryConfig, media)
-  initState = { ...mediaState }
+  initState = { ...getMedia() }
   mediaKeysOrdered = Object.keys(media)
   setupMediaListeners()
 }
@@ -121,7 +99,7 @@ export function setupMediaListeners() {
   unlisten()
 
   for (const key in mediaQueryConfig) {
-    const str = mediaObjectToString(mediaQueryConfig[key], key)
+    const str = mediaObjectToString(mediaQueryConfig[key])
     const getMatch = () => matchMedia(str)
     const match = getMatch()
     if (!match) {
@@ -136,8 +114,8 @@ export function setupMediaListeners() {
 
     function update() {
       const next = !!getMatch().matches
-      if (next === mediaState[key]) return
-      mediaState = { ...mediaState, [key]: next }
+      if (next === getMedia()[key]) return
+      setMediaState({ ...getMedia(), [key]: next })
       updateMediaListeners()
     }
 
@@ -148,7 +126,7 @@ export function setupMediaListeners() {
 const listeners = new Set<any>()
 
 export function updateMediaListeners() {
-  listeners.forEach((cb) => cb(mediaState))
+  listeners.forEach((cb) => cb(getMedia()))
 }
 
 type MediaState = {
@@ -185,6 +163,8 @@ export function useMedia(
   componentContext?: ComponentContextI,
   debug?: DebugProp
 ): UseMediaState {
+  'use no memo'
+
   const componentState = componentContext ? States.get(componentContext) : null
 
   const internalRef = useRef<{
@@ -195,7 +175,7 @@ export function useMedia(
   if (!internalRef.current) {
     internalRef.current = {
       keys: new Set(),
-      lastState: mediaState,
+      lastState: getMedia(),
     }
   }
 
@@ -222,22 +202,23 @@ export function useMedia(
         return lastState
       }
 
+      const ms = getMedia()
       for (const key of curKeys) {
-        if (mediaState[key] !== (pendingState || lastState)[key]) {
+        if (ms[key] !== (pendingState || lastState)[key]) {
           if (process.env.NODE_ENV === 'development' && debug) {
-            console.warn(`useMedia() ✍️`, key, lastState[key], '=>', mediaState[key])
+            console.warn(`useMedia() ✍️`, key, lastState[key], '=>', ms[key])
           }
 
           // in emitter mode (no-rerender) avoid changing state, instead emit
           if (componentContext?.mediaEmit) {
-            componentContext.mediaEmit(mediaState)
-            internalRef.current!.pendingState = mediaState
+            componentContext.mediaEmit(ms)
+            internalRef.current!.pendingState = ms
             return lastState
           }
 
-          internalRef.current!.lastState = mediaState
+          internalRef.current!.lastState = ms
 
-          return mediaState
+          return ms
         }
       }
 
@@ -291,41 +272,13 @@ export const getMediaImportanceIfMoreImportant = (
   return !usedKeys[key] || importance > usedKeys[key] ? importance : null
 }
 
-function camelToHyphen(str: string) {
-  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
-}
-
-const cache = new WeakMap<any, string>()
 const cachedMediaKeyToQuery: Record<string, string> = {}
 
-export function mediaObjectToString(query: string | MediaQueryObject, key?: string) {
-  if (typeof query === 'string') {
-    return query
-  }
-  if (cache.has(query)) {
-    return cache.get(query)!
-  }
-  const res = Object.entries(query)
-    .map(([feature, value]) => {
-      feature = camelToHyphen(feature)
-      if (typeof value === 'string') {
-        return `(${feature}: ${value})`
-      }
-      if (typeof value === 'number' && /[height|width]$/.test(feature)) {
-        value = `${value}px`
-      }
-      return `(${feature}: ${value})`
-    })
-    .join(' and ')
-  if (key) {
-    cachedMediaKeyToQuery[key] = res
-  }
-  cache.set(query, res)
-  return res
-}
-
 export function mediaKeyToQuery(key: string) {
-  return cachedMediaKeyToQuery[key] || mediaObjectToString(mediaQueryConfig[key], key)
+  return (
+    cachedMediaKeyToQuery[key] ||
+    (cachedMediaKeyToQuery[key] = mediaObjectToString(mediaQueryConfig[key]))
+  )
 }
 
 export function mediaKeyMatch(

package/src/hooks/useProps.tsx

@@ -9,7 +9,8 @@ import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '
 import type { ViewProps, ViewStyle } from '../views/View'
 import { View } from '../views/View'
 import { useComponentState } from './useComponentState'
-import { mediaState, useMedia } from './useMedia'
+import { mediaState } from '../helpers/mediaState'
+import { useMedia } from './useMedia'
 import { useThemeWithState } from './useTheme'
 
 type UsePropsOptions = Pick<

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

@@ -40,9 +40,12 @@ export const forceUpdateThemes = () => {
 
 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,11 +60,19 @@ export const useThemeState = (
   keys: MutableRefObject<Set<string> | null>,
   schemeKeys?: MutableRefObject<Set<string> | null>
 ): ThemeState => {
+  'use no memo'
+
   const { disable } = props
   const parentId = useContext(ThemeStateContext)
 
   if (!parentId && !isRoot) {
-    throw new Error(MISSING_THEME_MESSAGE)
+    throw new Error(
+      process.env.NODE_ENV === 'development'
+        ? `${MISSING_THEME_MESSAGE}
+
+Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? ` (component: ${props.componentName})` : ''}, but no parent theme context was found (parentId: ${parentId}).`
+        : MISSING_THEME_MESSAGE
+    )
   }
 
   if (disable) {
@@ -78,7 +89,7 @@ export const useThemeState = (
   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)
@@ -101,6 +112,17 @@ export const useThemeState = (
     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' &&
@@ -130,13 +152,6 @@ export const useThemeState = (
               ? 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,
@@ -176,8 +191,12 @@ export const useThemeState = (
       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
@@ -258,6 +277,9 @@ const getNextState = (
   }
 
   if (isSameAsParent) {
+    if (!shouldRerender && lastState && lastState.name === parentState!.name) {
+      return [false, lastState]
+    }
     return [shouldRerender, { ...parentState, isNew: false }]
   }
 
@@ -265,7 +287,13 @@ const getNextState = (
     const next = lastState ?? parentState
 
     if (!next) {
-      throw new Error(MISSING_THEME_MESSAGE)
+      throw new Error(
+        process.env.NODE_ENV === 'development'
+          ? `${MISSING_THEME_MESSAGE}
+
+Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? ` (component: ${props.componentName})` : ''}, but no theme state was resolved (parentId: ${parentId}, id: ${id}).`
+          : MISSING_THEME_MESSAGE
+      )
     }
 
     if (shouldRerender) {
@@ -372,6 +400,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) {
@@ -381,7 +419,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
@@ -390,6 +430,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
   }
 
@@ -502,9 +543,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'
@@ -73,19 +74,18 @@ export * from './hooks/useIsTouchDevice'
 export {
   _disableMediaTouch,
   configureMedia,
-  getMedia,
   mediaKeyMatch,
-  mediaObjectToString,
-  mediaQueryConfig,
-  mediaState,
   useMedia,
 } from './hooks/useMedia'
+export { mediaObjectToString } from './helpers/mediaObjectToString'
+export { getMedia, mediaQueryConfig, mediaState } from './helpers/mediaState'
 export * from './hooks/useProps'
 export * from './hooks/useTheme'
 export * from './hooks/useThemeName'
 export { forceUpdateThemes } from './hooks/useThemeState'
 
 export * from './views/Configuration'
+export * from './views/TamaguiRoot'
 export * from './views/FontLanguage'
 export * from './views/Slot'
 export * from './views/TamaguiProvider'

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]>)
         }
       : {}