add use async effect

Author: MatiasWorker

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomico/kit",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "exports": {
     "./use-child-nodes": "./src/use-child-nodes/use-child-nodes.js",
@@ -10,7 +10,8 @@
     "./use-render": "./src/use-render/use-render.js",
     "./use-router": "./src/use-router/use-router.js",
     "./use-slot": "./src/use-slot/use-slot.js",
-    "./use-parent": "./src/use-parent/use-parent.js"
+    "./use-parent": "./src/use-parent/use-parent.js",
+    "./use-async-effect": "./src/use-async-effect/use-async-effect.js"
   },
   "typings": "*.d.ts",
   "editable": "https://github.com/atomicojs/atomico-kit/tree/master",

src/use-async-effect/use-async-effect.js

@@ -0,0 +1,12 @@
+import { useEffect } from "atomico";
+/**
+ *
+ * @param {()=>Promise<()=>any|void>} effect
+ * @param {Array<any>} [args]
+ */
+export function useAsyncEffect(effect, args) {
+  useEffect(() => {
+    const task = Promise.resolve(args).then(effect);
+    return () => task.then((collector) => collector());
+  }, args);
+}

src/use-async-effect/use-async-effect.test.js

@@ -0,0 +1,18 @@
+import { expect } from "@esm-bundle/chai";
+import { createHooks } from "atomico/test-hooks";
+import { useAsyncEffect } from "./use-async-effect.js";
+
+it("useAsyncEffect", (done) => {
+  const hooks = createHooks();
+
+  function load() {
+    // done only completes at the end of the useEffect loop
+    useAsyncEffect(async () => done);
+  }
+
+  hooks.load(load);
+  // mounted effect
+  hooks.cleanEffects()();
+  // unmounted effect
+  hooks.cleanEffects(true)();
+});

use-async-effect.d.ts

@@ -0,0 +1 @@
+export { useAsyncEffect } from "./src/use-async-effect/use-async-effect.js";