@tamagui/web 1.72.2 → 1.73.0

package/src/createComponent.tsx

@@ -43,6 +43,7 @@ import {
   DisposeFn,
   GroupState,
   LayoutEvent,
+  SizeTokens,
   SpaceDirection,
   SpaceValue,
   SpacerProps,
@@ -570,11 +571,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) 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
-      stateRef
-    )
+    const mediaState = useMedia(stateRef, componentContext)
 
     if (process.env.NODE_ENV === 'development' && time) time`media`
 
@@ -603,7 +600,7 @@ export function createComponent<
       props,
       staticConfig,
       theme,
-      themeState.state.name,
+      themeState?.state?.name || '',
       state,
       styleProps,
       null,
@@ -697,7 +694,7 @@ export function createComponent<
         presence,
         componentState: state,
         styleProps,
-        theme: themeState.state.theme!,
+        theme: themeState.state?.theme!,
         pseudos: pseudos || null,
         hostRef,
         staticConfig,
@@ -1349,6 +1346,17 @@ export function Unspaced(props: { children?: any }) {
 }
 Unspaced['isUnspaced'] = true
 
+const getSpacerSize = (size: SizeTokens | number | boolean, { tokens }) => {
+  size = size === true ? '$true' : size
+  const sizePx = tokens.space[size as any] ?? size
+  return {
+    width: sizePx,
+    height: sizePx,
+    minWidth: sizePx,
+    minHeight: sizePx,
+  }
+}
+
 // dont used styled() here to avoid circular deps
 // keep inline to avoid circular deps
 // @ts-expect-error we override
@@ -1368,16 +1376,7 @@ export const Spacer = createComponent<SpacerProps>({
 
   variants: {
     size: {
-      '...size': (size, { tokens }) => {
-        size = size === true ? '$true' : size
-        const sizePx = tokens.space[size] ?? size
-        return {
-          width: sizePx,
-          height: sizePx,
-          minWidth: sizePx,
-          minHeight: sizePx,
-        }
-      },
+      '...': getSpacerSize,
     },
 
     flex: {

package/src/createTamagui.ts

@@ -2,7 +2,7 @@ import { isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig, setTokens } from './config'
 import { Variable } from './createVariable'
-import { createVariables } from './createVariables'
+import { DeepVariableObject, createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
   getAllRules,
@@ -19,6 +19,7 @@ import {
   CreateTamaguiProps,
   DedupedTheme,
   DedupedThemes,
+  GenericFont,
   GetCSS,
   InferTamaguiConfig,
   TamaguiInternalConfig,
@@ -38,62 +39,63 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     return configIn as any
   }
 
-  if (process.env.NODE_ENV === 'development') {
-    if (!configIn.tokens) {
-      throw new Error('Must define tokens')
-    }
-    if (!configIn.themes) {
-      throw new Error('Must define themes')
-    }
-    if (!configIn.fonts) {
-      throw new Error('Must define fonts')
-    }
-  }
-
   // ensure variables
-  const tokens = createVariables(configIn.tokens)
-
-  // faster lookups
   const tokensParsed: TokensParsed = {} as any
-  const tokensMerged: TokensMerged = {} as any
-  for (const cat in tokens) {
-    tokensParsed[cat] = {}
-    tokensMerged[cat] = {}
-    const tokenCat = tokens[cat]
-    for (const key in tokenCat) {
-      const val = tokenCat[key]
-      const prefixedKey = `$${key}`
-      tokensParsed[cat][prefixedKey] = val as any
-      tokensMerged[cat][prefixedKey] = val as any
-      tokensMerged[cat][key] = val as any
+  const tokens = createVariables(configIn.tokens || {})
+
+  if (configIn.tokens) {
+    // faster lookups
+    const tokensMerged: TokensMerged = {} as any
+    for (const cat in tokens) {
+      tokensParsed[cat] = {}
+      tokensMerged[cat] = {}
+      const tokenCat = tokens[cat]
+      for (const key in tokenCat) {
+        const val = tokenCat[key]
+        const prefixedKey = `$${key}`
+        tokensParsed[cat][prefixedKey] = val as any
+        tokensMerged[cat][prefixedKey] = val as any
+        tokensMerged[cat][key] = val as any
+      }
     }
+    setTokens(tokensMerged)
   }
-  setTokens(tokensMerged)
 
-  const noThemes = Object.keys(configIn.themes).length === 0
-  const foundThemes = scanAllSheets(noThemes, tokensParsed)
-  listenForSheetChanges()
+  let foundThemes: DedupedThemes | undefined
+  if (configIn.themes) {
+    const noThemes = Object.keys(configIn.themes).length === 0
+    foundThemes = scanAllSheets(noThemes, tokensParsed)
+  }
 
-  const fontTokens = Object.fromEntries(
-    Object.entries(configIn.fonts!).map(([k, v]) => {
-      return [k, createVariables(v, 'f', true)]
-    })
-  )
+  listenForSheetChanges()
 
   let fontSizeTokens: Set<string> | null = null
-
-  const fontsParsed = (() => {
-    const res = {} as typeof fontTokens
-    for (const familyName in fontTokens) {
-      const font = fontTokens[familyName]
-      const fontParsed = parseFont(font)
-      res[`$${familyName}`] = fontParsed
-      if (!fontSizeTokens && fontParsed.size) {
-        fontSizeTokens = new Set(Object.keys(fontParsed.size))
+  let fontsParsed:
+    | {
+        [k: string]: DeepVariableObject<GenericFont<string>>
       }
-    }
-    return res!
-  })()
+    | undefined
+
+  if (configIn.fonts) {
+    const fontTokens = Object.fromEntries(
+      Object.entries(configIn.fonts).map(([k, v]) => {
+        return [k, createVariables(v, 'f', true)]
+      })
+    )
+
+    fontsParsed = (() => {
+      const res = {} as typeof fontTokens
+      for (const familyName in fontTokens) {
+        const font = fontTokens[familyName]
+        const fontParsed = parseFont(font)
+        res[`$${familyName}`] = fontParsed
+        if (!fontSizeTokens && fontParsed.size) {
+          fontSizeTokens = new Set(Object.keys(fontParsed.size))
+        }
+      }
+      return res!
+    })()
+  }
 
   const specificTokens = {}
 
@@ -238,14 +240,14 @@ ${runtimeStyles}`
   let defaultFontName =
     configIn.defaultFont ||
     // uses font named "body" if present for compat
-    ('body' in configIn.fonts ? 'body' : '')
+    (configIn.fonts && ('body' in configIn.fonts ? 'body' : ''))
 
   if (!defaultFontName && configIn.fonts) {
     // defaults to the first font to make life easier
     defaultFontName = Object.keys(configIn.fonts)[0]
   }
 
-  if (defaultFontName[0] === '$') {
+  if (defaultFontName?.[0] === '$') {
     defaultFontName = defaultFontName.slice(1)
   }
 
@@ -253,6 +255,7 @@ ${runtimeStyles}`
   const defaultFont = `$${defaultFontName}`
 
   const config: TamaguiInternalConfig = {
+    fonts: {},
     groupNames: [],
     settings: {},
     onlyAllowShorthands: false,
@@ -267,7 +270,7 @@ ${runtimeStyles}`
       ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
       : {},
     themes: themeConfig.themes as any,
-    fontsParsed,
+    fontsParsed: fontsParsed || {},
     themeConfig,
     tokensParsed: tokensParsed as any,
     parsed: true,

package/src/helpers/getThemeCSSRules.ts

@@ -23,7 +23,8 @@ export function getThemeCSSRules(props: {
     const { config, themeName, theme, names } = props
 
     // special case for SSR
-    const hasDarkLight = 'light' in config.themes || 'dark' in config.themes
+    const hasDarkLight =
+      config.themes && ('light' in config.themes || 'dark' in config.themes)
     const CNP = `.${THEME_CLASSNAME_PREFIX}`
     let vars = ''
 

package/src/helpers/propMapper.ts

@@ -101,7 +101,7 @@ const resolveVariants: StyleResolver = (
   const { variants } = staticConfig
   if (!variants) return
 
-  let variantValue = getVariantDefinition(variants[key], key, value, conf)
+  let variantValue = getVariantDefinition(variants[key], value, conf)
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     console.groupCollapsed(`♦️♦️♦️ resolve variant ${key}`)
@@ -316,30 +316,28 @@ const tokenCats = ['size', 'color', 'radius', 'space', 'zIndex'].map((name) => (
 }))
 
 // goes through specificity finding best matching variant function
-function getVariantDefinition(
-  variant: any,
-  key: string,
-  value: any,
-  conf: TamaguiInternalConfig
-) {
+function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalConfig) {
   if (typeof variant === 'function') {
     return variant
   }
-  if (variant[value]) {
-    return variant[value]
+  const exact = variant[value]
+  if (exact) {
+    return exact
   }
-  const { tokensParsed } = conf
-  for (const { name, spreadName } of tokenCats) {
-    if (spreadName in variant && value in tokensParsed[name]) {
-      return variant[spreadName]
+  if (value != null) {
+    const { tokensParsed } = conf
+    for (const { name, spreadName } of tokenCats) {
+      if (spreadName in variant && value in tokensParsed[name]) {
+        return variant[spreadName]
+      }
+    }
+    const fontSizeVariant = variant['...fontSize']
+    if (fontSizeVariant && conf.fontSizeTokens.has(value)) {
+      return fontSizeVariant
     }
-  }
-  const fontSizeVariant = variant['...fontSize']
-  if (fontSizeVariant && conf.fontSizeTokens.has(value)) {
-    return fontSizeVariant
   }
   // fallback to catch all | size
-  return variant[`:${typeof value}`] || variant['...'] || variant['...size']
+  return variant[`:${typeof value}`] || variant['...']
 }
 
 const fontShorthand = {

package/src/hooks/useConfiguration.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+
+import { getConfig } from '../config'
+import { ComponentContext } from '../contexts/ComponentContext'
+
+export const useConfiguration = () => {
+  const { groups, animationDriver, ...restComponentConfig } = useContext(ComponentContext)
+  const { animations, ...restConfig } = getConfig()
+  return {
+    ...restConfig,
+    ...restComponentConfig,
+    animationDriver: animationDriver ?? getConfig().animations,
+  }
+}

package/src/hooks/useDisableSSR.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+
+import { getConfig } from '../config'
+import { ComponentContext } from '../contexts/ComponentContext'
+import { ComponentContextI } from '../types'
+
+export function useDisableSSR() {
+  const componentContext = useContext(ComponentContext)
+  return getDisableSSR(componentContext)
+}
+
+export function getDisableSSR(componentContext: ComponentContextI) {
+  return componentContext.disableSSR ?? getConfig().disableSSR
+}

package/src/hooks/useMedia.tsx

@@ -1,11 +1,13 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useRef, useSyncExternalStore } from 'react'
+import { useContext, useRef, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
+import { ComponentContext } from '../contexts/ComponentContext'
 import { createProxy } from '../helpers/createProxy'
 import { matchMedia } from '../helpers/matchMedia'
 import { pseudoDescriptors } from '../helpers/pseudoDescriptors'
 import type {
+  ComponentContextI,
   MediaQueries,
   MediaQueryKey,
   MediaQueryObject,
@@ -13,6 +15,8 @@ import type {
   TamaguiInternalConfig,
   UseMediaState,
 } from '../types'
+import { useConfiguration } from './useConfiguration'
+import { getDisableSSR, useDisableSSR } from './useDisableSSR'
 
 export let mediaState: MediaQueryState =
   // development only safeguard
@@ -50,9 +54,6 @@ export const isMediaKey = (key: string) =>
 
 // for SSR capture it at time of startup
 let initState: MediaQueryState
-export const getInitialMediaState = () => {
-  return (getConfig().disableSSR ? mediaState : initState) || {}
-}
 
 // media always above pseudos
 const defaultMediaImportance = Object.keys(pseudoDescriptors).length
@@ -191,14 +192,17 @@ function subscribe(subscriber: any) {
   return () => listeners.delete(subscriber)
 }
 
-export function useMedia(uid?: any): UseMediaState {
+export function useMedia(uid?: any, componentContext?: ComponentContextI): UseMediaState {
   const internal = useRef<UseMediaInternalState | undefined>()
+  // performance boost to avoid using context twice
+  const disableSSR = componentContext ? getDisableSSR(componentContext) : useDisableSSR()
+  const initialState = (disableSSR ? mediaState : initState) || {}
 
   const state = useSyncExternalStore<MediaQueryState>(
     subscribe,
     () => {
       if (!internal.current) {
-        return initState
+        return initialState
       }
 
       const { touched, prev } = internal.current
@@ -223,13 +227,13 @@ export function useMedia(uid?: any): UseMediaState {
 
       return mediaState
     },
-    () => initState
+    () => initialState
   )
 
   return new Proxy(state, {
     get(_, key) {
       if (typeof key === 'string') {
-        internal.current ||= { prev: initState }
+        internal.current ||= { prev: initialState }
         internal.current.touched ||= new Set()
         internal.current.touched.add(key)
       }

package/src/hooks/useProps.tsx

@@ -76,7 +76,7 @@ export function usePropsAndStyle<A extends Object>(
     props,
     staticConfig,
     theme,
-    themeState.state.name,
+    themeState.state?.name || '',
     defaultComponentStateMounted,
     {
       isAnimated: false,

package/src/hooks/useTheme.tsx

@@ -21,8 +21,8 @@ import type {
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 
 export type ChangedThemeResponse = {
-  state: ThemeManagerState
-  themeManager: ThemeManager
+  state?: ThemeManagerState
+  themeManager?: ThemeManager | null
   isNewTheme: boolean
   mounted?: boolean
 }
@@ -90,22 +90,23 @@ export const useThemeWithState = (
   )
 
   const { themeManager, state } = changedThemeState
-  const { theme, name, className } = state
 
-  if (!theme) {
+  if (!state?.theme) {
     if (process.env.NODE_ENV === 'development') {
-      throw new Error(
-        `No theme found given props ${JSON.stringify(
-          props
-        )}. Themes given to tamagui are: ${Object.keys(getConfig().themes)}`
-      )
+      if (process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== '1') {
+        console.warn(
+          `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
+            props
+          )}).\n\nIf this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
+        )
+      }
     }
-    throw `❌ 1`
   }
 
   const themeProxied = useMemo(() => {
-    return getThemeProxied(theme, themeManager, keys.current, props.debug)
-  }, [theme, name, className, themeManager])
+    if (!themeManager || !state?.theme) return {}
+    return getThemeProxied(state.theme, themeManager, keys.current, props.debug)
+  }, [state, themeManager])
 
   if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
     console.groupCollapsed('  🔹 useTheme =>', name)
@@ -184,7 +185,7 @@ export const activeThemeManagers = new Set<ThemeManager>()
 
 export const useChangeThemeEffect = (
   props: ThemeProps,
-  root = false,
+  isRoot = false,
   keys?: string[],
   shouldUpdate?: () => boolean | undefined
 ): ChangedThemeResponse => {
@@ -195,11 +196,10 @@ export const useChangeThemeEffect = (
 
   const parentManager = useContext(ThemeManagerContext)
 
-  if (disable) {
-    if (!parentManager) throw `❌ 2`
+  if ((!isRoot && !parentManager) || disable) {
     return {
       isNewTheme: false,
-      state: parentManager.state,
+      state: parentManager?.state,
       themeManager: parentManager,
     }
   }
@@ -224,11 +224,11 @@ export const useChangeThemeEffect = (
   function getShouldUpdateTheme(
     manager = themeManager,
     nextState?: ThemeManagerState | null,
-    prevState: ThemeManagerState = state,
+    prevState: ThemeManagerState | undefined = state,
     forceShouldChange = false
   ) {
     const forceUpdate = shouldUpdate?.()
-    if (!forceShouldChange && forceUpdate === false) return
+    if (!manager || (!forceShouldChange && forceUpdate === false)) return
     const next = nextState || manager.getState(props, parentManager)
     if (forceShouldChange) return next
     if (!next) return
@@ -241,6 +241,8 @@ export const useChangeThemeEffect = (
   if (!isServer) {
     // listen for parent change + notify children change
     useLayoutEffect(() => {
+      if (!themeManager) return
+
       // SSR safe inverse (because server can't know prefers scheme)
       // could be done through fancy selectors like how we do prefers-media
       // but may be a bit of explosion of selectors
@@ -269,7 +271,6 @@ export const useChangeThemeEffect = (
         const doUpdate = force ?? Boolean(keys?.length || isNewTheme)
 
         if (process.env.NODE_ENV === 'development' && props.debug) {
-          
           // biome-ignore lint/suspicious/noConsoleLog: <explanation>
           console.log(` 🔸 onChange`, themeManager.id, {
             force,
@@ -278,7 +279,7 @@ export const useChangeThemeEffect = (
             name,
             manager,
             keys,
-          });
+          })
         }
         if (doUpdate) {
           setThemeState(createState)
@@ -313,12 +314,12 @@ export const useChangeThemeEffect = (
   }
 
   if (isInversingOnMount) {
-    if (!parentManager) throw '❌ 3'
     return {
       isNewTheme: false,
       themeManager: parentManager,
       state: {
-        ...parentManager.state,
+        name: '',
+        ...parentManager?.state,
         className: '',
       },
     }
@@ -342,7 +343,7 @@ export const useChangeThemeEffect = (
 
     if (hasThemeUpdatingProps) {
       const getNewThemeManager = () => {
-        return new ThemeManager(props, root ? 'root' : parentManager)
+        return new ThemeManager(props, isRoot ? 'root' : parentManager)
       }
 
       if (prev?.themeManager) {
@@ -388,7 +389,7 @@ export const useChangeThemeEffect = (
     const isNewTheme = Boolean(themeManager !== parentManager || props.inverse)
 
     // only inverse relies on this for ssr
-    const mounted = !props.inverse ? true : root || prev?.mounted
+    const mounted = !props.inverse ? true : isRoot || prev?.mounted
 
     if (!state) {
       if (isNewTheme) {
@@ -399,7 +400,7 @@ export const useChangeThemeEffect = (
       }
     }
 
-    if (!force && state.name === prev?.state.name) {
+    if (!force && state.name === prev?.state?.name) {
       return prev
     }
 

package/src/index.ts

@@ -31,7 +31,6 @@ export * from './contexts/ComponentContext'
 export * from './helpers/createStyledContext'
 export * from './helpers/expandStyles'
 export * from './helpers/propMapper'
-export * from './helpers/getAnimationDriver'
 export * from './helpers/getExpandedShorthands'
 export * from './helpers/getSplitStyles'
 export * from './helpers/getStylesAtomic'
@@ -60,9 +59,10 @@ export {
 } from './hooks/useMedia'
 export * from './hooks/useTheme'
 export * from './hooks/useThemeName'
-export * from './hooks/useAnimationDriver'
+export * from './hooks/useConfiguration'
 export * from './hooks/useIsTouchDevice'
 export * from './hooks/useProps'
+export * from './hooks/useConfiguration'
 
 export * from './views/Slot'
 export * from './views/Stack'
@@ -72,7 +72,7 @@ export * from './views/Theme'
 export * from './views/ThemeProvider'
 export * from './views/FontLanguage'
 export * from './views/TamaguiProvider'
-export * from './views/AnimationDriverProvider'
+export * from './views/Configuration'
 
 export * from '@tamagui/use-did-finish-ssr'
 export * from '@tamagui/use-event'

package/src/types.tsx

@@ -180,6 +180,7 @@ export type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<
 >
 
 export type ComponentContextI = {
+  disableSSR?: boolean
   inText: boolean
   language: LanguageContextType | null
   animationDriver: AnimationDriver | null
@@ -413,12 +414,12 @@ type ConfProps<
   H extends DefaultFontSetting = DefaultFontSetting,
   I extends GenericTamaguiSettings = GenericTamaguiSettings
 > = {
-  tokens: A
-  themes: B
+  tokens?: A
+  themes?: B
   shorthands?: C
   media?: D
   animations?: AnimationDriver<E>
-  fonts: F
+  fonts?: F
   onlyAllowShorthands?: G
   defaultFont?: H
   settings?: I
@@ -605,9 +606,9 @@ export type CreateTamaguiProps = {
   shorthands?: CreateShorthands
   media?: GenericTamaguiConfig['media']
   animations?: AnimationDriver<any>
-  fonts: GenericTamaguiConfig['fonts']
-  tokens: GenericTamaguiConfig['tokens']
-  themes: {
+  fonts?: GenericTamaguiConfig['fonts']
+  tokens?: GenericTamaguiConfig['tokens']
+  themes?: {
     [key: string]: {
       [key: string]: string | number | Variable
     }

package/src/views/Configuration.tsx

@@ -0,0 +1,11 @@
+import { ComponentContext } from '../contexts/ComponentContext'
+import type { AnimationDriver } from '../types'
+
+interface ConfigurationProps {
+  animationDriver?: AnimationDriver | null
+  children: React.ReactNode
+}
+
+export const Configuration = (props: ConfigurationProps) => {
+  return <ComponentContext.Provider {...props} />
+}