refactor: centralise state management with PreviewIframeState (#2182)

app/client/src/main.ts

@@ -12,8 +12,8 @@ const iframe = document.getElementById("root") as HTMLIFrameElement;
 const rpcApi = createAxiosApi("/api/");
 const iframeController = createController({
   getIframe: () => iframe,
-  listener: (event) => {
-    console.log(event);
+  onStateUpdate: (state) => {
+    console.log(state);
   },
 });
 

chromeless/client/src/index.ts

@@ -1,19 +1,17 @@
-import type { PreviewEvent, RenderOptions } from "@previewjs/iframe";
+import type { PreviewIframeState, RenderOptions } from "@previewjs/iframe";
 import { createController } from "@previewjs/iframe";
 
 declare global {
   interface Window {
     loadIframePreview(previewableId: string, options: RenderOptions): void;
-    onIframeEvent?(event: PreviewEvent): void;
+    onIframeStateUpdate?(state: PreviewIframeState): void;
   }
 }
 
 const controller = createController({
   getIframe: () => document.getElementById("iframe") as HTMLIFrameElement,
-  listener: (event) => {
-    if (window.onIframeEvent) {
-      window.onIframeEvent(event);
-    }
+  onStateUpdate: (state) => {
+    window.onIframeStateUpdate?.(state);
   },
 });
 

chromeless/src/preview.ts

@@ -8,8 +8,8 @@ import {
 } from "@previewjs/properties";
 import type playwright from "playwright";
 import ts from "typescript";
-import { setupPreviewEventListener } from "./event-listener.js";
 import { getPreviewIframe } from "./iframe.js";
+import { setupPreviewStateListener } from "./state-listener.js";
 
 export async function startPreview({
   workspace,
@@ -31,16 +31,16 @@ export async function startPreview({
     // No-op by default.
   };
 
-  const events = await setupPreviewEventListener(page, (event) => {
-    if (event.kind === "rendered") {
+  const getState = await setupPreviewStateListener(page, (state) => {
+    if (state.rendered) {
       onRenderingDone();
-    } else if (event.kind === "error") {
-      onRenderingError(new Error(event.message));
+    } else if (state.errors.length > 0) {
+      onRenderingError(new Error(state.errors[0]!.message));
     }
   });
 
   return {
-    events,
+    getState,
     iframe: {
       async waitForIdle() {
         await waitUntilNetworkIdle(page);

chromeless/src/state-listener.ts

@@ -0,0 +1,23 @@
+import type { PreviewIframeState } from "@previewjs/iframe";
+import type { Page } from "playwright";
+
+export async function setupPreviewStateListener(
+  page: Page,
+  listener: (state: PreviewIframeState) => void
+) {
+  let state: PreviewIframeState = {
+    loading: false,
+    rendered: false,
+    errors: [],
+    logs: [],
+    actions: [],
+  };
+  await page.exposeFunction(
+    "onIframeStateUpdate",
+    (newState: PreviewIframeState) => {
+      state = newState;
+      listener(state);
+    }
+  );
+  return () => state;
+}

framework-plugins/react/tests/action-logs.spec.ts

@@ -28,20 +28,23 @@ for (const reactVersion of reactVersions()) {
         );
         await preview.show("src/Button.tsx:Button");
         const button = await preview.iframe.waitForSelector("#button");
-        preview.events.clear();
         await button.click();
-        expect(preview.events.get()).toEqual([
-          {
-            kind: "action",
-            path: "onClick",
-            type: "fn",
-          },
-          {
-            kind: "log-message",
-            level: "log",
-            message: "onClick invoked",
-          },
-        ]);
+        expect(preview.getState()).toMatchObject({
+          logs: [
+            {
+              kind: "log-message",
+              level: "log",
+              message: "onClick invoked",
+            },
+          ],
+          actions: [
+            {
+              kind: "action",
+              path: "onClick",
+              type: "fn",
+            },
+          ],
+        });
       });
 
       test("emits action event for explicit callbacks", async (preview) => {
@@ -64,20 +67,23 @@ for (const reactVersion of reactVersions()) {
           }`
         );
         const button = await preview.iframe.waitForSelector("#button");
-        preview.events.clear();
         await button.click();
-        expect(preview.events.get()).toEqual([
-          {
-            kind: "action",
-            path: "onClick",
-            type: "fn",
-          },
-          {
-            kind: "log-message",
-            level: "log",
-            message: "onClick callback invoked!",
-          },
-        ]);
+        expect(preview.getState()).toMatchObject({
+          logs: [
+            {
+              kind: "log-message",
+              level: "log",
+              message: "onClick callback invoked!",
+            },
+          ],
+          actions: [
+            {
+              kind: "action",
+              path: "onClick",
+              type: "fn",
+            },
+          ],
+        });
       });
 
       test("shows action logs on link click", async (preview) => {
@@ -93,15 +99,16 @@ for (const reactVersion of reactVersions()) {
         );
         await preview.show("src/Link.tsx:Link");
         const link = await preview.iframe.waitForSelector("#link");
-        preview.events.clear();
         await link.click();
-        expect(preview.events.get()).toEqual([
-          {
-            kind: "action",
-            path: "https://www.google.com/",
-            type: "url",
-          },
-        ]);
+        expect(preview.getState()).toMatchObject({
+          actions: [
+            {
+              kind: "action",
+              path: "https://www.google.com/",
+              type: "url",
+            },
+          ],
+        });
       });
     });
   });

framework-plugins/react/tests/console.spec.ts

@@ -31,7 +31,6 @@ for (const reactVersion of reactVersions()) {
         );
         await preview.iframe.waitForSelector("#update-1");
         await preview.expectLoggedMessages.toMatch(["Render 1"], "log");
-        preview.events.clear();
         await preview.fileManager.update(
           "src/App.tsx",
           `function App() {

framework-plugins/react/tests/error-handling.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
 import { previewTest } from "@previewjs/testing";
 import path from "path";
 import url from "url";
@@ -32,16 +32,7 @@ test.describe.parallel("react/error handling", () => {
         await preview.show("src/App.tsx:App").catch(() => {
           /* expected error */
         });
-        expect(await preview.events.get()).toEqual([
-          {
-            kind: "bootstrapping",
-          },
-          {
-            kind: "error",
-            source: "load",
-            message: "Expected error",
-          },
-        ]);
+        await preview.expectErrors.toMatch(["Expected error"]);
       });
 
       test("handles syntax errors gracefully", async (preview) => {

framework-plugins/solid/tests/action-logs.spec.ts

@@ -25,20 +25,23 @@ test.describe.parallel("solid/action logs", () => {
     );
     await preview.show("src/Button.tsx:Button");
     const button = await preview.iframe.waitForSelector("#button");
-    preview.events.clear();
     await button.click();
-    expect(preview.events.get()).toEqual([
-      {
-        kind: "action",
-        path: "onClick",
-        type: "fn",
-      },
-      {
-        kind: "log-message",
-        level: "log",
-        message: "onClick invoked",
-      },
-    ]);
+    expect(preview.getState()).toMatchObject({
+      logs: [
+        {
+          kind: "log-message",
+          level: "log",
+          message: "onClick invoked",
+        },
+      ],
+      actions: [
+        {
+          kind: "action",
+          path: "onClick",
+          type: "fn",
+        },
+      ],
+    });
   });
 
   test("emits action event for explicit callbacks", async (preview) => {
@@ -63,20 +66,23 @@ test.describe.parallel("solid/action logs", () => {
           }`
     );
     const button = await preview.iframe.waitForSelector("#button");
-    preview.events.clear();
     await button.click();
-    expect(preview.events.get()).toEqual([
-      {
-        kind: "action",
-        path: "onClick",
-        type: "fn",
-      },
-      {
-        kind: "log-message",
-        level: "log",
-        message: "onClick callback invoked!",
-      },
-    ]);
+    expect(preview.getState()).toMatchObject({
+      logs: [
+        {
+          kind: "log-message",
+          level: "log",
+          message: "onClick callback invoked!",
+        },
+      ],
+      actions: [
+        {
+          kind: "action",
+          path: "onClick",
+          type: "fn",
+        },
+      ],
+    });
   });
 
   test("shows action logs on link click", async (preview) => {
@@ -94,14 +100,15 @@ test.describe.parallel("solid/action logs", () => {
     );
     await preview.show("src/Link.tsx:Link");
     const link = await preview.iframe.waitForSelector("#link");
-    preview.events.clear();
     await link.click();
-    expect(preview.events.get()).toEqual([
-      {
-        kind: "action",
-        path: "https://www.google.com/",
-        type: "url",
-      },
-    ]);
+    expect(preview.getState()).toMatchObject({
+      actions: [
+        {
+          kind: "action",
+          path: "https://www.google.com/",
+          type: "url",
+        },
+      ],
+    });
   });
 });

framework-plugins/solid/tests/console.spec.ts

@@ -26,7 +26,6 @@ test.describe.parallel("solid/console", () => {
     );
     await preview.iframe.waitForSelector("#update-1");
     await preview.expectLoggedMessages.toMatch(["Render 1"], "log");
-    preview.events.clear();
     await preview.fileManager.update(
       "src/App.tsx",
       `function App() {

framework-plugins/svelte/tests/action-logs.spec.ts

@@ -19,14 +19,15 @@ test.describe.parallel("svelte/action logs", () => {
     );
     await preview.show("src/App.svelte:App");
     const link = await preview.iframe.waitForSelector("#link");
-    preview.events.clear();
     await link.click();
-    expect(preview.events.get()).toEqual([
-      {
-        kind: "action",
-        path: "https://www.google.com/",
-        type: "url",
-      },
-    ]);
+    expect(preview.getState()).toMatchObject({
+      actions: [
+        {
+          kind: "action",
+          path: "https://www.google.com/",
+          type: "url",
+        },
+      ],
+    });
   });
 });

framework-plugins/svelte/tests/console.spec.ts

@@ -26,7 +26,6 @@ test.describe.parallel("svelte/console", () => {
     );
     await preview.iframe.waitForSelector(".App-updated-1");
     await preview.expectLoggedMessages.toMatch(["Render 1"], "log");
-    preview.events.clear();
     await preview.fileManager.update(
       "src/App.svelte",
       `<div class="App-updated-2">

framework-plugins/svelte/tests/error-handling.spec.ts

@@ -108,10 +108,7 @@ test.describe.parallel("svelte/error handling", () => {
       "src/App.svelte",
       "src/App-renamed.svelte"
     );
-    await preview.expectErrors.toMatch([
-      "Failed to reload /src/App.svelte",
-      "Failed to reload /src/App.svelte",
-    ]);
+    await preview.expectErrors.toMatch(["Failed to reload /src/App.svelte"]);
     await preview.expectLoggedMessages.toMatch([]);
   });
 });