@hairy/react-lib 1.21.0 → 1.23.0

package/dist/index.cjs

@@ -43,6 +43,7 @@ __export(index_exports, {
   defineAsyncStore: () => defineAsyncStore,
   defineStore: () => defineStore,
   proxyWithPersistant: () => proxyWithPersistant,
+  ref: () => ref,
   useAsyncCallback: () => useAsyncCallback,
   useAsyncState: () => useAsyncState,
   useDebounce: () => useDebounce,
@@ -202,11 +203,28 @@ function renderNodes(tokens, values) {
   });
 }
 
-// src/hooks/useAsyncCallback.ts
+// src/hooks/ref.ts
 var import_react7 = require("react");
+function ref(value) {
+  function define(value2) {
+    if (typeof value2 === "function")
+      return (prev) => define(value2(prev.value));
+    return Object.defineProperty({}, "value", {
+      set: (action) => set(define(action)),
+      get: () => value2,
+      enumerable: true
+    });
+  }
+  const [ref2, set] = (0, import_react7.useState)(define(value));
+  return ref2;
+}
+
+// src/hooks/useAsyncCallback.ts
+var import_react8 = require("react");
 function useAsyncCallback(fun) {
-  const [state, set] = (0, import_react7.useState)({ loading: false });
+  const [state, set] = (0, import_react8.useState)({ loading: false });
   async function execute(...args) {
+    set({ loading: true });
     return fun(...args).then((value) => {
       set({ loading: false });
       return value;
@@ -220,30 +238,15 @@ function useAsyncCallback(fun) {
 
 // src/hooks/useAsyncState.ts
 var import_react9 = require("react");
-
-// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-var import_react8 = require("react");
-var useEffectOnce = function(effect) {
-  (0, import_react8.useEffect)(effect, []);
-};
-var useEffectOnce_default = useEffectOnce;
-
-// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
-var useMount = function(fn) {
-  useEffectOnce_default(function() {
-    fn();
-  });
-};
-var useMount_default = useMount;
-
-// src/hooks/useAsyncState.ts
-function useAsyncState(fun, options) {
+function useAsyncState(fun, deps = [], options) {
   const [value, set] = (0, import_react9.useState)(options?.initial);
   const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
-  useMount_default(() => options?.immediate && execute());
-  (0, import_react9.useEffect)(() => {
-    execute();
-  }, [execute]);
+  (0, import_react9.useEffect)(
+    () => {
+      execute();
+    },
+    deps
+  );
   return [{ value, loading, error }, execute];
 }
 
@@ -289,6 +292,21 @@ function useEventBus(key) {
   };
 }
 
+// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
+var import_react12 = require("react");
+var useEffectOnce = function(effect) {
+  (0, import_react12.useEffect)(effect, []);
+};
+var useEffectOnce_default = useEffectOnce;
+
+// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
+var useMount = function(fn) {
+  useEffectOnce_default(function() {
+    fn();
+  });
+};
+var useMount_default = useMount;
+
 // src/hooks/useFetchIntercept.ts
 function useFetchResponseIntercept(intercept) {
   useMount_default(() => fetchResponseIntercept(intercept));
@@ -313,23 +331,23 @@ function fetchRequestIntercept(intercept) {
 }
 
 // src/hooks/useMounted.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => setMounted(true), []);
+  const [mounted, setMounted] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => setMounted(true), []);
   return mounted;
 }
 
 // src/hooks/useWatch.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useWatch(source, callback, options = {}) {
-  const firstUpdate = (0, import_react13.useRef)(false);
-  const then = (0, import_react13.useRef)();
-  const deps = (0, import_react13.useMemo)(
+  const firstUpdate = (0, import_react14.useRef)(false);
+  const then = (0, import_react14.useRef)();
+  const deps = (0, import_react14.useMemo)(
     () => Array.isArray(source) ? source : [source],
     [source]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!firstUpdate.current)
       recordFirst();
     else
@@ -354,7 +372,7 @@ function useWhenever(source, cb, options) {
 var import_utils8 = require("valtio/utils");
 
 // src/storage/defineStore.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_valtio2 = require("valtio");
 
 // ../util-core/src/util/json.ts
@@ -417,10 +435,10 @@ function defineStore(store, options = {}) {
       Object.assign($state, patch);
   }
   function $signal(fn) {
-    return (0, import_react14.createElement)(() => fn((0, import_valtio2.useSnapshot)($state)));
+    return (0, import_react15.createElement)(() => fn((0, import_valtio2.useSnapshot)($state)));
   }
   $signal.status = function(fn) {
-    return (0, import_react14.createElement)(() => fn((0, import_valtio2.useSnapshot)($status)));
+    return (0, import_react15.createElement)(() => fn((0, import_valtio2.useSnapshot)($status)));
   };
   return {
     $subscribe,
@@ -547,6 +565,7 @@ function useStore(store) {
   defineAsyncStore,
   defineStore,
   proxyWithPersistant,
+  ref,
   useAsyncCallback,
   useAsyncState,
   useDebounce,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { BooleanLike, PromiseFn, PromiseType, AnyFn } from '@hairy/utils';
 import * as react from 'react';
-import { JSX, ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { JSX, ReactNode, PropsWithChildren, ReactElement, FC, ComponentClass, SetStateAction, DetailedHTMLProps, HTMLAttributes } from 'react';
 import * as valtio from 'valtio';
 
 type Value = string | boolean | undefined | null;
@@ -79,6 +79,26 @@ interface TransProps {
 }
 declare function Trans({ i18nKey, ...additionalProps }: TransProps): ReactNode[];
 
+interface Ref<S> {
+    set value(action: SetStateAction<S>);
+    get value(): S;
+}
+/**
+ * This is a toy, do not use it in a production environment to avoid causing problems
+ *
+ * Similar to vue's ref function, used to create a responsive reference object
+ *
+ * @example
+ * const count = ref(0)
+ * count.value++
+ * console.log(count.value) // 1
+ * // or
+ * count.value = prev => prev + 1
+ * @param value
+ */
+declare function ref<T>(value: T): Ref<T>;
+declare function ref<T>(value?: T): Ref<T | undefined>;
+
 declare function useAsyncCallback<T extends PromiseFn>(fun: T): readonly [boolean, T, Error | undefined];
 
 type AsyncState<T> = {
@@ -107,11 +127,13 @@ declare type AsyncStateReturn<T extends PromiseFn = PromiseFn> = [
 type UseAsyncStateOptions<T extends AnyFn> = {
     immediate?: boolean;
     initial?: PromiseType<ReturnType<T>>;
+    deps?: any[];
 } | {
     immediate?: boolean;
     initial: PromiseType<ReturnType<T>>;
+    deps?: any[];
 };
-declare function useAsyncState<T extends PromiseFn>(fun: T, options?: UseAsyncStateOptions<T>): AsyncStateReturn<T>;
+declare function useAsyncState<T extends PromiseFn>(fun: T, deps?: any[], options?: UseAsyncStateOptions<T>): AsyncStateReturn<T>;
 
 declare function useDebounce<T>(value: T, delay: number): T;
 
@@ -236,4 +258,4 @@ declare function useStore<S extends object, A extends Actions<S>, G extends Gett
 
 type PropsWithDetailedHTML<T = HTMLDivElement> = DetailedHTMLProps<HTMLAttributes<T>, T>;
 
-export { type Argument, type ArgumentArray, type AsyncStoreOptions, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, Switch, type SwitchProps, Then, type ThenProps, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, type WrapperProps, type WrapperTag, cls, defineAsyncStore, defineStore, proxyWithPersistant, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useWatch, useWhenever, wrapper };
+export { type Argument, type ArgumentArray, type AsyncStoreOptions, Case, type CaseProps, Default, type DefaultProps, Else, type ElseProps, type EventBusListener, type FetchRequestInterceptCallback, type FetchResponseInterceptCallback, If, type IfProps, type InjectComponent, Injector, type InjectorProps, type Mapping, type PersistantOptions, type PropsWithDetailedHTML, type ReadonlyArgumentArray, type Ref, Switch, type SwitchProps, Then, type ThenProps, Trans, type TransProps, Unless, type UnlessProps, type UseAsyncStateOptions, type Value, type WatchCallback, type WatchOptions, type WrapperProps, type WrapperTag, cls, defineAsyncStore, defineStore, proxyWithPersistant, ref, useAsyncCallback, useAsyncState, useDebounce, useEventBus, useFetchRequestIntercept, useFetchResponseIntercept, useMounted, useStatus, useStore, useWatch, useWhenever, wrapper };

package/dist/index.global.js

@@ -86,6 +86,7 @@ var LibReact = (() => {
     defineAsyncStore: () => defineAsyncStore,
     defineStore: () => defineStore,
     proxyWithPersistant: () => proxyWithPersistant,
+    ref: () => ref,
     useAsyncCallback: () => useAsyncCallback,
     useAsyncState: () => useAsyncState,
     useDebounce: () => useDebounce,
@@ -305,11 +306,28 @@ var LibReact = (() => {
     });
   }
 
-  // src/hooks/useAsyncCallback.ts
+  // src/hooks/ref.ts
   var import_react7 = __toESM(require_react(), 1);
+  function ref(value) {
+    function define(value2) {
+      if (typeof value2 === "function")
+        return (prev) => define(value2(prev.value));
+      return Object.defineProperty({}, "value", {
+        set: (action) => set(define(action)),
+        get: () => value2,
+        enumerable: true
+      });
+    }
+    const [ref2, set] = (0, import_react7.useState)(define(value));
+    return ref2;
+  }
+
+  // src/hooks/useAsyncCallback.ts
+  var import_react8 = __toESM(require_react(), 1);
   function useAsyncCallback(fun) {
-    const [state, set] = (0, import_react7.useState)({ loading: false });
+    const [state, set] = (0, import_react8.useState)({ loading: false });
     async function execute(...args) {
+      set({ loading: true });
       return fun(...args).then((value) => {
         set({ loading: false });
         return value;
@@ -323,30 +341,15 @@ var LibReact = (() => {
 
   // src/hooks/useAsyncState.ts
   var import_react9 = __toESM(require_react(), 1);
-
-  // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-  var import_react8 = __toESM(require_react());
-  var useEffectOnce = function(effect) {
-    (0, import_react8.useEffect)(effect, []);
-  };
-  var useEffectOnce_default = useEffectOnce;
-
-  // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
-  var useMount = function(fn) {
-    useEffectOnce_default(function() {
-      fn();
-    });
-  };
-  var useMount_default = useMount;
-
-  // src/hooks/useAsyncState.ts
-  function useAsyncState(fun, options) {
+  function useAsyncState(fun, deps = [], options) {
     const [value, set] = (0, import_react9.useState)(options?.initial);
     const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
-    useMount_default(() => options?.immediate && execute());
-    (0, import_react9.useEffect)(() => {
-      execute();
-    }, [execute]);
+    (0, import_react9.useEffect)(
+      () => {
+        execute();
+      },
+      deps
+    );
     return [{ value, loading, error }, execute];
   }
 
@@ -409,6 +412,21 @@ var LibReact = (() => {
     };
   }
 
+  // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
+  var import_react12 = __toESM(require_react());
+  var useEffectOnce = function(effect) {
+    (0, import_react12.useEffect)(effect, []);
+  };
+  var useEffectOnce_default = useEffectOnce;
+
+  // ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
+  var useMount = function(fn) {
+    useEffectOnce_default(function() {
+      fn();
+    });
+  };
+  var useMount_default = useMount;
+
   // src/hooks/useFetchIntercept.ts
   function useFetchResponseIntercept(intercept) {
     useMount_default(() => fetchResponseIntercept(intercept));
@@ -433,23 +451,23 @@ var LibReact = (() => {
   }
 
   // src/hooks/useMounted.ts
-  var import_react12 = __toESM(require_react(), 1);
+  var import_react13 = __toESM(require_react(), 1);
   function useMounted() {
-    const [mounted, setMounted] = (0, import_react12.useState)(false);
-    (0, import_react12.useEffect)(() => setMounted(true), []);
+    const [mounted, setMounted] = (0, import_react13.useState)(false);
+    (0, import_react13.useEffect)(() => setMounted(true), []);
     return mounted;
   }
 
   // src/hooks/useWatch.ts
-  var import_react13 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   function useWatch(source, callback, options = {}) {
-    const firstUpdate = (0, import_react13.useRef)(false);
-    const then = (0, import_react13.useRef)();
-    const deps = (0, import_react13.useMemo)(
+    const firstUpdate = (0, import_react14.useRef)(false);
+    const then = (0, import_react14.useRef)();
+    const deps = (0, import_react14.useMemo)(
       () => Array.isArray(source) ? source : [source],
       [source]
     );
-    (0, import_react13.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (!firstUpdate.current)
         recordFirst();
       else
@@ -977,27 +995,27 @@ var LibReact = (() => {
   var { proxyStateMap: proxyStateMap2, snapCache: snapCache2 } = unstable_getInternalStates();
 
   // ../../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_react15 = __toESM(require_react(), 1);
   var import_meta2 = {};
   var useAffectedDebugValue = (state, affected) => {
-    const pathList = (0, import_react14.useRef)(void 0);
-    (0, import_react14.useEffect)(() => {
+    const pathList = (0, import_react15.useRef)(void 0);
+    (0, import_react15.useEffect)(() => {
       pathList.current = affectedToPathList(state, affected, true);
     });
-    (0, import_react14.useDebugValue)(pathList.current);
+    (0, import_react15.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)(
+    const affected = (0, import_react15.useMemo)(
       () => proxyObject && /* @__PURE__ */ new WeakMap(),
       [proxyObject]
     );
-    const lastSnapshot = (0, import_react14.useRef)(void 0);
+    const lastSnapshot = (0, import_react15.useRef)(void 0);
     let inRender = true;
-    const currSnapshot = (0, import_react14.useSyncExternalStore)(
-      (0, import_react14.useCallback)(
+    const currSnapshot = (0, import_react15.useSyncExternalStore)(
+      (0, import_react15.useCallback)(
         (callback) => {
           const unsub = subscribe(proxyObject, callback, notifyInSync);
           callback();
@@ -1023,18 +1041,18 @@ var LibReact = (() => {
       () => snapshot(proxyObject)
     );
     inRender = false;
-    (0, import_react14.useLayoutEffect)(() => {
+    (0, import_react15.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(), []);
+    const proxyCache2 = (0, import_react15.useMemo)(() => /* @__PURE__ */ new WeakMap(), []);
     return createProxy(currSnapshot, affected, proxyCache2, targetCache);
   }
 
   // src/storage/defineStore.ts
-  var import_react15 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
 
   // ../util-core/src/util/json.ts
   function jsonTryParse(text) {
@@ -1095,10 +1113,10 @@ var LibReact = (() => {
         Object.assign($state, patch);
     }
     function $signal(fn) {
-      return (0, import_react15.createElement)(() => fn(useSnapshot($state)));
+      return (0, import_react16.createElement)(() => fn(useSnapshot($state)));
     }
     $signal.status = function(fn) {
-      return (0, import_react15.createElement)(() => fn(useSnapshot($status)));
+      return (0, import_react16.createElement)(() => fn(useSnapshot($status)));
     };
     return {
       $subscribe,

package/dist/index.js

@@ -142,11 +142,28 @@ function renderNodes(tokens, values) {
   });
 }
 
-// src/hooks/useAsyncCallback.ts
+// src/hooks/ref.ts
 import { useState } from "react";
+function ref(value) {
+  function define(value2) {
+    if (typeof value2 === "function")
+      return (prev) => define(value2(prev.value));
+    return Object.defineProperty({}, "value", {
+      set: (action) => set(define(action)),
+      get: () => value2,
+      enumerable: true
+    });
+  }
+  const [ref2, set] = useState(define(value));
+  return ref2;
+}
+
+// src/hooks/useAsyncCallback.ts
+import { useState as useState2 } from "react";
 function useAsyncCallback(fun) {
-  const [state, set] = useState({ loading: false });
+  const [state, set] = useState2({ loading: false });
   async function execute(...args) {
+    set({ loading: true });
     return fun(...args).then((value) => {
       set({ loading: false });
       return value;
@@ -159,39 +176,24 @@ function useAsyncCallback(fun) {
 }
 
 // src/hooks/useAsyncState.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-
-// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
-import { useEffect } from "react";
-var useEffectOnce = function(effect) {
-  useEffect(effect, []);
-};
-var useEffectOnce_default = useEffectOnce;
-
-// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
-var useMount = function(fn) {
-  useEffectOnce_default(function() {
-    fn();
-  });
-};
-var useMount_default = useMount;
-
-// src/hooks/useAsyncState.ts
-function useAsyncState(fun, options) {
-  const [value, set] = useState2(options?.initial);
+import { useEffect, useState as useState3 } from "react";
+function useAsyncState(fun, deps = [], options) {
+  const [value, set] = useState3(options?.initial);
   const [loading, execute, error] = useAsyncCallback(async (...args) => fun(...args).then(set));
-  useMount_default(() => options?.immediate && execute());
-  useEffect2(() => {
-    execute();
-  }, [execute]);
+  useEffect(
+    () => {
+      execute();
+    },
+    deps
+  );
   return [{ value, loading, error }, execute];
 }
 
 // src/hooks/useDebounce.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState3(value);
-  useEffect3(() => {
+  const [debouncedValue, setDebouncedValue] = useState4(value);
+  useEffect2(() => {
     const handler = setTimeout(() => setDebouncedValue(value), delay);
     return () => clearTimeout(handler);
   }, [value, delay]);
@@ -200,14 +202,14 @@ function useDebounce(value, delay) {
 
 // src/hooks/useEventBus.ts
 import mitt from "mitt";
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect3, useRef } from "react";
 var emitter = mitt();
 function useEventBus(key) {
   const onRef = useRef();
   function on(listener) {
     emitter.on(key, listener);
     onRef.current = listener;
-    useEffect4(() => {
+    useEffect3(() => {
       if (!onRef.current)
         return;
       emitter.off(key, onRef.current);
@@ -229,6 +231,21 @@ function useEventBus(key) {
   };
 }
 
+// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useEffectOnce.js
+import { useEffect as useEffect4 } from "react";
+var useEffectOnce = function(effect) {
+  useEffect4(effect, []);
+};
+var useEffectOnce_default = useEffectOnce;
+
+// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMount.js
+var useMount = function(fn) {
+  useEffectOnce_default(function() {
+    fn();
+  });
+};
+var useMount_default = useMount;
+
 // src/hooks/useFetchIntercept.ts
 function useFetchResponseIntercept(intercept) {
   useMount_default(() => fetchResponseIntercept(intercept));
@@ -253,9 +270,9 @@ function fetchRequestIntercept(intercept) {
 }
 
 // src/hooks/useMounted.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 function useMounted() {
-  const [mounted, setMounted] = useState4(false);
+  const [mounted, setMounted] = useState5(false);
   useEffect5(() => setMounted(true), []);
   return mounted;
 }
@@ -486,6 +503,7 @@ export {
   defineAsyncStore,
   defineStore,
   proxyWithPersistant,
+  ref,
   useAsyncCallback,
   useAsyncState,
   useDebounce,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hairy/react-lib",
   "type": "module",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "description": "Library for react",
   "author": "Hairyf <wwu710632@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-use": "^17.6.0",
-    "@hairy/utils": "1.21.0"
+    "@hairy/utils": "1.23.0"
   },
   "scripts": {
     "build": "tsup",