@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/src/helpers/styledDynamic.ts

@@ -0,0 +1,192 @@
+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,
+    sizes: conf.sizes,
+    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/subscribeToContextGroup.tsx

@@ -1,4 +1,5 @@
 import { mergeIfNotShallowEqual } from '@tamagui/is-equal-shallow'
+import { useRef } from 'react'
 import { getMediaState } from '../hooks/useMedia'
 import type { ComponentSetStateShallow, DisposeFn, AllGroupContexts } from '../types'
 
@@ -9,6 +10,35 @@ type SubscribeToContextGroupProps = {
   groupContext: AllGroupContexts
 }
 
+export const useGroupSetRevision = (
+  pseudoGroups: Set<string> | undefined,
+  mediaGroups: Set<string> | undefined
+) => {
+  const previous = useRef({ pseudoGroups, mediaGroups, revision: 0 })
+
+  if (
+    !setsEqual(previous.current.pseudoGroups, pseudoGroups) ||
+    !setsEqual(previous.current.mediaGroups, mediaGroups)
+  ) {
+    previous.current = {
+      pseudoGroups,
+      mediaGroups,
+      revision: previous.current.revision + 1,
+    }
+  }
+
+  return previous.current.revision
+}
+
+const setsEqual = (a: Set<string> | undefined, b: Set<string> | undefined) => {
+  if (a === b) return true
+  if (!a || !b || a.size !== b.size) return false
+  for (const value of a) {
+    if (!b.has(value)) return false
+  }
+  return true
+}
+
 export const subscribeToContextGroup = (props: SubscribeToContextGroupProps) => {
   const { pseudoGroups, mediaGroups, groupContext } = props
   if (pseudoGroups || mediaGroups) {
@@ -66,13 +96,22 @@ const createGroupListener = (
           Object.assign(group.pseudo, pseudo)
           didChange = true
         }
-      } else if (layout && mediaGroups) {
-        group.media ||= {}
-        const mediaState = getMediaState(mediaGroups, layout)
-        const next = mergeIfNotShallowEqual(group.media, mediaState)
-        if (next !== group.media) {
-          Object.assign(group.media, next)
-          didChange = true
+      } else if (layout) {
+        if (mediaGroups) {
+          group.media ||= {}
+          const mediaState = getMediaState(mediaGroups, layout)
+          const next = mergeIfNotShallowEqual(group.media, mediaState)
+          if (next !== group.media) {
+            Object.assign(group.media, next)
+            didChange = true
+          }
+        }
+        if (layout.width !== undefined) {
+          const prevWidth = group.layout?.width
+          if (prevWidth === undefined || Math.abs(prevWidth - layout.width) >= 0.5) {
+            group.layout = layout
+            didChange = true
+          }
         }
       }
 

package/src/helpers/themeRef.ts

@@ -0,0 +1,34 @@
+/**
+ * Compile-time theme reference sentinel.
+ *
+ * The static compiler resolves styles with `resolveValues: 'except-theme'`.
+ * Values that resolve through the active theme (as opposed to static tokens,
+ * which are theme-independent) are kept symbolic as a sentinel string so the
+ * compiler can split them out and emit `theme.<key>.get()` expressions inside
+ * `_withStableStyle`, instead of freezing the build machine's first-theme
+ * values into compiled output. A string survives every downstream style
+ * normalization path untouched; the control character cannot appear in a real
+ * style value.
+ */
+export const THEME_REF_PREFIX = '\u0001theme:'
+
+/**
+ * The theme key of a pure reference, or null when the value is anything else,
+ * including a reference embedded in a larger string or carrying an opacity
+ * modifier, which compiled output cannot represent and must leave on the
+ * runtime path.
+ */
+export function themeRefKey(value: unknown): string | null {
+  if (typeof value !== 'string' || !value.startsWith(THEME_REF_PREFIX)) return null
+  const key = value.slice(THEME_REF_PREFIX.length)
+  return key && !key.includes('/') && !key.includes(THEME_REF_PREFIX) ? key : null
+}
+
+export function containsThemeRef(value: unknown): boolean {
+  if (typeof value === 'string') return value.includes(THEME_REF_PREFIX)
+  if (Array.isArray(value)) return value.some(containsThemeRef)
+  if (value && typeof value === 'object') {
+    return Object.values(value).some(containsThemeRef)
+  }
+  return false
+}

package/src/helpers/themeUpdateState.ts

@@ -0,0 +1,27 @@
+import type { TamaguiInternalConfig, ThemeParsed, Variable } from '../types'
+import type { ConfigRevisionState } from './grammarConfig'
+
+export const themeUpdateStateKey = '_tmgInlineLayer'
+
+export type ThemeUpdateValues = {
+  values?: Record<string, any>
+  themes?: Record<string, Record<string, any> | undefined>
+}
+
+export type ThemeUpdateLayerInfo = {
+  key: string
+  generation: ConfigRevisionState
+  overridden: Set<string>
+  pairs: Record<string, { light: string | number; dark: string | number }>
+}
+
+export type ThemeUpdateState = {
+  key: string
+  className: string | undefined
+  values: ThemeUpdateValues
+  getTheme(
+    parentTheme: Record<string, Variable>,
+    themeName: string | undefined,
+    config: TamaguiInternalConfig
+  ): ThemeParsed
+}

package/src/helpers/themes.ts

@@ -4,20 +4,19 @@ import { createVariable, isVariable } from '../createVariable'
 // shared by createTamagui so extracted here
 export function ensureThemeVariable(theme: any, key: string) {
   const val = theme[key]
+  const value = isVariable(val) ? val.val : val
   if (!isVariable(val)) {
     theme[key] = createVariable({
       key,
       name: key,
-      val,
+      val: value,
+    })
+  } else if (val.name !== key) {
+    // rename to theme name
+    theme[key] = createVariable({
+      key: val.name,
+      name: key,
+      val: value,
     })
-  } else {
-    if (val.name !== key) {
-      // rename to theme name
-      theme[key] = createVariable({
-        key: val.name,
-        name: key,
-        val: val.val,
-      })
-    }
   }
 }

package/src/helpers/tokenCategories.ts

@@ -0,0 +1,54 @@
+export type StyleTokenCategory = 'size' | 'space' | 'radius' | 'zIndex' | 'fontSize'
+export type RuntimeTokenCategory =
+  | StyleTokenCategory
+  | 'color'
+  | 'font'
+  | 'fontFamily'
+  | (string & {})
+
+export function getTokenCategoryForProperty(
+  property: string
+): RuntimeTokenCategory | undefined {
+  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' ||
+    property === 'flexBasis'
+  ) {
+    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/transformsToString.ts

@@ -1,20 +1,22 @@
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 
 export function transformsToString(transforms: object[]) {
-  return transforms
-    .map(
-      // { scale: 2 } => 'scale(2)'
-      // { translateX: 20 } => 'translateX(20px)'
-      // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
-      // { perspective: 1000 } => perspective(1000px)
-      (transform) => {
-        const type = Object.keys(transform)[0]
-        const value = transform[type]
-        if (type === 'matrix' || type === 'matrix3d') {
-          return `${type}(${value.join(',')})`
-        }
-        return `${type}(${normalizeValueWithProperty(value, type)})`
-      }
-    )
-    .join(' ')
+  // { scale: 2 } => 'scale(2)'
+  // { translateX: 20 } => 'translateX(20px)'
+  // { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+  // { perspective: 1000 } => perspective(1000px)
+  let out = ''
+  for (const transform of transforms) {
+    // each transform object has exactly one key
+    for (const type in transform) {
+      const value = transform[type]
+      if (out) out += ' '
+      out +=
+        type === 'matrix' || type === 'matrix3d'
+          ? `${type}(${value.join(',')})`
+          : `${type}(${normalizeValueWithProperty(value, type)})`
+      break
+    }
+  }
+  return out
 }

package/src/helpers/variableValue.ts

@@ -0,0 +1,50 @@
+import type { TokensParsed, Variable } from '../types'
+import { warnOnce } from './warnOnce'
+
+const unitlessSuffixes = [
+  'opacity',
+  'scale',
+  'zindex',
+  'weight',
+  'flex',
+  'grow',
+  'shrink',
+  'ratio',
+  'elevation',
+]
+
+export const isUnitlessVariableKey = (key: string): boolean => {
+  const lower = key.toLowerCase()
+  return unitlessSuffixes.some((suffix) => lower.endsWith(suffix))
+}
+
+const tokenCategoryOrder = ['color', 'space', 'size', 'radius', 'zIndex'] as const
+
+export const findVariableToken = (
+  tokensParsed: TokensParsed,
+  name: string
+): Variable | 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) return token
+  }
+}