Added useAsyncCallback hook;

Author: DigitalBrainJS

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

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

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
 }

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;
   }
 
 

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>
         );
     }

playground/src/TestComponent.js renamed to 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>;
 }
+

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>;
+}