refactor: switch to JS API exposed on window.parent instead of postMe…

…ssage (#1955)
fwouts · Aug 22, 2023 · a91c53e · a91c53e
1 parent 5bcf8bc
commit a91c53e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 29 deletions.
diff --git a/app/client/src/main.ts b/app/client/src/main.ts
@@ -29,7 +29,6 @@ window.addEventListener("message", (event: MessageEvent) => {
 window.addEventListener("popstate", () => {
   onUrlChanged().catch(console.error);
 });
-iframeController.start();
 onUrlChanged().catch(console.error);
 
 async function onUrlChanged() {

diff --git a/chromeless/client/src/index.ts b/chromeless/client/src/index.ts
@@ -18,7 +18,6 @@ const controller = createController({
 });
 
 window.onload = () => {
-  controller.start();
   window.loadIframePreview = (options: RenderOptions) => {
     controller.render(options);
   };

diff --git a/iframe/preview/__previewjs_internal__/index.ts b/iframe/preview/__previewjs_internal__/index.ts
@@ -64,7 +64,7 @@ export function initPreview({
   }
 
   let lastRenderOptions: RenderOptions | null = null;
-  window.__PREVIEWJS__ = {
+  window.__PREVIEWJS_IFRAME__ = {
     render: async (data) => {
       lastRenderOptions = data;
       await render(data);

diff --git a/iframe/preview/__previewjs_internal__/messages.ts b/iframe/preview/__previewjs_internal__/messages.ts
@@ -1,9 +1,7 @@
 import type { PreviewToAppMessage } from "../../src/messages";
 
 export function sendMessageFromPreview(message: PreviewToAppMessage) {
-  sendParentMessage(message);
-}
-
-export function sendParentMessage(message: any) {
-  window.parent.postMessage(message, "*");
+  (
+    window.__PREVIEWJS_CONTROLLER__ || window.parent.__PREVIEWJS_CONTROLLER__
+  ).onPreviewMessage(message);
 }
diff --git a/iframe/src/index.ts b/iframe/src/index.ts
@@ -3,9 +3,14 @@ import type { PreviewToAppMessage } from "./messages";
 
 declare global {
   interface Window {
-    __PREVIEWJS__: {
+    // Exposed on the iframe.
+    __PREVIEWJS_IFRAME__: {
       render(options: RenderOptions): Promise<void>;
     };
+    // Typically exposed on the iframe's parent to track its state.
+    __PREVIEWJS_CONTROLLER__: {
+      onPreviewMessage(message: PreviewToAppMessage): void;
+    };
   }
 }
 
@@ -19,12 +24,12 @@ export function createController(options: {
   getIframe: () => HTMLIFrameElement | null;
   listener(event: PreviewEvent): void;
 }): PreviewIframeController {
-  return new PreviewIframeControllerImpl(options);
+  const controller = new PreviewIframeControllerImpl(options);
+  window.__PREVIEWJS_CONTROLLER__ = controller;
+  return controller;
 }
 
 export interface PreviewIframeController {
-  start(): void;
-  stop(): void;
   render(options: RenderOptions): void;
   resetIframe(id: string): void;
 }
@@ -42,14 +47,6 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     }
   ) {}
 
-  start() {
-    window.addEventListener("message", this.onWindowMessage);
-  }
-
-  stop() {
-    window.removeEventListener("message", this.onWindowMessage);
-  }
-
   async render(options: RenderOptions) {
     this.lastRenderOptions = options;
     if (
@@ -63,7 +60,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     if (!iframeWindow) {
       return;
     }
-    const renderPromise = iframeWindow.__PREVIEWJS__.render(options);
+    const renderPromise = iframeWindow.__PREVIEWJS_IFRAME__.render(options);
     this.clearExpectRenderTimeout();
     this.expectRenderTimeout = setTimeout(() => {
       // eslint-disable-next-line no-console
@@ -85,18 +82,17 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     iframe.src = `/preview/${id}/?t=${Date.now()}`;
   }
 
-  private onWindowMessage = (event: MessageEvent<PreviewToAppMessage>) => {
-    const data = event.data;
+  onPreviewMessage(message: PreviewToAppMessage) {
     const { listener } = this.options;
-    switch (data.kind) {
+    switch (message.kind) {
       case "bootstrapped":
         this.onBootstrapped();
         break;
       case "before-render":
       case "action":
       case "log-message":
       case "file-changed":
-        listener(data);
+        listener(message);
         break;
       case "rendering-setup":
         listener({
@@ -116,7 +112,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
           kind: "log-message",
           level: "error",
           timestamp: Date.now(),
-          message: data.message,
+          message: message.message,
         });
         listener({
           kind: "rendering-done",
@@ -128,17 +124,17 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
           kind: "log-message",
           level: "error",
           timestamp: Date.now(),
-          message: generateMessageFromViteError(data.payload.err),
+          message: generateMessageFromViteError(message.payload.err),
         });
         break;
       case "vite-before-update":
         listener({
           kind: "before-vite-update",
-          payload: data.payload,
+          payload: message.payload,
         });
         break;
     }
-  };
+  }
 
   private onBootstrapped() {
     this.idBootstrapped = this.pendingPreviewableIdBootstrap;