extra-react-hooks 0.6.4 → 0.6.6

package/README.md

@@ -113,6 +113,7 @@ function useIncrement(
 function useResizeObserver(
   callback: ResizeObserverCallback
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void
 ```
 
@@ -122,10 +123,12 @@ function useIntersectionObserver(
   callback: IntersectionObserverCallback
 , options: IntersectionObserverInit | undefined
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void
 function useIntersectionObserver(
   callback: IntersectionObserverCallback
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void
 ```
 

package/lib/use-effect-async.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { go } from '@blackglory/prelude';
 import { AbortController } from 'extra-abort';
-const abort = Symbol();
+const symbolAbort = Symbol();
 export function useEffectAsync(effect, deps) {
     useEffect(() => {
         const controller = new AbortController();
@@ -10,11 +10,11 @@ export function useEffectAsync(effect, deps) {
                 await effect(controller.signal);
             }
             catch (err) {
-                if (err !== abort)
+                if (err !== symbolAbort)
                     throw err;
             }
         });
-        return () => controller.abort();
+        return () => controller.abort(symbolAbort);
     }, deps);
 }
 //# sourceMappingURL=use-effect-async.js.map

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,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,KAAK,GAAG,MAAM,EAAE,CAAA;AAEtB,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,KAAK,KAAK;oBAAE,MAAM,GAAG,CAAA;aAC7B;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;IACjC,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,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,GAAG,MAAM,EAAE,CAAA;AAE5B,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,KAAK,WAAW;oBAAE,MAAM,GAAG,CAAA;aACnC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAC5C,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/lib/use-intersection-observer.d.ts

@@ -1,3 +1,3 @@
 import { RefObject, MutableRefObject } from 'react';
-export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options: IntersectionObserverInit | undefined, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
-export declare function useIntersectionObserver(callback: IntersectionObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
+export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options: IntersectionObserverInit | undefined, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;
+export declare function useIntersectionObserver(callback: IntersectionObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;

package/lib/use-intersection-observer.js

@@ -1,12 +1,26 @@
 import { useEffect } from 'react';
-import { isntNull } from '@blackglory/prelude';
+import { isArray, isntNull } from '@blackglory/prelude';
 export function useIntersectionObserver(...args) {
-    if (args.length === 2) {
-        const [callback, refs] = args;
-        return useIntersectionObserver(callback, undefined, refs);
+    switch (args.length) {
+        case 2: {
+            const [callback, refs] = args;
+            return useIntersectionObserver(callback, undefined, refs);
+        }
+        case 3: {
+            const [callback, optionsOrRefs, refsOrDeps] = args;
+            if (isArray(optionsOrRefs)) {
+                const refs = optionsOrRefs;
+                const deps = refsOrDeps;
+                return useIntersectionObserver(callback, undefined, refs, deps);
+            }
+            else {
+                const options = optionsOrRefs;
+                const refs = refsOrDeps;
+                return useIntersectionObserver(callback, options, refs);
+            }
+        }
     }
-    const [callback, options, refs] = args;
-    const deps = refs.map(x => x.current);
+    const [callback, options, refs, deps] = args;
     useEffect(() => {
         const observer = new IntersectionObserver(callback, options);
         refs

package/lib/use-intersection-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAW9C,MAAM,UAAU,uBAAuB,CAAC,GAAG,IASxC;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QACrB,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;QAE7B,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;KAC1D;IAED,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAGrC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAE5D,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAU,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAa/D,MAAM,UAAU,uBAAuB,CAAC,GAAG,IAWxC;IAED,QAAQ,IAAI,CAAC,MAAM,EAAE;QACnB,KAAK,CAAC,CAAC,CAAC;YACN,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;YAG7B,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;SAC1D;QACD,KAAK,CAAC,CAAC,CAAC;YACN,MAAM,CAAC,QAAQ,EAAE,aAAa,EAAE,UAAU,CAAC,GAAG,IAAI,CAAA;YAClD,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;gBAC1B,MAAM,IAAI,GAAG,aAAa,CAAA;gBAC1B,MAAM,IAAI,GAAG,UAA8C,CAAA;gBAG3D,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;aAChE;iBAAM;gBACL,MAAM,OAAO,GAAG,aAAa,CAAA;gBAC7B,MAAM,IAAI,GAAG,UAA2E,CAAA;gBAGxF,OAAO,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,CAAA;aACxD;SACF;KACF;IAED,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IAG5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAE5D,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/lib/use-resize-observer.d.ts

@@ -1,2 +1,2 @@
 import { RefObject, MutableRefObject } from 'react';
-export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
+export declare function useResizeObserver(callback: ResizeObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>, deps?: React.DependencyList): void;

package/lib/use-resize-observer.js

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { isntNull } from '@blackglory/prelude';
-export function useResizeObserver(callback, refs) {
-    const deps = refs.map(x => x.current);
+export function useResizeObserver(callback, refs, deps) {
     useEffect(() => {
         const observer = new ResizeObserver(callback);
         refs

package/lib/use-resize-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resize-observer.js","sourceRoot":"","sources":["../src/use-resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,UAAU,iBAAiB,CAC/B,QAAgC,EAChC,IAAmE;IAEnE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAA;QAE7C,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
+{"version":3,"file":"use-resize-observer.js","sourceRoot":"","sources":["../src/use-resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,UAAU,iBAAiB,CAC/B,QAAgC,EAChC,IAAmE,EACnE,IAA2B;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAA;QAE7C,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-hooks",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "",
   "keywords": [],
   "files": [

package/src/use-effect-async.ts

@@ -2,7 +2,7 @@ import { useEffect, DependencyList } from 'react'
 import { go } from '@blackglory/prelude'
 import { AbortController } from 'extra-abort'
 
-const abort = Symbol()
+const symbolAbort = Symbol()
 
 export function useEffectAsync(
   effect: (signal: AbortSignal) => Promise<void>
@@ -15,10 +15,10 @@ export function useEffectAsync(
       try {
         await effect(controller.signal)
       } catch (err) {
-        if (err !== abort) throw err
+        if (err !== symbolAbort) throw err
       }
     })
 
-    return () => controller.abort()
+    return () => controller.abort(symbolAbort)
   }, deps)
 }

package/src/use-intersection-observer.ts

@@ -1,34 +1,56 @@
 import { useEffect, RefObject, MutableRefObject } from 'react'
-import { isntNull } from '@blackglory/prelude'
+import { assert, isArray, isntNull } from '@blackglory/prelude'
 
 export function useIntersectionObserver(
   callback: IntersectionObserverCallback
 , options: IntersectionObserverInit | undefined
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void
 export function useIntersectionObserver(
   callback: IntersectionObserverCallback
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void
 export function useIntersectionObserver(...args:
 | [
     callback: IntersectionObserverCallback
   , options: IntersectionObserverInit | undefined
   , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  , deps?: React.DependencyList
   ]
 | [
     callback: IntersectionObserverCallback
   , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+  , deps?: React.DependencyList
   ]
 ): void {
-  if (args.length === 2) {
-    const [callback, refs] = args
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useIntersectionObserver(callback, undefined, refs)
+  switch (args.length) {
+    case 2: {
+      const [callback, refs] = args
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useIntersectionObserver(callback, undefined, refs)
+    }
+    case 3: {
+      const [callback, optionsOrRefs, refsOrDeps] = args
+      if (isArray(optionsOrRefs)) {
+        const refs = optionsOrRefs
+        const deps = refsOrDeps as React.DependencyList | undefined
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useIntersectionObserver(callback, undefined, refs, deps)
+      } else {
+        const options = optionsOrRefs
+        const refs = refsOrDeps as Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useIntersectionObserver(callback, options, refs)
+      }
+    }
   }
 
-  const [callback, options, refs] = args
-  const deps = refs.map(x => x.current)
+  const [callback, options, refs, deps] = args
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/src/use-resize-observer.ts

@@ -4,9 +4,8 @@ import { isntNull } from '@blackglory/prelude'
 export function useResizeObserver(
   callback: ResizeObserverCallback
 , refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
+, deps?: React.DependencyList
 ): void {
-  const deps = refs.map(x => x.current)
-
   useEffect(() => {
     const observer = new ResizeObserver(callback)