@tamagui/core 1.0.2 → 1.0.4

package/src/helpers/getSplitStyles.tsx

@@ -58,8 +58,7 @@ import {
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 type GetStyleResult = {
-  pseudos: PseudoStyles
-  medias: Record<MediaQueryKey, ViewStyle>
+  pseudos?: PseudoStyles
   style: ViewStyle
   classNames: ClassNamesObject
   rulesToInsert: RulesToInsert
@@ -222,6 +221,10 @@ export const getSplitStyles: StyleSplitter = (
     return cache.get(props)
   }
 
+  if (props.debug) {
+    console.log('props', props)
+  }
+
   conf = conf || getConfig()
   const { shorthands } = conf
   const {
@@ -235,14 +238,13 @@ export const getSplitStyles: StyleSplitter = (
   } = staticConfig
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
   const viewProps: GetStyleResult['viewProps'] = {}
-  const pseudos: PseudoStyles = {}
+  let pseudos: PseudoStyles | null = null
   let psuedosUsed: Record<string, number> | null = null
-  const medias: Record<MediaQueryKey, ViewStyle> = {}
   const mediaState = state.mediaState || globalMediaState
   const usedKeys: Record<string, number> = {}
   const propKeys = Object.keys(props)
   let space: SpaceTokens | null = props.space
-  let hasMedia: boolean | 'space' = space ? 'space' : false
+  let hasMedia: boolean | string[] = false
 
   const shouldDoClasses =
     staticConfig.acceptsClassName && (isWeb || IS_STATIC) && !state.noClassNames
@@ -617,6 +619,7 @@ export const getSplitStyles: StyleSplitter = (
         }
 
         if (!shouldDoClasses || IS_STATIC) {
+          pseudos ||= {}
           pseudos[key] ||= {}
           Object.assign(pseudos[key], pseudoStyleObject)
         }
@@ -675,6 +678,7 @@ export const getSplitStyles: StyleSplitter = (
             const curImportance = psuedosUsed[importance] || 0
             if (importance >= curImportance) {
               psuedosUsed[pkey] = importance
+              pseudos ||= {}
               pseudos[key] ||= {}
               pseudos[key][pkey] = val
               // eslint-disable-next-line no-console
@@ -707,29 +711,37 @@ export const getSplitStyles: StyleSplitter = (
         const mediaKeyShort = key.slice(1)
 
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+          // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log(`  📺 ${key}`, mediaState[mediaKeyShort], {
-            key,
-            mediaStyle,
-            props,
-            shouldDoClasses,
-            mediaState: { ...mediaState },
-          })
+          console.log(`  📺 ${key}`, { key, mediaStyle, props, shouldDoClasses })
         }
 
         if ('space' in mediaStyle) {
-          hasMedia = 'space'
+          if (!Array.isArray(hasMedia)) {
+            hasMedia = []
+          }
+          hasMedia.push(mediaKeyShort)
         }
 
         if (shouldDoClasses) {
           if ('space' in mediaStyle) {
-            const val = valInit.space
             delete mediaStyle['space']
-            if (
-              mediaState[mediaKeyShort] &&
-              getMediaImportanceIfMoreImportant(mediaKeyShort, 'space', usedKeys)
-            ) {
-              space = val
+            if (mediaState[mediaKeyShort]) {
+              const val = valInit.space
+              const importance = getMediaImportanceIfMoreImportant(
+                mediaKeyShort,
+                'space',
+                usedKeys
+              )
+              if (importance) {
+                space = val
+                usedKeys['space'] = importance
+                if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                  console.log(
+                    `Found more important space for current media ${mediaKeyShort}: ${val} (importance: ${importance})`
+                  )
+                }
+              }
             }
           }
           const mediaStyles = getStylesAtomic(mediaStyle)
@@ -879,7 +891,6 @@ export const getSplitStyles: StyleSplitter = (
     fontFamily,
     viewProps,
     style,
-    medias,
     pseudos,
     classNames,
     rulesToInsert,
@@ -893,15 +904,8 @@ export const getSplitStyles: StyleSplitter = (
     if (isDevTools) {
       // eslint-disable-next-line no-console
       console.groupCollapsed('  🔹 styles =>')
-      const logs = {
-        transforms,
-        viewProps,
-        state,
-        rulesToInsert,
-        parentSplitStyles,
-        flatTransforms,
-        result,
-      }
+      // prettier-ignore
+      const logs = { transforms, viewProps, state, rulesToInsert, parentSplitStyles, flatTransforms, result }
       for (const key in { ...result, ...logs }) {
         // eslint-disable-next-line no-console
         console.log(key, logs[key])
@@ -926,35 +930,21 @@ function mergeClassName(
   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'
+    if (val[0] === '_' && val.startsWith('_transform-')) {
+      const ns: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'
       let transform = insertedTransforms[val]
-      if (isClient) {
-        if (!transform) {
-          // HMR or loaded a new chunk
-          console.warn(`got a new ting`)
-          scanAllSheets()
-          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 (isClient && !transform) {
+        scanAllSheets() // HMR or loaded a new chunk
+        transform = insertedTransforms[val]
+        if (!transform && isWeb && val[0] !== '_') {
+          transform = val // runtime insert
         }
       }
-      transforms[namespace] = transforms[namespace] || ['', '']
-      const identifier = val.replace('_transform', '')
-      transforms[namespace][0] += identifier
+      transforms[ns] ||= ['', '']
+      transforms[ns][0] += val.replace('_transform', '')
       // ssr doesn't need to do anything just make the right classname
       if (transform) {
-        transforms[namespace][1] += transform
+        transforms[ns][1] += transform
       }
     } else {
       classNames[key] = val

package/src/helpers/getStylesAtomic.native.ts

@@ -2,3 +2,5 @@ export function getStylesAtomic() {
   // eslint-disable-next-line no-console
   console.warn('no-op native')
 }
+
+export const startClearStyleCacheInterval = () => {}

package/src/helpers/getStylesAtomic.ts

@@ -8,7 +8,6 @@ import type { TextStyle, ViewStyle } from 'react-native'
 
 import { getConfig } from '../config'
 import { TamaguiInternalConfig } from '../types'
-import { Style, cache } from './cache'
 import { defaultOffset } from './expandStyles'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty.js'
 import { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'
@@ -48,17 +47,31 @@ export function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {
   return res
 }
 
+const cache = new Map()
+
+export const startClearStyleCacheInterval = () => {
+  setInterval(() => {
+    cache.clear()
+  }, 10_000)
+}
+
 export function getAtomicStyle(
   style: ViewOrTextStyle,
   pseudo?: PseudoDescriptor
 ): StyleObject[] {
+  if (!style) return []
+  const key = JSON.stringify(style) + (pseudo ? JSON.stringify(pseudo) : '')
+  if (cache.has(key)) {
+    return cache.get(key)
+  }
   if (process.env.NODE_ENV === 'development') {
     if (!style || typeof style !== 'object') {
       throw new Error(`Wrong style type: "${typeof style}": ${style}`)
     }
   }
-  if (!style) return []
-  return generateAtomicStyles(style, pseudo)
+  const out = generateAtomicStyles(style, pseudo)
+  cache.set(key, out)
+  return out
 }
 
 let conf: TamaguiInternalConfig
@@ -96,35 +109,27 @@ const generateAtomicStyles = (
   const out: StyleObject[] = []
   for (const key in style) {
     const value = style[key]
-    if (value != null && value !== undefined) {
-      const uid = key + (pseudo?.name || '')
-      const cachedResult = cache.get(uid, value)
-      if (cachedResult !== undefined) {
-        out.push(cachedResult)
-      } else {
-        const hash = presetHashes[value]
-          ? value
-          : typeof value === 'string'
-          ? simpleHash(value)
-          : `${value}`.replace('.', 'dot')
-
-        const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
-        const shortProp = conf.inverseShorthands[key] || key
-        const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
-        const rules = createAtomicRules(identifier, key, value, pseudo)
-        const styleObject: StyleObject = {
-          property: key,
-          pseudo: pseudo?.name as any,
-          value,
-          identifier,
-          rules,
-        }
-
-        cache.set(uid, value, styleObject)
-        out.push(styleObject)
-      }
+    if (value == null || value == undefined) continue
+    const hash = presetHashes[value]
+      ? value
+      : typeof value === 'string'
+      ? simpleHash(value)
+      : `${value}`.replace('.', 'dot')
+
+    const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''
+    const shortProp = conf.inverseShorthands[key] || key
+    const identifier = `_${shortProp}-${pseudoPrefix}${hash}`
+    const rules = createAtomicRules(identifier, key, value, pseudo)
+    const styleObject: StyleObject = {
+      property: key,
+      pseudo: pseudo?.name as any,
+      value,
+      identifier,
+      rules,
     }
+    out.push(styleObject)
   }
+
   return out
 }
 
@@ -166,7 +171,7 @@ export function styleToCSS(style: Record<string, any>) {
   }
 }
 
-function createDeclarationBlock(style: Style, important = false) {
+function createDeclarationBlock(style: Record<string, any>, important = false) {
   let next = ''
   for (const key in style) {
     const prop = hyphenateStyleName(key)

package/src/helpers/insertStyleRule.tsx

@@ -134,7 +134,6 @@ function getTamaguiSelector(
 ): readonly [string, CSSStyleRule] | null {
   if (rule instanceof CSSStyleRule) {
     const text = rule.selectorText
-    // .startsWith('._')
     if (text[0] === '.' && text[1] === '_') {
       return [text.slice(1), rule]
     }
@@ -185,7 +184,18 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
     updateRules(identifier, rules)
     if (sheet) {
       for (const rule of rules) {
-        sheet.insertRule(rule, sheet.cssRules.length)
+        try {
+          sheet.insertRule(rule, sheet.cssRules.length)
+        } catch (err) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.groupCollapsed(
+              `Error inserting rule into CSSStyleSheet: ${String(err)}`
+            )
+            console.log({ rule, rulesToInsert })
+            console.trace()
+            console.groupEnd()
+          }
+        }
       }
     }
   }

package/src/helpers/normalizeColor.ts

@@ -1,3 +1,4 @@
+import { isWeb } from '@tamagui/constants'
 import normalizeCSSColor from 'normalize-css-color'
 
 export const normalizeColor = (color?: number | string | null, opacity?: number) => {
@@ -6,7 +7,7 @@ export const normalizeColor = (color?: number | string | null, opacity?: number)
   }
   if (
     color[0] === '$' ||
-    (process.env.TAMAGUI_TARGET === 'web' &&
+    (isWeb &&
       typeof color === 'string' &&
       (webColors[color] || color[0] === '_' || color.startsWith('var(')))
   ) {
@@ -30,12 +31,12 @@ const webColors = {
 }
 
 export function colorToRGBA(color: string | number) {
-  const colorInt = processColor(color)
-  if (colorInt != null) {
-    const r = (colorInt >> 16) & 255
-    const g = (colorInt >> 8) & 255
-    const b = colorInt & 255
-    const a = ((colorInt >> 24) & 255) / 255
+  const ci = processColor(color)
+  if (ci != null) {
+    const r = (ci >> 16) & 255
+    const g = (ci >> 8) & 255
+    const b = ci & 255
+    const a = ((ci >> 24) & 255) / 255
     return [r, g, b, a] as const
   }
   return null

package/src/hooks/useMedia.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useSyncExternalStore } from 'react'
+import { startTransition, useEffect, useMemo, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -12,7 +12,7 @@ import {
 } from '../types'
 import { useSafeRef } from './useSafeRef'
 
-export const mediaState: MediaQueryState =
+export let mediaState: MediaQueryState =
   // development only safeguard
   process.env.NODE_ENV === 'development'
     ? createProxy(
@@ -109,7 +109,7 @@ function setupMediaListeners() {
     function update() {
       const next = !!getMatch().matches
       if (next === mediaState[key]) return
-      mediaState[key] = next
+      mediaState = { ...mediaState, [key]: next }
       updateCurrentState()
     }
   }
@@ -123,12 +123,17 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
 }
 
 const currentStateListeners = new Set<any>()
+let isFlushing = false
+
 function updateCurrentState() {
-  currentStateListeners.forEach((cb) => cb(mediaState))
-}
-function subscribe(subscriber: any) {
-  currentStateListeners.add(subscriber)
-  return () => currentStateListeners.delete(subscriber)
+  if (isFlushing) return
+  isFlushing = true
+  setTimeout(() => {
+    startTransition(() => {
+      currentStateListeners.forEach((cb) => cb(mediaState))
+    })
+    isFlushing = false
+  }, 0)
 }
 
 type MediaKeysState = {
@@ -139,61 +144,61 @@ type UseMediaState = {
   [key in MediaQueryKey]: boolean
 }
 
-const shouldUpdate = new WeakMap<any, boolean>()
-export function setMediaShouldUpdate(ref: any, val: boolean) {
-  return shouldUpdate.set(ref, val)
+type UpdateState = {
+  enabled: boolean
+  keys: MediaQueryKey[]
 }
 
-type UseMediaInternalState = { prev: MediaKeysState; next: MediaKeysState }
-const empty = {}
-let initialUseState: UseMediaInternalState
+const shouldUpdate = new WeakMap<any, UpdateState>()
 
-export function useMedia(): UseMediaState {
-  // setup once
-  initialUseState ||= {
-    prev: initState,
-    next: empty,
-  }
+export function setMediaShouldUpdate(ref: any, props: UpdateState) {
+  return shouldUpdate.set(ref, props)
+}
+
+type UseMediaInternalState = {
+  prev: MediaKeysState
+  touched?: Set<string>
+}
+
+function subscribe(subscriber: any) {
+  currentStateListeners.add(subscriber)
+  return () => currentStateListeners.delete(subscriber)
+}
 
-  const keys = useSafeRef<UseMediaInternalState>(initialUseState)
+export function useMedia(uid?: any, debug?: any): UseMediaState {
+  const internal = useSafeRef<UseMediaInternalState>(undefined as any)
+  if (!internal.current) {
+    internal.current = {
+      prev: initState,
+    }
+  }
   const state = useSyncExternalStore<MediaQueryState>(
     subscribe,
     () => {
-      const curState = keys.current
-      const preventUpdate = arguments[0] && shouldUpdate.get(arguments[0]) !== true
-      if (preventUpdate) {
-        return curState.prev
-      }
-
-      let didUpdate = false
-
-      // ensure we keep the minimal object of only used keys
-      const next = {}
-
-      for (const key in curState.next) {
-        const val = mediaState[key]
-        if (curState.prev[key] !== val) {
-          didUpdate = true
-        }
-        next[key] = val
+      const { touched, prev } = internal.current
+      const componentState = uid ? shouldUpdate.get(uid) : undefined
+      if (componentState?.enabled === false) {
+        return prev
       }
+      const testKeys =
+        componentState?.keys ?? (componentState?.enabled && touched ? [...touched] : null)
 
-      if (!didUpdate) {
-        return curState.prev
+      if (testKeys?.every((key) => mediaState[key] === prev[key])) {
+        return prev
       }
 
-      keys.current = { next, prev: next }
-      return next
+      internal.current.prev = mediaState
+      return mediaState
     },
     () => initState
   )
 
   return useMemo(() => {
-    return new Proxy(state === empty ? initState : state, {
-      get(_, key: string) {
-        if (!(key in keys.current.next)) {
-          keys.current.next[key] = true
-          keys.current = { ...keys.current }
+    return new Proxy(state, {
+      get(_, key) {
+        if (typeof key === 'string') {
+          internal.current.touched ||= new Set()
+          internal.current.touched.add(key)
         }
         return Reflect.get(state, key)
       },
@@ -205,7 +210,7 @@ export function useMedia(): UseMediaState {
  * Useful for more complex components that need access to the currently active props,
  * accounting for the currently active media queries.
  *
- * Use sparingly, is will loop props and trigger re-render on all media queries.
+ * Use sparingly, it will loop props and trigger re-render on all media queries.
  *
  * */
 export function useMediaPropsActive<A extends Object>(

package/src/hooks/useTheme.tsx

@@ -39,31 +39,36 @@ interface UseThemeState {
 }
 
 export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
-  if (isRSC) {
-    return getDefaultThemeProxied()
-  }
+  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()
+}
 
+export const useThemeWithState = (props: ThemeProps) => {
   const state = useServerRef() as React.MutableRefObject<UseThemeState>
   if (isClient && !state.current) {
     state.current = {
       keys: new Set(),
     }
   }
+
+  // clear at start of every render to track usages
   state.current?.keys.clear()
 
-  const { name, theme, themeManager, className, isNewTheme } = useChangeThemeEffect(
+  const changedTheme = useChangeThemeEffect(
     props,
     false,
-    isClient ? () => state.current.keys.size === 0 : undefined
+    isClient
+      ? () => {
+          return props.shouldUpdate?.() ?? state.current.keys.size === 0
+        }
+      : undefined
   )
 
+  const { themeManager, isNewTheme, theme, name, className } = changedTheme
+
   if (process.env.NODE_ENV === 'development') {
     // ensure we aren't creating too many ThemeManagers
-    if (
-      isWeb &&
-      isNewTheme &&
-      className === themeManager?.parentManager?.state.className
-    ) {
+    // prettier-ignore
+    if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {
       console.error('Should always change, duplicating ThemeMananger bug', themeManager)
     }
     if (props.debug === 'verbose') {
@@ -76,38 +81,29 @@ export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
     }
   }
 
-  if (!theme) {
+  if (!changedTheme.theme) {
     if (process.env.NODE_ENV === 'development') {
       console.warn('No theme found', name, props, themeManager)
     }
-    return getDefaultThemeProxied()
+    return null
   }
 
-  return useMemo(() => {
-    return getThemeProxied({
-      isNewTheme,
-      theme,
-      name,
-      className,
-      themeManager,
-      state,
-    })
+  const proxiedTheme = useMemo(() => {
+    return getThemeProxied(changedTheme as any)
   }, [theme, isNewTheme, name, className, themeManager])
+
+  return {
+    ...changedTheme,
+    theme: proxiedTheme,
+  }
 }
 
-function getThemeProxied({
+export function getThemeProxied({
   theme,
-  name,
-  className,
   themeManager,
-  isNewTheme,
   state,
-}: {
-  theme: any
-  name: string
-  className?: string
-  themeManager?: ThemeManager | null
-  isNewTheme?: boolean
+}: Partial<ChangedThemeResponse> & {
+  theme: ThemeParsed
   state?: React.RefObject<UseThemeState>
 }) {
   return createProxy(theme, {
@@ -121,26 +117,19 @@ function getThemeProxied({
     get(_, key) {
       if (key === GetThemeUnwrapped) {
         return theme
-      } else if (key === GetThemeManager) {
-        return themeManager
-      } else if (key === GetIsNewTheme) {
-        return isNewTheme
-      } else if (key === 'name') {
-        return name
-      } else if (key === 'className') {
-        return className
-      } else if (
-        !name ||
+      }
+      if (
+        key === 'undefined' ||
         key === '__proto__' ||
-        typeof key === 'symbol' ||
-        key === '$typeof'
+        key === '$typeof' ||
+        typeof key !== 'string' ||
+        !themeManager
       ) {
         return Reflect.get(_, key)
       }
       // auto convert variables to plain
-      if (key[0] === '$') key = key.slice(1)
-      if (!themeManager) {
-        return theme[key]
+      if (key[0] === '$') {
+        key = key.slice(1)
       }
       const val = themeManager.getValue(key)
       if (val && state) {
@@ -150,7 +139,7 @@ function getThemeProxied({
               if (subkey === 'val') {
                 state.current!.keys.add(key as any)
               }
-              return Reflect.get(val, subkey)
+              return Reflect.get(val as any, subkey)
             },
           })
         }
@@ -160,14 +149,6 @@ function getThemeProxied({
   })
 }
 
-const GetThemeManager = Symbol()
-const GetIsNewTheme = Symbol()
-
-export const getThemeManager = (theme: any): ThemeManager | undefined =>
-  theme?.[GetThemeManager]
-export const getThemeIsNewTheme = (theme: any): ThemeManager | undefined =>
-  theme?.[GetIsNewTheme]
-
 export const activeThemeManagers = new Set<ThemeManager>()
 
 export const useChangeThemeEffect = (
@@ -191,7 +172,7 @@ export const useChangeThemeEffect = (
   } = props
 
   if (disable) {
-    if (!parentManager) throw new Error('Disable topmost')
+    if (!parentManager) throw `❌`
     return {
       ...parentManager.state,
       isNewTheme: false,

package/src/index.ts

@@ -24,7 +24,6 @@ export * from './helpers/useShallowSetState'
 export * from './helpers/getVariantExtras'
 export * from './helpers/getAnimationDriver'
 export * from './helpers/getExpandedShorthands'
-export * from './helpers/getSize'
 export * from './helpers/getSplitStyles'
 export * from './helpers/getStylesAtomic'
 export * from './helpers/pseudoDescriptors'