@tamagui/core 1.0.2 → 1.0.4

package/src/styled.tsx

@@ -63,7 +63,10 @@ export function styled<
   // }
 
   // validate not using a variant over an existing valid style
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!Component) {
+      throw new Error(`No component given to styled()`)
+    }
     if (options?.variants) {
       for (const key in options.variants) {
         if (key in stylePropsAll) {

package/src/types.tsx

@@ -241,7 +241,7 @@ export type InferTamaguiConfig<Conf> = Conf extends ConfProps<
   ? TamaguiInternalConfig<A, B, C, D, E, F>
   : unknown
 
-// for use in creation functions so it doesnt get overwrtitten
+// for use in creation functions so it doesnt get overwritten
 export type GenericTamaguiConfig = CreateTamaguiConfig<
   GenericTokens,
   GenericThemes,
@@ -272,13 +272,16 @@ export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
 
 export interface ThemeProps {
   className?: string
-  disableThemeClass?: boolean
   name?: Exclude<ThemeName, number> | null
   componentName?: string
   children?: any
   reset?: boolean
   debug?: boolean | 'verbose'
   inverse?: boolean
+  // on the web, for portals we need to re-insert className
+  forceClassName?: boolean
+  // allows for disabling the auto-update behavior
+  shouldUpdate?: () => boolean
 }
 
 type ArrayIntersection<A extends any[]> = A[keyof A]
@@ -495,6 +498,7 @@ type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
 // base tokens
 export type SizeTokens = GetTokenString<keyof Tokens['size']> | number
 export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean
+
 export type ColorTokens =
   | GetTokenString<keyof Tokens['color']>
   | GetTokenString<keyof ThemeParsed>
@@ -1372,7 +1376,7 @@ export type UseAnimationHook = (props: {
   hostRef: RefObject<HTMLElement | View>
   staticConfig: StaticConfigParsed
   state: SplitStyleState
-  pseudos: PseudoProps<ViewStyle>
+  pseudos: PseudoProps<ViewStyle> | null
   onDidAnimate?: any
   delay?: number
 }) => null | {

package/src/views/Slot.tsx

@@ -15,59 +15,11 @@ import {
  * Slot
  * -----------------------------------------------------------------------------------------------*/
 
-export type SlotProps = {
-  children?: ReactNode
-}
-
-export const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
-  const { children, ...slotProps } = props
-  const childrenArray = Children.toArray(children)
-  const slottable = childrenArray.find(isSlottable)
-
-  if (slottable) {
-    // the new element to render is the one passed as a child of `Slottable`
-    const newElement = slottable.props.children as ReactNode
-
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        // because the new element will be the one rendered, we are only interested
-        // in grabbing its children (`newElement.props.children`)
-        if (Children.count(newElement) > 1) return Children.only(null)
-        return isValidElement(newElement)
-          ? (newElement.props.children as ReactNode)
-          : null
-      } else {
-        return child
-      }
-    })
-
-    return (
-      <SlotClone {...slotProps} ref={forwardedRef}>
-        {isValidElement(newElement)
-          ? cloneElement(newElement, undefined, newChildren)
-          : null}
-      </SlotClone>
-    )
-  }
-
-  return (
-    <SlotClone {...slotProps} ref={forwardedRef}>
-      {children}
-    </SlotClone>
-  )
-})
-
-Slot.displayName = 'Slot'
-
-/* -------------------------------------------------------------------------------------------------
- * SlotClone
- * -----------------------------------------------------------------------------------------------*/
-
-interface SlotCloneProps {
+interface SlotProps {
   children: ReactNode
 }
 
-const SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
+export const Slot = forwardRef<any, SlotProps>(function Slot(props, forwardedRef) {
   const { children, ...slotProps } = props
 
   if (isValidElement(children)) {
@@ -81,8 +33,6 @@ const SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
   return Children.count(children) > 1 ? Children.only(null) : null
 })
 
-SlotClone.displayName = 'SlotClone'
-
 /* -------------------------------------------------------------------------------------------------
  * Slottable
  * -----------------------------------------------------------------------------------------------*/
@@ -93,12 +43,6 @@ export const Slottable = ({ children }: { children: ReactNode }) => {
 
 /* ---------------------------------------------------------------------------------------------- */
 
-type AnyProps = Record<string, any>
-
-function isSlottable(child: ReactNode): child is ReactElement {
-  return isValidElement(child) && child.type === Slottable
-}
-
 const pressMap = isWeb
   ? {
       onPress: 'onClick',
@@ -107,7 +51,7 @@ const pressMap = isWeb
     }
   : {}
 
-function mergeSlotProps(child: any, slotProps: AnyProps) {
+function mergeSlotProps(child: any, slotProps: Record<string, any>) {
   const childProps = child.props
 
   // all child props should override

package/src/views/Stack.test.tsx

@@ -4,10 +4,7 @@ import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
 import { render } from '@testing-library/react'
 import { describe, expect, test } from 'vitest'
 
-import { createTamagui } from '../createTamagui'
-import { Stack } from './Stack'
-import { TamaguiProvider } from './TamaguiProvider'
-import { StackProps, configureMedia } from '..'
+import { Stack, StackProps, TamaguiProvider, createTamagui } from '..'
 
 const conf = createTamagui(getDefaultTamaguiConfig())
 

package/src/views/Theme.tsx

@@ -1,77 +1,83 @@
 import { isWeb } from '@tamagui/constants'
-import React, { Children, cloneElement, useMemo } from 'react'
+import { Children, cloneElement } from 'react'
 
 import { variableToString } from '../createVariable'
-import { ThemeManager } from '../helpers/ThemeManager'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
-import { useChangeThemeEffect } from '../hooks/useTheme'
+import { useServerRef } from '../hooks/useServerHooks'
+import { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'
 import { ThemeProps } from '../types'
 
 export function Theme(props: ThemeProps) {
   // @ts-expect-error only for internal views
-  if (props.disable) {
-    return props.children
-  }
-
+  if (props.disable) return props.children
   const isRoot = !!props['_isRoot']
-  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot)
-  const disableThemeClass = props.disableThemeClass
-  const missingTheme = !(name && theme)
+  const themeState = useChangeThemeEffect(props, isRoot)
+  const children = props['data-themeable']
+    ? Children.map(props.children, (child) =>
+        cloneElement(child, { ['data-themeable']: true })
+      )
+    : props.children
 
-  // memo here, changing theme without re-rendering all children is a critical optimization
-  // may require some effort of end user to memoize but without this memo they'd have no option
-  let contents = useThemeManagerContext(
-    props['data-themeable']
-      ? Children.map(props.children, (child) =>
-          cloneElement(child, { ['data-themeable']: true })
-        )
-      : props.children,
-    themeManager
-  )
+  return useThemedChildren(themeState, children, props)
+}
 
-  if (process.env.NODE_ENV === 'development' && missingTheme) {
-    // eslint-disable-next-line no-console
-    name && !theme && console.warn(`No theme found by name ${name}`)
-    return props.children
+export function useThemedChildren(
+  themeState: ChangedThemeResponse,
+  children: any,
+  options: { forceClassName?: boolean; shallow?: boolean }
+) {
+  const { themeManager, isNewTheme, className, theme } = themeState
+  const { shallow, forceClassName } = options
+
+  const hasEverThemed = useServerRef(false)
+  if (isNewTheme) {
+    hasEverThemed.current = true
   }
 
-  if (disableThemeClass || missingTheme) {
-    return contents
+  // once a theme is set it always passes the context to avoid reparenting
+  // until then no context to avoid lots of context
+  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {
+    return children
   }
 
+  // be sure to memoize shouldReset to avoid reparenting
+  let next = children
+
+  if (shallow && themeManager) {
+    next = Children.map(next, (child) => {
+      return cloneElement(
+        child,
+        undefined,
+        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>
+      )
+    })
+  }
+
+  next = (
+    <ThemeManagerContext.Provider value={themeManager}>
+      {next}
+    </ThemeManagerContext.Provider>
+  )
+
   if (isWeb) {
-    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')
-    contents = (
+    const enableClassName =
+      forceClassName === true || (forceClassName !== false && isNewTheme)
+    return (
       <span
-        className={cn}
-        style={{
-          // in order to provide currentColor, set color by default
-          color: variableToString(theme?.color),
-        }}
+        className="_dsp_contents"
+        {...(theme &&
+          enableClassName && {
+            className: `${className} ${forceClassName ? 'forced1' : ''} _dsp_contents`,
+            style: {
+              // in order to provide currentColor, set color by default
+              color: variableToString(theme.color),
+            },
+          })}
       >
-        {contents}
+        {next}
       </span>
     )
   }
 
-  return contents
-}
-
-export function useThemeManagerContext(
-  children: any,
-  themeManager?: ThemeManager | null,
-  shouldReset?: boolean
-) {
-  // disabled super memoize it - listener first strategy
-  const value = themeManager // useMemo(() => themeManager, [!!themeManager])
-  // be sure to memoize themeManager to avoid reparenting
-  if (!value) return children
-  // be sure to memoize shouldReset to avoid reparenting
-  let next = children
-  // TODO likely not necessary if we do reset logic now in useTheme?
-  // reset to parent theme
-  if (shouldReset && themeManager) {
-    next = <Theme name={themeManager.state.parentName}>{next}</Theme>
-  }
-  return <ThemeManagerContext.Provider value={value}>{next}</ThemeManagerContext.Provider>
+  return next
 }

package/src/views/ThemeProvider.tsx

@@ -44,7 +44,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
       <Theme
         className={props.className}
         name={props.defaultTheme}
-        disableThemeClass={props.disableRootThemeClass}
+        forceClassName={props.disableRootThemeClass ? false : undefined}
         // @ts-expect-error
         _isRoot
       >

package/types/createVariables.d.ts

@@ -5,6 +5,7 @@ type DeepTokenObject<Val extends string | number = any> = {
 export type DeepVariableObject<A extends DeepTokenObject> = {
     [Key in keyof A]: A[Key] extends string | number ? Variable<A[Key]> : A[Key] extends DeepTokenObject ? DeepVariableObject<A[Key]> : never;
 };
+export declare const tokensKeysOrdered: WeakMap<object, any>;
 export declare const createVariables: <A extends DeepTokenObject<any>>(tokens: A, parentPath?: string, isFont?: boolean) => DeepVariableObject<A>;
 export {};
 //# sourceMappingURL=createVariables.d.ts.map

package/types/helpers/ThemeManager.d.ts

@@ -28,7 +28,7 @@ export declare class ThemeManager {
     getStateShouldChange(nextState: ThemeManagerState | null, state?: ThemeManagerState | null): boolean;
     getState(props?: ThemeProps, parentManager?: ThemeManager | null): ThemeManagerState | null;
     get allKeys(): Set<string>;
-    getValue(key: string, state?: ThemeManagerState): import("..").Variable<any> | undefined;
+    getValue(key: string, state?: ThemeManagerState): import("../types").VariableVal | undefined;
     notify(): void;
     onChangeTheme(cb: ThemeListener): () => void;
 }

package/types/helpers/getSplitStyles.d.ts

@@ -1,11 +1,10 @@
 import type { ViewStyle } from 'react-native';
-import type { DebugProp, MediaQueryKey, PseudoStyles, SplitStyleState, StackProps, StaticConfigParsed, TamaguiInternalConfig, ThemeParsed } from '../types';
+import type { DebugProp, PseudoStyles, SplitStyleState, StackProps, StaticConfigParsed, TamaguiInternalConfig, ThemeParsed } from '../types';
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types';
 import { RulesToInsert } from './insertStyleRule';
 import { FlatTransforms } from './mergeTransform';
 type GetStyleResult = {
-    pseudos: PseudoStyles;
-    medias: Record<MediaQueryKey, ViewStyle>;
+    pseudos?: PseudoStyles;
     style: ViewStyle;
     classNames: ClassNamesObject;
     rulesToInsert: RulesToInsert;

package/types/helpers/getStylesAtomic.d.ts

@@ -12,6 +12,7 @@ export type ViewStyleWithPseudos = ViewOrTextStyle & {
     focusStyle?: ViewOrTextStyle;
 };
 export declare function getStylesAtomic(stylesIn: ViewStyleWithPseudos): StyleObject[];
+export declare const startClearStyleCacheInterval: () => void;
 export declare function getAtomicStyle(style: ViewOrTextStyle, pseudo?: PseudoDescriptor): StyleObject[];
 export declare function styleToCSS(style: Record<string, any>): void;
 export {};

package/types/helpers/getStylesAtomic.native.d.ts

@@ -1,2 +1,3 @@
 export declare function getStylesAtomic(): void;
+export declare const startClearStyleCacheInterval: () => void;
 //# sourceMappingURL=getStylesAtomic.native.d.ts.map

package/types/hooks/useMedia.d.ts

@@ -1,5 +1,5 @@
 import { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig } from '../types';
-export declare const mediaState: MediaQueryState;
+export declare let mediaState: MediaQueryState;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
 export declare const mediaKeysWithAndWithout$: Set<string>;
@@ -10,13 +10,17 @@ export declare function useMediaListeners(config: TamaguiInternalConfig): void;
 type UseMediaState = {
     [key in MediaQueryKey]: boolean;
 };
-export declare function setMediaShouldUpdate(ref: any, val: boolean): WeakMap<any, boolean>;
-export declare function useMedia(): UseMediaState;
+type UpdateState = {
+    enabled: boolean;
+    keys: MediaQueryKey[];
+};
+export declare function setMediaShouldUpdate(ref: any, props: UpdateState): WeakMap<any, UpdateState>;
+export declare function useMedia(uid?: any, debug?: any): UseMediaState;
 /**
  * Useful for more complex components that need access to the currently active props,
  * accounting for the currently active media queries.
  *
- * Use sparingly, is will loop props and trigger re-render on all media queries.
+ * Use sparingly, it will loop props and trigger re-render on all media queries.
  *
  * */
 export declare function useMediaPropsActive<A extends Object>(props: A): {

package/types/hooks/useTheme.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ThemeManager } from '../helpers/ThemeManager';
 import { ThemeParsed, ThemeProps } from '../types';
 export type ChangedThemeResponse = {
@@ -7,9 +8,22 @@ export type ChangedThemeResponse = {
     theme?: ThemeParsed | null;
     className?: string;
 };
+interface UseThemeState {
+    keys: Set<string>;
+}
 export declare const useTheme: (props?: ThemeProps) => ThemeParsed;
-export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
-export declare const getThemeIsNewTheme: (theme: any) => ThemeManager | undefined;
+export declare const useThemeWithState: (props: ThemeProps) => {
+    theme: ThemeParsed;
+    themeManager: ThemeManager | null;
+    name: string;
+    isNewTheme?: boolean | undefined;
+    className?: string | undefined;
+} | null;
+export declare function getThemeProxied({ theme, themeManager, state, }: Partial<ChangedThemeResponse> & {
+    theme: ThemeParsed;
+    state?: React.RefObject<UseThemeState>;
+}): ThemeParsed;
 export declare const activeThemeManagers: Set<ThemeManager>;
 export declare const useChangeThemeEffect: (props: ThemeProps, root?: boolean, disableUpdate?: () => boolean) => ChangedThemeResponse;
+export {};
 //# sourceMappingURL=useTheme.d.ts.map

package/types/index.d.ts

@@ -20,7 +20,6 @@ export * from './helpers/useShallowSetState';
 export * from './helpers/getVariantExtras';
 export * from './helpers/getAnimationDriver';
 export * from './helpers/getExpandedShorthands';
-export * from './helpers/getSize';
 export * from './helpers/getSplitStyles';
 export * from './helpers/getStylesAtomic';
 export * from './helpers/pseudoDescriptors';

package/types/types.d.ts

@@ -154,13 +154,14 @@ export type AnimationKeys = TamaguiConfig['animations'] extends AnimationDriver<
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>;
 export interface ThemeProps {
     className?: string;
-    disableThemeClass?: boolean;
     name?: Exclude<ThemeName, number> | null;
     componentName?: string;
     children?: any;
     reset?: boolean;
     debug?: boolean | 'verbose';
     inverse?: boolean;
+    forceClassName?: boolean;
+    shouldUpdate?: () => boolean;
 }
 type ArrayIntersection<A extends any[]> = A[keyof A];
 type GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S;
@@ -649,7 +650,7 @@ export type UseAnimationHook = (props: {
     hostRef: RefObject<HTMLElement | View>;
     staticConfig: StaticConfigParsed;
     state: SplitStyleState;
-    pseudos: PseudoProps<ViewStyle>;
+    pseudos: PseudoProps<ViewStyle> | null;
     onDidAnimate?: any;
     delay?: number;
 }) => null | {

package/types/views/Slot.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-export type SlotProps = {
-    children?: ReactNode;
-};
-export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLElement>>;
+interface SlotProps {
+    children: ReactNode;
+}
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<any>>;
 export declare const Slottable: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;
 export declare function mergeEvent(a?: Function, b?: Function): (...args: unknown[]) => void;
+export {};
 //# sourceMappingURL=Slot.d.ts.map

package/types/views/Theme.d.ts

@@ -1,5 +1,8 @@
-import { ThemeManager } from '../helpers/ThemeManager';
+import { ChangedThemeResponse } from '../hooks/useTheme';
 import { ThemeProps } from '../types';
 export declare function Theme(props: ThemeProps): any;
-export declare function useThemeManagerContext(children: any, themeManager?: ThemeManager | null, shouldReset?: boolean): any;
+export declare function useThemedChildren(themeState: ChangedThemeResponse, children: any, options: {
+    forceClassName?: boolean;
+    shallow?: boolean;
+}): any;
 //# sourceMappingURL=Theme.d.ts.map

package/src/helpers/cache.ts

@@ -1,13 +0,0 @@
-type Value = Object | Array<any> | string | number
-
-export type Style = { [key: string]: Value }
-
-const v: Record<string, any> = {}
-
-export const cache = {
-  get: (key: string, valStr: string) => v[key]?.[valStr],
-  set: (key: string, valStr: string, object: any) => {
-    v[key] ??= {}
-    v[key][valStr] = object
-  },
-}

package/src/helpers/getSize.ts

@@ -1,23 +0,0 @@
-import { getTokens } from '../config'
-import { SizeTokens, SpaceTokens } from '../types'
-
-export const getSize = (size?: SizeTokens | undefined, shift = 0, bounds = [0]) => {
-  return stepTokenUpOrDown(getTokens(true).size, size, shift, bounds)
-}
-
-export const stepTokenUpOrDown = (
-  tokens: Object,
-  current?: SizeTokens | SpaceTokens | string,
-  shift = 0,
-  bounds = [0]
-) => {
-  const sizeNames = Object.keys(tokens)
-  const currentKeyNum =
-    (typeof current === 'string' ? current.replace('$', '') : current) || '4'
-  const nextKeyName = `$${+currentKeyNum + shift}`
-  const min = bounds[0] ?? 0
-  const max = bounds[1] ?? sizeNames.length - 1
-  const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)))
-  const key = sizeNames[index]
-  return tokens[key] || tokens['$4']
-}