@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1097.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -15,6 +15,16 @@
   "sideEffects": [
     "*.css"
   ],
+  "files": [
+    "src",
+    "types",
+    "dist",
+    "inject-styles",
+    "inject-styles.cjs",
+    "internal-runtime",
+    "static-resolve",
+    "reset.css"
+  ],
   "main": "dist/cjs",
   "module": "dist/esm",
   "types": "./types/index.d.ts",
@@ -30,6 +40,45 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./theme-update": {
+      "types": "./types/theme-update.d.ts",
+      "react-native": "./dist/esm/theme-update.native.js",
+      "browser": "./dist/esm/theme-update.mjs",
+      "module": "./dist/esm/theme-update.mjs",
+      "import": "./dist/esm/theme-update.mjs",
+      "require": "./dist/cjs/theme-update.cjs",
+      "default": "./dist/esm/theme-update.mjs"
+    },
+    "./dom": {
+      "react-native": {
+        "types": "./types/dom/index.native.d.ts",
+        "default": "./dist/esm/dom/index.native.js"
+      },
+      "types": "./types/dom/index.d.ts",
+      "browser": "./dist/esm/dom/index.mjs",
+      "module": "./dist/esm/dom/index.mjs",
+      "import": "./dist/esm/dom/index.mjs",
+      "require": "./dist/cjs/dom/index.cjs",
+      "default": "./dist/esm/dom/index.mjs"
+    },
+    "./internal-runtime": {
+      "types": "./types/internal-runtime.d.ts",
+      "react-native": "./dist/esm/internal-runtime.native.js",
+      "browser": "./dist/esm/internal-runtime.mjs",
+      "module": "./dist/esm/internal-runtime.mjs",
+      "import": "./dist/esm/internal-runtime.mjs",
+      "require": "./dist/cjs/internal-runtime.cjs",
+      "default": "./dist/esm/internal-runtime.mjs"
+    },
+    "./static-resolve": {
+      "types": "./types/static-resolve.d.ts",
+      "react-native": "./dist/esm/static-resolve.native.js",
+      "browser": "./dist/esm/static-resolve.mjs",
+      "module": "./dist/esm/static-resolve.mjs",
+      "import": "./dist/esm/static-resolve.mjs",
+      "require": "./dist/cjs/static-resolve.cjs",
+      "default": "./dist/esm/static-resolve.mjs"
+    },
     "./inject-styles": {
       "types": "./types/inject-styles.d.ts",
       "react-native": "./dist/esm/inject-styles.mjs",
@@ -51,27 +100,31 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/is-equal-shallow": "2.7.7",
-    "@tamagui/native": "2.7.7",
-    "@tamagui/normalize-css-color": "2.7.7",
-    "@tamagui/timer": "2.7.7",
-    "@tamagui/types": "2.7.7",
-    "@tamagui/use-did-finish-ssr": "2.7.7",
-    "@tamagui/use-event": "2.7.7",
-    "@tamagui/use-force-update": "2.7.7"
+    "@tamagui/animation-helpers": "3.0.0-beta.1097.1",
+    "@tamagui/compose-refs": "3.0.0-beta.1097.1",
+    "@tamagui/constants": "3.0.0-beta.1097.1",
+    "@tamagui/dom": "3.0.0-beta.1097.1",
+    "@tamagui/helpers": "3.0.0-beta.1097.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.1097.1",
+    "@tamagui/native": "3.0.0-beta.1097.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.1097.1",
+    "@tamagui/react-native-types": "3.0.0-beta.1097.1",
+    "@tamagui/style-grammar": "3.0.0-beta.1097.1",
+    "@tamagui/timer": "3.0.0-beta.1097.1",
+    "@tamagui/types": "3.0.0-beta.1097.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.1097.1",
+    "@tamagui/use-event": "3.0.0-beta.1097.1",
+    "@tamagui/use-force-update": "3.0.0-beta.1097.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.1097.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
-    "react": ">=19",
-    "react-dom": "*",
-    "react-native": "0.83.2",
-    "typescript": "~5.9.2",
-    "vitest": "4.0.4"
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.2",
+    "typescript": "~6.0.3",
+    "vitest": "4.1.0"
   },
   "peerDependencies": {
     "react": ">=19",

package/reset.css

@@ -36,24 +36,27 @@ button,
   outline: none;
 }
 
-.is_Fieldset {
+.tm-fieldset {
   all: unset;
 }
 
-p,
-input,
-textarea,
-button,
-ul,
-ol,
-li,
-pre,
-dialog {
+:where(p, input, textarea, button, ul, ol, li, pre, dialog) {
   all: unset;
   box-sizing: border-box;
 }
 
-a.is_Button,
-.is_Anchor:has(.is_Button) {
+/* `all: unset` above also unsets display, and this rule and the design
+   system's `:where(.is_View)` base are both zero specificity, so whichever
+   sheet loads last wins. Restate the base display so a tamagui-rendered
+   <button> or <p> keeps its layout however the sheets are ordered. */
+:where(.is_View) {
+  display: flex;
+}
+:where(.is_Text) {
+  display: inline;
+}
+
+a.tm-button,
+.tm-anchor:has(.tm-button) {
   text-decoration: none;
 }

package/src/_withNativeStyle.tsx

@@ -0,0 +1,84 @@
+import { setRef } from '@tamagui/compose-refs'
+import React, { useCallback, useContext, useRef } from 'react'
+import { _withStableStyle } from './_withStableStyle'
+import {
+  getNativeStyleEngine,
+  linkNativeStyleMapping,
+  resolveNativeStyleMapping,
+  type NativeStyleEngineLinkHandle,
+  type NativeStyleThemeMapping,
+} from './helpers/nativeStyleEngine'
+import { getThemeState, ThemeStateContext } from './hooks/useThemeState'
+
+/** internal: emitted by the native compiler when experimental.nativeFastPath is on */
+export const _withNativeStyle = (
+  Component: any,
+  baseStyle: Record<string, unknown>,
+  themeStyleKeys: NativeStyleThemeMapping
+) => {
+  const Fallback = _withStableStyle(
+    Component,
+    (theme) => {
+      const themedStyle: Record<string, unknown> = {}
+      for (const styleKey in themeStyleKeys) {
+        themedStyle[styleKey] = theme[themeStyleKeys[styleKey]]?.get()
+      }
+      return [baseStyle, themedStyle]
+    },
+    true,
+    false
+  )
+
+  const Native = React.memo(function NativeStyleView({
+    _scopeId,
+    ...props
+  }: {
+    _scopeId: string
+    [key: string]: any
+  }) {
+    const { ref, _expressions: _ignoredExpressions, ...rest } = props
+    const link = useRef<NativeStyleEngineLinkHandle | null>(null)
+    const themeState = getThemeState(_scopeId)
+    const stateName = themeState?.name
+    const theme = themeState?.theme
+    const hostRef = useCallback(
+      (host: unknown) => {
+        link.current?.unlink()
+        link.current = null
+        setRef(ref, host)
+        if (host && stateName && theme) {
+          link.current = linkNativeStyleMapping(
+            host,
+            baseStyle,
+            themeStyleKeys,
+            _scopeId,
+            stateName,
+            theme
+          )
+        }
+      },
+      [ref, _scopeId, stateName, theme]
+    )
+    const stateStyle =
+      stateName && theme
+        ? resolveNativeStyleMapping(themeStyleKeys, stateName, theme)
+        : undefined
+
+    if (process.env.NODE_ENV === 'development' && (!stateName || !theme)) {
+      throw new Error(
+        `[@tamagui/core] native fast path cannot resolve theme ${JSON.stringify(stateName)}`
+      )
+    }
+
+    return <Component ref={hostRef} style={[baseStyle, stateStyle]} {...rest} />
+  })
+
+  return React.memo(function NativeStyleBoundary(props: any) {
+    const scopeId = useContext(ThemeStateContext)
+    return getNativeStyleEngine() && scopeId ? (
+      <Native {...props} _scopeId={scopeId} />
+    ) : (
+      <Fallback {...props} />
+    )
+  })
+}

package/src/_withStableStyle.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import { getConfigMaybe } from './config'
+import { getVariable } from './createVariable'
 import { useMedia } from './hooks/useMedia'
 import { useTheme } from './hooks/useTheme'
 import { ThemeStateContext } from './hooks/useThemeState'
@@ -8,6 +9,7 @@ import { ThemeStateContext } from './hooks/useThemeState'
 
 const EMPTY_EXPRESSIONS: any[] = []
 const EMPTY_THEME = {}
+const FALLBACK_THEME_CACHE = new WeakMap<object, Record<string, any>>()
 
 export const _withStableStyle = (
   Component: any,
@@ -15,54 +17,70 @@ export const _withStableStyle = (
   hasThemeKeys?: boolean,
   hasMediaKeys?: boolean
 ) =>
-  React.memo(
-    React.forwardRef((props: any, ref) => {
-      const { _expressions = EMPTY_EXPRESSIONS, ...rest } = props
+  React.memo(function WithStableStyle(props: any) {
+    const { ref, ...propsWithoutRef } = props
+    const { _expressions = EMPTY_EXPRESSIONS, ...rest } = propsWithoutRef
 
-      const parentId = useContext(ThemeStateContext)
+    const parentId = useContext(ThemeStateContext)
 
-      // compile-time constants per wrapper, so conditional hooks are stable
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const theme = hasThemeKeys && parentId ? useTheme() : null
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const media = hasMediaKeys ? useMedia() : null
+    // compile-time constants per wrapper, so conditional hooks are stable
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const theme = hasThemeKeys && parentId ? useTheme() : null
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const media = hasMediaKeys ? useMedia() : null
 
-      const resolvedExpressions = media
-        ? _expressions.map((expr: any) =>
-            Array.isArray(expr)
-              ? !!(media[expr[0]] && expr[1])
-              : typeof expr === 'string'
-                ? media[expr]
-                : expr
-          )
-        : _expressions
+    const resolvedExpressions = media
+      ? _expressions.map((expr: any) =>
+          // ['gtLg', cond] needs the media query and the runtime condition
+          Array.isArray(expr)
+            ? !!(media[expr[0]] && expr[1])
+            : typeof expr === 'string'
+              ? media[expr]
+              : expr
+        )
+      : _expressions
 
-      let resolvedTheme: any = theme || EMPTY_THEME
-      if (hasThemeKeys && !parentId) {
-        // monorepo edge case: ThemeStateContext is from a different instance
-        const config = getConfigMaybe()
-        const themes = config?.themes
-        if (themes) {
-          for (const k in themes) {
-            resolvedTheme = themes.light || themes.dark || themes[k]
-            break
+    let resolvedTheme: any = theme || EMPTY_THEME
+    if (hasThemeKeys && !parentId) {
+      // monorepo edge case: ThemeStateContext is from a different instance
+      const config = getConfigMaybe()
+      const themes = config?.themes
+      if (themes) {
+        for (const k in themes) {
+          const fallbackTheme = themes.light || themes.dark || themes[k]
+          let gettableTheme = FALLBACK_THEME_CACHE.get(fallbackTheme)
+          if (!gettableTheme) {
+            gettableTheme = {}
+            for (const key in fallbackTheme) {
+              const value = fallbackTheme[key]
+              gettableTheme[key] =
+                typeof (value as any)?.get === 'function'
+                  ? value
+                  : {
+                      ...(value && typeof value === 'object' ? value : { val: value }),
+                      get: () => getVariable(value),
+                    }
+            }
+            FALLBACK_THEME_CACHE.set(fallbackTheme, gettableTheme)
           }
+          resolvedTheme = gettableTheme
+          break
         }
-        if (process.env.NODE_ENV === 'development') {
-          console.warn(
-            '[@tamagui] _withStableStyle: no ThemeStateContext found. ' +
-              'This usually means duplicate tamagui instances in a monorepo. ' +
-              'Falling back to default theme from config.'
-          )
-        }
       }
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '[@tamagui] _withStableStyle: no ThemeStateContext found. ' +
+            'This usually means duplicate tamagui instances in a monorepo. ' +
+            'Falling back to default theme from config.'
+        )
+      }
+    }
 
-      return (
-        <Component
-          ref={ref}
-          style={createStyle(resolvedTheme, resolvedExpressions)}
-          {...rest}
-        />
-      )
-    })
-  )
+    return (
+      <Component
+        ref={ref}
+        style={createStyle(resolvedTheme, resolvedExpressions)}
+        {...rest}
+      />
+    )
+  })

package/src/config.ts

@@ -7,8 +7,10 @@ import type {
   TamaguiInternalConfig,
   Token,
   Tokens,
-  TokensMerged,
+  TokensParsed,
 } from './types'
+import { formatDiagnostic } from './helpers/formatDiagnostic'
+import { prepareConfigRevision } from './helpers/grammarConfig'
 
 export type StyleCompat = 'legacy' | 'react-native' | 'web'
 
@@ -69,20 +71,20 @@ export const getSetting = <Key extends keyof GenericTamaguiSettings>(
   if (process.env.NODE_ENV === 'development') {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
-  return (
-    config!.settings[key] ??
-    // @ts-expect-error
-    config[key]
-  )
+  return config!.settings[key]
 }
 
 export function getStyleCompat(): StyleCompat {
   const config = getConfigFromGlobalOrLocal()
-  return (config?.settings.styleCompat ?? (config as any)?.styleCompat) || 'web'
+  return config?.settings?.styleCompat || 'web'
 }
 
 export const setConfig = (next: TamaguiInternalConfig) => {
   setConfigCalledByThisInstance = true
+  const previous = conf
+  const previousGlobal = globalThis.__tamaguiConfig
+  prepareConfigRevision(next)
+  if (conf !== previous || globalThis.__tamaguiConfig !== previousGlobal) return
   conf = next
   globalThis.__tamaguiConfig = next
 }
@@ -93,16 +95,22 @@ export const setConfigFont = (name: string, font: any, fontParsed: any) => {
     if (!config) throw new Error(haventCalledErrorMessage)
   }
   config!.fonts[name] = font
-  config!.fontsParsed[`$${name}`] = fontParsed
+  config!.fontsParsed[name] = fontParsed
+  prepareConfigRevision(config!)
 }
 
 export const getConfig = () => {
   const config = getConfigFromGlobalOrLocal()
   if (!config) {
     throw new Error(
-      process.env.NODE_ENV !== 'production'
-        ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering. Also, make sure all of your tamagui dependencies are on the same version (\`tamagui\`, \`@tamagui/package-name\`, etc.) not just in your package.json, but in your lockfile.`
-        : 'Err0'
+      formatDiagnostic(
+        'Err0',
+        'TamaguiConfig',
+        'no config is available',
+        'Call createTamagui before rendering and deduplicate Tamagui package versions',
+        'config',
+        config
+      )
     )
   }
   return config
@@ -112,44 +120,29 @@ export const getConfigMaybe = () => {
   return getConfigFromGlobalOrLocal()
 }
 
-// on globalThis for the same reason setConfig puts the config there: a project
-// can load two copies of this package, and only the one that ran createTamagui
-// would have this otherwise
-export function setTokens(next: TokensMerged) {
-  globalThis.__tamaguiTokensMerged = next
+let tokens: TokensParsed
+export function setTokens(next: TokensParsed) {
+  tokens = next
 }
 
-const getTokensMerged = (): TokensMerged => globalThis.__tamaguiTokensMerged
+// prefer the config over the module local: a project can load two copies of this
+// package, and only the one that ran createTamagui filled its local. the config
+// travels on globalThis so either copy reaches it
+const getTokensParsed = (): TokensParsed =>
+  getConfigFromGlobalOrLocal()?.tokensParsed ?? tokens
 
-export const getTokens = ({
-  prefixed,
-}: {
-  /**
-   * Force either with $ or without $ prefix
-   */
-  prefixed?: boolean
-} = {}): TokensMerged => {
-  const config = getConfigFromGlobalOrLocal()
+export const getTokens = (): TokensParsed => {
   if (process.env.NODE_ENV === 'development') {
-    if (!config) throw new Error(haventCalledErrorMessage)
+    if (!getConfigFromGlobalOrLocal()) throw new Error(haventCalledErrorMessage)
   }
-  const { tokens, tokensParsed } = config!
-  if (prefixed === false) return tokens as any
-  if (prefixed === true) return tokensParsed as any
-  return getTokensMerged()
+  return getTokensParsed()
 }
 
 export const getTokenObject = (value: Token, group?: keyof Tokens) => {
-  const config = getConfigFromGlobalOrLocal()
-  const tokensMerged = getTokensMerged()
-  return (
-    config!.specificTokens[value] ??
-    (group
-      ? tokensMerged[group]?.[value]
-      : tokensMerged[
-          Object.keys(tokensMerged).find((cat) => tokensMerged[cat][value]) || ''
-        ]?.[value])
-  )
+  const tokens = getTokensParsed()
+  return group
+    ? tokens[group]?.[value]
+    : tokens[Object.keys(tokens).find((cat) => tokens[cat][value]) || '']?.[value]
 }
 
 export const getToken = (value: Token, group?: keyof Tokens, useVariable = isWeb) => {
@@ -172,10 +165,11 @@ export const getThemes = () => getConfigFromGlobalOrLocal()!.themes
 export const updateConfig = (key: string, value: any) => {
   // for usage internally only
   const config = getConfigFromGlobalOrLocal()
-  if (!config || !Object.prototype.hasOwnProperty.call(config, key)) {
+  if (!config || key === '__proto__' || !(key in config)) {
     return
   }
   Object.assign(config[key], value)
+  prepareConfigRevision(config)
 }
 
 // searches by value name or token name

package/src/contexts/ComponentContext.tsx

@@ -2,14 +2,31 @@ import { useContext } from 'react'
 import { createStyledContext } from '../helpers/createStyledContext'
 import type { ComponentContextI } from '../types'
 
-export const ComponentContext = createStyledContext<ComponentContextI>({
-  disableSSR: undefined,
-  inText: false,
-  language: null,
-  animationDriver: null,
-  setParentFocusState: null,
-  insets: null,
-})
+const componentContextKeys = [
+  'disableSSR',
+  'inText',
+  'language',
+  'animationDriver',
+  'setParentFocusState',
+  'insets',
+] as const
+
+export const ComponentContext = createStyledContext<
+  ComponentContextI,
+  (typeof componentContextKeys)[number]
+>(
+  {
+    disableSSR: undefined,
+    inText: false,
+    language: null,
+    animationDriver: null,
+    setParentFocusState: null,
+    insets: null,
+  },
+  {
+    keys: componentContextKeys,
+  }
+)
 
 export const useConfiguration = () => {
   return useContext(ComponentContext)