evt - npm Package Compare versions

Comparing version 2.0.0-beta.29 to 2.0.0-beta.30

hooks/useElementEvt.js

@@ -36,7 +36,8 @@ "use strict";
     useEffect(function () { setElement(ref.current); }, [(_a = ref.current) !== null && _a !== void 0 ? _a : Object]);
-    useEvt_1.useEvt(function (ctx) {
+    useEvt_1.useEvt(function (_a) {
+        var ctx = _a.ctx, registerSideEffect = _a.registerSideEffect;
         if (element === null) {
             return;
         }
-        effect({ ctx: ctx, element: element });
+        effect({ ctx: ctx, element: element, registerSideEffect: registerSideEffect });
     }, __spreadArray([element !== null && element !== void 0 ? element : Object], __read(deps)));
@@ -43,0 +44,0 @@ return { ref: ref };

hooks/useEvt.d.ts

@@ -0,3 +1,3 @@
+import type { Ctx } from "../lib";
 import * as React from "react";
-import type { Ctx } from "../lib";
 /**
@@ -24,5 +24,9 @@ * https://docs.evt.land/api/react-hooks
  * on render ( like useMemo's callback ).
+ * If you want to register side effect you should use registerSideEffect.
  *
  * Demo: https://stackblitz.com/edit/evt-useevt?file=index.tsx
  */
-export declare function useEvt<T>(factoryOrEffect: (ctx: Ctx) => T, deps: React.DependencyList): T;
+export declare function useEvt<T>(factoryOrEffect: (params: {
+    ctx: Ctx;
+    registerSideEffect: (sideEffect: () => void) => void;
+}) => T, deps: React.DependencyList): T;

hooks/useEvt.js

 "use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
 var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEvt = void 0;
-var React = require("react");
-var useEffect = React.useEffect, useRef = React.useRef;
 var Evt_2 = require("../lib/Evt");
 var useSemanticGuaranteeMemo_1 = require("../tools/hooks/useSemanticGuaranteeMemo");
+var useEffectIf_1 = require("../tools/hooks/useEffectIf");
+var React = require("react");
+var useEffect = React.useEffect, useState = React.useState, useReducer = React.useReducer, useRef = React.useRef;
 //TODO: Find a more reliable way to test if <React.UseStrict> is used.
@@ -34,2 +56,3 @@ var isDevStrictMode = typeof process !== "object" ?
  * on render ( like useMemo's callback ).
+ * If you want to register side effect you should use registerSideEffect.
  *
@@ -39,4 +62,14 @@ * Demo: https://stackblitz.com/edit/evt-useevt?file=index.tsx
 function useEvt(factoryOrEffect, deps) {
-    //const [ ctx ] = useState(() => Evt.newCtx());
     var ctxRef = useRef(null);
+    var _a = __read(useState([]), 1), registeredSideEffects = _a[0];
+    var _b = __read(useReducer(function (n) { return n + 1; }, 0), 1), forceUpdate = _b[0];
+    useEffectIf_1.useEffectIf(function callee() {
+        var registeredSideEffectsCopy = __spreadArray([], __read(registeredSideEffects));
+        registeredSideEffectsCopy.forEach(function (sideEffect) { return sideEffect(); });
+        registeredSideEffects.splice(0, registeredSideEffectsCopy.length);
+        if (registeredSideEffects.length !== 0) {
+            callee();
+            return;
+        }
+    }, registeredSideEffects.length !== 0);
     var out = useSemanticGuaranteeMemo_1.useSemanticGuaranteeMemo(function () {
@@ -46,3 +79,9 @@ var _a;
         ctxRef.current = Evt_2.Evt.newCtx();
-        return factoryOrEffect(ctxRef.current);
+        return factoryOrEffect({
+            "ctx": ctxRef.current,
+            "registerSideEffect": function (sideEffect) {
+                registeredSideEffects.push(sideEffect);
+                forceUpdate();
+            }
+        });
     }, deps);
@@ -49,0 +88,0 @@ useEffect(function () { return function () { ctxRef.current.done(); }; }, []);

hooks/useRerenderOnStateChange.d.ts

@@ -16,15 +16,2 @@ declare type CtxLike<Result = any> = import("../lib/types/interfaces/CtxLike").CtxLike<Result>;
     };
-    evtChangeDiff: {
-        evtAttach: {
-            pipe: Pipe;
-        };
-    };
-    evtDiff: {
-        evtAttach: {
-            pipe: Pipe;
-        };
-    };
-    evtAttach: {
-        pipe: Pipe;
-    };
 }
@@ -31,0 +18,0 @@ /**

hooks/useRerenderOnStateChange.js

 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRerenderOnStateChange = void 0;
-var WeakSet_1 = require("minimal-polyfills/WeakSet");
-var lib_1 = require("../lib");
 var useEvt_1 = require("./useEvt");
-var React = require("react");
-var useReducer = React.useReducer;
 ;
 ;
-var ctxs = new WeakSet_1.Polyfill();
 /**
@@ -43,24 +17,8 @@ * https://docs.evt.land/api/react-hooks
     }
-    var _a = __read(useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
-    useEvt_1.useEvt(function (ctx) {
-        ctxs.add(ctx);
-        evts.forEach(function (evt) {
-            var attach = function () { return evt.evtChange.toStateless(ctx).attach(function () { return forceUpdate(); }); };
-            attach();
-            //NOTE: We do all this funny business because we want to ensure that the handler
-            //that triggers the re-render is always the last handler to be invoked.
-            //What we do is we detach our handler when an other is added and synchronously re-attach it
-            //Using the ctxs WeakMap we avoid infinite loop, each handler of useRerenderOnStateChange
-            //trying to be the first. (happens when useRerenderOnStateChange is called multiple time on
-            //an event)
-            lib_1.Evt.merge(__spreadArray([
-                evt.evtChange.evtAttach.pipe(ctx, function (handler) { return !ctxs.has(handler.ctx); })
-            ], __read([
-                evt,
-                evt.evtChangeDiff,
-                evt.evtDiff
-            ].map(function (evt) { return evt.evtAttach.pipe(ctx); })))).attach(function () {
-                evt.evtChange.detach(ctx);
-                attach();
-            });
+    useEvt_1.useEvt(function (_a) {
+        var ctx = _a.ctx, registerSideEffect = _a.registerSideEffect;
+        return evts.forEach(function (evt) {
+            return evt.evtChange
+                .toStateless(ctx)
+                .attach(function () { return registerSideEffect(function () { }); });
         });
@@ -67,0 +25,0 @@ },

package.json

 {
     "name": "evt",
-    "version": "2.0.0-beta.29",
+    "version": "2.0.0-beta.30",
     "description": "Type safe replacement for node's EventEmitter",
@@ -196,2 +196,5 @@ "repository": {
         "tools/concatUint8Array.js.map",
+        "tools/hooks/useEffectIf.d.ts",
+        "tools/hooks/useEffectIf.js",
+        "tools/hooks/useEffectIf.js.map",
         "tools/hooks/useSemanticGuaranteeMemo.d.ts",
@@ -337,2 +340,3 @@ "tools/hooks/useSemanticGuaranteeMemo.js",
         "src/tools/concatUint8Array.ts",
+        "src/tools/hooks/useEffectIf.ts",
         "src/tools/hooks/useSemanticGuaranteeMemo.ts",
@@ -339,0 +343,0 @@ "src/tools/inDepth/copy.ts",

src/hooks/useElementEvt.ts

@@ -16,3 +16,7 @@ import * as React from "react";
 export function useElementEvt<T extends HTMLElement = any>(
-	effect: (params: { ctx: Ctx; element: T }) => void,
+	effect: (params: {
+		ctx: Ctx;
+		element: T;
+		registerSideEffect: (sideEffect: () => void) => void;
+	}) => void,
 	depsOrRef: React.DependencyList | React.RefObject<T>,
@@ -38,3 +42,3 @@ depsOrUndefined?: React.DependencyList
 	useEvt(
-		ctx => {
+		({ ctx, registerSideEffect }) => {
 
@@ -45,3 +49,3 @@ if (element === null) {
 
-			effect({ ctx, element });
+			effect({ ctx, element, registerSideEffect });
 
@@ -48,0 +52,0 @@ },

src/hooks/useEvt.ts

@@ -1,7 +0,7 @@
-import * as React from "react";
-const { useEffect, useRef } = React;
-
 import { Evt } from "../lib/Evt";
 import type { Ctx } from "../lib";
 import { useSemanticGuaranteeMemo } from "../tools/hooks/useSemanticGuaranteeMemo";
+import { useEffectIf } from "../tools/hooks/useEffectIf";
+import * as React from "react";
+const { useEffect, useState, useReducer, useRef } = React;
 
@@ -35,2 +35,3 @@ //TODO: Find a more reliable way to test if <React.UseStrict> is used.
  * on render ( like useMemo's callback ).
+ * If you want to register side effect you should use registerSideEffect.
  * 
@@ -40,10 +41,38 @@ * Demo: https://stackblitz.com/edit/evt-useevt?file=index.tsx
 export function useEvt<T>(
-    factoryOrEffect: (ctx: Ctx) => T,
+    factoryOrEffect: (
+        params: {
+            ctx: Ctx;
+            registerSideEffect: (sideEffect: () => void) => void;
+        }
+    ) => T,
     deps: React.DependencyList
 ): T {
 
-    //const [ ctx ] = useState(() => Evt.newCtx());
-
     const ctxRef = useRef<Ctx>(null as any);
 
+    const [registeredSideEffects] = useState<(() => void)[]>([]);
+
+    const [forceUpdate] = useReducer(n => n + 1, 0);
+
+    useEffectIf(
+        function callee() {
+
+            const registeredSideEffectsCopy = [...registeredSideEffects];
+
+            registeredSideEffectsCopy.forEach(sideEffect => sideEffect());
+
+            registeredSideEffects.splice(0, registeredSideEffectsCopy.length);
+
+            if (registeredSideEffects.length !== 0) {
+
+                callee();
+
+                return;
+
+            }
+
+        },
+        registeredSideEffects.length !== 0
+    );
+
     const out = useSemanticGuaranteeMemo(() => {
@@ -55,3 +84,9 @@
 
-        return factoryOrEffect(ctxRef.current);
+        return factoryOrEffect({
+            "ctx": ctxRef.current,
+            "registerSideEffect": sideEffect => {
+                registeredSideEffects.push(sideEffect);
+                forceUpdate();
+            }
+        });
 
@@ -78,3 +113,3 @@ }, deps);
 function useClearCtxIfReactStrictModeInspectRun(
-    isDevStrictMode: boolean, 
+    isDevStrictMode: boolean,
     ctxRef: React.MutableRefObject<Ctx>
@@ -81,0 +116,0 @@ ) {

src/hooks/useRerenderOnStateChange.ts

@@ -1,8 +0,3 @@
-import { Polyfill as WeakSet } from "minimal-polyfills/WeakSet";
-import { Evt } from "../lib";
 import { useEvt } from "./useEvt";
 
-import * as React from "react";
-const { useReducer } = React;
-
 type CtxLike<Result = any> = import("../lib/types/interfaces/CtxLike").CtxLike<Result>;
@@ -20,14 +15,4 @@ interface HandlerLike { ctx: CtxLike };
     };
-    evtChangeDiff: {
-        evtAttach: { pipe: Pipe; }
-    };
-    evtDiff: {
-        evtAttach: { pipe: Pipe; }
-    };
-    evtAttach: {
-        pipe: Pipe;
-    }
 };
 
-const ctxs = new WeakSet<any>();
 
@@ -40,47 +25,13 @@ /**
 export function useRerenderOnStateChange(...evts: StatefulReadonlyEvtLike[]): void {
-
-    const [, forceUpdate] = useReducer(x => x + 1, 0);
-
     useEvt(
-        ctx => {
-
-            ctxs.add(ctx);
-
-            evts.forEach(evt => {
-
-                const attach = () => evt.evtChange.toStateless(ctx).attach(() => forceUpdate());
-
-                attach();
-
-                //NOTE: We do all this funny business because we want to ensure that the handler
-                //that triggers the re-render is always the last handler to be invoked.
-                //What we do is we detach our handler when an other is added and synchronously re-attach it
-                //Using the ctxs WeakMap we avoid infinite loop, each handler of useRerenderOnStateChange
-                //trying to be the first. (happens when useRerenderOnStateChange is called multiple time on
-                //an event)
-                Evt.merge(
-                    [
-                        evt.evtChange.evtAttach.pipe(ctx, handler => !ctxs.has(handler.ctx)),
-                        ...[
-                            evt,
-                            evt.evtChangeDiff,
-                            evt.evtDiff
-                        ].map(evt => evt.evtAttach.pipe(ctx)),
-                    ]
-                ).attach(() => {
-
-                    evt.evtChange.detach(ctx);
-
-                    attach();
-
-                });
-
-
-            });
-
-        },
+        ({ ctx, registerSideEffect }) =>
+            evts.forEach(
+                evt =>
+                    evt.evtChange
+                        .toStateless(ctx)
+                        .attach(() => registerSideEffect(() => { }))
+            ),
         // eslint-disable-next-line react-hooks/exhaustive-deps
         evts
     );
-
 }

No alert changes

Improved metrics

Total package byte prevSize

2479620

increased by0.15%

Number of package files

352

increased by1.15%

Lines of code

43671

increased by0.16%

No dependency changes