@tamagui/web 1.58.1 → 1.58.3

package/src/hooks/useTheme.tsx

@@ -30,9 +30,13 @@ export type ChangedThemeResponse = {
 
 const emptyProps = { name: null }
 
+let cached: any
 function getDefaultThemeProxied() {
+  if (cached) return cached
   const config = getConfig()
-  return getThemeProxied(config.themes[Object.keys(config.themes)[0]])
+  const defaultTheme = config.themes.light ?? config.themes[Object.keys(config.themes)[0]]
+  cached = getThemeProxied(defaultTheme)
+  return cached
 }
 
 type ThemeGettable<Val> = Val & {
@@ -41,7 +45,7 @@ type ThemeGettable<Val> = Val & {
     | (Val extends Variable<infer X>
         ? X extends VariableValGeneric
           ? any
-          : X
+          : Exclude<X, Variable>
         : Val extends VariableVal
         ? string | number
         : unknown)
@@ -70,7 +74,11 @@ export const useThemeWithState = (
       ? () => {
           const next =
             props.shouldUpdate?.() ?? (keys.current.length > 0 ? true : undefined)
-          if (process.env.NODE_ENV === 'development' && props.debug) {
+          if (
+            process.env.NODE_ENV === 'development' &&
+            props.debug &&
+            props.debug !== 'profile'
+          ) {
             // rome-ignore lint/nursery/noConsoleLog: <explanation>
             console.log(`  🎨 useTheme() shouldUpdate?`, next, {
               shouldUpdateProp: props.shouldUpdate?.(),
@@ -118,11 +126,13 @@ export function getThemeProxied(
 ): UseThemeResult {
   return createProxy(theme, {
     has(_, key) {
+      if (Reflect.has(theme, key)) {
+        return true
+      }
       if (typeof key === 'string') {
         if (key[0] === '$') key = key.slice(1)
         return themeManager?.allKeys.has(key)
       }
-      return Reflect.has(theme, key)
     },
     get(_, key) {
       if (key === GetThemeUnwrapped) {
@@ -132,8 +142,7 @@ export function getThemeProxied(
         // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
         // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
         key !== 'undefined' &&
-        typeof key === 'string' &&
-        keys
+        typeof key === 'string'
       ) {
         // auto convert variables to plain
         const keyString = key[0] === '$' ? key.slice(1) : key
@@ -146,14 +155,16 @@ export function getThemeProxied(
             // if its a variable (web), its ignored!
             get(_, subkey) {
               // trigger read key that makes it track updates
-              if (
-                (subkey === 'val' || (subkey === 'get' && !isWeb)) &&
-                !keys.includes(keyString)
-              ) {
-                keys.push(keyString)
-                if (process.env.NODE_ENV === 'development' && debug) {
-                  // rome-ignore lint/nursery/noConsoleLog: <explanation>
-                  console.log(` 🎨 useTheme() tracking new key: ${keyString}`)
+              if (keys) {
+                if (
+                  (subkey === 'val' || (subkey === 'get' && !isWeb)) &&
+                  !keys.includes(keyString)
+                ) {
+                  keys.push(keyString)
+                  if (process.env.NODE_ENV === 'development' && debug) {
+                    // rome-ignore lint/nursery/noConsoleLog: <explanation>
+                    console.log(` 🎨 useTheme() tracking new key: ${keyString}`)
+                  }
                 }
               }
               if (subkey === 'get') {
@@ -194,6 +205,19 @@ export const useChangeThemeEffect = (
     }
   }
 
+  // for testing performance can bail it out early with this fake response:
+  // i found most of the cost was just having a useState at all, at least 30%
+  // if (!disable && parentManager) {
+  //   return {
+  //     isNewTheme: false,
+  //     state: {
+  //       name: 'light',
+  //       theme: getConfig().themes.light,
+  //     },
+  //     themeManager: parentManager!,
+  //   }
+  // }
+
   const [themeState, setThemeState] = useState<ChangedThemeResponse>(createState)
   const { state, mounted, isNewTheme, themeManager } = themeState
   const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)
@@ -209,8 +233,8 @@ export const useChangeThemeEffect = (
     const next = nextState || manager.getState(props, parentManager)
     if (forceShouldChange) return next
     if (!next) return
-    if (forceUpdate !== true) {
-      if (!manager.getStateShouldChange(next, prevState)) return
+    if (forceUpdate !== true && !manager.getStateShouldChange(next, prevState)) {
+      return
     }
     return next
   }
@@ -278,7 +302,7 @@ export const useChangeThemeEffect = (
       mounted,
     ])
 
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === 'development' && props.debug !== 'profile') {
       useEffect(() => {
         globalThis['TamaguiThemeManagers'] ??= new Set()
         globalThis['TamaguiThemeManagers'].add(themeManager)
@@ -369,7 +393,7 @@ export const useChangeThemeEffect = (
 
     if (!state) {
       if (isNewTheme) {
-        state = { ...themeManager.state }
+        state = themeManager.state
       } else {
         state = parentManager!.state
         themeManager = parentManager!

package/types/constants/accessibilityDirectMap.native.d.ts

@@ -20,37 +20,37 @@ export declare const nativeAccessibilityState: {
     'aria-expanded': string;
 };
 export declare const accessibilityWebRoleToNativeRole: {
-    slider: string;
-    heading: string;
-    img: string;
-    link: string;
-    presentation: string;
-    region: string;
-    group: string;
     alert: string;
     button: string;
     checkbox: string;
     combobox: string;
+    grid: string;
+    group: string;
+    heading: string;
     imagebutton: string;
+    img: string;
     keyboardkey: string;
+    link: string;
     menu: string;
     menubar: string;
     menuitem: string;
     none: string;
+    presentation: string;
     progressbar: string;
     radio: string;
     radiogroup: string;
+    region: string;
     scrollbar: string;
     searchbox: string;
+    slider: string;
     spinbutton: string;
-    grid: string;
     summary: string;
     switch: string;
     tab: string;
     tablist: string;
     text: string;
     timer: string;
-    toolbar: string;
     togglebutton: string;
+    toolbar: string;
 };
 //# sourceMappingURL=accessibilityDirectMap.native.d.ts.map

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAaN,MAAM,OAAO,CAAA;AAiBd,OAAO,EAEL,SAAS,EAIT,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAEd,SAAS,EAGV,MAAM,SAAS,CAAA;AAQhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAoBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAmB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,UAAU,GAAG,SAAS,GAAG,EAAE,EACtD,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,YAAY,EAAE,YAAY,4DAmkC3B;AAGD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAaN,MAAM,OAAO,CAAA;AAiBd,OAAO,EAEL,SAAS,EAIT,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAEd,SAAS,EAGV,MAAM,SAAS,CAAA;AAQhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAqBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAmB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,UAAU,GAAG,SAAS,GAAG,EAAE,EACtD,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,YAAY,EAAE,YAAY,4DA4kC3B;AAGD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;AAMD,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}

package/types/createTheme.d.ts

@@ -2,6 +2,9 @@ import type { Variable } from './createVariable';
 type GenericTheme = {
     [key: string]: string | Variable;
 };
-export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => { [K in keyof Theme]: string | Variable<any> | Theme[K]; };
+/**
+ * @deprecated no need to use this anymore, can just remove the call and use plain objects
+ */
+export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => Theme;
 export {};
 //# sourceMappingURL=createTheme.d.ts.map

package/types/createTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEhD,KAAK,YAAY,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAA;AAIxD,eAAO,MAAM,WAAW,0GAMvB,CAAA"}
+{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEhD,KAAK,YAAY,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAA;AAExD;;GAEG;AACH,eAAO,MAAM,WAAW,qDAEvB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AAyBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAuB7B,eAAO,MAAM,cAAc,EAAE,aAqpC5B,CAAA;AAqDD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cAuBF,CAAA;AA0BD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AAyBjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAuB7B,eAAO,MAAM,cAAc,EAAE,aAgpC5B,CAAA;AAqDD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cAuBF,CAAA;AA0BD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}

package/types/hooks/useTheme.d.ts

@@ -8,7 +8,7 @@ export type ChangedThemeResponse = {
     mounted?: boolean;
 };
 type ThemeGettable<Val> = Val & {
-    get: () => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : X : Val extends VariableVal ? string | number : unknown);
+    get: () => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
 };
 type UseThemeResult = {
     [Key in keyof ThemeParsed]: ThemeGettable<ThemeParsed[Key]>;

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,UAAU,EAEV,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AASD,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B,GAAG,EAAE,MACD,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,CAAC,GACH,GAAG,SAAS,WAAW,GACvB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACjB,CAAA;AAED,KAAK,cAAc,GAAG;KACnB,GAAG,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5D,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,UAAU,KAChB,CAAC,oBAAoB,EAAE,WAAW,CAiDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAClB,YAAY,CAAC,EAAE,YAAY,EAC3B,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CAqDhB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,UAAU,yBAEV,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAsOF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,UAAU,EAEV,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,iBAAiB,CAAA;IACxB,YAAY,EAAE,YAAY,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAaD,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B,GAAG,EAAE,MACD,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,GACvB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACjB,CAAA;AAED,KAAK,cAAc,GAAG;KACnB,GAAG,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5D,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,UAAU,KAChB,CAAC,oBAAoB,EAAE,WAAW,CAqDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAClB,YAAY,CAAC,EAAE,YAAY,EAC3B,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CAwDhB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,UAAU,yBAEV,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAmPF,CAAA"}