refactor: remove detach() from framework plugin API (#1204)

fwouts · Nov 16, 2022 · c00ba24 · c00ba24
1 parent e3a7850
commit c00ba24
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 64 deletions.
diff --git a/app-foundations/src/state/PreviewState.ts b/app-foundations/src/state/PreviewState.ts
@@ -320,7 +320,7 @@ export class PreviewState {
       return;
     }
     const name = decodedComponentId.component.name;
-    this.iframeController.showLoading();
+    this.iframeController.resetIframe();
     runInAction(() => {
       this.component = {
         componentId,

diff --git a/frameworks/react/preview/index.tsx b/frameworks/react/preview/index.tsx
@@ -92,8 +92,3 @@ export const load: RendererLoader = async ({
     },
   };
 };
-
-export async function detach() {
-  const { render } = await import(/* @vite-ignore */ moduleName);
-  render(null, {});
-}
diff --git a/frameworks/solid/preview/index.tsx b/frameworks/solid/preview/index.tsx
@@ -68,10 +68,6 @@ export const load: RendererLoader = async ({
   };
 };
 
-export async function detach() {
-  detachFn();
-}
-
 const container = document.getElementById("root");
 let detachFn: () => void = () => {
   // This function will be replaced by the real one when the component is loaded.

diff --git a/frameworks/svelte/preview/index.tsx b/frameworks/svelte/preview/index.tsx
@@ -21,8 +21,12 @@ export const load: RendererLoader = async ({
       if (shouldAbortRender()) {
         return;
       }
-      detach();
-      (currentElement = Wrapper
+      if (currentElement) {
+        currentElement.$destroy();
+        currentElement = null;
+      }
+      root.innerHTML = "";
+      currentElement = Wrapper
         ? new Wrapper({
             target: root,
             props: {
@@ -35,23 +39,11 @@ export const load: RendererLoader = async ({
         : new Component({
             target: root,
             props,
-          })),
-        {
-          // ...defaultProps,
-          ...props,
-        };
+          });
     },
   };
 };
 
-export async function detach() {
-  if (currentElement) {
-    currentElement.$destroy();
-    currentElement = null;
-  }
-  root.innerHTML = "";
-}
-
 // Source: https://github.com/sveltejs/svelte/issues/2588#issuecomment-828578980
 const createSlots = (slots) => {
   const svelteSlots = {};

diff --git a/frameworks/vue2/preview/index.ts b/frameworks/vue2/preview/index.ts
@@ -143,7 +143,3 @@ async function render<P>(Renderer: any, props: P) {
   }
   root.appendChild(app.$el);
 }
-
-export async function detach() {
-  render(null, {});
-}
diff --git a/frameworks/vue3/preview/index.ts b/frameworks/vue3/preview/index.ts
@@ -138,7 +138,3 @@ export async function render<P extends Record<string, unknown>>(
   app = createApp(Renderer, props || {});
   app.mount("#root");
 }
-
-export async function detach() {
-  render(null, {});
-}
diff --git a/iframe/preview/__previewjs_internal__/index.ts b/iframe/preview/__previewjs_internal__/index.ts
@@ -3,7 +3,6 @@ import { overrideCopyCutPaste } from "./copy-cut-paste";
 import { setUpLinkInterception } from "./links";
 import { setUpLogInterception } from "./logs";
 import { sendMessageFromPreview } from "./messages";
-import { detach } from "./renderer/index";
 import { setState } from "./state";
 
 setUpLogInterception();
@@ -49,26 +48,12 @@ const root = document.getElementById("root");
 if (!root) {
   throw new Error(`Unable to find #root!`);
 }
-const rootLoadingHtml = root.innerHTML;
-let loading = false;
 window.addEventListener(
   "message",
   (event: MessageEvent<AppToPreviewMessage>) => {
     const data = event.data;
     switch (data.kind) {
-      case "show-loading":
-        loading = true;
-        detach()
-          .then(() => {
-            if (!loading || !root) {
-              return;
-            }
-            root.innerHTML = rootLoadingHtml;
-          })
-          .catch(console.error);
-        break;
       case "render":
-        loading = false;
         load(data).catch(console.error);
         break;
     }

diff --git a/iframe/preview/__previewjs_internal__/renderer/index.tsx b/iframe/preview/__previewjs_internal__/renderer/index.tsx
@@ -3,7 +3,3 @@ export async function load() {
   // a framework-specific implementation at runtime.
   console.error("Dummy loader was invoked!");
 }
-
-export async function detach() {
-  // Same here!
-}
diff --git a/iframe/src/index.ts b/iframe/src/index.ts
@@ -11,7 +11,6 @@ export function createController(options: {
 export interface PreviewIframeController {
   start(): void;
   stop(): void;
-  showLoading(): void;
   loadComponent(options: LoadComponentOptions): void;
   resetIframe(): void;
 }
@@ -45,12 +44,6 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     window.removeEventListener("message", this.onWindowMessage);
   }
 
-  showLoading() {
-    this.send({
-      kind: "show-loading",
-    });
-  }
-
   loadComponent(options: LoadComponentOptions) {
     this.send({
       kind: "render",

diff --git a/iframe/src/messages.ts b/iframe/src/messages.ts
@@ -52,11 +52,7 @@ export interface ViteBeforeUpdateMessage {
   payload: UpdatePayload;
 }
 
-export type AppToPreviewMessage = ShowLoadingMessage | RenderMessage;
-
-export interface ShowLoadingMessage {
-  kind: "show-loading";
-}
+export type AppToPreviewMessage = RenderMessage;
 
 export interface RenderMessage {
   kind: "render";