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

package/src/dom/htmlRuntime.native.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType, FunctionComponent } from 'react'
 import { jsx } from 'react/jsx-runtime'
 
-import { setComponentDisplayName } from '../helpers/componentDisplayName'
+import { componentDisplayName } from '../helpers/componentDisplayName'
 import { DOMText } from './primitives.native'
 
 /**
@@ -203,7 +203,9 @@ export function createDOMTagFactory(tables: DOMPropTables) {
   ): Frame {
     const Tag: FunctionComponent<Record<string, any>> = (props) =>
       jsx(Component, resolveDOMProps(props, tag, spec, tables))
-    return setComponentDisplayName(Tag, tag) as unknown as Frame
+    Tag.displayName = tag
+    ;(Tag as any)[componentDisplayName] = tag
+    return Tag as unknown as Frame
   }
 }
 
@@ -217,5 +219,7 @@ export function unsupportedDOMTag(tag: string, note: string) {
   const Tag: { (): never; displayName?: string } = () => {
     throw new Error(`html.${tag} is not supported on native: ${note}`)
   }
-  return setComponentDisplayName(Tag, tag)
+  Tag.displayName = tag
+  ;(Tag as any)[componentDisplayName] = tag
+  return Tag
 }

package/src/dom/primitives.native.tsx

@@ -32,7 +32,6 @@ import type {
   DOMViewProps,
 } from './contract'
 import { createComponent } from '../createComponent'
-import { setComponentDisplayName } from '../helpers/componentDisplayName'
 import { textStaticConfig } from '../views/Text'
 import { viewStaticConfig } from '../views/View'
 
@@ -554,44 +553,36 @@ function renderDOMTextInput(resolved: DOMTextInputProps) {
   return jsx(TextInput, next)
 }
 
-const DOMRuntimeViewFrame = setComponentDisplayName(
-  createComponent({
-    ...viewStaticConfig,
-    validStyles: { ...viewStaticConfig.validStyles, ...textStaticConfig.validStyles },
-    neverSkipProps: domEventProps,
-    Component: DOMView as any,
-    neverFlatten: true,
-  }),
-  'DOMRuntimeView'
-)
-const DOMRuntimeTextFrame = setComponentDisplayName(
-  createComponent({
-    ...textStaticConfig,
-    neverSkipProps: domEventProps,
-    Component: DOMText as any,
-    neverFlatten: true,
-  }),
-  'DOMRuntimeText'
-)
-const DOMRuntimeImageFrame = setComponentDisplayName(
-  createComponent({
-    ...viewStaticConfig,
-    validStyles: { ...viewStaticConfig.validStyles, ...textStaticConfig.validStyles },
-    neverSkipProps: domEventProps,
-    Component: DOMImage as any,
-    neverFlatten: true,
-  }),
-  'DOMRuntimeImage'
-)
-const DOMRuntimeTextInputFrame = setComponentDisplayName(
-  createComponent({
-    ...textStaticConfig,
-    neverSkipProps: domEventProps,
-    Component: DOMTextInput as any,
-    neverFlatten: true,
-  }),
-  'DOMRuntimeTextInput'
-)
+const DOMRuntimeViewFrame = createComponent({
+  ...viewStaticConfig,
+  validStyles: { ...viewStaticConfig.validStyles, ...textStaticConfig.validStyles },
+  neverSkipProps: domEventProps,
+  Component: DOMView as any,
+  neverFlatten: true,
+  displayName: 'DOMRuntimeView',
+})
+const DOMRuntimeTextFrame = createComponent({
+  ...textStaticConfig,
+  neverSkipProps: domEventProps,
+  Component: DOMText as any,
+  neverFlatten: true,
+  displayName: 'DOMRuntimeText',
+})
+const DOMRuntimeImageFrame = createComponent({
+  ...viewStaticConfig,
+  validStyles: { ...viewStaticConfig.validStyles, ...textStaticConfig.validStyles },
+  neverSkipProps: domEventProps,
+  Component: DOMImage as any,
+  neverFlatten: true,
+  displayName: 'DOMRuntimeImage',
+})
+const DOMRuntimeTextInputFrame = createComponent({
+  ...textStaticConfig,
+  neverSkipProps: domEventProps,
+  Component: DOMTextInput as any,
+  neverFlatten: true,
+  displayName: 'DOMRuntimeTextInput',
+})
 
 function runtimeProps<T extends DOMMetadata>(props: T) {
   const { __styles, ...rest } = props

package/src/helpers/borderComponents.ts

@@ -0,0 +1,62 @@
+// the one classifier for border/outline shorthand components. every parser
+// (web composite lowering, native border emission, native normalizeStyle
+// expansion) routes through it so they cannot disagree on what counts as a
+// width, a line style, or a color
+
+export const lineStyles = new Set([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+])
+
+// splits on whitespace outside parens and quotes, so `rgb(1, 2, 3)` and
+// `calc(1px + 1px)` stay single components
+export function splitComponents(value: string): string[] {
+  return (
+    value.match(
+      /(?:[^\s("']+|\((?:[^()]|\([^)]*\))*\)|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')+/g
+    ) || []
+  )
+}
+
+export function startsValueFunction(value: string): boolean {
+  return /^-?[a-z][a-z0-9-]*\(/i.test(value)
+}
+
+const colorFunction =
+  /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(/i
+
+export type BorderComponents = {
+  width?: string
+  style?: string
+  color?: string
+}
+
+export function classifyBorderComponents(raw: string, allowAuto = false) {
+  const out: BorderComponents = {}
+  for (const part of splitComponents(raw)) {
+    if (lineStyles.has(part) || (allowAuto && part === 'auto')) {
+      out.style = part
+    } else if (colorFunction.test(part)) {
+      out.color = part
+    } else if (
+      part === 'thin' ||
+      part === 'medium' ||
+      part === 'thick' ||
+      /^[+-]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)?$/.test(part) ||
+      startsValueFunction(part)
+    ) {
+      out.width = part
+    } else {
+      out.color = part
+    }
+  }
+  return out
+}

package/src/helpers/componentDisplayName.ts

@@ -1,14 +1,3 @@
 export const componentDisplayName = /* @__PURE__ */ Symbol.for(
   'tamagui.componentDisplayName'
 )
-
-export function setComponentDisplayName<T extends { displayName?: string }>(
-  component: T,
-  displayName?: string
-) {
-  if (displayName) {
-    component.displayName = displayName
-    ;(component as any)[componentDisplayName] = displayName
-  }
-  return component
-}

package/src/helpers/createDesignSystem.ts

@@ -243,8 +243,6 @@ const getStaticCSS = (
 @scope (.is_Text) to (.is_View) { :where(.is_Text) { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
-.is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
-.is_Input::placeholder, .is_TextArea::placeholder {color: var(--t_placeholderColor);}
 ${pointerEventsCSS}
 ${hideScrollBarsCSS}
 ${autoVarCSS}

package/src/helpers/createStyledContext.tsx

@@ -6,14 +6,7 @@ import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
 type EmptyDefault = Record<PropertyKey, never>
-
-type EmptyDefaultOptions =
-  | string
-  | {
-      namespace?: string
-      keys?: never
-    }
-
+type EmptyDefaultOptions = string | { namespace?: string; keys?: never }
 type StyledContextKey<Props> = Extract<keyof Props, string>
 
 type OptionalStyledContextKeys<Props extends Record<string, any>> = {
@@ -64,60 +57,39 @@ type StyledContextFactory = {
   ): StyledContext<VariantProps, never>
 }
 
-// use const (not function declaration) to prevent esbuild from hoisting
-// above __esm lazy init - function declarations get hoisted before
-// import_react is initialized, causing undefined.default errors in SSR
 export const createStyledContext = (<VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
   namespaceOrOptions:
     | string
     | StyledContextOptions<VariantProps, StyledContextKey<VariantProps>> = ''
 ): StyledContext<VariantProps, StyledContextKey<VariantProps>> => {
-  // avoid react compiler - we aren't breaking its rules but it mis-interprets
-  // how we change the context value
   'use no memo'
 
-  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
-  // when React is undefined during __esm re-initialization order issues.
-  // also React.createContext is optimized oddly by React compiler and our
-  // uncommon usage confuses it, so we use dynamic access
-  const createReactContext = React[
-    Math.random() ? 'createContext' : 'createContext'
-  ] as typeof React.createContext
-  const useReactMemo = React[
-    Math.random() ? 'useMemo' : 'useMemo'
-  ] as typeof React.useMemo
-  const useReactContext = React[
-    Math.random() ? 'useContext' : 'useContext'
-  ] as typeof React.useContext
-
   const namespace =
     typeof namespaceOrOptions === 'string'
       ? namespaceOrOptions
       : namespaceOrOptions.namespace || ''
+  const defaultKeys = isPlainObject(defaultValues)
+    ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
+    : undefined
   const propKeys =
-    typeof namespaceOrOptions === 'string'
-      ? isPlainObject(defaultValues)
-        ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
-        : undefined
-      : namespaceOrOptions.keys ||
-        (isPlainObject(defaultValues)
-          ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
-          : undefined)
+    typeof namespaceOrOptions === 'object' && namespaceOrOptions.keys
+      ? namespaceOrOptions.keys
+      : defaultKeys
 
-  const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
+  const OGContext = React.createContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<
     VariantProps,
     StyledContextKey<VariantProps>
   >
   const scopedContexts = new Map<string, Context<VariantProps | undefined>>()
-  const LastScopeInNamespace = createReactContext<string>(namespace)
+  const LastScopeInNamespace = React.createContext<string>(namespace)
 
   function getOrCreateScopedContext(scope: string) {
     let ScopedContext = scopedContexts.get(scope)
     if (!ScopedContext) {
-      ScopedContext = createReactContext<VariantProps | undefined>(defaultValues)
+      ScopedContext = React.createContext<VariantProps | undefined>(defaultValues)
       scopedContexts.set(scope, ScopedContext)
     }
     return ScopedContext!
@@ -129,24 +101,16 @@ export const createStyledContext = (<VariantProps extends Record<string, any>>(
   const Provider = ({
     children,
     scope: scopeIn,
-    // performance: avoid creating objects
     __disableMergeDefaultValues,
     ...values
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
-
-    const next = useReactMemo(() => {
-      if (__disableMergeDefaultValues) {
-        // we already merged and want to keep ordering
-        return values
-      }
+    const next = React.useMemo(() => {
+      if (__disableMergeDefaultValues) return values
       return mergeProps(defaultValues || {}, values)
     }, [objectIdentityKey(values)])
 
-    let ScopedProvider = OGProvider
-    if (scope) {
-      ScopedProvider = getOrCreateScopedContext(scope).Provider
-    }
+    const ScopedProvider = scope ? getOrCreateScopedContext(scope).Provider : OGProvider
     return (
       <LastScopeInNamespace.Provider value={scope}>
         <ScopedProvider value={next as VariantProps}>{children}</ScopedProvider>
@@ -154,17 +118,15 @@ export const createStyledContext = (<VariantProps extends Record<string, any>>(
     )
   }
 
-  // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
+    const lastScopeInNamespace = React.useContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = useReactContext(context!) as VariantProps
-    return value
+    return React.useContext(context!) as VariantProps
   }
 
   // @ts-expect-error we are overriding default provider

package/src/helpers/formatDiagnostic.ts

@@ -32,10 +32,8 @@ function formatDiagnosticValue(
 
   const keys: string[] = []
   for (const key in value) {
-    if (Object.prototype.hasOwnProperty.call(value, key)) {
-      keys.push(key)
-      if (keys.length === 6) break
-    }
+    keys.push(key)
+    if (keys.length === 6) break
   }
   const hasMore = keys.length === 6
   if (hasMore) keys.pop()
@@ -58,14 +56,14 @@ export function formatDiagnostic(
   prop?: string,
   received?: unknown
 ) {
-  if (process.env.NODE_ENV === 'production') {
-    return `${code}: ${message}`
+  if (process.env.NODE_ENV === 'development') {
+    const formattedValue = prop ? formatDiagnosticValue(received) : ''
+    const boundedValue =
+      formattedValue.length > maxDiagnosticValueLength
+        ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
+        : formattedValue
+    const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
+    return `${code} ${component}: ${message}.${value} ${action}`
   }
-  const formattedValue = prop ? formatDiagnosticValue(received) : ''
-  const boundedValue =
-    formattedValue.length > maxDiagnosticValueLength
-      ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
-      : formattedValue
-  const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
-  return `${code} ${component}: ${message}.${value} ${action}`
+  return `${code}: ${message}`
 }

package/src/helpers/getCSSStylesAtomic.native.ts

@@ -1,7 +1,10 @@
-const empty = () => {
-  console.warn('no-op native')
-}
+const empty = () => {}
 
+export const canGenerateCSS = false
+export const flushDirectStyles = empty
+export const addComposition = empty
+export const registerAtomicSlot = empty
+export const buildAtomicSlotCSS = empty
 export const getCSSStylesAtomic = empty
 export const getCSSStyleAtomic = empty
 export const getStyleAtomic = empty