@fbltd/async 1.0.27 → 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/dependency.js

@@ -1,6 +1,6 @@
 import { PromiseConfiguration } from "../promise-configuration.js";
 import { baseComparer } from "./utils.js";
-import { collectDep } from "./global.js";
+import { observationState } from "./observe.state.js";
 import { symAI } from "../constants.js";
 export class Dependency {
     _value;
@@ -31,7 +31,7 @@ export class Dependency {
         this._set(v);
     }
     get value() {
-        collectDep(this);
+        observationState.setDep(this);
         return this._value;
     }
     get done() {

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

@@ -1 +1,2 @@
-export * from "./use-race.stream.js";
+export * from "./use-race-stream/index.js";
+export * from "./reactive/index.js";

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

@@ -0,0 +1,26 @@
+import React, { createElement, useEffect, useState } from "react";
+import { observationState } from "../../../observe.state.js";
+import { usePromise } from "./utils.js";
+function Reactive(fn) {
+    return React.memo((props) => {
+        const [key, setKey] = useState(Math.random());
+        const abortPromise = usePromise();
+        useEffect(() => abortPromise.resolve, []);
+        observationState.isObserved = true;
+        useEffect(() => {
+            const deps = observationState.getDeps();
+            observationState.isObserved = false;
+            if (!deps.size)
+                return;
+            let prom = [abortPromise.promise];
+            deps.forEach(d => prom.push(d.next()));
+            Promise.race(prom)
+                .then(() => {
+                if (abortPromise.isFulfilled)
+                    return;
+                setKey(Math.random());
+            });
+        }, [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/bin/dependency/integrations/react/use-race-stream/index.js

@@ -0,0 +1 @@
+export { useRaceStream } from "./use-race.stream.js";

package/dist/bin/dependency/integrations/react/{race-stream.controller.js → use-race-stream/race-stream.controller.js}

@@ -1,5 +1,5 @@
-import { isObjectsContentEqual } from "./utils.js";
-import { raceStream } from "../../stream-utils/index.js";
+import { isObjectsContentEqual } from "../utils.js";
+import { raceStream } from "../../../stream-utils/index.js";
 export class RaceStreamController {
     _value;
     isFirstWas = false;

package/dist/bin/dependency/observe.state.js

@@ -0,0 +1,33 @@
+class ObservationState {
+    _isObserved = false;
+    dependencies = undefined;
+    stack = [];
+    get isObserved() {
+        return this._isObserved;
+    }
+    set isObserved(value) {
+        if (value) {
+            this.push();
+        }
+        else {
+            this.pop();
+        }
+        this._isObserved = !!this.dependencies;
+    }
+    setDep(dep) {
+        if (!this.isObserved)
+            return;
+        this.dependencies.add(dep);
+    }
+    getDeps() {
+        return this.dependencies;
+    }
+    push() {
+        this.stack.push(this.dependencies);
+        this.dependencies = new Set();
+    }
+    pop() {
+        this.dependencies = this.stack.pop();
+    }
+}
+export const observationState = new ObservationState();

package/dist/bin/dependency/stream-utils/index.js

@@ -2,4 +2,4 @@ export * from "./once.stream.js";
 export * from "./race.stream.js";
 export * from "./next.js";
 export * from "./contracts.js";
-export * from "./reaction.js";
+export * from "./reaction/index.js";

package/dist/bin/dependency/stream-utils/reaction/index.js

@@ -0,0 +1 @@
+export * from "./reaction.js";

package/dist/bin/dependency/stream-utils/{reaction.js → reaction/reaction.js}

@@ -1,6 +1,6 @@
-import { runFnWithDepCollection } from "../global.js";
-import { Dependency } from "../dependency.js";
-import { symAI } from "../../constants.js";
+import { Dependency } from "../../dependency.js";
+import { symAI } from "../../../constants.js";
+import { runFnWithDepCollection } from "./utils.js";
 export function reaction(fn, config) {
     let { result, deps } = runFnWithDepCollection(fn);
     const dep = new Dependency(result, config);

package/dist/bin/dependency/stream-utils/reaction/utils.js

@@ -0,0 +1,10 @@
+import { observationState } from "../../observe.state.js";
+export function runFnWithDepCollection(fn) {
+    observationState.isObserved = true;
+    const result = fn();
+    const deps = observationState.getDeps();
+    observationState.isObserved = false;
+    return {
+        result, deps
+    };
+}

package/dist/bin/index.js

@@ -1,4 +1,3 @@
 export * from "./dependency/index.js";
-export * from "./dependency/integrations/react/index.js";
 export * from "./delay.js";
 export * from "./promise-configuration.js";

package/dist/types/dependency/integrations/react/index.d.ts

@@ -1 +1,2 @@
-export * from './use-race.stream.ts';
+export * from './use-race-stream/index.ts';
+export * from './reactive/index.ts';

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

@@ -0,0 +1 @@
+export {};

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/dist/types/dependency/integrations/react/use-race-stream/index.d.ts

@@ -0,0 +1 @@
+export { useRaceStream } from './use-race.stream.ts';

package/dist/types/dependency/integrations/react/{race-stream.controller.d.ts → use-race-stream/race-stream.controller.d.ts}

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { IDepObjectArgument, IDepObjectReturn, raceStream } from "../../stream-utils/index.ts";
+import { IDepObjectArgument, IDepObjectReturn, raceStream } from "../../../stream-utils/index.ts";
 export declare class RaceStreamController<T extends IDepObjectArgument> {
     private _value;
     private isFirstWas;

package/dist/types/dependency/integrations/react/{use-race.stream.d.ts → use-race-stream/use-race.stream.d.ts}

@@ -1,4 +1,4 @@
-import { IDepObjectArgument, IDepObjectReturn } from "../../index.ts";
+import { IDepObjectArgument, IDepObjectReturn } from "../../../index.ts";
 export declare function useRaceStream<T extends IDepObjectArgument>(deps: T): {
     value: IDepObjectReturn<T>;
     dispose: Function;

package/dist/types/dependency/observe.state.d.ts

@@ -0,0 +1,14 @@
+import { Dependency } from "./dependency.ts";
+declare class ObservationState {
+    private _isObserved;
+    dependencies: Set<Dependency> | undefined;
+    private stack;
+    get isObserved(): boolean;
+    set isObserved(value: boolean);
+    setDep(dep: Dependency): void;
+    getDeps(): Set<Dependency<any>> | undefined;
+    private push;
+    private pop;
+}
+export declare const observationState: ObservationState;
+export {};

package/dist/types/dependency/stream-utils/index.d.ts

@@ -2,4 +2,4 @@ export * from "./once.stream.ts";
 export * from "./race.stream.ts";
 export * from "./next.ts";
 export * from "./contracts.ts";
-export * from "./reaction.ts";
+export * from "./reaction/index.ts";

package/dist/types/dependency/stream-utils/reaction/index.d.ts

@@ -0,0 +1 @@
+export * from './reaction.ts';

package/dist/types/dependency/stream-utils/reaction/reaction.d.ts

@@ -0,0 +1,3 @@
+import { Dependency } from "../../dependency.ts";
+import { IAllStreamConfig } from "../../contracts.ts";
+export declare function reaction<T>(fn: () => T, config?: Partial<IAllStreamConfig<T>>): Dependency<T>;

package/dist/types/dependency/stream-utils/reaction/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function runFnWithDepCollection<T>(fn: () => T): {
+    result: T;
+    deps: Set<import("../../dependency.ts").Dependency<any>>;
+};

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
 export * from './dependency/index.ts';
-export * from './dependency/integrations/react/index.ts';
 export * from './delay.ts';
 export * from './promise-configuration.ts';

package/dist/types/promise-configuration.d.ts

@@ -1,8 +1,8 @@
 export declare class PromiseConfiguration<TReturn = void> {
     readonly promise: Promise<TReturn>;
-    _resolve: (value: TReturn) => void;
-    _reject: (value: Error) => void;
-    _isFulfilled: boolean;
+    private _resolve;
+    private _reject;
+    private _isFulfilled;
     constructor();
     get reject(): (value: Error) => void;
     get resolve(): (value: TReturn) => void;

package/package.json

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

package/dist/bin/dependency/global.js

@@ -1,26 +0,0 @@
-const global = {
-    watchFlag: false,
-    dependencies: null
-};
-const notImplemented = new Error('Watching while watching is not implemented');
-export function runFnWithDepCollection(fn) {
-    if (global.watchFlag) {
-        throw notImplemented;
-    }
-    global.watchFlag = true;
-    global.dependencies = new Set();
-    let result = fn();
-    let deps = global.dependencies;
-    global.dependencies = null;
-    global.watchFlag = false;
-    return {
-        result, deps
-    };
-}
-export function collectDep(dep) {
-    if (!global.watchFlag)
-        return;
-    if (dep.done)
-        return;
-    global.dependencies.add(dep);
-}

package/dist/types/dependency/global.d.ts

@@ -1,11 +0,0 @@
-import { Dependency } from "./dependency.js";
-declare const global: {
-    watchFlag: boolean;
-    dependencies: Set<Dependency>;
-};
-export declare function runFnWithDepCollection<T>(fn: () => T): {
-    result: T;
-    deps: typeof global.dependencies;
-};
-export declare function collectDep(dep: Dependency): void;
-export {};

package/dist/types/dependency/stream-utils/reaction.d.ts

@@ -1,3 +0,0 @@
-import { Dependency } from "../dependency.ts";
-import { IAllStreamConfig } from "../contracts.js";
-export declare function reaction<T>(fn: () => T, config?: Partial<IAllStreamConfig<T>>): Dependency<T>;