@tamagui/core 1.0.0-alpha.31 → 1.0.0-alpha.38

package/dist/{esm/hooks → hooks}/useTheme.js

@@ -1,28 +1,22 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useForceUpdate } from "@tamagui/use-force-update";
+import { isEqual } from "@dish/fast-compare";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { Variable } from "../createVariable";
 import { ThemeContext } from "../views/ThemeContext";
 import { ThemeManagerContext } from "../views/ThemeManagerContext";
 import { GET_DEFAULT_THEME } from "../views/ThemeProvider";
-const areEqualSets = /* @__PURE__ */ __name((a, b) => {
-  if (a.size !== b.size)
-    return false;
-  for (const val in a) {
-    if (!b.has(val)) {
-      return false;
-    }
-  }
-  return true;
-}, "areEqualSets");
-const useThemeName = /* @__PURE__ */ __name((opts) => {
+import { useForceUpdate } from "./useForceUpdate";
+const useThemeName = /* @__PURE__ */ __name(() => {
   const parent = useContext(ThemeManagerContext);
   const [name, setName] = useState(parent.name);
-  useIsomorphicLayoutEffect(() => {
-    return parent.onChangeTheme((next, manager) => {
-      setName(opts?.parent ? manager.parentName : next);
+  useEffect(() => {
+    return parent.onChangeTheme((next) => {
+      setName((prev) => {
+        if (prev === next)
+          return prev;
+        return next;
+      });
     });
   }, [parent]);
   return name || "light";
@@ -46,8 +40,7 @@ const useTheme = /* @__PURE__ */ __name(() => {
   useIsomorphicLayoutEffect(() => {
     const st = state.current;
     st.isRendering = false;
-    const cur = manager.keys.get(st.uuid);
-    if (!cur || !areEqualSets(st.keys, cur)) {
+    if (!isEqual(st.keys, manager.keys.get(st.uuid))) {
       manager.track(st.uuid, st.keys);
     }
   });
@@ -70,15 +63,20 @@ const useTheme = /* @__PURE__ */ __name(() => {
         const val = activeTheme[key];
         if (process.env.NODE_ENV === "development") {
           if (typeof val === "undefined") {
-            console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
-            return null;
-          }
-          if (!(val instanceof Variable)) {
-            console.warn("Non variable!", val);
-          }
-          if (val.name !== key) {
-            console.warn("Non-matching name for variable to key", key, val.name);
+            if (typeof key === "string") {
+              try {
+                if (!activeTheme) {
+                  throw new Error(`No theme! ${name} in ${Object.keys(themes)}`);
+                }
+                if (!val) {
+                  throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+                }
+              } catch (err) {
+                console.error(err.message, err.stack);
+              }
+            }
           }
+          return Reflect.get(_, key);
         }
         if (state.current.isRendering) {
           state.current.keys.add(key);

package/dist/hooks/useTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/hooks/useTheme.tsx"],
+  "sourcesContent": ["import { isEqual } from '@dish/fast-compare'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\nimport { GET_DEFAULT_THEME } from '../views/ThemeProvider'\nimport { useForceUpdate } from './useForceUpdate'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useThemeName = () => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n  useEffect(() => {\n    return parent.onChangeTheme((next) => {\n      setName((prev) => {\n        if (prev === next) return prev\n        return next\n      })\n    })\n  }, [parent])\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = () => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    if (!isEqual(st.keys, manager.keys.get(st.uuid))) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              if (typeof key === 'string') {\n                try {\n                  if (!activeTheme) {\n                    throw new Error(`No theme! ${name} in ${Object.keys(themes)}`)\n                  }\n                  if (!val) {\n                    throw new Error(\n                      `No theme value \"${String(key)}\" in: ${Object.keys(activeTheme)}`\n                    )\n                  }\n                } catch (err: any) {\n                  // no need to destroy rendering ever\n                  console.error(err.message, err.stack)\n                }\n              }\n            }\n            return Reflect.get(_, key)\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          return val\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAQO,MAAM,eAAe,6BAAM;AAChC,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AACxC,YAAU,MAAM;AACd,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,cAAQ,CAAC,SAAS;AAChB,YAAI,SAAS;AAAM,iBAAO;AAC1B,eAAO;AAAA;AAAA;AAAA,KAGV,CAAC;AACJ,SAAO,QAAQ;AAAA,GAXW;AAcrB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAM;AAC5B,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,IAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,QAAI,CAAC,QAAQ,GAAG,MAAM,QAAQ,KAAK,IAAI,GAAG,QAAQ;AAChD,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,SAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,OAAO;AAE7E,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,kBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AACzD,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,gBAAI,OAAO,QAAQ,UAAU;AAC3B,kBAAI;AACF,oBAAI,CAAC,aAAa;AAChB,wBAAM,IAAI,MAAM,aAAa,WAAW,OAAO,KAAK;AAAA;AAEtD,oBAAI,CAAC,KAAK;AACR,wBAAM,IAAI,MACR,mBAAmB,OAAO,aAAa,OAAO,KAAK;AAAA;AAAA,uBAGhD,KAAP;AAEA,wBAAQ,MAAM,IAAI,SAAS,IAAI;AAAA;AAAA;AAAA;AAIrC,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAEzB,eAAO;AAAA;AAAA;AAAA,KAIb;AAAA,GAtEoB;",
+  "names": []
+}