@tamagui/web 1.124.9 → 1.124.11

package/src/hooks/useThemeState.ts

@@ -1,4 +1,4 @@
-import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   createContext,
   useCallback,
@@ -35,6 +35,25 @@ 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()
+const localStates: Map<ID, ThemeState | undefined> = new Map()
+
+if (process.env.NODE_ENV === 'development') {
+  globalThis.getTamaguiThemes = () => {
+    function buildTree(id: ID) {
+      const node = states.get(id)
+      if (!node) return null
+      const children = Array.from(states.values())
+        .filter((child) => child?.parentId === id)
+        .map((child) => buildTree(child!.id))
+        .filter(Boolean)
+      return { ...node, children }
+    }
+
+    if (rootThemeState) {
+      console.info(buildTree(rootThemeState.id))
+    }
+  }
+}
 
 let shouldForce = false
 export const forceUpdateThemes = () => {
@@ -45,7 +64,7 @@ export const forceUpdateThemes = () => {
 
 export const getThemeState = (id: ID) => states.get(id)
 
-const cache = new Map<string, ThemeState>()
+// const cache = new Map<string, ThemeState>()
 let cacheVersion = 0
 
 let themes: Record<string, ThemeParsed> | null = null
@@ -61,6 +80,10 @@ export const useThemeState = (
   const { disable } = props
   const parentId = useContext(ThemeStateContext)
 
+  if (!parentId && !isRoot) {
+    throw new Error(`No parent?`)
+  }
+
   if (disable) {
     return (
       states.get(parentId) || {
@@ -85,6 +108,9 @@ export const useThemeState = (
       return () => {
         allListeners.delete(id)
         listenersByParent[parentId].delete(id)
+        localStates.delete(id)
+        states.delete(id)
+        pendingUpdate.delete(id)
       }
     },
     [id, parentId]
@@ -93,9 +119,10 @@ export const useThemeState = (
   const propsKey = getPropsKey(props)
 
   const getSnapshot = () => {
-    const last = states.get(id)
+    let local = localStates.get(id)
+
     const needsUpdate =
-      props.name === 'light' || props.name === 'dark'
+      isRoot || props.name === 'light' || props.name === 'dark' || props.name === null
         ? true
         : !hasRenderedOnce.get(keys)
           ? true
@@ -103,17 +130,16 @@ export const useThemeState = (
             ? true
             : props.needsUpdate?.()
 
-    const parentState = states.get(parentId)
-    const cacheKey = `${cacheVersion}${id}${propsKey}${parentState?.name || ''}${isRoot}`
+    // const parentState = states.get(parentId)
+    // const cacheKey = `${cacheVersion}${id}${propsKey}${parentState?.name || ''}${isRoot}`
+    // if (!needsUpdate) {
+    //   if (cache.has(cacheKey)) {
+    //     return cache.get(cacheKey)!
+    //   }
+    // }
 
-    if (!needsUpdate) {
-      if (cache.has(cacheKey)) {
-        return cache.get(cacheKey)!
-      }
-    }
-
-    const next = getSnapshotFrom(
-      last,
+    const [rerender, next] = getNextState(
+      local,
       props,
       propsKey,
       isRoot,
@@ -123,20 +149,32 @@ export const useThemeState = (
       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)
-      }
+    pendingUpdate.delete(id)
+
+    // we always create a new localState for every component
+    // that way we can use it to de-opt and avoid renders granularly
+    // we always return the localState object in each component
+    // the global state (states) should always be up to date with the latest
+    if (!local || rerender) {
+      local = { ...next }
+      localStates.set(id, local)
     }
 
-    return next
+    if (
+      process.env.NODE_ENV === 'development' &&
+      props.debug &&
+      props.debug !== 'profile'
+    ) {
+      console.groupCollapsed(` ${id} 🪄 ${rerender}`, local.name, '>', next.name)
+      console.info({ props, propsKey, isRoot, parentId, local, next, needsUpdate })
+      console.groupEnd()
+    }
+
+    Object.assign(local, next)
+    local.id = id
+    states.set(id, next)
+
+    return local
   }
 
   if (process.env.NODE_ENV === 'development' && globalThis.time)
@@ -160,10 +198,10 @@ export const useThemeState = (
     scheduleUpdate(id)
   }, [keys, propsKey])
 
-  return state.id === id ? { ...state, isNew: true } : state
+  return state
 }
 
-const getSnapshotFrom = (
+const getNextState = (
   lastState: ThemeState | undefined,
   props: UseThemeWithStateProps,
   propsKey: string,
@@ -172,7 +210,7 @@ const getSnapshotFrom = (
   parentId: string,
   needsUpdate: boolean | undefined,
   pendingUpdate: boolean | 'force' | undefined
-): ThemeState => {
+): [boolean, ThemeState] => {
   const { debug } = props
   const parentState = states.get(parentId)
 
@@ -181,7 +219,7 @@ const getSnapshotFrom = (
   }
 
   const name =
-    !propsKey && pendingUpdate !== 'force'
+    !propsKey && (!lastState || !lastState?.isNew)
       ? null
       : getNewThemeName(
           parentState?.name,
@@ -189,10 +227,13 @@ const getSnapshotFrom = (
           pendingUpdate === 'force' ? true : !!needsUpdate
         )
 
-  const isSameAsParent = Boolean(!name && propsKey) // name = null if matching parent and has props
+  const isSameAsParent = parentState && (!name || name === parentState.name)
+  const shouldRerender = Boolean(
+    needsUpdate && (pendingUpdate || lastState?.name !== parentState?.name)
+  )
 
   if (process.env.NODE_ENV === 'development' && debug && debug !== 'profile') {
-    const message = ` · useTheme(${id}) snapshot ${name}, parent ${parentState?.id} needsUpdate ${needsUpdate}`
+    const message = ` · useTheme(${id}) => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`
     if (process.env.TAMAGUI_TARGET === 'native') {
       console.info(message)
     } else {
@@ -202,8 +243,8 @@ const getSnapshotFrom = (
     }
   }
 
-  if (parentState && isSameAsParent) {
-    return parentState
+  if (isSameAsParent) {
+    return [shouldRerender, { ...parentState, isNew: false }]
   }
 
   if (!name) {
@@ -213,16 +254,12 @@ const getSnapshotFrom = (
       throw new Error(`No theme and no parent?`)
     }
 
-    if (needsUpdate && pendingUpdate) {
+    if (shouldRerender) {
       const updated = { ...(parentState || lastState)! }
-      return updated
+      return [true, updated]
     }
 
-    return next
-  }
-
-  if (pendingUpdate !== 'force' && lastState && lastState.name === name) {
-    return lastState
+    return [false, next]
   }
 
   const scheme = getScheme(name)
@@ -239,12 +276,17 @@ const getSnapshotFrom = (
     parentName: parentState?.name,
     inverses,
     isInverse,
+    isNew: true,
   } satisfies ThemeState
 
   if (isRoot) {
     rootThemeState = nextState
   }
 
+  if (pendingUpdate !== 'force' && lastState && lastState.name === name) {
+    return [false, nextState]
+  }
+
   const shouldAvoidRerender =
     pendingUpdate !== 'force' &&
     lastState &&
@@ -262,13 +304,14 @@ const getSnapshotFrom = (
   // 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 (shouldAvoidRerender) {
-    Object.assign(lastState, nextState)
-    return lastState
+    return [false, nextState]
   }
 
-  return nextState
+  return [true, nextState]
 }
 
+const regexParentScheme = /^(light|dark)_/
+
 function scheduleUpdate(id: string) {
   const queue = [id]
   const visited = new Set<string>()

package/src/views/Theme.tsx

@@ -1,13 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 import type { MutableRefObject } from 'react'
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useRef,
-} from 'react'
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
 import { getSetting } from '../config'
 import { variableToString } from '../createVariable'
 import { useThemeWithState } from '../hooks/useTheme'
@@ -29,6 +22,7 @@ export const Theme = forwardRef(function Theme(props: ThemeProps, ref) {
   }
 
   const isRoot = !!props['_isRoot']
+
   const [_, themeState] = useThemeWithState(props, isRoot)
 
   const disableDirectChildTheme = props['disable-child-theme']
@@ -74,12 +68,19 @@ export function getThemedChildren(
   let shouldRenderChildrenWithTheme =
     hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props)
 
+  if (process.env.NODE_ENV === 'development' && props.debug) {
+    children = (
+      <ThemeDebug themeState={themeState} themeProps={props}>
+        {children}
+      </ThemeDebug>
+    )
+  }
+
   if (!shouldRenderChildrenWithTheme) {
     return children
   }
 
   // from here on out we have to be careful not to re-parent
-
   children = (
     <ThemeStateContext.Provider value={themeState.id}>
       {children}
@@ -133,11 +134,6 @@ export function getThemedChildren(
         state,
         ...getThemeClassNameAndStyle(themeState, props, isRoot),
       })
-      children = (
-        <ThemeDebug themeState={themeState} themeProps={props}>
-          {children}
-        </ThemeDebug>
-      )
     }
   }
 
@@ -149,7 +145,13 @@ export function getThemedChildren(
     const { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot)
 
     children = (
-      <span className={`${className} _dsp_contents is_Theme`} style={style}>
+      <span
+        {...(process.env.NODE_ENV === 'development' && {
+          'data-theme-id': themeState.id,
+        })}
+        className={`${className} _dsp_contents is_Theme`}
+        style={style}
+      >
         {children}
       </span>
     )

package/types/helpers/createShallowSetState.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { DebugProp } from '../types';
-export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, isDisabled?: boolean, transition?: boolean, debug?: DebugProp, callback?: (nextState: any) => void): (next?: Partial<State>) => void;
-export declare function mergeIfNotShallowEqual(prev: any, next: any, isDisabled?: boolean, debug?: DebugProp): any;
+export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, onlyAllow?: string[], transition?: boolean, debug?: DebugProp, callback?: (nextState: any) => void): (next?: Partial<State>) => void;
+export declare function mergeIfNotShallowEqual(prev: any, next: any, onlyAllow?: string[], debug?: DebugProp): any;
 export declare function isEqualShallow(prev: any, next: any): boolean;
 //# sourceMappingURL=createShallowSetState.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createShallowSetState.d.ts","sourceRoot":"","sources":["../../src/helpers/createShallowSetState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKzC,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EACxD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACnD,UAAU,CAAC,EAAE,OAAO,EACpB,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,EACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,WAIzB,OAAO,CAAC,KAAK,CAAC,UAYzB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,EACT,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,OAgBlB;AAED,wBAAgB,cAAc,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,WAOxC"}
+{"version":3,"file":"createShallowSetState.d.ts","sourceRoot":"","sources":["../../src/helpers/createShallowSetState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKzC,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EACxD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACnD,SAAS,CAAC,EAAE,MAAM,EAAE,EACpB,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,EACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,WAIzB,OAAO,CAAC,KAAK,CAAC,UAYzB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,EACT,SAAS,CAAC,EAAE,MAAM,EAAE,EACpB,KAAK,CAAC,EAAE,SAAS,OAyBlB;AAED,wBAAgB,cAAc,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,WAOxC"}

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;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;AA6ND,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;AA8BrC,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,UA2HF,CAAA;AAkOD,eAAO,MAAM,qBAAqB,UAAW,UAAU,YACiC,CAAA"}

package/types/views/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAON,MAAM,OAAO,CAAA;AAId,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,eAAO,MAAM,KAAK,4EAgChB,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,UAAU,EACjB,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,OAgHpE"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAqE,MAAM,OAAO,CAAA;AAIzF,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,eAAO,MAAM,KAAK,4EAiChB,CAAA;AAIF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,UAAU,EACjB,MAAM,qBAAQ,EACd,QAAQ,EAAE,gBAAgB,CAAC;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAC,OAwHpE"}