@tamagui/web 1.124.3 → 1.124.5

package/src/hooks/useThemeState.ts

@@ -26,23 +26,33 @@ export type ThemeState = {
 
 export const ThemeStateContext = createContext<ID>('')
 
+export const keysToId = new WeakMap()
+
 const allListeners = new Map<ID, Function>()
 const listenersByParent: Record<ID, Set<ID>> = {}
+const hasRenderedOnce = new WeakMap<any, boolean>()
+const pendingUpdate = new Map<any, boolean | 'force'>()
 
 // TODO this will gain memory over time but its not going to be a ton
 const states: Map<ID, ThemeState | undefined> = new Map()
 
+let shouldForce = false
 export const forceUpdateThemes = () => {
+  cacheVersion++
+  shouldForce = true
   allListeners.forEach((cb) => cb())
 }
 
 export const getThemeState = (id: ID) => states.get(id)
 
+const cache = new Map<string, ThemeState>()
+let cacheVersion = 0
+
+let themes: Record<string, ThemeParsed> | null = null
+
 let rootThemeState: ThemeState | null = null
 export const getRootThemeState = () => rootThemeState
 
-const HasRenderedOnce = new WeakMap<any, boolean>()
-
 export const useThemeState = (
   props: UseThemeWithStateProps,
   isRoot = false,
@@ -63,23 +73,70 @@ export const useThemeState = (
   }
 
   const id = useId()
+
   const subscribe = useCallback(
     (cb: Function) => {
       listenersByParent[parentId] ||= new Set()
       listenersByParent[parentId].add(id)
-      allListeners.set(id, cb)
+      allListeners.set(id, () => {
+        pendingUpdate.set(id, shouldForce ? 'force' : true)
+        cb()
+      })
       return () => {
         allListeners.delete(id)
         listenersByParent[parentId].delete(id)
       }
     },
-    [id, parentId, keys]
+    [id, parentId]
   )
 
   const propsKey = getPropsKey(props)
 
   const getSnapshot = () => {
-    return getSnapshotFrom(props, propsKey, isRoot, id, parentId, keys)
+    const last = states.get(id)
+    const needsUpdate =
+      props.name === 'light' || props.name === 'dark'
+        ? true
+        : !hasRenderedOnce.get(keys)
+          ? true
+          : keys?.current?.size
+            ? true
+            : props.needsUpdate?.()
+
+    const parentState = states.get(parentId)
+    const cacheKey = `${cacheVersion}${id}${propsKey}${parentState?.name || ''}${isRoot}`
+
+    if (!needsUpdate) {
+      if (cache.has(cacheKey)) {
+        return cache.get(cacheKey)!
+      }
+    }
+
+    const next = getSnapshotFrom(
+      last,
+      props,
+      propsKey,
+      isRoot,
+      id,
+      parentId,
+      needsUpdate,
+      pendingUpdate.get(id)
+    )
+
+    if (last !== next) {
+      pendingUpdate.delete(id)
+      states.set(id, next)
+      cache.set(id, next)
+      if (
+        process.env.NODE_ENV === 'development' &&
+        props.debug &&
+        props.debug !== 'profile'
+      ) {
+        console.warn(` · useTheme(${id}) UPDATE from`, last, 'to', next)
+      }
+    }
+
+    return next
   }
 
   if (process.env.NODE_ENV === 'development' && globalThis.time)
@@ -88,11 +145,11 @@ export const useThemeState = (
   const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
 
   useIsomorphicLayoutEffect(() => {
-    if (!propsKey) return
-    if (!HasRenderedOnce.has(keys)) {
-      HasRenderedOnce.set(keys, true)
+    if (!hasRenderedOnce.get(keys)) {
+      hasRenderedOnce.set(keys, true)
       return
     }
+    if (!propsKey) return
     if (
       process.env.NODE_ENV === 'development' &&
       props.debug &&
@@ -103,52 +160,35 @@ export const useThemeState = (
     scheduleUpdate(id)
   }, [keys, propsKey])
 
-  if (process.env.NODE_ENV === 'development' && props.debug) {
-    console.groupCollapsed(
-      ` · useTheme(${id}) =>`,
-      state.name,
-      id === state.id ? '🎉' : '⏭️'
-    )
-    console.info({
-      state,
-      parentId,
-      props,
-      propsKey,
-      id,
-      parentState: states.get(parentId),
-    })
-    console.groupEnd()
-  }
-
   return state.id === id ? { ...state, isNew: true } : state
 }
 
-// const cache = new Map<string, ThemeState>()
-let themes: Record<string, ThemeParsed> | null = null
-
 const getSnapshotFrom = (
+  lastState: ThemeState | undefined,
   props: UseThemeWithStateProps,
   propsKey: string,
   isRoot = false,
   id: string,
   parentId: string,
-  keys: MutableRefObject<Set<string> | null> | undefined
+  needsUpdate: boolean | undefined,
+  pendingUpdate: boolean | 'force' | undefined
 ): ThemeState => {
-  const needsUpdate = keys?.current?.size || props.needsUpdate?.()
   const parentState = states.get(parentId)
 
-  // const cacheKey = `${id}${propsKey}${needsUpdate}${parentState?.name || ''}${isRoot}`
-  // if (cache.has(cacheKey)) {
-  //   return cache.get(cacheKey)!
-  // }
-
   if (!themes) {
     themes = getConfig().themes
   }
 
-  const lastState = states.get(id)
+  const name =
+    !propsKey && pendingUpdate !== 'force'
+      ? null
+      : getNewThemeName(
+          parentState?.name,
+          props,
+          pendingUpdate === 'force' ? true : !!needsUpdate
+        )
 
-  const name = !propsKey ? null : getNewThemeName(parentState?.name, props, !!needsUpdate)
+  const isSameAsParent = Boolean(!name && propsKey) // name = null if matching parent and has props
 
   if (
     process.env.NODE_ENV === 'development' &&
@@ -160,32 +200,27 @@ const getSnapshotFrom = (
       console.info(message)
     } else {
       console.groupCollapsed(message)
-      console.info({ lastState, parentState, props, propsKey, id, keys })
+      console.trace({ name, lastState, parentState, props, propsKey, id, isSameAsParent })
       console.groupEnd()
     }
   }
 
-  const isSameAsParent = !name && propsKey // name = null if matching parent and has props
   if (parentState && isSameAsParent) {
     return parentState
   }
 
   if (!name) {
-    if (lastState && !needsUpdate) {
-      return lastState
+    const next = lastState ?? parentState!
+
+    if (needsUpdate && pendingUpdate) {
+      const updated = { ...(parentState || lastState)! }
+      return updated
     }
-    states.set(id, parentState)
-    // cache.set(cacheKey, parentState!)
-    return parentState!
+
+    return next
   }
 
-  if (
-    lastState &&
-    lastState.name === name
-    //  &&
-    // (!parentState || parentState.name === lastState.parentName)
-  ) {
-    // cache.set(cacheKey, lastState!)
+  if (pendingUpdate !== 'force' && lastState && lastState.name === name) {
     return lastState
   }
 
@@ -210,18 +245,24 @@ const getSnapshotFrom = (
     props.debug &&
     props.debug !== 'profile'
   ) {
-    console.groupCollapsed(` · useTheme(${id}) ⏭️ ${name}`)
+    console.groupCollapsed(` · useTheme(${id}) ⏭️2 ${name}`)
     console.info('state', nextState)
     console.groupEnd()
   }
 
-  states.set(id, nextState)
-  // cache.set(cacheKey, nextState)
-
   if (isRoot) {
     rootThemeState = nextState
   }
 
+  // we still update the state (not changing identity), that way children can properly resolve the right state
+  // but this one wont trigger an update
+  if (pendingUpdate !== 'force') {
+    if (lastState && !needsUpdate) {
+      Object.assign(lastState, nextState)
+      return lastState
+    }
+  }
+
   return nextState
 }
 
@@ -259,7 +300,7 @@ function getScheme(name: string) {
 
 function getNewThemeName(
   parentName = '',
-  { name, reset, componentName, inverse }: UseThemeWithStateProps,
+  { name, reset, componentName, inverse, debug }: UseThemeWithStateProps,
   forceUpdate = false
 ): string | null {
   if (name && reset) {
@@ -310,7 +351,8 @@ function getNewThemeName(
     if (found) break
   }
 
-  if (found && inverse) {
+  if (inverse) {
+    found ||= parentName
     const scheme = found.split('_')[0]
     found = found.replace(new RegExp(`^${scheme}`), scheme === 'light' ? 'dark' : 'light')
   }

package/types/helpers/insertStyleRule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAEb,YAAY,EACb,MAAM,UAAU,CAAA;AAQjB,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AA8BxD,wBAAgB,qBAAqB,SAkBpC;AAID,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CA8B3B;AAiOD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,uBAW9D;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,QAEjC;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAqC5D;AAUD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAuBxD"}
+{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAEb,YAAY,EACb,MAAM,UAAU,CAAA;AAQjB,eAAO,MAAM,kBAAkB,IAAK,CAAA;AAEpC,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,WAAW,gBAAgC,CAAA;AACxD,eAAO,MAAM,gBAAgB,UAA2B,CAAA;AA8BxD,wBAAgB,qBAAqB,SAkBpC;AAID,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CA8B3B;AAiOD,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,uBAW9D;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,QAEjC;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAqC5D;AAUD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAsBxD"}

package/types/helpers/webPropsToSkip.native.d.ts

@@ -7,12 +7,10 @@ export declare const webPropsToSkip: {
     contain: number;
     boxSizing: number;
     touchAction: number;
-    boxShadow: number;
     outlineStyle: number;
     outlineOffset: number;
     outlineWidth: number;
     outlineColor: number;
-    filter: number;
     backdropFilter: number;
     backgroundImage: number;
     mixBlendMode: number;

package/types/helpers/webPropsToSkip.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webPropsToSkip.native.d.ts","sourceRoot":"","sources":["../../src/helpers/webPropsToSkip.native.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD1B,CAAA"}
+{"version":3,"file":"webPropsToSkip.native.d.ts","sourceRoot":"","sources":["../../src/helpers/webPropsToSkip.native.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD1B,CAAA"}

package/types/hooks/getThemeProxied.d.ts

@@ -1,7 +1,7 @@
 import type { MutableRefObject } from 'react';
 import type { Variable } from '../createVariable';
 import type { ThemeParsed, Tokens, UseThemeWithStateProps, VariableVal, VariableValGeneric } from '../types';
-import type { ThemeState } from './useThemeState';
+import { type ThemeState } from './useThemeState';
 export type ThemeProxied = {
     [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<Key extends keyof ThemeParsed ? ThemeParsed[Key] : Variable<any>>;
 } & {
@@ -20,6 +20,6 @@ type ThemeGettable<Val> = Val & {
      */
     get: (platform?: 'web') => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
 };
-export declare function getThemeProxied(_props: UseThemeWithStateProps, state: ThemeState | null, _keys: MutableRefObject<Set<string> | null>): ThemeProxied;
+export declare function getThemeProxied(_props: UseThemeWithStateProps, _state: ThemeState | null, _keys: MutableRefObject<Set<string> | null>): ThemeProxied;
 export {};
 //# sourceMappingURL=getThemeProxied.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getThemeProxied.d.ts","sourceRoot":"","sources":["../../src/hooks/getThemeProxied.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG;KACxB,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAED,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAWD,wBAAgB,eAAe,CAE7B,MAAM,EAAE,sBAAsB,EAC9B,KAAK,EAAE,UAAU,GAAG,IAAI,EACxB,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAC1C,YAAY,CAsGd"}
+{"version":3,"file":"getThemeProxied.d.ts","sourceRoot":"","sources":["../../src/hooks/getThemeProxied.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,YAAY,GAAG;KACxB,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAED,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAYD,wBAAgB,eAAe,CAE7B,MAAM,EAAE,sBAAsB,EAC9B,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAC1C,YAAY,CA2Gd"}

package/types/hooks/useThemeState.d.ts

@@ -13,6 +13,7 @@ export type ThemeState = {
     scheme?: 'light' | 'dark';
 };
 export declare const ThemeStateContext: import("react").Context<string>;
+export declare const keysToId: WeakMap<WeakKey, any>;
 export declare const forceUpdateThemes: () => void;
 export declare const getThemeState: (id: ID) => ThemeState | undefined;
 export declare const getRootThemeState: () => ThemeState | null;

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

@@ -1 +1 @@
-{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAE/E,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,EAAE,CAAA;IACN,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,EAAE,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAQtD,eAAO,MAAM,iBAAiB,YAE7B,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,EAAE,2BAAmB,CAAA;AAGvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAIrD,eAAO,MAAM,aAAa,UACjB,sBAAsB,qCAEvB,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KACzC,UA0EF,CAAA;AAwND,eAAO,MAAM,qBAAqB,UAAW,UAAU,YACiC,CAAA"}
+{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAE/E,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,EAAE,CAAA;IACN,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,EAAE,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAEtD,eAAO,MAAM,QAAQ,uBAAgB,CAAA;AAWrC,eAAO,MAAM,iBAAiB,YAI7B,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,EAAE,2BAAmB,CAAA;AAQvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAErD,eAAO,MAAM,aAAa,UACjB,sBAAsB,qCAEvB,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KACzC,UAwGF,CAAA;AA0ND,eAAO,MAAM,qBAAqB,UAAW,UAAU,YACiC,CAAA"}