@aiszlab/relax 1.2.11 → 1.2.13

package/dist/hooks/use-controlled-state.d.ts

@@ -1,6 +1,6 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import { type State } from '../is/is-state-getter';
-interface Props<T> {
+interface Dependencies<T> {
     defaultState?: State<T>;
 }
 /**
@@ -9,5 +9,5 @@ interface Props<T> {
  * @description
  * controlled state
  */
-export declare const useControlledState: <T>(controlledState: State<T>, { defaultState }?: Props<T>) => [T, Dispatch<SetStateAction<T>>];
+export declare const useControlledState: <T>(controlledState: T, { defaultState }?: Dependencies<T>) => [T, Dispatch<SetStateAction<T>>];
 export {};

package/dist/hooks/use-controlled-state.js

@@ -10,35 +10,27 @@ import { isUndefined } from '../is/is-undefined.js';
  */
 const useControlledState = (controlledState, { defaultState } = {}) => {
     /// initialize state
-    const [state, setState] = useState(() => {
-        // state function, run it for value
-        if (isStateGetter(controlledState))
-            return controlledState();
-        // not controlled use default prop
-        if (isUndefined(controlledState)) {
-            if (isUndefined(defaultState))
-                return controlledState;
-            if (isStateGetter(defaultState))
-                return defaultState();
-            return defaultState;
-        }
+    const [_state, _setState] = useState(() => {
         // default use controlled state
-        return controlledState;
+        if (!isUndefined(controlledState)) {
+            return controlledState;
+        }
+        // not controlled use default prop
+        if (isUndefined(defaultState))
+            return controlledState;
+        if (isStateGetter(defaultState))
+            return defaultState();
+        return defaultState;
     });
+    /// sync value back to `undefined` when it from control to un-control
     useEffect(() => {
-        // when state is not controlled
-        if (isUndefined(controlledState))
-            return;
-        // if input state is function, mean it is not controlled
-        if (isStateGetter(controlledState))
-            return;
-        // if state is equal with value
-        if (controlledState === state)
+        if (!isUndefined(controlledState))
             return;
-        // update inner state
-        setState(controlledState);
+        _setState(controlledState);
     }, [controlledState]);
-    return [state, setState];
+    /// use controlled
+    const state = !isUndefined(controlledState) ? controlledState : _state;
+    return [state, _setState];
 };
 
 export { useControlledState };

package/dist/hooks/use-debounce-callback.d.ts

@@ -11,7 +11,7 @@ interface Options {
  * @description
  * debounce callback
  */
-export declare const useDebounceCallback: <T>(callable: Function, options: Options) => {
+export declare const useDebounceCallback: <T>(callable: Function, { delay }?: Options) => {
     next: (value: T) => void;
     complete: () => void;
     cancel: () => void;

package/dist/hooks/use-debounce-callback.js

@@ -7,10 +7,9 @@ import { Observable, debounceTime } from 'rxjs';
  * @description
  * debounce callback
  */
-const useDebounceCallback = (callable, options) => {
-    var _a;
-    // delay
-    const delay = (_a = options.delay) !== null && _a !== void 0 ? _a : 1000;
+const useDebounceCallback = (callable, { delay = 1000 } = {
+    delay: 1000
+}) => {
     // runner
     const runner = useRef();
     // listener
@@ -20,7 +19,7 @@ const useDebounceCallback = (callable, options) => {
         listener.current = new Observable((subscriber) => {
             runner.current = subscriber;
         })
-            .pipe(debounceTime(options.delay))
+            .pipe(debounceTime(delay))
             .subscribe({
             next: (value) => {
                 callable(value);

package/dist/hooks/use-event.d.ts

@@ -0,0 +1,3 @@
+type Callback<U extends Array<unknown>, R> = (...args: U) => R;
+export declare const useEvent: <U extends unknown[], R>(callback: Callback<U, R>) => Callback<U, R>;
+export {};

package/dist/hooks/use-event.js

@@ -0,0 +1,9 @@
+import { useRef, useCallback } from 'react';
+
+const useEvent = (callback) => {
+    const ref = useRef();
+    ref.current = callback;
+    return useCallback((...args) => ref.current(...args), []);
+};
+
+export { useEvent };

package/dist/hooks/use-mount.js

@@ -1,4 +1,5 @@
 import { useLayoutEffect } from 'react';
+import { callAsEffect } from '../utils/thenable-effect-callback.js';
 
 /**
  * @author murukal
@@ -8,16 +9,7 @@ import { useLayoutEffect } from 'react';
  */
 const useMount = (callable) => {
     useLayoutEffect(() => {
-        const called = callable();
-        // if result is void
-        if (!called) {
-            return void 0;
-        }
-        // if result is promise like, return void
-        if (called.then) {
-            return void 0;
-        }
-        return called;
+        return callAsEffect(callable);
     }, []);
 };
 

package/dist/hooks/use-mounted.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { callAsEffect } from '../utils/thenable-effect-callback.js';
 
 /**
  * @author murukal
@@ -8,16 +9,7 @@ import { useEffect } from 'react';
  */
 const useMounted = (callable) => {
     useEffect(() => {
-        const called = callable();
-        // if result is void
-        if (!called) {
-            return void 0;
-        }
-        // if result is promise like, return void
-        if (called.then) {
-            return void 0;
-        }
-        return called;
+        return callAsEffect(callable);
     }, []);
 };
 

package/dist/hooks/use-throttle-callback.d.ts

@@ -0,0 +1,19 @@
+interface Options {
+    /**
+     * The delay time (in milliseconds) until the throttle function is called.
+     * default 1000
+     */
+    readonly duration: number;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * throttle callback
+ */
+export declare const useThrottleCallback: <T>(callable: Function, { duration }?: Options) => {
+    next: (value: T) => void;
+    complete: () => void;
+    cancel: () => void;
+};
+export {};

package/dist/hooks/use-throttle-callback.js

@@ -0,0 +1,65 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { Observable, throttleTime } from 'rxjs';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * throttle callback
+ */
+const useThrottleCallback = (callable, { duration = 1000 } = {
+    duration: 1000
+}) => {
+    // runner
+    const runner = useRef();
+    // listener
+    const listener = useRef();
+    /// initialze listener function for debouce
+    const initialize = useCallback(() => {
+        listener.current = new Observable((subscriber) => {
+            runner.current = subscriber;
+        })
+            .pipe(throttleTime(duration))
+            .subscribe({
+            next: (value) => {
+                callable(value);
+            },
+            complete: () => {
+                initialize();
+            }
+        });
+    }, [callable, duration]);
+    /// initialize debounce function
+    /// when delay / callable changed, need reinitialize
+    useEffect(() => {
+        initialize();
+        // dispose
+        return () => {
+            var _a;
+            (_a = listener.current) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
+    }, [initialize]);
+    /// next function has been debounced for hooks user
+    const next = useCallback((value) => {
+        var _a;
+        (_a = runner.current) === null || _a === void 0 ? void 0 : _a.next(value);
+    }, []);
+    /// flush the debounce
+    const complete = useCallback(() => {
+        var _a;
+        (_a = runner.current) === null || _a === void 0 ? void 0 : _a.complete();
+    }, []);
+    /// cancel only valid in debounce time
+    /// if the callback has been called, it can not be canceled
+    const cancel = useCallback(() => {
+        var _a;
+        (_a = listener.current) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }, []);
+    return {
+        next,
+        complete,
+        cancel
+    };
+};
+
+export { useThrottleCallback };

package/dist/hooks/use-update-effect.d.ts

@@ -0,0 +1,3 @@
+import { DependencyList } from 'react';
+import { ThenableEffectCallback } from '../utils/thenable-effect-callback';
+export declare const useUpdateEffect: (callable: ThenableEffectCallback, deps?: DependencyList) => void;

package/dist/hooks/use-update-effect.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react';
+import 'rxjs';
+import { callAsEffect } from '../utils/thenable-effect-callback.js';
+import { useMounted } from './use-mounted.js';
+import './use-scroll-locker.js';
+import '../dom/scroll-to.js';
+import './use-toggleable.js';
+import 'react-is';
+
+const useUpdateEffect = (callable, deps) => {
+    const isMounted = useRef(false);
+    useEffect(() => {
+        if (!isMounted.current)
+            return void 0;
+        return callAsEffect(callable);
+    }, deps);
+    useMounted(() => {
+        isMounted.current = true;
+    });
+};
+
+export { useUpdateEffect };

package/dist/index.d.ts

@@ -4,6 +4,7 @@
  */
 export { useBoolean } from './hooks/use-boolean';
 export { useDebounceCallback } from './hooks/use-debounce-callback';
+export { useThrottleCallback } from './hooks/use-throttle-callback';
 export { useImageLoader } from './hooks/use-image-loader';
 export { useMount } from './hooks/use-mount';
 export { useMounted } from './hooks/use-mounted';
@@ -15,6 +16,8 @@ export { useForceUpdate } from './hooks/use-force-update';
 export { useScrollable } from './hooks/use-scrollable';
 export { useRefs } from './hooks/use-refs';
 export { useToggleable } from './hooks/use-toggleable';
+export { useEvent } from './hooks/use-event';
+export { useUpdateEffect } from './hooks/use-update-effect';
 /**
  * @description
  * is
@@ -32,6 +35,7 @@ export { isMobile } from './is/is-mobile';
 export { isOverflow } from './is/is-overflow';
 export { isStyleElement } from './is/is-style-element';
 export { isFunction } from './is/is-function';
+export { isThenable } from './is/is-thenable';
 /**
  * @description
  * utils
@@ -39,4 +43,5 @@ export { isFunction } from './is/is-function';
 export { type Nullable } from './utils/null-able';
 export { type Partialable } from './utils/partial-able';
 export { type RequiredIn } from './utils/required-in';
+export { type ThenableEffectCallback, callAsEffect } from './utils/thenable-effect-callback';
 export { unique, uniqueBy } from './utils/unique';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { useBoolean } from './hooks/use-boolean.js';
 export { useDebounceCallback } from './hooks/use-debounce-callback.js';
+export { useThrottleCallback } from './hooks/use-throttle-callback.js';
 export { useImageLoader } from './hooks/use-image-loader.js';
 export { useMount } from './hooks/use-mount.js';
 export { useMounted } from './hooks/use-mounted.js';
@@ -11,6 +12,8 @@ export { useForceUpdate } from './hooks/use-force-update.js';
 export { useScrollable } from './hooks/use-scrollable.js';
 export { useRefs } from './hooks/use-refs.js';
 export { useToggleable } from './hooks/use-toggleable.js';
+export { useEvent } from './hooks/use-event.js';
+export { useUpdateEffect } from './hooks/use-update-effect.js';
 export { isRefable } from './is/is-refable.js';
 export { isUndefined } from './is/is-undefined.js';
 export { isStateGetter } from './is/is-state-getter.js';
@@ -24,4 +27,6 @@ export { isMobile } from './is/is-mobile.js';
 export { isOverflow } from './is/is-overflow.js';
 export { isStyleElement } from './is/is-style-element.js';
 export { isFunction } from './is/is-function.js';
+export { isThenable } from './is/is-thenable.js';
+export { callAsEffect } from './utils/thenable-effect-callback.js';
 export { unique, uniqueBy } from './utils/unique.js';

package/dist/is/is-thenable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description
+ * is thenable
+ */
+export declare const isThenable: <T>(value: T | PromiseLike<T>) => value is PromiseLike<T>;

package/dist/is/is-thenable.js

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * is thenable
+ */
+const isThenable = (value) => {
+    return !!value.then;
+};
+
+export { isThenable };

package/dist/utils/thenable-effect-callback.d.ts

@@ -0,0 +1,11 @@
+import type { EffectCallback } from 'react';
+/**
+ * @description
+ * thenable effect callback
+ */
+export type ThenableEffectCallback = () => ReturnType<EffectCallback> | PromiseLike<ReturnType<EffectCallback>>;
+/**
+ * @description
+ * call thenable effect callback
+ */
+export declare const callAsEffect: (callable: ThenableEffectCallback) => ReturnType<EffectCallback>;

package/dist/utils/thenable-effect-callback.js

@@ -0,0 +1,18 @@
+import { isThenable } from '../is/is-thenable.js';
+
+/**
+ * @description
+ * call thenable effect callback
+ */
+const callAsEffect = (callable) => {
+    const called = callable();
+    // if result is void
+    if (!called)
+        return void 0;
+    // if result is promise like, return void
+    if (isThenable(called))
+        return void 0;
+    return called;
+};
+
+export { callAsEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "description": "react utils collection",
   "type": "module",
   "exports": {
@@ -24,9 +24,9 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@types/react-is": "^18.2.2",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-is": "^18",
     "rollup": "^3.27.0",
     "typescript": "^5.1.3"
   },