@tamagui/web 3.0.0-beta.807.1 → 3.0.0-beta.831.1

package/src/config.ts

@@ -169,7 +169,7 @@ 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)

package/src/createComponent.tsx

@@ -19,9 +19,10 @@ import { GroupContext } from './contexts/GroupContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
 import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
-import { getDefaultProps } from './helpers/getDefaultProps'
 import { componentDisplayName } from './helpers/componentDisplayName'
-import { getSplitStyles, prepareStyleStaticConfig } from './helpers/getSplitStyles'
+import { getSplitStyles } from './helpers/getSplitStyles'
+import { getConfigRevisionState } from './helpers/grammarConfig'
+import { getStyleStaticConfig, type StyleStaticConfig } from './helpers/styleStaticConfig'
 import {
   getNativeStyleEngine,
   queueNativeViewState,
@@ -267,16 +268,10 @@ export function createComponent<
     )
   }
 
-  prepareStyleStaticConfig(staticConfig)
-
   let config: TamaguiInternalConfig | null = null
   let resolvedDefaultProps: Record<string, any> | undefined
-  let didResolveDefaultProps = false
-  const styledContextPropKeys =
-    staticConfig.contextProps || staticConfig.context?.propKeys
-  const styledContextKeys = styledContextPropKeys
-    ? new Set(styledContextPropKeys)
-    : undefined
+  let resolvedStyleRevision = -1
+  let resolvedStyleStaticConfig: StyleStaticConfig | undefined
 
   const { Component, isText, isHOC } = staticConfig
 
@@ -290,11 +285,11 @@ export function createComponent<
 
   let res: ComponentType
 
+  const { displayName } = staticConfig
+
   const component = (propsInWithRef: ComponentPropTypes & { ref?: React.Ref<Ref> }) => {
     'use no memo'
 
-    const displayName = (res as any)[componentDisplayName] as string | undefined
-
     // read the forwarded ref directly off the incoming props — do NOT clone the
     // whole object every render just to strip `ref`. the original props object is
     // passed straight through; `ref` is skipped in the getSplitStyles pass (so it
@@ -305,6 +300,29 @@ export function createComponent<
 
     config = config || getConfig()
 
+    const styleRevision = getConfigRevisionState(config).revision
+    if (resolvedStyleRevision !== styleRevision) {
+      resolvedStyleRevision = styleRevision
+      const nextStyleStaticConfig = getStyleStaticConfig(staticConfig, config)
+      resolvedStyleStaticConfig = nextStyleStaticConfig
+      resolvedDefaultProps = nextStyleStaticConfig.defaultProps
+      // the relative-position default is a style, so it joins the base layer
+      // under everything the call site writes
+      if (
+        isWeb &&
+        !staticConfig.isText &&
+        config.settings.defaultPosition === 'relative' &&
+        nextStyleStaticConfig.baseStyle?.position === undefined
+      ) {
+        resolvedStyleStaticConfig = {
+          ...nextStyleStaticConfig,
+          baseStyle: { position: 'relative', ...nextStyleStaticConfig.baseStyle },
+        }
+      }
+    }
+    const styleStaticConfig = resolvedStyleStaticConfig!
+    const styledContextKeys = styleStaticConfig.styledContextKeys
+
     const internalID = process.env.NODE_ENV === 'development' ? React.useId() : ''
 
     if (process.env.NODE_ENV === 'development') {
@@ -386,20 +404,6 @@ export function createComponent<
     let props: ViewProps | TextProps = propsIn
 
     // merge both default props and styled context props - ensure order is preserved
-    if (!didResolveDefaultProps) {
-      didResolveDefaultProps = true
-      const staticDefaultProps = getDefaultProps(staticConfig)
-      resolvedDefaultProps =
-        isWeb &&
-        !isText &&
-        config.settings.defaultPosition === 'relative' &&
-        staticDefaultProps?.position === undefined
-          ? staticDefaultProps
-            ? { position: 'relative', ...staticDefaultProps }
-            : { position: 'relative' }
-          : staticDefaultProps
-    }
-
     // merge styled context props over defaults, ensure order is preserved
     const [nextProps, overrides] = mergeComponentProps(
       resolvedDefaultProps,
@@ -763,7 +767,6 @@ export function createComponent<
       canPlatformPseudo: componentState.platformPseudo,
       displayName,
       styledContext: styledContextValue,
-      styledContextKeys,
     } as const
 
     const themeName = themeState?.name || ''
@@ -783,7 +786,8 @@ export function createComponent<
       elementType,
       startedUnhydrated,
       debugProp,
-      animationDriver
+      animationDriver,
+      styleStaticConfig
     )
 
     const finalizedComponentState = componentState.finalizeStyleFlags(
@@ -957,7 +961,8 @@ export function createComponent<
               elementType,
               startedUnhydrated,
               debugProp,
-              animationDriver
+              animationDriver,
+              styleStaticConfig
             )
             if (!nextStyles?.style) return false
 
@@ -1117,7 +1122,8 @@ export function createComponent<
           elementType,
           startedUnhydrated,
           debugProp,
-          animationDriver
+          animationDriver,
+          styleStaticConfig
         )
 
         const effectiveTransition =
@@ -2221,6 +2227,11 @@ export function createComponent<
 
   res.staticConfig = staticConfig
 
+  if (displayName) {
+    res.displayName = displayName
+    ;(res as any)[componentDisplayName] = displayName
+  }
+
   return res
 }
 

package/src/createStyledHOC.tsx

@@ -1,9 +1,6 @@
 import React, { type ReactNode, type Ref as ReactRef } from 'react'
-import {
-  componentDisplayName,
-  setComponentDisplayName,
-} from './helpers/componentDisplayName'
-import { themeable } from './helpers/themeable'
+import { componentDisplayName } from './helpers/componentDisplayName'
+import { Theme } from './views/Theme'
 import type {
   GetFinalProps,
   StaticConfig,
@@ -11,6 +8,7 @@ import type {
   StyledHOCOptions,
   TamaguiComponent,
   TamaDefer,
+  ThemeProps,
 } from './types'
 
 export function createStyledHOC<
@@ -70,18 +68,67 @@ export function createStyledHOC<
   }
 
   let out: any = function StyledHOCComponent(props: any) {
+    'use no memo'
+
     const { ref, ...rest } = props
-    return render(rest, ref)
-  }
+    if (options?.disableTheme) {
+      return render(rest, ref)
+    }
+
+    const defaultTheme = extendedConfig.defaultProps?.theme
+    const { theme: _, ...themedRest } = rest
+    const element = render({ ...themedRest, 'data-disable-theme': true }, ref)
+
+    let themeProps: Partial<ThemeProps> | null = null
+    if ('debug' in props) {
+      themeProps = { debug: props.debug }
+    }
+    if ('theme' in props || defaultTheme) {
+      ;(themeProps ||= {}).name = 'theme' in props ? props.theme : defaultTheme
+    }
 
-  out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
+    // keeping the theme key present with a null value keeps the tree stable
+    // across theme changes, while an entirely absent key avoids mounting Theme.
+    if (!themeProps) {
+      return element
+    }
+
+    const context = extendedConfig.context
+    if (!context) {
+      return (
+        <Theme disable-child-theme {...themeProps}>
+          {element}
+        </Theme>
+      )
+    }
+
+    const contextValue = React.useContext(context)
+    let overriddenContextProps: object | undefined
+    for (const key in context.props) {
+      const value = props[key]
+      if (value !== undefined) {
+        ;(overriddenContextProps ||= {})[key] = value
+      }
+    }
+    const Provider = context.Provider
+    return (
+      <Provider {...contextValue} {...overriddenContextProps}>
+        <Theme disable-child-theme {...themeProps}>
+          {element}
+        </Theme>
+      </Provider>
+    )
+  }
 
   if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLED_HOC) {
     out = React.memo(out)
   }
 
   const displayName = options?.displayName || (component as any)[componentDisplayName]
-  setComponentDisplayName(out, displayName)
+  if (displayName) {
+    out.displayName = displayName
+    out[componentDisplayName] = displayName
+  }
 
   out.staticConfig = extendedConfig
   return out

package/src/createTokens.ts

@@ -13,7 +13,7 @@ function validateNoTrueTokenKeys(tokens: CreateTokens) {
     const tokenSet = tokens[category]
     if (!tokenSet || typeof tokenSet !== 'object') continue
 
-    if (Object.prototype.hasOwnProperty.call(tokenSet, 'true')) {
+    if ('true' in tokenSet) {
       throw new Error(
         `tokens.${category}.true is reserved because boolean values select component defaults. Use an explicit token name instead.`
       )