@tamagui/core 1.0.1-beta.215 → 1.0.1-beta.217

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,5 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import { MutableRefObject, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
 import { createProxy } from '../helpers/createProxy'
@@ -54,15 +54,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 +76,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 +123,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 +140,56 @@ export function useMediaListeners(config: TamaguiInternalConfig) {
   }, [])
 }
 
+const nextTick = process.nextTick || setImmediate
+const currentStateListeners = new Set<any>()
+let isUpdating = false
+function updateCurrentState() {
+  if (isUpdating) return
+  isUpdating = true
+  nextTick(() => {
+    currentStateListeners.forEach((cb) => cb(mediaState))
+    isUpdating = false
+  })
+}
+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/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