refactor: events/commands/types restructured

src/canvas/components/WidgetContainer.tsx

@@ -9,7 +9,7 @@ import {
   updateWidgetSettings,
   useWidgetsStore,
 } from "../hooks/useWidgetsStore";
-import { emitUpdateSettingsToManager } from "../../events";
+import { events } from "../../core";
 
 interface WidgetContainerProps {
   id: string;
@@ -25,7 +25,7 @@ const WidgetContainer = memo(({ id }: WidgetContainerProps) => {
     (_: DraggableEvent, data: DraggableData) => {
       const pos = { x: x + data.x, y: y + data.y };
       updateWidgetSettings(id, pos);
-      emitUpdateSettingsToManager({ id, settings: pos });
+      events.updateSettings.toManager({ id, settings: pos });
     },
     [id, x, y],
   );

src/canvas/hooks/useRemoveWidgetsListener.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { listenToRemoveWidgets } from "../../events";
+import { events } from "../../core";
 import { removeWidgets } from "./useWidgetsStore";
 
 export function useRemoveWidgetsListener() {
   useEffect(() => {
-    const unlisten = listenToRemoveWidgets((event) => {
+    const unlisten = events.removeWidgets.on((event) => {
       removeWidgets(event.payload.ids);
     });
 

src/canvas/hooks/useRenderWidgetsListener.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from "react";
-import { listenToRenderWidgets } from "../../events";
-import { invokeBundleWidget, invokeSetRenderReady } from "../../commands";
+import { commands, events } from "../../core";
 import {
   updateWidgetRender,
   updateWidgetRenderError,
@@ -15,7 +14,7 @@ export function useRenderWidgetsListener() {
   const hasInited = useRef(false);
 
   useEffect(() => {
-    const unlisten = listenToRenderWidgets(async (event) => {
+    const unlisten = events.renderWidgets.on(async (event) => {
       const widgets = useWidgetsStore.getState().widgets;
 
       const promises = event.payload.map(async ({ id, settings, code }) => {
@@ -42,7 +41,7 @@ export function useRenderWidgetsListener() {
         if (code === undefined) {
           // If code is not provided, we need to bundle the widget
           try {
-            code = await invokeBundleWidget({
+            code = await commands.bundleWidget({
               id,
               baseUrl: BASE_URL,
               apisBlobUrl,
@@ -93,7 +92,8 @@ export function useRenderWidgetsListener() {
 
     if (!hasInited.current) {
       // Set the canvas as ready to render only once
-      invokeSetRenderReady()
+      commands
+        .setRenderReady()
         .then(() => {
           hasInited.current = true;
         })

src/canvas/hooks/useShowToastListener.tsx

@@ -1,17 +1,16 @@
 import { useEffect } from "react";
-import { listenToShowToast } from "../../events";
+import { events } from "../../core";
 import { toast } from "sonner";
-import { ShowToastPayloadType } from "../../types/backend";
 
 export function useShowToastListener() {
   useEffect(() => {
-    const unlisten = listenToShowToast((event) => {
+    const unlisten = events.showToast.on((event) => {
       const { type, content } = event.payload;
       switch (type) {
-        case ShowToastPayloadType.SUCCESS:
+        case events.ShowToastPayloadType.SUCCESS:
           void toast.success(content);
           break;
-        case ShowToastPayloadType.ERROR:
+        case events.ShowToastPayloadType.ERROR:
           void toast.error(content);
           break;
       }

src/canvas/hooks/useTheme.ts

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { listenToSwitchTheme } from "../../events";
+import { events } from "../../core";
 
 export function useTheme() {
   const [theme, setTheme] = useState(
     window.__DESKULPT_CANVAS_INTERNALS__.initialSettings.app.theme,
   );
 
   useEffect(() => {
-    const unlisten = listenToSwitchTheme((event) => {
+    const unlisten = events.switchTheme.on((event) => {
       setTheme(event.payload.theme);
     });
 

src/canvas/hooks/useUpdateSettingsListener.ts

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { listenToUpdateSettings } from "../../events";
+import { events } from "../../core";
 import { updateWidgetSettings } from "./useWidgetsStore";
 
 export function useUpdateSettingsListener() {
   useEffect(() => {
-    const unlisten = listenToUpdateSettings((event) => {
+    const unlisten = events.updateSettings.on((event) => {
       const { id, settings } = event.payload;
       updateWidgetSettings(id, settings);
     });

src/canvas/hooks/useWidgetsStore.ts

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { WidgetSettings } from "../../types/backend";
+import { WidgetSettings } from "../../types";
 import { FC, createElement } from "react";
 import ErrorDisplay from "../components/ErrorDisplay";
 

src/canvas/main.tsx

@@ -1,7 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { DeepReadonly } from "../types/frontend";
-import { Settings } from "../types/backend";
+import { DeepReadonly, Settings } from "../types";
 import App from "./App";
 import "@radix-ui/themes/styles.css";
 

src/core/commands.ts

@@ -0,0 +1,29 @@
+import { invoke } from "@tauri-apps/api/core";
+import { Settings, Shortcuts, WidgetConfig } from "../types";
+import { RenderWidgetsPayload } from "./events";
+
+export const bundleWidget = (payload: {
+  id: string;
+  baseUrl: string;
+  apisBlobUrl: string;
+}) => invoke<string>("bundle_widget", payload);
+
+export const emitOnRenderReady = (payload: { payload: RenderWidgetsPayload }) =>
+  invoke<void>("emit_on_render_ready", payload);
+
+export const exitApp = (payload: { settings: Settings }) =>
+  invoke<void>("exit_app", payload);
+
+export const openInWidgetsDir = (payload: { components: string[] }) =>
+  invoke<void>("open_in_widgets_dir", payload);
+
+export const rescanWidgets = () =>
+  invoke<Record<string, WidgetConfig>>("rescan_widgets");
+
+export const setRenderReady = () => invoke<void>("set_render_ready");
+
+export const updateShortcut = (payload: {
+  key: keyof Shortcuts;
+  oldShortcut: string | null;
+  newShortcut: string | null;
+}) => invoke<void>("update_shortcut", payload);

src/core/events.ts

@@ -0,0 +1,93 @@
+import { EventCallback, emitTo, listen } from "@tauri-apps/api/event";
+import { Theme, WidgetSettings } from "../types";
+
+// -----------------------------------------------------------------------------
+// Backend => "exit-app" => Manager
+// -----------------------------------------------------------------------------
+
+export const exitApp = {
+  on: (handler: EventCallback<void>) => listen("exit-app", handler),
+};
+
+// -----------------------------------------------------------------------------
+// Manager => "remove-widgets" => Canvas
+// -----------------------------------------------------------------------------
+
+interface RemoveWidgetsPayload {
+  ids: string[];
+}
+
+export const removeWidgets = {
+  on: (handler: EventCallback<RemoveWidgetsPayload>) =>
+    listen("remove-widgets", handler),
+  toCanvas: (payload: RemoveWidgetsPayload) =>
+    emitTo("canvas", "remove-widgets", payload),
+};
+
+// -----------------------------------------------------------------------------
+// Manager => "render-widgets" => Canvas
+// -----------------------------------------------------------------------------
+
+export type RenderWidgetsPayload = {
+  id: string;
+  settings?: any;
+  code?: string;
+}[];
+
+export const renderWidgets = {
+  on: (handler: EventCallback<RenderWidgetsPayload>) =>
+    listen("render-widgets", handler),
+  toCanvas: (payload: RenderWidgetsPayload) =>
+    emitTo("canvas", "render-widgets", payload),
+};
+
+// -----------------------------------------------------------------------------
+// Backend => "show-toast" => Manager
+// -----------------------------------------------------------------------------
+
+export enum ShowToastPayloadType {
+  SUCCESS = "SUCCESS",
+  ERROR = "ERROR",
+}
+
+type Payload =
+  | { type: ShowToastPayloadType.SUCCESS; content: string }
+  | { type: ShowToastPayloadType.ERROR; content: string };
+
+export const showToast = {
+  on: (handler: EventCallback<Payload>) => listen("show-toast", handler),
+};
+
+// -----------------------------------------------------------------------------
+// Manager => "switch-theme" => Canvas
+// -----------------------------------------------------------------------------
+
+interface SwitchThemePayload {
+  theme: Theme;
+}
+
+export const switchTheme = {
+  on: (handler: EventCallback<SwitchThemePayload>) =>
+    listen("switch-theme", handler),
+  toCanvas: (payload: SwitchThemePayload) =>
+    emitTo("canvas", "switch-theme", payload),
+};
+
+// -----------------------------------------------------------------------------
+// Manager => "update-settings" => Canvas
+// Canvas => "update-settings" => Manager
+// -----------------------------------------------------------------------------
+
+interface UpdateSettingsPayload {
+  id: string;
+  settings: Partial<WidgetSettings>;
+}
+
+export const updateSettings = {
+  on: (handler: EventCallback<UpdateSettingsPayload>) =>
+    listen("update-settings", handler),
+  toCanvas: (payload: UpdateSettingsPayload) =>
+    emitTo("canvas", "update-settings", payload),
+  toManager: (payload: UpdateSettingsPayload) =>
+    emitTo("manager", "update-settings", payload),
+};

src/core/index.ts

@@ -0,0 +1,2 @@
+export * as commands from "./commands";
+export * as events from "./events";