@tamagui/core 1.0.2 → 1.0.4

package/src/config.ts

@@ -18,7 +18,7 @@ export const setConfigFont = (name: string, font: any, fontParsed: any) => {
 export const getConfig = () => {
   if (!conf) {
     throw new Error(
-      process.env.NODE_ENV === 'development'
+      process.env.NODE_ENV !== 'production'
         ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`
         : 'Err0'
     )

package/src/createComponent.tsx

@@ -41,7 +41,7 @@ import { useShallowSetState } from './helpers/useShallowSetState'
 import { measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
-import { getThemeIsNewTheme, getThemeManager, useTheme } from './hooks/useTheme'
+import { useThemeWithState } from './hooks/useTheme'
 import {
   DebugProp,
   SpaceDirection,
@@ -60,7 +60,7 @@ import {
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
-import { useThemeManagerContext } from './views/Theme'
+import { useThemedChildren } from './views/Theme'
 
 // let t
 // import { timer } from '@tamagui/timer'
@@ -196,9 +196,8 @@ export function createComponent<
     const stateRef = useRef(
       undefined as any as {
         hasAnimated?: boolean
-        hasThemeInversed?: boolean
-        hasProvidedThemeManager?: boolean
-        themeShouldReset?: boolean
+        themeShallow?: boolean
+        didAccessThemeVariableValue?: boolean
       }
     )
     stateRef.current ??= {}
@@ -233,19 +232,13 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development') {
       if (debugProp) {
-        const name = `${
-          componentName ||
-          Component?.displayName ||
-          Component?.name ||
-          '[Unnamed Component]'
-        }`
+        // prettier-ignore
+        const name = `${componentName || Component?.displayName || Component?.name || '[Unnamed Component]'}`
         const type = isReactNative ? '(rnw)' : ''
         const dataIs = propsIn['data-is'] || ''
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
-        // eslint-disable-next-line no-console
         console.group(`%c ${banner}`, 'background: yellow;')
         if (!isServer) {
-          // eslint-disable-next-line no-console
           console.log('state', state)
         }
       }
@@ -258,17 +251,16 @@ export function createComponent<
     const shouldForcePseudo = !!propsIn.forceStyle
     const noClassNames = shouldAvoidClasses || shouldForcePseudo
 
-    const theme = useTheme({
+    const themeState = useThemeWithState({
       name: props.theme,
       componentName,
       reset: props.reset,
       inverse: props.themeInverse,
-      // @ts-expect-error internal use only
+      // @ts-expect-error
       disable: props['data-themeable'],
       debug: props.debug,
-    })
-    const themeManager = getThemeManager(theme)
-    const themeIsNew = getThemeIsNewTheme(theme)
+      shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue,
+    })!
 
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
@@ -296,7 +288,8 @@ export function createComponent<
     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
+      stateRef,
+      debugProp ? { props, staticConfig } : null
     )
 
     setDidGetVariableValue(false)
@@ -304,7 +297,7 @@ export function createComponent<
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
-      theme,
+      themeState.theme,
       {
         ...state,
         mediaState,
@@ -321,14 +314,17 @@ export function createComponent<
     )
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
-    const shouldListenForMediaChanges =
+    // array = space media breakpoints
+    const isMediaSpaced = Array.isArray(splitStyles.hasMedia)
+    const shouldListenForMedia =
       didGetVariableValue() ||
-      splitStyles.hasMedia === 'space' ||
-      (noClassNames === true && splitStyles.hasMedia)
+      isMediaSpaced ||
+      (noClassNames && splitStyles.hasMedia === true)
 
-    if (shouldListenForMediaChanges) {
-      setMediaShouldUpdate(stateRef, shouldListenForMediaChanges)
-    }
+    setMediaShouldUpdate(stateRef, {
+      enabled: shouldListenForMedia,
+      keys: noClassNames && isMediaSpaced ? (splitStyles.hasMedia as any) : null,
+    })
 
     const hostRef = useServerRef<TamaguiElement>(null)
 
@@ -337,37 +333,27 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development') {
       if (!process.env.TAMAGUI_TARGET) {
-        // eslint-disable-next-line no-console
         console.error(
           `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
         )
       }
 
       if (debugProp) {
-        // eslint-disable-next-line no-console
         console.groupCollapsed('props')
-        // eslint-disable-next-line no-console
-        console.log(
-          'props in',
-          propsIn,
-          'mapped to',
-          props,
-          'in order',
-          Object.keys(props)
-        )
-        // eslint-disable-next-line no-console
+        // prettier-ignore
+        console.log('props in', propsIn, 'mapped to', props, 'in order', Object.keys(props))
         console.log('splitStyles', splitStyles)
         // eslint-disable-next-line no-console
-        console.log('shouldListenForMediaChanges', shouldListenForMediaChanges)
+        console.log('shouldListenForMedia', shouldListenForMedia)
         // eslint-disable-next-line no-console
         console.log('className', Object.values(splitStyles.classNames))
         if (isClient) {
-          // eslint-disable-next-line no-console
           console.log('ref', hostRef, '(click to view)')
         }
-        // eslint-disable-next-line no-console
         console.groupEnd()
         if (debugProp === 'break') {
+          // rome-ignore lint/suspicious/noDebugger: ok
+          debugger
         }
       }
     }
@@ -375,7 +361,6 @@ export function createComponent<
     const {
       viewProps: viewPropsIn,
       pseudos,
-      medias,
       style: splitStylesStyle,
       classNames,
       space,
@@ -392,7 +377,7 @@ export function createComponent<
         style: splitStylesStyle,
         presence,
         state,
-        pseudos,
+        pseudos: pseudos || null,
         onDidAnimate: props.onDidAnimate,
         hostRef,
         staticConfig,
@@ -559,7 +544,6 @@ export function createComponent<
       Children.toArray(props.children).forEach((item) => {
         // allow newlines because why not its annoying with mdx
         if (typeof item === 'string' && item !== '\n') {
-          // eslint-disable-next-line no-console
           console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
           )
@@ -602,10 +586,9 @@ export function createComponent<
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
         ...(animationStyles ?? splitStylesStyle),
-        ...medias,
       }
     } else {
-      styles = [animationStyles ?? splitStylesStyle, medias]
+      styles = [animationStyles ?? splitStylesStyle]
 
       // ugly but for now...
       if (shouldForcePseudo) {
@@ -630,7 +613,6 @@ export function createComponent<
         : '',
       componentName ? componentClassName : '',
       fontFamilyClassName,
-      themeIsNew ? theme.className : '',
       classNames ? Object.values(classNames).join(' ') : '',
     ]
 
@@ -695,12 +677,8 @@ export function createComponent<
     }
 
     const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
-    const attachPress = !!(
-      runtimePressStyle ||
-      onPress ||
-      onPressOut ||
-      onPressIn ||
-      onClick
+    const attachPress = Boolean(
+      runtimePressStyle || onPress || onPressOut || onPressIn || onClick
     )
     const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
     const isHoverable =
@@ -711,25 +689,15 @@ export function createComponent<
 
     // check presence rather than value to prevent reparenting bugs
     // allows for onPress={x ? function : undefined} without re-ordering dom
-    const shouldAttach = asChild
-      ? false
-      : Boolean(
-          attachPress ||
-            isHoverable ||
-            'pressStyle' in props ||
-            'onPress' in props ||
-            'onPressIn' in props ||
-            'onPressOut' in props ||
-            (isWeb &&
-              ('hoverStyle' in props ||
-                'onHoverIn' in props ||
-                'onHoverOut' in props ||
-                'onMouseEnter' in props ||
-                'onMouseLeave' in props))
-        )
+    const shouldAttach = Boolean(
+      attachPress ||
+        isHoverable ||
+        (noClassNames && 'pressStyle' in props) ||
+        (isWeb && noClassNames && 'hoverStyle' in props)
+    )
 
     const events =
-      shouldAttach && !isRSC && !isDisabled
+      shouldAttach && !isRSC && !isDisabled && !asChild
         ? {
             onPressOut: attachPress
               ? (e) => {
@@ -811,46 +779,10 @@ export function createComponent<
           }
         : null
 
-    const themeShouldReset = Boolean(themeShallow && themeManager && themeIsNew)
-    const shouldProvideThemeManager = themeShouldReset || (themeManager && themeIsNew)
-
-    // memoize to avoid re-parenting
-    if (shouldProvideThemeManager) {
-      stateRef.current.hasProvidedThemeManager = true
-    }
-    if (themeShouldReset) {
-      stateRef.current.themeShouldReset = true
-    }
-
-    const innerContent = useThemeManagerContext(
-      spacedChildren({
-        separator,
-        children,
-        space,
-        direction: props.spaceDirection || 'both',
-        isZStack,
-      }),
-      // only set context if changed theme
-      stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
-      stateRef.current.themeShouldReset
-    )
-
-    let content = !children || asChild ? children : innerContent
-
-    if (asChild) {
-      elementType = Slot
-      viewProps = {
-        ...viewProps,
-        onPress,
-        onPressIn,
-        onPressOut,
-      }
-    }
-
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!pseudos.focusStyle
+      const attachFocus = !!pseudos?.focusStyle
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -873,8 +805,38 @@ export function createComponent<
       }
     }
 
+    const shouldReset = !!(themeShallow && themeState.isNewTheme)
+    if (shouldReset) {
+      stateRef.current.themeShallow = true
+    }
+
+    let content =
+      !children || asChild
+        ? children
+        : spacedChildren({
+            separator,
+            children,
+            space,
+            direction: props.spaceDirection || 'both',
+            isZStack,
+          })
+
+    if (asChild) {
+      elementType = Slot
+      viewProps = {
+        ...viewProps,
+        onPress,
+        onPressIn,
+        onPressOut,
+      }
+    }
+
     content = createElement(elementType, viewProps, content)
 
+    content = useThemedChildren(themeState, content, {
+      shallow: stateRef.current.themeShallow,
+    })
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
         content = (
@@ -899,57 +861,16 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && process.env.DEBUG !== 'tamagui') {
       if (debugProp) {
         const element = typeof elementType === 'string' ? elementType : 'Component'
-        // eslint-disable-next-line no-console
         console.groupCollapsed(`render <${element} /> with props`, viewProps)
         for (const key in viewProps) {
-          // eslint-disable-next-line no-console
           console.log(key, viewProps[key])
         }
-        // eslint-disable-next-line no-console
         console.log('children', content)
-        // eslint-disable-next-line no-console
         console.groupEnd()
         if (typeof window !== 'undefined') {
-          // eslint-disable-next-line no-console
-          console.log({
-            state,
-            shouldProvideThemeManager,
-            isAnimated,
-            isAnimatedReactNativeWeb,
-            tamaguiDefaultProps,
-            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,
-            ...(typeof window !== 'undefined'
-              ? {
-                  theme,
-                  themeClassName: theme.className,
-                  staticConfig,
-                  tamaguiConfig,
-                  events,
-                  shouldAvoidClasses,
-                  shouldForcePseudo,
-                  classNames: Object.fromEntries(
-                    Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])
-                  ),
-                }
-              : null),
-          })
+          // prettier-ignore
+          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, 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, classNamesFull: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) })
         }
-        // eslint-disable-next-line no-console
         console.groupEnd()
       }
     }
@@ -989,7 +910,6 @@ export function createComponent<
         initialTheme = proxyThemeVariables(next)
         if (process.env.NODE_ENV === 'development') {
           if (!initialTheme) {
-            // eslint-disable-next-line no-console
             console.log('Warning: Missing theme')
           }
         }
@@ -1052,7 +972,6 @@ export function createComponent<
     // add debug logs
     if (process.env.NODE_ENV === 'development' && debug) {
       if (process.env.IS_STATIC !== 'is_static') {
-        // eslint-disable-next-line no-console
         console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
           staticConfig,
           tamaguiDefaultProps,
@@ -1124,6 +1043,7 @@ export const Spacer = createComponent<SpacerProps>({
     // avoid nesting issues
     tag: 'span',
     size: true,
+    pointerEvents: 'none',
   },
 
   variants: {

package/src/createTamagui.ts

@@ -1,7 +1,8 @@
 import { isRSC, isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig } from './config'
-import { createVariables } from './createVariables'
+import { createVariables, tokensKeysOrdered } from './createVariables'
+import { startClearStyleCacheInterval } from './helpers/getStylesAtomic'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
   getAllRules,
@@ -48,6 +49,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   scanAllSheets()
   listenForSheetChanges()
+  startClearStyleCacheInterval()
 
   const fontTokens = Object.fromEntries(
     Object.entries(configIn.fonts!).map(([k, v]) => {
@@ -188,10 +190,11 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   // faster $lookups
   const tokensParsed: any = Object.fromEntries(
-    Object.entries(configIn.tokens).map(([k, v]) => [
-      k,
-      Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v])),
-    ])
+    Object.entries(configIn.tokens).map(([k, v]) => {
+      const val = Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v]))
+      tokensKeysOrdered.set(val, tokensKeysOrdered.get(v))
+      return [k, val]
+    })
   )
 
   const shorthands = configIn.shorthands || {}

package/src/createVariable.ts

@@ -33,12 +33,12 @@ export const createVariable = <A extends string | number = any>(props: VariableI
   }
 }
 
+// could do weakmap cache
 export function variableToString(vrble?: any, getValue = false) {
   if (isVariable(vrble)) {
     if (!getValue && isWeb && vrble.variable) {
       return vrble.variable
     }
-    setDidGetVariableValue(true)
     return `${vrble.val}`
   }
   return `${vrble || ''}`
@@ -49,6 +49,7 @@ export function isVariable(v: Variable | any): v is Variable {
 }
 
 export function getVariable(nameOrVariable: Variable | string) {
+  setDidGetVariableValue(true)
   if (isVariable(nameOrVariable)) {
     return variableToString(nameOrVariable)
   }

package/src/createVariables.ts

@@ -14,6 +14,8 @@ export type DeepVariableObject<A extends DeepTokenObject> = {
     : never
 }
 
+export const tokensKeysOrdered = new WeakMap()
+
 export const createVariables = <A extends DeepTokenObject>(
   tokens: A,
   parentPath = '',
@@ -21,9 +23,14 @@ export const createVariables = <A extends DeepTokenObject>(
 ): DeepVariableObject<A> => {
   const res: any = {}
   let i = 0
-  for (const key in tokens) {
+  for (let key in tokens) {
     i++
     const val = tokens[key]
+    // always remove $ prefix
+    if (key[0] === '$') {
+      // @ts-ignore
+      key = key.slice(1)
+    }
     if (isVariable(val)) {
       res[key] = val
       continue
@@ -38,5 +45,11 @@ export const createVariables = <A extends DeepTokenObject>(
     }
     res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
   }
+
+  // ordering for relative sizing for now just size/space
+  if (parentPath === 'size' || parentPath === 'space') {
+    tokensKeysOrdered.set(res, Object.keys(tokens))
+  }
+
   return res
 }

package/src/helpers/ThemeManager.tsx

@@ -1,4 +1,4 @@
-import { getThemes } from '../config'
+import { getThemes, getTokens } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
 import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
 import { ThemeParsed, ThemeProps } from '../types'
@@ -39,7 +39,13 @@ export class ThemeManager {
       this.updateState(props, false)
       return
     }
-    if (!parentManager) throw `❌`
+    if (!parentManager) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.trace()
+        throw new Error(`No parent manager given`)
+      }
+      throw `❌`
+    }
     // copy over listeners
     this.themeListeners = parentManager.themeListeners
 
@@ -125,6 +131,7 @@ export class ThemeManager {
 
   // gets value going up to parents
   getValue(key: string, state?: ThemeManagerState) {
+    if (!key) return
     let theme = (state || this.state).theme
     let manager = this as ThemeManager | null
     while (theme && manager) {
@@ -134,10 +141,13 @@ export class ThemeManager {
       manager = manager.parentManager
       theme = manager?.state.theme
     }
+    const tokens = getTokens()
+    if (key in tokens.color) {
+      return tokens.color[key]
+    }
   }
 
   notify() {
-    console.log('notify', this.themeListeners.size, this.themeListeners)
     this.themeListeners.forEach((cb) => cb(this.state.name, this))
   }