@tamagui/web 3.0.0-beta.755.1 → 3.0.0-beta.804.1

package/src/static-resolve.ts

@@ -0,0 +1,396 @@
+/**
+ * Lean, side-effect-free static style resolution entry for @tamagui/web.
+ *
+ * Designed for build-time compilers (Rust one-bundler QuickJS host, Vite, static extractor)
+ * to evaluate config and resolve extracted static props with zero React/DOM/React Native
+ * runtime dependencies.
+ */
+
+import {
+  StyleObjectIdentifier,
+  StyleObjectProperty,
+  StyleObjectRules,
+  stylePropsText,
+  validStyles as validStylesView,
+} from '@tamagui/helpers'
+import {
+  getConfig,
+  getConfigMaybe,
+  getThemes,
+  getToken,
+  getTokens,
+  getTokenValue,
+  setConfig,
+  updateConfig,
+} from './config'
+import { createTamagui, installTamaguiConfig } from './createTamagui'
+import { getSplitStyles, prepareStyleStaticConfig } from './helpers/getSplitStyles'
+import { mergeComponentProps } from './helpers/mergeProps'
+import type {
+  SplitStyleProps,
+  StaticConfig,
+  TamaguiComponentState,
+  TamaguiInternalConfig,
+  ThemeParsed,
+} from './types'
+
+export {
+  createTamagui,
+  getConfig,
+  getConfigMaybe,
+  getSplitStyles,
+  getThemes,
+  getToken,
+  getTokens,
+  getTokenValue,
+  installTamaguiConfig,
+  prepareStyleStaticConfig,
+  setConfig,
+  updateConfig,
+}
+
+export type { StaticConfig, TamaguiComponentState, TamaguiInternalConfig, ThemeParsed }
+
+export interface StaticResolveOptions {
+  resolveValues?: 'variable' | 'except-theme' | 'value' | 'none'
+  noClass?: boolean
+  isAnimated?: boolean
+  displayName?: string
+}
+
+export interface StaticResolveElementPlan {
+  id: string | number
+  props: Record<string, any>
+  componentName?: string
+  staticConfig?: Partial<StaticConfig>
+  themeName?: string
+  componentState?: Partial<TamaguiComponentState>
+  options?: StaticResolveOptions
+}
+
+export interface StaticResolveBatchPlan {
+  target?: 'web' | 'native'
+  defaultThemeName?: string
+  elements: StaticResolveElementPlan[]
+}
+
+export interface StaticResolveRuleOutput {
+  identifier: string
+  property?: string
+  rules: string[]
+}
+
+export interface StaticResolveElementResult {
+  id: string | number
+  ok: boolean
+  className?: string
+  classNames?: Record<string, string>
+  rules?: StaticResolveRuleOutput[]
+  css?: string[]
+  style?: Record<string, any> | null
+  viewProps?: Record<string, any>
+  hasMedia?: string[] | boolean
+  pseudoGroups?: string[]
+  mediaGroups?: string[]
+  programStates?: string[]
+  dynamicThemeAccess?: boolean
+  fontFamily?: string
+  programLifecycleStyleKeys?: {
+    enter?: string[]
+    exit?: string[]
+  }
+  bailout?: {
+    reason: string
+    message: string
+  }
+}
+
+export interface StaticResolveBatchResult {
+  results: StaticResolveElementResult[]
+}
+
+const DEFAULT_COMPONENT_STATE: TamaguiComponentState = {
+  hover: false,
+  focus: false,
+  focusVisible: false,
+  focusWithin: false,
+  press: false,
+  pressIn: false,
+  disabled: false,
+  unmounted: false,
+}
+
+const getGlobalProcessEnv = () => {
+  try {
+    return typeof process !== 'undefined' && process ? process.env : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Resolves static styles for a single element against the currently installed Tamagui config.
+ */
+export function resolveStaticElement(
+  element: StaticResolveElementPlan,
+  target: 'web' | 'native' = 'web',
+  defaultThemeName?: string
+): StaticResolveElementResult {
+  const conf = getConfigMaybe()
+  if (!conf) {
+    return {
+      id: element.id,
+      ok: false,
+      bailout: {
+        reason: 'config-missing',
+        message:
+          'No Tamagui config installed. Call createTamagui or installTamaguiConfig first.',
+      },
+    }
+  }
+
+  const themes = conf.themes || {}
+  const themeName =
+    element.themeName ||
+    defaultThemeName ||
+    (themes['light'] ? 'light' : Object.keys(themes)[0]) ||
+    'light'
+  const theme: ThemeParsed =
+    themes[themeName] ||
+    themes['light'] ||
+    themes['dark'] ||
+    Object.values(themes)[0] ||
+    ({} as ThemeParsed)
+
+  const isTextLike = Boolean(
+    element.staticConfig?.isText || element.staticConfig?.isInput
+  )
+  const baseStaticConfig: StaticConfig = {
+    validStyles: isTextLike ? stylePropsText : validStylesView,
+    defaultProps: {},
+    acceptsClassName: target !== 'native',
+    ...(target === 'native' && { isReactNative: true }),
+    ...element.staticConfig,
+  }
+  if (target !== 'native') {
+    delete baseStaticConfig.isReactNative
+  }
+  prepareStyleStaticConfig(baseStaticConfig)
+
+  // merge component defaultProps if defined on staticConfig
+  let elementProps = element.props || {}
+  if (
+    baseStaticConfig.defaultProps &&
+    Object.keys(baseStaticConfig.defaultProps).length > 0
+  ) {
+    const [merged] = mergeComponentProps(
+      baseStaticConfig.defaultProps,
+      undefined,
+      elementProps
+    )
+    elementProps = merged
+  }
+
+  const componentState: TamaguiComponentState = {
+    ...DEFAULT_COMPONENT_STATE,
+    ...element.componentState,
+  }
+
+  const styleProps: SplitStyleProps = {
+    resolveValues:
+      element.options?.resolveValues ??
+      (target === 'native' ? 'except-theme' : 'variable'),
+    noClass: element.options?.noClass ?? target === 'native',
+    isAnimated: element.options?.isAnimated ?? false,
+    displayName:
+      element.options?.displayName ??
+      element.componentName ??
+      element.staticConfig?.Component?.displayName ??
+      'TamaguiComponent',
+  }
+
+  const env = getGlobalProcessEnv()
+  const prevStatic = env ? env['IS_STATIC'] : undefined
+  const prevTarget = env ? env['TAMAGUI_TARGET'] : undefined
+  if (env) {
+    if (target === 'native') {
+      env['IS_STATIC'] = 'is_static'
+    } else {
+      delete env['IS_STATIC']
+    }
+    env['TAMAGUI_TARGET'] = target
+  }
+
+  let split: ReturnType<typeof getSplitStyles> | null = null
+  try {
+    split = getSplitStyles(
+      elementProps,
+      baseStaticConfig,
+      theme,
+      themeName,
+      componentState,
+      styleProps
+    )
+  } catch (err: any) {
+    return {
+      id: element.id,
+      ok: false,
+      bailout: {
+        reason: 'local/style-resolution-error',
+        message: err?.message || String(err),
+      },
+    }
+  } finally {
+    if (env) {
+      if (prevStatic === undefined) delete env['IS_STATIC']
+      else env['IS_STATIC'] = prevStatic
+      if (prevTarget === undefined) delete env['TAMAGUI_TARGET']
+      else env['TAMAGUI_TARGET'] = prevTarget
+    }
+  }
+
+  if (!split) {
+    return {
+      id: element.id,
+      ok: false,
+      bailout: {
+        reason: 'local/style-resolution-failed',
+        message: 'getSplitStyles returned no static result',
+      },
+    }
+  }
+
+  // Native target does not support static media queries, pseudos, or runtime lifecycle programs
+  if (target === 'native') {
+    const hasMedia =
+      split.hasMedia === true ||
+      (split.hasMedia instanceof Set && split.hasMedia.size > 0)
+
+    const hasPseudo =
+      Boolean(split.pseudoGroups && split.pseudoGroups.size > 0) ||
+      Boolean(split.mediaGroups && split.mediaGroups.size > 0) ||
+      Boolean(split.programStates && split.programStates.size > 0)
+
+    if (hasMedia || hasPseudo) {
+      return {
+        id: element.id,
+        ok: false,
+        bailout: {
+          reason: 'local/unsupported-target',
+          message: 'Native target does not support static media queries or pseudo styles',
+        },
+      }
+    }
+
+    if (
+      split.programLifecycleStyleKeys?.enter?.size ||
+      split.programLifecycleStyleKeys?.exit?.size
+    ) {
+      return {
+        id: element.id,
+        ok: false,
+        bailout: {
+          reason: 'local/unsupported-target',
+          message: 'Lifecycle value programs remain on the runtime path',
+        },
+      }
+    }
+  }
+
+  const rules: StaticResolveRuleOutput[] = []
+  const css: string[] = []
+  if (split.rulesToInsert) {
+    for (const key in split.rulesToInsert) {
+      const ruleObj = split.rulesToInsert[key]
+      if (ruleObj) {
+        const ruleList = ((ruleObj as any)[StyleObjectRules] || []) as string[]
+        rules.push({
+          identifier: (ruleObj as any)[StyleObjectIdentifier] || key,
+          property: (ruleObj as any)[StyleObjectProperty],
+          rules: ruleList,
+        })
+        for (let i = 0; i < ruleList.length; i++) {
+          css.push(ruleList[i])
+        }
+      }
+    }
+  }
+
+  const classNames = split.classNames || {}
+  const classNamesList = Object.values(classNames).filter(Boolean)
+  const fullClassName = (split.viewProps?.className as string) || undefined
+  const className =
+    fullClassName || (classNamesList.length > 0 ? classNamesList.join(' ') : undefined)
+
+  return {
+    id: element.id,
+    ok: true,
+    className,
+    classNames: Object.keys(classNames).length > 0 ? classNames : undefined,
+    rules: rules.length > 0 ? rules : undefined,
+    css: css.length > 0 ? css : undefined,
+    style: split.style || split.viewProps?.style || null,
+    viewProps: split.viewProps,
+    hasMedia:
+      split.hasMedia instanceof Set
+        ? Array.from(split.hasMedia)
+        : split.hasMedia || undefined,
+    pseudoGroups:
+      split.pseudoGroups && split.pseudoGroups.size > 0
+        ? Array.from(split.pseudoGroups)
+        : undefined,
+    mediaGroups:
+      split.mediaGroups && split.mediaGroups.size > 0
+        ? Array.from(split.mediaGroups)
+        : undefined,
+    programStates:
+      split.programStates && split.programStates.size > 0
+        ? Array.from(split.programStates)
+        : undefined,
+    dynamicThemeAccess: split.dynamicThemeAccess,
+    fontFamily: split.fontFamily,
+    programLifecycleStyleKeys: split.programLifecycleStyleKeys
+      ? {
+          enter: split.programLifecycleStyleKeys.enter
+            ? Array.from(split.programLifecycleStyleKeys.enter)
+            : undefined,
+          exit: split.programLifecycleStyleKeys.exit
+            ? Array.from(split.programLifecycleStyleKeys.exit)
+            : undefined,
+        }
+      : undefined,
+  }
+}
+
+/**
+ * Resolves a batch of element extraction plans against the active Tamagui config.
+ */
+export function resolveStaticBatch(
+  batch: StaticResolveBatchPlan
+): StaticResolveBatchResult {
+  const target = batch.target || 'web'
+  const defaultThemeName = batch.defaultThemeName
+  const elements = batch.elements || []
+  const results: StaticResolveElementResult[] = new Array(elements.length)
+
+  for (let i = 0; i < elements.length; i++) {
+    results[i] = resolveStaticElement(elements[i], target, defaultThemeName)
+  }
+
+  return { results }
+}
+
+/**
+ * Polymorphic batched static resolver. Accepts either a JSON string (for embedded C / QuickJS FFI)
+ * or a JavaScript StaticResolveBatchPlan object, returning matching JSON or result object.
+ */
+export function resolveStatic(
+  batch: string | StaticResolveBatchPlan
+): string | StaticResolveBatchResult {
+  if (typeof batch === 'string') {
+    const parsed: StaticResolveBatchPlan = JSON.parse(batch)
+    const result = resolveStaticBatch(parsed)
+    return JSON.stringify(result)
+  }
+  return resolveStaticBatch(batch)
+}

package/src/styled.tsx

@@ -15,6 +15,7 @@ import {
 } from './helpers/componentDisplayName'
 import { mergeVariants } from './helpers/mergeVariants'
 import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend'
+import { warnOnce } from './helpers/warnOnce'
 import type { GetRef } from './interfaces/GetRef'
 import { getReactNativeConfig } from './setupReactNative'
 import type {
@@ -378,7 +379,6 @@ export function styledHtml<
     variants: variants as any,
     defaultProps: defaultProps as any,
     defaultVariants,
-    isReactNative: false,
     isText,
     acceptsClassName: true,
     context,
@@ -556,9 +556,27 @@ function styledImpl<
 
   const parentStaticConfig = ComponentIn['staticConfig'] as StaticConfig | undefined
 
+  const requestedReactNativeInterop = Boolean(
+    config?.isReactNative || parentStaticConfig?.isReactNative
+  )
+
+  if (
+    process.env.TAMAGUI_TARGET !== 'native' &&
+    process.env.NODE_ENV === 'development' &&
+    requestedReactNativeInterop
+  ) {
+    warnOnce(
+      'isReactNative-web-removed',
+      'The isReactNative styled-component option is native-only in Tamagui v3. React Native Web hosts on web are no longer adapted; use a component that accepts className, data-* attributes, and DOM events.'
+    )
+  }
+
+  const isReactNative =
+    process.env.TAMAGUI_TARGET === 'native' &&
+    Boolean(config?.isReactNative || parentStaticConfig?.isReactNative)
+
   const isPlainStyledComponent =
-    !!parentStaticConfig &&
-    !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC)
+    !!parentStaticConfig && !(isReactNative || parentStaticConfig.isHOC)
 
   const isNonStyledHOC = parentStaticConfig?.isHOC && !parentStaticConfig?.isStyledHOC
 
@@ -567,13 +585,12 @@ function styledImpl<
       ? ComponentIn
       : parentStaticConfig?.Component || ComponentIn
 
-  const reactNativeConfig = !parentStaticConfig
-    ? getReactNativeConfig(Component)
-    : undefined
+  const reactNativeConfig =
+    process.env.TAMAGUI_TARGET === 'native' && !parentStaticConfig
+      ? getReactNativeConfig(Component)
+      : undefined
 
-  const isReactNative = Boolean(
-    reactNativeConfig || config?.isReactNative || parentStaticConfig?.isReactNative
-  )
+  const resolvedIsReactNative = Boolean(reactNativeConfig || isReactNative)
 
   const staticConfigProps = (() => {
     let {
@@ -647,7 +664,7 @@ function styledImpl<
     const acceptsClassName =
       config?.acceptsClassName ??
       (isPlainStyledComponent ||
-        isReactNative ||
+        resolvedIsReactNative ||
         (parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName))
 
     const conf: Partial<StaticConfig> = {
@@ -661,7 +678,9 @@ function styledImpl<
       baseClassName: mergedBaseClassName,
       defaultProps,
       defaultVariants,
-      isReactNative,
+      ...(process.env.TAMAGUI_TARGET === 'native' && {
+        isReactNative: resolvedIsReactNative,
+      }),
       isText,
       acceptsClassName,
       context: mergedContext,
@@ -673,6 +692,10 @@ function styledImpl<
       ...(frontend && { styleFrontend: frontend }),
     }
 
+    if (process.env.TAMAGUI_TARGET !== 'native') {
+      delete conf.isReactNative
+    }
+
     // bail on non className views as well
     if (defaultProps['children'] || !acceptsClassName || mergedContext) {
       conf.neverFlatten = true

package/src/types.tsx

@@ -1,16 +1,21 @@
 import type { StyleObject } from '@tamagui/helpers'
-import type { CoreStateModifierName } from '@tamagui/style-grammar/runtime'
+import type {
+  CoreStateModifierName,
+  TransformAccumulator,
+} from '@tamagui/style-grammar/runtime'
 import type { Properties } from 'csstype'
 import type {
   CSSProperties,
   ComponentType,
   Context,
+  Dispatch,
   FunctionComponent,
   HTMLAttributes,
   ProviderExoticComponent,
   Ref as ReactRef,
   ReactNode,
   RefObject,
+  SetStateAction,
 } from 'react'
 import type {
   PressableProps,
@@ -318,15 +323,14 @@ export type TamaguiComponentPropsBaseBase = {
   group?: GroupNames | (string & {}) | boolean
 
   /**
-   * Marks this component as a query container: the shorthand for an unnamed
-   * `containerType="inline-size"` container that `@sm:`-style clauses in
-   * children measure against. Use the `containerName` / `containerType` style
-   * properties for named or full-size containers.
+   * Marks this component as an inline-size query container. A string names the
+   * container for matching `@sm/name:` clauses.
    */
-  container?: boolean
+  container?: boolean | (string & {})
 
   /**
-   * Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.
+   * Works alongside container. On native, children using container sizing can
+   * be hidden until the parent is measured.
    * See: https://tamagui.dev/docs/intro/props
    */
   untilMeasured?: 'hide' | 'show'
@@ -595,7 +599,7 @@ export type TamaguiProjectInfo = {
   nameToPaths: NameToPaths
 }
 
-// base props that are accepted by createComponent (additional to react-native-web)
+// base props accepted by createComponent in addition to the selected host's props
 
 export type DivAttributes = HTMLAttributes<HTMLDivElement>
 
@@ -608,6 +612,8 @@ export type ComponentSetStateShallow = React.Dispatch<
   React.SetStateAction<Partial<TamaguiComponentState>>
 >
 
+export type ComponentSetState = Dispatch<SetStateAction<TamaguiComponentState>>
+
 export type ComponentContextI = {
   disableSSR?: boolean
   inText: boolean
@@ -628,6 +634,9 @@ export type TamaguiComponentStateRef = {
   willHydrate?: boolean
   hasMeasured?: boolean
   hasAnimated?: boolean
+  shouldRegisterPresence?: boolean
+  didFinalizeInitialStyleFrame?: boolean
+  initialStyleFrameUnmounted?: TamaguiComponentState['unmounted']
   themeShallow?: boolean
   hasEverThemed?: boolean | 'wrapped'
   hasEverResetPresence?: boolean
@@ -636,6 +645,7 @@ export type TamaguiComponentStateRef = {
   isListeningToTheme?: boolean
   unPress?: Function
   setStateShallow?: ComponentSetStateShallow
+  setState?: ComponentSetState
   // hoisted base shallow-setter that always calls the real React setState.
   // kept on its own field so the avoidReRenders wrapper (which overwrites
   // `setStateShallow`) can capture this as its real-re-render escape hatch.
@@ -1286,19 +1296,6 @@ export interface GenericTamaguiSettings {
    */
   optimizeFor?: 'updates' | 'first-render'
 
-  /**
-   * On Web, this allows changing the behavior of container groups which by
-   * default uses `container-type: inline-size`.
-   */
-  webContainerType?:
-    | 'normal'
-    | 'size'
-    | 'inline-size'
-    | 'inherit'
-    | 'initial'
-    | 'revert'
-    | 'revert-layer'
-
   /**
    * Only allow shorthands when enabled. Recommended to be true to avoid having
    * two ways to style the same property.
@@ -1488,7 +1485,7 @@ export type TamaguiInternalConfig<
     defaultFontToken: `${string}`
     // multi-driver animation config (e.g., { default: motionDriver, css: cssDriver })
     // used for component-level driver selection via animatedBy prop
-    animationDrivers?: Record<string, AnimationDriver>
+    animationDrivers?: Record<string, AnimationDriverLike | null>
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']
@@ -1857,7 +1854,7 @@ export type GetTokenFontKeysFor<
 > = keyof TamaguiConfig['fonts']['body'][A]
 
 export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>
-export type FontFamilyTokens = GetTokenString<GetTokenFontKeysFor<'family'>>
+export type FontFamilyTokens = FontTokens
 export type FontSize =
   | GetTokenString<GetTokenFontKeysFor<'size'>>
   | number
@@ -2954,7 +2951,7 @@ export type GetStyleState = {
   avoidMergeTransform?: boolean
   fontFamily?: string
   debug?: DebugProp
-  flatTransforms?: Record<string, any>
+  transformAccumulator?: TransformAccumulator
   // direct flat-value scan context and its subscription output
   flatRulesToInsert?: RulesToInsert
   flatShouldDoClasses?: boolean
@@ -2962,13 +2959,14 @@ export type GetStyleState = {
   flatMediaState?: Record<string, boolean | undefined>
   flatGroupContext?: AllGroupContexts | null
   flatConditionOrder?: number
-  flatActiveConditions?: Record<string, true>
   flatStateKeys?: Set<string>
   flatMediaKeys?: Set<string>
   flatGroupKeys?: Set<string>
   flatGroupMedia?: Set<string>
   flatEnterKeys?: Set<string>
   flatExitKeys?: Set<string>
+  flatHasEnterStyle?: boolean
+  flatHasPlatformPseudo?: boolean
   flatUsesSafeArea?: boolean
   // Track style values that override context props (for issues #3670, #3676)
   overriddenContextProps?: Record<string, any>
@@ -2996,7 +2994,8 @@ export type PropMapper = (
   value: any,
   state: GetStyleState,
   disabled: boolean,
-  map: (key: string, val: any, originalVal?: any, conditionSource?: string) => void
+  parentCondition?: number,
+  fallbackOriginal?: any
 ) => void
 
 export type GenericVariantDefinitions = {
@@ -3076,9 +3075,7 @@ export type StaticConfigPublic = {
    */
   isZStack?: boolean
 
-  /**
-   * Auto-detect, but can override, passes styles properly to react-native-web
-   */
+  /** Native-only marker for components backed by a React Native host. */
   isReactNative?: boolean
 
   /**
@@ -3393,6 +3390,7 @@ export type ResolveVariableAs =
 export type SplitStyleProps = {
   displayName?: string
   styledContext?: Record<string, any>
+  styledContextKeys?: Set<string>
   mediaState?: Record<string, boolean>
   noClass?: boolean
   noExpand?: boolean
@@ -3404,6 +3402,7 @@ export type SplitStyleProps = {
   hasTextAncestor?: boolean
   // for animations
   willBeAnimated?: boolean // we need to track media queries even before animation
+  canPlatformPseudo?: boolean
   isAnimated: boolean
   isExiting?: boolean
 }
@@ -3426,6 +3425,10 @@ type NotPresent = [false, SafeToRemoveCallback, PresenceContextProps]
 
 export type UsePresenceResult = AlwaysPresent | Present | NotPresent
 
+export type PresenceRegistration = {
+  shouldRegisterPresence?: boolean
+}
+
 // Animations:
 
 type AnimationConfig = {
@@ -3478,7 +3481,6 @@ export type UseAnimatedNumber<
 > = (initial: number) => N
 
 type AnimationDriverBase<A extends AnimationConfig = AnimationConfig> = {
-  isReactNative?: boolean
   /** What style format the driver expects as input: 'css' (CSS variables) or 'value' (resolved values) */
   inputStyle?: 'css' | 'value'
   /** How the driver outputs styles: 'css' (className-based) or 'inline' (style object) */
@@ -3496,7 +3498,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> =
     /** When true, this is a stub driver with no real animation support */
     isStub?: boolean
     useAnimations: UseAnimationHook
-    usePresence: () => UsePresenceResult
+    usePresence: (registration?: PresenceRegistration) => UsePresenceResult
     ResetPresence: (props: {
       children?: React.ReactNode
       disabled?: boolean
@@ -3588,6 +3590,14 @@ export type GetStyleResult = {
     enter?: Set<string>
     exit?: Set<string>
   }
+  hasEnterStyle?: true
+  platformPseudo?: true
+  // behavior-bearing frontend candidates discovered by the same className
+  // walk as styles. createComponent consumes these before it builds descendant
+  // group/container context; they are never forwarded to the host.
+  frontendGroup?: boolean | string
+  frontendContainer?: boolean | string
+  frontendContainerType?: string
 }
 
 export type ClassNamesObject = Record<string, string>