@hanzogui/web 2.0.0-rc.41-hanzoai.5

package/dist/cjs/hooks/useThemeState.cjs

@@ -0,0 +1,336 @@
+var __defProp = Object.defineProperty;
+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: 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;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useThemeState_exports = {};
+__export(useThemeState_exports, {
+  ThemeStateContext: () => ThemeStateContext,
+  forceUpdateThemes: () => forceUpdateThemes,
+  getRootThemeState: () => getRootThemeState,
+  getThemeState: () => getThemeState,
+  hasThemeUpdatingProps: () => hasThemeUpdatingProps,
+  useThemeState: () => useThemeState
+});
+module.exports = __toCommonJS(useThemeState_exports);
+require("@hanzogui/constants");
+var import_constants2 = require("@hanzogui/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 = 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 = 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
+  };
+  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);
+    };
+  }, [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
+      };
+      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,
+        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 (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: false
+    }];
+  }
+  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);
+    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();
+  }
+  if (shouldAvoidRerender) return [false, nextState];
+  return [true, nextState];
+};
+function scheduleUpdate(id) {
+  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)?.();
+  });
+}
+const validSchemes = {
+  light: "light",
+  dark: "dark"
+};
+function getScheme(name) {
+  return validSchemes[name.split("_")[0]];
+}
+function getNewThemeName(parentName = "", props, forceUpdate = false) {
+  const {
+    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") {
+      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("_");
+  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) {
+    const nameHasScheme = getScheme(name);
+    if (nameHasScheme) {
+      for (const subName of subNames) if (subName in themes2) {
+        found = subName;
+        break;
+      }
+    }
+    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}`;
+    if (potential in themes2) found = potential;
+  } else {
+    const max = parentParts.length;
+    for (let i = 0; i <= max; i++) {
+      const base = (i === 0 ? parentParts : parentParts.slice(0, -i)).join("_");
+      for (const subName of subNames) {
+        const potential = base ? `${base}_${subName}` : subName;
+        if (potential in themes2) {
+          found = potential;
+          break;
+        }
+      }
+      if (found) break;
+    }
+  }
+  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 || ""}`;
+const hasThemeUpdatingProps = props => "name" in props || "reset" in props || "forceClassName" in props;