@tamagui/web 1.101.1 → 1.101.2

package/src/hooks/useMedia.tsx

@@ -1,6 +1,7 @@
 import { isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useRef, useState } from 'react'
-import { getConfig } from '../config'
+import { useRef, useState, useSyncExternalStore } from 'react'
+
+import { getConfig, setTokens } from '../config'
 import { matchMedia } from '../helpers/matchMedia'
 import { pseudoDescriptors } from '../helpers/pseudoDescriptors'
 import type {
@@ -8,12 +9,12 @@ import type {
   DebugProp,
   IsMediaType,
   MediaQueries,
+  MediaQueryKey,
   MediaQueryObject,
   MediaQueryState,
   TamaguiInternalConfig,
   UseMediaState,
 } from '../types'
-import { useDidHydrateOnce } from './useDidHydrateOnce'
 import { getDisableSSR } from './useDisableSSR'
 
 export let mediaState: MediaQueryState =
@@ -120,9 +121,7 @@ export function setupMediaListeners() {
   setupVersion = mediaVersion
 
   // hmr, undo existing before re-binding
-  if (process.env.NODE_ENV === 'development') {
-    unlisten()
-  }
+  unlisten()
 
   for (const key in mediaQueryConfig) {
     const str = mediaObjectToString(mediaQueryConfig[key], key)
@@ -169,46 +168,42 @@ type MediaKeysState = {
   [key: string]: any
 }
 
-type UpdateState = {
+type MediaState = {
+  prev?: MediaKeysState
   enabled?: boolean
-  prev: MediaKeysState
-  touched?: string[] | null
+  keys?: MediaQueryKey[] | null
 }
 
-const States = new WeakMap<any, UpdateState>()
+const States = new WeakMap<any, MediaState>()
 
-export function setMediaShouldUpdate(ref: any, props: Partial<UpdateState>) {
+export function setMediaShouldUpdate(ref: any, props: MediaState) {
   return States.set(ref, {
     ...(States.get(ref) as any),
     ...props,
   })
 }
 
-function getSnapshot({ touched, prev, enabled }: UpdateState) {
-  if (enabled === false) {
-    return prev
-  }
-  const hasntUpdated = !touched || touched.every((key) => mediaState[key] === prev[key])
-  if (hasntUpdated) {
-    return prev
-  }
-  return mediaState
+type UseMediaInternalState = {
+  prev: MediaKeysState
+  keys?: string[]
 }
 
-// TODO once you touch a media key it never untouches, to avoid an extra useEffect on every component
-// ideally we don't do that, but useMedia usage is lower and generally its not super expensive
-// i think in the future we implement this by sharing a single useEffect in createComponent somehow
+function subscribe(subscriber: any) {
+  listeners.add(subscriber)
+  return () => {
+    listeners.delete(subscriber)
+  }
+}
 
 export function useMedia(
   uidIn?: any,
   componentContext?: ComponentContextI,
-  debug: DebugProp = false
+  debug?: DebugProp
 ): UseMediaState {
   const uid = uidIn ?? useRef()
-
-  const hasHydrated = useDidHydrateOnce()
-  const isHydrated = !isWeb || getDisableSSR(componentContext) || hasHydrated
-  const initialState = isHydrated ? mediaState : initState
+  // performance boost to avoid using context twice
+  const disableSSR = getDisableSSR(componentContext)
+  const initialState = (disableSSR || !isWeb ? mediaState : initState) || {}
 
   let componentState = States.get(uid)
   if (!componentState) {
@@ -216,43 +211,61 @@ export function useMedia(
     States.set(uid, componentState)
   }
 
-  const [state, setState] = useState(initialState)
+  const getSnapshot = () => {
+    if (!componentState) {
+      return initialState
+    }
 
-  useIsomorphicLayoutEffect(() => {
-    function update() {
-      setState((prev) => {
-        const componentState = States.get(uid)!
-        if (process.env.NODE_ENV === 'development' && debug) {
-          console.info('useMedia() update?', getSnapshot(componentState) !== prev, {
-            componentState,
-            touched: [...(componentState.touched || [])],
-            prev: { ...componentState.prev },
-            next: getSnapshot(componentState),
-            mediaState: { ...mediaState },
-          })
-        }
-        const next = getSnapshot(componentState)
-        if (next !== prev) {
-          componentState.prev = next
-          return next
-        }
-        return prev
-      })
+    const { keys, prev = initialState } = componentState
+
+    if (componentState && componentState.enabled === false) {
+      return prev
     }
 
-    update()
+    const testKeys =
+      componentState?.keys ??
+      ((!componentState || componentState.enabled) && keys) ??
+      null
 
-    listeners.add(update)
-    return () => {
-      listeners.delete(update)
+    const hasntUpdated =
+      !testKeys || testKeys?.every((key) => mediaState[key] === prev[key])
+
+    if (hasntUpdated) {
+      return prev
     }
-  }, [uid])
+
+    componentState.prev = mediaState
+
+    return mediaState
+  }
+
+  let state: MediaQueryState
+
+  if (process.env.TAMAGUI_SYNC_MEDIA_QUERY) {
+    state = useSyncExternalStore<MediaQueryState>(
+      subscribe,
+      getSnapshot,
+      () => initialState
+    )
+  } else {
+    const [internalState, setState] = useState(initialState)
+    state = internalState
+
+    useIsomorphicLayoutEffect(() => {
+      function update() {
+        setState(getSnapshot)
+      }
+
+      update()
+      return subscribe(update)
+    }, [])
+  }
 
   return new Proxy(state, {
     get(_, key) {
       if (typeof key === 'string') {
-        componentState.touched ||= []
-        if (!componentState.touched.includes(key)) componentState.touched.push(key)
+        componentState.keys ||= []
+        if (!componentState.keys.includes(key)) componentState.keys.push(key)
         if (process.env.NODE_ENV === 'development' && debug) {
           console.info(`useMedia() TOUCH`, key)
         }

package/types/hooks/useMedia.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentContextI, DebugProp, IsMediaType, MediaQueries, MediaQueryObject, MediaQueryState, TamaguiInternalConfig, UseMediaState } from '../types';
+import type { ComponentContextI, DebugProp, IsMediaType, MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig, UseMediaState } from '../types';
 export declare let mediaState: MediaQueryState;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
@@ -10,12 +10,12 @@ export declare function setupMediaListeners(): void;
 type MediaKeysState = {
     [key: string]: any;
 };
-type UpdateState = {
+type MediaState = {
+    prev?: MediaKeysState;
     enabled?: boolean;
-    prev: MediaKeysState;
-    touched?: string[] | null;
+    keys?: MediaQueryKey[] | null;
 };
-export declare function setMediaShouldUpdate(ref: any, props: Partial<UpdateState>): WeakMap<any, UpdateState>;
+export declare function setMediaShouldUpdate(ref: any, props: MediaState): WeakMap<any, MediaState>;
 export declare function useMedia(uidIn?: any, componentContext?: ComponentContextI, debug?: DebugProp): UseMediaState;
 export declare const getMediaImportanceIfMoreImportant: (mediaKey: string, key: string, importancesUsed: Record<string, number>, isSizeMedia: boolean) => number | null;
 export declare function mediaObjectToString(query: string | MediaQueryObject, key?: string): string;

package/types/hooks/useMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACd,MAAM,UAAU,CAAA;AAIjB,eAAO,IAAI,UAAU,EAAE,eAmBN,CAAA;AAEjB,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAAmB,CAAA;AAExC,eAAO,MAAM,SAAS,aAAoB,CAAA;AAI1C,eAAO,MAAM,UAAU,QAAS,MAAM,KAAG,WAOxC,CAAA;AAUD,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAchD,CAAA;AAMD,eAAO,MAAM,cAAc,WAAY,qBAAqB,SAiB3D,CAAA;AAaD,wBAAgB,mBAAmB,SAmClC;AAkBD,KAAK,cAAc,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,cAAc,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;CAC1B,CAAA;AAID,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,6BAKzE;AAiBD,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,GAAG,EACX,gBAAgB,CAAC,EAAE,iBAAiB,EACpC,KAAK,GAAE,SAAiB,GACvB,aAAa,CAyDf;AAED,eAAO,MAAM,iCAAiC,aAClC,MAAM,OACX,MAAM,mBACM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAC1B,OAAO,kBAQrB,CAAA;AASD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,CAAC,EAAE,MAAM,UAwBjF;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAE1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACd,MAAM,UAAU,CAAA;AAGjB,eAAO,IAAI,UAAU,EAAE,eAmBN,CAAA;AAEjB,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAAmB,CAAA;AAExC,eAAO,MAAM,SAAS,aAAoB,CAAA;AAI1C,eAAO,MAAM,UAAU,QAAS,MAAM,KAAG,WAOxC,CAAA;AAUD,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAchD,CAAA;AAMD,eAAO,MAAM,cAAc,WAAY,qBAAqB,SAiB3D,CAAA;AAaD,wBAAgB,mBAAmB,SAiClC;AAkBD,KAAK,cAAc,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,EAAE,GAAG,IAAI,CAAA;CAC9B,CAAA;AAID,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,4BAK/D;AAcD,wBAAgB,QAAQ,CACtB,KAAK,CAAC,EAAE,GAAG,EACX,gBAAgB,CAAC,EAAE,iBAAiB,EACpC,KAAK,CAAC,EAAE,SAAS,GAChB,aAAa,CA0Ef;AAED,eAAO,MAAM,iCAAiC,aAClC,MAAM,OACX,MAAM,mBACM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAC1B,OAAO,kBAQrB,CAAA;AASD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,CAAC,EAAE,MAAM,UAwBjF;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAE1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}