iframe-pubsub 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+/**
+ * Message to send to another page or component.
+ *
+ * @property {string} from - The ID of the sending page or component.
+ * @property {string} to - The ID of the receiving page or component.
+ * @property {any} payload - The payload of the message.
+ */
+interface IMessage {
+    from: string;
+    to: string;
+    payload: any;
+}
+type MessageCallback = (message: IMessage) => void | Promise<void>;
+declare class PubSub {
+    private static instance;
+    private subscribers;
+    private mainCallback?;
+    private constructor();
+    static getInstance(): PubSub;
+    onMessage(callback: MessageCallback): void;
+    /**
+     * Registers a callback function to be called when a message is received.
+     *
+     * @param pageId The ID of the page or component to register for.
+     * @param callback The callback function to be called when a message is received.
+     */
+    register(pageId: string, callback: MessageCallback): void;
+    /**
+     * Unregister a page or component from the pubsub.
+     * Should unregister the registered page or component if it has been removed.
+     *
+     * @param pageId The ID of the page or component to unregister from.
+     */
+    unregister(pageId: string): void;
+    sendMessage(message: IMessage): void;
+    private handleMessage;
+}
+declare class Client {
+    private pageId;
+    private callback?;
+    private pubsub;
+    private isIframe;
+    /**
+     * Create a new client instance.
+     *
+     * @param pageId The ID of the page or component to register to.
+     */
+    constructor(pageId: string);
+    /**
+     * Listen for messages from the parent page with a callback.
+     *
+     * @param callback The callback function to register.
+     */
+    onMessage(callback: MessageCallback): void;
+    /**
+     * Send a message to the another page or component.
+     *
+     * @param to The ID of the page or component to send the message to.
+     * @param payload The payload of the message.
+     */
+    sendMessage(to: string, payload: any): void;
+    private handleMessage;
+}
+
+export { Client, type IMessage, type MessageCallback, PubSub };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Message to send to another page or component.
+ *
+ * @property {string} from - The ID of the sending page or component.
+ * @property {string} to - The ID of the receiving page or component.
+ * @property {any} payload - The payload of the message.
+ */
+interface IMessage {
+    from: string;
+    to: string;
+    payload: any;
+}
+type MessageCallback = (message: IMessage) => void | Promise<void>;
+declare class PubSub {
+    private static instance;
+    private subscribers;
+    private mainCallback?;
+    private constructor();
+    static getInstance(): PubSub;
+    onMessage(callback: MessageCallback): void;
+    /**
+     * Registers a callback function to be called when a message is received.
+     *
+     * @param pageId The ID of the page or component to register for.
+     * @param callback The callback function to be called when a message is received.
+     */
+    register(pageId: string, callback: MessageCallback): void;
+    /**
+     * Unregister a page or component from the pubsub.
+     * Should unregister the registered page or component if it has been removed.
+     *
+     * @param pageId The ID of the page or component to unregister from.
+     */
+    unregister(pageId: string): void;
+    sendMessage(message: IMessage): void;
+    private handleMessage;
+}
+declare class Client {
+    private pageId;
+    private callback?;
+    private pubsub;
+    private isIframe;
+    /**
+     * Create a new client instance.
+     *
+     * @param pageId The ID of the page or component to register to.
+     */
+    constructor(pageId: string);
+    /**
+     * Listen for messages from the parent page with a callback.
+     *
+     * @param callback The callback function to register.
+     */
+    onMessage(callback: MessageCallback): void;
+    /**
+     * Send a message to the another page or component.
+     *
+     * @param to The ID of the page or component to send the message to.
+     * @param payload The payload of the message.
+     */
+    sendMessage(to: string, payload: any): void;
+    private handleMessage;
+}
+
+export { Client, type IMessage, type MessageCallback, PubSub };

package/dist/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Client: () => Client,
+  PubSub: () => PubSub
+});
+module.exports = __toCommonJS(index_exports);
+var _PubSub = class _PubSub {
+  constructor() {
+    __publicField(this, "subscribers");
+    __publicField(this, "mainCallback");
+    this.subscribers = /* @__PURE__ */ new Map();
+    this.handleMessage = this.handleMessage.bind(this);
+    window.addEventListener("message", this.handleMessage);
+  }
+  static getInstance() {
+    if (!_PubSub.instance) {
+      _PubSub.instance = new _PubSub();
+    }
+    return _PubSub.instance;
+  }
+  onMessage(callback) {
+    this.mainCallback = callback;
+  }
+  /**
+   * Registers a callback function to be called when a message is received.
+   *
+   * @param pageId The ID of the page or component to register for.
+   * @param callback The callback function to be called when a message is received.
+   */
+  register(pageId, callback) {
+    this.subscribers.set(pageId, { callback });
+  }
+  /**
+   * Unregister a page or component from the pubsub.
+   * Should unregister the registered page or component if it has been removed.
+   *
+   * @param pageId The ID of the page or component to unregister from.
+   */
+  unregister(pageId) {
+    this.subscribers.delete(pageId);
+  }
+  sendMessage(message) {
+    if (this.mainCallback) {
+      this.mainCallback(message);
+    }
+    const subscriber = this.subscribers.get(message.to);
+    if (!subscriber) return;
+    if (subscriber.source) {
+      subscriber.source.postMessage(message, "*");
+    } else {
+      subscriber.callback(message);
+    }
+  }
+  async handleMessage(event) {
+    const data = event.data;
+    const source = event.source;
+    if (data?.type === "REGISTER") {
+      const registration = data;
+      this.subscribers.set(registration.pageId, {
+        source,
+        callback: (message2) => {
+          source.postMessage(message2, "*");
+        }
+      });
+      return;
+    }
+    if (!data || !data.from || !data.to) return;
+    const message = data;
+    if (this.mainCallback) {
+      await this.mainCallback(message);
+    }
+    const subscriber = this.subscribers.get(message.to);
+    if (!subscriber) return;
+    if (subscriber.source) {
+      subscriber.source.postMessage(message, "*");
+    } else {
+      await subscriber.callback(message);
+    }
+  }
+};
+__publicField(_PubSub, "instance");
+var PubSub = _PubSub;
+var Client = class {
+  /**
+   * Create a new client instance.
+   * 
+   * @param pageId The ID of the page or component to register to.
+   */
+  constructor(pageId) {
+    __publicField(this, "pageId");
+    __publicField(this, "callback");
+    __publicField(this, "pubsub");
+    __publicField(this, "isIframe");
+    this.pageId = pageId;
+    this.pubsub = PubSub.getInstance();
+    this.isIframe = window !== window.parent;
+    if (this.isIframe) {
+      window.parent.postMessage({
+        type: "REGISTER",
+        pageId: this.pageId
+      }, "*");
+      window.addEventListener("message", this.handleMessage.bind(this));
+    } else {
+      this.pubsub.register(pageId, this.handleMessage.bind(this));
+    }
+  }
+  /**
+   * Listen for messages from the parent page with a callback.
+   * 
+   * @param callback The callback function to register.
+   */
+  onMessage(callback) {
+    this.callback = callback;
+  }
+  /**
+   * Send a message to the another page or component.
+   * 
+   * @param to The ID of the page or component to send the message to.
+   * @param payload The payload of the message.
+   */
+  sendMessage(to, payload) {
+    const message = {
+      from: this.pageId,
+      to,
+      payload
+    };
+    if (this.isIframe) {
+      window.parent.postMessage(message, "*");
+    } else {
+      this.pubsub.sendMessage(message);
+    }
+  }
+  async handleMessage(event) {
+    let message;
+    if (event.data) {
+      const evt = event;
+      message = evt.data;
+    } else {
+      message = event;
+    }
+    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (this.callback) {
+      try {
+        await this.callback(message);
+      } catch (error) {
+        console.error(`Client ${this.pageId} failed to process message:`, error);
+      }
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Client,
+  PubSub
+});

package/dist/index.mjs

@@ -0,0 +1,153 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var _PubSub = class _PubSub {
+  constructor() {
+    __publicField(this, "subscribers");
+    __publicField(this, "mainCallback");
+    this.subscribers = /* @__PURE__ */ new Map();
+    this.handleMessage = this.handleMessage.bind(this);
+    window.addEventListener("message", this.handleMessage);
+  }
+  static getInstance() {
+    if (!_PubSub.instance) {
+      _PubSub.instance = new _PubSub();
+    }
+    return _PubSub.instance;
+  }
+  onMessage(callback) {
+    this.mainCallback = callback;
+  }
+  /**
+   * Registers a callback function to be called when a message is received.
+   *
+   * @param pageId The ID of the page or component to register for.
+   * @param callback The callback function to be called when a message is received.
+   */
+  register(pageId, callback) {
+    this.subscribers.set(pageId, { callback });
+  }
+  /**
+   * Unregister a page or component from the pubsub.
+   * Should unregister the registered page or component if it has been removed.
+   *
+   * @param pageId The ID of the page or component to unregister from.
+   */
+  unregister(pageId) {
+    this.subscribers.delete(pageId);
+  }
+  sendMessage(message) {
+    if (this.mainCallback) {
+      this.mainCallback(message);
+    }
+    const subscriber = this.subscribers.get(message.to);
+    if (!subscriber) return;
+    if (subscriber.source) {
+      subscriber.source.postMessage(message, "*");
+    } else {
+      subscriber.callback(message);
+    }
+  }
+  async handleMessage(event) {
+    const data = event.data;
+    const source = event.source;
+    if (data?.type === "REGISTER") {
+      const registration = data;
+      this.subscribers.set(registration.pageId, {
+        source,
+        callback: (message2) => {
+          source.postMessage(message2, "*");
+        }
+      });
+      return;
+    }
+    if (!data || !data.from || !data.to) return;
+    const message = data;
+    if (this.mainCallback) {
+      await this.mainCallback(message);
+    }
+    const subscriber = this.subscribers.get(message.to);
+    if (!subscriber) return;
+    if (subscriber.source) {
+      subscriber.source.postMessage(message, "*");
+    } else {
+      await subscriber.callback(message);
+    }
+  }
+};
+__publicField(_PubSub, "instance");
+var PubSub = _PubSub;
+var Client = class {
+  /**
+   * Create a new client instance.
+   * 
+   * @param pageId The ID of the page or component to register to.
+   */
+  constructor(pageId) {
+    __publicField(this, "pageId");
+    __publicField(this, "callback");
+    __publicField(this, "pubsub");
+    __publicField(this, "isIframe");
+    this.pageId = pageId;
+    this.pubsub = PubSub.getInstance();
+    this.isIframe = window !== window.parent;
+    if (this.isIframe) {
+      window.parent.postMessage({
+        type: "REGISTER",
+        pageId: this.pageId
+      }, "*");
+      window.addEventListener("message", this.handleMessage.bind(this));
+    } else {
+      this.pubsub.register(pageId, this.handleMessage.bind(this));
+    }
+  }
+  /**
+   * Listen for messages from the parent page with a callback.
+   * 
+   * @param callback The callback function to register.
+   */
+  onMessage(callback) {
+    this.callback = callback;
+  }
+  /**
+   * Send a message to the another page or component.
+   * 
+   * @param to The ID of the page or component to send the message to.
+   * @param payload The payload of the message.
+   */
+  sendMessage(to, payload) {
+    const message = {
+      from: this.pageId,
+      to,
+      payload
+    };
+    if (this.isIframe) {
+      window.parent.postMessage(message, "*");
+    } else {
+      this.pubsub.sendMessage(message);
+    }
+  }
+  async handleMessage(event) {
+    let message;
+    if (event.data) {
+      const evt = event;
+      message = evt.data;
+    } else {
+      message = event;
+    }
+    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (this.callback) {
+      try {
+        await this.callback(message);
+      } catch (error) {
+        console.error(`Client ${this.pageId} failed to process message:`, error);
+      }
+    }
+  }
+};
+export {
+  Client,
+  PubSub
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "iframe-pubsub",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint src/"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.20",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3"
+  }
+}