@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.221

package/src/addTheme.ts

@@ -5,27 +5,25 @@ import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
 import { ThemeDefinition, ThemeParsed } from './types'
 
-export function addTheme({
-  name: themeName,
-  theme: themeIn,
-  insertCSS,
-  update,
-}: {
+export function addTheme(props: {
   name: string
-  theme: ThemeDefinition
+  theme: Partial<Record<keyof ThemeDefinition, any>>
   insertCSS?: boolean
   update?: boolean
 }) {
   const config = getConfig()
+
   if (process.env.NODE_ENV === 'development') {
     if (!config) {
-      throw new Error(`Must run createTamagui once before loading theme`)
+      throw new Error(`No config`)
     }
-    if (!update && config.themes[themeName]) {
-      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`)
+    const theme = config.themes[props.name]
+    if (!props.update && theme) {
+      return { theme }
     }
   }
 
+  const { name: themeName, theme: themeIn, insertCSS } = props
   const theme = { ...themeIn } as ThemeParsed
   for (const key in theme) {
     ensureThemeVariable(theme, key)
@@ -45,7 +43,7 @@ export function addTheme({
         names: [themeName],
         theme,
       })
-      const id = `tamagui_theme_style_${themeName}`
+      const id = `t_theme_style_${themeName}`
       const existing = document.querySelector(`#${id}`)
       const style = document.createElement('style')
       style.id = id
@@ -60,7 +58,6 @@ export function addTheme({
   updateConfig('themes', { ...config.themes, [themeName]: themeProxied })
 
   // trigger updates in components
-
   return {
     theme: themeProxied,
     cssRules,

package/src/config.ts

@@ -17,8 +17,16 @@ export const setConfigFont = (name: string, font: any, fontParsed: any) => {
   Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })
 }
 
-export const getHasConfigured = () => !!conf
-export const getConfig = () => conf!
+export const getConfig = () => {
+  if (!conf) {
+    throw new Error(
+      process.env.NODE_ENV === 'development'
+        ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`
+        : `Err0`
+    )
+  }
+  return conf
+}
 export const getTokens = (prefixed?: boolean): Tokens =>
   prefixed ? conf!.tokensParsed : conf!.tokens
 

package/src/contexts/ButtonNestingContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const ButtonNestingContext = createContext(false)

package/src/createComponent.tsx

@@ -1,6 +1,5 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-/* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
   stylePropsTransform,
@@ -10,7 +9,6 @@ import {
 } from '@tamagui/helpers'
 import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
 import type { ViewStyle } from '@tamagui/types-react-native'
-import { useForceUpdate } from '@tamagui/use-force-update'
 import React, {
   Children,
   Fragment,
@@ -29,22 +27,22 @@ import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
+import { getRect } from './helpers/getRect'
 import { getSubStyle, useSplitStyles } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { mergeTransform } from './helpers/mergeTransform'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
-import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
+import { measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
-import { getThemeManager, useTheme } from './hooks/useTheme'
+import { getThemeIsNewTheme, getThemeManager, useTheme } from './hooks/useTheme'
 import {
   DebugProp,
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
-  SplitStyleState,
   StaticConfig,
   StaticConfigParsed,
   StylableComponent,
@@ -60,7 +58,18 @@ import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
 import { wrapThemeManagerContext } from './views/Theme'
 
-React['keep']
+// let t
+// import { timer } from '@tamagui/timer'
+// if (true || process.env.ANALYZE) {
+//   t = require().timer()
+//   setTimeout(() => {
+//     const out = t.print()
+//     if (isClient) {
+//       alert(out)
+//     }
+//   }, 2000)
+// }
+
 // this appears to fix expo / babel not picking this up sometimes? really odd
 process.env.TAMAGUI_TARGET
 
@@ -105,17 +114,6 @@ if (process.env.TAMAGUI_TARGET === 'native') {
   BaseView = native.View || native.default.View
 }
 
-// let t
-// if (process.env.ANALYZE) {
-//   const t = require('@tamagui/timer').timer()
-//   setTimeout(() => {
-//     const out = t.print()
-//     if (isClient) {
-//       alert(out)
-//     }
-//   }, 2000)
-// }
-
 export function createComponent<
   ComponentPropTypes extends Object = {},
   Ref = TamaguiElement,
@@ -131,7 +129,6 @@ export function createComponent<
   })()
 
   const defaultComponentClassName = `is_${staticConfig.componentName}`
-  const avoidClassesWhileAnimating = true
   let defaultNativeStyle: any
   let tamaguiDefaultProps: any
   let defaultTag: string | undefined
@@ -163,6 +160,9 @@ export function createComponent<
     /**
      * Component state for tracking animations, pseudos
      */
+    const animationsConfig = tamaguiConfig.animations
+    const useAnimations = animationsConfig?.useAnimations as UseAnimationHook | undefined
+    const avoidClassesWhileAnimating = animationsConfig.isReactNative
     const hasEnterStyle = !!props.enterStyle
     const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation))
     const states = useServerState<TamaguiComponentState>(
@@ -173,16 +173,38 @@ export function createComponent<
     const setState = states[1]
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
-    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
     // conditional but if ever true stays true
-    const hasEverAnimated = useRef(false)
+    // [animated, inversed]
+    const stateRef = useRef(
+      undefined as any as {
+        hasAnimated?: boolean
+        hasThemeInversed?: boolean
+        hasProvidedThemeManager?: boolean
+        themeShouldReset?: boolean
+      }
+    )
+    stateRef.current ??= {}
+
     const isAnimated = (() => {
       const next = !!(useAnimations && props.animation)
-      if (next && !hasEverAnimated.current) {
-        hasEverAnimated.current = true
+      if (next && !stateRef.current.hasAnimated) {
+        stateRef.current.hasAnimated = true
       }
-      return next || hasEverAnimated.current
+      return next || stateRef.current.hasAnimated
     })()
+
+    const usePresence = tamaguiConfig.animations?.usePresence
+    const presence = !isRSC && isAnimated ? usePresence() : null
+
+    // set enter/exit variants onto our new props object
+    if (isAnimated && presence) {
+      const presenceState = presence[2]
+      if (presenceState) {
+        if (presenceState.enterVariant) props[presenceState.enterVariant] = true
+        if (presenceState.exitVariant) props[presenceState.exitVariant] = true
+      }
+    }
+
     const isReactNative = Boolean(
       staticConfig.isReactNative || (isAnimated && tamaguiConfig.animations.isReactNative)
     )
@@ -200,14 +222,6 @@ export function createComponent<
         if (!isServer) {
           // eslint-disable-next-line no-console
           console.log(`state`, state)
-          // eslint-disable-next-line no-console
-          console.groupCollapsed('props')
-          // eslint-disable-next-line no-console
-          console.log(props)
-          // eslint-disable-next-line no-console
-          console.log('order', Object.keys(props))
-          // eslint-disable-next-line no-console
-          console.groupEnd()
         }
       }
     }
@@ -217,8 +231,17 @@ export function createComponent<
     const shouldForcePseudo = !!propsIn.forceStyle
     const noClassNames = shouldAvoidClasses || shouldForcePseudo
 
-    const forceUpdate = useForceUpdate()
-    const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames)
+    const theme = useTheme({
+      name: props.theme,
+      componentName,
+      reset: props.reset,
+      inverse: props.themeInverse,
+      // @ts-expect-error internal use only
+      disable: props['data-themeable'],
+      debug: props.debug,
+    })
+    const themeManager = getThemeManager(theme)
+    const themeIsNew = getThemeIsNewTheme(theme)
 
     const shouldSetMounted = needsMount && state.unmounted
     const setMounted = shouldSetMounted
@@ -258,6 +281,7 @@ export function createComponent<
 
     // time`setupStateConf`
 
+    const isExiting = presence?.[0] === false
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
@@ -268,6 +292,7 @@ export function createComponent<
         dynamicStylesInline: noClassNames,
         hasTextAncestor,
         resolveVariablesAs: 'value',
+        isExiting,
       },
       null,
       languageContext || undefined,
@@ -325,61 +350,16 @@ export function createComponent<
     // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
     let animationStyles: any
     if (!isRSC && isAnimated && useAnimations) {
-      const animations = useAnimations(propsWithAnimation, {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        style: splitStylesStyle,
+        presence,
         state,
         pseudos,
         onDidAnimate: props.onDidAnimate,
         hostRef,
         staticConfig,
-        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
-          // TODO this function can mostly be moved entirely inside getSplitStyles
-          // I think theres bugs in merge(), and we can remove that fn entirely then
-          // also i think we need to merge both the exitVariant AND psuedos.exitStyle right now it chooses one
-
-          // we have to merge such that transforms keys all exist
-          const animationStyle = { ...defaultNativeStyle, ...splitStylesStyle }
-
-          // allows for enter/exit variants on styled()
-          const enterStyle = isEntering
-            ? enterVariant && staticConfig.variants?.[enterVariant]['true']
-              ? getSubStyle(
-                  '',
-                  staticConfig.variants?.[enterVariant]['true'],
-                  staticConfig,
-                  theme,
-                  props,
-                  state,
-                  tamaguiConfig
-                )
-              : null
-            : null
-
-          const exitStyle = isExiting
-            ? exitVariant && staticConfig.variants?.[exitVariant]['true']
-              ? getSubStyle(
-                  '',
-                  staticConfig.variants?.[exitVariant]['true'],
-                  staticConfig,
-                  theme,
-                  props,
-                  state,
-                  tamaguiConfig
-                )
-              : pseudos.exitStyle
-            : null
-
-          if (isEntering && enterStyle) {
-            merge(animationStyle, enterStyle)
-          }
-          if (isExiting && exitStyle) {
-            merge(animationStyle, exitStyle)
-          }
-
-          return animationStyle
-        },
-        //, delay
       })
-
       if (animations) {
         animationStyles = animations.style
       }
@@ -625,7 +605,7 @@ export function createComponent<
     const classList = [
       componentName ? componentClassName : '',
       fontFamilyClassName,
-      theme.className,
+      themeIsNew ? theme.className : '',
       classNames ? Object.values(classNames).join(' ') : '',
     ]
     const className = classList.join(' ')
@@ -805,20 +785,22 @@ export function createComponent<
     // find space by media query
     if (state.mediaState && mediaKeys.length) {
       for (const key in state.mediaState) {
-        if (state.mediaState[key] && props[key] && props[key].space !== undefined) {
+        if (key in state.mediaState && key in props && props[key].space !== undefined) {
           space = props[key].space
         }
       }
     }
 
-    const themeManager = getThemeManager(theme)
+    const themeShouldReset = Boolean(themeShallow && themeManager && themeIsNew)
+    const shouldProvideThemeManager = themeShouldReset || (themeManager && themeIsNew)
 
-    const shouldSetChildrenThemeToParent = Boolean(
-      themeShallow && themeManager && themeManager.didChangeTheme
-    )
-
-    const shouldProvideThemeManager =
-      shouldSetChildrenThemeToParent || (themeManager && themeManager.didChangeTheme)
+    // memoize to avoid re-parenting
+    if (shouldProvideThemeManager) {
+      stateRef.current.hasProvidedThemeManager = true
+    }
+    if (themeShouldReset) {
+      stateRef.current.themeShouldReset = true
+    }
 
     const childEls =
       !children || asChild
@@ -832,8 +814,8 @@ export function createComponent<
               isZStack,
             }),
             // only set context if changed theme
-            shouldProvideThemeManager ? themeManager : undefined,
-            shouldSetChildrenThemeToParent
+            stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
+            stateRef.current.themeShouldReset
           )
 
     let content: any
@@ -1272,21 +1254,6 @@ function mergeConfigDefaultProps(
   return props
 }
 
-// TODO need to delete existing prop because of weirdness in how we do this
-// real solution is to handle all this in getSplitStyle and have animation drviers
-// return a useAnimationIsExiting() so we can pass that as part of state: { exiting: true }
-// then we can remove this function and the getStyle() altogether
-function merge(base: ViewStyle, next: ViewStyle) {
-  for (const key in next) {
-    const val = next[key]
-    if (key in stylePropsTransform) {
-      mergeTransform(base, key, val, true)
-    } else {
-      base[key] = val
-    }
-  }
-}
-
 // react native compat (web only)
 function usePlatformMethods(hostRef: RefObject<Element>) {
   useIsomorphicLayoutEffect(() => {
@@ -1328,3 +1295,45 @@ const dontComposePressabilityKeys = {
 function getMediaStateObject(obj: Object) {
   return Object.fromEntries(Object.entries(obj).flatMap(([k, v]) => (v ? [[`$${k}`, v]] : [])))
 }
+
+// function ensureBaseHasDefaults(
+//   base: ViewStyle,
+//   pseudos: Record<string, ViewStyle | null | undefined>
+// ) {
+//   const mergeIfNotExists = (key: string) => {
+//     if (!base.transform?.some((x) => key in x)) {
+//       mergeTransform(base, key, transformDefaults[key] || 0)
+//     }
+//   }
+
+//   for (const name in pseudos) {
+//     const pseudo = pseudos[name]
+//     for (const key in pseudo) {
+//       const val = pseudo[key]
+//       if (key in stylePropsTransform) {
+//         mergeIfNotExists(key)
+//       } else if (key === 'transform') {
+//         if (typeof val === 'string') continue
+//         for (const t of val) {
+//           mergeIfNotExists(Object.keys(t)[0])
+//         }
+//       } else {
+//         if (key in baseDefaults && !(key in base)) {
+//           base[key] = baseDefaults[key]
+//         }
+//       }
+//     }
+//   }
+// }
+
+const baseDefaults = {
+  opacity: 1,
+}
+
+const transformDefaults = {
+  opacity: 1,
+  scale: 1,
+  rotate: '0deg',
+  rotateY: '0deg',
+  rotateX: '0deg',
+}

package/src/createTamagui.ts

@@ -1,4 +1,4 @@
-import { isRSC, isWeb } from '@tamagui/constants'
+import { isClient, isRSC, isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig } from './config'
 import { createVariables } from './createVariables'
@@ -53,7 +53,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   const themeConfig = (() => {
     const themes = { ...configIn.themes }
-    let cssRuleSets: string[] = []
+    const cssRuleSets: string[] = []
 
     if (isWeb) {
       const declarations: string[] = []
@@ -140,10 +140,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
 
     // then, generate CSS from de-duped
+    let themeRuleSets: string[] = []
+
     if (isWeb || isRSC) {
       for (const themeName in dedupedThemes) {
-        cssRuleSets = [
-          ...cssRuleSets,
+        themeRuleSets = [
+          ...themeRuleSets,
           ...getThemeCSSRules({
             config: configIn,
             themeName,
@@ -159,14 +161,11 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
 
     tokensValueToVariable.clear()
-    Object.freeze(cssRuleSets)
-    const css = cssRuleSets.join('\n')
 
     return {
-      // could improve types but we do ensureThemeVariable so its accurate
       themes,
       cssRuleSets,
-      css,
+      themeRuleSets,
     }
   })()
 
@@ -179,6 +178,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   )
 
   const shorthands = configIn.shorthands || {}
+
   const config: TamaguiInternalConfig = {
     fontLanguages: [],
     animations: {} as any,
@@ -194,12 +194,14 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     tokensParsed,
     parsed: true,
-    getCSS: () => `
-.is_Text .is_Text {display:inline-flex;}
-._dsp_contents {display:contents;}
-${themeConfig.css}
-${getAllRules().join('\n')}
-`,
+    getCSS: (separator = '\n') => {
+      return `
+      .is_Text .is_Text {display:inline-flex;}
+      ._dsp_contents {display:contents;}
+      ${themeConfig.cssRuleSets.join(separator)}
+      ${themeConfig.themeRuleSets.join(separator)}
+      ${getAllRules().join(separator)}`
+    },
     // const tokens = [...getToken(tokens.size[0])]
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }

package/src/createTokens.test.ts

@@ -0,0 +1,29 @@
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import { expect, test } from 'vitest'
+
+import { createTokens } from './createTokens'
+
+test('snapshot', () => {
+  expect(createTokens(getDefaultTamaguiConfig().tokens)).toMatchSnapshot()
+})
+
+test('color name no dot', () => {
+  expect(
+    // @ts-ignore partial
+    createTokens({
+      color: {
+        'yellow.10': 'yellow',
+      },
+    })
+  ).toMatchObject({
+    color: {
+      'yellow.10': {
+        isVar: true,
+        key: 'yellow101a',
+        name: 'color-1',
+        val: 'yellow',
+        variable: '',
+      },
+    },
+  })
+})

package/src/createTokens.ts

@@ -4,7 +4,7 @@ import { CreateTokens } from './types'
 
 // tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
-  return createVariables(tokens as any) as any
+  return createVariables(tokens) as any
 }
 
 // verbose but gives us nice types...

package/src/createVariable.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest'
+
+import { createCSSVariable } from './createVariable'
+
+test('dots', () => {
+  expect(createCSSVariable('yellow.10')).toBe('var(--yellow101a)')
+})

package/src/createVariable.ts

@@ -8,7 +8,7 @@ import { getConfig } from './config'
  * Moving to objects for React Server Components support
  */
 
-const IS_VAR = '__isVar__'
+const IS_VAR = 'isVar'
 
 type VariableIn<A = any> = {
   val: A
@@ -23,25 +23,19 @@ export type Variable<A = any> = VariableIn<A> & {
 }
 
 export const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {
-  if (isVariable(props)) {
-    return props
-  }
+  if (isVariable(props)) return props
   return {
     [IS_VAR]: true,
-    // @ts-ignore
     ...props,
     variable: isWeb ? createCSSVariable(props.name) : '',
   }
 }
 
-// on the client maybe we can change the prototype of variable object toString to keep backwards compat
 export function variableToString(vrble?: any, getValue = false) {
-  if (!vrble) return ''
   if (isVariable(vrble)) {
-    if (getValue) return `${vrble.val}`
-    return `${isWeb ? vrble.variable : vrble.val}`
+    return getValue ? `${vrble.val}` : `${isWeb ? vrble.variable : vrble.val}`
   }
-  return `${vrble}`
+  return `${vrble || ''}`
 }
 
 export function isVariable(v: Variable | any): v is Variable {

package/src/createVariables.ts

@@ -1,3 +1,5 @@
+import { simpleHash } from '@tamagui/helpers'
+
 import { Variable, createVariable, isVariable } from './createVariable'
 
 type DeepTokenObject<Val extends string | number = any> = {
@@ -21,22 +23,20 @@ export const createVariables = <A extends DeepTokenObject>(
   let i = 0
   for (const key in tokens) {
     i++
-    const variableName = isFont ? key.slice(0, 2) : i
     const val = tokens[key]
     if (isVariable(val)) {
       res[key] = val
       continue
     }
-    let name = parentPath ? `${parentPath}-${variableName}` : key
-    if (isFont && name.includes('_')) {
-      name = name.replace(/_[a-z0-9]+/i, '')
-    }
+    const niceKey = simpleHash(key)
+    let name = isFont ? niceKey.slice(0, 2) : i
+    name = parentPath ? `${parentPath}-${name}` : niceKey
     if (val && typeof val === 'object') {
       // recurse
-      res[key] = createVariables(tokens[key] as any, `${name}`)
+      res[key] = createVariables(tokens[key] as any, name)
       continue
     }
-    res[key] = isVariable(val) ? val : createVariable({ val, name, key })
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
   }
   return res
 }