@tamagui/core 1.0.1-beta.216 → 1.0.1-beta.218

package/dist/esm/hooks/useTheme.js

@@ -13,7 +13,7 @@ import {
 } from "../helpers/ThemeManager";
 import { GetThemeUnwrapped } from "./getThemeUnwrapped";
 import { useServerRef } from "./useServerHooks";
-const useTheme = (themeName, componentName, props, forceUpdate) => {
+const useTheme = (themeName, componentName, props, forceUpdate, disableTracking) => {
   if (isRSC) {
     const config = getConfig();
     return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
@@ -60,10 +60,33 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
     return themes[Object.keys(themes)[0]];
   }
   return useMemo(() => {
-    return getThemeProxied(theme, name, className, themeManager, state, debugProp);
-  }, [theme, name, className, themeManager, state, debugProp]);
+    return getThemeProxied({
+      theme,
+      name,
+      className,
+      themeManager,
+      onStringKeyAccess(key) {
+        if (disableTracking)
+          return;
+        if (state) {
+          if (state.current.isRendering && !state.current.keys.has(key)) {
+            state.current.keys.add(key);
+            if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
+              console.log("  \u{1F538} tracking theme", key);
+            }
+          }
+        }
+      }
+    });
+  }, [theme, name, className, themeManager, debugProp, disableTracking]);
 };
-function getThemeProxied(theme, name, className, themeManager, state, debugProp) {
+function getThemeProxied({
+  theme,
+  name,
+  className,
+  themeManager,
+  onStringKeyAccess
+}) {
   return createProxy(theme, {
     has(_, key) {
       if (typeof key === "string" && key[0] === "$") {
@@ -93,14 +116,7 @@ function getThemeProxied(theme, name, className, themeManager, state, debugProp)
       if (!themeManager) {
         return theme[key];
       }
-      if (state) {
-        if (state.current.isRendering && !state.current.keys.has(key)) {
-          state.current.keys.add(key);
-          if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-            console.log("  \u{1F538} tracking theme", key);
-          }
-        }
-      }
+      onStringKeyAccess == null ? void 0 : onStringKeyAccess(key);
       return themeManager.getValue(key);
     }
   });

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(\n        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n      )\n    }\n  }\n\n  const { themes } = config\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useMemo(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n  let didChange = false\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    didChange = Boolean(\n      next?.name !== themeManager.name || next?.className !== themeManager.className\n    )\n    if (didChange) {\n      themeManager.update(next, false, false)\n    }\n  }\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next, didChange)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [didChange, themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any,\n  disableTracking?: boolean\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      theme,\n      name,\n      className,\n      themeManager,\n      onStringKeyAccess(key) {\n        if (disableTracking) return\n        if (state) {\n          if (state.current.isRendering && !state.current.keys.has(key)) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n              // eslint-disable-next-line no-console\n              console.log('  \uD83D\uDD38 tracking theme', key)\n            }\n          }\n        }\n      },\n    })\n  }, [theme, name, className, themeManager, debugProp, disableTracking])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  onStringKeyAccess,\n}: {\n  theme: any\n  name: string\n  onStringKeyAccess?: (cb: string) => void\n  className?: string\n  themeManager?: ThemeManager | null\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      onStringKeyAccess?.(key)\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(\n        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n      )\n    }\n  }\n\n  const { themes } = config\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useMemo(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n  let didChange = false\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    didChange = Boolean(\n      next?.name !== themeManager.name || next?.className !== themeManager.className\n    )\n    if (didChange) {\n      themeManager.update(next, false, false)\n    }\n  }\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next, didChange)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [didChange, themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": ["name", "parentManager", "next"]
 }

package/dist/esm/views/ThemeInverse.js

@@ -13,8 +13,7 @@ const ThemeInverse = ({
   useIsomorphicLayoutEffect(() => {
     if (themeName.startsWith("dark")) {
       setName("light");
-    }
-    if (themeName.startsWith("light")) {
+    } else if (themeName.startsWith("light")) {
       setName("dark");
     }
   }, [defaultTheme, themeName]);

package/dist/esm/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    }\n    if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": "AA+BS;AA/BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
+  "mappings": "AA8BS;AA9BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.216",
+  "version": "1.0.1-beta.218",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,30 +28,30 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.216",
-    "@tamagui/constants": "^1.0.1-beta.216",
-    "@tamagui/helpers": "^1.0.1-beta.216",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.216",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.216",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.216",
-    "@tamagui/types-react-native": "^1.0.1-beta.216",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.216",
-    "@tamagui/use-event": "^1.0.1-beta.216",
-    "@tamagui/use-force-update": "^1.0.1-beta.216"
+    "@tamagui/compose-refs": "^1.0.1-beta.218",
+    "@tamagui/constants": "^1.0.1-beta.218",
+    "@tamagui/helpers": "^1.0.1-beta.218",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.218",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.218",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.218",
+    "@tamagui/types-react-native": "^1.0.1-beta.218",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.218",
+    "@tamagui/use-event": "^1.0.1-beta.218",
+    "@tamagui/use-force-update": "^1.0.1-beta.218"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.216",
+    "@tamagui/build": "^1.0.1-beta.218",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",
     "csstype": "^3.0.10",
     "esbuild": "^0.15.11",
-    "react": "*",
-    "react-dom": "*",
+    "react": ">=18",
+    "react-dom": ">=18",
     "typescript": "^4.7.4",
     "vitest": "^0.24.3"
   },

package/src/createComponent.tsx

@@ -1,5 +1,5 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
   composeEventHandlers,
@@ -29,23 +29,18 @@ import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
-import {
-  SplitStyleResult,
-  getSubStyle,
-  insertSplitStyles,
-  useSplitStyles,
-} from './helpers/getSplitStyles'
+import { getSubStyle, useSplitStyles } from './helpers/getSplitStyles'
 import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { mergeTransform } from './helpers/mergeTransform'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
-import { pseudoDescriptors } from './helpers/pseudoDescriptors'
 import { useShallowSetState } from './helpers/useShallowSetState'
 import { getRect, measureLayout, useElementLayout } from './hooks/useElementLayout'
 import { addMediaQueryListener, getInitialMediaState } from './hooks/useMedia'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
 import {
+  DebugProp,
   SpaceDirection,
   SpaceTokens,
   SpacerProps,
@@ -140,7 +135,6 @@ export function createComponent<
   let defaultNativeStyle: any
   let tamaguiDefaultProps: any
   let defaultTag: string | undefined
-  let initialSplitStyles: SplitStyleResult
 
   // see onConfiguredOnce below which attaches a name then to this component
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
@@ -157,7 +151,7 @@ export function createComponent<
 
     // time`mergeProps`
 
-    const debugProp = props['debug']
+    const debugProp = props['debug'] as DebugProp
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
     const componentClassName = props.asChild
@@ -194,7 +188,7 @@ export function createComponent<
     )
 
     if (process.env.NODE_ENV === 'development') {
-      if (props['debug']) {
+      if (debugProp) {
         const name = `${
           componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
         }`
@@ -203,13 +197,28 @@ export function createComponent<
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type}`
         // eslint-disable-next-line no-console
         console.group(`%c ${banner}`, 'background: yellow;')
-        // eslint-disable-next-line no-console
-        console.log(`state`, state)
+        if (!isServer) {
+          // eslint-disable-next-line no-console
+          console.log(`state`, state)
+          // eslint-disable-next-line no-console
+          console.groupCollapsed('props')
+          // eslint-disable-next-line no-console
+          console.log(props)
+          // eslint-disable-next-line no-console
+          console.log('order', Object.keys(props))
+          // eslint-disable-next-line no-console
+          console.groupEnd()
+        }
       }
     }
 
+    const shouldAvoidClasses =
+      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
+    const shouldForcePseudo = !!propsIn.forceStyle
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo
+
     const forceUpdate = useForceUpdate()
-    const theme = useTheme(props.theme, componentName, props, forceUpdate)
+    const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames)
 
     const shouldSetMounted = needsMount && state.unmounted
     const setMounted = shouldSetMounted
@@ -226,12 +235,7 @@ export function createComponent<
         }
       : undefined
 
-    const shouldAvoidClasses =
-      !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName
-
-    const shouldForcePseudo = !!propsIn.forceStyle
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo
     const languageContext = isRSC ? null : useContext(FontLanguageContext)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
@@ -254,19 +258,18 @@ export function createComponent<
 
     // time`setupStateConf`
 
-    const splitStyleState: SplitStyleState = {
-      ...state,
-      noClassNames,
-      dynamicStylesInline: noClassNames,
-      hasTextAncestor,
-      resolveVariablesAs: 'value',
-    }
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
-      splitStyleState,
-      props.asChild ? null : initialSplitStyles,
+      {
+        ...state,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: 'value',
+      },
+      null,
       languageContext || undefined,
       elementType,
       debugProp
@@ -593,7 +596,7 @@ export function createComponent<
       }, [unPress])
     }
 
-    let styles: any[]
+    let styles: Record<string, any>[]
 
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
@@ -607,11 +610,7 @@ export function createComponent<
       // ugly but for now...
       if (shouldForcePseudo) {
         const next = {}
-        for (const style of styles) {
-          if (style) {
-            Object.assign(next, style)
-          }
-        }
+        styles.forEach((style) => Object.assign(next, style))
         // @ts-ignore
         Object.assign(splitStyles.style, next)
       }
@@ -677,6 +676,8 @@ export function createComponent<
             for (const style of styles) {
               if (style?.fontFamily) {
                 style.fontFamily = overrideFace
+                delete style.fontWeight
+                delete style.fontStyle
               }
             }
           }
@@ -687,16 +688,11 @@ export function createComponent<
       viewProps.style = styles
     }
 
-    // TODO need to loop active variants and see if they have matchin pseudos and apply as well
-    const initialPseudos = initialSplitStyles?.pseudos
-    const runtimePressStyle = noClassNames && (pseudos?.pressStyle || initialPseudos?.pressStyle)
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
     const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick)
-
-    const isHoverable = isWeb
-    const runtimeHoverStyle = noClassNames && (pseudos?.hoverStyle || initialPseudos.hoverStyle)
-    const attachHover =
-      isHoverable &&
-      !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
+    const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
+    const isHoverable =
+      isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave)
 
     const handlesPressEvents = !isWeb && !asChild
 
@@ -706,7 +702,7 @@ export function createComponent<
       ? false
       : Boolean(
           attachPress ||
-            attachHover ||
+            isHoverable ||
             'pressStyle' in props ||
             'onPress' in props ||
             'onPressIn' in props ||
@@ -729,28 +725,28 @@ export function createComponent<
                   onMouseUp?.(e)
                 }
               : undefined,
-            ...(attachHover && {
-              onMouseEnter: attachHover
+            ...(isHoverable && {
+              onMouseEnter: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = true
                     }
                     if (state.pressIn) {
                       next.press = true
                     }
-                    if (attachHover || state.pressIn) {
+                    if (isHoverable || state.pressIn) {
                       setStateShallow(next)
                     }
                     onHoverIn?.(e)
                     onMouseEnter?.(e)
                   }
                 : undefined,
-              onMouseLeave: attachHover
+              onMouseLeave: isHoverable
                 ? (e) => {
                     const next: Partial<typeof state> = {}
                     mouseUps.add(unPress)
-                    if (attachHover) {
+                    if (isHoverable) {
                       next.hover = false
                     }
                     if (state.pressIn) {
@@ -855,7 +851,7 @@ export function createComponent<
     // EVENTS native
     if (process.env.TAMAGUI_TARGET === 'native') {
       // add focus events
-      const attachFocus = !!(pseudos.focusStyle || (initialPseudos && initialPseudos.focusStyle))
+      const attachFocus = !!pseudos.focusStyle
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true })
@@ -917,7 +913,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()
@@ -994,50 +990,22 @@ export function createComponent<
     const debug = defaultPropsIn['debug']
 
     // remove all classNames
-    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {}, true)
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {})
 
     if (ourProps.tag) {
       defaultTag = ourProps.tag
     }
 
     const noClassNames = !staticConfig.acceptsClassName
-
-    initialSplitStyles = insertSplitStyles(
-      ourProps,
-      staticConfig,
-      initialTheme,
-      {
-        unmounted: false,
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        resolveVariablesAs: 'both',
-        noClassNames,
-      },
-      undefined,
-      undefined,
-      debug
-    )
+    const { name, variants, defaultVariants, ...restProps } = ourProps
 
     // must preserve prop order
     // leave out className because we handle that already with initialSplitStyles.classNames
     // otherwise it confuses variant functions getting className props
-    const [defaults, defaultsClassnames] = mergeProps(
-      component.defaultProps as any,
-      isWeb
-        ? { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps }
-        : initialSplitStyles.viewProps,
-      true
-      // conf.inverseShorthands
-    )
-
-    // avoid passing className props to variants
-    initialSplitStyles.classNames = {
-      ...defaultsClassnames,
-      ...initialSplitStyles.classNames,
-      ...ourClassNames,
-    }
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps as any, {
+      ...defaultVariants,
+      ...restProps,
+    })
 
     defaultNativeStyle = {}
 
@@ -1056,40 +1024,15 @@ export function createComponent<
       }
     }
 
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults
-
-      // temp bugfix, splitStyles isn't returning variables when resolveVariablesAs == 'both'
-      if (!isWeb) {
-        Object.keys(pseudoDescriptors).forEach((k) => {
-          if (ourProps[k]) {
-            // @ts-ignore
-            initialSplitStyles.pseudos[k] = null
-            tamaguiDefaultProps[k] = ourProps[k]
-          }
-        })
-      }
-    }
+    // set to global
+    tamaguiDefaultProps = defaults
 
     // add debug logs
     if (process.env.NODE_ENV === 'development' && debug) {
       if (process.env.IS_STATIC !== 'is_static') {
+        // prettier-ignore
         // eslint-disable-next-line no-console
-        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults,
-          defaultPropsIn,
-          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
-          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
-          ourProps,
-          ourClassNames,
-          defaultsClassnames,
-          defaultTag,
-          noClassNames,
-        })
+        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, { staticConfig, tamaguiDefaultProps, defaultNativeStyle, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames, })
       }
     }
   })

package/src/createTamagui.ts

@@ -195,8 +195,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: () => `
-.is_Text .is_Text { display: inline-flex; }
-._dsp_contents { display: contents; }
+.is_Text .is_Text {display:inline-flex;}
+._dsp_contents {display:contents;}
 ${themeConfig.css}
 ${getAllRules().join('\n')}
 `,