@fbltd/async 1.0.28 → 1.0.29

package/README.md

@@ -35,13 +35,13 @@ type IPromiseConfiguration<T> = {
 There is no any management of passed data for resolving.
 Returned promise is usual ES promise so it is impossible to fulfill promise twice.
 
-### DependencyStream
+### Dependency
 Implementation of reactive model leveraging native JavaScript async features like
 Promises, (async) iterators and generators.
 The version is 0.0.x so keep it in mind
 
 ```typescript
-const counter = new DependencyStream<number>(0);
+const counter = new Dependency<number>(0);
 
 async function onCounterChange() {
     for await (let value of counter) {
@@ -101,14 +101,14 @@ async function subscribe() {
 
 #### Framework integrations
 ##### React
-Of course, there is a React integration via stream hooks.
+Of course, there is a React integration via stream hooks and HOCs.
 For example, here is classic react counter implementation via useRaceStream hook.
 
 ```typescript jsx
-type IController = {
+type ICounter = {
     dependecy: Dependency,
 }
-export const Counter: React.FC<ITest> = React.memo(({
+export const Counter: React.FC<ICounter> = React.memo(({
                                                         dependency,
                                                     }) => {
     // num is an instance of DependencyStream
@@ -121,20 +121,40 @@ export const Counter: React.FC<ITest> = React.memo(({
     return (
         <div className={"container"}>
             <button className={"incrementer"}
-                // Now result is array of streams values
-                // It should be object
                     onClick={() => dependency.value++}>
                 +
             </button>
 
             <div className={cn("display")}>
-                {
-                    // Now result is array of streams values
-                    // It should be object                    
-                }
                 {value.dependency}
             </div>
         </div>
     )
 })
-```
+```
+
+Or you can use Reaction HOC:
+```typescript jsx
+type ICounter = {
+    dependecy: Dependency,
+}
+export const Counter: React.FC<ICounter> = Reactive(({
+                                                        dependency,
+                                                    }) => {
+
+    return (
+        <div className={"container"}>
+            <button className={"incrementer"}
+                    onClick={() => dependency.value++}>
+                +
+            </button>
+
+            <div className={cn("display")}>
+                {value.dependency}
+            </div>
+        </div>
+    )
+})
+```
+
+###### 

package/dist/bin/dependency/integrations/react/reactive/index.js

@@ -1,52 +1,26 @@
 import React, { createElement, useEffect, useState } from "react";
-import { PromiseConfiguration } from "../../../../promise-configuration.js";
 import { observationState } from "../../../observe.state.js";
-let currentWatch = {
-    watching: false,
-    deps: null
-};
-const watchStack = [];
-function usePromise() {
-    const [promise] = useState(() => new PromiseConfiguration());
-    return promise;
-}
+import { usePromise } from "./utils.js";
 function Reactive(fn) {
-    // const dep = DepFactory.ofReaction(fn);
-    // ref.current = dep;
-    // const value = dep.value;
-    return React.memo(() => {
+    return React.memo((props) => {
         const [key, setKey] = useState(Math.random());
         const abortPromise = usePromise();
         useEffect(() => abortPromise.resolve, []);
         observationState.isObserved = true;
-        if (currentWatch.watching) {
-            watchStack.push(currentWatch);
-            currentWatch = {
-                watching: true,
-                deps: null,
-            };
-        }
-        else {
-            currentWatch.watching = true;
-        }
         useEffect(() => {
             const deps = observationState.getDeps();
             observationState.isObserved = false;
             if (!deps.size)
                 return;
-            let prom = [
-                abortPromise.promise,
-            ];
-            deps.forEach((d, i) => {
-                prom.push(d.next());
-            });
+            let prom = [abortPromise.promise];
+            deps.forEach(d => prom.push(d.next()));
             Promise.race(prom)
                 .then(() => {
                 if (abortPromise.isFulfilled)
                     return;
                 setKey(Math.random());
             });
-        }, [key]);
-        return createElement(fn);
+        }, [key, props]);
+        return createElement(fn, props);
     });
 }

package/dist/bin/dependency/integrations/react/reactive/utils.js

@@ -0,0 +1,6 @@
+import { useState } from "react";
+import { PromiseConfiguration } from "../../../../promise-configuration.js";
+export function usePromise() {
+    const [promise] = useState(() => new PromiseConfiguration());
+    return promise;
+}

package/dist/types/dependency/integrations/react/reactive/utils.d.ts

@@ -0,0 +1,2 @@
+import { PromiseConfiguration } from "../../../../promise-configuration.ts";
+export declare function usePromise<T = void>(): PromiseConfiguration<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fbltd/async",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Miscellaneous async utils",
   "homepage": "https://github.com/GlennMiller1991/async",
   "type": "module",