@tamagui/core 1.0.1-beta.149 → 1.0.1-beta.150

package/src/createComponent.tsx

@@ -20,6 +20,7 @@ import React, {
   memo,
   useCallback,
   useContext,
+  useEffect,
 } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
@@ -32,12 +33,16 @@ import { assignNativePropsToWeb } from './helpers/assignNativePropsToWeb'
 import { getReturnVariablesAs } from './helpers/createPropMapper'
 import { createShallowUpdate } from './helpers/createShallowUpdate'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
-import { SplitStyleResult, insertSplitStyles, useSplitStyles } from './helpers/getSplitStyles'
+import {
+  SplitStyleResult,
+  getSubStyle,
+  insertSplitStyles,
+  useSplitStyles,
+} from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
-import { useFeatures } from './hooks/useFeatures'
-import { mediaState } from './hooks/useMedia'
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
@@ -54,6 +59,7 @@ import {
   TamaguiElement,
   TamaguiInternalConfig,
   UseAnimationHook,
+  UseAnimationProps,
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
@@ -92,6 +98,7 @@ function mergeShorthands({ defaultProps }: StaticConfigParsed, { shorthands }: T
 
 let initialTheme: any
 let config: TamaguiInternalConfig
+let mediaPropNames: string[] = []
 
 export function createComponent<
   ComponentPropTypes extends Object = {},
@@ -199,25 +206,114 @@ export function createComponent<
       }
     }
 
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames, mediaKeys } = splitStyles
+
+    // media queries
+    useIsomorphicLayoutEffect(() => {
+      for (const key of mediaKeys) {
+        addMediaQueryListener(key, forceUpdate)
+      }
+      return () => {
+        for (const key of mediaKeys) {
+          removeMediaQueryListener(key, forceUpdate)
+        }
+      }
+    }, [mediaKeys.join(',')])
+
+    // animations
     const useAnimations = tamaguiConfig?.animations?.useAnimations as UseAnimationHook | undefined
     const isAnimated = !!(useAnimations && props.animation)
     const hasEnterStyle = !!props.enterStyle
-
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null
+    const propsWithAnimation = props as UseAnimationProps
+
+    // lets make changing the key mandatory for adding/removing animations
+    // reason is animations are heavy no way around it, and must be run inline here (🙅 loading as a sub-component)
+    // because they need to sync update on first render. it's pretty rare too going to/from no animation => animation
+    // so requiring key change on animation change is least-bad option.
+    // plus, React use() may let us get away with conditional hooks soon :)
+    if (!isRSC && isAnimated) {
+      const animationState = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          // we have to merge such that transforms keys all exist
+          const style = animationFeatureStylesIn
+
+          const enterStyle = isEntering
+            ? enterVariant && staticConfig.variants?.[enterVariant]['true']
+              ? getSubStyle(
+                  '',
+                  staticConfig.variants?.[enterVariant]['true'],
+                  staticConfig,
+                  theme,
+                  props,
+                  state,
+                  tamaguiConfig
+                ) || pseudos.enterStyle
+              : null || pseudos.enterStyle
+            : null
+
+          const exitStyle = isExiting
+            ? exitVariant && staticConfig.variants?.[exitVariant]['true']
+              ? getSubStyle(
+                  '',
+                  staticConfig.variants?.[exitVariant]['true'],
+                  staticConfig,
+                  theme,
+                  props,
+                  state,
+                  tamaguiConfig
+                ) || pseudos.exitStyle
+              : null || pseudos.exitStyle
+            : null
+
+          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style
+          // no animation will run! this is really confusing. this will look at all variants,
+          // and fill in base styles if they don't exist. eg:
+          // input:
+          //   base: {}
+          //   hoverStyle: { scale: 2 }
+          //   enterStyle: { x: 100 }
+          // output:
+          //   base: { x: 0, scale: 1 }
+          ensureBaseHasDefaults(
+            style,
+            // enterStyle,
+            pseudos.hoverStyle,
+            pseudos.focusStyle,
+            pseudos.pressStyle,
+            pseudos.pressStyle
+          )
 
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
-      staticConfig,
-      theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate,
-    })
+          enterStyle && isEntering && merge(style, enterStyle)
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)
+          exitStyle && isExiting && merge(style, exitStyle)
+
+          if (process.env.NODE_ENV === 'development') {
+            if (props['debug']) {
+              // eslint-disable-next-line no-console
+              console.log('animation style', style)
+            }
+          }
+
+          return style
+        },
+        //, delay
+      })
+
+      // must be properly memoized
+      if (animationState !== state.animation) {
+        setStateShallow({
+          animation: animationState,
+        })
+      }
+    }
 
     const {
       tag,
@@ -434,7 +530,27 @@ export function createComponent<
 
         // from react-native-web
         const platformMethodsRef = usePlatformMethods(viewProps)
-        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef as any)
+
+        const shouldSetMounted = Boolean(
+          isClient && (hasEnterStyle || props.animation) && !state.mounted
+        )
+
+        const setRef = useMergeRefs(
+          hostRef,
+          platformMethodsRef,
+          forwardedRef as any,
+          shouldSetMounted
+            ? () => {
+                // for some reason without some small delay it doesn't animate css
+                setTimeout(() => {
+                  setStateShallow({
+                    mounted: true,
+                  })
+                }, 10)
+              }
+            : undefined
+        )
+
         viewProps.ref = setRef
       }
 
@@ -503,31 +619,14 @@ export function createComponent<
       })
     }
 
-    // isMounted
-    const internal = useServerRef<{ isMounted: boolean; unmountEffects?: Function[] }>()
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true,
-      }
+    if (!isRSC) {
+      useEffect(() => {
+        return () => {
+          mouseUps.delete(unPress)
+        }
+      }, [])
     }
 
-    useIsomorphicLayoutEffect(() => {
-      // we need to use state to properly have mounted go from false => true
-      if (isClient && (hasEnterStyle || props.animation) && !state.mounted) {
-        // for SSR we never set mounted, ensuring enterStyle={{}} is set by default
-        setStateShallow({
-          mounted: true,
-        })
-      }
-
-      internal.current!.isMounted = true
-      return () => {
-        mouseUps.delete(unPress)
-        internal.current!.isMounted = false
-        internal.current!.unmountEffects?.forEach((cb) => cb())
-      }
-    }, [hasEnterStyle, props.animation])
-
     let styles: any[]
 
     const animationStyles = state.animation ? state.animation.style : null
@@ -546,11 +645,13 @@ export function createComponent<
       ]
       if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos
-        const force = shouldForcePseudo
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
-        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, 'hoverStyle', force)
-        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, 'focusStyle', force)
-        state.press && addPseudoToStyles(styles, initPseudos, pseudos, 'pressStyle', force)
+        state.hover &&
+          addPseudoToStyles(styles, initPseudos, pseudos, 'hoverStyle', shouldForcePseudo)
+        state.focus &&
+          addPseudoToStyles(styles, initPseudos, pseudos, 'focusStyle', shouldForcePseudo)
+        state.press &&
+          addPseudoToStyles(styles, initPseudos, pseudos, 'pressStyle', shouldForcePseudo)
       }
       // ugly but for now...
       if (shouldForcePseudo) {
@@ -648,7 +749,6 @@ export function createComponent<
             'onMouseLeave' in props)))
 
     const unPress = useCallback(() => {
-      if (!internal.current!.isMounted) return
       setStateShallow({
         press: false,
         pressIn: false,
@@ -739,8 +839,9 @@ export function createComponent<
         : null
 
     let space = spaceProp
+
     // find space by media query
-    if (features.enabled.mediaQuery) {
+    if (mediaKeys.length) {
       for (const key in mediaState) {
         if (!mediaState[key]) continue
         if (props[key] && props[key].space !== undefined) {
@@ -854,7 +955,9 @@ export function createComponent<
       // only necessary when animating because some AnimatedView which wraps RNW View doesn't forward dataSet className
       const isAnimatedRNWView = isAnimated && typeof elementType !== 'string' // assuming for now as reanimated is only driver
       const shouldWrapWithComponentTheme =
-        isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === 'non-color-value'
+        !!theme.className &&
+        isAnimatedRNWView &&
+        getReturnVariablesAs(props, splitStyleState) === 'non-color-value'
       const shouldWrapWithHover = Boolean(events || isRSC) && attachHover
 
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
@@ -901,14 +1004,7 @@ export function createComponent<
       }
     }
 
-    return !isRSC && features.elements.length ? (
-      <>
-        {features.elements}
-        {content}
-      </>
-    ) : (
-      content
-    )
+    return content
   })
 
   if (staticConfig.componentName) {
@@ -1335,3 +1431,69 @@ function mergeConfigDefaultProps(
   }
   return props
 }
+
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: '0deg',
+  rotateY: '0deg',
+  rotateX: '0deg',
+}
+
+function ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {
+  for (const pseudo of pseudos) {
+    if (!pseudo) continue
+    for (const key in pseudo) {
+      const val = pseudo[key]
+      // can we just use merge() here?
+      if (key === 'transform') {
+        if (typeof val === 'string') {
+          continue
+        }
+        for (const t of val) {
+          const tkey = Object.keys(t)[0]
+          const defaultVal = defaults[tkey]
+          const tDefaultVal = { [tkey]: defaultVal } as any
+          if (!base.transform) {
+            base.transform = [tDefaultVal]
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal)
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key]
+        }
+      }
+    }
+  }
+}
+
+function merge(base: ViewStyle, next: ViewStyle) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next)
+    return
+  }
+  const { transform, ...rest } = next
+  Object.assign(base, rest)
+  for (const t of transform) {
+    const key = Object.keys(t)[0]
+    const existing = base.transform.find((x) => key in x)
+    if (existing) {
+      existing[key] = t[key]
+    } else {
+      base.transform.push(t)
+    }
+  }
+}

package/src/helpers/getSplitStyles.tsx

@@ -78,6 +78,7 @@ type StyleSplitter = (
   rulesToInsert: RulesToInsert
   viewProps: StackProps
   fontFamily: string | undefined
+  mediaKeys: string[]
 }
 
 export const PROP_SPLIT = '-'
@@ -108,12 +109,14 @@ export const getSplitStyles: StyleSplitter = (
 ) => {
   conf = conf || getConfig()
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
+  const mediaKeys: string[] = []
   const viewProps: StackProps = {}
   const pseudos: PseudoStyles = {}
   const medias: Record<MediaQueryKey, ViewStyle> = {}
   const usedKeys = new Set<string>()
   const propKeys = Object.keys(props)
-  const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames
+  const shouldDoClasses =
+    (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames && !props.animation
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const style: ViewStyle = {}
@@ -125,54 +128,7 @@ export const getSplitStyles: StyleSplitter = (
   let classNames: ClassNamesObject = {}
   // we need to gather these specific to each media query / pseudo
   // value is [hash, val], so ["-jnjad-asdnjk", "scaleX(1) rotate(10deg)"]
-  let transforms = null as Record<TransformNamespaceKey, [string, string]> | null
-
-  function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      // empty classnames passed by compiler sometimes
-      if (!val) return
-      if (val.startsWith('_transform-')) {
-        const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
-
-        let transform = insertedTransforms[val]
-        if (isClient) {
-          if (!transform) {
-            // HMR or loaded a new chunk
-            updateInserted()
-            transform = insertedTransforms[val]
-            if (process.env.NODE_ENV === 'development') {
-              if (!transform) {
-                // eslint-disable-next-line no-console
-                console.warn('no transform found', { insertedTransforms, val })
-              }
-            }
-          }
-          if (!transform) {
-            if (isWeb && val[0] !== '_') {
-              // runtime insert
-              transform = val
-            }
-          }
-          if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-            // prettier-ignore
-            // eslint-disable-next-line no-console
-            console.log('  🔹 getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })
-          }
-        }
-        transforms = transforms || {}
-        transforms[namespace] = transforms[namespace] || ['', '']
-        const identifier = val.replace('_transform', '')
-        transforms[namespace][0] += identifier
-        // ssr doesn't need to do anything just make the right classname
-        if (transform) {
-          transforms[namespace][1] += transform
-        }
-      } else {
-        classNames[key] = val
-      }
-    }
-  }
-
+  const transforms: Record<TransformNamespaceKey, [string, string]> = {}
   // fontFamily is our special baby, ensure we grab the latest set one always
   let fontFamily: string | undefined
 
@@ -237,14 +193,14 @@ export const getSplitStyles: StyleSplitter = (
               fullKey += `${PROP_SPLIT}${pseudoShortKey}`
             }
             usedKeys.add(fullKey)
-            mergeClassName(fullKey, cn, isMediaOrPseudo)
+            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo)
           } else {
             nonTamaguis += ' ' + cn
           }
         }
         if (nonTamaguis) {
           usedKeys.add(keyInit)
-          mergeClassName(keyInit, nonTamaguis)
+          mergeClassName(transforms, classNames, keyInit, nonTamaguis)
         }
         continue
       }
@@ -259,7 +215,7 @@ export const getSplitStyles: StyleSplitter = (
           validStyles[keyInit.split(PROP_SPLIT)[0]]
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys.add(keyInit)
-          mergeClassName(keyInit, valInit, isMediaOrPseudo)
+          mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
           continue
         }
       }
@@ -350,7 +306,7 @@ export const getSplitStyles: StyleSplitter = (
           continue
         }
         pseudos[key] = pseudos[key] || {}
-        pseudos[key] = getSubStyle(
+        const pseudoStyleObject = getSubStyle(
           key,
           val,
           staticConfig,
@@ -361,15 +317,16 @@ export const getSplitStyles: StyleSplitter = (
           languageContext,
           true
         )
-        if (shouldDoClasses) {
-          const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])
+        pseudos[key] = pseudoStyleObject
+        if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {
+          const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key])
           for (const style of pseudoStyles) {
             const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors
             const fullKey = `${style.property}${PROP_SPLIT}${postfix}`
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey)
               addStyleToInsertRules(rulesToInsert, style)
-              mergeClassName(fullKey, style.identifier, isMediaOrPseudo)
+              mergeClassName(transforms, classNames, fullKey, style.identifier, isMediaOrPseudo)
             }
           }
         }
@@ -379,6 +336,7 @@ export const getSplitStyles: StyleSplitter = (
       // media
       if (isMedia) {
         const mediaKey = key
+        mediaKeys.push(key)
         const mediaKeyShort = mediaKey.slice(1)
 
         if (!mediaQueryConfig[mediaKeyShort]) {
@@ -419,7 +377,7 @@ export const getSplitStyles: StyleSplitter = (
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey)
               addStyleToInsertRules(rulesToInsert, out)
-              mergeClassName(fullKey, out.identifier, true)
+              mergeClassName(transforms, classNames, fullKey, out.identifier, true)
             }
           }
         } else {
@@ -428,7 +386,14 @@ export const getSplitStyles: StyleSplitter = (
               // eslint-disable-next-line no-console
               console.log('apply media style', mediaKey, mediaState)
             }
-            Object.assign(shouldDoClasses ? medias : style, mediaStyle)
+            if (shouldDoClasses) {
+              Object.assign(medias, mediaStyle)
+            } else {
+              for (const key in mediaStyle) {
+                usedKeys.add(key)
+                style[key] = mediaStyle[key]
+              }
+            }
           }
         }
         continue
@@ -447,13 +412,7 @@ export const getSplitStyles: StyleSplitter = (
         } else if (key in stylePropsTransform) {
           mergeTransform(style, key, val, true)
         } else {
-          // if (key === 'pointerEvents') {
-          //   // pointer events can be box-none which requires css
-          //   addStyleToInsertRules(out.identifier, out.styleRule)
-          //   mergeClassName(fullKey, out.identifier, true)
-          // } else {
           style[key] = normalizeValueWithProperty(val, key)
-          // }
         }
         continue
       }
@@ -489,7 +448,7 @@ export const getSplitStyles: StyleSplitter = (
       // should probably have a few more exceptions here!
       if (key === 'pointerEvents' || !state.dynamicStylesInline) {
         addStyleToInsertRules(rulesToInsert, atomicStyle)
-        mergeClassName(key, atomicStyle.identifier)
+        mergeClassName(transforms, classNames, key, atomicStyle.identifier)
       } else {
         style[key] = atomicStyle.value
       }
@@ -568,12 +527,58 @@ export const getSplitStyles: StyleSplitter = (
     viewProps,
     style,
     medias,
+    mediaKeys,
     pseudos,
     classNames,
     rulesToInsert,
   }
 }
 
+function mergeClassName(
+  transforms: Record<string, any[]>,
+  classNames: Record<string, string>,
+  key: string,
+  val: string,
+  isMediaOrPseudo = false
+) {
+  if (process.env.TAMAGUI_TARGET === 'web') {
+    // empty classnames passed by compiler sometimes
+    if (!val) return
+    if (val.startsWith('_transform-')) {
+      const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
+      let transform = insertedTransforms[val]
+      if (isClient) {
+        if (!transform) {
+          // HMR or loaded a new chunk
+          updateInserted()
+          transform = insertedTransforms[val]
+          if (process.env.NODE_ENV === 'development') {
+            if (!transform) {
+              // eslint-disable-next-line no-console
+              console.warn('no transform found', { insertedTransforms, val })
+            }
+          }
+        }
+        if (!transform) {
+          if (isWeb && val[0] !== '_') {
+            // runtime insert
+            transform = val
+          }
+        }
+      }
+      transforms[namespace] = transforms[namespace] || ['', '']
+      const identifier = val.replace('_transform', '')
+      transforms[namespace][0] += identifier
+      // ssr doesn't need to do anything just make the right classname
+      if (transform) {
+        transforms[namespace][1] += transform
+      }
+    } else {
+      classNames[key] = val
+    }
+  }
+}
+
 /**
  * getSubStyle calls propMapper with props
  * those should be specific to the substyle, but fallback to the base props

package/src/helpers/mergeTransform.ts

@@ -4,10 +4,12 @@ export const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards
   obj.transform ||= []
   obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)
 }
+
 const mapTransformKeys = {
   x: 'translateX',
   y: 'translateY',
 }
+
 export const invertMapTransformKeys = {
   translateX: 'x',
   translateY: 'y',

package/src/types.tsx

@@ -1,7 +1,7 @@
 // TODO split this into own package @tamagui/types to share with animations packages
 
 import { Properties } from 'csstype'
-import React from 'react'
+import React, { RefObject } from 'react'
 import {
   GestureResponderEvent,
   Image,
@@ -1242,6 +1242,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
 export type UseAnimationHelpers = {
+  hostRef: RefObject<HTMLElement | View>
   staticConfig: StaticConfigParsed
   getStyle: (props?: {
     isEntering?: boolean
@@ -1262,6 +1263,6 @@ export type UseAnimationHelpers = {
 export type UseAnimationHook = (
   props: UseAnimationProps,
   helpers: UseAnimationHelpers
-) => {
+) => null | {
   style?: StackStylePropsBase | StackStylePropsBase[]
 }

package/types/helpers/getSplitStyles.d.ts

@@ -15,6 +15,7 @@ declare type StyleSplitter = (props: {
     rulesToInsert: RulesToInsert;
     viewProps: StackProps;
     fontFamily: string | undefined;
+    mediaKeys: string[];
 };
 export declare const PROP_SPLIT = "-";
 export declare const pseudoCNInverse: {

package/types/hooks/useFeatures.d.ts

@@ -16,7 +16,6 @@ declare type FeatureUtils = {
 export declare const useFeatures: (props: any, utils?: FeatureUtils) => {
     elements: JSX.Element[];
     enabled: {
-        animation?: boolean | undefined;
         mediaQuery?: boolean | undefined;
     };
 };