refactor: minor refactoring to canvas hooks (except render) (#399)

* refactor: minor refactoring to canvas hooks (except render)

* partial revert

* memoize widget container otherwise switch theme causes all components to rerender

* fix lint and some more refactoring of hooks

* minor

src/canvas/App.tsx

@@ -1,21 +1,23 @@
 import WidgetContainer from "./components/WidgetContainer";
-import useRenderListener from "./hooks/useRenderListener";
-import useRemoveWidgetsListener from "./hooks/useRemoveWidgetsListener";
-import useShowToastListener from "./hooks/useShowToastListener";
 import { Toaster } from "sonner";
 import { Theme as RadixTheme } from "@radix-ui/themes";
-import useThemeListener from "./hooks/useThemeListener";
 import { useWidgetsStore } from "./hooks/useWidgetsStore";
 import { useShallow } from "zustand/shallow";
+import {
+  useRemoveWidgetsListener,
+  useRenderWidgetsListener,
+  useShowToastListener,
+  useTheme,
+} from "./hooks";
 
 const App = () => {
-  const theme = useThemeListener();
+  const theme = useTheme();
   const ids = useWidgetsStore(
     useShallow((state) => Object.keys(state.widgets)),
   );
 
   useShowToastListener();
-  useRenderListener();
+  useRenderWidgetsListener();
   useRemoveWidgetsListener();
 
   return (

src/canvas/components/WidgetContainer.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useCallback, useRef } from "react";
+import { RefObject, memo, useCallback, useRef } from "react";
 import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorDisplay from "../components/ErrorDisplay";
@@ -15,7 +15,7 @@ interface WidgetContainerProps {
   id: string;
 }
 
-const WidgetContainer = ({ id }: WidgetContainerProps) => {
+const WidgetContainer = memo(({ id }: WidgetContainerProps) => {
   const { Component, width, height, x, y, opacity } = useWidgetsStore(
     (state) => state.widgets[id],
   );
@@ -83,6 +83,6 @@ const WidgetContainer = ({ id }: WidgetContainerProps) => {
       </Box>
     </Draggable>
   );
-};
+});
 
 export default WidgetContainer;

src/canvas/hooks/index.ts

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

src/canvas/hooks/useRemoveWidgetsListener.tsx

@@ -1,32 +1,11 @@
 import { useEffect } from "react";
 import { listenToRemoveWidgets } from "../../events";
-import { removeWidgets, useWidgetsStore } from "./useWidgetsStore";
+import { removeWidgets } from "./useWidgetsStore";
 
-/**
- * Listen and react to the "remove-widgets" event.
- */
-export default function useRemoveWidgetsListener() {
+export function useRemoveWidgetsListener() {
   useEffect(() => {
     const unlisten = listenToRemoveWidgets((event) => {
-      const { removedIds } = event.payload;
-      const widgets = useWidgetsStore.getState().widgets;
-
-      removedIds.forEach((id) => {
-        const state = widgets[id];
-        if (state === null) {
-          return; // This should not happen but let us be safe
-        }
-
-        // Revoke the blob URLs because they will not be automatically cleaned up, and
-        // being in the removed IDs means that they will be removed from the canvas
-        // states and the next time they show up, they will be assigned new blob URLs
-        URL.revokeObjectURL(state.apisBlobUrl);
-        if (state.moduleBlobUrl) {
-          URL.revokeObjectURL(state.moduleBlobUrl);
-        }
-      });
-
-      removeWidgets(removedIds);
+      removeWidgets(event.payload.ids);
     });
 
     return () => {

src/canvas/hooks/useRenderListener.tsx

@@ -16,7 +16,7 @@ const baseUrl = new URL(import.meta.url).origin;
 /**
  * Listen and react to the "render-widgets" event.
  */
-export default function useRenderWidgetsListener() {
+export function useRenderWidgetsListener() {
   const hasInited = useRef(false);
 
   const bundleWidget = useCallback(

src/canvas/hooks/useShowToastListener.tsx

@@ -2,10 +2,7 @@ import { useEffect } from "react";
 import { listenToShowToast } from "../../events";
 import { toast } from "sonner";
 
-/**
- * Listen and react to the "show-toast" event.
- */
-export default function useShowToastListener() {
+export function useShowToastListener() {
   useEffect(() => {
     const unlisten = listenToShowToast((event) => {
       if ("success" in event.payload) {

src/canvas/hooks/useThemeListener.ts → src/canvas/hooks/useTheme.ts

@@ -1,22 +1,14 @@
 import { useEffect, useState } from "react";
 import { listenToSwitchTheme } from "../../events";
 
-/**
- * Handle the theme of the canvas.
- *
- * This hook works by listening to the "switch-theme" event and updating the
- * theme state accordingly.
- *
- * @returns The current theme.
- */
-export default function useAppearanceListener() {
+export function useTheme() {
   const [theme, setTheme] = useState(
     window.__DESKULPT_CANVAS_INTERNALS__.initialSettings.app.theme,
   );
 
   useEffect(() => {
     const unlisten = listenToSwitchTheme((event) => {
-      setTheme(event.payload);
+      setTheme(event.payload.theme);
     });
 
     return () => {

src/canvas/hooks/useWidgetsStore.ts

@@ -132,6 +132,19 @@ export function updateWidgetSettings(
  * Remove a batch of widgets from the store.
  */
 export function removeWidgets(ids: string[]) {
+  const widgets = useWidgetsStore.getState().widgets;
+
+  ids.forEach((id) => {
+    const widget = widgets[id];
+    if (widget === undefined) {
+      return; // This should not happen but let us be safe
+    }
+    URL.revokeObjectURL(widget.apisBlobUrl);
+    if (widget.moduleBlobUrl !== undefined) {
+      URL.revokeObjectURL(widget.moduleBlobUrl);
+    }
+  });
+
   useWidgetsStore.setState((state) => ({
     widgets: Object.fromEntries(
       Object.entries(state.widgets).filter(([id]) => !ids.includes(id)),

src/events.ts

@@ -9,9 +9,10 @@ import { EventCallback, emitTo, listen } from "@tauri-apps/api/event";
 import {
   RemoveWidgetsPayload,
   RenderWidgetsPayload,
+  SwitchThemePayload,
   UpdateSettingsPayload,
 } from "./types/frontend";
-import { ShowToastPayload, Theme } from "./types/backend";
+import { ShowToastPayload } from "./types/backend";
 
 /**
  * Emit the "render-widgets" event to the canvas window.
@@ -83,7 +84,7 @@ export function listenToUpdateSettings(
  *
  * @param payload The payload of the event.
  */
-export async function emitSwitchThemeToCanvas(payload: Theme) {
+export async function emitSwitchThemeToCanvas(payload: SwitchThemePayload) {
   await emitTo("canvas", "switch-theme", payload);
 }
 
@@ -93,7 +94,9 @@ export async function emitSwitchThemeToCanvas(payload: Theme) {
  * @param handler The callback function to handle the event.
  * @returns A promise that resolves to a function to unlisten to the event.
  */
-export function listenToSwitchTheme(handler: EventCallback<Theme>) {
+export function listenToSwitchTheme(
+  handler: EventCallback<SwitchThemePayload>,
+) {
   return listen("switch-theme", handler);
 }
 

src/manager/components/ThemeToggler.tsx

@@ -22,7 +22,7 @@ const AppearanceToggler = ({ theme, setTheme }: AppearanceTogglerProps) => {
   const toggleTheme = () => {
     const newTheme = theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT;
     setTheme(newTheme);
-    emitSwitchThemeToCanvas(newTheme).catch(console.error);
+    emitSwitchThemeToCanvas({ theme: newTheme }).catch(console.error);
   };
 
   return (

src/manager/hooks/useManagerWidgetStates.ts

@@ -55,12 +55,12 @@ export default function useManagerWidgetStates(): UseManagerWidgetStatesOutput {
 
     // If a widget exists in the previous states but does not exist in the newdetected
     // configurations, we consider it as removed from the collection
-    const removedIds = Object.keys(managerWidgetStates).filter(
+    const ids = Object.keys(managerWidgetStates).filter(
       (id) => !(id in detectedConfigs),
     );
-    if (removedIds.length > 0) {
+    if (ids.length > 0) {
       // Notify the cacnvas to clean up resources allocated for removed widgets
-      await emitRemoveWidgetsToCanvas({ removedIds });
+      await emitRemoveWidgetsToCanvas({ ids });
     }
 
     const newManagerWidgetStates = Object.fromEntries(

src/types/frontend.ts

@@ -3,7 +3,7 @@
  * without corresponding backend implementations.
  */
 
-import { WidgetConfig, WidgetSettings } from "./backend";
+import { Theme, WidgetConfig, WidgetSettings } from "./backend";
 
 export type DeepReadonly<T> = {
   readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
@@ -33,7 +33,7 @@ export type RenderWidgetsPayload = {
  */
 export interface RemoveWidgetsPayload {
   /** The widget IDs to remove. */
-  removedIds: string[];
+  ids: string[];
 }
 
 /**
@@ -45,3 +45,7 @@ export interface UpdateSettingsPayload {
   /** The widget-specific settings to update. */
   settings: Partial<WidgetSettings>;
 }
+
+export interface SwitchThemePayload {
+  theme: Theme;
+}