Added useAsyncCallback hook;

DigitalBrainJS · DigitalBrainJS · commit baca6a73792c · 2021-01-06T02:29:46.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.2.0] - 2021-01-06
+
+### Added 
+- `useAsyncCallback` hook
+- typings
+
+### Updated
+- `useAsyncEffect` now returns a cancel function directly instead of an array with it.
+
 ## [0.1.0] - 2021-01-04
 
 ### Added
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 ![David](https://img.shields.io/david/DigitalBrainJS/use-async-effect)
 [![Stars](https://badgen.net/github/stars/DigitalBrainJS/use-async-effect)](https://github.com/DigitalBrainJS/use-async-effect/stargazers)
 
-## useAsyncEffect2
+## useAsyncEffect2 :snowflake:
 The library provides a React hook with ability to automatically cancel asynchronous code inside it.
 It just makes it easier to write cancelable asynchronous code that doesn't cause 
 the following React issue when unmounting, if your asynchronous tasks that change state are pending:
@@ -16,7 +16,7 @@ To fix, cancel all subscriptions and asynchronous task in "a useEffect cleanup f
 It uses [c-promise2](https://www.npmjs.com/package/c-promise2) to make it work. 
 When it used in conjunction with other libraries that work with the CPromise,
 such as [cp-fetch](https://www.npmjs.com/package/cp-fetch) and [cp-axios](https://www.npmjs.com/package/cp-axios),
-you get a powerful tool for building asynchronous logic for your components.
+you get a powerful tool for building asynchronous logic of your React components.
 You just have to use `generators` instead of an async function to make your code cancellable, 
 but basically, that just means you will have to use `yield` instead of `await` keyword.
 ## Installation :hammer:
@@ -50,7 +50,7 @@ function JSONViewer(props) {
     return <div>{text}</div>;
 }
 ````
-Example with timeout & error handling ([Live demo](https://codesandbox.io/s/async-effect-demo1-vho29)):
+Example with a timeout & error handling ([Live demo](https://codesandbox.io/s/async-effect-demo1-vho29)):
 ````jsx
 import React from "react";
 import {useState} from "react";
@@ -88,13 +88,65 @@ export default function TestComponent(props) {
     return <div>{text}</div>;
 }
 ````
+useAsyncCallback example ([Live demo](https://codesandbox.io/s/use-async-callback-bzpek?file=/src/TestComponent.js)):
+````javascript
+import React from "react";
+import {useState} from "react";
+import {useAsyncCallback} from "use-async-effect2";
+import {CPromise} from "c-promise2";
+
+export default function TestComponent(props) {
+    const [text, setText] = useState("");
+
+    const asyncRoutine= useAsyncCallback(function*(v){
+        setText(`Stage1`);
+        yield CPromise.delay(1000);
+        setText(`Stage2`);
+        yield CPromise.delay(1000);
+        setText(`Stage3`);
+        yield CPromise.delay(1000);
+        setText(`Done`);
+        return v;
+    })
+
+    const onClick= ()=>{
+        asyncRoutine(123).then(value=>{
+            console.log(`Result: ${value}`)
+        }, console.warn);
+    }
+
+    return <div><button onClick={onClick}>Run async job</button><div>{text}</div></div>;
+}
+````
+
 To learn more about available features, see the c-promise2 [documentation](https://www.npmjs.com/package/c-promise2).
 
 ## Playground
 
 To get it, clone the repository and run `npm run playground` in the project directory or
 just use the codesandbox [demo](https://codesandbox.io/s/async-effect-demo1-vho29) to play with the library online.
 
+## API
+
+### useAsyncEffect(generatorFn, deps?): (function cancel():boolean)
+A React hook based on [`useEffect`](https://reactjs.org/docs/hooks-effect.html), that resolves passed generator as asynchronous function. 
+The asynchronous generator sequence and its promise of the result will be canceled if 
+the effect cleanup process is started before it completes.
+The generator can return a cleanup function similar to the `useEffect` hook. 
+- `generatorFn(...userArgs, scope: CPromise)` : `GeneratorFunction` - generator to resolve as an async function. 
+The last argument passed to this function and `this` refer to the CPromise instance.
+- `deps?: any[]` - effect dependencies 
+
+### useAsyncCallback(generatorFn, deps?): CPromiseAsyncFunction
+### useAsyncCallback(generatorFn, options?: object): CPromiseAsyncFunction
+This hook makes an async callback that can be automatically canceled on unmount or by user request.
+#### options:
+- `deps: any[]`
+- `combine:boolean` - allow only single thread running. 
+All subsequent callings will return promises that subscribed to the pending promise of the first call.
+- `cancelPrevious:boolean` - cancel the previous pending async function before running a new one. 
+- `concurrency: number=0` - set concurrency limit for simultaneous calls.
+
 ## Related projects
 - [c-promise2](https://www.npmjs.com/package/c-promise2) - promise with cancellation, decorators, timeouts, progress capturing, pause and user signals support
 - [cp-axios](https://www.npmjs.com/package/cp-axios) - a simple axios wrapper that provides an advanced cancellation api
diff --git a/lib/use-async-effect.js b/lib/use-async-effect.js
@@ -1,4 +1,4 @@
-const {useEffect} = require("react");
+const {useEffect, useCallback, useRef} = require("react");
 const {CPromise, CanceledError} = require("c-promise2");
 
 const {E_REASON_UNMOUNTED} = CanceledError.registerErrors({
@@ -26,8 +26,8 @@ const useAsyncEffect = (generator, deps) => {
                 throw TypeError('useAsyncEffect handler should return a function');
             }
             cb = _cb;
-        }, err=>{
-            if(!CanceledError.isCanceledError(err)){
+        }, err => {
+            if (!CanceledError.isCanceledError(err)) {
                 console.error(err);
             }
         });
@@ -39,12 +39,122 @@ const useAsyncEffect = (generator, deps) => {
         }
     }, deps);
 
-    return [
-        (reason) => !!promise && promise.cancel(reason)
-    ]
+    return (reason) => !!promise && promise.cancel(reason);
+}
+
+function asyncBottleneck(fn, concurrency = 1) {
+    const queue = [];
+    let pending = 0;
+    return (...args) => new CPromise(resolve => pending === concurrency ? queue.push(resolve) : resolve())
+        .then(() => {
+            pending++;
+            return fn(...args).finally((value) => {
+                pending--;
+                queue.length && queue.shift()();
+                return value;
+            })
+        });
+}
+
+function asyncBottleneck2(fn, concurrency = 1) {
+    const queue = [];
+    let pending = 0;
+    return async (...args) => {
+        if (pending === concurrency) {
+            await new Promise((resolve) => queue.push(resolve));
+        }
+
+        pending++;
+
+        return fn(...args).then((value) => {
+            pending--;
+            queue.length && queue.shift()();
+            return value;
+        });
+    };
+}
+
+const useAsyncCallback = (generator, options) => {
+    let dataRef = useRef({
+        promises: [],
+        queue: [],
+        pending: 0
+    });
+
+    const {
+        current
+    } = dataRef;
+
+    const {
+        deps = [],
+        combine = false,
+        cancelPrevious = false,
+        concurrency = 0
+    } = options && Array.isArray(options) ? {deps: options} : options || {};
+
+    const callback = useCallback((...args) => {
+        const {promises, queue} = current;
+
+        if (combine && promises.length) {
+            return promises[0].finally(() => {
+            });
+        }
+
+        const resolveGenerator = () => CPromise.resolveGenerator(generator, {args, resolveSignatures: true});
+
+        if (concurrency) {
+            const promise= new CPromise(resolve => {
+                if (current.pending === concurrency) {
+                    return queue.push(resolve);
+                }
+
+                current.pending++;
+                resolve();
+            })
+                .then(() => resolveGenerator())
+                .then((value) => {
+                    current.pending--;
+                    queue.length && queue.shift()();
+                    return value;
+                });
+
+            promises.push(promise);
+
+            return promise;
+        } else if (cancelPrevious) {
+            cancel();
+        }
+
+        const promise= resolveGenerator().finally(()=>{
+            const index = promises.indexOf(promise);
+            index !== -1 && promises.splice(index, 1);
+        });
+
+        promises.push(promise);
+
+        return combine? promise.finally(()=>{}) : promise;
+    });
+
+    const cancel = (reason) => {
+        current.promises.forEach(promise => promise.cancel(reason));
+        current.promises = [];
+    }
+
+    useEffect(() => {
+        return () => cancel(E_REASON_UNMOUNTED);
+    }, deps);
+
+    if (options != null && typeof options !== 'object') {
+        throw TypeError('options must be an object or array');
+    }
+
+    callback.cancel = cancel;
+
+    return callback;
 }
 
 module.exports = {
     useAsyncEffect,
+    useAsyncCallback,
     E_REASON_UNMOUNTED
 }
diff --git a/playground/index.html b/playground/index.html
@@ -14,8 +14,22 @@
     margin-left: 5px;
   }
 
-  #app>div{
-    margin: 10px 0px ;
+  .component{
+      margin: 20px 0px;
+      border: 1px solid black;
+      width: 300px;
+      padding: 5px;
+  }
+
+  .component>*{
+      margin: 5px;
+  }
+
+  .component>.caption{
+      background-color: #535353;
+      color: white;
+      margin: 0px;
+      padding: 5px 10px;
   }
 
 
diff --git a/playground/src/App.js b/playground/src/App.js
@@ -1,5 +1,6 @@
 import React from "react";
-import TestComponent from "./TestComponent";
+import TestComponent1 from "./TestComponent1";
+import TestComponent2 from "./TestComponent2";
 
 export default class App extends React.Component {
     constructor(props) {
@@ -28,8 +29,9 @@ export default class App extends React.Component {
             <div key={this.state.timestamp} id="app">
                 <input className="field-url" type="text" value={this.state._url} onChange={this.handleChange} />
                 <button className="btn-change" onClick={this.onFetchClick} disabled={this.state.url==this.state._url}>Change URL to Fetch</button>
-                <TestComponent url={this.state.url}></TestComponent>
-                <button onClick={this.onClick}>Remount</button>
+                <TestComponent1 url={this.state.url}></TestComponent1>
+                <TestComponent2 url={this.state.url}></TestComponent2>
+                <div><button onClick={this.onClick}>Remount all components</button></div>
             </div>
         );
     }
diff --git a/playground/src/TestComponent1.js b/playground/src/TestComponent1.js
@@ -4,10 +4,10 @@ import {useAsyncEffect, E_REASON_UNMOUNTED} from "../../lib/use-async-effect";
 import {CanceledError} from "c-promise2";
 import cpFetch from "cp-fetch";
 
-export default function TestComponent(props) {
+export default function TestComponent1(props) {
     const [text, setText] = useState("");
 
-    const [cancel]= useAsyncEffect(function* ({onCancel}) {
+    const cancel= useAsyncEffect(function* ({onCancel}) {
         console.log("mount");
 
         this.timeout(5000);
@@ -31,5 +31,6 @@ export default function TestComponent(props) {
 
     //setTimeout(()=> cancel("Ooops!"), 1000);
 
-    return <div>{text}</div>;
+    return <div className="component"><div className="caption">useAsyncEffect demo:</div><div>{text}</div></div>;
 }
+
diff --git a/playground/src/TestComponent2.js b/playground/src/TestComponent2.js
@@ -0,0 +1,27 @@
+import React from "react";
+import {useState} from "react";
+import {useAsyncCallback} from "../../lib/use-async-effect";
+import {CPromise} from "c-promise2";
+
+export default function TestComponent2() {
+    const [text, setText] = useState("");
+
+    const asyncRoutine= useAsyncCallback(function*(v){
+        setText(`Stage1`);
+        yield CPromise.delay(1000);
+        setText(`Stage2`);
+        yield CPromise.delay(1000);
+        setText(`Stage3`);
+        yield CPromise.delay(1000);
+        setText(`Done`);
+        return v;
+    })
+
+    const onClick= ()=>{
+        asyncRoutine(123).then(value=>{
+            console.log(`Result: ${value}`)
+        }, console.warn);
+    }
+
+    return <div className="component"><div className="caption">useAsyncCallback demo:</div><button onClick={onClick}>Run async job</button><div>{text}</div></div>;
+}
diff --git a/test/src/index.js b/test/src/index.js
diff --git a/use-async-effect.d.ts b/use-async-effect.d.ts

-Original file line number
+Diff line change
 import React, {useState} from "react";
 import ReactDOM from "react-dom";
 -import {useAsyncEffect} from "../../lib/use-async-effect";
 +import {useAsyncEffect, useAsyncCallback} from "../../lib/use-async-effect";
 import CPromise from "c-promise2";
 const measureTime = () => {
+        }
         ReactDOM.render(
 -            <TestComponent></TestComponent>,
 +            <TestComponent/>,
             document.getElementById('root')
         );
     it("should handle cancellation", function (done) {
         let counter = 0;
 -        let time = measureTime();
         function TestComponent() {
             const [value, setValue] = useState(0);
 -            const [cancel] = useAsyncEffect(function* () {
 +            const cancel = useAsyncEffect(function* () {
                 yield CPromise.delay(200);
                 setValue(123);
                 yield CPromise.delay(200);
+        }
         ReactDOM.render(
 -            <TestComponent></TestComponent>,
 +            <TestComponent/>,
             document.getElementById('root')
         );
     })
 });
++
 +describe("useAsyncFn", function () {
 +    it("should decorate user generator to CPromise", function (done) {
 +        let called = false;
 +        let time = measureTime();
++
 +        function TestComponent() {
 +            const fn = useAsyncCallback(function* (a, b) {
 +                called = true;
 +                yield CPromise.delay(100);
 +                assert.deepStrictEqual([a, b], [1, 2]);
 +            });
++
 +            fn(1, 2).then(value => {
 +                assert.ok(called);
 +                if (time() < 100) {
 +                    assert.fail('early completion');
 +                }
++
 +                done();
 +            }, done);
++
 +            return <div>Test</div>
 +        }
++
 +        ReactDOM.render(
 +            <TestComponent/>,
 +            document.getElementById('root')
 +        );
 +    });
++
 +    it("should support concurrency limitation", function (done) {
 +        let called = false;
 +        let time = measureTime();
 +        let pending = 0;
 +        let counter = 0;
 +        const concurrency = 2;
++
 +        function TestComponent() {
 +            const fn = useAsyncCallback(function* () {
 +                if (++pending > concurrency) {
 +                    assert.fail('threads excess');
 +                }
 +                yield CPromise.delay(100);
 +                pending--;
 +                counter++;
 +            }, {concurrency});
++
 +            const promises = [];
++
 +            for (let i = 0; i < 10; i++) {
 +                promises.push(fn());
 +            }
++
 +            Promise.all(promises).then(() => {
 +                assert.strictEqual(counter, 10);
 +            }).then(() => done(), done);
++
 +            return <div>Test</div>
 +        }
++
 +        ReactDOM.render(
 +            <TestComponent/>,
 +            document.getElementById('root')
 +        );
 +    });
 +});
-Original file line number
+Diff line change
 +interface UseAsyncFnOptions {
 +    deps?: [],
 +    combine?: false,
 +    cancelPrevious?: false,
 +    concurrency?: 0
 +}
++
 +type CancelReason= string|Error;
++
 +export function useAsyncHook(generator: GeneratorFunction, deps?: any[]): ((reason?: CancelReason)=> boolean)
 +export function useAsyncCallback(generator: GeneratorFunction, deps?: any[]): ((reason?: CancelReason)=> boolean)
 +export function useAsyncCallback(generator: GeneratorFunction, options?: UseAsyncFnOptions): ((reason?: CancelReason)=> boolean)
 +export const E_REASON_UNMOUNTED: 'E_REASON_UNMOUNTED'
++