Fix memory leak when listening to 'message' events from child iframes (…

…Shopify#192)
instantcommerce · Dec 6, 2022 · fb2e2e8 · fb2e2e8
1 parent 5b76ac8
commit fb2e2e8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/.changeset/curvy-sheep-hope.md b/.changeset/curvy-sheep-hope.md
@@ -0,0 +1,5 @@
+---
+'@remote-ui/rpc': patch
+---
+
+Fix memory leak when listening to 'message' events from child iframes
diff --git a/packages/rpc/src/adaptors/iframe-parent.ts b/packages/rpc/src/adaptors/iframe-parent.ts
@@ -18,13 +18,21 @@ export function fromIframe(
     (event: MessageEvent) => void
   >();
 
-  const iframeReadyPromise = new Promise<void>((resolve) => {
-    window.addEventListener('message', (event) => {
-      if (event.source !== target.contentWindow) return;
-      if (event.data === 'remote-ui::ready') {
-        resolve();
-      }
-    });
+
+  let resolveIFrameReadyPromise;
+
+  function onMessage(event) {
+    if (event.source !== target.contentWindow) return;
+
+    if (event.data === 'remote-ui::ready') {
+      window.removeEventListener('message', onMessage);
+      resolveIFrameReadyPromise();
+    }
+  }
+
+  const iframeReadyPromise = new Promise<void>(resolve => {
+    resolveIFrameReadyPromise = resolve;
+    window.addEventListener('message', onMessage);
   });
 
   return {
@@ -50,6 +58,8 @@ export function fromIframe(
       self.removeEventListener(event, wrappedListener);
     },
     terminate() {
+      window.removeEventListener('message', onMessage);
+
       if (shouldTerminate) target.remove();
     },
   };