iframe-pubsub 1.0.21 → 1.0.22

package/dist/index.d.mts

@@ -26,37 +26,14 @@ declare class Client {
     protected targetAIChatClientId: string;
     private pageId;
     private callback?;
-    private pubsub;
+    private pubsub?;
     private isIframe;
+    private isMainApp;
     private boundHandleMessage;
-    /**
-     * Create a new client instance.
-     *
-     * @param pageId The ID of the page or component to register to.
-     */
     constructor(pageId: string, targetAIChatClientId?: string);
-    /**
-     * Unregister the client from the pubsub.
-     */
     unregister(): void;
-    /**
-     * Clean up the aichat registration if the iframe is removed.
-     *
-     * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-     */
     cleanAIChat(): boolean;
-    /**
-     * 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;
     /**
      * Check if a client with the given ID exists in the PubSub system.
@@ -74,10 +51,15 @@ declare class Client {
      * @param clientId The ID of the client to check.
      * @param retryCount The current retry count.
      * @returns A Promise that resolves to true if the client exists, false otherwise.
-     * @private
      */
     private checkClientExistsWithRetry;
     private handleMessage;
+    getDebugInfo(): {
+        pageId: string;
+        isMainApp: boolean;
+        isIframe: boolean;
+        windowLevel: string;
+    };
 }
 
 declare enum AIChatNameEnum {

package/dist/index.d.ts

@@ -26,37 +26,14 @@ declare class Client {
     protected targetAIChatClientId: string;
     private pageId;
     private callback?;
-    private pubsub;
+    private pubsub?;
     private isIframe;
+    private isMainApp;
     private boundHandleMessage;
-    /**
-     * Create a new client instance.
-     *
-     * @param pageId The ID of the page or component to register to.
-     */
     constructor(pageId: string, targetAIChatClientId?: string);
-    /**
-     * Unregister the client from the pubsub.
-     */
     unregister(): void;
-    /**
-     * Clean up the aichat registration if the iframe is removed.
-     *
-     * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-     */
     cleanAIChat(): boolean;
-    /**
-     * 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;
     /**
      * Check if a client with the given ID exists in the PubSub system.
@@ -74,10 +51,15 @@ declare class Client {
      * @param clientId The ID of the client to check.
      * @param retryCount The current retry count.
      * @returns A Promise that resolves to true if the client exists, false otherwise.
-     * @private
      */
     private checkClientExistsWithRetry;
     private handleMessage;
+    getDebugInfo(): {
+        pageId: string;
+        isMainApp: boolean;
+        isIframe: boolean;
+        windowLevel: string;
+    };
 }
 
 declare enum AIChatNameEnum {

package/dist/index.js

@@ -151,82 +151,70 @@ var PubSub = _PubSub;
 
 // src/Client.ts
 var Client = class {
-  /**
-   * Create a new client instance.
-   * 
-   * @param pageId The ID of the page or component to register to.
-   */
   constructor(pageId, targetAIChatClientId = "aichat" /* AI_CHAT_CLIENT_ID */) {
     __publicField(this, "targetAIChatClientId");
     __publicField(this, "pageId");
     __publicField(this, "callback");
     __publicField(this, "pubsub");
     __publicField(this, "isIframe");
+    __publicField(this, "isMainApp");
     __publicField(this, "boundHandleMessage");
     this.targetAIChatClientId = targetAIChatClientId;
     this.pageId = pageId;
-    this.pubsub = PubSub.getInstance();
     this.isIframe = window !== window.parent;
+    this.isMainApp = window === window.top;
     this.boundHandleMessage = this.handleMessage.bind(this);
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "REGISTER",
-        pageId: this.pageId
-      }, "*");
-      window.addEventListener("message", this.boundHandleMessage);
-    } else {
+    if (this.isMainApp) {
+      this.pubsub = PubSub.getInstance();
       this.pubsub.register(pageId, this.boundHandleMessage);
+      console.info(`\u2705 Client ${pageId} registered with main PubSub`);
+    } else {
+      console.info(
+        `\u{1F4E1} Client ${pageId} from iframe is registering with top window PubSub`
+      );
+      window.top.postMessage(
+        {
+          type: "REGISTER",
+          pageId: this.pageId
+        },
+        "*"
+      );
+      window.addEventListener("message", this.boundHandleMessage);
     }
   }
-  /**
-   * Unregister the client from the pubsub.
-   */
   unregister() {
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "UNREGISTER",
-        pageId: this.pageId
-      }, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.unregister(this.pageId);
+    } else {
+      window.top.postMessage(
+        {
+          type: "UNREGISTER",
+          pageId: this.pageId
+        },
+        "*"
+      );
+      window.removeEventListener("message", this.boundHandleMessage);
     }
+    console.info(`\u274C Client ${this.pageId} unregistered from PubSub`);
   }
-  /**
-   * Clean up the aichat registration if the iframe is removed.
-   * 
-   * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-   */
+  // Will not support this method anymore.
   cleanAIChat() {
-    if (this.isIframe) {
-      throw new Error("You are not allowed to clean up aichat from iframe.");
-    }
-    window.removeEventListener("message", this.boundHandleMessage);
-    return this.pubsub.unregister(this.targetAIChatClientId);
+    console.warn(`\u203C\uFE0F Unsupported operation cleanAIChat has been called from ${this.pageId}.`);
+    return false;
   }
-  /**
-   * 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 {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.sendMessage(message);
+    } else {
+      window.top.postMessage(message, "*");
     }
   }
   /**
@@ -238,7 +226,12 @@ var Client = class {
    * @returns A Promise that resolves to true if the client exists, false otherwise.
    */
   checkClientExists(clientId, maxRetries = 3, retryInterval = 1e3) {
-    return this.checkClientExistsWithRetry(clientId, 0, maxRetries, retryInterval);
+    return this.checkClientExistsWithRetry(
+      clientId,
+      0,
+      maxRetries,
+      retryInterval
+    );
   }
   /**
    * Check if a client with the given ID exists in the PubSub system with retry mechanism.
@@ -247,11 +240,26 @@ var Client = class {
    * @param clientId The ID of the client to check.
    * @param retryCount The current retry count.
    * @returns A Promise that resolves to true if the client exists, false otherwise.
-   * @private
    */
   checkClientExistsWithRetry(clientId, retryCount, maxRetries, retryInterval) {
     return new Promise((resolve) => {
-      if (this.isIframe) {
+      if (this.isMainApp && this.pubsub) {
+        const exists = this.pubsub.isClientExists(clientId);
+        if (exists) {
+          resolve(true);
+        } else if (retryCount < maxRetries - 1) {
+          setTimeout(() => {
+            this.checkClientExistsWithRetry(
+              clientId,
+              retryCount + 1,
+              maxRetries,
+              retryInterval
+            ).then((exists2) => resolve(exists2));
+          }, retryInterval);
+        } else {
+          resolve(false);
+        }
+      } else {
         const requestId = `check-client-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const messageHandler = (event) => {
           const data = event.data;
@@ -262,7 +270,12 @@ var Client = class {
               resolve(true);
             } else if (retryCount < maxRetries - 1) {
               setTimeout(() => {
-                this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists) => resolve(exists));
+                this.checkClientExistsWithRetry(
+                  clientId,
+                  retryCount + 1,
+                  maxRetries,
+                  retryInterval
+                ).then((exists) => resolve(exists));
               }, retryInterval);
             } else {
               resolve(false);
@@ -270,27 +283,19 @@ var Client = class {
           }
         };
         window.addEventListener("message", messageHandler);
-        window.parent.postMessage({
-          type: "CLIENT_EXISTS_CHECK",
-          clientId,
-          requestId,
-          from: this.pageId
-        }, "*");
+        window.top.postMessage(
+          {
+            type: "CLIENT_EXISTS_CHECK",
+            clientId,
+            requestId,
+            from: this.pageId
+          },
+          "*"
+        );
         const removeHandlerTimeout = setTimeout(() => {
           window.removeEventListener("message", messageHandler);
           resolve(false);
         }, retryInterval + 1e3);
-      } else {
-        const exists = this.pubsub.isClientExists(clientId);
-        if (exists) {
-          resolve(true);
-        } else if (retryCount < maxRetries - 1) {
-          setTimeout(() => {
-            this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists2) => resolve(exists2));
-          }, retryInterval);
-        } else {
-          resolve(false);
-        }
       }
     });
   }
@@ -302,14 +307,34 @@ var Client = class {
     } else {
       message = event;
     }
-    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (!message || !message.from || !message.to || message.to !== this.pageId)
+      return;
     if (this.callback) {
       try {
         this.callback(message);
       } catch (error) {
-        console.error(`Client ${this.pageId} failed to process message:`, error);
+        console.error(
+          `Client ${this.pageId} failed to process message:`,
+          error
+        );
+      }
+    }
+  }
+  getDebugInfo() {
+    let windowLevel = "main";
+    if (window !== window.top) {
+      if (window.parent === window.top) {
+        windowLevel = "first-level-iframe";
+      } else {
+        windowLevel = "nested-iframe";
       }
     }
+    return {
+      pageId: this.pageId,
+      isMainApp: this.isMainApp,
+      isIframe: this.isIframe,
+      windowLevel
+    };
   }
 };
 

package/dist/index.mjs

@@ -124,82 +124,70 @@ var PubSub = _PubSub;
 
 // src/Client.ts
 var Client = class {
-  /**
-   * Create a new client instance.
-   * 
-   * @param pageId The ID of the page or component to register to.
-   */
   constructor(pageId, targetAIChatClientId = "aichat" /* AI_CHAT_CLIENT_ID */) {
     __publicField(this, "targetAIChatClientId");
     __publicField(this, "pageId");
     __publicField(this, "callback");
     __publicField(this, "pubsub");
     __publicField(this, "isIframe");
+    __publicField(this, "isMainApp");
     __publicField(this, "boundHandleMessage");
     this.targetAIChatClientId = targetAIChatClientId;
     this.pageId = pageId;
-    this.pubsub = PubSub.getInstance();
     this.isIframe = window !== window.parent;
+    this.isMainApp = window === window.top;
     this.boundHandleMessage = this.handleMessage.bind(this);
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "REGISTER",
-        pageId: this.pageId
-      }, "*");
-      window.addEventListener("message", this.boundHandleMessage);
-    } else {
+    if (this.isMainApp) {
+      this.pubsub = PubSub.getInstance();
       this.pubsub.register(pageId, this.boundHandleMessage);
+      console.info(`\u2705 Client ${pageId} registered with main PubSub`);
+    } else {
+      console.info(
+        `\u{1F4E1} Client ${pageId} from iframe is registering with top window PubSub`
+      );
+      window.top.postMessage(
+        {
+          type: "REGISTER",
+          pageId: this.pageId
+        },
+        "*"
+      );
+      window.addEventListener("message", this.boundHandleMessage);
     }
   }
-  /**
-   * Unregister the client from the pubsub.
-   */
   unregister() {
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "UNREGISTER",
-        pageId: this.pageId
-      }, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.unregister(this.pageId);
+    } else {
+      window.top.postMessage(
+        {
+          type: "UNREGISTER",
+          pageId: this.pageId
+        },
+        "*"
+      );
+      window.removeEventListener("message", this.boundHandleMessage);
     }
+    console.info(`\u274C Client ${this.pageId} unregistered from PubSub`);
   }
-  /**
-   * Clean up the aichat registration if the iframe is removed.
-   * 
-   * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-   */
+  // Will not support this method anymore.
   cleanAIChat() {
-    if (this.isIframe) {
-      throw new Error("You are not allowed to clean up aichat from iframe.");
-    }
-    window.removeEventListener("message", this.boundHandleMessage);
-    return this.pubsub.unregister(this.targetAIChatClientId);
+    console.warn(`\u203C\uFE0F Unsupported operation cleanAIChat has been called from ${this.pageId}.`);
+    return false;
   }
-  /**
-   * 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 {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.sendMessage(message);
+    } else {
+      window.top.postMessage(message, "*");
     }
   }
   /**
@@ -211,7 +199,12 @@ var Client = class {
    * @returns A Promise that resolves to true if the client exists, false otherwise.
    */
   checkClientExists(clientId, maxRetries = 3, retryInterval = 1e3) {
-    return this.checkClientExistsWithRetry(clientId, 0, maxRetries, retryInterval);
+    return this.checkClientExistsWithRetry(
+      clientId,
+      0,
+      maxRetries,
+      retryInterval
+    );
   }
   /**
    * Check if a client with the given ID exists in the PubSub system with retry mechanism.
@@ -220,11 +213,26 @@ var Client = class {
    * @param clientId The ID of the client to check.
    * @param retryCount The current retry count.
    * @returns A Promise that resolves to true if the client exists, false otherwise.
-   * @private
    */
   checkClientExistsWithRetry(clientId, retryCount, maxRetries, retryInterval) {
     return new Promise((resolve) => {
-      if (this.isIframe) {
+      if (this.isMainApp && this.pubsub) {
+        const exists = this.pubsub.isClientExists(clientId);
+        if (exists) {
+          resolve(true);
+        } else if (retryCount < maxRetries - 1) {
+          setTimeout(() => {
+            this.checkClientExistsWithRetry(
+              clientId,
+              retryCount + 1,
+              maxRetries,
+              retryInterval
+            ).then((exists2) => resolve(exists2));
+          }, retryInterval);
+        } else {
+          resolve(false);
+        }
+      } else {
         const requestId = `check-client-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const messageHandler = (event) => {
           const data = event.data;
@@ -235,7 +243,12 @@ var Client = class {
               resolve(true);
             } else if (retryCount < maxRetries - 1) {
               setTimeout(() => {
-                this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists) => resolve(exists));
+                this.checkClientExistsWithRetry(
+                  clientId,
+                  retryCount + 1,
+                  maxRetries,
+                  retryInterval
+                ).then((exists) => resolve(exists));
               }, retryInterval);
             } else {
               resolve(false);
@@ -243,27 +256,19 @@ var Client = class {
           }
         };
         window.addEventListener("message", messageHandler);
-        window.parent.postMessage({
-          type: "CLIENT_EXISTS_CHECK",
-          clientId,
-          requestId,
-          from: this.pageId
-        }, "*");
+        window.top.postMessage(
+          {
+            type: "CLIENT_EXISTS_CHECK",
+            clientId,
+            requestId,
+            from: this.pageId
+          },
+          "*"
+        );
         const removeHandlerTimeout = setTimeout(() => {
           window.removeEventListener("message", messageHandler);
           resolve(false);
         }, retryInterval + 1e3);
-      } else {
-        const exists = this.pubsub.isClientExists(clientId);
-        if (exists) {
-          resolve(true);
-        } else if (retryCount < maxRetries - 1) {
-          setTimeout(() => {
-            this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists2) => resolve(exists2));
-          }, retryInterval);
-        } else {
-          resolve(false);
-        }
       }
     });
   }
@@ -275,14 +280,34 @@ var Client = class {
     } else {
       message = event;
     }
-    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (!message || !message.from || !message.to || message.to !== this.pageId)
+      return;
     if (this.callback) {
       try {
         this.callback(message);
       } catch (error) {
-        console.error(`Client ${this.pageId} failed to process message:`, error);
+        console.error(
+          `Client ${this.pageId} failed to process message:`,
+          error
+        );
+      }
+    }
+  }
+  getDebugInfo() {
+    let windowLevel = "main";
+    if (window !== window.top) {
+      if (window.parent === window.top) {
+        windowLevel = "first-level-iframe";
+      } else {
+        windowLevel = "nested-iframe";
       }
     }
+    return {
+      pageId: this.pageId,
+      isMainApp: this.isMainApp,
+      isIframe: this.isIframe,
+      windowLevel
+    };
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iframe-pubsub",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "A PubSub library for iframe communication.",
   "author": "Lap Tran",
   "license": "ISC",