refactor: remove previewableId from RenderOptions

fwouts · Aug 26, 2023 · 7b87ea2 · 7b87ea2
1 parent c7dbdb5
commit 7b87ea2
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 40 deletions.
diff --git a/app/client/src/main.ts b/app/client/src/main.ts
@@ -37,7 +37,6 @@ async function onUrlChanged() {
   if (!previewableId.includes(":")) {
     return;
   }
-  iframeController.resetIframe(previewableId);
   const analyzeResponse = await rpcApi.request(RPCs.Analyze, {
     previewableIds: [previewableId],
   });
@@ -46,8 +45,7 @@ async function onUrlChanged() {
     props,
     analyzeResponse.types
   );
-  iframeController.render({
-    previewableId,
+  iframeController.render(previewableId, {
     propsAssignmentSource: transpile(
       await generatePropsAssignmentSource(
         props,

diff --git a/chromeless/client/src/index.ts b/chromeless/client/src/index.ts
@@ -3,7 +3,7 @@ import { createController } from "@previewjs/iframe";
 
 declare global {
   interface Window {
-    loadIframePreview(options: RenderOptions): void;
+    loadIframePreview(previewableId: string, options: RenderOptions): void;
     onIframeEvent?(event: PreviewEvent): void;
   }
 }
@@ -18,7 +18,10 @@ const controller = createController({
 });
 
 window.onload = () => {
-  window.loadIframePreview = (options: RenderOptions) => {
-    controller.render(options);
+  window.loadIframePreview = (
+    previewableId: string,
+    options: RenderOptions
+  ) => {
+    controller.render(previewableId, options);
   };
 };
diff --git a/chromeless/src/preview.ts b/chromeless/src/preview.ts
@@ -161,7 +161,7 @@ export async function startPreview({
       await waitUntilNetworkIdle(page);
       renderSucceeded = false;
       await page.evaluate(
-        async (options) => {
+        async ([previewableId, options]) => {
           // It's possible that window.loadIframePreview isn't ready yet.
           let waitStart = Date.now();
           const timeoutSeconds = 10;
@@ -176,13 +176,15 @@ export async function startPreview({
               `window.loadIframePreview() isn't available after waiting ${timeoutSeconds} seconds`
             );
           }
-          window.loadIframePreview(options);
+          window.loadIframePreview(previewableId, options);
         },
-        {
+        [
           previewableId,
-          autogenCallbackPropsSource,
-          propsAssignmentSource: transpile(propsAssignmentSource!),
-        }
+          {
+            autogenCallbackPropsSource,
+            propsAssignmentSource: transpile(propsAssignmentSource!),
+          },
+        ] as const
       );
       await donePromise;
       await waitUntilNetworkIdle(page);

diff --git a/iframe/preview/__previewjs_internal__/state.ts b/iframe/preview/__previewjs_internal__/state.ts
@@ -1,14 +1,11 @@
-let state: PreviewState | null = null;
+import type { RenderOptions } from "../../src";
+
+let state: RenderOptions | null = null;
 
 export function getState() {
   return state;
 }
 
-export function setState(newState: PreviewState) {
+export function setState(newState: RenderOptions) {
   state = newState;
 }
-
-export interface PreviewState {
-  autogenCallbackPropsSource: string;
-  propsAssignmentSource: string;
-}
diff --git a/iframe/src/index.ts b/iframe/src/index.ts
@@ -15,7 +15,6 @@ declare global {
 }
 
 export interface RenderOptions {
-  previewableId: string;
   autogenCallbackPropsSource: string;
   propsAssignmentSource: string;
 }
@@ -30,14 +29,14 @@ export function createController(options: {
 }
 
 export interface PreviewIframeController {
-  render(options: RenderOptions): void;
-  resetIframe(id: string): void;
+  render(previewableId: string, options: RenderOptions): void;
 }
 
 class PreviewIframeControllerImpl implements PreviewIframeController {
-  private idBootstrapped: string | null = null;
-  private pendingPreviewableIdBootstrap: string | null = null;
-  private lastRenderOptions: RenderOptions | null = null;
+  private lastRender: {
+    previewableId: string;
+    options: RenderOptions;
+  } | null = null;
   private expectRenderTimeout?: any;
 
   constructor(
@@ -47,13 +46,11 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     }
   ) {}
 
-  async render(options: RenderOptions) {
-    this.lastRenderOptions = options;
-    if (
-      this.idBootstrapped !== options.previewableId &&
-      this.pendingPreviewableIdBootstrap !== options.previewableId
-    ) {
-      this.resetIframe(options.previewableId);
+  async render(previewableId: string, options: RenderOptions) {
+    const previousRender = this.lastRender;
+    this.lastRender = { previewableId, options };
+    if (previousRender?.previewableId !== previewableId) {
+      this.resetIframe(previewableId);
       return;
     }
     const iframeWindow = this.options.getIframe()?.contentWindow;
@@ -67,18 +64,16 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
       console.warn(
         "Expected render did not occur after 5 seconds. Reloading iframe..."
       );
-      this.resetIframe(options.previewableId);
+      this.resetIframe(previewableId);
     }, 5000);
     await renderPromise;
   }
 
   resetIframe(id: string) {
     const iframe = this.options.getIframe();
-    this.idBootstrapped = null;
     if (!iframe) {
       return;
     }
-    this.pendingPreviewableIdBootstrap = id;
     iframe.src = `/preview/${id}/?t=${Date.now()}`;
   }
 
@@ -137,11 +132,11 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
   }
 
   private onBootstrapped() {
-    this.idBootstrapped = this.pendingPreviewableIdBootstrap;
-    this.pendingPreviewableIdBootstrap = null;
-    if (this.lastRenderOptions) {
-      // eslint-disable-next-line no-console
-      this.render(this.lastRenderOptions).catch(console.error);
+    if (this.lastRender) {
+      this.render(this.lastRender.previewableId, this.lastRender.options).catch(
+        // eslint-disable-next-line no-console
+        console.error
+      );
     }
     this.options.listener({
       kind: "bootstrapped",