Fix IMC handshake async bug

Author: Shellishack

.changeset/pre.json

@@ -65,6 +65,7 @@
     "true-suits-fly",
     "vast-places-rhyme",
     "weak-beers-watch",
-    "wicked-spoons-fry"
+    "wicked-spoons-fry",
+    "young-jeans-behave"
   ]
 }

.changeset/young-jeans-behave.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Fix IMC handshake async bug

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.53
+
+### Patch Changes
+
+- Fix IMC handshake async bug
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.53
+
 ## 0.1.1-alpha.52
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.52",
+  "version": "0.1.1-alpha.53",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -37,7 +37,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.52",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.53",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.53
+
+### Patch Changes
+
+- Fix IMC handshake async bug
+
 ## 0.1.1-alpha.52
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.52",
+    "version": "0.1.1-alpha.53",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/imc/inter-module-communication.ts

@@ -64,13 +64,18 @@ export class InterModuleCommunication {
       const type = message.type;
 
       // Return if the channel ID exists but does not match the current channel ID
-      if (this.channelId !== undefined && channelId !== this.channelId) {
+      // (channel ID can be undefined during initial handshake)
+      if (
+        this.channelId !== undefined &&
+        channelId !== undefined &&
+        channelId !== this.channelId
+      ) {
         return;
       }
 
       if (
         this.messageRecords?.has(messageId) &&
-        type !== IMCMessageTypeEnum.SignalGetWindowId
+        type !== IMCMessageTypeEnum.SignalRequestOtherWindowId
       ) {
         console.warn(
           `[${
@@ -89,7 +94,7 @@ export class InterModuleCommunication {
         );
       }
 
-      if (message.from !== undefined) {
+      if (message.from !== undefined && message.type !== IMCMessageTypeEnum.SignalIgnore) {
         console.log(
           `Module ${this.thisWindowId} received message from module ${
             message.from
@@ -122,7 +127,7 @@ export class InterModuleCommunication {
         }
 
         const message = event.data;
-        const otherWindowId = message.windowId;
+        const otherWindowId = message.payload;
         this.otherWindowId = otherWindowId;
 
         const sender = new MessageSender(
@@ -149,7 +154,7 @@ export class InterModuleCommunication {
       this.otherWindow = window;
       this.otherWindow.postMessage(
         {
-          type: IMCMessageTypeEnum.SignalGetWindowId,
+          type: IMCMessageTypeEnum.SignalRequestOtherWindowId,
           from: this.thisWindowId,
         },
         "*"
@@ -237,7 +242,7 @@ export class InterModuleCommunication {
 
     // Set get window ID handler in the receiver handler map.
     this.receiverHandlerMap?.set(
-      IMCMessageTypeEnum.SignalGetWindowId,
+      IMCMessageTypeEnum.SignalRequestOtherWindowId,
       async (senderWindow: Window, message: IMCMessage) => {
         console.log(
           "Received window ID request. Sending current window ID to other window: "
@@ -246,16 +251,8 @@ export class InterModuleCommunication {
         if (!id) {
           throw new Error("This window ID is not defined.");
         }
-        const msg: IMCMessage = {
-          messageId: message.messageId,
-          channelId: message.channelId,
-          type: IMCMessageTypeEnum.SignalReturnWindowId,
-          payload: {
-            windowId: id,
-          },
-          from: id,
-        };
-        senderWindow.postMessage(msg, "*");
+
+        return id;
       }
     );
 

npm-packages/shared-utils/src/imc/poly-imc.ts

@@ -219,7 +219,7 @@ export class ConnectionListener {
             message: IMCMessage,
             abortSignal?: AbortSignal
           ) => {
-            this.handleExtReady(senderWindow, message, abortSignal);
+            await this.handleExtReady(senderWindow, message, abortSignal);
           },
         ],
       ])

npm-packages/shared-utils/src/types/types.ts

@@ -58,8 +58,7 @@ export enum IMCMessageTypeEnum {
   // #endregion
 
   // #region Signal messages
-  SignalGetWindowId = "signal-get-window-id",
-  SignalReturnWindowId = "signal-return-window-id",
+  SignalRequestOtherWindowId = "signal-request-other-window-id",
   // A message to notify sender that the message
   // has been received and finished processing
   SignalAcknowledge = "signal-acknowledge",

web/components/marketplace/app/app-gallery.tsx

@@ -140,7 +140,7 @@ export default function AppGallery() {
   ]);
 
   return (
-    <div className="flex flex-col gap-y-2">
+    <div className="h-full w-full grid grid-rows-[max-content_1fr] gap-y-2 overflow-y-auto">
       <div className="flex flex-col items-center">
         <Select
           label="Filter apps"
@@ -184,7 +184,7 @@ export default function AppGallery() {
           </p>
         </div>
       ) : (
-        <div className="grid grid-cols-2 gap-2 w-full">{previews}</div>
+        <div className="grid grid-cols-2 gap-2 w-full h-full overflow-y-auto overflow-x-hidden px-1">{previews}</div>
       )}
     </div>
   );