@tamagui/core 1.0.1-beta.184 → 1.0.1-beta.186

package/package.json

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

package/src/constants/platform.ts

@@ -23,3 +23,19 @@ export const useIsomorphicLayoutEffect = isRSC ? idFn : isServer ? useEffect : u
 export const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')
 export const isWebTouchable = isClient && 'ontouchstart' in window
 export const isTouchable = !isWeb || isWebTouchable
+
+if (process.env.NODE_ENV === 'development') {
+  if (!process.env.TAMAGUI_TARGET) {
+    // eslint-disable-next-line no-console
+    console.warn(`Must set TAMAGUI_TARGET to "web" or "native"`)
+  } else if (
+    isClient &&
+    process.env.TAMAGUI_TARGET !== 'web' &&
+    process.env.TAMAGUI_IGNORE_TARGET !== '1'
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Must set TAMAGUI_TARGET to "web" for web apps - if you have window defined outside of the browser, set TAMAGUI_IGNORE_TARGET=1 to hide this`
+    )
+  }
+}

package/src/createComponent.tsx

@@ -42,11 +42,7 @@ import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
-import {
-  addMediaQueryListener,
-  getInitialMediaState,
-  removeMediaQueryListener,
-} from './hooks/useMedia'
+import { addMediaQueryListener, getCurrentMediaState } from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
@@ -1103,7 +1099,7 @@ export function createComponent<
         // only used by enterStyle
         mounted: false,
         animation: null,
-        mediaState: getInitialMediaState(),
+        mediaState: getCurrentMediaState(),
       })
     }
 

package/src/hooks/useMedia.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { startTransition, useEffect, useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { matchMedia } from '../helpers/matchMedia'
@@ -10,6 +10,7 @@ import {
   TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
+import { getConfig } from '..'
 
 export const mediaState: MediaQueryState =
   // development time safeguard
@@ -51,10 +52,19 @@ export const getMedia = () => {
   return mediaState
 }
 
-const dispose = new Set<Function>()
-
 // for SSR capture it at time of startup
+let currentMediaState: MediaQueryState | null
 let initialMediaState: MediaQueryState | null
+// fairly concurrent mode sketchy but such an edge case ok for now
+let hasFinishedInitialRender = false
+export const getCurrentMediaState = () => {
+  if (getConfig().disableSSR || hasFinishedInitialRender) {
+    return currentMediaState || {}
+  }
+  return initialMediaState || {}
+}
+
+const dispose = new Set<Function>()
 
 export const configureMedia = (config: TamaguiInternalConfig) => {
   const { media, mediaQueryDefaultActive } = config
@@ -63,14 +73,13 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
   Object.assign(mediaQueryConfig, media)
-  initialMediaState = { ...mediaState }
+  currentMediaState = { ...mediaState }
+  initialMediaState = currentMediaState
   if (config.disableSSR) {
     setupMediaListeners()
   }
 }
 
-export const getInitialMediaState = () => initialMediaState
-
 function unlisten() {
   dispose.forEach((cb) => cb())
   dispose.clear()
@@ -93,31 +102,39 @@ function setupMediaListeners() {
   // hmr, undo existing before re-binding
   unlisten()
 
-  for (const key in mediaQueryConfig) {
-    const str = mediaObjectToString(mediaQueryConfig[key])
-    const getMatch = () => matchMedia(str)
-    const match = getMatch()
-    if (!match) {
-      throw new Error('⚠️ No match')
-    }
-    // react native needs these deprecated apis for now
-    match.addListener(update)
-    dispose.add(() => match.removeListener(update))
-
-    update()
-
-    function update() {
-      const next = !!getMatch().matches
-      if (next === mediaState[key]) return
-      mediaState[key] = next
-      const listeners = mediaQueryListeners[key]
-      if (listeners?.size) {
-        listeners.forEach((cb) => cb(next))
+  // theoretically this should make media reactions smoother but potentially delayed?
+  // but i believe consistent, so that's a nicer default (we'll see)
+  startTransition(() => {
+    for (const key in mediaQueryConfig) {
+      const str = mediaObjectToString(mediaQueryConfig[key])
+      const getMatch = () => matchMedia(str)
+      const match = getMatch()
+      if (!match) {
+        throw new Error('⚠️ No match')
+      }
+      // react native needs these deprecated apis for now
+      match.addListener(update)
+      dispose.add(() => match.removeListener(update))
+
+      update()
+
+      function update() {
+        const next = !!getMatch().matches
+        if (next === mediaState[key]) return
+        mediaState[key] = next
+        currentMediaState = { ...mediaState }
+        const listeners = mediaQueryListeners[key]
+        if (listeners?.size) {
+          listeners.forEach((cb) => cb(next))
+        }
       }
     }
-  }
+  })
 }
 
+const onIdle =
+  typeof requestIdleCallback === 'undefined' ? (cb) => setTimeout(cb, 100) : requestIdleCallback
+
 export function useMediaQueryListeners(config: TamaguiInternalConfig) {
   if (config.disableSSR) {
     return
@@ -125,6 +142,11 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 
   useEffect(() => {
     setupMediaListeners()
+
+    onIdle(() => {
+      hasFinishedInitialRender = true
+    })
+
     return unlisten
   }, [])
 }
@@ -132,7 +154,7 @@ export function useMediaQueryListeners(config: TamaguiInternalConfig) {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(initialMediaState || {})
+  const [state, setState] = useState(getCurrentMediaState())
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {
@@ -161,7 +183,7 @@ export function useMedia(): {
       new Proxy(state, {
         get(_, key: string) {
           if (process.env.NODE_ENV === 'development') {
-            if (!initialMediaState) {
+            if (!currentMediaState) {
               throw new Error(
                 `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
               )

package/types/hooks/useMedia.d.ts

@@ -5,8 +5,8 @@ export declare function addMediaQueryListener(key: MediaQueryKey, cb: MediaListe
 export declare function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener): void;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
+export declare const getCurrentMediaState: () => MediaQueryState;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;
-export declare const getInitialMediaState: () => MediaQueryState | null;
 export declare function useMediaQueryListeners(config: TamaguiInternalConfig): void;
 export declare function useMedia(): {
     [key in MediaQueryKey]: boolean;