@jelper/hooks 0.3.0 → 1.1.0

package/es/index.js

@@ -1,28 +1,27 @@
-// 预防组件销毁更新
-export { default as useSafeState } from './useSafeState';
-export { default as useSafeCb } from './useSafeCb';
+// 特殊state
+export { default as useBoolState } from './useBoolState';
+export { default as useValue } from './useValue';
+export { default as useOption } from './useOption';
 // 传入参数实时更新，保证内部最新数据
 export { default as useRtRef } from './useRtRef';
-export { default as useRtState } from './useRtState';
 export { default as useRtCb } from './useRtCb';
-export { default as useRtEffect } from './useRtEffect'; // 保证卸载回调能拿到最新数据
-// 特殊state
-export { default as useBoolState } from './useBoolState';
-export { default as useParamsState } from './useParamsState';
 // 特殊 Effect
-export { default as useUpdateEffect } from './useUpdateEffect';
-//  生命周期
+export { default as useUpdateEff } from './useUpdateEff';
+//  模拟生命周期
+export { default as useIsMounted } from './useIsMounted';
 export { default as useIsUnmount } from './useIsUnmount';
 export { default as useCreate } from './useCreate';
 export { default as useMount } from './useMount';
 export { default as useUnmount } from './useUnmount';
-// 节流防抖
-export { default as useThrottle } from './useThrottle';
+// callback
+export { default as useIgnoreAbortErrCb } from './useIgnoreAbortErrCb';
+// 防抖节流
 export { default as useDebounce } from './useDebounce';
+export { default as useThrottle } from './useThrottle';
 // 使用异步
+export { default as useSafeRunner } from './useSafeRunner';
 export { default as useAsync } from './useAsync';
 // 浏览器api
-export { default as useTimeout } from './useTimeout';
-export { default as useInterval } from './useInterval';
-export { default as useListener } from './useListener';
-export { default as useResizeObserver } from './useResizeObserver';
+export { default as useTimeout, useTimeoutHandler } from './useTimeout';
+export { default as useInterval, useIntervalHandler } from './useInterval';
+export { default as useResizeObserver, useResizeObserverHandler } from './useResizeObserver';

package/es/useAsync.js

@@ -1,33 +1,73 @@
-import useSafeState from './useSafeState';
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-18 23:44:38
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-29 17:58:54
+ */
+import { useEffect, useState } from 'react';
 import useRtCb from './useRtCb';
 import useCreate from './useCreate';
-const useAsync = (asyncFn, opt = {
+import useIsUnmounted from './useIsUnmount';
+import useUnmount from './useUnmount';
+const defOpt = {
     immediate: false,
     catchParam: false,
-}) => {
-    const [data, setData] = useSafeState(null);
-    const [param, setParam] = useSafeState(opt.defParam || {});
-    const [loading, setLoading] = useSafeState(false);
-    const [error, setError] = useSafeState(null);
+};
+const useAsync = (asyncFn, opt = defOpt) => {
+    const [data, setData] = useState();
+    const [param, setParam] = useState(opt.defParam || {});
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [controller, setController] = useState();
+    const isUnmounted = useIsUnmounted();
+    useEffect(() => {
+        if (!controller || !opt.onAbort) {
+            return;
+        }
+        const onAbort = opt.onAbort;
+        controller.signal.addEventListener('abort', onAbort);
+        return () => {
+            controller.signal.removeEventListener('abort', onAbort);
+        };
+    }, [controller]);
     const run = useRtCb((runParam) => {
         const currParam = opt.catchParam ? Object.assign(Object.assign({}, param), (runParam || {})) : runParam;
         setLoading(true);
-        setError(null);
-        return asyncFn(currParam)
-            .then(opt.format)
+        setError(undefined);
+        if (controller) {
+            controller.abort();
+        }
+        const abortController = new AbortController();
+        setController(abortController);
+        return asyncFn(currParam, { signal: abortController.signal })
             .then((resData) => {
-            setData(resData);
+            if (isUnmounted() || abortController.signal.aborted)
+                return;
+            setData(opt.format ? opt.format(resData) : resData);
             setParam(currParam);
-        }, setError)
-            .finally(() => {
             setLoading(false);
+        }, (err) => {
+            if (isUnmounted() || abortController.signal.aborted)
+                return Promise.reject(err);
+            setError(err);
+            setLoading(false);
+        }).finally(() => {
+            if (isUnmounted())
+                return;
+            setController(undefined);
         });
     });
+    const refresh = useRtCb(() => run(param));
     useCreate(() => {
         if (opt.immediate) {
             run(param);
         }
     });
-    return { data, run, loading, error };
+    useUnmount(() => {
+        if (controller) {
+            controller.abort();
+        }
+    });
+    return [data, { run, refresh, loading, error, param, controller }];
 };
 export default useAsync;

package/es/useBoolState.js

@@ -1,13 +1,21 @@
-import { useCallback } from 'react';
-import useSafeState from './useSafeState';
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:16:34
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-29 18:08:43
+ */
+import { useState, useCallback } from 'react';
 const useBoolState = (value) => {
-    const [val, setVal] = useSafeState(value);
+    const [val, setVal] = useState(value);
     const switchFn = useCallback((switchValue) => {
-        if (typeof switchValue === 'boolean') {
+        if (switchValue === undefined || switchValue === null) {
+            setVal((oldVal) => !oldVal);
+        }
+        else if (typeof switchValue === 'boolean' || typeof switchValue === 'function') {
             setVal(switchValue);
         }
         else {
-            setVal((oldVal) => !oldVal);
+            setVal(!!switchValue);
         }
     }, []);
     return [val, switchFn];

package/es/useCreate.js

@@ -1,3 +1,9 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:34:59
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:53:33
+ */
 import { useState } from 'react';
 const useCreate = (cb) => {
     useState(cb);

package/es/useDebounce.js

@@ -1,3 +1,9 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:55:14
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-29 18:56:32
+ */
 import { debounce } from 'lodash-es';
 import { useMemo } from 'react';
 import useRtCb from './useRtCb';
@@ -7,6 +13,6 @@ const useDebounce = (cb, wait, opts) => {
         return debounce((...arg) => {
             rtCb(...arg);
         }, wait, opts);
-    }, []);
+    }, [wait, opts]);
 };
 export default useDebounce;

package/es/useIgnoreAbortErrCb.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:28:14
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:57:23
+ */
+import { useCallback } from "react";
+const useIgnoreAbortErrCb = (cb, deps = [], opts) => {
+    return useCallback((err) => {
+        var _a;
+        if (err.name === 'AbortError')
+            return (_a = opts === null || opts === void 0 ? void 0 : opts.onAbort) === null || _a === void 0 ? void 0 : _a.call(opts, err);
+        return cb(err);
+    }, deps);
+};
+export default useIgnoreAbortErrCb;

package/es/useInterval.js

@@ -2,24 +2,37 @@
  * @Author: apathyjade
  * @Date: 2023-12-14 16:51:29
  * @Last Modified by: apathyjade
- * @Last Modified time: 2024-03-14 16:32:55
+ * @Last Modified time: 2025-05-30 18:24:00
  */
 import { useCallback, useEffect, useRef } from 'react';
 import useRtCb from './useRtCb';
-const useInterval = (callback, delay) => {
+export const useIntervalHandler = () => {
     const timerRef = useRef();
     const clearTimer = useCallback(() => {
         if (timerRef.current) {
             window.clearInterval(timerRef.current);
+            timerRef.current = undefined;
         }
     }, []);
+    const bindTimer = useCallback((callback, timeout, ...arg) => {
+        clearTimer();
+        timerRef.current = window.setInterval(() => {
+            callback(...arg);
+        }, timeout);
+    }, []);
+    useEffect(() => clearTimer);
+    return [
+        bindTimer,
+        clearTimer,
+    ];
+};
+export const useInterval = (callback, timeout, ...arg) => {
+    const [bindTimer, clearTimer] = useIntervalHandler();
     const cb = useRtCb(callback);
     useEffect(() => {
-        timerRef.current = window.setInterval(cb, delay);
-        return () => {
-            clearTimer();
-        };
-    }, [delay]);
+        bindTimer(cb, timeout, ...arg);
+        return clearTimer;
+    }, [cb, timeout, ...arg]);
     return clearTimer;
 };
 export default useInterval;

package/es/useIsMounted.js

@@ -0,0 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 21:34:27
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 21:37:21
+ */
+import { useCallback, useEffect, useRef } from 'react';
+const useIsMounted = () => {
+    const ref = useRef(false);
+    useEffect(() => {
+        ref.current = true;
+        return () => {
+            ref.current = false;
+        };
+    }, []);
+    return useCallback(() => ref.current, []);
+};
+export default useIsMounted;

package/es/useIsUnmount.js

@@ -1,11 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 21:33:24
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-29 20:15:50
+ */
 import { useCallback, useEffect, useRef } from 'react';
 const useIsUnmount = () => {
     const ref = useRef(true);
     useEffect(() => {
+        ref.current = false;
         return () => {
-            ref.current = false;
+            ref.current = true;
         };
     }, []);
-    return useCallback(() => !ref.current, []);
+    return useCallback(() => ref.current, []);
 };
 export default useIsUnmount;

package/es/useMount.js

@@ -1,10 +1,11 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-18 00:21:16
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-18 00:21:16
+ */
 import { useEffect } from 'react';
-import useRtRef from './useRtRef';
 const useMount = (cb) => {
-    const ref = useRtRef(cb);
-    useEffect(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref);
-    });
+    useEffect(cb, []);
 };
 export default useMount;

package/es/useOption.js

@@ -0,0 +1,19 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:37
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-16 21:31:54
+ */
+import { useCallback, useState } from 'react';
+const useOption = (defOpt = {}) => {
+    const [initOpt] = useState(defOpt);
+    const [option, setOption] = useState(initOpt);
+    const reset = useCallback(() => {
+        setOption(initOpt);
+    }, [initOpt]);
+    const update = useCallback((newOpts) => {
+        setOption((oldOpts) => (Object.assign(Object.assign({}, (oldOpts || {})), (typeof newOpts === 'function' ? newOpts(oldOpts) : newOpts || {}))));
+    }, []);
+    return [option, { setOption, reset, update }];
+};
+export default useOption;

package/es/useResizeObserver.js

@@ -2,10 +2,9 @@
  * @Author: apathyjade
  * @Date: 2023-11-24 10:52:51
  * @Last Modified by: apathyjade
- * @Last Modified time: 2024-03-14 16:34:42
+ * @Last Modified time: 2025-05-30 14:35:56
  */
-import { useEffect } from 'react';
-import useSafeCb from './useSafeCb';
+import { useCallback, useEffect } from 'react';
 let resizeObserver = null;
 let observeCatch = null;
 function init() {
@@ -20,10 +19,14 @@ function init() {
         });
     });
 }
+;
 const observe = (target, cb) => {
     if (!resizeObserver) {
         init();
     }
+    if (!target) {
+        return;
+    }
     observeCatch === null || observeCatch === void 0 ? void 0 : observeCatch.set(target, cb);
     resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(target);
 };
@@ -31,20 +34,28 @@ const unobserve = (target) => {
     if (!resizeObserver) {
         init();
     }
+    if (!target) {
+        return;
+    }
     resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(target);
     observeCatch === null || observeCatch === void 0 ? void 0 : observeCatch.delete(target);
 };
-export default function useResizeObserver(dom, cb) {
-    const selfObserve = useSafeCb(() => {
-        observe(dom, cb);
-    }, [dom, cb]);
-    const selfUnobserve = useSafeCb(() => {
-        unobserve(dom);
-    }, [dom]);
+export const useResizeObserverHandler = () => {
+    return [observe, unobserve];
+};
+export const useResizeObserver = (domRef, cb) => {
+    const selfUnobserve = useCallback(() => {
+        if (domRef.current) {
+            unobserve(domRef.current);
+        }
+    }, [domRef.current]);
     useEffect(() => {
+        if (!domRef.current)
+            return;
+        const dom = domRef.current;
         observe(dom, cb);
         return () => unobserve(dom);
-    }, [dom, cb]);
-    return [selfObserve, selfUnobserve];
-}
-;
+    }, [domRef.current, cb]);
+    return selfUnobserve;
+};
+export default useResizeObserver;

package/es/useRtCb.js

@@ -1,10 +1,15 @@
-import useSafeCb from './useSafeCb';
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-17 00:22:11
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-17 00:22:56
+ */
+import { useCallback } from 'react';
 import useRtRef from './useRtRef';
-const useRtCb = (cb, deps) => {
+const useRtCb = (cb, deps = []) => {
     const ref = useRtRef(cb);
-    return useSafeCb((...arg) => {
-        var _a;
-        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...arg);
+    return useCallback((...args) => {
+        return ref.current(...args);
     }, deps);
 };
 export default useRtCb;

package/es/useRtRef.js

@@ -1,7 +1,13 @@
-import { useRef } from "react";
-export default function useRtRef(val) {
-    const ref = useRef();
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 22:19:57
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-30 15:05:26
+ */
+import { useRef } from 'react';
+const useRtRef = (val) => {
+    const ref = useRef(val);
     ref.current = val;
     return ref;
-}
-;
+};
+export default useRtRef;

package/es/useSafeRunner.js

@@ -0,0 +1,20 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:36:09
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-19 22:41:39
+ */
+import { useCallback } from 'react';
+import useIsUnmount from "./useIsUnmount";
+const useSafeRunner = () => {
+    const isUnmount = useIsUnmount();
+    return useCallback((cb, unmountCb) => {
+        if (isUnmount()) {
+            unmountCb === null || unmountCb === void 0 ? void 0 : unmountCb();
+        }
+        else {
+            cb();
+        }
+    }, []);
+};
+export default useSafeRunner;

package/es/useThrottle.js

@@ -1,19 +1,18 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-19 22:55:28
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-30 15:31:34
+ */
 import { throttle } from 'lodash-es';
 import { useMemo } from 'react';
 import useRtCb from './useRtCb';
-/**
- * 用于节流函数的钩子函数
- * @param cb - 要节流的函数
- * @param wait - 节流延迟时间，默认为0
- * @param opts - 节流选项对象，默认为{}
- * @returns 节流函数
- */
 const useThrottle = (cb, wait, opts) => {
     const rtCb = useRtCb(cb);
     return useMemo(() => {
         return throttle((...arg) => {
             rtCb(...arg);
         }, wait, opts);
-    }, []);
+    }, [wait, opts]);
 };
 export default useThrottle;

package/es/useTimeout.js

@@ -1,34 +1,39 @@
-/*
+/**
  * @Author: apathyjade
- * @Date: 2023-12-14 16:51:29
+ * @Date: 2025-03-19 23:10:13
  * @Last Modified by: apathyjade
- * @Last Modified time: 2023-12-14 17:15:27
+ * @Last Modified time: 2025-05-30 18:24:42
  */
 import { useCallback, useEffect, useRef } from 'react';
 import useRtCb from './useRtCb';
-/**
- * 使用定时器在指定延迟后执行回调函数
- * @param callback - 回调函数
- * @param delay - 延迟时间（毫秒）
- * @returns clearTimer - 清除定时器的函数
- */
-const useTimeout = (callback, delay) => {
+export const useTimeoutHandler = () => {
     const timerRef = useRef();
-    /**
-     * 清除定时器
-     */
     const clearTimer = useCallback(() => {
         if (timerRef.current) {
-            clearTimeout(timerRef.current);
+            window.clearTimeout(timerRef.current);
+            timerRef.current = undefined;
         }
     }, []);
+    const bindTimer = useCallback((callback, timeout, ...arg) => {
+        clearTimer();
+        timerRef.current = window.setTimeout(() => {
+            timerRef.current = undefined;
+            callback(...arg);
+        }, timeout);
+    }, []);
+    useEffect(() => clearTimer);
+    return [
+        bindTimer,
+        clearTimer,
+    ];
+};
+export const useTimeout = (callback, timeout, ...arg) => {
+    const [bindTimer, clearTimer] = useTimeoutHandler();
     const cb = useRtCb(callback);
     useEffect(() => {
-        timerRef.current = window.setTimeout(cb, delay);
-        return () => {
-            clearTimer();
-        };
-    }, [delay]);
+        bindTimer(cb, timeout, ...arg);
+        return clearTimer;
+    }, [cb, timeout, ...arg]);
     return clearTimer;
 };
 export default useTimeout;

package/es/useUnmount.js

@@ -1,7 +1,13 @@
-import { useEffect, useRef } from 'react';
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:20
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-03-18 00:17:09
+ */
+import { useEffect } from 'react';
+import useRtRef from './useRtRef';
 const useUnmount = (cb) => {
-    const ref = useRef(cb);
-    ref.current = cb;
+    const ref = useRtRef(cb);
     useEffect(() => {
         return () => {
             ref.current();

package/es/useUpdateEff.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: apathyjade
+ * @Date: 2025-03-16 11:35:13
+ * @Last Modified by: apathyjade
+ * @Last Modified time: 2025-05-30 15:51:14
+ */
+import { useRef, useEffect } from 'react';
+const useUpdateEff = (cb, deps) => {
+    const ref = useRef(false);
+    useEffect(() => {
+        if (ref.current) {
+            return cb();
+        }
+        ref.current = true;
+    }, deps);
+};
+export default useUpdateEff;

package/es/useValue.js

@@ -0,0 +1,26 @@
+/*
+ * @Author: jade <apathyjade@outlook.com>
+ * @Version: 0.0.1
+ * @Date: 2023-04-05 14:39:52
+ * @Last Modified by:   jade
+ * @Last Modified Time: 2023-04-05 14:39:52
+ */
+import { useState } from 'react';
+import useUpdateEff from './useUpdateEff';
+const defEqual = (a, b) => a === b;
+const useValue = (value, onChange, opts) => {
+    const { isEqual = defEqual } = opts || {};
+    const [val, setVal] = useState(value);
+    useUpdateEff(() => {
+        if (!isEqual(value, val)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(val);
+        }
+    }, [val]);
+    useUpdateEff(() => {
+        if (!isEqual(value, val)) {
+            setVal(value);
+        }
+    }, [value]);
+    return [val, setVal];
+};
+export default useValue;