@tamagui/core 1.0.1-beta.216 → 1.0.1-beta.218

package/src/helpers/getSplitStyles.tsx

@@ -199,18 +199,6 @@ export const getSplitStyles: StyleSplitter = (
   let style: ViewStyle = {}
   let flatTransforms: Record<string, any> | undefined
 
-  function mergeStyle(key: string, val: any) {
-    usedKeys[key] = usedKeys[key] || 1
-    if (val && val[0] === '_') {
-      classNames[key] = val
-    } else if (key in stylePropsTransform) {
-      flatTransforms ||= {}
-      flatTransforms[key] = val
-    } else {
-      style[key] = normalizeValueWithProperty(val, key)
-    }
-  }
-
   const len = propKeys.length
   const rulesToInsert: RulesToInsert = []
   const classNames: ClassNamesObject = {}
@@ -225,6 +213,18 @@ export const getSplitStyles: StyleSplitter = (
     let keyInit = propKeys[i]
     const valInit = props[keyInit]
 
+    if (validStyleProps[keyInit] || keyInit.includes('-')) {
+      if (valInit && valInit[0] === '_') {
+        if (shouldDoClasses) {
+          classNames[keyInit] = valInit
+        } else {
+          style[keyInit] = reverseMapClassNameToValue(keyInit, valInit)
+        }
+        usedKeys[keyInit] = 1
+        continue
+      }
+    }
+
     // normalize shorthands up front
     const expandedKey = conf.shorthands[keyInit]
     if (expandedKey) {
@@ -251,6 +251,18 @@ export const getSplitStyles: StyleSplitter = (
       continue
     }
 
+    function mergeStyle(key: string, val: any) {
+      usedKeys[key] = usedKeys[key] || 1
+      if (val && val[0] === '_') {
+        classNames[key] = val
+      } else if (key in stylePropsTransform) {
+        flatTransforms ||= {}
+        flatTransforms[key] = val
+      } else {
+        style[key] = normalizeValueWithProperty(val, key)
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       /**
        * Copying in the accessibility/prop handling from react-native-web here
@@ -416,6 +428,7 @@ export const getSplitStyles: StyleSplitter = (
           !isValidClassName &&
           keyInit.includes(PROP_SPLIT) &&
           validStyles[keyInit.split(PROP_SPLIT)[0]]
+
         if (isValidClassName || isMediaOrPseudo) {
           usedKeys[keyInit] = 1
           mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo)
@@ -479,13 +492,9 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
-      if (!isServer) {
-        // eslint-disable-next-line no-console
-        console.log('expanded', expanded)
-        // eslint-disable-next-line no-console
-        console.log('usedKeys', usedKeys)
+      if (!isServer && isWeb) {
         // eslint-disable-next-line no-console
-        console.log('current', { ...style })
+        console.log('expanded', expanded, '\nusedKeys', usedKeys, '\ncurrent', { ...style })
       }
       // eslint-disable-next-line no-console
       console.groupEnd()
@@ -528,7 +537,7 @@ export const getSplitStyles: StyleSplitter = (
           conf,
           languageContext,
           true,
-          true
+          state.noClassNames
         )
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
@@ -545,6 +554,7 @@ export const getSplitStyles: StyleSplitter = (
 
         if (shouldDoClasses) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
+          if (debug) console.log('pseudoStyles', pseudoStyles)
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
             if (!usedKeys[fullKey]) {
@@ -603,7 +613,7 @@ export const getSplitStyles: StyleSplitter = (
           languageContext,
           // TODO try true like pseudo
           false,
-          true
+          state.noClassNames
         )
 
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
@@ -647,7 +657,6 @@ export const getSplitStyles: StyleSplitter = (
       }
 
       if (validStyleProps[key]) {
-        usedKeys[key] = 1
         mergeStyle(key, val)
         continue
       }
@@ -677,31 +686,32 @@ export const getSplitStyles: StyleSplitter = (
 
   // add in defaults if not set:
   if (parentSplitStyles) {
-    if (process.env.NODE_ENV === 'development') {
-      if (debug === 'verbose') {
-        // eslint-disable-next-line no-console
-        console.log(`  add in styled() parent styles`, { parentSplitStyles, shouldDoClasses })
-      }
-    }
     if (process.env.TAMAGUI_TARGET === 'web') {
-      for (const key in parentSplitStyles.classNames) {
-        if (key in classNames) continue
-        if (key in style) continue
-        const val = parentSplitStyles.classNames[key]
-        if (!shouldDoClasses) {
-          style[key] = reverseMapClassNameToValue(key, val)
-        } else {
+      if (shouldDoClasses) {
+        for (const key in parentSplitStyles.classNames) {
+          const val = parentSplitStyles.classNames[key]
+          if (key in style || key in classNames) continue
           classNames[key] = val
         }
       }
     }
     if (!shouldDoClasses) {
       for (const key in parentSplitStyles.style) {
-        if (key in classNames) continue
-        if (key in style) continue
+        if (key in classNames || key in style) continue
         style[key] = parentSplitStyles.style[key]
       }
     }
+    if (process.env.NODE_ENV === 'development') {
+      if (debug === 'verbose') {
+        // eslint-disable-next-line no-console
+        console.log(`  add in parent styled()`, {
+          parentSplitStyles,
+          shouldDoClasses,
+          style: { ...style },
+          classNames: { ...classNames },
+        })
+      }
+    }
   }
 
   if (process.env.TAMAGUI_TARGET === 'web') {
@@ -716,7 +726,7 @@ export const getSplitStyles: StyleSplitter = (
           mergeClassName(transforms, classNames, key, atomicStyle.identifier)
         }
         if (!IS_STATIC) {
-          style = emptyObject
+          style = {}
         }
       }
     }

package/src/helpers/getStylesAtomic.ts

@@ -78,10 +78,8 @@ const generateAtomicStyles = (
   const style = styleIn as Record<string, string | null | undefined>
 
   // transform
-  if (style.transform) {
-    if (Array.isArray(style.transform)) {
-      style.transform = style.transform.map(mapTransform).join(' ')
-    }
+  if (style.transform && Array.isArray(style.transform)) {
+    style.transform = style.transform.map(mapTransform).join(' ')
   }
 
   styleToCSS(style)

package/src/helpers/mergeProps.ts

@@ -12,16 +12,16 @@
  *   - shorthands can be expanded before merging
  */
 
-type StringRecord = Record<string, string>
+type AnyRecord = Record<string, any>
 
 export const mergeProps = (
   a: Object,
   b: Object,
   leaveOutClassNames = false,
-  inverseShorthands?: StringRecord
+  inverseShorthands?: AnyRecord
 ) => {
-  const out: StringRecord = {}
-  const outCns: StringRecord = leaveOutClassNames ? {} : (null as any)
+  const out: AnyRecord = {}
+  const outCns: AnyRecord = leaveOutClassNames ? {} : (null as any)
   for (const key in a) {
     mergeProp(out, outCns, a, b, key, leaveOutClassNames, inverseShorthands)
   }
@@ -32,13 +32,13 @@ export const mergeProps = (
 }
 
 function mergeProp(
-  out: StringRecord,
-  outCns: StringRecord,
+  out: AnyRecord,
+  outCns: AnyRecord,
   a: Object,
   b: Object | undefined,
   key: string,
   leaveOutClassNames: boolean,
-  inverseShorthands?: StringRecord
+  inverseShorthands?: AnyRecord
 ) {
   const val = a[key]
   const shorthand = inverseShorthands ? inverseShorthands[key] : null

package/src/helpers/normalizeValueWithProperty.ts

@@ -3,6 +3,8 @@
  * Copyright (c) Nicolas Gallagher licensed under the MIT license.
  */
 
+import { isWeb } from '@tamagui/constants'
+
 import { getAllSelectors } from './insertStyleRule'
 import { normalizeColor } from './normalizeColor'
 
@@ -20,9 +22,11 @@ export function normalizeValueWithProperty(value: any, property?: string): any {
   if (
     process.env.TAMAGUI_TARGET === 'web' &&
     typeof value === 'number' &&
-    (property === undefined || !unitlessNumbers[property])
+    (property === undefined || (!unitlessNumbers[property] && !stringNumbers[property]))
   ) {
     res = `${value}px`
+  } else if (isWeb && property !== undefined && stringNumbers[property]) {
+    res = `${res}`
   } else if (property && colorProps[property]) {
     res = normalizeColor(value)
     cache[value] = res
@@ -45,6 +49,10 @@ const colorProps = {
   textShadowColor: true,
 }
 
+const stringNumbers = {
+  zIndex: true,
+}
+
 const unitlessNumbers = {
   WebkitLineClamp: true,
   animationIterationCount: true,
@@ -74,7 +82,6 @@ const unitlessNumbers = {
   orphans: true,
   tabSize: true,
   widows: true,
-  zIndex: true,
   zoom: true,
   scale: true,
   scaleX: true,

package/src/helpers/useShallowSetState.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react'
 
+import { DebugProp } from '../types'
+
 export function useShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>,
-  debug?: boolean | 'verbose',
+  debug?: DebugProp,
   debugName?: string
 ) {
   return useCallback(

package/src/hooks/useMedia.tsx

@@ -1,5 +1,4 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -54,15 +53,12 @@ export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener)
 
 export const mediaQueryConfig: MediaQueries = {}
 
-export const getMedia = () => {
-  return mediaState
-}
+export const getMedia = () => mediaState
 
 // for SSR capture it at time of startup
-let curState: MediaQueryState
 let initState: MediaQueryState
 export const getInitialMediaState = () => {
-  return (getConfig().disableSSR ? curState : initState) || {}
+  return (getConfig().disableSSR ? mediaState : initState) || {}
 }
 
 let mediaKeysOrdered: string[]
@@ -79,8 +75,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
   Object.assign(mediaQueryConfig, media)
-  curState = { ...mediaState }
-  initState = curState
+  initState = { ...mediaState }
+  updateCurrentState()
   mediaKeysOrdered = Object.keys(media)
   if (config.disableSSR) {
     setupMediaListeners()
@@ -126,7 +122,7 @@ function setupMediaListeners() {
       const next = !!getMatch().matches
       if (next === mediaState[key]) return
       mediaState[key] = next
-      curState = { ...mediaState }
+      updateCurrentState()
       const cur = listeners[key]
       if (cur?.size) {
         cur.forEach((cb) => cb(next))
@@ -143,45 +139,49 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
   }, [])
 }
 
+const currentStateListeners = new Set<any>()
+function updateCurrentState() {
+  currentStateListeners.forEach((cb) => cb(mediaState))
+}
+function subscribe(subscriber: any) {
+  currentStateListeners.add(subscriber)
+  return () => currentStateListeners.delete(subscriber)
+}
+
+type MediaKeysState = {
+  [key: string]: any
+}
+
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const keys = useSafeRef({} as Record<string, boolean>)
-  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))
+  const keys = useSafeRef<MediaKeysState>({ prev: initState })
 
-  function updateState() {
-    setState((prev) => {
-      for (const key in keys.current) {
-        if (prev[key] !== mediaState[key]) {
-          return getMediaState({ ...mediaState }, keys)
-        }
+  const state = useSyncExternalStore<MediaQueryState>(
+    subscribe,
+    () => {
+      const { prev, ...curKeys } = keys.current
+      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])
+      if (shouldUpdate) {
+        const next = { ...mediaState }
+        keys.current.prev = next
+        return next
       }
       return prev
-    })
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    updateState()
-    const disposers = Object.keys(keys.current).map((key) =>
-      addMediaQueryListener(key, updateState)
-    )
-    return () => {
-      disposers.forEach((cb) => cb())
-    }
-  }, [keys.current])
-
-  return state
-}
-
-function getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {
-  return new Proxy(state, {
-    get(_, key: string) {
-      if (!keys.current[key]) {
-        keys.current[key] = true
-      }
-      return Reflect.get(state, key)
     },
-  })
+    () => initState
+  )
+
+  return useMemo(() => {
+    return new Proxy(state, {
+      get(_, key: string) {
+        if (!keys.current[key]) {
+          keys.current[key] = true
+        }
+        return Reflect.get(state, key)
+      },
+    })
+  }, [state])
 }
 
 /**

package/src/hooks/useTheme.tsx

@@ -37,7 +37,8 @@ export const useTheme = (
   themeName?: string | null,
   componentName?: string,
   props?: ThemeProps,
-  forceUpdate?: any
+  forceUpdate?: any,
+  disableTracking?: boolean
 ): ThemeParsed => {
   // TODO this can use useChangeThemeEffect almost ready
   if (isRSC) {
@@ -99,18 +100,40 @@ export const useTheme = (
   }
 
   return useMemo(() => {
-    return getThemeProxied(theme, name, className, themeManager, state, debugProp)
-  }, [theme, name, className, themeManager, state, debugProp])
+    return getThemeProxied({
+      theme,
+      name,
+      className,
+      themeManager,
+      onStringKeyAccess(key) {
+        if (disableTracking) return
+        if (state) {
+          if (state.current.isRendering && !state.current.keys.has(key)) {
+            state.current.keys.add(key)
+            if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+              // eslint-disable-next-line no-console
+              console.log('  🔸 tracking theme', key)
+            }
+          }
+        }
+      },
+    })
+  }, [theme, name, className, themeManager, debugProp, disableTracking])
 }
 
-function getThemeProxied(
-  theme: any,
-  name: string,
-  className?: string,
-  themeManager?: ThemeManager | null,
-  state?: React.MutableRefObject<UseThemeState>,
-  debugProp?: boolean | 'verbose'
-) {
+function getThemeProxied({
+  theme,
+  name,
+  className,
+  themeManager,
+  onStringKeyAccess,
+}: {
+  theme: any
+  name: string
+  onStringKeyAccess?: (cb: string) => void
+  className?: string
+  themeManager?: ThemeManager | null
+}) {
   return createProxy(theme, {
     has(_, key) {
       if (typeof key === 'string' && key[0] === '$') {
@@ -141,15 +164,7 @@ function getThemeProxied(
       if (!themeManager) {
         return theme[key]
       }
-      if (state) {
-        if (state.current.isRendering && !state.current.keys.has(key)) {
-          state.current.keys.add(key)
-          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
-            // eslint-disable-next-line no-console
-            console.log('  🔸 tracking theme', key)
-          }
-        }
-      }
+      onStringKeyAccess?.(key)
       return themeManager.getValue(key)
     },
   })

package/src/views/ThemeInverse.tsx

@@ -19,8 +19,7 @@ export const ThemeInverse = ({
   useIsomorphicLayoutEffect(() => {
     if (themeName.startsWith('dark')) {
       setName('light')
-    }
-    if (themeName.startsWith('light')) {
+    } else if (themeName.startsWith('light')) {
       setName('dark')
     }
   }, [defaultTheme, themeName])

package/types/helpers/mergeProps.d.ts

@@ -11,7 +11,7 @@
  *   - classNames can be extracted out separately
  *   - shorthands can be expanded before merging
  */
-declare type StringRecord = Record<string, string>;
-export declare const mergeProps: (a: Object, b: Object, leaveOutClassNames?: boolean, inverseShorthands?: StringRecord) => readonly [StringRecord, StringRecord];
+declare type AnyRecord = Record<string, any>;
+export declare const mergeProps: (a: Object, b: Object, leaveOutClassNames?: boolean, inverseShorthands?: AnyRecord) => readonly [AnyRecord, AnyRecord];
 export {};
 //# sourceMappingURL=mergeProps.d.ts.map

package/types/helpers/useShallowSetState.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, debug?: boolean | 'verbose', debugName?: string): (next: Partial<State>) => void;
+import { DebugProp } from '../types';
+export declare function useShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, debug?: DebugProp, debugName?: string): (next: Partial<State>) => void;
 //# sourceMappingURL=useShallowSetState.d.ts.map

package/types/hooks/useTheme.d.ts

@@ -9,7 +9,7 @@ export interface ThemeProps {
     reset?: boolean;
     debug?: boolean | 'verbose';
 }
-export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any) => ThemeParsed;
+export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any, disableTracking?: boolean) => ThemeParsed;
 export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
 export declare function useThemeName(opts?: {
     parent?: true;