@tamagui/web 2.0.0-rc.8 → 2.0.0

package/src/helpers/createStyledContext.tsx

@@ -1,25 +1,34 @@
 import type { Context, ReactNode } from 'react'
-import React, { useContext } from 'react'
+import React from 'react'
 import type { StyledContext } from '../types'
 import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
-// test types:
-// const x = createContext({})
-// const y = x.Provider
-// export const ButtonContext = createStyledContext({
-//   size: '$4',
-// })
-// const z = useContext(ButtonContext.context)
-
-// avoid react compiler - we aren't breaking its rules but it shouldn't compile this file because
-// it will mis-interpret how we change the context value. in
-const createReactContext = React[Math.random() ? 'createContext' : 'createContext']
-
-export function createStyledContext<VariantProps extends Record<string, any>>(
+// use const (not function declaration) to prevent esbuild from hoisting
+// above __esm lazy init - function declarations get hoisted before
+// import_react is initialized, causing undefined.default errors in SSR
+export const createStyledContext = <VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
   namespace = ''
-): StyledContext<VariantProps> {
+): StyledContext<VariantProps> => {
+  // avoid react compiler - we aren't breaking its rules but it mis-interprets
+  // how we change the context value
+  'use no memo'
+
+  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
+  // when React is undefined during __esm re-initialization order issues.
+  // also React.createContext is optimized oddly by React compiler and our
+  // uncommon usage confuses it, so we use dynamic access
+  const createReactContext = React[
+    Math.random() ? 'createContext' : 'createContext'
+  ] as typeof React.createContext
+  const useReactMemo = React[
+    Math.random() ? 'useMemo' : 'useMemo'
+  ] as typeof React.useMemo
+  const useReactContext = React[
+    Math.random() ? 'useContext' : 'useContext'
+  ] as typeof React.useContext
+
   const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<VariantProps>
@@ -47,7 +56,7 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
 
-    const next = React.useMemo(() => {
+    const next = useReactMemo(() => {
       if (__disableMergeDefaultValues) {
         // we already merged and want to keep ordering
         return values
@@ -68,14 +77,14 @@ export function createStyledContext<VariantProps extends Record<string, any>>(
 
   // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useContext(LastScopeInNamespace)
+    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = React.useContext(context!) as VariantProps
+    const value = useReactContext(context!) as VariantProps
     return value
   }
 

package/src/helpers/defaultAnimationDriver.tsx

@@ -8,10 +8,8 @@ const noAnimationDriver = (method: string): any => {
 
 const createEmptyAnimationDriver = (): AnimationDriver => ({
   isReactNative: false,
-  supportsCSS: true,
   inputStyle: 'css',
   outputStyle: 'css',
-  classNameAnimation: true,
   isStub: true,
   animations: {},
   useAnimations: () => noAnimationDriver('animations'),
@@ -19,6 +17,7 @@ const createEmptyAnimationDriver = (): AnimationDriver => ({
   ResetPresence: () => noAnimationDriver('ResetPresence'),
   useAnimatedNumber: () => noAnimationDriver('useAnimatedNumber'),
   useAnimatedNumberStyle: () => noAnimationDriver('useAnimatedNumberStyle'),
+  useAnimatedNumbersStyle: () => noAnimationDriver('useAnimatedNumbersStyle'),
   useAnimatedNumberReaction: () => noAnimationDriver('useAnimatedNumberReaction'),
 })
 

package/src/helpers/expandStyle.ts

@@ -5,7 +5,7 @@
 
 import { isAndroid, isWeb } from '@tamagui/constants'
 
-import { getSetting } from '../config'
+import { getStyleCompat, type StyleCompat } from '../config'
 import type { PropMappedValue } from '../types'
 import { parseBorderShorthand } from './parseBorderShorthand'
 import { parseOutlineShorthand } from './parseOutlineShorthand'
@@ -16,17 +16,66 @@ const neg1Flex = [
   ['flexBasis', 'auto'],
 ] satisfies PropMappedValue
 
-export function expandStyle(key: string, value: any): PropMappedValue {
-  if (process.env.TAMAGUI_TARGET === 'web') {
-    if (key === 'flex') {
-      if (value === -1) {
-        return neg1Flex
+function expandFlex(value: unknown, compat: StyleCompat): PropMappedValue {
+  if (typeof value === 'string') {
+    return [['flex', value]]
+  }
+
+  if (typeof value !== 'number') {
+    return
+  }
+
+  if (value === -1) {
+    return neg1Flex
+  }
+
+  switch (compat) {
+    case 'legacy':
+      return [
+        ['flexGrow', value],
+        ['flexShrink', 1],
+        ['flexBasis', 'auto'],
+      ]
+    case 'react-native':
+      if (value > 0) {
+        return [
+          ['flexGrow', value],
+          ['flexShrink', 0],
+          ['flexBasis', 0],
+        ]
+      }
+      if (value === 0) {
+        return [
+          ['flexGrow', 0],
+          ['flexShrink', 0],
+          ['flexBasis', 'auto'],
+        ]
+      }
+      return [
+        ['flexGrow', 0],
+        ['flexShrink', -value],
+        ['flexBasis', 'auto'],
+      ]
+    case 'web':
+      if (value < 0) {
+        return [['flex', value]]
       }
       return [
         ['flexGrow', value],
         ['flexShrink', 1],
-        ['flexBasis', getSetting('styleCompat') === 'legacy' ? 'auto' : 0],
+        ['flexBasis', 0],
       ]
+  }
+}
+
+export function expandStyle(
+  key: string,
+  value: any,
+  styleCompat: StyleCompat = getStyleCompat()
+): PropMappedValue {
+  if (process.env.TAMAGUI_TARGET === 'web') {
+    if (key === 'flex') {
+      return expandFlex(value, styleCompat)
     }
 
     switch (key) {

package/src/helpers/getCSSStylesAtomic.ts

@@ -79,7 +79,11 @@ const getStyleObject = (
   const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
   conf ||= getConfigMaybe()
   const shortProp = conf?.inverseShorthands[key] || key
-  const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  let identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+  if (key === 'pointerEvents' && !pseudo) {
+    if (value === 'box-none') identifier = '_pe-boxnone'
+    else if (value === 'box-only') identifier = '_pe-boxonly'
+  }
   const rules = createAtomicRules(identifier, key, value, pseudo)
   return [
     // array for performance
@@ -231,14 +235,8 @@ function createAtomicRules(
       let finalValue = value
       if (value === 'auto' || value === 'box-only') {
         finalValue = 'auto'
-        if (value === 'box-only') {
-          rules.push(`${selector}>*${boxOnly}`)
-        }
       } else if (value === 'none' || value === 'box-none') {
         finalValue = 'none'
-        if (value === 'box-none') {
-          rules.push(`${selector}>*${boxNone}`)
-        }
       }
       const block = createDeclarationBlock([['pointerEvents', finalValue]], true)
       rules.push(`${selector}${block}`)
@@ -263,6 +261,3 @@ function createAtomicRules(
 
   return rules
 }
-
-const boxNone = createDeclarationBlock([['pointerEvents', 'auto']], true)
-const boxOnly = createDeclarationBlock([['pointerEvents', 'none']], true)

package/src/helpers/getDefaultProps.ts

@@ -4,8 +4,7 @@ import type { StaticConfig } from '../types'
 // merge both default props, styled context props, and default text props
 export const getDefaultProps = (
   staticConfig: StaticConfig,
-  propsComponentName?: string,
-  isSubText?: boolean
+  propsComponentName?: string
 ) => {
   let defaultProps = staticConfig?.defaultProps
 
@@ -20,19 +19,9 @@ export const getDefaultProps = (
 
   if (userDefaultProps) {
     // component's staticConfig.defaultProps wins over global config defaults
-    defaultProps = { ...userDefaultProps, ...defaultProps }
-  }
-
-  if (process.env.TAMAGUI_TARGET === 'web' && isSubText) {
-    // for nested text, inherit from parent unless component explicitly set a fontFamily
-    // staticConfig.defaultProps contains explicit component defaults (e.g., SizableText sets $body)
-    // userDefaultProps contains global config defaults - these should be overridden for nested text
-    const hasExplicitFontFamily = staticConfig?.defaultProps?.fontFamily
-    defaultProps = { ...defaultProps }
-    if (!hasExplicitFontFamily) defaultProps.fontFamily = 'inherit'
-    if (!defaultProps.color) defaultProps.color = 'inherit'
-    if (defaultProps.whiteSpace === 'pre-wrap') defaultProps.whiteSpace = 'inherit'
-    if (defaultProps.wordWrap === 'break-word') defaultProps.wordWrap = 'inherit'
+    defaultProps = defaultProps
+      ? { ...userDefaultProps, ...defaultProps }
+      : userDefaultProps
   }
 
   return defaultProps