message-port-api - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

@@ -27,2 +27,3 @@ interface Sender {
     <Controllers extends Record<string, (...args: any[]) => any>>(controllers: Controllers, optionsTargetOrigin?: WindowPostMessageOptions): Controllers;
+    cancel(): void;
 }
@@ -35,5 +36,5 @@ declare function useReceive(sender: Sender & Receiver, receiver?: Receiver): Receive;
 }
-declare function useSend(sender: Sender & Receiver, receiver?: Receiver): Send;
-declare function useSend(sender: Sender, receiver: Receiver): Send;
+declare function useSend(sender: Sender & Receiver, receiver?: Receiver, timeout?: false | number): Send;
+declare function useSend(sender: Sender, receiver: Receiver, timeout?: false | number): Send;
 
 export { IRequest, IResponseError, IResponseResult, Receiver, Sender, useReceive, useSend };

dist/index.global.js

@@ -40,37 +40,48 @@ "use strict";
       receiver = sender;
+    const handlers = /* @__PURE__ */ new Set();
     function receive(controllers, targetOrigin) {
-      useValue(sender).addEventListener("message", (_0) => __async(this, [_0], function* ({ data }) {
-        if (isRequest(data)) {
-          if (data.name in controllers) {
-            const controller = controllers[data.name];
-            try {
-              const responseResult = {
-                id: data.id,
-                name: data.name,
-                result: yield controller(...data.arguments)
-              };
-              useValue(receiver).postMessage(responseResult, targetOrigin);
-            } catch (err) {
+      function handler(_0) {
+        return __async(this, arguments, function* ({ data }) {
+          if (isRequest(data)) {
+            if (data.name in controllers) {
+              const controller = controllers[data.name];
+              try {
+                const responseResult = {
+                  id: data.id,
+                  name: data.name,
+                  result: yield controller(...data.arguments)
+                };
+                useValue(receiver).postMessage(responseResult, targetOrigin);
+              } catch (err) {
+                const responseError = {
+                  id: data.id,
+                  name: data.name,
+                  error: err + ""
+                };
+                useValue(receiver).postMessage(responseError, targetOrigin);
+              }
+            } else {
               const responseError = {
                 id: data.id,
                 name: data.name,
-                error: err + ""
+                error: "NOT_FOUND_ERR"
               };
               useValue(receiver).postMessage(responseError, targetOrigin);
             }
-          } else {
-            const responseError = {
-              id: data.id,
-              name: data.name,
-              error: "NOT_FOUND_ERR"
-            };
-            useValue(receiver).postMessage(responseError, targetOrigin);
           }
-        }
-      }));
+        });
+      }
+      useValue(sender).addEventListener("message", handler);
+      handlers.add(handler);
       return controllers;
     }
+    receive.cancel = () => {
+      const senderVal = useValue(sender);
+      handlers.forEach((handler) => {
+        senderVal.removeEventListener("message", handler);
+      });
+    };
     return receive;
   }
-  function useSend(sender, receiver) {
+  function useSend(sender, receiver, timeout = 3e4) {
     if (!receiver && "postMessage" in sender)
@@ -88,4 +99,9 @@ receiver = sender;
           useValue(sender).addEventListener("message", handler);
+          const timer = !timeout ? void 0 : setTimeout(() => {
+            reject("TIME_OUT");
+            useValue(sender).removeEventListener("message", handler);
+          }, timeout);
           function handler({ data }) {
             if (isResponseResult(data) && data.id === id && data.name === name) {
+              timer && clearTimeout(timer);
               resolve(data.result);
@@ -96,2 +112,3 @@ useValue(sender).removeEventListener("message", handler);
             if (isResponseError(data) && data.id === id && data.name === name) {
+              timer && clearTimeout(timer);
               reject(data.error);
@@ -98,0 +115,0 @@ useValue(sender).removeEventListener("message", handler);

dist/index.js

@@ -38,37 +38,48 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});var __async = (__this, __arguments, generator) => {
     receiver = sender;
+  const handlers = /* @__PURE__ */ new Set();
   function receive(controllers, targetOrigin) {
-    useValue(sender).addEventListener("message", (_0) => __async(this, [_0], function* ({ data }) {
-      if (isRequest(data)) {
-        if (data.name in controllers) {
-          const controller = controllers[data.name];
-          try {
-            const responseResult = {
-              id: data.id,
-              name: data.name,
-              result: yield controller(...data.arguments)
-            };
-            useValue(receiver).postMessage(responseResult, targetOrigin);
-          } catch (err) {
+    function handler(_0) {
+      return __async(this, arguments, function* ({ data }) {
+        if (isRequest(data)) {
+          if (data.name in controllers) {
+            const controller = controllers[data.name];
+            try {
+              const responseResult = {
+                id: data.id,
+                name: data.name,
+                result: yield controller(...data.arguments)
+              };
+              useValue(receiver).postMessage(responseResult, targetOrigin);
+            } catch (err) {
+              const responseError = {
+                id: data.id,
+                name: data.name,
+                error: err + ""
+              };
+              useValue(receiver).postMessage(responseError, targetOrigin);
+            }
+          } else {
             const responseError = {
               id: data.id,
               name: data.name,
-              error: err + ""
+              error: "NOT_FOUND_ERR"
             };
             useValue(receiver).postMessage(responseError, targetOrigin);
           }
-        } else {
-          const responseError = {
-            id: data.id,
-            name: data.name,
-            error: "NOT_FOUND_ERR"
-          };
-          useValue(receiver).postMessage(responseError, targetOrigin);
         }
-      }
-    }));
+      });
+    }
+    useValue(sender).addEventListener("message", handler);
+    handlers.add(handler);
     return controllers;
   }
+  receive.cancel = () => {
+    const senderVal = useValue(sender);
+    handlers.forEach((handler) => {
+      senderVal.removeEventListener("message", handler);
+    });
+  };
   return receive;
 }
-function useSend(sender, receiver) {
+function useSend(sender, receiver, timeout = 3e4) {
   if (!receiver && "postMessage" in sender)
@@ -86,4 +97,9 @@ receiver = sender;
         useValue(sender).addEventListener("message", handler);
+        const timer = !timeout ? void 0 : setTimeout(() => {
+          reject("TIME_OUT");
+          useValue(sender).removeEventListener("message", handler);
+        }, timeout);
         function handler({ data }) {
           if (isResponseResult(data) && data.id === id && data.name === name) {
+            timer && clearTimeout(timer);
             resolve(data.result);
@@ -94,2 +110,3 @@ useValue(sender).removeEventListener("message", handler);
           if (isResponseError(data) && data.id === id && data.name === name) {
+            timer && clearTimeout(timer);
             reject(data.error);
@@ -96,0 +113,0 @@ useValue(sender).removeEventListener("message", handler);

package.json

 {
   "name": "message-port-api",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A simple package that allows you to simplify the use of `MessagePort API` more easily (Worker, IFrame...)",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -91,2 +91,3 @@ # message-port-api
 ### useReceive
+
 This function will be located on the `host` side to handle the requested tasks
@@ -106,3 +107,16 @@
 
+> If you want to cancel the call `receive.cancel()'. This is useful when you use `receive` in components
+```ts
+import { useReceive } from "message-port-api"
+
+const receive = useReceive(self)
+
+receive({ sum })
+
+receive.cancel() // cancel receive call
+```
+
+
 ### useSend
+
 This function will be on the `client` side to send processing requests and return a Promise containing processed results from `receive` function
@@ -113,3 +127,4 @@
   sender: Sender, // contains `postMessage` function to send processing request
-  receiver: Receiver // contains 2 functions `addEventLister` and `removeEventListener` to listen to and cancel the event `message` containing the results processed through the `receive` function
+  receiver: Receiver // contains 2 functions `addEventLister` and `removeEventListener` to listen to and cancel the event `message` containing the results processed through the `receive` function,
+  timeout: boolean | number = 30000 // the interval that waits for data to return if the timeout throws a `TIMEOUT` error. Default is 30_0000
 ): send
@@ -116,0 +131,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

20397

increased by13.37%

Lines of code

396

increased by15.12%

Number of lines in readme file

135

increased by12.5%

No dependency changes