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

package/dist/esm/views/ThemeReset.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/ThemeReset.tsx"],
   "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../helpers/ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,KACtC,MAAM,QACT;AAEJ;",
+  "mappings": "AAsCI;AAtCJ,OAAO,SAAS,YAAY,iBAAiB,gBAAgB;AAE7D,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAGtB,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oBAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,IACtC,gBAAM;AAAA,GACT;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.149",
+  "version": "1.0.1-beta.152",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,14 +27,14 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.149",
-    "@tamagui/helpers": "^1.0.1-beta.149",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.149",
-    "@tamagui/rnw": "^1.0.1-beta.149",
-    "@tamagui/rnw-lite": "^1.0.1-beta.149",
-    "@tamagui/use-debounce": "^1.0.1-beta.149",
-    "@tamagui/use-event": "^1.0.1-beta.149",
-    "@tamagui/use-force-update": "^1.0.1-beta.149",
+    "@tamagui/compose-refs": "^1.0.1-beta.152",
+    "@tamagui/helpers": "^1.0.1-beta.152",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.152",
+    "@tamagui/rnw": "^1.0.1-beta.152",
+    "@tamagui/rnw-lite": "^1.0.1-beta.152",
+    "@tamagui/use-debounce": "^1.0.1-beta.152",
+    "@tamagui/use-event": "^1.0.1-beta.152",
+    "@tamagui/use-force-update": "^1.0.1-beta.152",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -43,7 +43,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.149",
+    "@tamagui/build": "^1.0.1-beta.152",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.14.49",

package/src/constants/platform.ts

@@ -8,6 +8,7 @@ export const isWindowDefined = typeof window !== 'undefined'
 export const isSSR = isWeb && !isWindowDefined
 export const isClient = isWeb && isWindowDefined
 
+// may want to move to VITE_RSC_BUILD
 export const isRSC = process.env.ENABLE_RSC
   ? // note this is statically analyzed so no funny business, just access it without optional chaining
     // @ts-ignore

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) {
@@ -606,7 +707,34 @@ export function createComponent<
       }
 
       viewProps.style = style
-    } else {
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      // swap out the right family based on weight/style
+      if (splitStyles.fontFamily) {
+        const faceInfo = config.fontsParsed[splitStyles.fontFamily]?.face
+        if (faceInfo) {
+          const [weight, style] = (() => {
+            let weight: string | undefined
+            let style: string | undefined
+            for (let i = styles.length; i >= 0; i--) {
+              weight ??= styles[i]?.fontWeight
+              style ??= styles[i]?.fontStyle
+            }
+            return [weight || '400', style || 'normal'] as const
+          })()
+          const overrideFace = faceInfo[weight]?.[style]?.val
+          if (overrideFace) {
+            for (const style of styles) {
+              if (style?.fontFamily) {
+                style.fontFamily = overrideFace
+              }
+            }
+          }
+        }
+      }
+
+      // assign styles
       viewProps.style = styles
     }
 
@@ -648,7 +776,6 @@ export function createComponent<
             'onMouseLeave' in props)))
 
     const unPress = useCallback(() => {
-      if (!internal.current!.isMounted) return
       setStateShallow({
         press: false,
         pressIn: false,
@@ -739,8 +866,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 +982,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 +1031,7 @@ export function createComponent<
       }
     }
 
-    return !isRSC && features.elements.length ? (
-      <>
-        {features.elements}
-        {content}
-      </>
-    ) : (
-      content
-    )
+    return content
   })
 
   if (staticConfig.componentName) {
@@ -1335,3 +1458,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/createFont.ts

@@ -4,8 +4,11 @@ export const createFont = <A extends GenericFont>(font: A): A => {
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 
+  // fill in intermediate values
   for (const key in font) {
-    if (key === 'size' || key === 'family') continue
+    if (key === 'size' || key === 'family' || key === 'face') {
+      continue
+    }
     const section = font[key] as Object
     const keys = Object.keys(section)
 

package/src/createVariable.ts

@@ -36,9 +36,10 @@ export const createVariable = <A extends string | number = any>(props: VariableI
 }
 
 // on the client maybe we can change the prototype of variable object toString to keep backwards compat
-export function variableToString(vrble?: any) {
+export function variableToString(vrble?: any, getValue = false) {
   if (!vrble) return ''
   if (isVariable(vrble)) {
+    if (getValue) return `${vrble.val}`
     return `${isWeb ? vrble.variable : vrble.val}`
   }
   return `${vrble}`

package/src/helpers/createMediaStyle.ts

@@ -27,9 +27,9 @@ export const createMediaStyle = (
     ogPrefix,
     `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
   )}`
-  const screenStr = negate ? 'not all' : 'screen'
+  const screenStr = negate ? 'not all and' : ''
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])
-  const mediaQuery = `${screenStr} and ${mediaSelector}`
+  const mediaQuery = `${screenStr} ${mediaSelector}`
   const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
   // combines media queries if they already exist
   let styleRule = ''