evt - npm Package Compare versions

Comparing version 2.0.0-beta.34 to 2.0.0-beta.35

hooks/useElementEvt.d.ts

 import * as React from "react";
 import type { Ctx } from "../lib";
-export declare type UpdateConditionOrDeps = boolean | readonly any[];
 export declare function useElementEvt<T extends HTMLElement = any>(effect: (params: {
     ctx: Ctx;
     element: T;
-}) => void, updateConditionOrDeps: boolean | readonly any[]): {
+}) => void, deps: React.DependencyList): {
     ref: React.RefObject<T>;
@@ -13,2 +12,2 @@ };
     element: T;
-}) => void, ref: React.RefObject<T>, updateConditionOrDeps: boolean | readonly any[]): void;
+}) => void, ref: React.RefObject<T>, deps: React.DependencyList): void;

hooks/useElementEvt.js

@@ -28,18 +28,16 @@ "use strict";
 var useEvt_1 = require("./useEvt");
-function useElementEvt(effect, updateConditionOrDepsOrRef, updateConditionOrDepsOrUndefined) {
+function useElementEvt(effect, depsOrRef, depsOrUndefined) {
     var _a;
-    var isRefProvided = updateConditionOrDepsOrUndefined !== undefined;
-    var updateConditionOrDeps = updateConditionOrDepsOrUndefined !== null && updateConditionOrDepsOrUndefined !== void 0 ? updateConditionOrDepsOrUndefined : updateConditionOrDepsOrRef;
+    var isRefProvided = depsOrUndefined !== undefined;
+    var deps = depsOrUndefined !== null && depsOrUndefined !== void 0 ? depsOrUndefined : depsOrRef;
     var refInternallyCreated = useRef(null);
-    var ref = isRefProvided ? updateConditionOrDepsOrRef : refInternallyCreated;
+    var ref = isRefProvided ? depsOrRef : refInternallyCreated;
     var _b = __read(useState(null), 2), element = _b[0], setElement = _b[1];
     useEffect(function () { setElement(ref.current); }, [(_a = ref.current) !== null && _a !== void 0 ? _a : Object]);
     useEvt_1.useEvt(function (ctx, registerSideEffect) {
-        if (element === null ||
-            updateConditionOrDeps === false) {
+        if (element === null) {
             return;
         }
         effect({ ctx: ctx, element: element, registerSideEffect: registerSideEffect });
-    }, typeof updateConditionOrDeps === "boolean" ?
-        updateConditionOrDeps : __spreadArray([element !== null && element !== void 0 ? element : Object], __read(updateConditionOrDeps)));
+    }, __spreadArray([element !== null && element !== void 0 ? element : Object], __read(deps)));
     return { ref: ref };
@@ -46,0 +44,0 @@ }

hooks/useEvt.d.ts

 import type { Ctx } from "../lib";
+import * as React from "react";
 /**
@@ -20,3 +21,3 @@ * https://docs.evt.land/api/react-hooks
  * Evts.
- * c
+ *
  * BE AWARE: Unlike useEffect factoryOrEffect is called
@@ -31,3 +32,2 @@ * on render ( like useMemo's callback ).
  */
-export declare function useEvt<T>(factoryOrEffect: (ctx: Ctx, registerSideEffect: (sideEffect: () => void) => void) => T, deps: readonly any[]): T;
-export declare function useEvt<T>(factoryOrEffect: (ctx: Ctx, registerSideEffect: (sideEffect: () => void) => void) => T, updateConditionOrDeps: boolean | readonly any[]): T | undefined;
+export declare function useEvt<T>(factoryOrEffect: (ctx: Ctx, registerSideEffect: (sideEffect: () => void) => void) => T, deps: React.DependencyList): T;

hooks/useEvt.js

@@ -27,5 +27,4 @@ "use strict";
 var Evt_2 = require("../lib/Evt");
-var useSemanticGuaranteeMemo_1 = require("../tools/hooks/useSemanticGuaranteeMemo");
-var useEffectIf_1 = require("../tools/hooks/useEffectIf");
-var useUpdateConditionOrDeps_1 = require("../tools/hooks/useUpdateConditionOrDeps");
+var useGuaranteedMemo_1 = require("../tools/powerhooks/useGuaranteedMemo");
+var useEffectIf_1 = require("../tools/powerhooks/useEffectIf");
 var React = require("react");
@@ -37,71 +36,84 @@ var useEffect = React.useEffect, useState = React.useState, useReducer = React.useReducer, useRef = React.useRef;
     ((_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) !== null && _b !== void 0 ? _b : "production") !== "production";
-function useEvt(factoryOrEffect, updateConditionOrDeps) {
-    var deps = useUpdateConditionOrDeps_1.useUpdateConditionOrDeps({
-        updateConditionOrDeps: updateConditionOrDeps,
-        "hookName": useEvt.name
-    }).deps;
-    return useEvtWithOnlyDependencyArray(function (ctx, registerSideEffect) {
-        if (updateConditionOrDeps === false) {
-            return undefined;
+/**
+ * https://docs.evt.land/api/react-hooks
+ *
+ * Provide a Ctx to attach handlers.
+ * You should list in deps all the Evt that are
+ * susceptible to change ( Evt passed as props
+ * or Evt that are react states ) that you use in the
+ * factoryOrEffect callback.
+ * As for useEffect you should also list every other
+ * value that you use.
+ * Whenever any value in deps is changed factoryOrEffect
+ * is invoked again with the new Evt and the previous handler
+ * get detached.
+ * All handler are also detached when the component unmount.
+ *
+ * factoryOrEffect can be used for attaching handler to event
+ * or to generate a new event that is a merge/pipe of other
+ * Evts.
+ *
+ * BE AWARE: Unlike useEffect factoryOrEffect is called
+ * on render ( like useMemo's callback ).
+ * Remember that you shouldn't update state in a component
+ * render tick (in the useMemo for example). If you you need to
+ * perform an effect on first render (attaching a stateful evt
+ * for example) use registerSideEffect(()=>{ ... })
+ *
+ * Demo: https://stackblitz.com/edit/evt-useevt?file=index.tsx
+ */
+function useEvt(factoryOrEffect, deps) {
+    var ctxRef = useRef(null);
+    var _a = __read(useState([]), 1), registeredSideEffects = _a[0];
+    var _b = __read(useReducer(function (n) { return n + 1; }, 0), 2), forceUpdate = _b[1];
+    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;
         }
-        return factoryOrEffect(ctx, registerSideEffect);
+    }, registeredSideEffects.length !== 0);
+    var out = useGuaranteedMemo_1.useGuaranteedMemo(function () {
+        var _a;
+        (_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.done();
+        ctxRef.current = Evt_2.Evt.newCtx();
+        return factoryOrEffect(ctxRef.current, function (sideEffect) {
+            registeredSideEffects.push(sideEffect);
+            forceUpdate();
+        });
     }, deps);
+    useEffect(function () { return function () { ctxRef.current.done(); }; }, []);
+    useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef);
+    return out;
 }
 exports.useEvt = useEvt;
-var useEvtWithOnlyDependencyArray = (function () {
-    /**
-     * When <React.StrictMode> is used in development
-     * useState and useMemo get triggered a first time on a
-     * separate component instance but useEffect is not invoked.
-     *
-     * To prevent leaving handlers that we attached inside the useMemo
-     * callback we clear the context if useEffect(f,[])
-     * is not invoked right after useState(f).
-     */
-    function useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef) {
-        var timerRef = useRef(null);
-        useSemanticGuaranteeMemo_1.useSemanticGuaranteeMemo(function () {
-            if (!isDevStrictMode) {
-                return;
-            }
-            timerRef.current = setTimeout(function () { return ctxRef.current.done(); }, 700);
-        }, []);
-        useEffect(function () {
-            if (!isDevStrictMode) {
-                return;
-            }
-            if (timerRef.current === null) {
-                return;
-            }
-            clearTimeout(timerRef.current);
-        }, []);
-    }
-    function useEvtWithOnlyDependencyArray(factoryOrEffect, deps) {
-        var ctxRef = useRef(null);
-        var _a = __read(useState([]), 1), registeredSideEffects = _a[0];
-        var _b = __read(useReducer(function (n) { return n + 1; }, 0), 2), forceUpdate = _b[1];
-        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 () {
-            var _a;
-            (_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.done();
-            ctxRef.current = Evt_2.Evt.newCtx();
-            return factoryOrEffect(ctxRef.current, function (sideEffect) {
-                registeredSideEffects.push(sideEffect);
-                forceUpdate();
-            });
-        }, deps);
-        useEffect(function () { return function () { ctxRef.current.done(); }; }, []);
-        useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef);
-        return out;
-    }
-    return { useEvtWithOnlyDependencyArray: useEvtWithOnlyDependencyArray };
-})().useEvtWithOnlyDependencyArray;
+/**
+ * When <React.StrictMode> is used in development
+ * useState and useMemo get triggered a first time on a
+ * separate component instance but useEffect is not invoked.
+ *
+ * To prevent leaving handlers that we attached inside the useMemo
+ * callback we clear the context if useEffect(f,[])
+ * is not invoked right after useState(f).
+ */
+function useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef) {
+    var timerRef = useRef(null);
+    useGuaranteedMemo_1.useGuaranteedMemo(function () {
+        if (!isDevStrictMode) {
+            return;
+        }
+        timerRef.current = setTimeout(function () { return ctxRef.current.done(); }, 700);
+    }, []);
+    useEffect(function () {
+        if (!isDevStrictMode) {
+            return;
+        }
+        if (timerRef.current === null) {
+            return;
+        }
+        clearTimeout(timerRef.current);
+    }, []);
+}
 //# sourceMappingURL=useEvt.js.map

package.json

 {
     "name": "evt",
-    "version": "2.0.0-beta.34",
+    "version": "2.0.0-beta.35",
     "description": "Type safe replacement for node's EventEmitter",
@@ -196,11 +196,2 @@ "repository": {
         "tools/concatUint8Array.js.map",
-        "tools/hooks/useEffectIf.d.ts",
-        "tools/hooks/useEffectIf.js",
-        "tools/hooks/useEffectIf.js.map",
-        "tools/hooks/useSemanticGuaranteeMemo.d.ts",
-        "tools/hooks/useSemanticGuaranteeMemo.js",
-        "tools/hooks/useSemanticGuaranteeMemo.js.map",
-        "tools/hooks/useUpdateConditionOrDeps.d.ts",
-        "tools/hooks/useUpdateConditionOrDeps.js",
-        "tools/hooks/useUpdateConditionOrDeps.js.map",
         "tools/inDepth/copy.d.ts",
@@ -227,2 +218,11 @@ "tools/inDepth/copy.js",
         "tools/isCallableFunction.js.map",
+        "tools/powerhooks/tools/useEffectRunConditionToDependencyArray.d.ts",
+        "tools/powerhooks/tools/useEffectRunConditionToDependencyArray.js",
+        "tools/powerhooks/tools/useEffectRunConditionToDependencyArray.js.map",
+        "tools/powerhooks/useEffectIf.d.ts",
+        "tools/powerhooks/useEffectIf.js",
+        "tools/powerhooks/useEffectIf.js.map",
+        "tools/powerhooks/useGuaranteedMemo.d.ts",
+        "tools/powerhooks/useGuaranteedMemo.js",
+        "tools/powerhooks/useGuaranteedMemo.js.map",
         "tools/reducers/allEquals.d.ts",
@@ -344,5 +344,2 @@ "tools/reducers/allEquals.js",
         "src/tools/concatUint8Array.ts",
-        "src/tools/hooks/useEffectIf.ts",
-        "src/tools/hooks/useSemanticGuaranteeMemo.ts",
-        "src/tools/hooks/useUpdateConditionOrDeps.ts",
         "src/tools/inDepth/copy.ts",
@@ -355,2 +352,5 @@ "src/tools/inDepth/getPrototypeChain.ts",
         "src/tools/isCallableFunction.ts",
+        "src/tools/powerhooks/tools/useEffectRunConditionToDependencyArray.ts",
+        "src/tools/powerhooks/useEffectIf.ts",
+        "src/tools/powerhooks/useGuaranteedMemo.ts",
         "src/tools/reducers/allEquals.ts",
@@ -357,0 +357,0 @@ "src/tools/reducers/allEqualsTo.ts",

src/hooks/useElementEvt.ts

@@ -6,7 +6,5 @@ import * as React from "react";
 
-export type UpdateConditionOrDeps = boolean | readonly any[];
-
 export function useElementEvt<T extends HTMLElement = any>(
 	effect: (params: { ctx: Ctx; element: T }) => void,
-	updateConditionOrDeps: boolean | readonly any[],
+	deps: React.DependencyList
 ): { ref: React.RefObject<T>; };
@@ -16,3 +14,3 @@ export function useElementEvt<T extends HTMLElement = any>(
 	ref: React.RefObject<T>,
-	updateConditionOrDeps: boolean | readonly any[],
+	deps: React.DependencyList
 ): void;
@@ -25,13 +23,13 @@ export function useElementEvt<T extends HTMLElement = any>(
 	}) => void,
-	updateConditionOrDepsOrRef: UpdateConditionOrDeps | React.RefObject<T>,
-	updateConditionOrDepsOrUndefined?: boolean | readonly any[],
+	depsOrRef: React.DependencyList | React.RefObject<T>,
+	depsOrUndefined?: React.DependencyList
 ): { ref: React.RefObject<T>; } | void {
 
-	const isRefProvided = updateConditionOrDepsOrUndefined !== undefined;
+	const isRefProvided = depsOrUndefined !== undefined;
 
-	const updateConditionOrDeps = updateConditionOrDepsOrUndefined ?? updateConditionOrDepsOrRef as UpdateConditionOrDeps;
+	const deps = depsOrUndefined ?? depsOrRef as React.DependencyList;
 
 	const refInternallyCreated = useRef<T>(null);
 
-	const ref = isRefProvided ? updateConditionOrDepsOrRef as React.RefObject<T> : refInternallyCreated;
+	const ref = isRefProvided ? depsOrRef as React.RefObject<T> : refInternallyCreated;
 
@@ -48,6 +46,3 @@ const [element, setElement] = useState<T | null>(null);
 
-			if (
-				element === null ||
-				updateConditionOrDeps === false
-			) {
+			if (element === null) {
 				return;
@@ -59,5 +54,3 @@ }
 		},
-		typeof updateConditionOrDeps === "boolean" ?
-			updateConditionOrDeps :
-			[element ?? Object, ...updateConditionOrDeps]
+		[element ?? Object, ...deps]
 	);
@@ -64,0 +57,0 @@

src/hooks/useEvt.ts

 import { Evt } from "../lib/Evt";
 import type { Ctx } from "../lib";
-import { useSemanticGuaranteeMemo } from "../tools/hooks/useSemanticGuaranteeMemo";
-import { useEffectIf } from "../tools/hooks/useEffectIf";
-import { useUpdateConditionOrDeps } from "../tools/hooks/useUpdateConditionOrDeps";
+import { useGuaranteedMemo } from "../tools/powerhooks/useGuaranteedMemo";
+import { useEffectIf } from "../tools/powerhooks/useEffectIf";
 import * as React from "react";
@@ -33,3 +32,3 @@ const { useEffect, useState, useReducer, useRef } = React;
  * Evts.
- * c
+ * 
  * BE AWARE: Unlike useEffect factoryOrEffect is called 
@@ -49,145 +48,99 @@ * on render ( like useMemo's callback ).
     ) => T,
-    deps: readonly any[]
-): T;
-export function useEvt<T>(
-    factoryOrEffect: (
-        ctx: Ctx,
-        registerSideEffect: (sideEffect: () => void) => void
-    ) => T,
-    updateConditionOrDeps: boolean | readonly any[]
-): T | undefined;
-export function useEvt<T>(
-    factoryOrEffect: (
-        ctx: Ctx,
-        registerSideEffect: (sideEffect: () => void) => void
-    ) => T,
-    updateConditionOrDeps: boolean | readonly any[]
-): T | undefined {
+    deps: React.DependencyList
+): T {
 
-    const { deps } = useUpdateConditionOrDeps({
-        updateConditionOrDeps,
-        "hookName": useEvt.name
-    });
+    const ctxRef = useRef<Ctx>(null as any);
 
-    return useEvtWithOnlyDependencyArray(
-        (ctx, registerSideEffect) => {
-            if (updateConditionOrDeps === false) {
-                return undefined;
-            }
+    const [registeredSideEffects] = useState<(() => void)[]>([]);
 
-            return factoryOrEffect(ctx, registerSideEffect)
-        },
-        deps
-    );
+    const [, forceUpdate] = useReducer(n => n + 1, 0);
 
-}
+    useEffectIf(
+        function callee() {
 
-const { useEvtWithOnlyDependencyArray } = (() => {
+            const registeredSideEffectsCopy = [...registeredSideEffects];
 
-    /**
-     * When <React.StrictMode> is used in development
-     * useState and useMemo get triggered a first time on a 
-     * separate component instance but useEffect is not invoked.
-     * 
-     * To prevent leaving handlers that we attached inside the useMemo
-     * callback we clear the context if useEffect(f,[])
-     * is not invoked right after useState(f).
-     */
-    function useClearCtxIfReactStrictModeInspectRun(
-        isDevStrictMode: boolean,
-        ctxRef: React.MutableRefObject<Ctx>
-    ) {
+            registeredSideEffectsCopy.forEach(sideEffect => sideEffect());
 
-        const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+            registeredSideEffects.splice(0, registeredSideEffectsCopy.length);
 
-        useSemanticGuaranteeMemo(() => {
+            if (registeredSideEffects.length !== 0) {
 
-            if (!isDevStrictMode) {
-                return;
-            }
+                callee();
 
-            timerRef.current = setTimeout(
-                () => ctxRef.current.done(),
-                700
-            );
-
-        }, []);
-
-        useEffect(() => {
-
-            if (!isDevStrictMode) {
                 return;
-            }
 
-            if (timerRef.current === null) {
-                return;
             }
 
-            clearTimeout(timerRef.current);
+        },
+        registeredSideEffects.length !== 0
+    );
 
-        }, []);
+    const out = useGuaranteedMemo(() => {
 
-    }
+        ctxRef.current?.done();
 
-    function useEvtWithOnlyDependencyArray<T>(
-        factoryOrEffect: (
-            ctx: Ctx,
-            registerSideEffect: (sideEffect: () => void) => void
-        ) => T,
-        deps: readonly any[]
-    ): T {
+        ctxRef.current = Evt.newCtx();
 
-        const ctxRef = useRef<Ctx>(null as any);
+        return factoryOrEffect(
+            ctxRef.current,
+            sideEffect => {
+                registeredSideEffects.push(sideEffect);
+                forceUpdate();
+            }
+        );
 
-        const [registeredSideEffects] = useState<(() => void)[]>([]);
+    }, deps);
 
-        const [, forceUpdate] = useReducer(n => n + 1, 0);
+    useEffect(() => () => { ctxRef.current.done(); }, []);
 
-        useEffectIf(
-            function callee() {
+    useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef);
 
-                const registeredSideEffectsCopy = [...registeredSideEffects];
+    return out;
 
-                registeredSideEffectsCopy.forEach(sideEffect => sideEffect());
+}
 
-                registeredSideEffects.splice(0, registeredSideEffectsCopy.length);
+/**
+ * When <React.StrictMode> is used in development
+ * useState and useMemo get triggered a first time on a 
+ * separate component instance but useEffect is not invoked.
+ * 
+ * To prevent leaving handlers that we attached inside the useMemo
+ * callback we clear the context if useEffect(f,[])
+ * is not invoked right after useState(f).
+ */
+function useClearCtxIfReactStrictModeInspectRun(
+    isDevStrictMode: boolean,
+    ctxRef: React.MutableRefObject<Ctx>
+) {
 
-                if (registeredSideEffects.length !== 0) {
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-                    callee();
+    useGuaranteedMemo(() => {
 
-                    return;
+        if (!isDevStrictMode) {
+            return;
+        }
 
-                }
-
-            },
-            registeredSideEffects.length !== 0
+        timerRef.current = setTimeout(
+            () => ctxRef.current.done(),
+            700
         );
 
-        const out = useSemanticGuaranteeMemo(() => {
+    }, []);
 
-            ctxRef.current?.done();
+    useEffect(() => {
 
-            ctxRef.current = Evt.newCtx();
+        if (!isDevStrictMode) {
+            return;
+        }
 
-            return factoryOrEffect(
-                ctxRef.current,
-                sideEffect => {
-                    registeredSideEffects.push(sideEffect);
-                    forceUpdate();
-                }
-            );
+        if (timerRef.current === null) {
+            return;
+        }
 
-        }, deps);
+        clearTimeout(timerRef.current);
 
-        useEffect(() => () => { ctxRef.current.done(); }, []);
+    }, []);
 
-        useClearCtxIfReactStrictModeInspectRun(isDevStrictMode, ctxRef);
-
-        return out;
-
-    }
-
-    return { useEvtWithOnlyDependencyArray };
-
-})();
+}

No alert changes

Improved metrics

Total package byte prevSize

2486175

increased by0.03%

Lines of code

43808

increased by0.13%

No dependency changes