diff --git a/app/client/src/main.ts b/app/client/src/main.ts index 4ab77d415a9..cb5b47f488c 100644 --- 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 index e3eb76ed288..96e195e2c19 100644 --- 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 index 8510b39780f..26dbd68f846 100644 --- 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 index 76197cdb283..5ba25e537a5 100644 --- 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 index 19bc89206e7..f24fe83302d 100644 --- 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; }; + // 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,10 +82,9 @@ class PreviewIframeControllerImpl implements PreviewIframeController { iframe.src = `/preview/${id}/?t=${Date.now()}`; } - private onWindowMessage = (event: MessageEvent) => { - const data = event.data; + onPreviewMessage(message: PreviewToAppMessage) { const { listener } = this.options; - switch (data.kind) { + switch (message.kind) { case "bootstrapped": this.onBootstrapped(); break; @@ -96,7 +92,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { 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;