use-propagate - npm Package Compare versions

Comparing version 0.1.0-main.89e6ee8 to 0.1.0-main.c135359

lib/commonjs/createPropagation.d.ts

 type Listener<T> = (value: T) => void;
-export default function createPropagation<T>(): {
+type Init = {
+    /**
+     * `true` to allows calling propagate callback function during render-time, otherwise, `false` (default).
+     *
+     * Propagation during render-time is normally discouraged. If listeners save the value into a state, multiple re-render could occur.
+     * This option prevents render deadlock by disallowing propagation during render-time.
+     */
+    allowPropagateDuringRender?: boolean | undefined;
+};
+export default function createPropagation<T>(init?: Init): {
     useListen: (listener: Listener<T>) => void;
@@ -4,0 +13,0 @@ usePropagate: () => (value: T) => void;

lib/commonjs/createPropagation.js

@@ -9,17 +9,27 @@ "use strict";
 exports.default = createPropagation;
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _react = require("react");
 var _useRefFrom = require("use-ref-from");
-var _removeInline = _interopRequireDefault(require("./private/removeInline"));
 function createPropagation() {
-  var listeners = [];
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var rendering = false;
+  var allowPropagateDuringRender = init.allowPropagateDuringRender;
+  var listeners = new _set.default();
   var addListener = function addListener(listener) {
-    return void listeners.push(listener);
+    return void listeners.add(listener);
   };
   var removeListener = function removeListener(listener) {
-    return (0, _removeInline.default)(listeners, listener);
+    return void listeners.delete(listener);
   };
   var usePropagate = function usePropagate() {
+    rendering = true;
+    (0, _react.useLayoutEffect)(function () {
+      rendering = false;
+    });
     return function (value) {
-      return (0, _forEach.default)(listeners).call(listeners, function (listener) {
+      if (rendering && !allowPropagateDuringRender) {
+        return console.warn('use-propagate: The propagate callback function should not be called while rendering, ignoring the call.');
+      }
+      (0, _forEach.default)(listeners).call(listeners, function (listener) {
         return listener(value);
@@ -32,11 +42,13 @@ });
       var listenerRef = (0, _useRefFrom.useRefFrom)(listener);
+      var wrappingListener = (0, _react.useCallback)(function (value) {
+        return listenerRef.current(value);
+      }, [listenerRef]);
+      (0, _react.useMemo)(function () {
+        return addListener(wrappingListener);
+      }, [wrappingListener]);
       (0, _react.useEffect)(function () {
-        var wrappingListener = function wrappingListener(value) {
-          return listenerRef.current(value);
-        };
-        addListener(wrappingListener);
         return function () {
           return removeListener(wrappingListener);
         };
-      }, [listenerRef]);
+      }, [wrappingListener]);
     },
@@ -43,0 +55,0 @@ usePropagate: usePropagate

lib/esmodules/createPropagation.d.ts

 type Listener<T> = (value: T) => void;
-export default function createPropagation<T>(): {
+type Init = {
+    /**
+     * `true` to allows calling propagate callback function during render-time, otherwise, `false` (default).
+     *
+     * Propagation during render-time is normally discouraged. If listeners save the value into a state, multiple re-render could occur.
+     * This option prevents render deadlock by disallowing propagation during render-time.
+     */
+    allowPropagateDuringRender?: boolean | undefined;
+};
+export default function createPropagation<T>(init?: Init): {
     useListen: (listener: Listener<T>) => void;
@@ -4,0 +13,0 @@ usePropagate: () => (value: T) => void;

lib/esmodules/createPropagation.js

@@ -0,16 +1,26 @@
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import { useEffect } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import removeInline from './private/removeInline';
 export default function createPropagation() {
-  var listeners = [];
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var rendering = false;
+  var allowPropagateDuringRender = init.allowPropagateDuringRender;
+  var listeners = new _Set();
   var addListener = function addListener(listener) {
-    return void listeners.push(listener);
+    return void listeners.add(listener);
   };
   var removeListener = function removeListener(listener) {
-    return removeInline(listeners, listener);
+    return void listeners.delete(listener);
   };
   var usePropagate = function usePropagate() {
+    rendering = true;
+    useLayoutEffect(function () {
+      rendering = false;
+    });
     return function (value) {
-      return _forEachInstanceProperty(listeners).call(listeners, function (listener) {
+      if (rendering && !allowPropagateDuringRender) {
+        return console.warn('use-propagate: The propagate callback function should not be called while rendering, ignoring the call.');
+      }
+      _forEachInstanceProperty(listeners).call(listeners, function (listener) {
         return listener(value);
@@ -23,11 +33,13 @@ });
       var listenerRef = useRefFrom(listener);
+      var wrappingListener = useCallback(function (value) {
+        return listenerRef.current(value);
+      }, [listenerRef]);
+      useMemo(function () {
+        return addListener(wrappingListener);
+      }, [wrappingListener]);
       useEffect(function () {
-        var wrappingListener = function wrappingListener(value) {
-          return listenerRef.current(value);
-        };
-        addListener(wrappingListener);
         return function () {
           return removeListener(wrappingListener);
         };
-      }, [listenerRef]);
+      }, [wrappingListener]);
     },
@@ -34,0 +46,0 @@ usePropagate: usePropagate

package.json

 {
   "name": "use-propagate",
-  "version": "0.1.0-main.89e6ee8",
+  "version": "0.1.0-main.c135359",
   "description": "Propagates an event to multiple subscribers using React hooks.",
@@ -107,5 +107,5 @@ "files": [
     "@babel/runtime-corejs3": "^7.24.1",
-    "use-propagate": "^0.1.0-main.89e6ee8",
+    "use-propagate": "^0.1.0-main.c135359",
     "use-ref-from": "^0.0.3"
   }
 }

README.md

@@ -71,2 +71,10 @@ # `use-propagate`
 
+### Why I should not call propagate callback function during render-time?
+
+When the propagate callback function is called during rendering, a warning message will be printed and propagation will be stopped.
+
+This is a safety measure to prevent multiple re-render and potential deadlock situation if listeners save the value to a state and trigger another re-render.
+
+If listeners are controlled and would never trigger re-render, you can pass `allowPropagateDuringRender: true` option to ignore this safety measure.
+
 ### How to get response from the listener or wait for the listener to complete?
@@ -91,2 +99,4 @@
 
+Please make sure the propagate callback function is not called during render as it could cause multiple re-render and potential deadlock situation.
+
 ## Contributions
@@ -93,0 +103,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24323

increased by7.22%

Lines of code

150

increased by3.45%

Number of lines in readme file

107

increased by10.31%

Worsened metrics

Number of package files

15

decreased by-28.57%

Dependency changes

• Updateduse-propagate@^0.1.0-main.c135359