@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/helpers/log.ts

@@ -1,17 +1,18 @@
 import { _disableMediaTouch } from '../hooks/useMedia'
 
 export function log(...args: any[]) {
-  if (process.env.NODE_ENV === 'production') return
-  _disableMediaTouch(true)
-  try {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      return console.info(...args)
+  if (process.env.NODE_ENV === 'development') {
+    _disableMediaTouch(true)
+    try {
+      if (process.env.TAMAGUI_TARGET === 'web') {
+        return console.info(...args)
+      }
+      // react native doesn't log in the cli unless it's log
+      return console.log(...args)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      _disableMediaTouch(false)
     }
-    // react native doesn't log in the cli unless it's log
-    return console.log(...args)
-  } catch (err) {
-    console.error(err)
-  } finally {
-    _disableMediaTouch(false)
   }
 }

package/src/helpers/matchMedia.native.ts

@@ -1,4 +1,7 @@
 import type { MatchMedia, MediaQueryList } from '../types'
+import { formatDiagnostic } from './formatDiagnostic'
+import { mediaObjectToString } from './mediaObjectToString'
+import { mediaQueryConfig } from './mediaState'
 
 let matchMediaImpl: MatchMedia = matchMediaFallback
 
@@ -6,7 +9,19 @@ export const matchMedia: MatchMedia = (...args) => matchMediaImpl(...args)
 
 function matchMediaFallback(query: string): MediaQueryList {
   if (!process.env.IS_STATIC && process.env.NODE_ENV === 'development') {
-    console.warn('warning: matchMedia implementation is not provided.')
+    const keys = Object.keys(mediaQueryConfig).filter(
+      (key) => mediaObjectToString(mediaQueryConfig[key]) === query
+    )
+    console.warn(
+      formatDiagnostic(
+        'TAMAGUI_MATCH_MEDIA_NATIVE',
+        'matchMedia',
+        'no native matchMedia implementation is installed',
+        'Call setupMatchMedia before configuring media queries',
+        'keys,query',
+        { keys, query }
+      )
+    )
   }
   return {
     match: (a, b) => false,

package/src/helpers/mediaState.ts

@@ -1,42 +1,28 @@
 import type { MediaQueries, MediaQueryState } from '../types'
 
-export let mediaState: MediaQueryState =
-  // development only safeguard
-  process.env.NODE_ENV === 'development'
-    ? new Proxy(
-        {},
-        {
-          get(target, key) {
-            if (
-              typeof key === 'string' &&
-              key[0] === '$' &&
-              // dont error on $$typeof
-              key[1] !== '$'
-            ) {
-              throw new Error(`Access mediaState should not use "$": ${key}`)
-            }
-            return Reflect.get(target, key)
-          },
-        }
-      )
-    : ({} as any)
+export let mediaState: MediaQueryState = {} as any
 
 export const setMediaState = (next: MediaQueryState) => {
   mediaState = next
 }
 
+export const mediaQueryConfig: MediaQueries = {}
+
 export const getMedia = () => mediaState
 
-// shared across copies of this package for the same reason setConfig writes
-// globalThis.__tamaguiConfig: an esm import and a cjs require resolve to
-// different files, and only the copy that ran createTamagui fills these.
-// sharing the containers rather than looking them up per read costs nothing.
-const shared = (globalThis.__tamaguiMediaShared ||= {
-  queryConfig: {} as MediaQueries,
-  keys: new Set<string>(), // with $ prefix
-  keysOrdered: [] as string[],
-})
+export const mediaKeys = new Set<string>()
 
-export const mediaQueryConfig: MediaQueries = shared.queryConfig
-export const mediaKeys: Set<string> = shared.keys
-export const mediaKeysOrdered: string[] = shared.keysOrdered
+export function mediaKeyMatch(
+  key: string,
+  dimensions: { width: number; height: number }
+) {
+  const mediaQueries = mediaQueryConfig[key]
+  for (const query in mediaQueries) {
+    const expectedVal = +mediaQueries[query]
+    const isMax = query.startsWith('max')
+    const isWidth = query.endsWith('Width')
+    const givenVal = dimensions[isWidth ? 'width' : 'height']
+    if (isMax ? givenVal >= expectedVal : givenVal <= expectedVal) return false
+  }
+  return true
+}

package/src/helpers/mergeProps.ts

@@ -6,8 +6,6 @@
  * are merging defaultProps, givenProps, but we started using it elsewhere and now its a bit confusing
  * Should look into refactoring this to match common usage
  *
- * Merges sub-objects if they start are pseudo-keys or media-key-like (start with "$")
- *
  *    Given:
  *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })
  *    The final key order will be:
@@ -15,8 +13,6 @@
  *
  */
 
-import { pseudoDescriptors } from './pseudoDescriptors'
-
 export type GenericProps = Record<string, any>
 
 export const mergeProps = (defaultProps: object, props: object) => {
@@ -36,7 +32,7 @@ export const mergeProps = (defaultProps: object, props: object) => {
   }
 
   for (const key in props) {
-    mergeProp(out, defaultProps, props, key)
+    out[key] = props[key]
   }
 
   return out
@@ -84,7 +80,7 @@ export const mergeComponentProps = (
   }
 
   for (const key in props) {
-    mergeProp(out, defaultProps, props, key)
+    out[key] = props[key]
     if (contextProps && key in contextProps) {
       overriddenContext ||= {}
       overriddenContext[key] = props[key]
@@ -93,29 +89,3 @@ export const mergeComponentProps = (
 
   return [out, overriddenContext] as const
 }
-
-function mergeProp(
-  out: object,
-  defaultProps: object | undefined | null,
-  props: object,
-  key: string
-) {
-  let val = props[key]
-
-  // one special case - we merge tamagui style sub-objects
-  if (
-    defaultProps &&
-    key in defaultProps &&
-    (key in pseudoDescriptors || key[0] === '$') &&
-    val &&
-    typeof val === 'object'
-  ) {
-    const defaultVal = defaultProps[key]
-    if (defaultVal && typeof defaultVal === 'object') {
-      // use merge props so we prefer the key ordering the the last merged
-      val = mergeProps(defaultVal, val)
-    }
-  }
-
-  out[key] = val
-}

package/src/helpers/mergeVariants.ts

@@ -1,40 +1,99 @@
 import type { GenericVariantDefinitions } from '../types'
+import { styledDynamicSymbol } from '../types'
+import { isPlainObject } from './isObj'
 
-// deep merge variants
-// except for functions which override any parents
+function mergeVariantValues(earlier: unknown, later: unknown): unknown {
+  if (typeof earlier !== 'string' || typeof later !== 'string') return later
+  if (!earlier.includes(':') && !later.includes(':')) return later
+
+  const getSlot = (token: string, colon: number) => {
+    const slot: string[] = []
+    for (let modifier of token.slice(0, colon).split(':')) {
+      if (modifier === 'active') modifier = 'press'
+      else if (modifier.startsWith('group-active')) {
+        modifier = modifier.replace('group-active', 'group-press')
+      }
+      let index = 0
+      while (index < slot.length && slot[index] < modifier) index++
+      if (slot[index] !== modifier) slot.splice(index, 0, modifier)
+    }
+    return slot.join(':')
+  }
+
+  const clauses = new Map<string, string>()
+  let base: string | undefined
+  const add = (source: string, reject: boolean) => {
+    for (const token of source.trim().split(/\s+/)) {
+      const colon = token.lastIndexOf(':')
+      if (colon === -1) base = token
+      else {
+        if (colon === token.length - 1) {
+          if (reject) return false
+          continue
+        }
+        const slot = getSlot(token, colon)
+        clauses.delete(slot)
+        clauses.set(slot, token)
+      }
+    }
+    return true
+  }
+  add(earlier, false)
+  if (!add(later, true)) return later
+  return [base, ...clauses.values()].filter(Boolean).join(' ')
+}
+
+// same key ordering as mergeProps (parent keys first, then ours), but a key
+// present on both sides merges its clauses instead of being replaced outright
+function mergeStyleBranch(
+  parentBranch: Record<string, any>,
+  ourBranch: Record<string, any>
+) {
+  const out: Record<string, any> = { ...parentBranch }
+  for (const key in ourBranch) {
+    out[key] =
+      key in parentBranch
+        ? mergeVariantValues(parentBranch[key], ourBranch[key])
+        : ourBranch[key]
+  }
+  return out
+}
 
 export const mergeVariants = (
-  parentVariants: GenericVariantDefinitions,
-  ourVariants: GenericVariantDefinitions,
+  parentVariants?: GenericVariantDefinitions | Record<string, any>,
+  ourVariants?: GenericVariantDefinitions | Record<string, any>,
   level = 0
 ) => {
-  const variants = {}
+  if (!ourVariants) {
+    return parentVariants || {}
+  }
+  if (!parentVariants) {
+    return ourVariants || {}
+  }
+
+  const variants: Record<string, any> = { ...parentVariants }
 
   for (const key in ourVariants) {
     const parentVariant = parentVariants?.[key]
     const ourVariant = ourVariants[key]
-    if (!parentVariant || typeof ourVariant === 'function') {
+    if (
+      !isPlainObject(parentVariant) ||
+      !isPlainObject(ourVariant) ||
+      // styled.dynamic carriers are atomic: a child redefinition replaces the
+      // parent's outright, never merges (spreading a bare marker's brand into
+      // an enumerated child would turn it into a consumed no-op)
+      styledDynamicSymbol in parentVariant ||
+      styledDynamicSymbol in ourVariant
+    ) {
       variants[key] = ourVariant
-    } else if (parentVariant && !ourVariant) {
-      variants[key] = parentVariant[key]
     } else {
       if (level === 0) {
-        variants[key] = mergeVariants(
-          parentVariant as Record<string, any>,
-          ourVariant as Record<string, any>,
-          level + 1
-        )
+        variants[key] = mergeVariants(parentVariant, ourVariant, level + 1)
       } else {
-        variants[key] = {
-          ...parentVariant,
-          ...ourVariant,
-        }
+        variants[key] = mergeStyleBranch(parentVariant, ourVariant)
       }
     }
   }
 
-  return {
-    ...parentVariants,
-    ...variants,
-  }
+  return variants
 }

package/src/helpers/nativeOnlyProps.ts

@@ -31,7 +31,6 @@ export const nativeOnlyProps = {
   onMagicTap: 1,
   onTextLayout: 1,
   pressRetentionOffset: 1,
-  selectionColor: 1,
   shouldRasterizeIOS: 1,
   suppressHighlighting: 1,
   textBreakStrategy: 1,

package/src/helpers/nativeStyleEngine.ts

@@ -0,0 +1,385 @@
+/**
+ * Injectable native style engine (plans/native-fast-path.md).
+ *
+ * When set (native only, experimental), eligible leaf components link their
+ * host view to the engine and theme changes commit styles straight to the
+ * native ShadowTree with zero React re-renders. The engine contract matches
+ * `@tamagui/native-registry`; core stays free of any native dependency and
+ * web builds never set an engine.
+ *
+ * Batching: one theme cascade fires many per-view updates synchronously; a
+ * microtask flush folds them into a single applyViewStates call, which the
+ * engine commits in one ShadowTree transaction.
+ */
+
+import { getVariableValue } from '../createVariable'
+
+/**
+ * CSS-shaped Input color styles lower back to React Native TextInput props.
+ * Keeping this table beside native color processing makes the runtime and
+ * compiler use one RN compatibility boundary after token resolution.
+ */
+export const nativeTextInputColorProps: Readonly<Record<string, string>> = {
+  placeholderTextColor: 'placeholderTextColor',
+  selectionColor: 'selectionColor',
+  cursorColor: 'cursorColor',
+  selectionHandleColor: 'selectionHandleColor',
+}
+
+const nativeOutlineProps = [
+  'outlineStyle',
+  'outlineWidth',
+  'outlineColor',
+  'outlineOffset',
+] as const
+
+const nativeIntrinsicSizeProps = [
+  'width',
+  'height',
+  'minWidth',
+  'minHeight',
+  'maxWidth',
+  'maxHeight',
+] as const
+
+/** drops CSS values Fabric cannot accept; state tables use null to clear lower layers */
+export function normalizeNativeStyle(
+  style: Record<string, unknown>,
+  reset = false
+): Record<string, unknown> {
+  let next: Record<string, unknown> | undefined
+
+  if (style.outlineStyle === 'none') {
+    next = { ...style }
+    for (const key of nativeOutlineProps) {
+      if (reset) {
+        next[key] = null
+      } else {
+        delete next[key]
+      }
+    }
+  }
+
+  for (const key of nativeIntrinsicSizeProps) {
+    const value = style[key]
+    if (value === 'max-content' || value === 'min-content' || value === 'fit-content') {
+      next ||= { ...style }
+      if (reset) {
+        next[key] = null
+      } else {
+        delete next[key]
+      }
+    }
+  }
+
+  return next ?? style
+}
+
+export interface NativeStyleEngineLinkHandle {
+  id: number
+  unlink: () => void
+}
+
+export interface NativeViewStateUpdate {
+  id: number
+  state: string
+  props?: Record<string, unknown>
+}
+
+export interface NativeViewStateTableUpdate {
+  id: number
+  state: string
+  props: Record<string, unknown>
+}
+
+export interface NativeStyleEngineSlots {
+  base?: Record<string, unknown>
+  state?: Record<string, Record<string, unknown>>
+}
+
+export type NativeStyleThemeMapping = Record<string, string>
+
+export interface NativeStyleEngine {
+  link(
+    ref: unknown,
+    slots: NativeStyleEngineSlots,
+    scopeId?: string
+  ): NativeStyleEngineLinkHandle | null
+  applyViewStates(entries: NativeViewStateUpdate[]): void
+  updateViewStateTables(entries: NativeViewStateTableUpdate[]): void
+  processStyleColors(props: Record<string, unknown>): Record<string, unknown>
+  setStateName(stateName: string, scopeId?: string): void
+  removeScope(scopeId: string): void
+}
+
+let engine: NativeStyleEngine | null = null
+const scopeStates = new Map<string, { name: string; theme: object }>()
+
+interface CompiledMappingLink {
+  handle: NativeStyleEngineLinkHandle
+  scopeId: string
+  stateThemes: Map<string, object>
+}
+
+interface ResolvedMappingState {
+  theme: object
+  /** raw resolved values, what React renders through RN's own style normalizer */
+  renderProps: Record<string, unknown>
+  /** engine transport form after processStyleColors, never handed back to React */
+  nativeProps: Record<string, unknown>
+}
+
+interface CompiledMapping {
+  mapping: NativeStyleThemeMapping
+  states: Map<string, ResolvedMappingState>
+  links: Set<CompiledMappingLink>
+}
+
+const mappingKeys = new WeakMap<object, string>()
+const compiledMappings = new Map<string, CompiledMapping>()
+// linked mappings remain update owners across memo-generation rollovers
+const activeCompiledMappings = new Set<CompiledMapping>()
+const processedBases = new WeakMap<
+  object,
+  { engine: NativeStyleEngine; props: Record<string, unknown> }
+>()
+
+function getCompiledMapping(mapping: NativeStyleThemeMapping): CompiledMapping {
+  let key = mappingKeys.get(mapping)
+  if (!key) {
+    key = JSON.stringify(
+      Object.keys(mapping)
+        .sort()
+        .map((styleKey) => [styleKey, mapping[styleKey]])
+    )
+    mappingKeys.set(mapping, key)
+  }
+  let compiled = compiledMappings.get(key)
+  if (!compiled) {
+    compiled = { mapping, states: new Map(), links: new Set() }
+    if (compiledMappings.size >= 10_000) {
+      compiledMappings.clear()
+    }
+    compiledMappings.set(key, compiled)
+  }
+  return compiled
+}
+
+function resolveCompiledMapping(
+  compiled: CompiledMapping,
+  stateName: string,
+  theme: Record<string, unknown>
+): ResolvedMappingState {
+  const cached = compiled.states.get(stateName)
+  if (cached?.theme === theme) return cached
+
+  let renderProps: Record<string, unknown> = {}
+  for (const styleKey in compiled.mapping) {
+    const value = theme[compiled.mapping[styleKey]]
+    renderProps[styleKey] = value === undefined ? null : getVariableValue(value)
+  }
+  renderProps = normalizeNativeStyle(renderProps, true)
+  // the engine's color form (srgb maps for Fabric's C++ parser) must not flow
+  // back through React: RN's JS style normalizer misreads it
+  const nativeProps = engine?.processStyleColors(renderProps) ?? renderProps
+  if (compiled.states.size >= 10_000) {
+    compiled.states.clear()
+    for (const link of compiled.links) {
+      link.stateThemes.clear()
+    }
+  }
+  const resolved: ResolvedMappingState = { theme, renderProps, nativeProps }
+  compiled.states.set(stateName, resolved)
+  return resolved
+}
+
+export function setNativeStyleEngine(next: NativeStyleEngine | null): void {
+  if (engine !== next) {
+    compiledMappings.clear()
+    activeCompiledMappings.clear()
+  }
+  engine = next
+  if (next) {
+    for (const [scopeId, state] of scopeStates) {
+      next.setStateName(state.name, scopeId)
+    }
+  }
+}
+
+export function getNativeStyleEngine(): NativeStyleEngine | null {
+  return engine
+}
+
+export function updateNativeStyleScope(
+  scopeId: string,
+  stateName: string,
+  theme: object
+): void {
+  const previous = scopeStates.get(scopeId)
+  if (previous?.name === stateName && previous.theme === theme) return
+  scopeStates.set(scopeId, { name: stateName, theme })
+
+  if (engine) {
+    const entries: NativeViewStateTableUpdate[] = []
+    for (const compiled of activeCompiledMappings) {
+      let props: Record<string, unknown> | undefined
+      for (const link of compiled.links) {
+        if (link.scopeId !== scopeId) continue
+        const linkedTheme = link.stateThemes.get(stateName)
+        if (linkedTheme === theme) continue
+        props ||= resolveCompiledMapping(
+          compiled,
+          stateName,
+          theme as Record<string, unknown>
+        ).nativeProps
+        entries.push({ id: link.handle.id, state: stateName, props })
+        link.stateThemes.set(stateName, theme)
+      }
+    }
+    if (entries.length) engine.updateViewStateTables(entries)
+  }
+  engine?.setStateName(stateName, scopeId)
+}
+
+export function removeNativeStyleScope(scopeId: string): void {
+  if (!scopeStates.delete(scopeId)) return
+  engine?.removeScope(scopeId)
+}
+
+export function resolveNativeStyleMapping(
+  mapping: NativeStyleThemeMapping,
+  stateName: string,
+  theme: Record<string, unknown>
+): Record<string, unknown> {
+  return resolveCompiledMapping(getCompiledMapping(mapping), stateName, theme).renderProps
+}
+
+export function linkNativeStyleMapping(
+  ref: unknown,
+  baseStyle: Record<string, unknown>,
+  mapping: NativeStyleThemeMapping,
+  scopeId: string,
+  stateName: string,
+  theme: Record<string, unknown>
+): NativeStyleEngineLinkHandle | null {
+  if (!engine) return null
+
+  const compiled = getCompiledMapping(mapping)
+  // a scope can advance (layout effect) after a concurrent render captured its
+  // theme but before that render's host ref links. the engine's link() only
+  // stores tables, it never commits, so link against the live scope state and
+  // commit that table once to correct the stale React commit.
+  const scopeState = scopeStates.get(scopeId)
+  const currentStateName = scopeState?.name ?? stateName
+  const currentTheme = (scopeState?.theme ?? theme) as Record<string, unknown>
+  const stale = currentStateName !== stateName || currentTheme !== theme
+  const stateProps = resolveCompiledMapping(
+    compiled,
+    currentStateName,
+    currentTheme
+  ).nativeProps
+  let base = processedBases.get(baseStyle)
+  if (!base || base.engine !== engine) {
+    base = {
+      engine,
+      props: engine.processStyleColors(normalizeNativeStyle(baseStyle)),
+    }
+    processedBases.set(baseStyle, base)
+  }
+  const state: Record<string, Record<string, unknown>> = {}
+  const stateThemes = new Map<string, object>()
+  for (const [name, cached] of compiled.states) {
+    state[name] = cached.nativeProps
+    stateThemes.set(name, cached.theme)
+  }
+  state[currentStateName] = stateProps
+  stateThemes.set(currentStateName, currentTheme)
+  const handle = engine.link(ref, { base: base.props, state }, scopeId)
+  if (!handle) return null
+
+  if (stale) {
+    engine.updateViewStateTables([
+      { id: handle.id, state: currentStateName, props: stateProps },
+    ])
+  }
+
+  const link: CompiledMappingLink = {
+    handle,
+    scopeId,
+    stateThemes,
+  }
+  compiled.links.add(link)
+  activeCompiledMappings.add(compiled)
+  return {
+    id: handle.id,
+    unlink: () => {
+      compiled.links.delete(link)
+      if (!compiled.links.size) {
+        activeCompiledMappings.delete(compiled)
+      }
+      handle.unlink()
+    },
+  }
+}
+
+/** memo-generation and live-owner sizes for development diagnostics and probes */
+export const getNativeStyleEngineCacheStats = () => ({
+  mappings: compiledMappings.size,
+  activeMappings: activeCompiledMappings.size,
+  states: [...new Set([...compiledMappings.values(), ...activeCompiledMappings])].reduce(
+    (total, compiled) => total + compiled.states.size,
+    0
+  ),
+})
+
+let pending: NativeViewStateUpdate[] | null = null
+let flushListener: ((entries: NativeViewStateUpdate[]) => void) | null = null
+
+/**
+ * instrumentation hook: called after each batched native flush with the
+ * flushed entries (benchmarks, parity tests)
+ */
+export function setNativeStyleEngineFlushListener(
+  cb: ((entries: NativeViewStateUpdate[]) => void) | null
+): void {
+  flushListener = cb
+}
+
+/**
+ * Host-ref hook for createComponent: links eligible mounted hosts to the
+ * engine, unlinks on detach. `nativeStyleUpdate` presence is the per-render
+ * eligibility signal; a host that mounts ineligible simply never links.
+ */
+export function updateNativeStyleLink(
+  ref: {
+    nativeLink?: NativeStyleEngineLinkHandle | null
+    nativeStyleUpdate?: unknown
+    nativePushedKeys?: Set<string>
+  },
+  host: unknown
+): void {
+  if (ref.nativeLink) {
+    ref.nativeLink.unlink()
+    ref.nativeLink = null
+  }
+  // pushed-key tracking is per-link: a new native view starts from the props
+  // React committed, nothing pushed yet
+  ref.nativePushedKeys = undefined
+  if (host && engine && ref.nativeStyleUpdate) {
+    ref.nativeLink = engine.link(host, {})
+  }
+}
+
+export function queueNativeViewState(entry: NativeViewStateUpdate): void {
+  if (!engine) return
+  if (!pending) {
+    pending = []
+    queueMicrotask(() => {
+      const entries = pending!
+      pending = null
+      engine?.applyViewStates(entries)
+      flushListener?.(entries)
+    })
+  }
+  pending.push(entry)
+}