refactor: canvas rerender/update-settings hooks (#400)

src/canvas/App.tsx

@@ -8,6 +8,7 @@ import {
   useRenderWidgetsListener,
   useShowToastListener,
   useTheme,
+  useUpdateSettingsListener,
 } from "./hooks";
 
 const App = () => {
@@ -16,9 +17,10 @@ const App = () => {
     useShallow((state) => Object.keys(state.widgets)),
   );
 
-  useShowToastListener();
-  useRenderWidgetsListener();
   useRemoveWidgetsListener();
+  useRenderWidgetsListener();
+  useShowToastListener();
+  useUpdateSettingsListener();
 
   return (
     <RadixTheme

src/canvas/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useRemoveWidgetsListener";
-export * from "./useRenderListener";
+export * from "./useRenderWidgetsListener";
 export * from "./useShowToastListener";
 export * from "./useTheme";
+export * from "./useUpdateSettingsListener";
 export * from "./useWidgetsStore";

src/canvas/hooks/useRenderWidgetsListener.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useRef } from "react";
+import { listenToRenderWidgets } from "../../events";
+import { invokeBundleWidget, invokeSetRenderReady } from "../../commands";
+import {
+  Widget,
+  updateWidgetRender,
+  updateWidgetRenderError,
+  useWidgetsStore,
+} from "./useWidgetsStore";
+
+const BASE_URL = new URL(import.meta.url).origin;
+const RAW_APIS_URL = new URL("/generated/raw-apis.js", BASE_URL).href;
+
+export function useRenderWidgetsListener() {
+  const hasInited = useRef(false);
+
+  useEffect(() => {
+    const unlisten = listenToRenderWidgets(async (event) => {
+      const widgets = useWidgetsStore.getState().widgets;
+
+      const promises = event.payload.map(async ({ id, settings, code }) => {
+        let apisBlobUrl;
+        if (id in widgets) {
+          // APIs blob URL can be reused because the contents are dependent only
+          // on widget ID; the code blob URL will definitely change on re-render
+          // so we revoke it here
+          const widget = widgets[id];
+          apisBlobUrl = widget.apisBlobUrl;
+          if (widget.moduleBlobUrl !== undefined) {
+            URL.revokeObjectURL(widget.moduleBlobUrl);
+          }
+        } else {
+          const apisCode = window.__DESKULPT_CANVAS_INTERNALS__.apisWrapper
+            .replace("__DESKULPT_WIDGET_ID__", id)
+            .replace("__RAW_APIS_URL__", RAW_APIS_URL);
+          const apisBlob = new Blob([apisCode], {
+            type: "application/javascript",
+          });
+          apisBlobUrl = URL.createObjectURL(apisBlob);
+        }
+
+        if (code === undefined) {
+          // If code is not provided, we need to bundle the widget
+          try {
+            code = await invokeBundleWidget({
+              id,
+              baseUrl: BASE_URL,
+              apisBlobUrl,
+            });
+          } catch (error) {
+            updateWidgetRenderError(id, error, apisBlobUrl, settings);
+            return;
+          }
+        }
+
+        const moduleBlob = new Blob([code], { type: "application/javascript" });
+        const moduleBlobUrl = URL.createObjectURL(moduleBlob);
+        let module;
+        try {
+          module = await import(/* @vite-ignore */ moduleBlobUrl);
+        } catch (error) {
+          URL.revokeObjectURL(moduleBlobUrl);
+          updateWidgetRenderError(id, error, apisBlobUrl, settings);
+          return;
+        }
+
+        const widget = module.default as Widget;
+        if (widget === undefined || widget.Component === undefined) {
+          URL.revokeObjectURL(moduleBlobUrl);
+          updateWidgetRenderError(
+            id,
+            "The widget must provide a default export with a `Component` property.",
+            apisBlobUrl,
+            settings,
+          );
+          return;
+        }
+
+        updateWidgetRender(id, widget, moduleBlobUrl, apisBlobUrl, settings);
+      });
+
+      await Promise.all(promises);
+    });
+
+    if (!hasInited.current) {
+      invokeSetRenderReady()
+        .then(() => {
+          hasInited.current = true;
+        })
+        .catch(console.error);
+    }
+
+    return () => {
+      unlisten.then((f) => f()).catch(console.error);
+    };
+  }, []);
+}

src/canvas/hooks/useUpdateSettingsListener.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { listenToUpdateSettings } from "../../events";
+import { updateWidgetSettings } from "./useWidgetsStore";
+
+export function useUpdateSettingsListener() {
+  useEffect(() => {
+    const unlisten = listenToUpdateSettings((event) => {
+      const { id, settings } = event.payload;
+      updateWidgetSettings(id, settings);
+    });
+
+    return () => {
+      unlisten.then((f) => f()).catch(console.error);
+    };
+  }, []);
+}

src/events.ts

@@ -67,6 +67,17 @@ export async function emitUpdateSettingsToManager(
   await emitTo("manager", "update-settings", payload);
 }
 
+/**
+ * Emit the "update-settings" event to the canvas window.
+ *
+ * @param payload The payload of the event.
+ */
+export async function emitUpdateSettingsToCanvas(
+  payload: UpdateSettingsPayload,
+) {
+  await emitTo("canvas", "update-settings", payload);
+}
+
 /**
  * Listen to the "update-settings" event.
  *

src/manager/components/WidgetContent.tsx

@@ -90,8 +90,8 @@ const WidgetContent = ({
           actionIcon={<LuRepeat />}
           actionText="Re-render"
           action={() =>
-            emitRenderWidgetsToCanvas([{ id, settings, bundle: true }]).then(
-              () => toast.success(`Re-rendered widget "${id}".`),
+            emitRenderWidgetsToCanvas([{ id }]).then(() =>
+              toast.success("Re-rendered widget."),
             )
           }
         />

src/manager/components/WidgetContentSettingsList.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { WidgetSettings } from "../../types/backend";
 import { ManagerWidgetState } from "../../types/frontend";
-import { emitRenderWidgetsToCanvas } from "../../events";
+import { emitUpdateSettingsToCanvas } from "../../events";
 import { DataList, Flex } from "@radix-ui/themes";
 import NumberInput from "../components/NumberInput";
 import { FaTimes } from "react-icons/fa";
@@ -30,18 +30,13 @@ const WidgetContentSettingList = ({
   setManagerWidgetStates,
 }: WidgetContentSettingListProps) => {
   function updateSetting(partialSettings: Partial<WidgetSettings>) {
-    const newSettings = { ...settings, ...partialSettings };
     setManagerWidgetStates((prev) => ({
       ...prev,
-      [id]: { ...prev[id], settings: newSettings },
+      [id]: { ...prev[id], settings: { ...settings, ...partialSettings } },
     }));
-    emitRenderWidgetsToCanvas([
-      {
-        id,
-        settings: newSettings,
-        bundle: false,
-      },
-    ]).catch(console.error);
+    emitUpdateSettingsToCanvas({ id, settings: partialSettings }).catch(
+      console.error,
+    );
   }
 
   return (

src/manager/hooks/useManagerWidgetStates.ts

@@ -88,11 +88,7 @@ export default function useManagerWidgetStates(): UseManagerWidgetStatesOutput {
     );
     setManagerWidgetStates(newManagerWidgetStates); // Direct replacement
 
-    const payload = addedStates.map(([id, { settings }]) => ({
-      id,
-      settings,
-      bundle: true,
-    }));
+    const payload = addedStates.map(([id, { settings }]) => ({ id, settings }));
     if (initial) {
       await invokeEmitOnRenderReady({ payload });
     } else {

src/manager/tabs/WidgetsTab.tsx

@@ -36,11 +36,7 @@ const WidgetsTab = ({
 
   const rerenderAction = async () => {
     await emitRenderWidgetsToCanvas(
-      managerWidgetStatesArray.map(([id, { settings }]) => ({
-        id,
-        settings,
-        bundle: true,
-      })),
+      managerWidgetStatesArray.map(([id, { settings }]) => ({ id, settings })),
     );
     toast.success(`Re-rendered ${managerWidgetStatesArray.length} widgets.`);
   };

src/types/frontend.ts

@@ -24,8 +24,8 @@ export interface ManagerWidgetState {
  */
 export type RenderWidgetsPayload = {
   id: string;
-  bundle: boolean;
-  settings: WidgetSettings;
+  settings?: WidgetSettings;
+  code?: string;
 }[];
 
 /**