@aiszlab/relax 1.2.29 → 1.2.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,7 +27,7 @@ const useControlledState = (controlledState, { defaultState } = {}) => {
27
27
  useUpdateEffect(() => {
28
28
  if (!isUndefined(controlledState))
29
29
  return;
30
- _setState(controlledState);
30
+ _setState(controlledState !== null && controlledState !== void 0 ? controlledState : defaultState);
31
31
  }, [controlledState]);
32
32
  /// use controlled
33
33
  const state = !isUndefined(controlledState) ? controlledState : _state;
@@ -1,4 +1,5 @@
1
- import { type Debounced } from '../utils/debounce';
1
+ import { type Debounced, type Debouncer } from '../utils/debounce';
2
+ import { type Callable } from './use-event';
2
3
  /**
3
4
  * @author murukal
4
5
  *
@@ -14,4 +15,4 @@ import { type Debounced } from '../utils/debounce';
14
15
  * @example
15
16
  * 1000
16
17
  */
17
- export declare const useDebounceCallback: <T extends Function>(callback: T, wait?: number) => Debounced<T>;
18
+ export declare const useDebounceCallback: <T extends Callable, R extends unknown[] = Parameters<T>>(debouncer: T | Debouncer<T, R>, wait?: number) => Debounced<T>;
@@ -1,7 +1,23 @@
1
1
  import { useRef, useEffect, useMemo } from 'react';
2
2
  import { debounce } from '../utils/debounce.mjs';
3
3
  import { useEvent } from './use-event.mjs';
4
+ import { isFunction } from '../is/is-function.mjs';
5
+ import { useDefault } from './use-default.mjs';
4
6
 
7
+ const useDebouncer = (debouncer) => {
8
+ const _debouncer = useMemo(() => {
9
+ return isFunction(debouncer) ? { callback: debouncer, pipeable: null } : debouncer;
10
+ }, [debouncer]);
11
+ return {
12
+ callback: useEvent((...args) => {
13
+ return _debouncer.callback(...args);
14
+ }),
15
+ pipeable: useEvent((...args) => {
16
+ var _a, _b;
17
+ return (_b = (_a = _debouncer.pipeable) === null || _a === void 0 ? void 0 : _a.call(_debouncer, ...args)) !== null && _b !== void 0 ? _b : args;
18
+ })
19
+ };
20
+ };
5
21
  /**
6
22
  * @author murukal
7
23
  *
@@ -17,24 +33,26 @@ import { useEvent } from './use-event.mjs';
17
33
  * @example
18
34
  * 1000
19
35
  */
20
- const useDebounceCallback = (callback, wait = 1000) => {
21
- const trigger = useRef(null);
22
- const callable = useEvent(callback);
36
+ const useDebounceCallback = (debouncer, wait = 1000) => {
37
+ const debounced = useRef(null);
38
+ const { callback, pipeable } = useDebouncer(debouncer);
23
39
  useEffect(() => {
24
- const debounced = debounce(callable, wait);
25
- trigger.current = debounced;
40
+ const _debounced = debounce({
41
+ callback,
42
+ pipeable
43
+ }, wait);
44
+ debounced.current = _debounced;
26
45
  // dispose
27
46
  return () => {
28
- debounced.cancel();
29
- trigger.current = null;
47
+ _debounced.abort();
48
+ debounced.current = null;
30
49
  };
31
50
  }, [wait]);
32
- const debounced = useMemo(() => ({
33
- next: (value) => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.next(value); },
34
- complete: () => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.complete(); },
35
- cancel: () => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.cancel(); }
36
- }), []);
37
- return debounced;
51
+ return useDefault(() => ({
52
+ next: (...args) => { var _a; return (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.next(...args); },
53
+ flush: () => { var _a; return (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.flush(); },
54
+ abort: () => { var _a; return (_a = debounced.current) === null || _a === void 0 ? void 0 : _a.abort(); }
55
+ }));
38
56
  };
39
57
 
40
58
  export { useDebounceCallback };
@@ -1 +1,2 @@
1
- export declare const useEvent: <T extends Function>(callback: T) => T;
1
+ export type Callable = (...args: any) => any;
2
+ export declare const useEvent: <T extends Callable>(callback: T) => T;
@@ -3,7 +3,8 @@ import { useRef, useCallback } from 'react';
3
3
  const useEvent = (callback) => {
4
4
  const ref = useRef(callback);
5
5
  ref.current = callback;
6
- return useCallback(((...args) => ref.current(...args)), []);
6
+ // @ts-ignore
7
+ return useCallback((...args) => ref.current(...args), []);
7
8
  };
8
9
 
9
10
  export { useEvent };
@@ -11,5 +11,5 @@ type Props<T> = Pick<DOMAttributes<T>, 'onFocus' | 'onBlur'> & {
11
11
  * dom attributes
12
12
  */
13
13
  type UsedFocus<T> = [boolean, Required<Pick<DOMAttributes<T>, 'onFocus' | 'onBlur'>>];
14
- export declare const useFocus: <T extends Element = Element>(props?: Props<T> | undefined) => UsedFocus<T>;
14
+ export declare const useFocus: <T extends Element = Element>(props?: Props<T>) => UsedFocus<T>;
15
15
  export {};
@@ -4,5 +4,5 @@ type UseHoverBy<T> = {
4
4
  onLeave?: DOMAttributes<T>['onPointerLeave'];
5
5
  };
6
6
  type UsedHover<T> = [boolean, Required<Pick<DOMAttributes<T>, 'onPointerEnter' | 'onPointerLeave'>>];
7
- export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T> | undefined) => UsedHover<T>;
7
+ export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T>) => UsedHover<T>;
8
8
  export {};
@@ -1,4 +1,5 @@
1
- import { type Throttled } from '../utils/throttle';
1
+ import { type Throttler, type Throttled } from '../utils/throttle';
2
+ import { type Callable } from './use-event';
2
3
  /**
3
4
  * @author murukal
4
5
  *
@@ -14,4 +15,4 @@ import { type Throttled } from '../utils/throttle';
14
15
  * @example
15
16
  * 1000
16
17
  */
17
- export declare const useThrottleCallback: <T extends Function>(callback: T, duration?: number) => Throttled<T>;
18
+ export declare const useThrottleCallback: <T extends Callable, R extends unknown[] = Parameters<T>>(throttler: T | Throttler<T, R>, duration?: number) => Throttled<T>;
@@ -1,7 +1,23 @@
1
1
  import { useRef, useEffect, useMemo } from 'react';
2
2
  import { throttle } from '../utils/throttle.mjs';
3
3
  import { useEvent } from './use-event.mjs';
4
+ import { isFunction } from '../is/is-function.mjs';
5
+ import { useDefault } from './use-default.mjs';
4
6
 
7
+ const useThrottler = (debouncer) => {
8
+ const _debouncer = useMemo(() => {
9
+ return isFunction(debouncer) ? { callback: debouncer, pipeable: null } : debouncer;
10
+ }, [debouncer]);
11
+ return {
12
+ callback: useEvent((...args) => {
13
+ return _debouncer.callback(...args);
14
+ }),
15
+ pipeable: useEvent((...args) => {
16
+ var _a, _b;
17
+ return (_b = (_a = _debouncer.pipeable) === null || _a === void 0 ? void 0 : _a.call(_debouncer, ...args)) !== null && _b !== void 0 ? _b : args;
18
+ })
19
+ };
20
+ };
5
21
  /**
6
22
  * @author murukal
7
23
  *
@@ -17,24 +33,26 @@ import { useEvent } from './use-event.mjs';
17
33
  * @example
18
34
  * 1000
19
35
  */
20
- const useThrottleCallback = (callback, duration = 1000) => {
21
- const trigger = useRef(null);
22
- const callable = useEvent(callback);
36
+ const useThrottleCallback = (throttler, duration = 1000) => {
37
+ const throttled = useRef(null);
38
+ const { callback, pipeable } = useThrottler(throttler);
23
39
  useEffect(() => {
24
- const throttled = throttle(callable, duration);
25
- trigger.current = throttled;
40
+ const _throttled = throttle({
41
+ callback,
42
+ pipeable
43
+ }, duration);
44
+ throttled.current = _throttled;
26
45
  // dispose
27
46
  return () => {
28
- throttled.cancel();
29
- trigger.current = null;
47
+ _throttled.abort();
48
+ throttled.current = null;
30
49
  };
31
50
  }, [duration]);
32
- const throttled = useMemo(() => ({
33
- next: (value) => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.next(value); },
34
- complete: () => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.complete(); },
35
- cancel: () => { var _a; return (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.cancel(); }
36
- }), []);
37
- return throttled;
51
+ return useDefault(() => ({
52
+ next: (...args) => { var _a; return (_a = throttled.current) === null || _a === void 0 ? void 0 : _a.next(...args); },
53
+ flush: () => { var _a; return (_a = throttled.current) === null || _a === void 0 ? void 0 : _a.flush(); },
54
+ abort: () => { var _a; return (_a = throttled.current) === null || _a === void 0 ? void 0 : _a.abort(); }
55
+ }));
38
56
  };
39
57
 
40
58
  export { useThrottleCallback };
@@ -1,4 +1,3 @@
1
- export type { Arguments } from './arguments';
2
1
  export type { Nullable } from './nullable';
3
2
  export type { Partialable } from './partialable';
4
3
  export type { Voidable } from './voidable';
@@ -1,30 +1,56 @@
1
- import { type Subscriber } from 'rxjs';
2
- import type { Arguments, First } from '../types';
3
- export interface Debounced<T extends Function> {
1
+ import { type Nullable } from '../types';
2
+ import { type Callable } from '../hooks/use-event';
3
+ type Type = 'debounce' | 'throttle';
4
+ export interface Debounced<T extends Callable> {
4
5
  /**
5
6
  * @description
6
7
  * value trigger
7
8
  */
8
- next: (value: First<Arguments<T>>) => void;
9
+ next: (...args: Parameters<T>) => void;
9
10
  /**
10
11
  * @description
11
- * complete current debounce function
12
- * this function will not be usable
12
+ * complete current debounce/throttle function
13
13
  */
14
- complete: () => void;
14
+ flush: () => void;
15
15
  /**
16
16
  * @description
17
17
  * ignore any value after call cancel
18
- * this function will not be usable
19
18
  */
20
- cancel: () => void;
19
+ abort: () => void;
21
20
  }
22
- export declare class Trigger<T> {
21
+ export type Debouncer<T extends Callable, R extends Array<unknown> = Parameters<T>> = {
22
+ callback: (...args: R) => ReturnType<T>;
23
+ pipeable: Nullable<(...args: Parameters<T>) => R | Promise<R>>;
24
+ };
25
+ export declare class Trigger<T extends Callable, R extends Array<unknown> = Parameters<T>> {
23
26
  #private;
24
- constructor();
25
- set use(subscriber: Subscriber<T>);
26
- next(value: T): void;
27
- error(error?: unknown): void;
28
- complete(): void;
27
+ constructor(debouncer: Debouncer<T, R>, wait: number, type?: Type);
28
+ /**
29
+ * @description
30
+ * create observable
31
+ * used for debounce/throttle handler
32
+ */
33
+ use(): this;
34
+ /**
35
+ * @description
36
+ * flush
37
+ * complete all debounced handlers
38
+ * in relax, we will create a new observable for next debounce/throttle handler
39
+ * so it will make some async problems, pls attention
40
+ */
41
+ flush(): void;
42
+ /**
43
+ * @description
44
+ * abort
45
+ * cancel all debounced handlers
46
+ * in relax, we will create a new observable for next debounce/throttle handler
47
+ */
48
+ abort(): void;
49
+ /**
50
+ * @description
51
+ * trigger value
52
+ */
53
+ next(...args: Parameters<T>): void;
29
54
  }
30
- export declare const debounce: <T extends Function>(callback: T, wait: number) => Debounced<T>;
55
+ export declare const debounce: <T extends Callable, R extends unknown[] = Parameters<T>>(debouncer: Debouncer<T, R> | T, wait: number) => Debounced<T>;
56
+ export {};
@@ -1,51 +1,84 @@
1
1
  import { __classPrivateFieldSet, __classPrivateFieldGet } from '../node_modules/tslib/tslib.es6.mjs';
2
- import { Observable, debounceTime } from 'rxjs';
2
+ import { Observable, debounceTime, throttleTime, concatMap, from } from 'rxjs';
3
+ import { isFunction } from '../is/is-function.mjs';
3
4
 
4
- var _Trigger_next, _Trigger_error, _Trigger_complete;
5
+ var _Trigger_subscriber, _Trigger_subscription, _Trigger_callback, _Trigger_pipeable, _Trigger_wait, _Trigger_type;
5
6
  class Trigger {
6
- constructor() {
7
- _Trigger_next.set(this, void 0);
8
- _Trigger_error.set(this, void 0);
9
- _Trigger_complete.set(this, void 0);
10
- __classPrivateFieldSet(this, _Trigger_next, null, "f");
11
- __classPrivateFieldSet(this, _Trigger_error, null, "f");
12
- __classPrivateFieldSet(this, _Trigger_complete, null, "f");
7
+ constructor(debouncer, wait, type = 'debounce') {
8
+ var _a;
9
+ _Trigger_subscriber.set(this, void 0);
10
+ _Trigger_subscription.set(this, void 0);
11
+ _Trigger_callback.set(this, void 0);
12
+ _Trigger_pipeable.set(this, void 0);
13
+ _Trigger_wait.set(this, void 0);
14
+ _Trigger_type.set(this, void 0);
15
+ __classPrivateFieldSet(this, _Trigger_subscriber, null, "f");
16
+ __classPrivateFieldSet(this, _Trigger_subscription, null, "f");
17
+ __classPrivateFieldSet(this, _Trigger_callback, debouncer.callback, "f");
18
+ __classPrivateFieldSet(this, _Trigger_pipeable, (_a = debouncer.pipeable) !== null && _a !== void 0 ? _a : ((...args) => args), "f");
19
+ __classPrivateFieldSet(this, _Trigger_wait, wait, "f");
20
+ __classPrivateFieldSet(this, _Trigger_type, type, "f");
13
21
  }
14
- set use(subscriber) {
15
- __classPrivateFieldSet(this, _Trigger_next, (value) => subscriber.next(value), "f");
16
- __classPrivateFieldSet(this, _Trigger_error, (error) => subscriber.error(error), "f");
17
- __classPrivateFieldSet(this, _Trigger_complete, () => subscriber.complete(), "f");
22
+ /**
23
+ * @description
24
+ * create observable
25
+ * used for debounce/throttle handler
26
+ */
27
+ use() {
28
+ __classPrivateFieldSet(this, _Trigger_subscription, new Observable((subscriber) => {
29
+ __classPrivateFieldSet(this, _Trigger_subscriber, subscriber, "f");
30
+ })
31
+ .pipe(__classPrivateFieldGet(this, _Trigger_type, "f") === 'debounce' ? debounceTime(__classPrivateFieldGet(this, _Trigger_wait, "f")) : throttleTime(__classPrivateFieldGet(this, _Trigger_wait, "f")), concatMap((args) => from(Promise.resolve(__classPrivateFieldGet(this, _Trigger_pipeable, "f").call(this, ...args)))))
32
+ .subscribe((args) => {
33
+ var _a;
34
+ (_a = __classPrivateFieldGet(this, _Trigger_callback, "f")) === null || _a === void 0 ? void 0 : _a.call(this, ...args);
35
+ }), "f");
36
+ return this;
18
37
  }
19
- next(value) {
38
+ /**
39
+ * @description
40
+ * flush
41
+ * complete all debounced handlers
42
+ * in relax, we will create a new observable for next debounce/throttle handler
43
+ * so it will make some async problems, pls attention
44
+ */
45
+ flush() {
20
46
  var _a;
21
- (_a = __classPrivateFieldGet(this, _Trigger_next, "f")) === null || _a === void 0 ? void 0 : _a.call(this, value);
47
+ (_a = __classPrivateFieldGet(this, _Trigger_subscriber, "f")) === null || _a === void 0 ? void 0 : _a.complete();
48
+ this.use();
22
49
  }
23
- error(error) {
24
- var _a;
25
- (_a = __classPrivateFieldGet(this, _Trigger_error, "f")) === null || _a === void 0 ? void 0 : _a.call(this, error);
50
+ /**
51
+ * @description
52
+ * abort
53
+ * cancel all debounced handlers
54
+ * in relax, we will create a new observable for next debounce/throttle handler
55
+ */
56
+ abort() {
57
+ var _a, _b;
58
+ (_a = __classPrivateFieldGet(this, _Trigger_subscription, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
59
+ (_b = __classPrivateFieldGet(this, _Trigger_subscriber, "f")) === null || _b === void 0 ? void 0 : _b.error();
60
+ this.use();
26
61
  }
27
- complete() {
62
+ /**
63
+ * @description
64
+ * trigger value
65
+ */
66
+ next(...args) {
28
67
  var _a;
29
- (_a = __classPrivateFieldGet(this, _Trigger_complete, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
68
+ (_a = __classPrivateFieldGet(this, _Trigger_subscriber, "f")) === null || _a === void 0 ? void 0 : _a.next(args);
30
69
  }
31
70
  }
32
- _Trigger_next = new WeakMap(), _Trigger_error = new WeakMap(), _Trigger_complete = new WeakMap();
33
- const debounce = (callback, wait) => {
34
- const trigger = new Trigger();
35
- const listened = new Observable((subscriber) => {
36
- trigger.use = subscriber;
37
- })
38
- .pipe(debounceTime(wait))
39
- .subscribe((value) => {
40
- callback(value);
41
- });
71
+ _Trigger_subscriber = new WeakMap(), _Trigger_subscription = new WeakMap(), _Trigger_callback = new WeakMap(), _Trigger_pipeable = new WeakMap(), _Trigger_wait = new WeakMap(), _Trigger_type = new WeakMap();
72
+ const debounce = (debouncer, wait) => {
73
+ const _isFunction = isFunction(debouncer);
74
+ const trigger = new Trigger({
75
+ callback: _isFunction ? debouncer : debouncer.callback,
76
+ pipeable: _isFunction ? null : debouncer.pipeable
77
+ }, wait).use();
42
78
  return {
43
- next: (value) => trigger.next(value),
44
- complete: () => trigger.complete(),
45
- cancel: () => {
46
- listened.unsubscribe();
47
- trigger.error();
48
- }
79
+ next: (...args) => trigger.next(...args),
80
+ flush: () => trigger.flush(),
81
+ abort: () => trigger.abort()
49
82
  };
50
83
  };
51
84
 
@@ -1,3 +1,5 @@
1
- import { type Debounced } from './debounce';
2
- export type Throttled<T extends Function> = Debounced<T>;
3
- export declare const throttle: <T extends Function>(callback: T, duration: number) => Throttled<T>;
1
+ import { type Debounced, type Debouncer } from './debounce';
2
+ import { type Callable } from '../hooks/use-event';
3
+ export type Throttled<T extends Callable> = Debounced<T>;
4
+ export type Throttler<T extends Callable, R extends Array<unknown> = Parameters<T>> = Debouncer<T, R>;
5
+ export declare const throttle: <T extends Callable, R extends unknown[] = Parameters<T>>(throttler: Throttler<T, R> | T, duration: number) => Throttled<T>;
@@ -1,22 +1,16 @@
1
- import { Observable, throttleTime } from 'rxjs';
2
1
  import { Trigger } from './debounce.mjs';
2
+ import { isFunction } from '../is/is-function.mjs';
3
3
 
4
- const throttle = (callback, duration) => {
5
- const trigger = new Trigger();
6
- const listened = new Observable((subscriber) => {
7
- trigger.use = subscriber;
8
- })
9
- .pipe(throttleTime(duration))
10
- .subscribe((value) => {
11
- callback(value);
12
- });
4
+ const throttle = (throttler, duration) => {
5
+ const _isFunction = isFunction(throttler);
6
+ const trigger = new Trigger({
7
+ callback: _isFunction ? throttler : throttler.callback,
8
+ pipeable: _isFunction ? null : throttler.pipeable
9
+ }, duration, 'throttle').use();
13
10
  return {
14
- next: (value) => trigger.next(value),
15
- complete: () => trigger.complete(),
16
- cancel: () => {
17
- listened.unsubscribe();
18
- trigger.error();
19
- }
11
+ next: (...args) => trigger.next(...args),
12
+ flush: () => trigger.flush(),
13
+ abort: () => trigger.abort()
20
14
  };
21
15
  };
22
16
 
@@ -2,4 +2,4 @@
2
2
  * @description
3
3
  * convert any type data to a array
4
4
  */
5
- export declare const toArray: <T extends unknown[]>(value: unknown) => T;
5
+ export declare const toArray: <T extends unknown = unknown>(value: T | Array<T>) => Array<T>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aiszlab/relax",
3
- "version": "1.2.29",
3
+ "version": "1.2.31",
4
4
  "description": "react utils collection",
5
5
  "type": "module",
6
6
  "exports": {
@@ -25,7 +25,7 @@
25
25
  "rxjs": "^7.8.1"
26
26
  },
27
27
  "devDependencies": {
28
- "@babel/core": "^7.22.5",
28
+ "@babel/core": "^7.24.0",
29
29
  "@babel/preset-env": "^7.24.0",
30
30
  "@babel/preset-typescript": "^7.22.5",
31
31
  "@rollup/plugin-babel": "^6.0.3",
@@ -34,8 +34,8 @@
34
34
  "@types/react": "^18",
35
35
  "@types/react-dom": "^18",
36
36
  "@types/react-is": "^18",
37
- "rollup": "^4.12.0",
38
- "typescript": "^5.1.3"
37
+ "rollup": "^4.13.0",
38
+ "typescript": "^5.4.2"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "^18",
@@ -53,5 +53,6 @@
53
53
  "publishConfig": {
54
54
  "access": "public",
55
55
  "registry": "https://registry.npmjs.org/"
56
- }
56
+ },
57
+ "homepage": "https://aisz.dev/hooks"
57
58
  }
@@ -1 +0,0 @@
1
- export type Arguments<T extends Function> = T extends (...args: infer A) => unknown ? A : [];