Initial commit

Author: DigitalBrainJS

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {
+    }
+};

.gitignore

@@ -0,0 +1,9 @@
+/coverage/
+/.nyc_output/
+/dist/
+/node_modules/
+/trash/
+/.idea/
+/test/tests/decorators.js
+/test/tests/decorators.legacy.js
+/playground/dist/

.npmignore

@@ -0,0 +1,2 @@
+*
+!dist/**

.travis.yml

@@ -0,0 +1,8 @@
+sudo: false
+language: node_js
+node_js:
+    - "14"
+env:
+    - NODE_ENV=TEST
+script:
+    - npm run test

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+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.1.0] - 2021-01-04
+
+### Added
+- initial version

lib/use-async-effect.js

@@ -0,0 +1,47 @@
+const {useEffect} = require("react");
+const {CPromise, CanceledError} = require("c-promise2");
+
+const {E_REASON_UNMOUNTED} = CanceledError.registerErrors({
+    E_REASON_UNMOUNTED: 'unmounted'
+})
+
+const isGeneratorFn = (thing) => typeof thing === 'function' &&
+    thing.constructor &&
+    thing.constructor.name === 'GeneratorFunction';
+
+const useAsyncEffect = (generator, deps) => {
+    let _promise;
+
+    useEffect(() => {
+        if (!isGeneratorFn(generator)) {
+            throw TypeError('useAsyncEffect requires a generator as the first argument');
+        }
+
+        const promise = CPromise.resolveGenerator(generator, {resolveSignatures: true});
+        _promise = promise;
+
+        let cb;
+
+        promise.then(_cb => {
+            if (_cb !== undefined && typeof _cb !== 'function') {
+                throw TypeError('useAsyncEffect handler should return a function');
+            }
+            cb = _cb;
+        });
+
+        return () => {
+            promise.cancel(E_REASON_UNMOUNTED);
+            _promise = null;
+            cb && cb();
+        }
+    }, deps);
+
+    return [
+        (reason) => !!_promise && _promise.cancel(reason)
+    ]
+}
+
+module.exports = {
+    useAsyncEffect,
+    E_REASON_UNMOUNTED
+}

package.json

@@ -0,0 +1,84 @@
+{
+  "name": "use-async-effect",
+  "version": "0.0.0",
+  "description": "cancellable async effect hook",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "npm run test:build && mocha-headless-chrome -f test/test.html",
+    "test:build": "rollup ./test/src/index.js --file ./test/build/index.js --format iife --config ./test/rollup.config.js",
+    "playground": "npm run playground:build && concurrently --kill-others \"npm run playground:server\" \"npm run playground:watch\"",
+    "playground:run": "node playground/build/index.js || true",
+    "playground:build": "rollup ./playground/src/index.js --file ./playground/build/index.js --format iife --config ./playground/rollup.config.js",
+    "playground:watch": "nodemon --delay 1500ms --watch ./playground/src/ --watch lib/ --exec \\\"npm run playground:build\\\"",
+    "playground:server": "browser-sync start --server --index ./playground/index.html --files \"./playground/build/*.*\""
+  },
+  "author": {
+    "name": "Dmitriy Mozgovoy",
+    "email": "[email protected]",
+    "url": "http://github.com/DigitalBrainJS/"
+  },
+  "license": "MIT",
+  "keywords": [
+    "promise",
+    "cancelable",
+    "cancellable",
+    "p-cancelable",
+    "timeout",
+    "progress",
+    "cancel",
+    "abortable",
+    "abort",
+    "AbortController",
+    "AbortSignal",
+    "async",
+    "signal",
+    "await",
+    "promises",
+    "generator",
+    "co",
+    "yield",
+    "reject",
+    "race",
+    "decorator",
+    "delay",
+    "break",
+    "suspending",
+    "wait",
+    "bluebird",
+    "deferred",
+    "react",
+    "setState",
+    "cancellation",
+    "aborting",
+    "close",
+    "closable",
+    "pause",
+    "task"
+  ],
+  "dependencies": {
+    "browser-sync": "^2.26.13",
+    "c-promise2": "^0.10.8",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-replace": "^2.3.4",
+    "assert": "^2.0.0",
+    "chai": "^4.2.0",
+    "concurrently": "^5.3.0",
+    "cp-fetch": "^0.1.8",
+    "eslint": "^7.17.0",
+    "mocha": "^8.2.1",
+    "mocha-headless-chrome": "^3.1.0",
+    "nodemon": "^2.0.6",
+    "prop-types": "^15.7.2",
+    "react-is": "^17.0.1",
+    "rollup": "^2.35.1"
+  }
+}

playground/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Playground</title>
+</head>
+<body>
+<style>
+  .field-url{
+    width: 600px;
+  }
+
+  .btn-change{
+    margin-left: 5px;
+  }
+
+  #app>div{
+    margin: 10px 0px ;
+  }
+
+
+</style>
+  <div id="root"></div>
+  <script src="/playground/build/index.js" async></script>
+</body>
+</html>

playground/rollup.config.js

@@ -0,0 +1,25 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
+
+export default
+    {
+        plugins: [
+            babel({
+                exclude: 'node_modules/**',
+                babelHelpers: 'bundled',
+                plugins: [],
+                presets: [
+                    "@babel/preset-react"
+                ]
+            }),
+            replace({
+                'process.env.NODE_ENV': JSON.stringify( 'production' )
+            }),
+            resolve({browser: true}),
+            commonjs({
+                extensions: ['.js', '.jsx']
+            })
+        ]
+    };

playground/src/App.js

@@ -0,0 +1,38 @@
+import React from "react";
+import TestComponent from "./TestComponent";
+
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {url: props.url, _url: props.url};
+        this.onClick = this.onClick.bind(this);
+        this.onFetchClick = this.onFetchClick.bind(this);
+        this.handleChange= this.handleChange.bind(this);
+    }
+
+    onFetchClick(){
+        console.log(`fetch click`);
+        this.setState(({_url})=> this.setState({url: _url}))
+    }
+
+    onClick() {
+        console.log(`click`);
+        this.setState({ timestamp: Date.now() });
+    }
+
+    handleChange(event){
+        console.log(event.target.value);
+        this.setState({_url: event.target.value});
+    }
+
+    render() {
+        return (
+            <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>
+            </div>
+        );
+    }
+}

playground/src/TestComponent.js

@@ -0,0 +1,36 @@
+import React from "react";
+import {useEffect, useState} from "react";
+import ReactDOM from "react-dom";
+import {useAsyncEffect, E_REASON_UNMOUNTED} from "../../lib/use-async-effect";
+import {CanceledError, CPromise} from "c-promise2";
+import cpFetch from "cp-fetch";
+
+export default function TestComponent(props) {
+    const [text, setText] = useState("");
+
+    const [cancel, ref]= useAsyncEffect(function* ({onCancel}) {
+        console.log("mount");
+
+        //this.timeout(1000);
+
+        onCancel(()=> console.log('scope canceled'));
+
+        try {
+            setText("fetching...");
+            const response = yield cpFetch(props.url);
+            const json = yield response.json();
+            setText(`Success: ${JSON.stringify(json)}`);
+        } catch (err) {
+            CanceledError.rethrow(err, E_REASON_UNMOUNTED); //passthrough
+            setText(`Failed: ${err}`);
+        }
+
+        return () => {
+            console.log("unmount", this.isCanceled);
+        };
+    }, [props.url]);
+
+    //setTimeout(()=> cancel("Ooops!"), 1000);
+
+    return <div>{text}</div>;
+}

playground/src/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(
+    <App url="https://run.mocky.io/v3/7b038025-fc5f-4564-90eb-4373f0721822?mocky-delay=2s"></App>,
+    document.getElementById('root')
+);

test/rollup.config.js

@@ -0,0 +1,30 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
+import json from '@rollup/plugin-json';
+
+export default
+    {
+        plugins: [
+            babel({
+                exclude: 'node_modules/**',
+                babelHelpers: 'bundled',
+                plugins: [],
+                presets: [
+                    "@babel/preset-react"
+                ]
+            }),
+            replace({
+                'process.env.NODE_ENV': JSON.stringify( 'production' )
+            }),
+            resolve({
+                browser: true,
+                preferBuiltins: false
+            }),
+            json(),
+            commonjs({
+                extensions: ['.js', '.jsx']
+            })
+        ]
+    };