@tamagui/web 2.0.0-rc.9 → 2.0.0

package/dist/cjs/hooks/useThemeState.cjs

@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var useThemeState_exports = {};
 __export(useThemeState_exports, {
@@ -28,153 +30,209 @@ __export(useThemeState_exports, {
   useThemeState: () => useThemeState
 });
 module.exports = __toCommonJS(useThemeState_exports);
-var import_constants = require("@tamagui/constants"),
-  import_constants2 = require("@tamagui/constants"),
-  import_react = require("react"),
-  import_config = require("../config.cjs"),
-  import_constants3 = require("../constants/constants.cjs");
-const ThemeStateContext = (0, import_react.createContext)(""),
-  allListeners = /* @__PURE__ */new Map(),
-  listenersByParent = {},
-  HasRenderedOnce = /* @__PURE__ */new WeakMap(),
-  HadTheme = /* @__PURE__ */new WeakMap(),
-  PendingUpdate = /* @__PURE__ */new Map(),
-  states = /* @__PURE__ */new Map(),
-  localStates = /* @__PURE__ */new Map();
-let shouldForce = !1;
+require("@tamagui/constants");
+var import_constants2 = require("@tamagui/constants");
+var import_react = require("react");
+var import_config = require("../config.cjs");
+var import_constants3 = require("../constants/constants.cjs");
+const ThemeStateContext = (0, import_react.createContext)("");
+const allListeners = /* @__PURE__ */new Map();
+const listenersByParent = {};
+const HasRenderedOnce = /* @__PURE__ */new WeakMap();
+const HadTheme = /* @__PURE__ */new WeakMap();
+const PendingUpdate = /* @__PURE__ */new Map();
+const states = /* @__PURE__ */new Map();
+const localStates = /* @__PURE__ */new Map();
+let shouldForce = false;
 const forceUpdateThemes = () => {
-    cacheVersion++, shouldForce = !0, allListeners.forEach(cb => cb());
-  },
-  getThemeState = id => states.get(id);
-let cacheVersion = 0,
-  themes = null,
-  rootThemeState = null;
+  cacheVersion++;
+  shouldForce = true;
+  allListeners.forEach(cb => cb());
+  shouldForce = false;
+};
+const getThemeState = id => states.get(id);
+let cacheVersion = 0;
+const themeNameCache = /* @__PURE__ */new Map();
+let themeNameCacheVer = -1;
+let themes = null;
+let rootThemeState = null;
 const getRootThemeState = () => rootThemeState;
-const useThemeState = (props, isRoot = !1, keys, schemeKeys) => {
-    const {
-        disable
-      } = props,
-      parentId = (0, import_react.useContext)(ThemeStateContext);
-    if (!parentId && !isRoot) throw new Error(process.env.NODE_ENV === "development" ? `${import_constants3.MISSING_THEME_MESSAGE}
+const useThemeState = (props, isRoot = false, keys, schemeKeys) => {
+  "use no memo";
+
+  const {
+    disable
+  } = props;
+  const parentId = (0, import_react.useContext)(ThemeStateContext);
+  if (!parentId && !isRoot) throw new Error(process.env.NODE_ENV === "development" ? `${import_constants3.MISSING_THEME_MESSAGE}
 
 Looked for theme${props.name ? ` "${props.name}"` : ""}${props.componentName ? ` (component: ${props.componentName})` : ""}, but no parent theme context was found (parentId: ${parentId}).` : import_constants3.MISSING_THEME_MESSAGE);
-    if (disable) return states.get(parentId) || {
-      id: "",
-      name: "light",
-      theme: (0, import_config.getConfig)().themes.light
-      // inverses: 0,
+  if (disable) return states.get(parentId) || {
+    id: "",
+    name: "light",
+    theme: (0, import_config.getConfig)().themes.light
+  };
+  const id = (0, import_react.useId)();
+  const subscribe = (0, import_react.useCallback)(cb => {
+    listenersByParent[parentId] = listenersByParent[parentId] || /* @__PURE__ */new Set();
+    listenersByParent[parentId].add(id);
+    allListeners.set(id, () => {
+      PendingUpdate.set(id, shouldForce ? "force" : true);
+      cb();
+    });
+    return () => {
+      allListeners.delete(id);
+      listenersByParent[parentId].delete(id);
+      localStates.delete(id);
+      states.delete(id);
+      PendingUpdate.delete(id);
     };
-    const id = (0, import_react.useId)(),
-      subscribe = (0, import_react.useCallback)(cb => (listenersByParent[parentId] ||= /* @__PURE__ */new Set(), listenersByParent[parentId].add(id), allListeners.set(id, () => {
-        PendingUpdate.set(id, shouldForce ? "force" : !0), cb();
-      }), () => {
-        allListeners.delete(id), listenersByParent[parentId].delete(id), localStates.delete(id), states.delete(id), PendingUpdate.delete(id);
-      }), [id, parentId]),
-      propsKey = getPropsKey(props),
-      getSnapshot = () => {
-        let local = localStates.get(id);
-        const parentState = states.get(parentId),
-          isSchemeOnlyChange = !1,
-          keysSize = keys?.current?.size ?? 0,
-          allKeysSchemeOptimized = (schemeKeys?.current?.size ?? 0) === keysSize && keysSize > 0,
-          canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized,
-          needsUpdate = props.passThrough ? !1 : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? !0 : HasRenderedOnce.get(keys) ? canSkipForSchemeChange ? !1 : keys?.current?.size ? !0 : props.needsUpdate?.() : !0,
-          [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
-        return PendingUpdate.delete(id), (!local || rerender) && (local = {
-          ...next
-        }, localStates.set(id, local)), process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(` ${id} getSnapshot ${rerender}`, local.name, ">", next.name), console.info({
-          props,
-          propsKey,
-          isRoot,
-          parentId,
-          local,
-          next,
-          needsUpdate,
-          isSchemeOnlyChange,
-          allKeysSchemeOptimized,
-          canSkipForSchemeChange
-        }), console.groupEnd()), Object.assign(local, next), local.id = id, states.set(id, next), local;
+  }, [id, parentId]);
+  const propsKey = getPropsKey(props);
+  const getSnapshot = () => {
+    let local = localStates.get(id);
+    const parentState = states.get(parentId);
+    if (local && !PendingUpdate.has(id)) {
+      if (parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
+    }
+    const isSchemeOnlyChange = false;
+    const keysSize = keys?.current?.size ?? 0;
+    const allKeysSchemeOptimized = (schemeKeys?.current?.size ?? 0) === keysSize && keysSize > 0;
+    const canSkipForSchemeChange = isSchemeOnlyChange;
+    const needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : !HasRenderedOnce.get(keys) ? true : keys?.current?.size ? true : props.needsUpdate?.();
+    const [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
+    PendingUpdate.delete(id);
+    if (!local || rerender) {
+      local = {
+        ...next
       };
-    process.env.NODE_ENV === "development" && globalThis.time && globalThis.time`theme-prep-uses`;
-    const state = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-    return (0, import_constants2.useIsomorphicLayoutEffect)(() => {
-      if (!HasRenderedOnce.get(keys)) {
-        HasRenderedOnce.set(keys, !0);
-        return;
-      }
-      if (!propsKey) {
-        HadTheme.get(keys) && scheduleUpdate(id), HadTheme.set(keys, !1);
-        return;
-      }
-      process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(` \xB7 useTheme(${id}) scheduleUpdate`, propsKey, states.get(id)?.name), scheduleUpdate(id), HadTheme.set(keys, !0);
-    }, [keys, propsKey]), state;
-  },
-  getNextState = (lastState, props, propsKey, isRoot = !1, id, parentId, needsUpdate, pendingUpdate) => {
-    const {
-        debug
-      } = props,
-      parentState = states.get(parentId);
-    if (props.passThrough) return [!1, lastState || parentState || {
-      name: ""
-    }];
-    themes || (themes = (0, import_config.getConfig)().themes);
-    const name = !propsKey && (!lastState || !lastState?.isNew) ? null : getNewThemeName(parentState?.name, props, pendingUpdate === "force" ? !0 : !!needsUpdate),
-      isSameAsParent = parentState && (!name || name === parentState.name),
-      shouldRerender = !!(pendingUpdate === "force" || needsUpdate && (pendingUpdate || lastState?.name !== parentState?.name));
-    if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      const message = ` \xB7 useTheme(${id}) getNextState => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
-      console.groupCollapsed(message), console.trace({
-        name,
-        lastState,
-        parentState,
+      localStates.set(id, local);
+    }
+    if (process.env.NODE_ENV === "development" && props.debug === "verbose") {
+      console.groupCollapsed(` ${id} getSnapshot ${rerender}`, local.name, ">", next.name);
+      console.info({
         props,
         propsKey,
-        id,
-        isSameAsParent
-      }), console.groupEnd();
+        isRoot,
+        parentId,
+        local,
+        next,
+        needsUpdate,
+        isSchemeOnlyChange,
+        allKeysSchemeOptimized,
+        canSkipForSchemeChange
+      });
+      console.groupEnd();
+    }
+    if (next !== local) {
+      Object.assign(local, next);
+      local.id = id;
+    }
+    local._parentName = parentState?.name;
+    local._propsKey = propsKey;
+    states.set(id, next);
+    return local;
+  };
+  if (process.env.NODE_ENV === "development" && globalThis.time) globalThis.time`theme-prep-uses`;
+  const state = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  (0, import_constants2.useIsomorphicLayoutEffect)(() => {
+    if (!HasRenderedOnce.get(keys)) {
+      HasRenderedOnce.set(keys, true);
+      return;
+    }
+    if (!propsKey) {
+      if (HadTheme.get(keys)) scheduleUpdate(id);
+      HadTheme.set(keys, false);
+      return;
     }
-    if (isSameAsParent) return [shouldRerender, {
+    if (process.env.NODE_ENV === "development" && props.debug === "verbose") console.warn(` \xB7 useTheme(${id}) scheduleUpdate`, propsKey, states.get(id)?.name);
+    scheduleUpdate(id);
+    HadTheme.set(keys, true);
+  }, [keys, propsKey]);
+  return state;
+};
+const getNextState = (lastState, props, propsKey, isRoot = false, id, parentId, needsUpdate, pendingUpdate) => {
+  const {
+    debug
+  } = props;
+  const parentState = states.get(parentId);
+  if (props.passThrough) return [false, lastState || parentState || {
+    name: ""
+  }];
+  if (!themes) themes = (0, import_config.getConfig)().themes;
+  const name = !propsKey && (!lastState || !lastState?.isNew) ? null : getNewThemeName(parentState?.name, props, pendingUpdate === "force" ? true : !!needsUpdate);
+  const isSameAsParent = parentState && (!name || name === parentState.name);
+  const shouldRerender = Boolean(pendingUpdate === "force" || needsUpdate && (pendingUpdate || lastState?.name !== parentState?.name));
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    const message = ` \xB7 useTheme(${id}) getNextState => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`;
+    console.groupCollapsed(message);
+    console.trace({
+      name,
+      lastState,
+      parentState,
+      props,
+      propsKey,
+      id,
+      isSameAsParent
+    });
+    console.groupEnd();
+  }
+  if (isSameAsParent) {
+    if (!shouldRerender && lastState && lastState.name === parentState.name) return [false, lastState];
+    return [shouldRerender, {
       ...parentState,
-      isNew: !1
+      isNew: false
     }];
-    if (!name) {
-      const next = lastState ?? parentState;
-      if (!next) throw new Error(process.env.NODE_ENV === "development" ? `${import_constants3.MISSING_THEME_MESSAGE}
+  }
+  if (!name) {
+    const next = lastState ?? parentState;
+    if (!next) throw new Error(process.env.NODE_ENV === "development" ? `${import_constants3.MISSING_THEME_MESSAGE}
 
 Looked for theme${props.name ? ` "${props.name}"` : ""}${props.componentName ? ` (component: ${props.componentName})` : ""}, but no theme state was resolved (parentId: ${parentId}, id: ${id}).` : import_constants3.MISSING_THEME_MESSAGE);
-      return shouldRerender ? [!0, {
-        ...(parentState || lastState)
-      }] : [!1, next];
-    }
-    const scheme = getScheme(name),
-      isInverse = parentState && scheme !== parentState.scheme,
-      nextState = {
-        id,
-        name,
-        theme: themes[name],
-        scheme,
-        parentId,
-        parentName: parentState?.name,
-        // inverses,
-        isInverse,
-        isNew: !0
-      };
-    if (isRoot && (rootThemeState = nextState), pendingUpdate !== "force" && lastState && lastState.name === name) return [!1, nextState];
-    const shouldAvoidRerender = pendingUpdate !== "force" && lastState && !needsUpdate && nextState.name === lastState.name;
-    return process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(` \xB7 useTheme(${id}) \u23ED\uFE0F ${name} shouldAvoidRerender: ${shouldAvoidRerender}`), console.info({
+    if (shouldRerender) return [true, {
+      ...(parentState || lastState)
+    }];
+    return [false, next];
+  }
+  const scheme = getScheme(name);
+  const isInverse = parentState && scheme !== parentState.scheme;
+  const nextState = {
+    id,
+    name,
+    theme: themes[name],
+    scheme,
+    parentId,
+    parentName: parentState?.name,
+    isInverse,
+    isNew: true
+  };
+  if (isRoot) rootThemeState = nextState;
+  if (pendingUpdate !== "force" && lastState && lastState.name === name) return [false, nextState];
+  const shouldAvoidRerender = pendingUpdate !== "force" && lastState && !needsUpdate && nextState.name === lastState.name;
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    console.groupCollapsed(` \xB7 useTheme(${id}) \u23ED\uFE0F ${name} shouldAvoidRerender: ${shouldAvoidRerender}`);
+    console.info({
       lastState,
       needsUpdate,
       nextState,
       pendingUpdate
-    }), console.groupEnd()), shouldAvoidRerender ? [!1, nextState] : [!0, nextState];
-  };
+    });
+    console.groupEnd();
+  }
+  if (shouldAvoidRerender) return [false, nextState];
+  return [true, nextState];
+};
 function scheduleUpdate(id) {
-  const queue = [id],
-    visited = /* @__PURE__ */new Set();
-  for (; queue.length;) {
-    const parent = queue.shift(),
-      children = listenersByParent[parent];
-    if (children) for (const childId of children) visited.has(childId) || (visited.add(childId), queue.push(childId));
+  const queue = [id];
+  const visited = /* @__PURE__ */new Set();
+  while (queue.length) {
+    const children = listenersByParent[queue.shift()];
+    if (children) {
+      for (const childId of children) if (!visited.has(childId)) {
+        visited.add(childId);
+        queue.push(childId);
+      }
+    }
   }
   visited.forEach(childId => {
     allListeners.get(childId)?.();
@@ -187,26 +245,40 @@ const validSchemes = {
 function getScheme(name) {
   return validSchemes[name.split("_")[0]];
 }
-function getNewThemeName(parentName = "", props, forceUpdate = !1) {
+function getNewThemeName(parentName = "", props, forceUpdate = false) {
   const {
-      name,
-      reset
-    } = props,
-    componentName = props.unstyled ? void 0 : props.componentName;
-  if (name && reset) throw new Error(process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time.");
+    name,
+    reset
+  } = props;
+  const componentName = props.unstyled ? void 0 : props.componentName;
+  if (name && reset) throw new Error(process.env.NODE_ENV === "production" ? `\u274C004` : "Cannot reset and set a new name at the same time.");
+  const cacheKey = `${parentName}|${name || ""}|${componentName || ""}|${reset ? 1 : 0}|${forceUpdate ? 1 : 0}`;
+  if (themeNameCacheVer !== cacheVersion) {
+    themeNameCache.clear();
+    themeNameCacheVer = cacheVersion;
+  } else {
+    const cached = themeNameCache.get(cacheKey);
+    if (cached !== void 0) return cached;
+  }
   const {
     themes: themes2
   } = (0, import_config.getConfig)();
   if (reset) {
-    if (parentName === "light" || parentName === "dark") return parentName === "light" ? "dark" : "light";
-    const lastPartIndex = parentName.lastIndexOf("_"),
-      name2 = lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex),
-      scheme = parentName.slice(0, lastPartIndex);
-    return themes2[name2] ? name2 : scheme;
+    if (parentName === "light" || parentName === "dark") {
+      const result2 = parentName === "light" ? "dark" : "light";
+      themeNameCache.set(cacheKey, result2);
+      return result2;
+    }
+    const lastPartIndex = parentName.lastIndexOf("_");
+    const name2 = lastPartIndex <= 0 ? parentName : parentName.slice(lastPartIndex);
+    const scheme = parentName.slice(0, lastPartIndex);
+    const result = themes2[name2] ? name2 : scheme;
+    themeNameCache.set(cacheKey, result);
+    return result;
   }
-  const parentParts = parentName.split("_"),
-    lastName = parentParts[parentParts.length - 1];
-  lastName && lastName[0].toLowerCase() !== lastName[0] && parentParts.pop();
+  const parentParts = parentName.split("_");
+  const lastName = parentParts[parentParts.length - 1];
+  if (lastName && lastName[0].toLowerCase() !== lastName[0]) parentParts.pop();
   const subNames = [name && componentName ? `${name}_${componentName}` : void 0, name, componentName].filter(Boolean);
   let found = null;
   if (name) {
@@ -217,21 +289,23 @@ function getNewThemeName(parentName = "", props, forceUpdate = !1) {
         break;
       }
     }
-    if (!found && !nameHasScheme && getScheme(parentName)) {
-      const potentialBases = [];
-      for (let i = parentParts.length; i >= 1; i--) potentialBases.push(parentParts.slice(0, i).join("_"));
-      outer: for (const base of potentialBases) {
-        const candidates = [componentName ? `${base}_${name}_${componentName}` : void 0, `${base}_${name}`].filter(Boolean);
-        for (const potential of candidates) if (potential in themes2) {
-          found = potential;
-          break outer;
+    if (!found && !nameHasScheme) {
+      if (getScheme(parentName)) {
+        const potentialBases = [];
+        for (let i = parentParts.length; i >= 1; i--) potentialBases.push(parentParts.slice(0, i).join("_"));
+        outer: for (const base of potentialBases) {
+          const candidates = [componentName ? `${base}_${name}_${componentName}` : void 0, `${base}_${name}`].filter(Boolean);
+          for (const potential of candidates) if (potential in themes2) {
+            found = potential;
+            break outer;
+          }
         }
       }
     }
   }
   if (!found) if (!name && componentName) {
     const potential = `${parentParts.join("_")}_${componentName}`;
-    potential in themes2 && (found = potential);
+    if (potential in themes2) found = potential;
   } else {
     const max = parentParts.length;
     for (let i = 0; i <= max; i++) {
@@ -246,15 +320,17 @@ function getNewThemeName(parentName = "", props, forceUpdate = !1) {
       if (found) break;
     }
   }
-  return !forceUpdate && found === parentName &&
-  // if its a scheme only sub-theme, we always consider it "new" because it likely inverses
-  // and we want to avoid reparenting
-  !validSchemes[found] ? null : found;
+  if (!forceUpdate && found === parentName && !validSchemes[found]) {
+    themeNameCache.set(cacheKey, null);
+    return null;
+  }
+  themeNameCache.set(cacheKey, found);
+  return found;
 }
 const getPropsKey = ({
-    name,
-    reset,
-    forceClassName,
-    componentName
-  }) => `${name || ""}${reset || ""}${forceClassName || ""}${componentName || ""}`,
-  hasThemeUpdatingProps = props => "name" in props || "reset" in props || "forceClassName" in props;
+  name,
+  reset,
+  forceClassName,
+  componentName
+}) => `${name || ""}${reset || ""}${forceClassName || ""}${componentName || ""}`;
+const hasThemeUpdatingProps = props => "name" in props || "reset" in props || "forceClassName" in props;