@tamagui/core 1.0.1-beta.141 → 1.0.1-beta.142

package/src/addTheme.ts

@@ -1,4 +1,4 @@
-import { getConfig } from './conf'
+import { getConfig, updateConfig } from './config'
 import { isWeb } from './constants/platform'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
@@ -16,37 +16,49 @@ export function addTheme({
   update?: boolean
 }) {
   const config = getConfig()
-  if (!config) {
-    throw new Error(`Must run createTamagui once before loading theme`)
-  }
-  if (!update && config.themes[themeName]) {
-    throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`)
+  if (process.env.NODE_ENV === 'development') {
+    if (!config) {
+      throw new Error(`Must run createTamagui once before loading theme`)
+    }
+    if (!update && config.themes[themeName]) {
+      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`)
+    }
   }
+
   const theme = { ...themeIn }
   for (const key in theme) {
     ensureThemeVariable(theme, key)
   }
-  const cssRules = getThemeCSSRules({
-    config,
-    themeName,
-    names: [themeName],
-    theme,
-  })
+
   const themeProxied = proxyThemeToParents(themeName, theme, config.themes)
   config.themes[themeName] = themeProxied
 
-  if (insertCSS && isWeb) {
-    const id = `tamagui_theme_style_${themeName}`
-    const existing = document.querySelector(`#${id}`)
-    const style = document.createElement('style')
-    style.id = id
-    style.appendChild(document.createTextNode(cssRules.join('\n')))
-    document.head.appendChild(style)
-    if (existing) {
-      existing.parentElement?.removeChild(existing)
+  let cssRules: string[] = []
+
+  if (isWeb) {
+    if (insertCSS) {
+      cssRules = getThemeCSSRules({
+        config,
+        themeName,
+        names: [themeName],
+        theme,
+      })
+      const id = `tamagui_theme_style_${themeName}`
+      const existing = document.querySelector(`#${id}`)
+      const style = document.createElement('style')
+      style.id = id
+      style.appendChild(document.createTextNode(cssRules.join('\n')))
+      document.head.appendChild(style)
+      if (existing) {
+        existing.parentElement?.removeChild(existing)
+      }
     }
   }
 
+  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })
+
+  // trigger updates in components
+
   return {
     theme: themeProxied,
     cssRules,

package/src/{conf.ts → config.ts}

@@ -32,3 +32,7 @@ export const onConfiguredOnce = (cb: ConfigListener) => {
     configListeners.add(cb)
   }
 }
+
+export const updateConfig = (key: string, value: any) => {
+  Object.assign(key, value)
+}

package/src/constants/platform.native.ts

@@ -0,0 +1,14 @@
+import { useLayoutEffect } from 'react'
+import { Platform } from 'react-native'
+
+export const isAndroid = Platform?.OS === 'android'
+export const isIOS = Platform?.OS === 'ios'
+export const isWeb = false
+export const isWindowDefined = false
+export const isSSR = false
+export const isClient = false
+export const isRSC = false
+export const useIsomorphicLayoutEffect = useLayoutEffect
+export const isChrome = false
+export const isWebTouchable = false
+export const isTouchable = true

package/src/constants/platform.ts

@@ -7,7 +7,18 @@ export const isWeb = process.env.TAMAGUI_TARGET === 'web'
 export const isWindowDefined = typeof window !== 'undefined'
 export const isSSR = isWeb && !isWindowDefined
 export const isClient = isWeb && isWindowDefined
-export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect
+
+export const isRSC = process.env.ENABLE_RSC
+  ? // note this is statically analyzed so no funny business, just access it without optional chaining
+    // @ts-ignore
+    import.meta.env
+    ? // @ts-ignore
+      import.meta.env.SSR
+    : false
+  : false
+
+const idFn = () => {}
+export const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect
 export const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')
 export const isWebTouchable = isClient && 'ontouchstart' in window
 export const isTouchable = !isWeb || isWebTouchable

package/src/createComponent.tsx

@@ -20,14 +20,12 @@ import React, {
   memo,
   useCallback,
   useContext,
-  useRef,
-  useState,
 } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
-import { getConfig, onConfiguredOnce } from './conf'
+import { getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
-import { isClient, isWeb, useIsomorphicLayoutEffect } from './constants/platform'
+import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from './constants/platform'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { assignNativePropsToWeb } from './helpers/assignNativePropsToWeb'
@@ -41,6 +39,7 @@ import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useFeatures } from './hooks/useFeatures'
 import { mediaState } from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
+import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
 import {
   SpaceDirection,
@@ -86,7 +85,7 @@ if (typeof document !== 'undefined') {
 // mutates
 function mergeShorthands({ defaultProps }: StaticConfigParsed, { shorthands }: TamaguiConfig) {
   // they are defined in correct order already { ...parent, ...child }
-  for (const key in defaultProps) {
+  for (const key of Object.keys(defaultProps)) {
     defaultProps[shorthands[key] || key] = defaultProps[key]
   }
 }
@@ -129,7 +128,6 @@ export function createComponent<
       props = propsIn
     }
 
-    const hostRef = useRef<HTMLElement | View>(null)
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -138,32 +136,12 @@ export function createComponent<
       ? `is_${props.componentName}`
       : defaultComponentClassName
 
-    if (process.env.NODE_ENV === 'development') {
-      if (props['debug']) {
-        const name = `${
-          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
-        }`
-        const banner = `${name} ${propsIn['data-is'] || ''}`
-        // eslint-disable-next-line no-console
-        console.group(`%c 🐛 ${banner}`, 'background: yellow;')
-        // eslint-disable-next-line no-console
-        console.log('props', propsIn)
-        // eslint-disable-next-line no-console
-        console.log('ref', hostRef, '(click to view)')
-        if (props['debug'] === 'break') {
-          // eslint-disable-next-line no-debugger
-          debugger
-        }
-      }
-    }
-
     const forceUpdate = useForceUpdate()
+    config = config || getConfig()
     const theme = useTheme(props.theme, componentName, props, forceUpdate)
-    const states = useState<TamaguiComponentState>(defaultComponentState)
+
+    const states = useServerState<TamaguiComponentState>(defaultComponentState)
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0]
-    const setState = states[1]
-    const setStateShallow = createShallowUpdate(setState)
-    const languageContext = useContext(FontLanguageContext)
 
     const shouldAvoidClasses = !!(props.animation && avoidClasses)
     const shouldForcePseudo = !!propsIn.forceStyle
@@ -184,18 +162,46 @@ export function createComponent<
             resolveVariablesAs: 'value',
           } as const)
 
+    const languageContext = isRSC ? null : useContext(FontLanguageContext)
+
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
       splitStyleState,
-      props.asChild ? null : initialSplitStyles.classNames,
+      props.asChild ? null : initialSplitStyles?.classNames,
       languageContext || undefined,
       props['debug']
     )
 
+    const hostRef = useServerRef<HTMLElement | View>(null)
+    const setState = states[1]
+    const setStateShallow = createShallowUpdate(setState)
+
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug']) {
+        const name = `${
+          componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
+        }`
+        const type = staticConfig.isReactNativeWeb ? 'rnw' : 'tamagui'
+        const banner = `${name} ${propsIn['data-is'] || ''} ${type}`
+        // eslint-disable-next-line no-console
+        console.group(`%c 🐛 ${banner}`, 'background: yellow;')
+        // eslint-disable-next-line no-console
+        console.log('props in', propsIn)
+        if (typeof window !== 'undefined') {
+          // eslint-disable-next-line no-console
+          console.log('ref', hostRef, '(click to view)')
+        }
+        if (props['debug'] === 'break') {
+          // eslint-disable-next-line no-debugger
+          debugger
+        }
+      }
+    }
+
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles
-    const useAnimations = tamaguiConfig.animations?.useAnimations as UseAnimationHook | undefined
+    const useAnimations = tamaguiConfig?.animations?.useAnimations as UseAnimationHook | undefined
     const isAnimated = !!(useAnimations && props.animation)
     const hasEnterStyle = !!props.enterStyle
 
@@ -404,33 +410,34 @@ export function createComponent<
 
       assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps)
 
-      useElementLayout(hostRef, onLayout)
-
-      // from react-native-web
-      useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture,
-      })
-
-      // from react-native-web
-      const platformMethodsRef = usePlatformMethods(viewProps)
+      if (!isRSC) {
+        useElementLayout(hostRef, onLayout)
+
+        // from react-native-web
+        useResponderEvents(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture,
+        })
 
-      const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef as any)
-      viewProps.ref = setRef
+        // from react-native-web
+        const platformMethodsRef = usePlatformMethods(viewProps)
+        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef as any)
+        viewProps.ref = setRef
+      }
 
       if (props.href != undefined && hrefAttrs != undefined) {
         const { download, rel, target } = hrefAttrs
@@ -498,7 +505,7 @@ export function createComponent<
     }
 
     // isMounted
-    const internal = useRef<{ isMounted: boolean; unmountEffects?: Function[] }>()
+    const internal = useServerRef<{ isMounted: boolean; unmountEffects?: Function[] }>()
     if (!internal.current) {
       internal.current = {
         isMounted: true,
@@ -538,7 +545,7 @@ export function createComponent<
         animationStyles ?? style,
         medias,
       ]
-      if (!animationStyles) {
+      if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos
         const force = shouldForcePseudo
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
@@ -586,8 +593,14 @@ export function createComponent<
           className,
           id: props.id,
         }
-        if (props['data-is']) {
-          viewProps.dataSet.is = props['data-is']
+        if (process.env.NODE_ENV === 'development') {
+          // turn debug data- props into dataSet in dev mode
+          Object.keys(viewProps).forEach((key) => {
+            if (key.startsWith('data-')) {
+              viewProps.dataSet[key.replace('data-', '')] = viewProps[key]
+              delete viewProps[key]
+            }
+          })
         }
       } else {
         viewProps.className = className
@@ -599,7 +612,7 @@ export function createComponent<
     }
 
     // TODO need to loop active variants and see if they have matchin pseudos and apply as well
-    const initialPseudos = initialSplitStyles.pseudos
+    const initialPseudos = initialSplitStyles?.pseudos
     const attachPress = !!(
       pseudos?.pressStyle ||
       initialPseudos?.pressStyle ||
@@ -643,86 +656,88 @@ export function createComponent<
       })
     }, [])
 
-    const events = shouldAttach
-      ? {
-          [pressOutKey]: attachPress
-            ? (e) => {
-                unPress()
-                onPressOut?.(e)
-                onMouseUp?.(e)
-              }
-            : undefined,
-          ...(isHoverable && {
-            onMouseEnter: attachHover
+    const events =
+      shouldAttach && !isRSC
+        ? {
+            [pressOutKey]: attachPress
               ? (e) => {
-                  const next: Partial<typeof state> = {}
-                  if (attachHover) {
-                    next.hover = true
-                  }
-                  if (state.pressIn) {
-                    next.press = true
-                  }
-                  if (Object.keys(next).length) {
-                    setStateShallow(next)
-                  }
-                  onHoverIn?.(e)
-                  onMouseEnter?.(e)
+                  unPress()
+                  onPressOut?.(e)
+                  onMouseUp?.(e)
                 }
               : undefined,
-            onMouseLeave: attachHover
-              ? (e) => {
-                  const next: Partial<typeof state> = {}
-                  mouseUps.add(unPress)
-                  if (attachHover) {
-                    next.hover = false
+            ...(isHoverable && {
+              onMouseEnter: attachHover
+                ? (e) => {
+                    const next: Partial<typeof state> = {}
+                    if (attachHover) {
+                      next.hover = true
+                    }
+                    if (state.pressIn) {
+                      next.press = true
+                    }
+                    if (Object.keys(next).length) {
+                      setStateShallow(next)
+                    }
+                    onHoverIn?.(e)
+                    onMouseEnter?.(e)
                   }
-                  if (state.pressIn) {
-                    next.press = false
-                    next.pressIn = false
+                : undefined,
+              onMouseLeave: attachHover
+                ? (e) => {
+                    const next: Partial<typeof state> = {}
+                    mouseUps.add(unPress)
+                    if (attachHover) {
+                      next.hover = false
+                    }
+                    if (state.pressIn) {
+                      next.press = false
+                      next.pressIn = false
+                    }
+                    if (Object.keys(next).length) {
+                      setStateShallow(next)
+                    }
+                    onHoverOut?.(e)
+                    onMouseLeave?.(e)
                   }
-                  if (Object.keys(next).length) {
-                    setStateShallow(next)
+                : undefined,
+            }),
+            [pressInKey]: attachPress
+              ? (e) => {
+                  setStateShallow({
+                    press: true,
+                    pressIn: true,
+                    hover: false,
+                  })
+                  onPressIn?.(e)
+                  onMouseDown?.(e)
+                  if (isWeb) {
+                    mouseUps.add(unPress)
                   }
-                  onHoverOut?.(e)
-                  onMouseLeave?.(e)
                 }
-              : undefined,
-          }),
-          [pressInKey]: attachPress
-            ? (e) => {
-                setStateShallow({
-                  press: true,
-                  pressIn: true,
-                  hover: false,
-                })
-                onPressIn?.(e)
-                onMouseDown?.(e)
-                if (isWeb) {
-                  mouseUps.add(unPress)
+              : null,
+            [pressKey]: attachPress
+              ? (e) => {
+                  unPress()
+                  onClick?.(e)
+                  onPress?.(e)
                 }
-              }
-            : null,
-          [pressKey]: attachPress
-            ? (e) => {
-                unPress()
-                onClick?.(e)
-                onPress?.(e)
-              }
-            : null,
-
-          // replicating TouchableWithoutFeedback
-          ...(!isWeb && {
-            cancelable: !props.rejectResponderTermination,
-            disabled: props.disabled !== null ? props.disabled : props.accessibilityState?.disabled,
-            hitSlop: props.hitSlop,
-            delayLongPress: props.delayLongPress,
-            delayPressIn: props.delayPressIn,
-            delayPressOut: props.delayPressOut,
-            focusable: viewProps.focusable ?? true,
-            minPressDuration: 0,
-          }),
-        }
-      : null
+              : null,
+
+            // replicating TouchableWithoutFeedback
+            ...(!isWeb && {
+              cancelable: !props.rejectResponderTermination,
+              disabled:
+                props.disabled !== null ? props.disabled : props.accessibilityState?.disabled,
+              hitSlop: props.hitSlop,
+              delayLongPress: props.delayLongPress,
+              delayPressIn: props.delayPressIn,
+              delayPressOut: props.delayPressOut,
+              focusable: viewProps.focusable ?? true,
+              minPressDuration: 0,
+            }),
+          }
+        : null
 
     let space = spaceProp
     // find space by media query
@@ -773,7 +788,7 @@ export function createComponent<
     }
 
     // EVENTS: web
-    if (isWeb) {
+    if (!isRSC && isWeb) {
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const [pressableProps] = usePressable(
         events
@@ -841,7 +856,7 @@ export function createComponent<
       const isAnimatedRNWView = isAnimated && typeof elementType !== 'string' // assuming for now as reanimated is only driver
       const shouldWrapWithComponentTheme =
         isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === 'non-color-value'
-      const shouldWrapWithHover = events && attachHover
+      const shouldWrapWithHover = Boolean(events || isRSC) && attachHover
 
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : ''
@@ -852,10 +867,11 @@ export function createComponent<
             style={{
               display: 'contents',
             }}
-            {...(shouldWrapWithHover && {
-              onMouseEnter: events.onMouseEnter,
-              onMouseLeave: events.onMouseLeave,
-            })}
+            {...(events &&
+              shouldWrapWithHover && {
+                onMouseEnter: events.onMouseEnter,
+                onMouseLeave: events.onMouseLeave,
+              })}
           >
             {content}
           </span>
@@ -865,9 +881,9 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development') {
       if (props['debug']) {
-        // prettier-ignore
+        const element = typeof elementType === 'string' ? elementType : 'Component'
         // eslint-disable-next-line no-console
-        console.groupCollapsed('props out', viewProps, typeof elementType === 'string' ? elementType : 'Component')
+        console.groupCollapsed(`render <${element} /> with props`, viewProps)
         for (const key in viewProps) {
           // eslint-disable-next-line no-console
           console.log(key, viewProps[key])
@@ -886,7 +902,7 @@ export function createComponent<
       }
     }
 
-    return features.elements.length ? (
+    return !isRSC && features.elements.length ? (
       <>
         {features.elements}
         {content}
@@ -903,11 +919,9 @@ export function createComponent<
   // Once configuration is run and all components are registered
   // get default props + className and analyze styles
   onConfiguredOnce((conf) => {
-    if (process.env.IS_STATIC === 'is_static') {
-      // in static mode we just use these to lookup configuration
-      // ... we likely want this? need to test
-      return
-    }
+    // in static mode we just use these to lookup configuration
+    // ... we likely want this? need to test
+    if (process.env.IS_STATIC === 'is_static') return
 
     tamaguiConfig = conf
 
@@ -1077,6 +1091,8 @@ export const Spacer = createComponent<SpacerProps>({
   validStyles,
   defaultProps: {
     ...stackDefaultStyles,
+    // avoid nesting issues
+    tag: 'span',
     size: true,
   },
   variants: {

package/src/createTamagui.ts

@@ -1,5 +1,5 @@
-import { configListeners, setConfig } from './conf'
-import { isWeb } from './constants/platform'
+import { configListeners, setConfig } from './config'
+import { isRSC, isWeb } from './constants/platform'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import { getAllRules } from './helpers/insertStyleRule'
@@ -41,7 +41,12 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     defaultActive: configIn.mediaQueryDefaultActive,
   })
 
-  const fontTokens = createVariables(configIn.fonts!, '', true)
+  const fontTokens = Object.fromEntries(
+    Object.entries(configIn.fonts!).map(([k, v]) => {
+      return [k, createVariables(v, 'f', true)]
+    })
+  )
+
   const fontsParsed = (() => {
     const res = {} as typeof fontTokens
     for (const familyName in fontTokens) {
@@ -139,7 +144,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
 
     // then, generate CSS from de-duped
-    if (isWeb) {
+    if (isWeb || isRSC) {
       for (const themeName in dedupedThemes) {
         cssRuleSets = [
           ...cssRuleSets,
@@ -183,7 +188,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     animations: {} as any,
     media: {},
     ...configIn,
-    shorthands,
+    // vite made this into a function if it wasn't set
+    shorthands: { ...shorthands },
     inverseShorthands: shorthands
       ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
       : {},