@tamagui/core 1.0.1-beta.192 → 1.0.1-beta.194

package/src/hooks/useSafeRef.ts

@@ -3,11 +3,12 @@ import { useRef } from 'react'
 
 // dai-shi 🙏
 // https://dev.to/uhyo_/a-concurrent-mode-safe-version-of-useref-1325
+// probably can live without it though to save a bit of b
 
 type Raw<T> = {
-  isRendering: boolean
-  comittedValue: T
-  currentValue: T
+  hold: boolean
+  next: T
+  cur: T
   ref: { current: T }
 }
 
@@ -17,32 +18,30 @@ export const useSafeRef = <T>(initialValue: T) => {
   const raw: Raw<T> =
     rawRef.current ??
     (rawRef.current = {
-      isRendering: true,
-      comittedValue: initialValue,
-      currentValue: initialValue,
+      hold: true,
+      next: initialValue,
+      cur: initialValue,
       ref: {
         get current() {
-          if (raw.isRendering) {
-            return raw.currentValue
-          } else {
-            return raw.comittedValue
-          }
+          return raw.hold ? raw.cur : raw.next
         },
         set current(v) {
-          if (!raw.isRendering) {
-            raw.comittedValue = v
+          if (!raw.hold) {
+            raw.next = v
           }
-          raw.currentValue = v
+          raw.cur = v
         },
       },
     })
 
-  raw.isRendering = true
-  Promise.resolve().then(() => (raw.isRendering = false))
-  raw.currentValue = raw.comittedValue
+  raw.hold = true
+  Promise.resolve().then(() => {
+    raw.hold = false
+  })
+  raw.cur = raw.next
 
   useIsomorphicLayoutEffect(() => {
-    raw.comittedValue = raw.currentValue
+    raw.next = raw.cur
   })
 
   return raw.ref

package/src/hooks/useTheme.tsx

@@ -6,6 +6,7 @@ import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
+import { createProxy } from '../helpers/createProxy'
 import {
   GetNextThemeProps,
   ThemeManager,
@@ -14,7 +15,6 @@ import {
 } from '../helpers/ThemeManager'
 import { ThemeName, ThemeParsed } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
-import { useConstant } from './useConstant'
 import { useServerRef } from './useServerHooks'
 
 export interface ThemeProps {
@@ -111,7 +111,7 @@ function getThemeProxied(
   state?: React.MutableRefObject<UseThemeState>,
   debugProp?: boolean | 'verbose'
 ) {
-  return new Proxy(theme, {
+  return createProxy(theme, {
     has(_, key) {
       if (typeof key === 'string' && key[0] === '$') {
         key = key.slice(1)
@@ -206,7 +206,7 @@ export const useChangeThemeEffect = (
   if (process.env.NODE_ENV === 'development') {
     if (!config) {
       throw new Error(
-        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before renderig.`
+        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`
       )
     }
   }
@@ -242,9 +242,10 @@ export const useChangeThemeEffect = (
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const forceUpdate = forceUpdateProp || useForceUpdate()
 
-  const themeManager = useConstant(() => {
+  const themeManager = useMemo(() => {
     return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
-  })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)
   let didChange = false

package/src/index.ts

@@ -18,11 +18,8 @@ export type { RNWTextProps, RNWViewProps } from './types-rnw'
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
 
 export * from './constants/constants'
-export { createDOMProps } from '@tamagui/rnw'
 
-export * from './helpers/calc'
 export * from './helpers/useShallowSetState'
-export * from './helpers/getStackSize'
 export * from './helpers/getVariantExtras'
 export * from './helpers/getAnimationDriver'
 export * from './helpers/getExpandedShorthands'
@@ -32,20 +29,15 @@ export * from './helpers/getStylesAtomic'
 export * from './helpers/pseudoDescriptors'
 export * from './helpers/mergeProps'
 export * from './helpers/expandStyles'
-export * from './helpers/getFont'
-export * from './helpers/isObj'
 export * from './helpers/isTamaguiElement'
 export * from './helpers/isTamaguiComponent'
 export * from './helpers/matchMedia'
-export * from './helpers/startTransition'
 export * from './helpers/themeable'
 export * from './helpers/withStaticProperties'
 
 export * from './contexts/ButtonInsideButtonContext'
 
-export * from './hooks/useConstant'
 export * from './hooks/useId'
-export * from './hooks/useIsMounted'
 export * from './hooks/useIsTouchDevice'
 
 export {
@@ -59,15 +51,13 @@ export {
   removeMediaQueryListener,
   mediaQueryConfig,
 } from './hooks/useMedia'
-export * from './hooks/usePressable'
 export * from './hooks/useTheme'
-export * from './hooks/useUnmountEffect'
 export * from './hooks/useSafeRef'
 
 export * from './views/Slot'
 export * from './views/Stack'
 export * from './views/Text'
-export { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'
+export * from './contexts/TextAncestorContext'
 export * from './views/Theme'
 export * from './views/ThemeInverse'
 export * from './views/ThemeProvider'

package/src/static.ts

@@ -1,15 +1,5 @@
 // only stuff that gets extracted or needed by tamagui-static
-
 export * from './index'
 
 // for static
-
-export {
-  createDOMProps,
-  useElementLayout,
-  useMergeRefs,
-  usePlatformMethods,
-  useResponderEvents,
-} from '@tamagui/rnw'
-
 export * from './helpers/proxyThemeVariables'

package/src/styled.tsx

@@ -1,8 +1,5 @@
-import { Image, Text, TextInput } from 'react-native'
-
+import { getConfig } from './config'
 import { createComponent } from './createComponent'
-import { TamaguiReactElement, isTamaguiElement } from './helpers/isTamaguiElement'
-import { RNComponents } from './helpers/RNComponents'
 import {
   GetProps,
   GetVariantValues,
@@ -52,12 +49,14 @@ export function styled<
   },
   staticExtractionOptions?: Partial<StaticConfig>
 ) {
-  // * excessively deep type instantiation
-  // if (isTamaguiElement(Component)) {
+  // allows passing styled(<H1 bc="red" />)
+  // but to get types right would be tricky
+  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {
   //   const props = Component.props
-  //   // @ts-ignore
-  //   Component = Component.type
-  //   options = options ? { ...props, ...options } : props
+  //   if (props && typeof props === 'object') {
+  //     Component = Component.type as any
+  //     options = options ? ({ ...props, ...options } as any) : props
+  //   }
   // }
 
   const staticConfigProps = (() => {
@@ -84,31 +83,15 @@ export function styled<
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants)
       }
-      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
-      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)
-      if (!('staticConfig' in Component) && !isReactNativeWeb) {
-        if (RNComponents.has(Component['displayName'])) {
-          RNComponents.add(Component)
-          isReactNativeWeb = true
-        } else {
-          // assuming some sort of non-tamagui non-rn view, will always use style={}
-        }
-      }
+      const isReactNativeWeb = Boolean(
+        parentStaticConfig?.isReactNativeWeb || staticExtractionOptions?.isReactNativeWeb
+      )
       const reactNativeWebComponent = isReactNativeWeb
         ? parentStaticConfig?.reactNativeWebComponent || Component
         : null
       const isTamagui = !isReactNativeWeb && !!parentStaticConfig
       const Comp = reactNativeWebComponent || (Component as any)
-      const isImage = Boolean(
-        staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image
-      )
-      const isInput = Boolean(
-        staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput
-      )
-      const isText = Boolean(
-        isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
-      )
-
+      const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)
       const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)
 
       const conf: Partial<StaticConfig> = {
@@ -116,7 +99,6 @@ export function styled<
         ...(!isTamagui && {
           Component: Comp,
         }),
-        isTamagui,
         // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
         // take away the Partial<> and it's fine
         variants,
@@ -126,9 +108,7 @@ export function styled<
         isReactNativeWeb,
         // for nesting multiple levels of rnw styled() need keep use the OG component
         reactNativeWebComponent,
-        isInput,
         isText,
-        isImage,
         acceptsClassName,
       }
 
@@ -170,12 +150,14 @@ export function styled<
         // add in pseudos
         PseudoProps<Partial<OurPropsBase>>
 
-  return component as TamaguiComponent<
+  type StyledComponent = TamaguiComponent<
     Props,
     TamaguiElement,
     ParentPropsBase,
     ParentVariants & OurVariants
   >
+
+  return component as StyledComponent
 }
 
 // import { Stack } from './views/Stack'

package/src/types.tsx

@@ -1,8 +1,6 @@
 // TODO split this into own package @tamagui/types to share with animations packages
 
-import { Properties } from 'csstype'
-import React, { RefObject } from 'react'
-import {
+import type {
   GestureResponderEvent,
   Image,
   PressableProps,
@@ -13,14 +11,23 @@ import {
   View,
   ViewProps,
   ViewStyle,
-} from 'react-native'
-
-import { Variable } from './createVariable'
-import { ResolveVariableTypes } from './helpers/createPropMapper'
-import { TamaguiReactElement } from './static'
-import { RNWTextProps, RNWViewProps } from './types-rnw'
-import { FontLanguageProps } from './views/FontLanguage.types'
-import { ThemeProviderProps } from './views/ThemeProvider'
+} from '@tamagui/types-react-native'
+import type { Properties } from 'csstype'
+import type {
+  Component,
+  ForwardRefExoticComponent,
+  FunctionComponent,
+  ReactNode,
+  RefAttributes,
+  RefObject,
+} from 'react'
+
+import type { Variable } from './createVariable'
+import type { ResolveVariableTypes } from './helpers/createPropMapper'
+import type { TamaguiReactElement } from './static'
+import type { RNWTextProps, RNWViewProps } from './types-rnw'
+import type { FontLanguageProps } from './views/FontLanguage.types'
+import type { ThemeProviderProps } from './views/ThemeProvider'
 
 export type SpaceDirection = 'vertical' | 'horizontal' | 'both'
 
@@ -35,7 +42,7 @@ export type TamaguiComponentPropsBase = {
   asChild?: boolean
   space?: SpaceTokens | null
   spaceDirection?: SpaceDirection
-  separator?: React.ReactNode
+  separator?: ReactNode
   dangerouslySetInnerHTML?: { __html: string }
   animation?: AnimationProp
   animateOnly?: string[]
@@ -63,8 +70,8 @@ export type TamaguiComponentPropsBase = {
   onMouseDown?: (e: MouseEvent) => any
 }
 
-export type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<
-  Props & React.RefAttributes<Ref>
+export type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<
+  Props & RefAttributes<Ref>
 >
 
 export type ConfigListener = (conf: TamaguiInternalConfig) => void
@@ -275,6 +282,7 @@ export type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> &
   SpacerOwnProps
 
 export type CreateTamaguiProps = {
+  reactNative?: any
   shorthands?: CreateShorthands
   media?: GenericTamaguiConfig['media']
   animations?: AnimationDriver<any>
@@ -357,6 +365,7 @@ export type TamaguiInternalConfig<
     getCSS: () => string
     parsed: boolean
     inverseShorthands: Record<string, string>
+    reactNative?: any
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']
@@ -364,7 +373,7 @@ export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animatio
 // prevents const intersections from being clobbered into string, keeping the consts
 export type UnionableString = string & {}
 export type UnionableNumber = number & {}
-export type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>
+export type PropTypes<A extends TamaguiComponent> = A extends FunctionComponent<infer Props>
   ? Props
   : unknown
 
@@ -671,7 +680,7 @@ type StaticComponentObject = {
 export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {
   config: TamaguiInternalConfig
   disableInjectCSS?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export type PropMapper = (
@@ -705,16 +714,7 @@ export type GenericVariantDefinitions = {
   }
 }
 
-export type StaticConfig = {
-  Component?: React.FunctionComponent<any> & StaticComponentObject
-
-  variants?: GenericVariantDefinitions
-
-  /**
-   * Used for applying sub theme style
-   */
-  componentName?: string
-
+export type StaticConfigPublic = {
   /**
    * (compiler) If you need to pass context or something, prevents from ever
    * flattening. The 'jsx' option means it will never flatten. if you
@@ -727,26 +727,11 @@ export type StaticConfig = {
    */
   isText?: boolean
 
-  /**
-   * Attempts to attach focus styles at runtime (useful for native)
-   */
-  isInput?: boolean
-
-  /**
-   * React native web images need special handling for className support
-   */
-  isImage?: boolean
-
   /**
    * Which style keys are allowed to be extracted.
    */
   validStyles?: { [key: string]: boolean }
 
-  /**
-   * Same as React.defaultProps, be sure to sync
-   */
-  defaultProps: Record<string, any>
-
   /**
    * (compiler) If these props are encountered, bail on all optimization.
    */
@@ -777,14 +762,37 @@ export type StaticConfig = {
   isZStack?: boolean
 
   /**
-   * Merges into defaultProps later on, used internally yonly
+   * Auto-detect, but can override, passes styles properly to react-native-web
    */
-  defaultVariants?: { [key: string]: any }
+  isReactNativeWeb?: boolean
+
+  /**
+   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,
+   * it will assume the passed in component only accepts style={} for react-native compatibility.
+   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.
+   */
+  acceptsClassName?: boolean
+}
+
+export type StaticConfig = StaticConfigPublic & {
+  Component?: FunctionComponent<any> & StaticComponentObject
+
+  variants?: GenericVariantDefinitions
 
   /**
-   * Auto-detect, but can ovverride, passes styles properly to react-native-web
+   * Used for applying sub theme style
    */
-  isReactNativeWeb?: boolean
+  componentName?: string
+
+  /**
+   * Same as React.defaultProps, be sure to sync
+   */
+  defaultProps: Record<string, any>
+
+  /**
+   * Merges into defaultProps later on, used internally yonly
+   */
+  defaultVariants?: { [key: string]: any }
 
   /**
    * Used internally to keep reference to the original rnw component
@@ -796,11 +804,6 @@ export type StaticConfig = {
    */
   memo?: boolean
 
-  /**
-   * Auto-detect, but can ovverride, passes styles properly to react-native-web
-   */
-  isTamagui?: boolean
-
   /**
    * Used internally to handle extractable HoC separate
    */
@@ -829,8 +832,8 @@ export type StylableComponent =
   | TamaguiComponent
   // * excessively deep type instantiation
   // | TamaguiReactElement
-  | React.Component
-  | React.ForwardRefExoticComponent<any>
+  | Component
+  | ForwardRefExoticComponent<any>
   | ReactComponentWithRef<any, any>
   | (new (props: any) => any)
   | typeof View
@@ -859,7 +862,7 @@ export type GetProps<A extends StylableComponent> = A extends TamaguiComponent<i
   ? Props
   : A extends TamaguiReactElement<infer Props>
   ? Props
-  : A extends React.Component<infer Props>
+  : A extends Component<infer Props>
   ? GetGenericComponentTamaguiProps<Props>
   : A extends new (props: infer Props) => any
   ? GetGenericComponentTamaguiProps<Props>
@@ -1275,13 +1278,13 @@ export type UniversalAnimatedNumber<A> = {
 }
 
 export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
-  avoidClasses?: boolean
+  isReactNativeWeb?: boolean
   useAnimations: UseAnimationHook
   useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>
   useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(
     val: V,
     getStyle: (current: any) => any
-  ) => void
+  ) => any
   useAnimatedNumberReaction: (
     val: UniversalAnimatedNumber<any>,
     onValue: (current: number) => void

package/src/views/FontLanguage.native.tsx

@@ -4,6 +4,7 @@ import { FontLanguageContext } from '../contexts/FontLanguageContext'
 import { FontLanguageProps } from './FontLanguage.types'
 
 export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const value = useMemo(() => props, [JSON.stringify(props)])
   return <FontLanguageContext.Provider value={value}>{children}</FontLanguageContext.Provider>
 }

package/src/views/Stack.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native'
+import type { View } from '@tamagui/types-react-native'
 
 import { stackDefaultStyles } from '../constants/constants'
 import { createComponent } from '../createComponent'

package/src/views/TamaguiProvider.tsx

@@ -2,8 +2,8 @@ import { isClient, isRSC, isServer } from '@tamagui/constants'
 import * as React from 'react'
 
 import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
-import { TextAncestorProvider } from '../contexts/TextAncestorContext'
-import { useMediaQueryListeners } from '../hooks/useMedia'
+import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { useMediaListeners } from '../hooks/useMedia'
 import type { TamaguiProviderProps } from '../types'
 import { ThemeProvider } from './ThemeProvider'
 
@@ -22,7 +22,7 @@ export function TamaguiProvider({
   }
 
   if (!isServer) {
-    useMediaQueryListeners(config)
+    useMediaListeners(config)
   }
 
   if (isClient) {
@@ -41,7 +41,7 @@ export function TamaguiProvider({
 
   return (
     <ButtonInsideButtonContext.Provider value={false}>
-      <TextAncestorProvider>
+      <TextAncestorContext.Provider value={false}>
         <ThemeProvider
           defaultTheme={config.defaultTheme || 'light'}
           themeClassNameOnRoot={config.themeClassNameOnRoot}
@@ -50,7 +50,7 @@ export function TamaguiProvider({
         >
           {children}
         </ThemeProvider>
-      </TextAncestorProvider>
+      </TextAncestorContext.Provider>
     </ButtonInsideButtonContext.Provider>
   )
 }

package/src/views/Text.tsx

@@ -1,6 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
-import { Text as TextView } from 'react-native'
+import type { Text as TextView } from '@tamagui/types-react-native'
 
 import { createComponent } from '../createComponent'
 import { TextProps, TextPropsBase } from '../types'

package/src/views/ThemeReset.tsx

@@ -1,4 +1,4 @@
-import { isClient, isWeb } from '@tamagui/constants'
+import { isClient } from '@tamagui/constants'
 import React, { useContext, useLayoutEffect, useState } from 'react'
 
 import { ThemeManagerContext } from '../helpers/ThemeManager'
@@ -9,7 +9,7 @@ React['createElement']
 
 // resets the theme to the parent theme
 export const ThemeReset = (props: { children?: any }) => {
-  const themeManager = useContext(ThemeManagerContext)
+  const manager = useContext(ThemeManagerContext)
   const [name, setName] = useState<string | null>(null)
 
   // this component doesn't work with SSR, so must run only client side
@@ -17,21 +17,21 @@ export const ThemeReset = (props: { children?: any }) => {
   // that changes to dark initially also go through and change all of these
   if (isClient) {
     useLayoutEffect(() => {
-      if (!themeManager) return
-      if (name !== themeManager.parentName) {
-        setName(themeManager.parentName)
+      if (!manager) return
+      if (name !== manager.parentName) {
+        setName(manager.parentName)
       }
-    }, [name, themeManager, themeManager?.parentName])
+    }, [name, manager, manager?.parentName])
 
     useLayoutEffect(() => {
-      if (!themeManager) return
-      return themeManager.onChangeTheme(() => {
-        setName(themeManager.parentName)
+      if (!manager) return
+      return manager.onChangeTheme(() => {
+        setName(manager.parentName)
       })
-    }, [themeManager])
+    }, [manager])
   }
 
-  if (!themeManager || !props.children) {
+  if (!manager || !props.children) {
     return props.children || null
   }
 

package/types/Tamagui.d.ts

@@ -1,8 +1,10 @@
 import * as Helpers from '@tamagui/helpers';
-import * as rnw from '@tamagui/rnw';
 declare class TamaguiManager {
-    rnw: typeof rnw;
     Helpers: typeof Helpers;
+    get mediaState(): {
+        [x: `$${string}`]: boolean;
+        [x: `$${number}`]: boolean;
+    };
     get config(): import("./types").TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
         [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
             [key: string]: import("./types").VariableVal;
@@ -16,8 +18,8 @@ declare class TamaguiManager {
             [key: string]: any;
         };
     }, import("./types").GenericFonts>;
-    get insertedRules(): unknown[];
-    get allSelectors(): {};
+    get insertedRules(): (boolean | string[])[];
+    get allSelectors(): Record<string, string>;
     get allTransforms(): {};
     get identifierToValue(): Map<string, any>;
 }

package/types/constants/constants.d.ts

@@ -1,9 +1,20 @@
 export declare const THEME_NAME_SEPARATOR = "_";
 export declare const THEME_CLASSNAME_PREFIX = "t_";
+export declare const webOnlyDefaultStyles: {
+    display: string;
+    flexBasis: string;
+    boxSizing: string;
+    position: string;
+    minHeight: number;
+    minWidth: number;
+};
 export declare const stackDefaultStyles: {
-    display?: string | undefined;
-    flexBasis?: string | undefined;
-    boxSizing?: string | undefined;
+    display: string;
+    flexBasis: string;
+    boxSizing: string;
+    position: string;
+    minHeight: number;
+    minWidth: number;
     alignItems: string;
     flexShrink: number;
 };

package/types/contexts/TextAncestorContext.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
-export declare const FallbackNativeContext: React.Context<boolean>;
-export declare const TextAncestorContext: any;
-export declare const TextAncestorProvider: (props: any) => JSX.Element;
+export declare const TextAncestorContext: React.Context<boolean>;
 //# sourceMappingURL=TextAncestorContext.d.ts.map