From f83596f1be798528e8d12f877654642e20dd65c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Tue, 22 Aug 2023 15:12:06 +1000 Subject: [PATCH 1/3] fix --- app/client/src/main.ts | 1 - chromeless/client/src/index.ts | 1 - .../__previewjs_internal__/messages.ts | 9 +++--- iframe/src/index.ts | 31 +++++++++---------- 4 files changed, 18 insertions(+), 24 deletions(-) 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__/messages.ts b/iframe/preview/__previewjs_internal__/messages.ts index 76197cdb283..0c2074d47a1 100644 --- a/iframe/preview/__previewjs_internal__/messages.ts +++ b/iframe/preview/__previewjs_internal__/messages.ts @@ -1,9 +1,8 @@ import type { PreviewToAppMessage } from "../../src/messages"; export function sendMessageFromPreview(message: PreviewToAppMessage) { - sendParentMessage(message); -} - -export function sendParentMessage(message: any) { - window.parent.postMessage(message, "*"); + ( + window.__PREVIEWJS__.onPreviewMessage || + window.parent.__PREVIEWJS__.onPreviewMessage + )?.(message); } diff --git a/iframe/src/index.ts b/iframe/src/index.ts index 19bc89206e7..56b86656611 100644 --- a/iframe/src/index.ts +++ b/iframe/src/index.ts @@ -4,7 +4,11 @@ import type { PreviewToAppMessage } from "./messages"; declare global { interface Window { __PREVIEWJS__: { + // Exposed on the iframe. render(options: RenderOptions): Promise; + + // Exposed either on the iframe or its parent. + onPreviewMessage?(message: PreviewToAppMessage): void; }; } } @@ -23,8 +27,6 @@ export function createController(options: { } export interface PreviewIframeController { - start(): void; - stop(): void; render(options: RenderOptions): void; resetIframe(id: string): void; } @@ -40,14 +42,10 @@ class PreviewIframeControllerImpl implements PreviewIframeController { getIframe: () => HTMLIFrameElement | null; listener(event: PreviewEvent): void; } - ) {} - - start() { - window.addEventListener("message", this.onWindowMessage); - } - - stop() { - window.removeEventListener("message", this.onWindowMessage); + ) { + // @ts-ignore + window.__PREVIEWJS__ ||= {}; + window.__PREVIEWJS__.onPreviewMessage = this.onPreviewMessage; } async render(options: RenderOptions) { @@ -85,10 +83,9 @@ class PreviewIframeControllerImpl implements PreviewIframeController { iframe.src = `/preview/${id}/?t=${Date.now()}`; } - private onWindowMessage = (event: MessageEvent) => { - const data = event.data; + private onPreviewMessage = (message: PreviewToAppMessage) => { const { listener } = this.options; - switch (data.kind) { + switch (message.kind) { case "bootstrapped": this.onBootstrapped(); break; @@ -96,7 +93,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { case "action": case "log-message": case "file-changed": - listener(data); + listener(message); break; case "rendering-setup": listener({ @@ -116,7 +113,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { kind: "log-message", level: "error", timestamp: Date.now(), - message: data.message, + message: message.message, }); listener({ kind: "rendering-done", @@ -128,13 +125,13 @@ 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; } From 9b8b82a17eb6056141ff72ab5ab181d659b74f4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Tue, 22 Aug 2023 15:16:34 +1000 Subject: [PATCH 2/3] fix --- .../preview/__previewjs_internal__/index.ts | 2 +- .../__previewjs_internal__/messages.ts | 4 +-- iframe/src/index.ts | 27 +++++++++---------- 3 files changed, 16 insertions(+), 17 deletions(-) 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 0c2074d47a1..0ed04ef493e 100644 --- a/iframe/preview/__previewjs_internal__/messages.ts +++ b/iframe/preview/__previewjs_internal__/messages.ts @@ -2,7 +2,7 @@ import type { PreviewToAppMessage } from "../../src/messages"; export function sendMessageFromPreview(message: PreviewToAppMessage) { ( - window.__PREVIEWJS__.onPreviewMessage || - window.parent.__PREVIEWJS__.onPreviewMessage + window.__PREVIEWJS_CONTROLLER__.onPreviewMessage || + window.parent.__PREVIEWJS_CONTROLLER__.onPreviewMessage )?.(message); } diff --git a/iframe/src/index.ts b/iframe/src/index.ts index 56b86656611..f24fe83302d 100644 --- a/iframe/src/index.ts +++ b/iframe/src/index.ts @@ -3,12 +3,13 @@ import type { PreviewToAppMessage } from "./messages"; declare global { interface Window { - __PREVIEWJS__: { - // Exposed on the iframe. + // Exposed on the iframe. + __PREVIEWJS_IFRAME__: { render(options: RenderOptions): Promise; - - // Exposed either on the iframe or its parent. - onPreviewMessage?(message: PreviewToAppMessage): void; + }; + // Typically exposed on the iframe's parent to track its state. + __PREVIEWJS_CONTROLLER__: { + onPreviewMessage(message: PreviewToAppMessage): void; }; } } @@ -23,7 +24,9 @@ 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 { @@ -42,11 +45,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { getIframe: () => HTMLIFrameElement | null; listener(event: PreviewEvent): void; } - ) { - // @ts-ignore - window.__PREVIEWJS__ ||= {}; - window.__PREVIEWJS__.onPreviewMessage = this.onPreviewMessage; - } + ) {} async render(options: RenderOptions) { this.lastRenderOptions = options; @@ -61,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 @@ -83,7 +82,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { iframe.src = `/preview/${id}/?t=${Date.now()}`; } - private onPreviewMessage = (message: PreviewToAppMessage) => { + onPreviewMessage(message: PreviewToAppMessage) { const { listener } = this.options; switch (message.kind) { case "bootstrapped": @@ -135,7 +134,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController { }); break; } - }; + } private onBootstrapped() { this.idBootstrapped = this.pendingPreviewableIdBootstrap; From 4a01aacf5ddd13b2ef043cf1cb428bc3a81fc3bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= Date: Tue, 22 Aug 2023 15:19:42 +1000 Subject: [PATCH 3/3] Update messages.ts --- iframe/preview/__previewjs_internal__/messages.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/iframe/preview/__previewjs_internal__/messages.ts b/iframe/preview/__previewjs_internal__/messages.ts index 0ed04ef493e..5ba25e537a5 100644 --- a/iframe/preview/__previewjs_internal__/messages.ts +++ b/iframe/preview/__previewjs_internal__/messages.ts @@ -2,7 +2,6 @@ import type { PreviewToAppMessage } from "../../src/messages"; export function sendMessageFromPreview(message: PreviewToAppMessage) { ( - window.__PREVIEWJS_CONTROLLER__.onPreviewMessage || - window.parent.__PREVIEWJS_CONTROLLER__.onPreviewMessage - )?.(message); + window.__PREVIEWJS_CONTROLLER__ || window.parent.__PREVIEWJS_CONTROLLER__ + ).onPreviewMessage(message); }