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

package/src/createVariable.ts

@@ -1,5 +1,6 @@
+import { isValidCSSCharCode, simpleHash } from '@tamagui/helpers'
+
 import { isWeb } from './constants/platform'
-import { VariableColorVal } from './types'
 
 /**
  * Should rename this to Token
@@ -35,10 +36,12 @@ export const createVariable = <A extends string | number = any>(props: VariableI
 }
 
 // on the client maybe we can change the prototype of variable object toString to keep backwards compat
-export function variableToString(vrble?: Variable | VariableColorVal) {
+export function variableToString(vrble?: any) {
   if (!vrble) return ''
-  if (typeof vrble === 'string') return vrble
-  return `${isWeb ? vrble.variable : vrble.val}`
+  if (isVariable(vrble)) {
+    return `${isWeb ? vrble.variable : vrble.val}`
+  }
+  return `${vrble}`
 }
 
 export function isVariable(v: Variable | any): v is Variable {
@@ -69,26 +72,6 @@ export const createCSSVariable = (nameProp: string, includeVar = true) => {
       return ``
     }
   }
-  let name = ''
-  for (let i = 0; i < nameProp.length; i++) {
-    const code = nameProp.charCodeAt(i)
-    if (
-      // A-Z
-      (code >= 65 && code <= 90) ||
-      // a-z
-      (code >= 97 && code <= 122) ||
-      // _
-      code == 95 ||
-      // -
-      code === 45 ||
-      // 0-9
-      (code >= 48 && code <= 57)
-    ) {
-      name += nameProp[i]
-    } else {
-      // allow any name but turn it into a stringified num
-      name += `-c${code}-`
-    }
-  }
+  const name = simpleHash(nameProp, 60)
   return includeVar ? `var(--${name})` : name
 }

package/src/createVariables.ts

@@ -18,19 +18,22 @@ export const createVariables = <A extends DeepTokenObject>(
   isFont = false
 ): DeepVariableObject<A> => {
   const res: any = {}
+  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}-${key}` : key
+    let name = parentPath ? `${parentPath}-${variableName}` : key
     if (isFont && name.includes('_')) {
       name = name.replace(/_[a-z0-9]+/i, '')
     }
     if (val && typeof val === 'object') {
       // recurse
-      res[key] = createVariables(tokens[key] as any, isFont ? 'f' : name)
+      res[key] = createVariables(tokens[key] as any, `${name}`)
       continue
     }
     res[key] = isVariable(val) ? val : createVariable({ val, name, key })

package/src/helpers/RNComponents.tsx

@@ -1,14 +1,14 @@
-import * as ReactNative from 'react-native'
+import { Image, Text, TextInput, View } from 'react-native'
 
-// bye bye tree shaking... but only way to properly detect react-native components...
-// also neither rnw nor react support tree shaking atm
-export const RNComponents = new WeakMap()
-
-// I was looping over all of them, but casuses deprecation warnings and there's only a few
-// we realistically support - lets whitelist rather than blacklist
-for (const key of ['Image', 'TextInput', 'Text', 'View']) {
-  const val = ReactNative[key]
-  if (val && typeof val === 'object') {
-    RNComponents.set(val, true)
-  }
-}
+// limited support
+export const RNComponents = new Set<any>([
+  Image,
+  TextInput,
+  Text,
+  View,
+  // see fake-react-native + styled() check
+  'Image',
+  'TextInput',
+  'Text',
+  'View',
+])

package/src/helpers/ThemeManager.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { getThemes } from '../conf'
+import { getThemes } from '../config'
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
 import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
 import { ThemeObject, Themes } from '../types'
@@ -100,7 +100,14 @@ export class ThemeManager {
     return true
   }
 
-  getNextTheme(props: GetNextThemeProps = {}, debug?: any) {
+  getNextTheme(
+    props: GetNextThemeProps = {},
+    debug?: any
+  ): {
+    name: string
+    theme: ThemeObject | null
+    className: string | undefined
+  } {
     const { themes = getThemes(), name, componentName } = props
 
     if (props.reset && name) {
@@ -130,6 +137,7 @@ export class ThemeManager {
       return {
         name: this.name,
         theme: this.theme,
+        className: undefined,
       }
     }
 
@@ -137,17 +145,11 @@ export class ThemeManager {
     let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName
 
     while (true) {
-      if (nextName in themes) {
-        break
-      }
+      if (nextName in themes) break
       nextName = `${parentName}_${name}`
-      if (nextName in themes) {
-        break
-      }
-      if (!parentName.includes(THEME_NAME_SEPARATOR)) {
-        // this is fine - some themes can not have parents
-        break
-      }
+      if (nextName in themes) break
+      // this is fine - some themes can not have parents
+      if (!parentName.includes(THEME_NAME_SEPARATOR)) break
       // go up one
       parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))
     }
@@ -172,6 +174,7 @@ export class ThemeManager {
 
     if (process.env.NODE_ENV === 'development') {
       if (debug) {
+        // eslint-disable-next-line no-console
         console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })
       }
     }

package/src/helpers/assignNativePropsToWeb.tsx

@@ -39,7 +39,6 @@ export function assignNativePropsToWeb(elementType: string, viewProps: any, nati
     viewProps['aria-colspan'] = nativeProps.accessibilityColumnSpan
   }
   if (nativeProps.accessibilityControls != null) {
-    console.log('wtf', nativeProps.accessibilityControls)
     viewProps['aria-controls'] = processIDRefList(nativeProps.accessibilityControls)
   }
   if (nativeProps.accessibilityCurrent != null) {

package/src/helpers/createPropMapper.ts

@@ -1,4 +1,4 @@
-import { getConfig } from '../conf'
+import { getConfig } from '../config'
 import { isWeb } from '../constants/platform'
 import { Variable, isVariable } from '../createVariable'
 import {
@@ -31,7 +31,7 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
   const variants = staticConfig.variants || {}
 
   // temp remove classnames
-  const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, true)[0]
+  const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, false)[0]
 
   const mapper: PropMapper = (
     key,

package/src/helpers/expandStyles.ts

@@ -1,8 +1,8 @@
-import { getConfig } from '../conf'
+import { getConfig } from '../config'
 import { isWeb } from '../constants/platform'
 import { expandStyle } from './expandStyle'
 import { colorToRGBA, normalizeColor } from './normalizeColor'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 let shorthands: Record<string, string> | null = null
@@ -81,12 +81,13 @@ function normalizeShadow({
     ...(isWeb && {
       shadowColor: normalizeColor(colorStr, shadowOpacity),
     }),
-    ...(!isWeb &&
+    ...(process.env.TAMAGUI_TARGET === 'native' &&
       (() => {
         // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity
         const rgba = colorToRGBA(colorStr)
         if (!rgba) {
           if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
             console.warn('No rgba form', colorStr)
           }
           return {

package/src/helpers/getAnimationDriver.tsx

@@ -0,0 +1,5 @@
+import { getConfig } from '../config'
+
+export function getAnimationDriver() {
+  return getConfig().animations
+}

package/src/helpers/getExpandedShorthands.ts

@@ -1,4 +1,4 @@
-import { getConfig } from '../conf'
+import { getConfig } from '../config'
 import { Shorthands } from '../types'
 
 export function getExpandedShorthands<A extends Object>(props: A): Omit<A, keyof Shorthands> {
@@ -6,7 +6,7 @@ export function getExpandedShorthands<A extends Object>(props: A): Omit<A, keyof
   if (!shorthands) {
     return props
   }
-  let res: A = {} as any
+  const res: A = {} as any
   for (const key in props) {
     // @ts-ignore
     res[shorthands[key] || key] = props[key]

package/src/helpers/getFont.tsx

@@ -31,7 +31,7 @@ export const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (
   }
   if (process.env.NODE_ENV === 'development') {
     if (props['debug']) {
-      console.groupCollapsed('  🔹 getFont', val)
+      console.groupCollapsed('  🔹 getFont', val, props['fontWeight'], props['fow'])
       console.log({ style, props, font })
       console.groupEnd()
     }

package/src/helpers/getSize.ts

@@ -1,4 +1,4 @@
-import { getTokens } from '../conf'
+import { getTokens } from '../config'
 import { SizeTokens, SpaceTokens } from '../types'
 
 export const getSize = (size?: SizeTokens | undefined, shift = 0, bounds = [0]) => {

package/src/helpers/getSplitStyles.tsx

@@ -2,8 +2,8 @@ import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } fro
 import { useInsertionEffect } from 'react'
 import { ViewStyle } from 'react-native'
 
-import { getConfig } from '../conf'
-import { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { getConfig } from '../config'
+import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
 import type {
   DebugProp,
@@ -30,7 +30,7 @@ import {
   updateRules,
 } from './insertStyleRule'
 import { mergeTransform } from './mergeTransform'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 export type SplitStyles = ReturnType<typeof getSplitStyles>
@@ -588,7 +588,7 @@ export const getSplitStyles: StyleSplitter = (
  * and to avoid re-creating it over and over, use a WeakMap
  */
 const propProxies = new WeakMap()
-function getSubStyleProxiedProps(baseProps: Object, specificProps: Object) {
+function getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specificProps: Object) {
   if (!specificProps) {
     // functional variants may want to eventually do something like:
     // have a hooks-like rule (no conditionals)
@@ -603,14 +603,11 @@ function getSubStyleProxiedProps(baseProps: Object, specificProps: Object) {
     return propProxies.get(specificProps)
   }
   const next = new Proxy(specificProps, {
-    ownKeys() {
-      return [...new Set([...Object.keys(baseProps), ...Object.keys(specificProps)])]
-    },
     has(_, key) {
-      return key in specificProps || key in baseProps
+      return key in defaultProps || key in specificProps || key in baseProps
     },
     get(_, key) {
-      return specificProps[key] ?? baseProps[key]
+      return defaultProps[key] ?? specificProps[key] ?? baseProps[key]
     },
   })
   propProxies.set(specificProps, next)
@@ -636,7 +633,7 @@ export const getSubStyle = (
       key,
       val,
       theme,
-      getSubStyleProxiedProps(props, props[subKey]),
+      getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),
       state,
       languageContext,
       avoidDefaultProps
@@ -668,9 +665,11 @@ const useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutE
 export const useSplitStyles: StyleSplitter = (...args) => {
   const res = getSplitStyles(...args)
 
-  useInsertEffectCompat(() => {
-    insertStyleRules(res.rulesToInsert)
-  }, [res.rulesToInsert])
+  if (!isRSC) {
+    useInsertEffectCompat(() => {
+      insertStyleRules(res.rulesToInsert)
+    }, [res.rulesToInsert])
+  }
 
   return res
 }

package/src/helpers/getStylesAtomic.ts

@@ -7,10 +7,10 @@ import { StyleObject, simpleHash } from '@tamagui/helpers'
 import hyphenateStyleName from 'hyphenate-style-name'
 import { TextStyle, ViewStyle } from 'react-native'
 
-import { getConfig } from '../conf'
+import { getConfig } from '../config'
 import { TamaguiInternalConfig } from '../types'
 import { defaultOffset } from './expandStyles'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
 
 // refactor this file away next...
@@ -50,7 +50,10 @@ export function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor
     }
   } else {
     if (!style) {
-      console.warn(`Invalid style`)
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.warn(`Invalid style`)
+      }
       return []
     }
   }

package/src/helpers/getVariantExtras.tsx

@@ -1,5 +1,5 @@
-import { getConfig } from '../conf'
-import { GenericFonts } from '../types'
+import { getConfig } from '../config'
+import { GenericFonts, StaticConfig } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
 
 const extrasCache = new WeakMap()

package/src/helpers/normalizeColor.ts

@@ -1,4 +1,4 @@
-import normalizeCSSColor from 'normalize-css-color'
+import normalizeCSSColor from '@tamagui/normalize-css-color-lite'
 
 export const normalizeColor = (color?: number | string | null, opacity?: number) => {
   if (color == null || color == undefined) {

package/src/helpers/normalizeValueWithProperty.ts

@@ -24,6 +24,8 @@ export function normalizeValueWithProperty(value: any, property?: string): any {
   return res
 }
 
+// TODO react-native-web-lite
+
 const colorProps = {
   backgroundColor: true,
   borderColor: true,

package/src/hooks/getThemeUnwrapped.tsx

@@ -1,4 +1,5 @@
 export const getThemeUnwrapped = (theme: any) => {
+  if (!theme) return null
   const first = theme[GetThemeUnwrapped]
   if (first) return first[GetThemeUnwrapped] || first
   return theme

package/src/hooks/useFeatures.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { RefObject } from 'react'
 import { View, ViewStyle } from 'react-native'
 
-import { getConfig } from '../conf'
+import { getConfig } from '../config'
 import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { getSubStyle } from '../helpers/getSplitStyles'
 import {
@@ -97,6 +97,7 @@ function loadAnimationFeature() {
       } = _utils
 
       if (!useAnimations) {
+        // eslint-disable-next-line no-console
         console.error('no useAnimations hook provided')
         return null
       }

package/src/hooks/useServerHooks.tsx

@@ -0,0 +1,13 @@
+import { useRef, useState } from 'react'
+
+import { isRSC } from '../constants/platform'
+
+export const useServerState = isRSC
+  ? (((val: any) => [val, idFn]) as unknown as typeof useState)
+  : useState
+
+export const useServerRef = isRSC
+  ? (((val: any) => ({ current: val })) as unknown as typeof useRef)
+  : useRef
+
+const idFn = () => {}

package/src/hooks/useTheme.tsx

@@ -1,8 +1,8 @@
 import { useForceUpdate } from '@tamagui/use-force-update'
 import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
-import { getConfig } from '../conf'
-import { isSSR, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { getConfig } from '../config'
+import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
 import {
@@ -14,8 +14,9 @@ import {
 import { ThemeName, ThemeObject } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 import { useConstant } from './useConstant'
+import { useServerRef } from './useServerHooks'
 
-export type ThemeProps = {
+export interface ThemeProps {
   className?: string
   disableThemeClass?: boolean
   name: Exclude<ThemeName, number> | null
@@ -25,7 +26,7 @@ export type ThemeProps = {
   debug?: boolean | 'verbose'
 }
 
-type UseThemeState = {
+interface UseThemeState {
   uuid: Object
   keys: Set<string>
   isRendering: boolean
@@ -37,6 +38,13 @@ export const useTheme = (
   props?: ThemeProps,
   forceUpdate?: any
 ): ThemeObject => {
+  // TODO this can use useChangeThemeEffect almost ready
+  if (isRSC) {
+    const config = getConfig()
+    // @ts-ignore
+    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)
+  }
+
   const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
     themeName,
     componentName,
@@ -51,7 +59,7 @@ export const useTheme = (
     }
   }
 
-  const state = useRef() as React.MutableRefObject<UseThemeState>
+  const state = useServerRef() as React.MutableRefObject<UseThemeState>
   if (!state.current) {
     state.current = {
       uuid: {},
@@ -82,49 +90,60 @@ export const useTheme = (
   }
 
   return useMemo(() => {
-    return new Proxy(theme, {
-      has(_, key) {
-        if (typeof key === 'string') {
-          if (key[0] === '$') {
-            key = key.slice(1)
-          }
-        }
-        return Reflect.has(theme, key)
-      },
-      get(_, key) {
-        if (key === GetThemeUnwrapped) {
-          return theme
-        }
-        if (key === GetThemeManager) {
-          return themeManager
-        }
-        if (key === 'name') {
-          return name
-        }
-        if (key === 'className') {
-          return className
-        }
-        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {
-          return Reflect.get(_, key)
-        }
-        if (!themeManager) {
-          console.error('No themeManager')
-          return
-        }
-        // auto convert variables to plain
-        if (key[0] === '$') {
-          key = key.slice(1)
-        }
+    return getThemeProxied(theme, name, className, themeManager, state, debugProp)
+  }, [theme, name, themeManager, className, debugProp])
+}
+
+function getThemeProxied(
+  theme: any,
+  name: string,
+  className?: string,
+  themeManager?: ThemeManager | null,
+  state?: React.MutableRefObject<UseThemeState>,
+  debugProp?: boolean | 'verbose'
+) {
+  return new Proxy(theme, {
+    has(_, key) {
+      if (typeof key === 'string' && key[0] === '$') {
+        key = key.slice(1)
+      }
+      return Reflect.has(theme, key)
+    },
+    get(_, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme
+      }
+      if (key === GetThemeManager) {
+        return themeManager
+      }
+      if (key === 'name') {
+        return name
+      }
+      if (key === 'className') {
+        return className
+      }
+      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {
+        return Reflect.get(_, key)
+      }
+      // auto convert variables to plain
+      if (key[0] === '$') {
+        key = key.slice(1)
+      }
+      if (!themeManager) {
+        return theme[key]
+      }
+      if (state) {
         if (state.current.isRendering && !state.current.keys.has(key)) {
           state.current.keys.add(key)
           if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+            // eslint-disable-next-line no-console
             console.log('  🔸 tracking theme', key)
           }
         }
-        return themeManager.getValue(key)
-      },
-    })
-  }, [name, theme, componentName, className, debugProp])
+      }
+      return themeManager.getValue(key)
+    },
+  })
 }
 
 const GetThemeManager = Symbol()
@@ -135,6 +154,10 @@ export const getThemeManager = (theme: any): ThemeManager | undefined => {
 }
 
 export const useThemeName = (opts?: { parent?: true }) => {
+  if (isRSC) {
+    const config = getConfig()
+    return config.defaultTheme || 'light'
+  }
   const parent = useContext(ThemeManagerContext)
   const [name, setName] = useState(parent?.name || '')
 
@@ -161,20 +184,43 @@ export const useChangeThemeEffect = (
   componentName?: string,
   props?: ThemeProps,
   forceUpdateProp?: any
-) => {
+): {
+  themes: Record<string, ThemeObject>
+  themeManager: ThemeManager | null
+  name: string
+  theme: ThemeObject | null
+  className?: string
+} => {
+  const { themes } = getConfig()
+  if (isRSC) {
+    // we need context working for this to work well
+    const parentManager = new ThemeManager('light', themes.light)
+    const next = parentManager.getNextTheme({
+      name,
+      componentName,
+      themes,
+      reset: props?.reset,
+    })
+    return {
+      ...next,
+      themes,
+      themeManager: null,
+    }
+  }
   const debug = props && props['debug']
   const parentManager = useContext(ThemeManagerContext) || emptyManager
-  const { themes } = useContext(ThemeContext)!
   const reset = props?.reset || false
-  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }
+  const getThemeProps: GetNextThemeProps = {
+    name,
+    componentName,
+    themes,
+    reset,
+  }
   const next = parentManager.getNextTheme(getThemeProps, debug)
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const forceUpdate = forceUpdateProp || useForceUpdate()
 
   const themeManager = useConstant<ThemeManager | null>(() => {
-    // if (!next) return null
-    // RSC test
-    // if (typeof document === 'undefined') return null
     return new ThemeManager(next.name, next.theme, parentManager, reset)
   })
 

package/src/index.ts

@@ -15,7 +15,7 @@ export * from './types'
 
 // for type portability
 export type { RNWTextProps, RNWViewProps } from './types-rnw'
-export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'
+export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
 
 export * from './constants/constants'
 export * from './constants/platform'
@@ -25,6 +25,7 @@ export * from './helpers/calc'
 export * from './helpers/createShallowUpdate'
 export * from './helpers/getStackSize'
 export * from './helpers/getVariantExtras'
+export * from './helpers/getAnimationDriver'
 export * from './helpers/getExpandedShorthands'
 export * from './helpers/getSize'
 export * from './helpers/getSplitStyles'