extra-react-hooks 0.6.8 → 0.7.0

package/README.md

@@ -67,12 +67,12 @@ function useEffectAsync(
 ): void
 ```
 
-### useCallbackAsync
+### useAbortableCallback
 ```ts
-function useCallbackAsync<Args extends unknown[]>(
-  callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>
+function useAbortableCallback<Args extends unknown[], Result>(
+  callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
 , deps: DependencyList
-): (...args: Args) => void
+): (...args: [...args: Args, signal: AbortSignal]) => Promise<Result>
 ```
 
 ### useUpdateEffect
@@ -185,3 +185,11 @@ function useGetSet<T>(
   initialValue: T
 ): [get: () => T, set: (value: T) => void]
 ```
+
+### useIsomorphicLayoutEffect
+```ts
+function useIsomorphicLayoutEffect(
+  effect: EffectCallback
+, deps?: DependencyList
+): void
+```

package/lib/index.d.ts

@@ -6,7 +6,7 @@ export * from './use-mount.js';
 export * from './use-mount-async.js';
 export * from './use-unmount.js';
 export * from './use-effect-async.js';
-export * from './use-callback-async.js';
+export * from './use-abortable-callback.js';
 export * from './use-update-effect.js';
 export * from './use-single-selection.js';
 export * from './use-multiple-selection.js';
@@ -20,3 +20,4 @@ export * from './use-finite-state-machine.js';
 export * from './use-iife.js';
 export * from './use-memo-with-cleanup.js';
 export * from './use-get-set.js';
+export * from './use-isomorphic-layout-effect.js';

package/lib/index.js

@@ -6,7 +6,7 @@ export * from './use-mount.js';
 export * from './use-mount-async.js';
 export * from './use-unmount.js';
 export * from './use-effect-async.js';
-export * from './use-callback-async.js';
+export * from './use-abortable-callback.js';
 export * from './use-update-effect.js';
 export * from './use-single-selection.js';
 export * from './use-multiple-selection.js';
@@ -20,4 +20,5 @@ export * from './use-finite-state-machine.js';
 export * from './use-iife.js';
 export * from './use-memo-with-cleanup.js';
 export * from './use-get-set.js';
+export * from './use-isomorphic-layout-effect.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA"}

package/lib/use-abortable-callback.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare function useAbortableCallback<Args extends unknown[], Result>(callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>, deps: DependencyList): (...args: [...args: Args, signal: AbortSignal]) => Promise<Result>;

package/lib/use-abortable-callback.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { AbortController, raceAbortSignals } from 'extra-abort';
+import { useMemoWithCleanup } from './use-memo-with-cleanup.js';
+export function useAbortableCallback(callback, deps) {
+    const controller = useMemoWithCleanup(() => new AbortController(), controller => controller.abort(), deps);
+    return useCallback(async (...args) => {
+        const signal = raceAbortSignals([
+            args[args.length - 1],
+            controller.signal
+        ]);
+        signal.throwIfAborted();
+        const realArgs = args.slice(0, -1);
+        return await callback(...realArgs, signal);
+    }, [controller, ...deps]);
+}
+//# sourceMappingURL=use-abortable-callback.js.map

package/lib/use-abortable-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-abortable-callback.js","sourceRoot":"","sources":["../src/use-abortable-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,UAAU,oBAAoB,CAClC,QAAgF,EAChF,IAAoB;IAEpB,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAChC,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,KAAK,EAAE,GAAG,IAA0C,EAAE,EAAE;QACzE,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAgB;YACpC,UAAU,CAAC,MAAM;SAClB,CAAC,CAAA;QACF,MAAM,CAAC,cAAc,EAAE,CAAA;QAEvB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAS,CAAA;QAE1C,OAAO,MAAM,QAAQ,CAAC,GAAG,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAA;AAC3B,CAAC"}

package/lib/use-effect-async.js

@@ -9,6 +9,7 @@ export function useEffectAsync(effect, deps) {
         const controller = new AbortController();
         go(async () => {
             try {
+                controller.signal.throwIfAborted();
                 await effect(controller.signal);
             }
             catch (err) {

package/lib/use-effect-async.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-effect-async.js","sourceRoot":"","sources":["../src/use-effect-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,kBAAmB,SAAQ,WAAW;CAAG;AAE/C,MAAM,UAAU,cAAc,CAC5B,MAA8C,EAC9C,IAAqB;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAExC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;aAChC;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,YAAY,kBAAkB,EAAE;oBACrC,IAAI,EAAE,CAAA;iBACP;qBAAM;oBACL,MAAM,GAAG,CAAA;iBACV;aACF;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAA;IACzD,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-effect-async.js","sourceRoot":"","sources":["../src/use-effect-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,kBAAmB,SAAQ,WAAW;CAAG;AAE/C,MAAM,UAAU,cAAc,CAC5B,MAA8C,EAC9C,IAAqB;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAExC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,UAAU,CAAC,MAAM,CAAC,cAAc,EAAE,CAAA;gBAElC,MAAM,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;aAChC;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,YAAY,kBAAkB,EAAE;oBACrC,IAAI,EAAE,CAAA;iBACP;qBAAM;oBACL,MAAM,GAAG,CAAA;iBACV;aACF;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAA;IACzD,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/lib/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/lib/use-isomorphic-layout-effect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof window === 'undefined'
+    ? useEffect
+    : useLayoutEffect;
+//# sourceMappingURL=use-isomorphic-layout-effect.js.map

package/lib/use-isomorphic-layout-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-isomorphic-layout-effect.js","sourceRoot":"","sources":["../src/use-isomorphic-layout-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,CAAC,MAAM,yBAAyB,GACpC,OAAO,MAAM,KAAK,WAAW;IAC/B,CAAC,CAAC,SAAS;IACX,CAAC,CAAC,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "",
   "keywords": [],
   "files": [
@@ -12,7 +12,7 @@
   "types": "lib/index.d.ts",
   "sideEffects": false,
   "engines": {
-    "node": ">=16"
+    "node": ">=18.17.0"
   },
   "repository": "git@github.com:BlackGlory/extra-react-hooks.git",
   "author": "BlackGlory <woshenmedoubuzhidao@blackglory.me>",
@@ -54,6 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
+    "return-style": "^3.0.1",
     "rimraf": "^4.3.0",
     "standard-version": "^9.3.2",
     "ts-loader": "^9.4.3",
@@ -66,9 +67,10 @@
   },
   "dependencies": {
     "@blackglory/errors": "^3.0.3",
-    "@blackglory/prelude": "^0.3.3",
-    "extra-abort": "^0.3.7",
+    "@blackglory/prelude": "^0.4.0",
+    "extra-abort": "^0.4.0",
     "extra-fsm": "^0.2.1",
+    "extra-utils": "^5.17.0",
     "rxjs": "^7.8.1"
   },
   "peerDependencies": {

package/src/index.ts

@@ -6,7 +6,7 @@ export * from './use-mount.js'
 export * from './use-mount-async.js'
 export * from './use-unmount.js'
 export * from './use-effect-async.js'
-export * from './use-callback-async.js'
+export * from './use-abortable-callback.js'
 export * from './use-update-effect.js'
 export * from './use-single-selection.js'
 export * from './use-multiple-selection.js'
@@ -20,3 +20,4 @@ export * from './use-finite-state-machine.js'
 export * from './use-iife.js'
 export * from './use-memo-with-cleanup.js'
 export * from './use-get-set.js'
+export * from './use-isomorphic-layout-effect.js'

package/src/use-abortable-callback.ts

@@ -0,0 +1,26 @@
+import { useCallback, DependencyList } from 'react'
+import { AbortController, raceAbortSignals } from 'extra-abort'
+import { useMemoWithCleanup } from './use-memo-with-cleanup.js'
+
+export function useAbortableCallback<Args extends unknown[], Result>(
+  callback: (...args: [...args: Args, signal: AbortSignal]) => PromiseLike<Result>
+, deps: DependencyList
+): (...args: [...args: Args, signal: AbortSignal]) => Promise<Result> {
+  const controller = useMemoWithCleanup(
+    () => new AbortController()
+  , controller => controller.abort()
+  , deps
+  )
+
+  return useCallback(async (...args: [...args: Args, signal: AbortSignal]) => {
+    const signal = raceAbortSignals([
+      args[args.length - 1] as AbortSignal
+    , controller.signal
+    ])
+    signal.throwIfAborted()
+
+    const realArgs = args.slice(0, -1) as Args
+
+    return await callback(...realArgs, signal)
+  }, [controller, ...deps])
+}

package/src/use-effect-async.ts

@@ -14,6 +14,8 @@ export function useEffectAsync(
 
     go(async () => {
       try {
+        controller.signal.throwIfAborted()
+
         await effect(controller.signal)
       } catch (err) {
         if (err instanceof InternalAbortError) {

package/src/use-isomorphic-layout-effect.ts

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react'
+
+export const useIsomorphicLayoutEffect =
+  typeof window === 'undefined'
+? useEffect // SSR
+: useLayoutEffect // Browser

package/lib/use-callback-async.d.ts

@@ -1,2 +0,0 @@
-import { DependencyList } from 'react';
-export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;

package/lib/use-callback-async.js

@@ -1,26 +0,0 @@
-import { useCallback } from 'react';
-import { go, pass } from '@blackglory/prelude';
-import { AbortController } from 'extra-abort';
-import { useMemoWithCleanup } from './use-memo-with-cleanup.js';
-import { CustomError } from '@blackglory/errors';
-class InternalAbortError extends CustomError {
-}
-export function useCallbackAsync(callback, deps) {
-    const controller = useMemoWithCleanup(() => new AbortController(), controller => controller.abort(new InternalAbortError()), deps);
-    return useCallback((...args) => {
-        go(async () => {
-            try {
-                await callback(...args, controller.signal);
-            }
-            catch (err) {
-                if (err instanceof InternalAbortError) {
-                    pass();
-                }
-                else {
-                    throw err;
-                }
-            }
-        });
-    }, deps);
-}
-//# sourceMappingURL=use-callback-async.js.map

package/lib/use-callback-async.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-callback-async.js","sourceRoot":"","sources":["../src/use-callback-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,kBAAmB,SAAQ,WAAW;CAAG;AAE/C,MAAM,UAAU,gBAAgB,CAC9B,QAA0E,EAC1E,IAAoB;IAEpB,MAAM,UAAU,GAAG,kBAAkB,CACnC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,EAC3B,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC,EACxD,IAAI,CACL,CAAA;IAED,OAAO,WAAW,CAAC,CAAC,GAAG,IAAU,EAAE,EAAE;QACnC,EAAE,CAAC,KAAK,IAAI,EAAE;YACZ,IAAI;gBACF,MAAM,QAAQ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;aAC3C;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,GAAG,YAAY,kBAAkB,EAAE;oBACrC,IAAI,EAAE,CAAA;iBACP;qBAAM;oBACL,MAAM,GAAG,CAAA;iBACV;aACF;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/src/use-callback-async.ts

@@ -1,32 +0,0 @@
-import { useCallback, DependencyList } from 'react'
-import { go, pass } from '@blackglory/prelude'
-import { AbortController } from 'extra-abort'
-import { useMemoWithCleanup } from './use-memo-with-cleanup.js'
-import { CustomError } from '@blackglory/errors'
-
-class InternalAbortError extends CustomError {}
-
-export function useCallbackAsync<Args extends unknown[]>(
-  callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>
-, deps: DependencyList
-): (...args: Args) => void {
-  const controller = useMemoWithCleanup(
-    () => new AbortController()
-  , controller => controller.abort(new InternalAbortError())
-  , deps
-  )
-
-  return useCallback((...args: Args) => {
-    go(async () => {
-      try {
-        await callback(...args, controller.signal)
-      } catch (err) {
-        if (err instanceof InternalAbortError) {
-          pass()
-        } else {
-          throw err
-        }
-      }
-    })
-  }, deps)
-}