@tamagui/core 1.0.1-beta.155 → 1.0.1-beta.156

package/src/createComponent.tsx

@@ -31,7 +31,6 @@ import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { assignNativePropsToWeb } from './helpers/assignNativePropsToWeb'
 import { getReturnVariablesAs } from './helpers/createPropMapper'
-import { createShallowUpdate } from './helpers/createShallowUpdate'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
 import {
   SplitStyleResult,
@@ -42,6 +41,7 @@ import {
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
+import { useShallowSetState } from './helpers/useShallowSetState'
 import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
@@ -98,7 +98,6 @@ function mergeShorthands({ defaultProps }: StaticConfigParsed, { shorthands }: T
 
 let initialTheme: any
 let config: TamaguiInternalConfig
-const mediaPropNames: string[] = []
 
 export function createComponent<
   ComponentPropTypes extends Object = {},
@@ -181,7 +180,7 @@ export function createComponent<
 
     const hostRef = useServerRef<TamaguiElement>(null)
     const setState = states[1]
-    const setStateShallow = createShallowUpdate(setState)
+    const setStateShallow = useShallowSetState(setState)
 
     if (process.env.NODE_ENV === 'development') {
       if (props['debug']) {
@@ -193,11 +192,17 @@ export function createComponent<
         // eslint-disable-next-line no-console
         console.group(`%c 🐛 ${banner}`, 'background: yellow;')
         // eslint-disable-next-line no-console
-        console.log('props in', propsIn)
+        console.groupCollapsed('initial state')
+        // eslint-disable-next-line no-console
+        console.log('props', propsIn)
+        // eslint-disable-next-line no-console
+        console.log('splitStyles', splitStyles)
         if (typeof window !== 'undefined') {
           // eslint-disable-next-line no-console
           console.log('ref', hostRef, '(click to view)')
         }
+        // eslint-disable-next-line no-console
+        console.groupEnd()
         if (props['debug'] === 'break') {
           // eslint-disable-next-line no-debugger
           debugger
@@ -609,7 +614,7 @@ export function createComponent<
       }
     }
 
-    if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
+    if (process.env.NODE_ENV === 'development' && !isText && isWeb && !staticConfig.isHOC) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === 'string') {
           // eslint-disable-next-line no-console
@@ -618,12 +623,19 @@ export function createComponent<
       })
     }
 
+    const unPress = useCallback(() => {
+      setStateShallow({
+        press: false,
+        pressIn: false,
+      })
+    }, [setStateShallow])
+
     if (!isRSC) {
       useEffect(() => {
         return () => {
           mouseUps.delete(unPress)
         }
-      }, [])
+      }, [unPress])
     }
 
     let styles: any[]
@@ -669,10 +681,6 @@ export function createComponent<
         fontFamily = fontFamily.slice(1)
       }
 
-      if (props['debug']) {
-        console.log('???', fontFamily, isText)
-      }
-
       const classList = [
         componentName ? componentClassName : '',
         fontFamily ? `font_${fontFamily}` : '',
@@ -774,13 +782,6 @@ export function createComponent<
             'onMouseEnter' in props ||
             'onMouseLeave' in props)))
 
-    const unPress = useCallback(() => {
-      setStateShallow({
-        press: false,
-        pressIn: false,
-      })
-    }, [])
-
     const events =
       shouldAttach && !isRSC
         ? {
@@ -1179,7 +1180,7 @@ export function createComponent<
         Component,
         ...conf,
         neverFlatten: true,
-        isExtractable: true,
+        isHOC: true,
         defaultProps: {
           ...Component.defaultProps,
           ...conf?.defaultProps,

package/src/helpers/createPropMapper.ts

@@ -1,4 +1,5 @@
 import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
 import { isWeb } from '../constants/platform'
 import { Variable, isVariable } from '../createVariable'
 import {
@@ -380,21 +381,24 @@ const getToken = (
     }
   }
   if (hasSet) {
+    if (process.env.NODE_ENV === 'development' && isDevTools && debug === 'verbose') {
+      // eslint-disable-next-line no-console
+      console.log(`   ﹒ propMapper getToken`, key, valOrVar)
+    }
     return getVariableValue(key, valOrVar, resolveAs)
   }
   if (process.env.NODE_ENV === 'development') {
     if (value && value[0] === '$') {
+      // eslint-disable-next-line no-console
       console.trace(
         `⚠️ You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
 
 Set the debug prop to true to see more detailed debug information.`
       )
       if (debug) {
-        if (typeof window !== 'undefined') {
-          console.log('Looked in:')
-          console.log('Theme:', theme)
-          console.log('Tokens:', tokensParsed)
-          console.log('Fonts:', fontsParsed)
+        if (isDevTools) {
+          // eslint-disable-next-line no-console
+          console.log('Looked in:', { theme, tokensParsed, fontsParsed })
         }
       }
       return null

package/src/helpers/getSplitStyles.tsx

@@ -1,8 +1,9 @@
 import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
-import { useInsertionEffect } from 'react'
+import { useInsertionEffect, useMemo } from 'react'
 import type { ViewStyle } from 'react-native'
 
 import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
 import type {
@@ -255,6 +256,11 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
+    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+      // eslint-disable-next-line no-console
+      console.groupCollapsed('  🔹 styles', keyInit, valInit)
+    }
+
     const expanded =
       isMedia || isPseudo
         ? [[keyInit, valInit]]
@@ -271,7 +277,11 @@ export const getSplitStyles: StyleSplitter = (
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       // eslint-disable-next-line no-console
-      console.log('  🔹 getSplitStyles', keyInit, valInit, expanded)
+      console.log('expanded', expanded)
+      // eslint-disable-next-line no-console
+      console.log('usedKeys', [...usedKeys])
+      // eslint-disable-next-line no-console
+      console.groupEnd()
     }
 
     if (!expanded) {
@@ -456,46 +466,49 @@ export const getSplitStyles: StyleSplitter = (
         style[key] = atomicStyle.value
       }
     }
-  } else {
-    if (classNames && state.resolveVariablesAs === 'value') {
-      // getting real values for colors for animations (reverse mapped from CSS)
-      // this isn't beautiful, but will do relatively fine performance for now
-      // has a bug still - try adding <Switch theme="bouncy" /> should animate bg color on active
-      // const selectors = getAllSelectors()
-      // for (const key in classNames) {
-      //   if (key.endsWith('Color')) {
-      //     const selector = classNames[key]
-      //     let value = selectorValuesCache[selector]
-      //     if (!value) {
-      //       const css = selectors[selector]
-      //       value = css.replace(/.*:/, '').replace(/;.*/, '')
-      //       if (value) {
-      //         const themeUnwrapped = getThemeUnwrapped(theme)
-      //         const map = themeToVariableToValueMap.get(themeUnwrapped)
-      //         if (map && value.startsWith('var(')) {
-      //           value = map[value]
-      //         }
-      //         if (value) {
-      //           selectorValuesCache[selector] = value
-      //         }
-      //       } else {
-      //         // err
-      //         continue
-      //       }
-      //     }
-      //     if (value) {
-      //       style[key] = value
-      //     }
-      //   }
-      // }
-    }
   }
 
+  // else {
+  // if (classNames && state.resolveVariablesAs === 'value') {
+  // getting real values for colors for animations (reverse mapped from CSS)
+  // this isn't beautiful, but will do relatively fine performance for now
+  // has a bug still - try adding <Switch theme="bouncy" /> should animate bg color on active
+  // const selectors = getAllSelectors()
+  // for (const key in classNames) {
+  //   if (key.endsWith('Color')) {
+  //     const selector = classNames[key]
+  //     let value = selectorValuesCache[selector]
+  //     if (!value) {
+  //       const css = selectors[selector]
+  //       value = css.replace(/.*:/, '').replace(/;.*/, '')
+  //       if (value) {
+  //         const themeUnwrapped = getThemeUnwrapped(theme)
+  //         const map = themeToVariableToValueMap.get(themeUnwrapped)
+  //         if (map && value.startsWith('var(')) {
+  //           value = map[value]
+  //         }
+  //         if (value) {
+  //           selectorValuesCache[selector] = value
+  //         }
+  //       } else {
+  //         // err
+  //         continue
+  //       }
+  //     }
+  //     if (value) {
+  //       style[key] = value
+  //     }
+  //   }
+  // }
+  // }
+  // }
+
   if (process.env.TAMAGUI_TARGET === 'web') {
     if (transforms) {
       for (const namespace in transforms) {
         if (!transforms[namespace]) {
           if (process.env.NODE_ENV === 'development') {
+            // eslint-disable-next-line no-console
             console.warn('Error no transform', transforms, namespace)
           }
           continue
@@ -518,10 +531,17 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-    if (typeof document !== 'undefined') {
+    if (isDevTools) {
       // prettier-ignore
       // eslint-disable-next-line no-console
-      console.log('  🔹 getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })
+      console.groupCollapsed('  🔹 styles =>')
+      const logs = { style, pseudos, medias, classNames, viewProps, state, rulesToInsert }
+      for (const key in logs) {
+        // eslint-disable-next-line no-console
+        console.log(key, logs[key])
+      }
+      // eslint-disable-next-line no-console
+      console.groupEnd()
     }
   }
 

package/src/helpers/normalizeValueWithProperty.ts

@@ -9,7 +9,9 @@ const cache = {}
 
 export function normalizeValueWithProperty(value: any, property?: string): any {
   const cached = cache[value]
-  if (cached) return cached
+  if (cached) {
+    return cached
+  }
   let res = value
   if (
     process.env.TAMAGUI_TARGET === 'web' &&

package/src/helpers/{createShallowUpdate.tsx → useShallowSetState.tsx}

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-export function createShallowUpdate<State extends Object>(
+export function useShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>
 ) {
   // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/hooks/useTheme.tsx

@@ -2,6 +2,7 @@ import { useForceUpdate } from '@tamagui/use-force-update'
 import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import { getConfig } from '../config'
+import { isDevTools } from '../constants/isDevTools'
 import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
@@ -55,7 +56,14 @@ export const useTheme = (
   if (process.env.NODE_ENV === 'development') {
     if (props?.debug === 'verbose') {
       // eslint-disable-next-line no-console
-      console.log('  🔹 useTheme', { themeName, componentName, name, className })
+      console.groupCollapsed('  🔹 useTheme =>', name)
+      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }
+      for (const key in logs) {
+        // eslint-disable-next-line no-console
+        console.log('  ', key, logs[key])
+      }
+      // eslint-disable-next-line no-console
+      console.groupEnd()
     }
   }
 
@@ -91,7 +99,7 @@ export const useTheme = (
 
   return useMemo(() => {
     return getThemeProxied(theme, name, className, themeManager, state, debugProp)
-  }, [theme, name, themeManager, className, debugProp])
+  }, [theme, name, className, themeManager, state, debugProp])
 }
 
 function getThemeProxied(
@@ -224,20 +232,21 @@ export const useChangeThemeEffect = (
     return new ThemeManager(next.name, next.theme, parentManager, reset)
   })
 
-  // if not SSR
+  // not concurrent safe for now but fixes bug in showing old value
+  if (next?.name !== themeManager.name || next?.className !== themeManager.className) {
+    themeManager.update(next)
+  }
+
   if (!isSSR) {
     useLayoutEffect(() => {
       activeThemeManagers.add(themeManager)
 
-      if (next?.name) {
-        themeManager.update(next)
-      }
-
       const disposeParentOnChange = parentManager.onChangeTheme(() => {
         const next = parentManager.getNextTheme(getThemeProps, debug)
         if (!next) return
         if (themeManager.update(next)) {
           if (process.env.NODE_ENV === 'development' && debug) {
+            // eslint-disable-next-line no-console
             console.log('Changed theme', componentName, next, { props })
           }
           forceUpdate()

package/src/index.ts

@@ -22,7 +22,7 @@ export * from './constants/platform'
 export { createDOMProps } from '@tamagui/rnw'
 
 export * from './helpers/calc'
-export * from './helpers/createShallowUpdate'
+export * from './helpers/useShallowSetState'
 export * from './helpers/getStackSize'
 export * from './helpers/getVariantExtras'
 export * from './helpers/getAnimationDriver'

package/src/styled.tsx

@@ -1,3 +1,5 @@
+import { Image, Text, TextInput } from 'react-native'
+
 import { createComponent } from './createComponent'
 import { RNComponents } from './helpers/RNComponents'
 import {
@@ -8,6 +10,7 @@ import {
   StaticConfig,
   StylableComponent,
   TamaguiComponent,
+  TamaguiElement,
   VariantDefinitions,
   VariantSpreadFunction,
 } from './types'
@@ -36,6 +39,16 @@ export function styled<
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
+
+    if (process.env.NODE_ENV === 'development') {
+      if (parentStaticConfig?.isHOC) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`
+        )
+      }
+    }
+
     if (options) {
       const { variants, name, defaultVariants, ...defaultProps } = options
       if (defaultVariants) {
@@ -61,10 +74,14 @@ export function styled<
         : null
       const isTamagui = !isReactNativeWeb && !!parentStaticConfig
       const Comp = reactNativeWebComponent || (Component as any)
-      const isImage = Boolean(staticExtractionOptions?.isImage ?? parentStaticConfig?.isImage)
-      const isInput = Boolean(staticExtractionOptions?.isInput ?? parentStaticConfig?.isInput)
+      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)
+        isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
       )
 
       const conf: Partial<StaticConfig> = {
@@ -122,8 +139,7 @@ export function styled<
 
   return component as TamaguiComponent<
     Props,
-    // TODO infer ref
-    any,
+    TamaguiElement,
     ParentPropsBase,
     ParentVariants & OurVariants
   >

package/src/types.tsx

@@ -766,7 +766,7 @@ export type StaticConfig = {
   /**
    * Used internally to handle extractable HoC separate
    */
-  isExtractable?: boolean
+  isHOC?: boolean
 
   /**
    * Used insternally to attach default props to names

package/types/constants/isDevTools.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevTools: any;
+//# sourceMappingURL=isDevTools.d.ts.map

package/types/helpers/createShallowUpdate.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare function createShallowUpdate<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>): (next: Partial<State>) => void;
+export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>): (next: Partial<State>) => void;
 //# sourceMappingURL=createShallowUpdate.d.ts.map

package/types/helpers/useShallowSetState.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>): (next: Partial<State>) => void;
+//# sourceMappingURL=useShallowSetState.d.ts.map

package/types/index.d.ts

@@ -18,7 +18,7 @@ export * from './constants/constants';
 export * from './constants/platform';
 export { createDOMProps } from '@tamagui/rnw';
 export * from './helpers/calc';
-export * from './helpers/createShallowUpdate';
+export * from './helpers/useShallowSetState';
 export * from './helpers/getStackSize';
 export * from './helpers/getVariantExtras';
 export * from './helpers/getAnimationDriver';

package/types/styled.d.ts

@@ -1,4 +1,4 @@
-import { GetProps, GetVariantValues, MediaProps, PseudoProps, StaticConfig, StylableComponent, TamaguiComponent, VariantDefinitions, VariantSpreadFunction } from './types';
+import { GetProps, GetVariantValues, MediaProps, PseudoProps, StaticConfig, StylableComponent, TamaguiComponent, TamaguiElement, VariantDefinitions, VariantSpreadFunction } from './types';
 export declare type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {
     name?: string;
     variants?: VariantDefinitions<ParentComponent> | undefined;
@@ -12,5 +12,5 @@ export declare function styled<ParentComponent extends StylableComponent, Varian
     defaultVariants?: {
         [key: string]: any;
     };
-}, staticExtractionOptions?: Partial<StaticConfig>): TamaguiComponent<Variants extends void ? GetProps<ParentComponent> : (ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; }) & MediaProps<Partial<(ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>> & PseudoProps<Partial<(ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>>, any, ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>, (ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}) & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>;
+}, staticExtractionOptions?: Partial<StaticConfig>): TamaguiComponent<Variants extends void ? GetProps<ParentComponent> : (ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; }) & MediaProps<Partial<(ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>> & PseudoProps<Partial<(ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>) & Omit<ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}, keyof (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })> & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>>, TamaguiElement, ParentComponent extends TamaguiComponent<any, any, infer P, {}> ? P : GetProps<ParentComponent>, (ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}) & (Variants extends void ? {} : { [Key in keyof Variants]?: (Variants[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof Variants[Key]>) | undefined; })>;
 //# sourceMappingURL=styled.d.ts.map

package/types/types.d.ts

@@ -390,7 +390,7 @@ export declare type StaticConfig = {
     reactNativeWebComponent?: any;
     memo?: boolean;
     isTamagui?: boolean;
-    isExtractable?: boolean;
+    isHOC?: boolean;
     parentNames?: string[];
 };
 export declare type StylableComponent = TamaguiComponent | React.Component | React.ForwardRefExoticComponent<any> | ReactComponentWithRef<any, any> | (new (props: any) => any) | typeof View | typeof Text | typeof TextInput | typeof Image;