@tamagui/web 3.0.0-beta.831.1 → 3.0.0-beta.889.1

package/src/helpers/styledDynamic.ts

@@ -0,0 +1,191 @@
+import { getSetting } from '../config'
+import { getVariableValue } from '../createVariable'
+import type {
+  GenericFonts,
+  GetStyleState,
+  LanguageContextType,
+  StyledDynamic,
+  StyledDynamicEnv,
+  StyledDynamicFn,
+  StyledDynamicProp,
+} from '../types'
+import { styledDynamicSymbol } from '../types'
+
+const fontLanguageCache = new WeakMap()
+
+export function getFontsForLanguage(fonts: GenericFonts, language: LanguageContextType) {
+  if (fontLanguageCache.has(language)) return fontLanguageCache.get(language)
+  const next = { ...fonts }
+  for (const name in language) {
+    const lang = language[name]
+    if (lang !== 'default') next[name] = fonts[`${name}_${lang}`]
+  }
+  fontLanguageCache.set(language, next)
+  return next
+}
+
+export function isStyledDynamic(value: unknown): value is StyledDynamic {
+  return (
+    !!value &&
+    (typeof value === 'function' || typeof value === 'object') &&
+    styledDynamicSymbol in (value as object)
+  )
+}
+
+const bareStyledDynamic: StyledDynamicProp = { [styledDynamicSymbol]: true }
+const dynamicSpreadProbe = Symbol('tamagui.dynamicSpreadProbe')
+const dynamicComputedProbe = '__tamagui_dynamic_computed_key__'
+const dynamicComputedNumberProbe = 712_367_821
+const dynamicShapeProbeValues = new WeakSet<object>()
+
+function createDynamicShapeProbe(): any {
+  const target = function () {}
+  let probe: any
+  probe = new Proxy(target, {
+    apply: () => probe,
+    construct: () => probe,
+    get: (_target, key) => {
+      if (key === Symbol.toPrimitive) {
+        return (hint: string) =>
+          hint === 'number' ? dynamicComputedNumberProbe : dynamicComputedProbe
+      }
+      if (key === Symbol.iterator) {
+        return function* () {
+          yield dynamicComputedProbe
+        }
+      }
+      if (key === dynamicSpreadProbe) return true
+      return probe
+    },
+    getOwnPropertyDescriptor: (target, key) =>
+      key === dynamicSpreadProbe
+        ? { configurable: true, enumerable: true, value: true }
+        : Reflect.getOwnPropertyDescriptor(target, key),
+    ownKeys: (target) => [...Reflect.ownKeys(target), dynamicSpreadProbe],
+  })
+  dynamicShapeProbeValues.add(probe)
+  return probe
+}
+
+function findDynamicShapeViolation(value: unknown) {
+  if (!value || (typeof value !== 'object' && typeof value !== 'function')) return
+  const seen = new WeakSet<object>()
+  let spread = false
+  let computed = false
+  const visit = (current: object) => {
+    // A proxy used as an ordinary scalar/local value is valid. Its enumerable
+    // marker only means "spread" after object spread copies that descriptor
+    // onto a returned literal.
+    if (dynamicShapeProbeValues.has(current) || seen.has(current)) return
+    seen.add(current)
+    let descriptors: PropertyDescriptorMap
+    try {
+      descriptors = Object.getOwnPropertyDescriptors(current)
+    } catch {
+      return
+    }
+    for (const key of Reflect.ownKeys(descriptors)) {
+      if (key === dynamicSpreadProbe) spread = true
+      if (
+        typeof key === 'string' &&
+        (key.includes(dynamicComputedProbe) || key === String(dynamicComputedNumberProbe))
+      ) {
+        computed = true
+      }
+      const nested = descriptors[key as keyof typeof descriptors]?.value
+      if (nested && (typeof nested === 'object' || typeof nested === 'function')) {
+        visit(nested)
+      }
+    }
+  }
+  visit(value)
+  if (spread || computed) return { spread, computed }
+}
+
+function validateDynamicShape(fn: Function) {
+  try {
+    const probe = createDynamicShapeProbe()
+    // Helpers may diagnose the deliberately-invalid proxy value (for example a
+    // token resolver saying it is not a known size). Those are probe artifacts,
+    // not definition warnings; only the shape warning below should escape.
+    const warn = console.warn
+    let output
+    try {
+      console.warn = () => {}
+      output = fn(probe, probe)
+    } finally {
+      console.warn = warn
+    }
+    const violation = findDynamicShapeViolation(output)
+    if (!violation) return
+    const reasons = [
+      violation.spread ? 'a spread from a dynamic input' : '',
+      violation.computed ? 'a computed key from a dynamic input' : '',
+    ].filter(Boolean)
+    console.warn(
+      `[tamagui] styled.dynamic${fn.name ? ` (${fn.name})` : ''} returned ${reasons.join(' and ')} during its development shape check. Dynamic style bodies require static object keys for extraction; this definition will deopt instead.`
+    )
+  } catch {
+    // The probe is intentionally best-effort. A body may depend on a concrete
+    // runtime value the proxy cannot model; definition must never fail for it.
+  }
+}
+
+/**
+ * `styled.dynamic<T>()` declares a typed variant prop that is consumed by
+ * styling (given style by a component `.resolve`). `styled.dynamic<T>(fn)`
+ * maps the value to a style fragment; it is invoked per clause payload so
+ * responsive/conditional values work, and the branded function stays callable
+ * inside other dynamics or resolvers.
+ */
+export function styledDynamic<Val>(): StyledDynamicProp<Val>
+export function styledDynamic<Val>(
+  fn: (value: Val, env: StyledDynamicEnv) => Record<string, any> | null | undefined
+): StyledDynamicFn<Val>
+export function styledDynamic(fn?: any) {
+  if (!fn) return bareStyledDynamic
+  if (process.env.NODE_ENV === 'development') validateDynamicShape(fn)
+  fn[styledDynamicSymbol] = true
+  return fn
+}
+
+/**
+ * the env for `styled.dynamic` callbacks and `.resolve` resolvers: tokens,
+ * theme, fonts, and the active font. Built once per style pass.
+ */
+export function getDynamicEnv(styleState: GetStyleState): StyledDynamicEnv {
+  const cached = (styleState as any).flatDynamicEnv
+  if (cached) return cached
+
+  const { props, conf, context, theme } = styleState
+  let fonts = conf.fontsParsed
+  if (context?.language) {
+    fonts = getFontsForLanguage(conf.fontsParsed, context.language)
+  }
+
+  const next = {
+    fonts,
+    tokens: conf.tokensParsed,
+    theme,
+    get fontFamily() {
+      return (
+        getVariableValue(styleState.fontFamily || props.fontFamily) ||
+        props.fontFamily ||
+        getVariableValue(getSetting('defaultFont'))
+      )
+    },
+    get font() {
+      const found = fonts[this.fontFamily as string]
+      if (found) return found
+
+      const className = props.className
+      if (typeof className === 'string') {
+        const name = /(?:^|\s)font_(\S+)/.exec(className)?.[1]
+        if (name && fonts[name]) return fonts[name]
+      }
+      return fonts[conf.defaultFontToken]
+    },
+  } as StyledDynamicEnv
+
+  return ((styleState as any).flatDynamicEnv = next)
+}

package/src/helpers/tokenCategories.ts

@@ -1,73 +1,48 @@
-import {
-  getTokenCategoryName,
-  propToTokenCategoryCode,
-  tokenCategoryColor,
-  tokenCategoryFontFamily,
-  tokenCategoryFontSize,
-  tokenCategoryFontWeight,
-  tokenCategoryLetterSpacing,
-  tokenCategoryLineHeight,
-  tokenCategoryRadius,
-  tokenCategorySize,
-  tokenCategorySpace,
-  tokenCategoryZIndex,
-} from '@tamagui/helpers'
-
 export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
 export type RuntimeTokenCategory = StyleTokenCategory | 'color' | 'font' | 'fontFamily'
 
-const legacyCategory = (property: string): StyleTokenCategory | undefined => {
-  const category = getTokenCategoryName(propToTokenCategoryCode[property])
-  return category === 'space' ||
-    category === 'size' ||
-    category === 'radius' ||
-    category === 'zIndex' ||
-    category === 'fontSize'
-    ? category
-    : undefined
-}
-
-// compatibility view for internal consumers that enumerated the old string map.
-// the proxy keeps the numeric table canonical and only allocates keys on enumeration
-export const tokenCategoryByProperty: Readonly<Record<string, StyleTokenCategory>> =
-  /* @__PURE__ */ new Proxy(Object.create(null), {
-    get(_, property) {
-      return typeof property === 'string' ? legacyCategory(property) : undefined
-    },
-    has(_, property) {
-      return typeof property === 'string' && legacyCategory(property) !== undefined
-    },
-    ownKeys() {
-      return Object.keys(propToTokenCategoryCode).filter(
-        (property) => legacyCategory(property) !== undefined
-      )
-    },
-    getOwnPropertyDescriptor(_, property) {
-      if (typeof property !== 'string' || legacyCategory(property) === undefined) return
-      return { configurable: true, enumerable: true }
-    },
-  })
-
 export function getTokenCategoryForProperty(
   property: string
 ): RuntimeTokenCategory | undefined {
-  switch (propToTokenCategoryCode[property]) {
-    case tokenCategorySpace:
-      return 'space'
-    case tokenCategorySize:
-      return 'size'
-    case tokenCategoryRadius:
-      return 'radius'
-    case tokenCategoryZIndex:
-      return 'zIndex'
-    case tokenCategoryColor:
-      return 'color'
-    case tokenCategoryFontFamily:
-      return 'fontFamily'
-    case tokenCategoryFontSize:
-    case tokenCategoryFontWeight:
-    case tokenCategoryLineHeight:
-    case tokenCategoryLetterSpacing:
-      return 'font'
+  if (property === 'fontFamily') return 'fontFamily'
+  if (
+    property === 'fontSize' ||
+    property === 'fontWeight' ||
+    property === 'lineHeight' ||
+    property === 'letterSpacing'
+  ) {
+    return 'font'
+  }
+  if (property === 'zIndex') return 'zIndex'
+  if (property === 'color' || property.endsWith('Color')) return 'color'
+  if (property.endsWith('Radius')) {
+    return property === 'shadowRadius' ? 'size' : 'radius'
+  }
+  if (
+    /^(?:width|height|(?:min|max)(?:Width|Height))$/.test(property) ||
+    property.endsWith('BlockSize') ||
+    property.endsWith('InlineSize') ||
+    property === 'blockSize' ||
+    property === 'inlineSize'
+  ) {
+    return 'size'
+  }
+  if (
+    property === 'x' ||
+    property === 'y' ||
+    property === 'top' ||
+    property === 'right' ||
+    property === 'bottom' ||
+    property === 'left' ||
+    property === 'outlineOffset' ||
+    property === 'gap' ||
+    property.endsWith('Gap') ||
+    property.startsWith('margin') ||
+    property.startsWith('padding') ||
+    property.startsWith('inset') ||
+    ((property.startsWith('border') || property === 'outlineWidth') &&
+      property.endsWith('Width'))
+  ) {
+    return 'space'
   }
 }

package/src/helpers/variableValue.ts

@@ -24,22 +24,27 @@ export const findVariableToken = (
   tokensParsed: TokensParsed,
   name: string
 ): Variable | undefined => {
-  let found: Variable | undefined
-  let foundCategory: string | undefined
+  if (process.env.NODE_ENV === 'development') {
+    let found: Variable | undefined
+    let foundCategory: string | undefined
+    for (const category of tokenCategoryOrder) {
+      const token = tokensParsed[category]?.[name] as Variable | undefined
+      if (!token) continue
+      if (!found) {
+        found = token
+        foundCategory = category
+      } else {
+        warnOnce(
+          `ambiguous:${name}`,
+          `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`
+        )
+        break
+      }
+    }
+    return found
+  }
   for (const category of tokenCategoryOrder) {
     const token = tokensParsed[category]?.[name] as Variable | undefined
-    if (!token) continue
-    if (!found) {
-      found = token
-      foundCategory = category
-      if (process.env.NODE_ENV !== 'development') break
-    } else {
-      warnOnce(
-        `ambiguous:${name}`,
-        `Theme inline value: "${name}" exists in multiple token categories; using "${foundCategory}". Rename one of the colliding tokens.`
-      )
-      break
-    }
+    if (token) return token
   }
-  return found
 }

package/src/helpers/warnOnce.ts

@@ -15,10 +15,11 @@ const warnLimit = 500
 const warned = process.env.NODE_ENV !== 'production' ? new Set<string>() : null
 
 export function warnOnce(key: string, message = key) {
-  if (process.env.NODE_ENV !== 'development') return
-  if (warned!.has(key) || warned!.size >= warnLimit) return
-  warned!.add(key)
-  console.warn(`[tamagui] ${message}`)
+  if (process.env.NODE_ENV === 'development') {
+    if (warned?.has(key) || (warned?.size ?? 0) >= warnLimit) return
+    warned?.add(key)
+    console.warn(`[tamagui] ${message}`)
+  }
 }
 
 /**

package/src/hooks/useAnimationDriver.ts

@@ -16,7 +16,9 @@ export function useAnimationDriver(): AnimationDriver {
   const { animationDriver } = useConfiguration()
   if (!animationDriver || animationDriver.isStub) {
     throw new Error(
-      `No animation driver configured. Pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+      process.env.NODE_ENV !== 'production'
+        ? `No animation driver configured. Pass \`animations\` to createTamagui. See: https://tamagui.dev/docs/core/animations`
+        : '❌ Error 011'
     )
   }
   return animationDriver
@@ -32,7 +34,9 @@ function useAnimatedNumberDriver(): AnimationDriverWithAnimatedNumbers {
     typeof animatedDriver.useAnimatedNumberReaction !== 'function'
   ) {
     throw new Error(
-      `The configured animation driver does not include animated-number hooks. When using the CSS driver, import \`createAnimations\` from \`@tamagui/animations-css/extras\` instead of \`@tamagui/animations-css\`. See: https://tamagui.dev/docs/core/animations-css`
+      process.env.NODE_ENV !== 'production'
+        ? `The configured animation driver does not include animated-number hooks. When using the CSS driver, import \`createAnimations\` from \`@tamagui/animations-css/extras\` instead of \`@tamagui/animations-css\`. See: https://tamagui.dev/docs/core/animations-css`
+        : '❌ Error 012'
     )
   }
   return animatedDriver as AnimationDriverWithAnimatedNumbers