@tamagui/web 1.13.3 → 1.14.0

package/dist/esm/views/ThemeProvider.mjs

@@ -1,45 +1,2 @@
-import { jsx } from "react/jsx-runtime";
-import { isClient } from "@tamagui/constants";
-import { createContext, useLayoutEffect, useMemo } from "react";
-import { THEME_CLASSNAME_PREFIX } from "../constants/constants.js";
-import { Theme } from "./Theme.js";
-const ThemeProviderRootContext = createContext(null);
-const ThemeProvider = (props) => {
-  if (isClient) {
-    useLayoutEffect(() => {
-      if (props.disableRootThemeClass)
-        return;
-      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
-      const target = props.themeClassNameOnRoot ? document.documentElement : document.body;
-      target.classList.add(cn);
-      return () => {
-        target.classList.remove(cn);
-      };
-    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
-  }
-  return /* @__PURE__ */ jsx(
-    ThemeProviderRootContext.Provider,
-    {
-      value: useMemo(() => {
-        return {
-          defaultTheme: props.defaultTheme
-        };
-      }, []),
-      children: /* @__PURE__ */ jsx(
-        Theme,
-        {
-          className: props.className,
-          name: props.defaultTheme,
-          forceClassName: props.disableRootThemeClass ? false : void 0,
-          _isRoot: true,
-          children: props.children
-        }
-      )
-    }
-  );
-};
-export {
-  ThemeProvider,
-  ThemeProviderRootContext
-};
+import{jsx as m}from"react/jsx-runtime";import{isClient as a}from"@tamagui/constants";import{createContext as r,useLayoutEffect as l,useMemo as s}from"react";import{THEME_CLASSNAME_PREFIX as n}from"../constants/constants.js";import{Theme as d}from"./Theme.js";const i=r(null),f=e=>(a&&l(()=>{if(e.disableRootThemeClass)return;const t=`${n}${e.defaultTheme}`,o=e.themeClassNameOnRoot?document.documentElement:document.body;return o.classList.add(t),()=>{o.classList.remove(t)}},[e.defaultTheme,e.disableRootThemeClass,e.themeClassNameOnRoot]),m(i.Provider,{value:s(()=>({defaultTheme:e.defaultTheme}),[]),children:m(d,{className:e.className,name:e.defaultTheme,forceClassName:e.disableRootThemeClass?!1:void 0,_isRoot:!0,children:e.children})}));export{f as ThemeProvider,i as ThemeProviderRootContext};
 //# sourceMappingURL=ThemeProvider.mjs.map

package/dist/esm/views/ThemeProvider.mjs.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
   "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants.js'\nimport { Theme } from './Theme.js'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
-  "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO,QAAQ,MAAM;AACnB,eAAO;AAAA,UACL,cAAc,MAAM;AAAA,QACtB;AAAA,MAEF,GAAG,CAAC,CAAC;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,MAAM;AAAA,UACjB,MAAM,MAAM;AAAA,UACZ,gBAAgB,MAAM,wBAAwB,QAAQ;AAAA,UAEtD,SAAO;AAAA,UAEN,gBAAM;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
+  "mappings": "AA2CM,cAAAA,MAAA,oBA3CN,OAAS,YAAAC,MAAgB,qBACzB,OAAS,iBAAAC,EAAe,mBAAAC,EAAiB,WAAAC,MAAe,QAExD,OAAS,0BAAAC,MAA8B,4BACvC,OAAS,SAAAC,MAAa,aAWf,MAAMC,EAA2BL,EAG9B,IAAI,EAEDM,EAAiBC,IAExBR,GACFE,EAAgB,IAAM,CACpB,GAAIM,EAAM,sBAAuB,OACjC,MAAMC,EAAK,GAAGL,IAAyBI,EAAM,eACvCE,EAASF,EAAM,qBAAuB,SAAS,gBAAkB,SAAS,KAChF,OAAAE,EAAO,UAAU,IAAID,CAAE,EAChB,IAAM,CACXC,EAAO,UAAU,OAAOD,CAAE,CAC5B,CACF,EAAG,CAACD,EAAM,aAAcA,EAAM,sBAAuBA,EAAM,oBAAoB,CAAC,EAIhFT,EAACO,EAAyB,SAAzB,CACC,MAAOH,EAAQ,KACN,CACL,aAAcK,EAAM,YACtB,GAEC,CAAC,CAAC,EAEL,SAAAT,EAACM,EAAA,CACC,UAAWG,EAAM,UACjB,KAAMA,EAAM,aACZ,eAAgBA,EAAM,sBAAwB,GAAQ,OAEtD,QAAO,GAEN,SAAAA,EAAM,SACT,EACF",
+  "names": ["jsx", "isClient", "createContext", "useLayoutEffect", "useMemo", "THEME_CLASSNAME_PREFIX", "Theme", "ThemeProviderRootContext", "ThemeProvider", "props", "cn", "target"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.13.3",
-    "@tamagui/constants": "1.13.3",
-    "@tamagui/helpers": "1.13.3",
-    "@tamagui/normalize-css-color": "1.13.3",
-    "@tamagui/use-did-finish-ssr": "1.13.3",
-    "@tamagui/use-event": "1.13.3",
-    "@tamagui/use-force-update": "1.13.3"
+    "@tamagui/compose-refs": "1.14.0",
+    "@tamagui/constants": "1.14.0",
+    "@tamagui/helpers": "1.14.0",
+    "@tamagui/normalize-css-color": "1.14.0",
+    "@tamagui/use-did-finish-ssr": "1.14.0",
+    "@tamagui/use-event": "1.14.0",
+    "@tamagui/use-force-update": "1.14.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.13.3",
+    "@tamagui/build": "1.14.0",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -12,6 +12,7 @@ import React, {
   useEffect,
   useId,
   useRef,
+  useState,
 } from 'react'
 
 import { onConfiguredOnce } from './config.js'
@@ -183,7 +184,9 @@ export function createComponent<
         didAccessThemeVariableValue?: boolean
       }
     )
-    stateRef.current ??= {}
+    stateRef.current ||= {}
+
+    const hostRef = useServerRef<TamaguiElement>(null)
 
     /**
      * Component state for tracking animations, pseudos
@@ -290,9 +293,10 @@ export function createComponent<
       componentName,
       reset: props.reset,
       inverse: props.themeInverse,
-      // @ts-expect-error
+      // @ts-ignore this is internal use only
       disable: props['data-themeable'],
-      debug: props.debug,
+      debug:
+        process.env.NODE_ENV === 'development' && props.debug ? { hostRef } : undefined,
       shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue,
     })!
 
@@ -342,8 +346,6 @@ export function createComponent<
       keys: noClassNames && isMediaSpaced ? (splitStyles.hasMedia as any) : null,
     })
 
-    const hostRef = useServerRef<TamaguiElement>(null)
-
     // animation setup
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating
 
@@ -730,6 +732,37 @@ export function createComponent<
       // passPropsToChildren: true,
     })
 
+    if (process.env.NODE_ENV === 'development') {
+      if (props['debug'] === 'visualize') {
+        const [onChangeCount, setOnChangeCount] = useState(0)
+
+        useEffect(() => {
+          themeState.themeManager?.onChangeTheme((name, manager) => {
+            setOnChangeCount((p) => ++p)
+            console.warn(`🖤`, name)
+          })
+        }, [themeState.themeManager])
+
+        content = (
+          <>
+            {content}
+            <code>
+              <pre>
+                {JSON.stringify({
+                  name: themeState.themeManager?.state.name,
+                  parent: themeState.themeManager?.state.parentName,
+                  id: themeState.themeManager?.id,
+                  parentId: themeState.themeManager?.parentManager?.id,
+                  isNew: themeState.isNewTheme,
+                  onChangeCount,
+                })}
+              </pre>
+            </code>
+          </>
+        )
+      }
+    }
+
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
         content = (

package/src/helpers/ThemeManager.tsx

@@ -26,7 +26,10 @@ export function hasNoThemeUpdatingProps(props: ThemeProps) {
   return !(props.name || props.componentName || props.inverse || props.reset)
 }
 
+let uid = 0
+
 export class ThemeManager {
+  id = uid++
   themeListeners = new Set<ThemeListener>()
   parentManager: ThemeManager | null = null
   state: ThemeManagerState = emptyState
@@ -41,26 +44,28 @@ export class ThemeManager {
     }
     if (!parentManager) {
       if (process.env.NODE_ENV !== 'production') {
-        console.trace()
-        throw new Error(`No parent manager given`)
+        throw new Error(
+          `No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions.`
+        )
       }
       throw `❌`
     }
-    // copy over listeners
-    this.themeListeners = parentManager.themeListeners
 
     // no change no props
     if (hasNoThemeUpdatingProps(props)) {
       return parentManager
     }
+
     if (parentManager) {
       this.parentManager = parentManager
     }
+
     const updatedState = this.getStateIfChanged(props)
     if (updatedState) {
       this.state = updatedState
       return
     }
+
     return parentManager || this
   }
 
@@ -76,6 +81,7 @@ export class ThemeManager {
       }
       const nextState = this.getStateIfChanged(props)
       if (nextState) {
+        this.props = props
         this.state = nextState
         return true
       }
@@ -172,24 +178,20 @@ function getNextThemeClassName(name: string, isInverting = false) {
   return next.replace('light_', '').replace('dark_', '')
 }
 
-const cache = new WeakMap<ThemeProps, [ThemeManager, ThemeManagerState | null]>()
-
 function getState(
   props: ThemeProps,
   parentManager?: ThemeManager | null
 ): ThemeManagerState | null {
-  const cached = cache.get(props)
-  if (cached && cached[0] === parentManager) {
-    return cached[1]
-  }
-
   const themes = getThemes()
 
   if (props.name && props.reset) {
     throw new Error('Cannot reset + set new name')
   }
+
   if (props.reset && !parentManager?.parentManager) {
-    console.warn('Cannot reset no grandparent exists')
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Cannot reset no grandparent exists')
+    }
     return null
   }
 
@@ -204,12 +206,12 @@ function getState(
   // components look for most specific, fallback upwards
   const base = parentName.split(THEME_NAME_SEPARATOR)
   const lastSegment = base[base.length - 1]
-  const isParentAComponentTheme =
+  const isParentComponentTheme =
     parentName && lastSegment[0].toUpperCase() === lastSegment[0]
-  if (isParentAComponentTheme) {
+  if (isParentComponentTheme) {
     base.pop() // always remove componentName they can't nest
   }
-  const parentBaseTheme = isParentAComponentTheme
+  const parentBaseTheme = isParentComponentTheme
     ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR)
     : parentName
   const max = base.length
@@ -218,9 +220,18 @@ function getState(
       ? max // component name only don't search upwards
       : 0
 
-  // prettier-ignore
   // eslint-disable-next-line no-console
-  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [ console.groupCollapsed('ThemeManager.getState()', props, { parentName,   parentBaseTheme,   base,   min,   max,   isParentAComponentTheme }), console.trace(), console.groupEnd() ]
+  if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+    console.groupCollapsed('ThemeManager.getState()')
+    console.log({
+      parentName,
+      parentBaseTheme,
+      base,
+      min,
+      max,
+      isParentComponentTheme,
+    })
+  }
 
   for (let i = max; i >= min; i--) {
     let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)
@@ -243,12 +254,8 @@ function getState(
     if (componentName) {
       // components only look for component themes
       if (nextName) {
-        potentials.push(
-          `${prefix.slice(
-            0,
-            prefix.indexOf(THEME_NAME_SEPARATOR)
-          )}_${nextName}_${componentName}`
-        )
+        const beforeSeparator = prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))
+        potentials.push(`${beforeSeparator}_${nextName}_${componentName}`)
       }
       potentials.push(`${prefix}_${componentName}`)
       if (nextName) {
@@ -258,15 +265,11 @@ function getState(
 
     const found = potentials.find((t) => t in themes)
 
-    // eslint-disable-next-line no-console
-    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')
-      console.log('getState found', found, 'from', potentials, 'parentName', parentName)
+    if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+      console.log(' - ', { found, potentials })
+    }
 
     if (found) {
-      // optimization return null if not changed
-      if (found === parentName) {
-        break
-      }
       result = {
         name: found,
         theme: getThemeUnwrapped(themes[found]),
@@ -277,8 +280,13 @@ function getState(
     }
   }
 
-  if (parentManager) {
-    cache.set(props, [parentManager, result])
+  // eslint-disable-next-line no-console
+  if (process.env.NODE_ENV === 'development' && typeof props.debug === 'string') {
+    console.log({
+      result,
+    })
+    console.trace()
+    console.groupEnd()
   }
 
   return result

package/src/helpers/getSplitStyles.tsx

@@ -881,14 +881,6 @@ export const getSplitStyles: StyleSplitter = (
   // always do this at the very end to preserve the order strictly (animations, origin)
   // and allow proper merging of all pseudos before applying
   if (flatTransforms) {
-    if (process.env.NODE_ENV === 'development' && debug) {
-      // eslint-disable-next-line no-console
-      console.log(
-        'Merging flat transforms, transform before',
-        [...(style.transform || [])],
-        flatTransforms
-      )
-    }
     mergeTransforms(style, flatTransforms, true)
   }