@hairy/react-lib 1.6.2 → 1.7.1

package/dist/index.cjs

@@ -61,6 +61,10 @@ __export(index_exports, {
   Trans: () => Trans,
   Unless: () => Unless,
   cls: () => cls,
+  defineAsyncStore: () => defineAsyncStore,
+  defineAsyncStorePlain: () => defineAsyncStorePlain,
+  defineStore: () => defineStore,
+  proxyWithPersistant: () => proxyWithPersistant,
   useAsyncCallback: () => useAsyncCallback,
   useAsyncState: () => useAsyncState,
   useDebounce: () => useDebounce,
@@ -68,6 +72,7 @@ __export(index_exports, {
   useFetchRequestIntercept: () => useFetchRequestIntercept,
   useFetchResponseIntercept: () => useFetchResponseIntercept,
   useMounted: () => useMounted,
+  useStore: () => useStore,
   useWatch: () => useWatch,
   useWhenever: () => useWhenever
 });
@@ -370,18 +375,117 @@ function useWhenever(source, cb, options) {
   useWatch(source, () => source && cb(source), options);
 }
 
+// src/storage/defineStore.ts
+var import_valtio2 = require("valtio");
+
+// ../util-core/src/util/json.ts
+function jsonTryParse(text) {
+  try {
+    return JSON.parse(text || "");
+  } catch {
+    return void 0;
+  }
+}
+
+// src/storage/proxyWithPersistant.ts
+var import_valtio = require("valtio");
+function proxyWithPersistant(key, initialObject, options = {}) {
+  const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const state = (0, import_valtio.proxy)(jsonTryParse(storage?.getItem(key)) || initialObject);
+  (0, import_valtio.subscribe)(state, () => {
+    storage?.setItem(key, JSON.stringify(state));
+  });
+  return state;
+}
+
+// src/storage/defineStore.ts
+function defineStore(store, options = {}) {
+  const state = typeof store.state === "function" ? store.state() : store.state;
+  const actions = store.actions || {};
+  const $state = options.persistant ? proxyWithPersistant(options.persistant, state) : (0, import_valtio2.proxy)(state);
+  const $actions = {};
+  for (const key in actions)
+    $actions[key] = actions[key].bind($state);
+  function $subscribe(listener) {
+    return (0, import_valtio2.subscribe)($state, () => listener($state));
+  }
+  function $patch(patch) {
+    if (typeof patch === "function")
+      patch($state);
+    else
+      Object.assign($state, patch);
+  }
+  return {
+    $subscribe,
+    $patch,
+    $state,
+    $actions,
+    ...$actions
+  };
+}
+
+// src/storage/useStore.ts
+var import_valtio3 = require("valtio");
+function useStore(store) {
+  return (0, import_valtio3.useSnapshot)(store.$state);
+}
+
+// src/storage/defineAsyncStore.ts
+function defineAsyncStore(options) {
+  const store = defineStore(
+    {
+      state: () => ({
+        promise: void 0,
+        value: options.initial,
+        loading: false,
+        error: void 0
+      })
+    },
+    { persistant: options.persistant }
+  );
+  function use() {
+    const fn = options.setup();
+    const state = useStore(store);
+    function fetch(...args) {
+      if (state.loading)
+        return;
+      store.$state.loading = true;
+      store.$state.promise = fn(...args);
+      store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
+        store.$state.error = error;
+        throw error;
+      });
+      return store.$state.promise;
+    }
+    function refresh(value) {
+      store.$state.value = value;
+    }
+    return [state, fetch, refresh];
+  }
+  return use;
+}
+
+// src/storage/defineAsyncStorePlain.ts
+function defineAsyncStorePlain(fn, options) {
+  return defineAsyncStore({
+    setup: () => fn,
+    initial: options.initial,
+    persistant: options.persistant
+  });
+}
+
 // src/utils/index.ts
 var hasOwn = {}.hasOwnProperty;
 function cls(...args) {
   let classes = "";
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
     if (arg)
-      classes = appendClass(classes, parseValue(arg));
+      classes = cls.append(classes, cls.parse(arg));
   }
   return classes;
 }
-function parseValue(arg) {
+cls.parse = function(arg) {
   if (typeof arg === "string")
     return arg;
   if (typeof arg !== "object")
@@ -393,15 +497,15 @@ function parseValue(arg) {
   let classes = "";
   for (const key in arg) {
     if (hasOwn.call(arg, key) && arg[key])
-      classes = appendClass(classes, key);
+      classes = cls.append(classes, key);
   }
   return classes;
-}
-function appendClass(value, newClass) {
+};
+cls.append = function(value, newClass) {
   if (!newClass)
     return value;
   return value ? `${value} ${newClass}` : newClass;
-}
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Case,
@@ -414,6 +518,10 @@ function appendClass(value, newClass) {
   Trans,
   Unless,
   cls,
+  defineAsyncStore,
+  defineAsyncStorePlain,
+  defineStore,
+  proxyWithPersistant,
   useAsyncCallback,
   useAsyncState,
   useDebounce,
@@ -421,6 +529,7 @@ function appendClass(value, newClass) {
   useFetchRequestIntercept,
   useFetchResponseIntercept,
   useMounted,
+  useStore,
   useWatch,
   useWhenever
 });

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { BooleanLike } from '@hairy/utils';
 import * as react from 'react';
 import { ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, DependencyList, DetailedHTMLProps, HTMLAttributes } from 'react';
 import { FunctionReturningPromise as FunctionReturningPromise$1, PromiseType as PromiseType$1 } from './misc/types';
+import * as valtio from 'valtio';
 
 interface CaseProps {
     cond?: BooleanLike;
@@ -119,6 +120,60 @@ declare function useWatch<T>(source: T, callback: WatchCallback<T>, options?: Wa
 
 declare function useWhenever<T>(source: T, cb: WatchCallback<Exclude<T, null | undefined>>, options?: WatchOptions): void;
 
+interface AsyncStoreOptions<T extends FunctionReturningPromise> {
+    initial?: ReturnType<T> extends Promise<infer U> ? U : undefined;
+    setup: () => T;
+    persistant?: string;
+}
+declare function defineAsyncStore<T extends FunctionReturningPromise>(options: AsyncStoreOptions<T>): () => readonly [{
+    readonly promise: {
+        readonly then: <TResult1 = any, TResult2 = never>(onfulfilled?: ((value: any) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+        readonly catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<any>;
+        readonly finally: (onfinally?: (() => void) | null | undefined) => Promise<any>;
+        readonly [Symbol.toStringTag]: string;
+    } | undefined;
+    readonly value: valtio.Snapshot<ReturnType<T> extends Promise<infer U> ? U : undefined> | undefined;
+    readonly loading: boolean;
+    readonly error: Error | undefined;
+}, T, (value: (ReturnType<T> extends Promise<infer U_1> ? U_1 : undefined)) => void];
+
+interface AsyncStorePlainOptions<T extends FunctionReturningPromise> extends Omit<AsyncStoreOptions<T>, 'setup'> {
+}
+declare function defineAsyncStorePlain<T extends FunctionReturningPromise>(fn: T, options: AsyncStorePlainOptions<T>): () => readonly [{
+    readonly promise: {
+        readonly then: <TResult1 = any, TResult2 = never>(onfulfilled?: ((value: any) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined) => Promise<TResult1 | TResult2>;
+        readonly catch: <TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined) => Promise<any>;
+        readonly finally: (onfinally?: (() => void) | null | undefined) => Promise<any>;
+        readonly [Symbol.toStringTag]: string;
+    } | undefined;
+    readonly value: valtio.Snapshot<ReturnType<T> extends Promise<infer U> ? U : undefined> | undefined;
+    readonly loading: boolean;
+    readonly error: Error | undefined;
+}, T, (value: ReturnType<T> extends Promise<infer U_1> ? U_1 : undefined) => void];
+
+interface StoreDefine<S extends object, A extends Actions<S> = Record<string, any>> {
+    state: (() => S) | S;
+    actions?: A;
+}
+interface StoreOptions {
+    persistant?: string;
+}
+type Actions<S> = Record<string, (this: S) => void>;
+type Store<S, A> = A & {
+    $subscribe: (listener: (state: S) => void) => () => void;
+    $patch: (patch: Partial<S> | ((state: S) => void)) => void;
+    $state: S;
+    $actions: A;
+};
+declare function defineStore<S extends object, A extends Actions<S>>(store: StoreDefine<S, A>, options?: StoreOptions): Store<S, A>;
+
+interface PersistantOptions {
+    storage?: Storage;
+}
+declare function proxyWithPersistant<T extends object>(key: string, initialObject?: T, options?: PersistantOptions): T;
+
+declare function useStore<S extends object, A extends Actions<S>>(store: Store<S, A>): valtio.Snapshot<S>;
+
 type PropWithHtmlProps<T = HTMLDivElement> = DetailedHTMLProps<HTMLAttributes<T>, T>;
 
 type Value = string | boolean | undefined | null;
@@ -132,5 +187,9 @@ type Argument = Value | Mapping | ArgumentArray | ReadonlyArgumentArray;
  * A simple JavaScript utility for conditionally joining classNames together.
  */
 declare function cls(...args: ArgumentArray): string;
+declare namespace cls {
+    var parse: (arg: any) => string;
+    var append: (value: any, newClass: any) => any;
+}
 
-export { type Argument, type ArgumentArray, Case, type CaseProps, Default, Else, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PropWithHtmlProps, type ReadonlyArgumentArray, type StateFromFunctionReturningPromise, Switch, type SwitchProps, Then, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, cls, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useWatch, useWhenever };
+export { type Actions, type Argument, type ArgumentArray, type AsyncStoreOptions, type AsyncStorePlainOptions, Case, type CaseProps, Default, Else, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropWithHtmlProps, type ReadonlyArgumentArray, type StateFromFunctionReturningPromise, type Store, type StoreDefine, type StoreOptions, Switch, type SwitchProps, Then, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, cls, defineAsyncStore, defineAsyncStorePlain, defineStore, proxyWithPersistant, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStore, useWatch, useWhenever };

package/dist/index.global.js

@@ -104,6 +104,10 @@ var LibReact = (() => {
     Trans: () => Trans,
     Unless: () => Unless,
     cls: () => cls,
+    defineAsyncStore: () => defineAsyncStore,
+    defineAsyncStorePlain: () => defineAsyncStorePlain,
+    defineStore: () => defineStore,
+    proxyWithPersistant: () => proxyWithPersistant,
     useAsyncCallback: () => useAsyncCallback,
     useAsyncState: () => useAsyncState,
     useDebounce: () => useDebounce,
@@ -111,6 +115,7 @@ var LibReact = (() => {
     useFetchRequestIntercept: () => useFetchRequestIntercept,
     useFetchResponseIntercept: () => useFetchResponseIntercept,
     useMounted: () => useMounted,
+    useStore: () => useStore,
     useWatch: () => useWatch,
     useWhenever: () => useWhenever
   });
@@ -490,18 +495,605 @@ var LibReact = (() => {
     useWatch(source, () => source && cb(source), options);
   }
 
+  // ../../node_modules/.pnpm/proxy-compare@3.0.1/node_modules/proxy-compare/dist/index.js
+  var TRACK_MEMO_SYMBOL = Symbol();
+  var GET_ORIGINAL_SYMBOL = Symbol();
+  var AFFECTED_PROPERTY = "a";
+  var IS_TARGET_COPIED_PROPERTY = "f";
+  var PROXY_PROPERTY = "p";
+  var PROXY_CACHE_PROPERTY = "c";
+  var TARGET_CACHE_PROPERTY = "t";
+  var HAS_KEY_PROPERTY = "h";
+  var ALL_OWN_KEYS_PROPERTY = "w";
+  var HAS_OWN_KEY_PROPERTY = "o";
+  var KEYS_PROPERTY = "k";
+  var newProxy = (target, handler) => new Proxy(target, handler);
+  var getProto = Object.getPrototypeOf;
+  var objectsToTrack = /* @__PURE__ */ new WeakMap();
+  var isObjectToTrack = (obj) => obj && (objectsToTrack.has(obj) ? objectsToTrack.get(obj) : getProto(obj) === Object.prototype || getProto(obj) === Array.prototype);
+  var isObject = (x) => typeof x === "object" && x !== null;
+  var needsToCopyTargetObject = (obj) => Object.values(Object.getOwnPropertyDescriptors(obj)).some((descriptor) => !descriptor.configurable && !descriptor.writable);
+  var copyTargetObject = (obj) => {
+    if (Array.isArray(obj)) {
+      return Array.from(obj);
+    }
+    const descriptors = Object.getOwnPropertyDescriptors(obj);
+    Object.values(descriptors).forEach((desc) => {
+      desc.configurable = true;
+    });
+    return Object.create(getProto(obj), descriptors);
+  };
+  var createProxyHandler = (origObj, isTargetCopied) => {
+    const state = {
+      [IS_TARGET_COPIED_PROPERTY]: isTargetCopied
+    };
+    let trackObject = false;
+    const recordUsage = (type, key) => {
+      if (!trackObject) {
+        let used = state[AFFECTED_PROPERTY].get(origObj);
+        if (!used) {
+          used = {};
+          state[AFFECTED_PROPERTY].set(origObj, used);
+        }
+        if (type === ALL_OWN_KEYS_PROPERTY) {
+          used[ALL_OWN_KEYS_PROPERTY] = true;
+        } else {
+          let set = used[type];
+          if (!set) {
+            set = /* @__PURE__ */ new Set();
+            used[type] = set;
+          }
+          set.add(key);
+        }
+      }
+    };
+    const recordObjectAsUsed = () => {
+      trackObject = true;
+      state[AFFECTED_PROPERTY].delete(origObj);
+    };
+    const handler = {
+      get(target, key) {
+        if (key === GET_ORIGINAL_SYMBOL) {
+          return origObj;
+        }
+        recordUsage(KEYS_PROPERTY, key);
+        return createProxy(Reflect.get(target, key), state[AFFECTED_PROPERTY], state[PROXY_CACHE_PROPERTY], state[TARGET_CACHE_PROPERTY]);
+      },
+      has(target, key) {
+        if (key === TRACK_MEMO_SYMBOL) {
+          recordObjectAsUsed();
+          return true;
+        }
+        recordUsage(HAS_KEY_PROPERTY, key);
+        return Reflect.has(target, key);
+      },
+      getOwnPropertyDescriptor(target, key) {
+        recordUsage(HAS_OWN_KEY_PROPERTY, key);
+        return Reflect.getOwnPropertyDescriptor(target, key);
+      },
+      ownKeys(target) {
+        recordUsage(ALL_OWN_KEYS_PROPERTY);
+        return Reflect.ownKeys(target);
+      }
+    };
+    if (isTargetCopied) {
+      handler.set = handler.deleteProperty = () => false;
+    }
+    return [handler, state];
+  };
+  var getOriginalObject = (obj) => (
+    // unwrap proxy
+    obj[GET_ORIGINAL_SYMBOL] || // otherwise
+    obj
+  );
+  var createProxy = (obj, affected, proxyCache2, targetCache2) => {
+    if (!isObjectToTrack(obj))
+      return obj;
+    let targetAndCopied = targetCache2 && targetCache2.get(obj);
+    if (!targetAndCopied) {
+      const target2 = getOriginalObject(obj);
+      if (needsToCopyTargetObject(target2)) {
+        targetAndCopied = [target2, copyTargetObject(target2)];
+      } else {
+        targetAndCopied = [target2];
+      }
+      targetCache2 === null || targetCache2 === void 0 ? void 0 : targetCache2.set(obj, targetAndCopied);
+    }
+    const [target, copiedTarget] = targetAndCopied;
+    let handlerAndState = proxyCache2 && proxyCache2.get(target);
+    if (!handlerAndState || handlerAndState[1][IS_TARGET_COPIED_PROPERTY] !== !!copiedTarget) {
+      handlerAndState = createProxyHandler(target, !!copiedTarget);
+      handlerAndState[1][PROXY_PROPERTY] = newProxy(copiedTarget || target, handlerAndState[0]);
+      if (proxyCache2) {
+        proxyCache2.set(target, handlerAndState);
+      }
+    }
+    handlerAndState[1][AFFECTED_PROPERTY] = affected;
+    handlerAndState[1][PROXY_CACHE_PROPERTY] = proxyCache2;
+    handlerAndState[1][TARGET_CACHE_PROPERTY] = targetCache2;
+    return handlerAndState[1][PROXY_PROPERTY];
+  };
+  var isAllOwnKeysChanged = (prevObj, nextObj) => {
+    const prevKeys = Reflect.ownKeys(prevObj);
+    const nextKeys = Reflect.ownKeys(nextObj);
+    return prevKeys.length !== nextKeys.length || prevKeys.some((k, i2) => k !== nextKeys[i2]);
+  };
+  var isChanged = (prevObj, nextObj, affected, cache, isEqual = Object.is) => {
+    if (isEqual(prevObj, nextObj)) {
+      return false;
+    }
+    if (!isObject(prevObj) || !isObject(nextObj))
+      return true;
+    const used = affected.get(getOriginalObject(prevObj));
+    if (!used)
+      return true;
+    if (cache) {
+      const hit = cache.get(prevObj);
+      if (hit === nextObj) {
+        return false;
+      }
+      cache.set(prevObj, nextObj);
+    }
+    let changed = null;
+    for (const key of used[HAS_KEY_PROPERTY] || []) {
+      changed = Reflect.has(prevObj, key) !== Reflect.has(nextObj, key);
+      if (changed)
+        return changed;
+    }
+    if (used[ALL_OWN_KEYS_PROPERTY] === true) {
+      changed = isAllOwnKeysChanged(prevObj, nextObj);
+      if (changed)
+        return changed;
+    } else {
+      for (const key of used[HAS_OWN_KEY_PROPERTY] || []) {
+        const hasPrev = !!Reflect.getOwnPropertyDescriptor(prevObj, key);
+        const hasNext = !!Reflect.getOwnPropertyDescriptor(nextObj, key);
+        changed = hasPrev !== hasNext;
+        if (changed)
+          return changed;
+      }
+    }
+    for (const key of used[KEYS_PROPERTY] || []) {
+      changed = isChanged(prevObj[key], nextObj[key], affected, cache, isEqual);
+      if (changed)
+        return changed;
+    }
+    if (changed === null)
+      throw new Error("invalid used");
+    return changed;
+  };
+  var getUntracked = (obj) => {
+    if (isObjectToTrack(obj)) {
+      return obj[GET_ORIGINAL_SYMBOL] || null;
+    }
+    return null;
+  };
+  var markToTrack = (obj, mark = true) => {
+    objectsToTrack.set(obj, mark);
+  };
+  var affectedToPathList = (obj, affected, onlyWithValues) => {
+    const list = [];
+    const seen = /* @__PURE__ */ new WeakSet();
+    const walk = (x, path) => {
+      var _a, _b, _c;
+      if (seen.has(x)) {
+        return;
+      }
+      if (isObject(x)) {
+        seen.add(x);
+      }
+      const used = isObject(x) && affected.get(getOriginalObject(x));
+      if (used) {
+        (_a = used[HAS_KEY_PROPERTY]) === null || _a === void 0 ? void 0 : _a.forEach((key) => {
+          const segment = `:has(${String(key)})`;
+          list.push(path ? [...path, segment] : [segment]);
+        });
+        if (used[ALL_OWN_KEYS_PROPERTY] === true) {
+          const segment = ":ownKeys";
+          list.push(path ? [...path, segment] : [segment]);
+        } else {
+          (_b = used[HAS_OWN_KEY_PROPERTY]) === null || _b === void 0 ? void 0 : _b.forEach((key) => {
+            const segment = `:hasOwn(${String(key)})`;
+            list.push(path ? [...path, segment] : [segment]);
+          });
+        }
+        (_c = used[KEYS_PROPERTY]) === null || _c === void 0 ? void 0 : _c.forEach((key) => {
+          if (!onlyWithValues || "value" in (Object.getOwnPropertyDescriptor(x, key) || {})) {
+            walk(x[key], path ? [...path, key] : [key]);
+          }
+        });
+      } else if (path) {
+        list.push(path);
+      }
+    };
+    walk(obj);
+    return list;
+  };
+
+  // ../../node_modules/.pnpm/valtio@2.1.4_@types+react@18.3.18_react@18.3.1/node_modules/valtio/esm/vanilla.mjs
+  var import_meta = {};
+  var isObject2 = (x) => typeof x === "object" && x !== null;
+  var canProxyDefault = (x) => isObject2(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer) && !(x instanceof Promise);
+  var createSnapshotDefault = (target, version) => {
+    const cache = snapCache.get(target);
+    if ((cache == null ? void 0 : cache[0]) === version) {
+      return cache[1];
+    }
+    const snap = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
+    markToTrack(snap, true);
+    snapCache.set(target, [version, snap]);
+    Reflect.ownKeys(target).forEach((key) => {
+      if (Object.getOwnPropertyDescriptor(snap, key)) {
+        return;
+      }
+      const value = Reflect.get(target, key);
+      const { enumerable } = Reflect.getOwnPropertyDescriptor(
+        target,
+        key
+      );
+      const desc = {
+        value,
+        enumerable,
+        // This is intentional to avoid copying with proxy-compare.
+        // It's still non-writable, so it avoids assigning a value.
+        configurable: true
+      };
+      if (refSet.has(value)) {
+        markToTrack(value, false);
+      } else if (proxyStateMap.has(value)) {
+        const [target2, ensureVersion] = proxyStateMap.get(
+          value
+        );
+        desc.value = createSnapshotDefault(target2, ensureVersion());
+      }
+      Object.defineProperty(snap, key, desc);
+    });
+    return Object.preventExtensions(snap);
+  };
+  var createHandlerDefault = (isInitializing, addPropListener, removePropListener, notifyUpdate) => ({
+    deleteProperty(target, prop) {
+      const prevValue = Reflect.get(target, prop);
+      removePropListener(prop);
+      const deleted = Reflect.deleteProperty(target, prop);
+      if (deleted) {
+        notifyUpdate(["delete", [prop], prevValue]);
+      }
+      return deleted;
+    },
+    set(target, prop, value, receiver) {
+      const hasPrevValue = !isInitializing() && Reflect.has(target, prop);
+      const prevValue = Reflect.get(target, prop, receiver);
+      if (hasPrevValue && (objectIs(prevValue, value) || proxyCache.has(value) && objectIs(prevValue, proxyCache.get(value)))) {
+        return true;
+      }
+      removePropListener(prop);
+      if (isObject2(value)) {
+        value = getUntracked(value) || value;
+      }
+      const nextValue = !proxyStateMap.has(value) && canProxy(value) ? proxy(value) : value;
+      addPropListener(prop, nextValue);
+      Reflect.set(target, prop, nextValue, receiver);
+      notifyUpdate(["set", [prop], value, prevValue]);
+      return true;
+    }
+  });
+  var proxyStateMap = /* @__PURE__ */ new WeakMap();
+  var refSet = /* @__PURE__ */ new WeakSet();
+  var snapCache = /* @__PURE__ */ new WeakMap();
+  var versionHolder = [1, 1];
+  var proxyCache = /* @__PURE__ */ new WeakMap();
+  var objectIs = Object.is;
+  var newProxy2 = (target, handler) => new Proxy(target, handler);
+  var canProxy = canProxyDefault;
+  var createSnapshot = createSnapshotDefault;
+  var createHandler = createHandlerDefault;
+  function proxy(baseObject = {}) {
+    if (!isObject2(baseObject)) {
+      throw new Error("object required");
+    }
+    const found = proxyCache.get(baseObject);
+    if (found) {
+      return found;
+    }
+    let version = versionHolder[0];
+    const listeners = /* @__PURE__ */ new Set();
+    const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
+      if (version !== nextVersion) {
+        version = nextVersion;
+        listeners.forEach((listener) => listener(op, nextVersion));
+      }
+    };
+    let checkVersion = versionHolder[1];
+    const ensureVersion = (nextCheckVersion = ++versionHolder[1]) => {
+      if (checkVersion !== nextCheckVersion && !listeners.size) {
+        checkVersion = nextCheckVersion;
+        propProxyStates.forEach(([propProxyState]) => {
+          const propVersion = propProxyState[1](nextCheckVersion);
+          if (propVersion > version) {
+            version = propVersion;
+          }
+        });
+      }
+      return version;
+    };
+    const createPropListener = (prop) => (op, nextVersion) => {
+      const newOp = [...op];
+      newOp[1] = [prop, ...newOp[1]];
+      notifyUpdate(newOp, nextVersion);
+    };
+    const propProxyStates = /* @__PURE__ */ new Map();
+    const addPropListener = (prop, propValue) => {
+      const propProxyState = !refSet.has(propValue) && proxyStateMap.get(propValue);
+      if (propProxyState) {
+        if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && propProxyStates.has(prop)) {
+          throw new Error("prop listener already exists");
+        }
+        if (listeners.size) {
+          const remove = propProxyState[2](createPropListener(prop));
+          propProxyStates.set(prop, [propProxyState, remove]);
+        } else {
+          propProxyStates.set(prop, [propProxyState]);
+        }
+      }
+    };
+    const removePropListener = (prop) => {
+      var _a;
+      const entry = propProxyStates.get(prop);
+      if (entry) {
+        propProxyStates.delete(prop);
+        (_a = entry[1]) == null ? void 0 : _a.call(entry);
+      }
+    };
+    const addListener = (listener) => {
+      listeners.add(listener);
+      if (listeners.size === 1) {
+        propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
+          if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && prevRemove) {
+            throw new Error("remove already exists");
+          }
+          const remove = propProxyState[2](createPropListener(prop));
+          propProxyStates.set(prop, [propProxyState, remove]);
+        });
+      }
+      const removeListener = () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          propProxyStates.forEach(([propProxyState, remove], prop) => {
+            if (remove) {
+              remove();
+              propProxyStates.set(prop, [propProxyState]);
+            }
+          });
+        }
+      };
+      return removeListener;
+    };
+    let initializing = true;
+    const handler = createHandler(
+      () => initializing,
+      addPropListener,
+      removePropListener,
+      notifyUpdate
+    );
+    const proxyObject = newProxy2(baseObject, handler);
+    proxyCache.set(baseObject, proxyObject);
+    const proxyState = [baseObject, ensureVersion, addListener];
+    proxyStateMap.set(proxyObject, proxyState);
+    Reflect.ownKeys(baseObject).forEach((key) => {
+      const desc = Object.getOwnPropertyDescriptor(
+        baseObject,
+        key
+      );
+      if ("value" in desc && desc.writable) {
+        proxyObject[key] = baseObject[key];
+      }
+    });
+    initializing = false;
+    return proxyObject;
+  }
+  function subscribe(proxyObject, callback, notifyInSync) {
+    const proxyState = proxyStateMap.get(proxyObject);
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && !proxyState) {
+      console.warn("Please use proxy object");
+    }
+    let promise;
+    const ops = [];
+    const addListener = proxyState[2];
+    let isListenerActive = false;
+    const listener = (op) => {
+      ops.push(op);
+      if (notifyInSync) {
+        callback(ops.splice(0));
+        return;
+      }
+      if (!promise) {
+        promise = Promise.resolve().then(() => {
+          promise = void 0;
+          if (isListenerActive) {
+            callback(ops.splice(0));
+          }
+        });
+      }
+    };
+    const removeListener = addListener(listener);
+    isListenerActive = true;
+    return () => {
+      isListenerActive = false;
+      removeListener();
+    };
+  }
+  function snapshot(proxyObject) {
+    const proxyState = proxyStateMap.get(proxyObject);
+    if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && !proxyState) {
+      console.warn("Please use proxy object");
+    }
+    const [target, ensureVersion] = proxyState;
+    return createSnapshot(target, ensureVersion());
+  }
+
+  // ../../node_modules/.pnpm/valtio@2.1.4_@types+react@18.3.18_react@18.3.1/node_modules/valtio/esm/react.mjs
+  var import_react14 = __toESM(require_react(), 1);
+  var import_meta2 = {};
+  var useAffectedDebugValue = (state, affected) => {
+    const pathList = (0, import_react14.useRef)(void 0);
+    (0, import_react14.useEffect)(() => {
+      pathList.current = affectedToPathList(state, affected, true);
+    });
+    (0, import_react14.useDebugValue)(pathList.current);
+  };
+  var condUseAffectedDebugValue = useAffectedDebugValue;
+  var targetCache = /* @__PURE__ */ new WeakMap();
+  function useSnapshot(proxyObject, options) {
+    const notifyInSync = options == null ? void 0 : options.sync;
+    const affected = (0, import_react14.useMemo)(
+      () => proxyObject && /* @__PURE__ */ new WeakMap(),
+      [proxyObject]
+    );
+    const lastSnapshot = (0, import_react14.useRef)(void 0);
+    let inRender = true;
+    const currSnapshot = (0, import_react14.useSyncExternalStore)(
+      (0, import_react14.useCallback)(
+        (callback) => {
+          const unsub = subscribe(proxyObject, callback, notifyInSync);
+          callback();
+          return unsub;
+        },
+        [proxyObject, notifyInSync]
+      ),
+      () => {
+        const nextSnapshot = snapshot(proxyObject);
+        try {
+          if (!inRender && lastSnapshot.current && !isChanged(
+            lastSnapshot.current,
+            nextSnapshot,
+            affected,
+            /* @__PURE__ */ new WeakMap()
+          )) {
+            return lastSnapshot.current;
+          }
+        } catch (e2) {
+        }
+        return nextSnapshot;
+      },
+      () => snapshot(proxyObject)
+    );
+    inRender = false;
+    (0, import_react14.useLayoutEffect)(() => {
+      lastSnapshot.current = currSnapshot;
+    });
+    if ((import_meta2.env ? import_meta2.env.MODE : void 0) !== "production") {
+      condUseAffectedDebugValue(currSnapshot, affected);
+    }
+    const proxyCache2 = (0, import_react14.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
+    return createProxy(currSnapshot, affected, proxyCache2, targetCache);
+  }
+
+  // ../util-core/src/util/json.ts
+  function jsonTryParse(text) {
+    try {
+      return JSON.parse(text || "");
+    } catch {
+      return void 0;
+    }
+  }
+
+  // src/storage/proxyWithPersistant.ts
+  function proxyWithPersistant(key, initialObject, options = {}) {
+    const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+    const state = proxy(jsonTryParse(storage?.getItem(key)) || initialObject);
+    subscribe(state, () => {
+      storage?.setItem(key, JSON.stringify(state));
+    });
+    return state;
+  }
+
+  // src/storage/defineStore.ts
+  function defineStore(store, options = {}) {
+    const state = typeof store.state === "function" ? store.state() : store.state;
+    const actions = store.actions || {};
+    const $state = options.persistant ? proxyWithPersistant(options.persistant, state) : proxy(state);
+    const $actions = {};
+    for (const key in actions)
+      $actions[key] = actions[key].bind($state);
+    function $subscribe(listener) {
+      return subscribe($state, () => listener($state));
+    }
+    function $patch(patch) {
+      if (typeof patch === "function")
+        patch($state);
+      else
+        Object.assign($state, patch);
+    }
+    return {
+      $subscribe,
+      $patch,
+      $state,
+      $actions,
+      ...$actions
+    };
+  }
+
+  // src/storage/useStore.ts
+  function useStore(store) {
+    return useSnapshot(store.$state);
+  }
+
+  // src/storage/defineAsyncStore.ts
+  function defineAsyncStore(options) {
+    const store = defineStore(
+      {
+        state: () => ({
+          promise: void 0,
+          value: options.initial,
+          loading: false,
+          error: void 0
+        })
+      },
+      { persistant: options.persistant }
+    );
+    function use() {
+      const fn = options.setup();
+      const state = useStore(store);
+      function fetch(...args) {
+        if (state.loading)
+          return;
+        store.$state.loading = true;
+        store.$state.promise = fn(...args);
+        store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
+          store.$state.error = error;
+          throw error;
+        });
+        return store.$state.promise;
+      }
+      function refresh(value) {
+        store.$state.value = value;
+      }
+      return [state, fetch, refresh];
+    }
+    return use;
+  }
+
+  // src/storage/defineAsyncStorePlain.ts
+  function defineAsyncStorePlain(fn, options) {
+    return defineAsyncStore({
+      setup: () => fn,
+      initial: options.initial,
+      persistant: options.persistant
+    });
+  }
+
   // src/utils/index.ts
   var hasOwn = {}.hasOwnProperty;
   function cls(...args) {
     let classes = "";
-    for (let i2 = 0; i2 < arguments.length; i2++) {
-      const arg = arguments[i2];
+    for (let i2 = 0; i2 < args.length; i2++) {
+      const arg = args[i2];
       if (arg)
-        classes = appendClass(classes, parseValue(arg));
+        classes = cls.append(classes, cls.parse(arg));
     }
     return classes;
   }
-  function parseValue(arg) {
+  cls.parse = function(arg) {
     if (typeof arg === "string")
       return arg;
     if (typeof arg !== "object")
@@ -513,14 +1105,14 @@ var LibReact = (() => {
     let classes = "";
     for (const key in arg) {
       if (hasOwn.call(arg, key) && arg[key])
-        classes = appendClass(classes, key);
+        classes = cls.append(classes, key);
     }
     return classes;
-  }
-  function appendClass(value, newClass) {
+  };
+  cls.append = function(value, newClass) {
     if (!newClass)
       return value;
     return value ? `${value} ${newClass}` : newClass;
-  }
+  };
   return __toCommonJS(index_exports);
 })();

package/dist/index.js

@@ -318,18 +318,117 @@ function useWhenever(source, cb, options) {
   useWatch(source, () => source && cb(source), options);
 }
 
+// src/storage/defineStore.ts
+import { proxy as proxy2, subscribe as subscribe2 } from "valtio";
+
+// ../util-core/src/util/json.ts
+function jsonTryParse(text) {
+  try {
+    return JSON.parse(text || "");
+  } catch {
+    return void 0;
+  }
+}
+
+// src/storage/proxyWithPersistant.ts
+import { proxy, subscribe } from "valtio";
+function proxyWithPersistant(key, initialObject, options = {}) {
+  const storage = options.storage || (typeof localStorage !== "undefined" ? localStorage : void 0);
+  const state = proxy(jsonTryParse(storage?.getItem(key)) || initialObject);
+  subscribe(state, () => {
+    storage?.setItem(key, JSON.stringify(state));
+  });
+  return state;
+}
+
+// src/storage/defineStore.ts
+function defineStore(store, options = {}) {
+  const state = typeof store.state === "function" ? store.state() : store.state;
+  const actions = store.actions || {};
+  const $state = options.persistant ? proxyWithPersistant(options.persistant, state) : proxy2(state);
+  const $actions = {};
+  for (const key in actions)
+    $actions[key] = actions[key].bind($state);
+  function $subscribe(listener) {
+    return subscribe2($state, () => listener($state));
+  }
+  function $patch(patch) {
+    if (typeof patch === "function")
+      patch($state);
+    else
+      Object.assign($state, patch);
+  }
+  return {
+    $subscribe,
+    $patch,
+    $state,
+    $actions,
+    ...$actions
+  };
+}
+
+// src/storage/useStore.ts
+import { useSnapshot } from "valtio";
+function useStore(store) {
+  return useSnapshot(store.$state);
+}
+
+// src/storage/defineAsyncStore.ts
+function defineAsyncStore(options) {
+  const store = defineStore(
+    {
+      state: () => ({
+        promise: void 0,
+        value: options.initial,
+        loading: false,
+        error: void 0
+      })
+    },
+    { persistant: options.persistant }
+  );
+  function use() {
+    const fn = options.setup();
+    const state = useStore(store);
+    function fetch(...args) {
+      if (state.loading)
+        return;
+      store.$state.loading = true;
+      store.$state.promise = fn(...args);
+      store.$state.promise.then((value) => store.$state.value = value).finally(() => store.$state.loading = false).catch((error) => {
+        store.$state.error = error;
+        throw error;
+      });
+      return store.$state.promise;
+    }
+    function refresh(value) {
+      store.$state.value = value;
+    }
+    return [state, fetch, refresh];
+  }
+  return use;
+}
+
+// src/storage/defineAsyncStorePlain.ts
+function defineAsyncStorePlain(fn, options) {
+  return defineAsyncStore({
+    setup: () => fn,
+    initial: options.initial,
+    persistant: options.persistant
+  });
+}
+
 // src/utils/index.ts
 var hasOwn = {}.hasOwnProperty;
 function cls(...args) {
   let classes = "";
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
     if (arg)
-      classes = appendClass(classes, parseValue(arg));
+      classes = cls.append(classes, cls.parse(arg));
   }
   return classes;
 }
-function parseValue(arg) {
+cls.parse = function(arg) {
   if (typeof arg === "string")
     return arg;
   if (typeof arg !== "object")
@@ -341,15 +440,15 @@ function parseValue(arg) {
   let classes = "";
   for (const key in arg) {
     if (hasOwn.call(arg, key) && arg[key])
-      classes = appendClass(classes, key);
+      classes = cls.append(classes, key);
   }
   return classes;
-}
-function appendClass(value, newClass) {
+};
+cls.append = function(value, newClass) {
   if (!newClass)
     return value;
   return value ? `${value} ${newClass}` : newClass;
-}
+};
 export {
   Case,
   Default,
@@ -361,6 +460,10 @@ export {
   Trans,
   Unless,
   cls,
+  defineAsyncStore,
+  defineAsyncStorePlain,
+  defineStore,
+  proxyWithPersistant,
   useAsyncCallback,
   useAsyncState,
   useDebounce,
@@ -368,6 +471,7 @@ export {
   useFetchRequestIntercept,
   useFetchResponseIntercept,
   useMounted,
+  useStore,
   useWatch,
   useWhenever
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -28,17 +28,17 @@
   },
   "dependencies": {
     "html-parse-stringify": "^3.0.1",
-    "mitt": "^3.0.1"
+    "mitt": "^3.0.1",
+    "valtio": "^2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.7",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.6.2"
+    "@hairy/utils": "1.7.1"
   },
   "scripts": {
     "build": "tsup",