@pulse-editor/shared-utils 0.0.1

package/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@pulse-editor/shared-utils",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "src/main.ts",
+    "dependencies": {
+        "@pulse-editor/types": "*",
+        "typescript": "^5.7.3"
+    },
+    "devDependencies": {
+        "@types/node": "^22.13.1"
+    }
+}

package/src/inter-module-communication.ts

@@ -0,0 +1,137 @@
+import {
+  messageTimeout,
+  IMCMessage,
+  IMCMessageTypeEnum,
+  ReceiverHandlerMap,
+} from "@pulse-editor/types";
+import { MessageReceiver } from "./message-receiver";
+import { MessageSender } from "./message-sender";
+
+export class InterModuleCommunication {
+  private thisWindow: Window | undefined;
+  private otherWindow: Window | undefined;
+
+  /* Wait current module to finish tasks to return a response or acknowledgement. */
+  private thisPendingTasks:
+    | Map<
+        string,
+        {
+          controller: AbortController;
+        }
+      >
+    | undefined;
+
+  /* Wait the other module to return a response or acknowledgement. */
+  private otherPendingMessages:
+    | Map<
+        string,
+        {
+          resolve: (result: any) => void;
+          reject: () => void;
+        }
+      >
+    | undefined;
+
+  private receiver: MessageReceiver | undefined;
+  private sender: MessageSender | undefined;
+
+  private moduleName: string;
+
+  private receiverHandlerMap: ReceiverHandlerMap | undefined;
+
+  private listener: ((event: MessageEvent) => void) | undefined;
+
+  constructor(moduleName: string) {
+    this.moduleName = moduleName;
+  }
+
+  /* Initialize a receiver to receive message. */
+  public initThisWindow(window: Window) {
+    this.thisWindow = window;
+    this.receiverHandlerMap = new Map();
+    this.thisPendingTasks = new Map();
+
+    const receiver = new MessageReceiver(
+      this.receiverHandlerMap,
+      this.thisPendingTasks,
+      this.moduleName
+    );
+    this.receiver = receiver;
+
+    this.listener = (event: MessageEvent<IMCMessage>) => {
+      if (!receiver) {
+        throw new Error(
+          "Receiver not initialized at module " + this.moduleName
+        );
+      }
+
+      const message = event.data;
+      const win = event.source as Window;
+      receiver.receiveMessage(win, message);
+    };
+    window.addEventListener("message", this.listener);
+    console.log("Adding IMC listener in " + this.moduleName);
+  }
+
+  /* Initialize a sender to send message ot the other window. */
+  public initOtherWindow(window: Window) {
+    this.otherWindow = window;
+    this.otherPendingMessages = new Map();
+
+    const sender = new MessageSender(
+      window,
+      messageTimeout,
+      this.otherPendingMessages,
+      this.moduleName
+    );
+    this.sender = sender;
+
+    if (!this.receiverHandlerMap) {
+      throw new Error("You must initialize the current window first.");
+    }
+
+    // Add an acknowledgement handler in current window's receiver for results of sent messages.
+    // The current window must be initialized first. i.e. call initThisWindow() before initOtherWindow().
+    this.receiverHandlerMap.set(
+      IMCMessageTypeEnum.Acknowledge,
+      async (senderWindow: Window, message: IMCMessage) => {
+        const pendingMessage = this.otherPendingMessages?.get(message.id);
+        if (pendingMessage) {
+          pendingMessage.resolve(message.payload);
+          this.otherPendingMessages?.delete(message.id);
+        }
+      }
+    );
+  }
+
+  public close() {
+    if (this.listener) {
+      window.removeEventListener("message", this.listener);
+    }
+  }
+
+  public async sendMessage(
+    type: IMCMessageTypeEnum,
+    payload?: any,
+    abortSignal?: AbortSignal
+  ): Promise<any> {
+    if (!this.sender) {
+      throw new Error("Sender not initialized");
+    }
+
+    return await this.sender.sendMessage(type, payload, abortSignal);
+  }
+
+  public updateReceiverHandlerMap(
+    receiverHandlerMap: ReceiverHandlerMap
+  ): void {
+    if (!this.receiver) {
+      throw new Error("Receiver not initialized");
+    }
+
+    this.receiverHandlerMap?.clear();
+    receiverHandlerMap.forEach((value, key) => {
+      this.receiverHandlerMap?.set(key, value);
+    });
+  }
+}

package/src/main.ts

@@ -0,0 +1,5 @@
+import { InterModuleCommunication } from "./inter-module-communication";
+import { MessageReceiver } from "./message-receiver";
+import { MessageSender } from "./message-sender";
+
+export { MessageReceiver, MessageSender, InterModuleCommunication };

package/src/message-receiver.ts

@@ -0,0 +1,110 @@
+import {
+  IMCMessage,
+  IMCMessageTypeEnum,
+  ReceiverHandlerMap,
+} from "@pulse-editor/types";
+
+export class MessageReceiver {
+  private handlerMap: ReceiverHandlerMap;
+  private pendingTasks: Map<
+    string,
+    {
+      controller: AbortController;
+    }
+  >;
+  private moduleName: string;
+
+  constructor(
+    listenerMap: ReceiverHandlerMap,
+    pendingTasks: Map<
+      string,
+      {
+        controller: AbortController;
+      }
+    >,
+    moduleInfo: string
+  ) {
+    this.handlerMap = listenerMap;
+    this.pendingTasks = pendingTasks;
+    this.moduleName = moduleInfo;
+  }
+
+  public receiveMessage(senderWindow: Window, message: IMCMessage) {
+    // Not handling messages from self
+    if (this.moduleName === message.from) return;
+
+    // Log the message in dev mode
+    if (process.env.NODE_ENV === "development") {
+      console.log(
+        `Module ${this.moduleName} received message from module ${message.from}:\n ${JSON.stringify(
+          message
+        )}`
+      );
+    }
+
+    // Abort the task if the message type is Abort
+    if (message.type === IMCMessageTypeEnum.Abort) {
+      const id = message.id;
+      const pendingTask = this.pendingTasks.get(id);
+
+      if (pendingTask) {
+        console.log("Aborting task", id);
+        pendingTask.controller.abort();
+        this.pendingTasks.delete(id);
+      }
+
+      return;
+    }
+
+    const handler = this.handlerMap.get(message.type);
+    if (handler) {
+      // Create abort controller to listen for abort signal from sender.
+      // Then save the message id and abort controller to the pending tasks.
+      const controller = new AbortController();
+      const signal = controller.signal;
+      this.pendingTasks.set(message.id, {
+        controller,
+      });
+
+      const promise = handler(senderWindow, message, signal);
+      promise
+        .then((result) => {
+          // Don't send the result if the task has been aborted
+          if (signal.aborted) return;
+
+          // Acknowledge the sender with the result if the message type is not Acknowledge
+          if (message.type !== IMCMessageTypeEnum.Acknowledge) {
+            this.acknowledgeSender(senderWindow, message.id, result);
+          }
+        })
+        .catch((error) => {
+          // Send the error message to the sender
+          const errMsg: IMCMessage = {
+            id: message.id,
+            type: IMCMessageTypeEnum.Error,
+            payload: error.message,
+            from: this.moduleName,
+          };
+
+          senderWindow.postMessage(errMsg, "*");
+        })
+        .finally(() => {
+          this.pendingTasks.delete(message.id);
+        });
+    }
+  }
+
+  private acknowledgeSender(
+    senderWindow: Window,
+    id: string,
+    payload: any
+  ): void {
+    const message: IMCMessage = {
+      id,
+      type: IMCMessageTypeEnum.Acknowledge,
+      payload: payload,
+      from: this.moduleName,
+    };
+    senderWindow.postMessage(message, "*");
+  }
+}

package/src/message-sender.ts

@@ -0,0 +1,100 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/types";
+
+export class MessageSender {
+  private targetWindow: Window;
+  private timeout: number;
+
+  private pendingMessages: Map<
+    string,
+    { resolve: (result: any) => void; reject: () => void }
+  >;
+
+  private moduleName: string;
+
+  constructor(
+    targetWindow: Window,
+    timeout: number,
+    pendingMessages: Map<
+      string,
+      { resolve: (result: any) => void; reject: () => void }
+    >,
+    moduleInfo: string
+  ) {
+    this.targetWindow = targetWindow;
+    this.timeout = timeout;
+
+    this.pendingMessages = pendingMessages;
+    this.moduleName = moduleInfo;
+  }
+
+  public async sendMessage(
+    handlingType: IMCMessageTypeEnum,
+    payload?: any,
+    abortSignal?: AbortSignal
+  ): Promise<any> {
+    // Generate a unique id for the message using timestamp
+    const id = new Date().getTime().toString();
+    const message: IMCMessage = {
+      id,
+      type: handlingType,
+      payload: payload,
+      from: this.moduleName,
+    };
+
+    return new Promise((resolve, reject) => {
+      // If the signal is already aborted, reject immediately
+      if (abortSignal?.aborted) {
+        return reject(new Error("Request aborted"));
+      }
+
+      const abortHandler = () => {
+        this.pendingMessages.delete(id);
+        // Notify the target window that the request has been aborted
+        this.targetWindow.postMessage(
+          {
+            id,
+            type: IMCMessageTypeEnum.Abort,
+            payload: JSON.stringify({
+              status: "Task aborted",
+              data: null,
+            }),
+          },
+          "*"
+        );
+        reject(new Error("Request aborted"));
+      };
+      // Attach abort listener
+      abortSignal?.addEventListener("abort", abortHandler);
+
+      // Send message
+      this.pendingMessages.set(id, {
+        resolve,
+        reject,
+      });
+      this.targetWindow.postMessage(message, "*");
+
+      // Check timeout
+      const timeoutId = setTimeout(() => {
+        this.pendingMessages.delete(id);
+        abortSignal?.removeEventListener("abort", abortHandler);
+        reject(new Error("Communication with Pulse Editor timeout."));
+      }, this.timeout);
+
+      // Ensure cleanup on resolution
+      const currentMessage = this.pendingMessages.get(id);
+      if (currentMessage) {
+        currentMessage.resolve = (result) => {
+          clearTimeout(timeoutId);
+          abortSignal?.removeEventListener("abort", abortHandler);
+          resolve(result);
+        };
+
+        currentMessage.reject = () => {
+          clearTimeout(timeoutId);
+          abortSignal?.removeEventListener("abort", abortHandler);
+          reject();
+        };
+      }
+    });
+  }
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "outDir": "./dist",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "declaration": true,
+        "types": [
+            "react",
+            "node"
+        ],
+        "baseUrl": ".",
+        "paths": {
+            "*": [
+                "node_modules/*",
+                "dist/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+    ]
+}