@tamagui/web 3.0.0-beta.924.1 → 3.0.1

package/src/hooks/useMedia.tsx

@@ -14,7 +14,6 @@ import {
 } from '../helpers/mediaState'
 export { mediaKeyMatch } from '../helpers/mediaState'
 import type {
-  ComponentContextI,
   DebugProp,
   MediaQueryState,
   TamaguiInternalConfig,
@@ -171,6 +170,10 @@ type MediaState = {
 // for any earlier-rendered media-dependent sibling.
 const States = new WeakMap<any, MediaState>()
 
+// the same per-instance rule holds for the emitter: createComponent passes its
+// stateRef.current, so a media change restyles that component alone
+type MediaEmitter = { mediaEmit?: (state: UseMediaState) => void }
+
 // shared "touch tracker" prototype: one object whose enumerable getter
 // properties are pre-defined for every configured media key. Hermes inlines
 // getter calls; the old `new Proxy(state, { get })` path forced an interpreted
@@ -247,8 +250,8 @@ type MediaRef = {
   // by mutating `proxyTarget` and re-reading it in the get trap.
   proxyTarget: MediaQueryState
   proxy: UseMediaState
-  getSnapshot: () => MediaQueryState
-  componentContext?: ComponentContextI
+  getSnapshot: (inRender?: boolean) => MediaQueryState
+  emitter?: MediaEmitter
   uid?: object
   debug?: DebugProp
   optimizeForFirstRender: boolean
@@ -318,7 +321,7 @@ function sameMediaKeys(a: Set<string> | null, b: Set<string> | null) {
 }
 
 export function useMedia(
-  componentContext?: ComponentContextI,
+  emitter?: MediaEmitter,
   debug?: DebugProp,
   // per-component-instance key for the States map (createComponent passes
   // stateRef.current, matching its setMediaShouldUpdate call)
@@ -345,7 +348,7 @@ export function useMedia(
       proxyTarget: initial,
       proxy: undefined as unknown as UseMediaState,
       getSnapshot: undefined as unknown as () => MediaQueryState,
-      componentContext,
+      emitter,
       uid,
       debug,
       optimizeForFirstRender,
@@ -362,56 +365,42 @@ export function useMedia(
       } as MediaRefSlot
       r.proxy = tracker as UseMediaState
     }
-    r.getSnapshot = () => {
-      if (r.optimizeForFirstRender) {
-        const ms = getMedia()
-        if (ms === r.lastState) {
-          return r.lastState
-        }
-
-        if (r.componentContext?.mediaEmit) {
-          r.componentContext.mediaEmit(ms)
-          r.pendingState = ms
-          return r.lastState
-        }
-
-        r.lastState = ms
-        return ms
-      }
-
-      const curKeys = mediaListenKeys(r)!
-      const { lastState, pendingState } = r
-
-      if (!curKeys.size) {
-        return lastState
-      }
-
+    r.getSnapshot = (inRender) => {
+      const { lastState } = r
+      const curKeys = mediaListenKeys(r)
       const ms = getMedia()
-      for (const key of curKeys) {
-        if (ms[key] !== (pendingState || lastState)[key]) {
-          if (process.env.NODE_ENV === 'development' && r.debug) {
-            console.warn(`useMedia() ✍️`, key, lastState[key], '=>', ms[key])
+      if (curKeys) {
+        let changed = false
+        for (const key of curKeys) {
+          if (ms[key] !== (r.pendingState || lastState)[key]) {
+            if (process.env.NODE_ENV === 'development' && r.debug) {
+              console.warn(`useMedia() ✍️`, key, lastState[key], '=>', ms[key])
+            }
+            changed = true
+            break
           }
-
-          // in emitter mode (no-rerender) avoid changing state, instead emit
-          if (r.componentContext?.mediaEmit) {
-            r.componentContext.mediaEmit(ms)
-            r.pendingState = ms
-            return lastState
-          }
-
-          r.lastState = ms
-
-          return ms
         }
+        if (!changed) return lastState
+      } else if (ms === lastState) {
+        return lastState
       }
 
-      return lastState
+      // render-time emits update siblings through setState, so defer those
+      // until render finishes; effect and subscription emits stay synchronous.
+      const mediaEmit = r.emitter?.mediaEmit
+      if (mediaEmit) {
+        if (inRender) queueMicrotask(() => mediaEmit(ms))
+        else mediaEmit(ms)
+        r.pendingState = ms
+        return lastState
+      }
+      r.lastState = ms
+      return ms
     }
     internalRef.current = r
   } else {
     // refresh per-render inputs the closures read through the ref
-    internalRef.current.componentContext = componentContext
+    internalRef.current.emitter = emitter
     internalRef.current.uid = uid
     internalRef.current.debug = debug
   }
@@ -440,7 +429,7 @@ export function useMedia(
     ? initState
     : ref.optimizeForFirstRender && ref.renderVersion === 1
       ? ref.lastState
-      : ref.getSnapshot()
+      : ref.getSnapshot(true)
   ref.proxyTarget = state
   if (!ref.optimizeForFirstRender) {
     ;(ref.proxy as any)[refSlot].proxyTarget = state

package/src/hooks/useSplitStyles.tsx

@@ -29,7 +29,10 @@ export const useSplitStyles: StyleSplitter = (
 
   const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m, n)
 
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET !== 'native') {
+  if (
+    process.env.TAMAGUI_RUNTIME !== 'island' &&
+    process.env.TAMAGUI_TARGET !== 'native'
+  ) {
     useInsertEffectCompat(() => {
       if (res) {
         insertStyleRules(res.rulesToInsert)

package/src/hooks/useThemeState.ts

@@ -8,6 +8,7 @@ import {
   useRef,
   type MutableRefObject,
 } from 'react'
+import { getThemeScheme as getScheme } from '@tamagui/helpers'
 import { getConfig, getSetting } from '../config'
 import { MISSING_THEME_MESSAGE } from '../constants/constants'
 import type {
@@ -17,6 +18,7 @@ import type {
   UseThemeWithStateProps,
 } from '../types'
 import type { ThemeUpdateState } from '../helpers/themeUpdateState'
+import { getAuthoredThemeScheme } from '../helpers/themes'
 
 type ID = string
 
@@ -29,7 +31,6 @@ const HadTheme = new WeakMap<object, boolean>()
 const PendingUpdate = new Map<any, boolean | 'force'>()
 
 const states: Map<ID, ThemeState | undefined> = new Map()
-const localStates: Map<ID, ThemeState | undefined> = new Map()
 
 let shouldForce = false
 export const forceUpdateThemes = () => {
@@ -110,7 +111,7 @@ export const useThemeState = (
   }
 
   const id = useId()
-  const propsKey = getPropsKey(props)
+  const propsKey = `${props.name || ''}${props.forceClassName || ''}${props._themeUpdate?.key || ''}`
 
   if (cascadeOnChange) {
     registerThemeProviderChain(id, parentId, props)
@@ -119,20 +120,14 @@ export const useThemeState = (
   const ref = useRef<ThemeStateRef>(null as any)
   const r = (ref.current ||= {
     id,
-    parentId,
-    props,
-    propsKey,
-    isRoot,
-    keys,
-    schemeKeys,
     optimizeForFirstRender,
     renderVersion: 0,
-  })
+  } as ThemeStateRef)
   r.props = props
   r.propsKey = propsKey
   r.isRoot = isRoot
   r.keys = keys
-  r.schemeKeys = schemeKeys
+  if (process.env.TAMAGUI_TARGET === 'native') r.schemeKeys = schemeKeys
   r.parentId = parentId
   r.renderVersion++
 
@@ -145,15 +140,15 @@ export const useThemeState = (
 
     if (r.lastSnap && !states.has(r.id)) {
       states.set(r.id, r.lastSnap)
-      localStates.set(r.id, r.lastSnap)
+      r.state = r.lastSnap
     }
 
     if (cascadeOnChange && !themeProviderParents.has(r.id)) {
       registerThemeProviderChain(r.id, r.parentId, r.props)
     }
 
-    if (r.unsubscribe && r.subscribedParentId !== r.parentId) {
-      cleanupThemeSubscription(r)
+    if (r.unsubscribe && r.subscribedTo !== r.parentId) {
+      r.unsubscribe?.()
     }
 
     if (shouldSubscribeToTheme(r, cascadeOnChange)) {
@@ -177,19 +172,19 @@ export const useThemeState = (
           PendingUpdate.set(sid, forced ? 'force' : true)
           cb(forced)
         })
-        r.subscribedParentId = pid
+        r.subscribedTo = pid
         r.unsubscribe = () => {
           allListeners.delete(sid)
           listenersByParent[pid]?.delete(sid)
-          localStates.delete(sid)
+          r.state = undefined
           states.delete(sid)
           PendingUpdate.delete(sid)
           r.unsubscribe = undefined
-          r.subscribedParentId = undefined
+          r.subscribedTo = undefined
         }
       }
     } else if (r.unsubscribe) {
-      cleanupThemeSubscription(r)
+      r.unsubscribe?.()
     }
 
     return () => {
@@ -222,6 +217,7 @@ export const useThemeState = (
 }
 
 type SnapshotRef = {
+  state?: ThemeState
   id: string
   parentId: string
   props: UseThemeWithStateProps
@@ -235,7 +231,7 @@ type SnapshotRef = {
 type ThemeStateRef = SnapshotRef & {
   renderVersion: number
   unsubscribe?: () => void
-  subscribedParentId?: string
+  subscribedTo?: string
   lastSnap?: ThemeState
 }
 
@@ -249,15 +245,11 @@ const shouldSubscribeToTheme = (r: ThemeStateRef, cascadeOnChange: boolean): boo
     r.props.needsUpdate?.()
   )
 
-function cleanupThemeSubscription(r: ThemeStateRef) {
-  r.unsubscribe?.()
-}
-
 function cleanupThemeState(r: ThemeStateRef) {
   if (r.unsubscribe) {
-    cleanupThemeSubscription(r)
+    r.unsubscribe()
   } else {
-    localStates.delete(r.id)
+    r.state = undefined
     states.delete(r.id)
     PendingUpdate.delete(r.id)
   }
@@ -266,23 +258,17 @@ function cleanupThemeState(r: ThemeStateRef) {
 }
 
 const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
-  const {
-    id,
-    parentId,
-    props,
-    propsKey,
-    isRoot,
-    keys,
-    schemeKeys,
-    optimizeForFirstRender,
-  } = r
-  let local = localStates.get(id)
+  const { id, parentId, props, propsKey, isRoot, keys, optimizeForFirstRender } = r
+  const schemeKeys = process.env.TAMAGUI_TARGET === 'native' ? r.schemeKeys : undefined
+  // useId values repeat across server renders; each hook owns its snapshot.
+  let local = r.state
   const parentState = states.get(parentId)
 
   if (local && !PendingUpdate.has(id)) {
     if (
       parentState &&
       (local as any)._parentName === parentState.name &&
+      (local as any)._parentSchemeAuthored === parentState.schemeAuthored &&
       (local as any)._propsKey === propsKey
     ) {
       return local
@@ -299,17 +285,23 @@ const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
     local.scheme !== parentState.scheme &&
     getThemeBaseName(local.name) === getThemeBaseName(parentState.name)
 
-  const allKeysSchemeOptimized =
-    !optimizeForFirstRender &&
-    Boolean(keys.current?.size && schemeKeys?.current?.size === keys.current.size)
-
-  const canSkipForSchemeChange = Boolean(isSchemeOnlyChange && allKeysSchemeOptimized)
+  const canSkipForSchemeChange = Boolean(
+    isSchemeOnlyChange &&
+    keys.current?.size &&
+    schemeKeys?.current?.size === keys.current.size
+  )
 
+  // forceClassName renders its resolved name as classes, so a nameless one that
+  // mirrors its parent still has to re-render when the parent's scheme flips
   const needsUpdate = props.passThrough
     ? false
     : optimizeForFirstRender
       ? true
-      : isRoot || props.name === 'light' || props.name === 'dark' || props.name === null
+      : isRoot ||
+          props.forceClassName ||
+          props.name === 'light' ||
+          props.name === 'dark' ||
+          props.name === null
         ? true
         : !HasRenderedOnce.get(keys)
           ? true
@@ -343,7 +335,7 @@ const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
 
   if (!local || rerender) {
     local = { ...next }
-    localStates.set(id, local)
+    r.state = local
   }
 
   if (next !== local) {
@@ -351,6 +343,8 @@ const getSnapshotImpl = (r: SnapshotRef): ThemeState => {
     local.id = id
   }
   ;(local as any)._parentName = parentState?.name
+  // scheme intent can change while the resolved name stays the same.
+  ;(local as any)._parentSchemeAuthored = parentState?.schemeAuthored
   ;(local as any)._propsKey = propsKey
   states.set(id, next)
 
@@ -369,8 +363,10 @@ const getNextState = (
 ): [boolean, ThemeState] => {
   const parentState = states.get(parentId)
 
+  // passThrough adds no theme of its own, so it mirrors the parent's current
+  // state. preferring lastState froze it, and every descendant, on its first theme
   if (props.passThrough) {
-    return [false, lastState || parentState || ({ name: '' } as any)]
+    return [false, parentState || lastState || ({ name: '' } as any)]
   }
 
   themes ||= getConfig().themes
@@ -383,20 +379,39 @@ const getNextState = (
           props,
           pendingUpdate === 'force' ? true : !!needsUpdate
         )
-  const isSameAsParent = Boolean(parentState && (!name || name === parentState.name))
+  // explicit schemes pin even when resolution reuses the parent's theme name.
+  const authoredName = props.name
+  const parentSchemeAuthored = !!parentState?.schemeAuthored
+  const schemeAuthored = isRoot
+    ? !!props.forceClassName
+    : parentSchemeAuthored ||
+      !!(authoredName && getScheme(authoredName) && authoredName in themes)
+  const intentChanged = schemeAuthored !== parentSchemeAuthored
+  const resolvedName = name || parentState?.name
+  const sameAsLast =
+    lastState &&
+    lastState.name === resolvedName &&
+    !!lastState.schemeAuthored === schemeAuthored
+
+  const isSameAsParent = Boolean(
+    parentState && resolvedName === parentState.name && !intentChanged
+  )
   const shouldRerender = Boolean(
     pendingUpdate === 'force' ||
-    (needsUpdate && (pendingUpdate || lastState?.name !== parentState?.name))
+    (needsUpdate &&
+      (pendingUpdate ||
+        lastState?.name !== parentState?.name ||
+        !!lastState?.schemeAuthored !== schemeAuthored))
   )
 
   if (isSameAsParent) {
-    if (!shouldRerender && lastState && lastState.name === parentState!.name) {
+    if (!shouldRerender && sameAsLast) {
       return [false, lastState]
     }
     return [shouldRerender, { ...parentState!, isNew: false }]
   }
 
-  if (!name) {
+  if (!resolvedName) {
     const next = lastState ??
       parentState ??
       rootThemeState ?? {
@@ -412,20 +427,22 @@ const getNextState = (
     return [false, next]
   }
 
-  const scheme = getScheme(name)
+  // a same-name pin still introduces its own scope.
+  const scheme = getAuthoredThemeScheme(themes[resolvedName]) || getScheme(resolvedName)
   const parentInverses = parentState?.inverses ?? 0
   const isInverse = Boolean(parentState && scheme !== parentState.scheme)
   const inverses = parentInverses + (isInverse ? 1 : 0)
 
   const nextState: ThemeState = {
     id,
-    name,
-    theme: themes[name],
+    name: resolvedName,
+    theme: themes[resolvedName],
     scheme,
     parentId,
     parentName: parentState?.name,
     inverses,
     isInverse,
+    schemeAuthored,
     isNew: true,
   }
 
@@ -433,17 +450,7 @@ const getNextState = (
     rootThemeState = nextState
   }
 
-  if (pendingUpdate !== 'force' && lastState && lastState.name === name) {
-    return [false, nextState]
-  }
-
-  const shouldAvoidRerender =
-    pendingUpdate !== 'force' &&
-    lastState &&
-    !needsUpdate &&
-    nextState.name === lastState.name
-
-  return [!shouldAvoidRerender, nextState]
+  return [pendingUpdate === 'force' || !sameAsLast, nextState]
 }
 
 function scheduleUpdate(id: string) {
@@ -468,15 +475,6 @@ function scheduleUpdate(id: string) {
   })
 }
 
-const validSchemes = {
-  light: 'light',
-  dark: 'dark',
-} as const
-
-function getScheme(name: string) {
-  return validSchemes[name.split('_')[0]]
-}
-
 export function getNewThemeName(
   parentName = '',
   props: UseThemeWithStateProps,
@@ -534,15 +532,12 @@ export function resolveThemeName(
     }
   }
 
-  if (!forceUpdate && found === parentName && !validSchemes[found]) {
+  if (!forceUpdate && found === parentName && found !== 'light' && found !== 'dark') {
     return null
   }
 
   return found
 }
 
-const getPropsKey = ({ name, forceClassName, _themeUpdate }: UseThemeWithStateProps) =>
-  `${name || ''}${forceClassName || ''}${_themeUpdate?.key || ''}`
-
 export const hasThemeUpdatingProps = (props: UseThemeWithStateProps) =>
   'name' in props || 'forceClassName' in props || '_themeUpdate' in props

package/src/index.ts

@@ -50,10 +50,18 @@ export {
 } from './helpers/splitStyleProps'
 export { normalizeColor } from './helpers/normalizeColor'
 export { normalizeStyle } from './helpers/normalizeStyle'
+export { resolveTextMetrics } from './helpers/nativeTextMetrics'
+export {
+  defaultSizing,
+  resolveSizing,
+  type ResolvedSizing,
+  type SizingEnv,
+} from './helpers/resolveSizing'
 export { containsThemeRef, themeRefKey } from './helpers/themeRef'
 export { getStyleTags } from './helpers/wrapStyleTags'
 
 export { createFont } from './createFont'
+export { fluid, type FluidOptions } from './helpers/fluid'
 export {
   createChangeEventDetails,
   type TamaguiChangeEventDetails,
@@ -86,12 +94,15 @@ export type {
   AnimationDriver,
   AnimationDriverStub,
   AnimationDriverWithAnimatedNumbers,
+  AnimatedTextChannel,
+  NativeTextMetrics,
   AnimationsConfig,
   BorderValue,
   BoxShadowValue,
   Color,
   ColorScheme,
   ColorTokens,
+  ComponentSize,
   CreateTamaguiConfig,
   CreateTamaguiProps,
   DebugProp,
@@ -113,6 +124,7 @@ export type {
   FontWeightTokens,
   Fonts,
   GenericFont,
+  GenericSizing,
   GenericStackVariants,
   GenericTamaguiConfig,
   GenericTextVariants,
@@ -153,6 +165,7 @@ export type {
   Shorthands,
   Size,
   SizeKeys,
+  SizeRecipe,
   SizeTokens,
   Space,
   SpaceTokens,

package/src/interfaces/RNExclusiveTypes.ts

@@ -3,7 +3,7 @@ import type {
   LayoutChangeEvent,
   TextLayoutEventData,
   NativeSyntheticEvent,
-} from 'react-native'
+} from '@tamagui/react-native-types'
 
 type OnLayout = ((event: LayoutChangeEvent) => void) | undefined
 type OnTextLayout =
@@ -16,7 +16,6 @@ export interface RNExtraProps {
   onSelectionChangeShouldSetResponder?: unknown
   onSelectionChangeShouldSetResponderCapture?: unknown
   onLayout?: OnLayout
-  elevationAndroid?: number | string
 }
 
 export interface RNViewProps extends GestureResponderHandlers, RNExtraProps {
@@ -40,7 +39,6 @@ export type RNOnlyProps =
   | 'onTextLayout'
   | 'href'
   | 'hrefAttrs'
-  | 'elevationAndroid'
   | 'rel'
   | 'download'
   | 'dir'

package/src/internal-runtime.ts

@@ -9,15 +9,20 @@
  */
 import type { FunctionComponent } from 'react'
 import { stylePropsUnitless } from '@tamagui/helpers'
+import type { TagName } from '@tamagui/dom'
 import { createComponent } from './createComponent'
 import { createVariables as createVariablesImpl } from './createVariables'
+import { html } from './dom/html'
 import { fixStyles as fixStylesImpl } from './helpers/expandStyles'
 import { styleToCSS as styleToCSSImpl } from './helpers/styleToCSS'
 import { getThemeCSSRules as getThemeCSSRulesImpl } from './helpers/getThemeCSSRules'
 import { normalizeValueWithProperty as normalizeValueWithPropertyImpl } from './helpers/normalizeValueWithProperty'
 import { proxyThemeToParents as proxyThemeToParentsImpl } from './helpers/proxyThemeToParents'
 import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend'
-import { ensureThemeVariable as ensureThemeVariableImpl } from './helpers/themes'
+import {
+  copyAuthoredThemeScheme as copyAuthoredThemeSchemeImpl,
+  ensureThemeVariable as ensureThemeVariableImpl,
+} from './helpers/themes'
 import { transformsToString as transformsToStringImpl } from './helpers/transformsToString'
 import {
   parseFont as parseFontImpl,
@@ -31,7 +36,7 @@ import { TamaguiProvider as TamaguiProviderImpl } from './views/TamaguiProvider'
 import { textStaticConfig } from './views/Text'
 import { viewStaticConfig } from './views/View'
 
-export { regularStyleFrontend } from './helpers/styleFrontend'
+export { mergeFrontendCondition, regularStyleFrontend } from './helpers/styleFrontend'
 export type * from './internalRuntimeTypes'
 
 export const createVariables: (
@@ -57,6 +62,8 @@ export const proxyThemeToParents: (themeName: string, theme: any) => any =
   proxyThemeToParentsImpl
 export const ensureThemeVariable: (theme: any, key: string) => void =
   ensureThemeVariableImpl
+export const copyAuthoredThemeScheme: <T>(target: T, source: any) => T =
+  copyAuthoredThemeSchemeImpl
 export const transformsToString: (transforms: object[]) => string = transformsToStringImpl
 export const styleToCSS: (style: Record<string, any>) => void = styleToCSSImpl
 export const useThemeWithState: (
@@ -131,3 +138,37 @@ export function createFrontendViews(frontend: StyleFrontend): {
     }),
   }
 }
+
+/** the tags `createFrontendHTML` builds, which is every tag of the DOM contract */
+export type FrontendHTMLTag = TagName
+
+/**
+ * The DOM contract's elements rebuilt on another style frontend: same tags, same
+ * element defaults, same runtime, only the authoring syntax differs. Mirrors
+ * `createFrontendViews`, and is safe for the same reason: the regular singletons
+ * keep their own config objects and `createComponent` never mutates one.
+ */
+export function createFrontendHTML(
+  frontend: StyleFrontend
+): Record<FrontendHTMLTag, FrontendComponent> {
+  const out = {} as Record<FrontendHTMLTag, FrontendComponent>
+  for (const tag in html) {
+    const source = html[tag] as FrontendComponent & {
+      rebindDOMTag?: (next: FrontendComponent) => FrontendComponent
+    }
+    // a tag native does not support is a thrower with nothing to rebuild
+    if (!source.staticConfig) {
+      out[tag] = source
+      continue
+    }
+    const rebuilt = createComponent({
+      ...source.staticConfig,
+      styleFrontend: frontend,
+      displayName: tag,
+    })
+    // on native the styling component is wrapped in the dom prop mapping, which
+    // the rebuild has to keep
+    out[tag] = source.rebindDOMTag ? source.rebindDOMTag(rebuilt) : rebuilt
+  }
+  return out
+}

package/src/style.ts

@@ -75,9 +75,12 @@ export function createStylePiece(
  */
 export function style(definition: StaticShapeStyle): StylePiece {
   if (process.env.NODE_ENV === 'development') {
+    // the owner is the component rendering right now. the hooks dispatcher
+    // (`H`) stays set between renders, so it flags module-scope pieces in any
+    // module loaded after the first render
     const internals = (React as any)
       .__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE
-    if (internals?.H) {
+    if (internals?.A?.getOwner?.()) {
       warnOnce(
         '[tamagui] style() was called during render. Define style pieces at module scope so their rules compile once.'
       )