refactor(electron): create electron api package (#5334)

packages/frontend/electron/src/helper/dialog/dialog.ts

@@ -2,13 +2,6 @@ import path from 'node:path';
 
 import { ValidationResult } from '@affine/native';
 import { WorkspaceVersion } from '@toeverything/infra/blocksuite';
-import type {
-  FakeDialogResult,
-  LoadDBFileResult,
-  MoveDBFileResult,
-  SaveDBFileResult,
-  SelectDBFileLocationResult,
-} from '@toeverything/infra/type';
 import fs from 'fs-extra';
 import { nanoid } from 'nanoid';
 
@@ -28,6 +21,45 @@ import {
   getWorkspacesBasePath,
 } from '../workspace/meta';
 
+export type ErrorMessage =
+  | 'DB_FILE_ALREADY_LOADED'
+  | 'DB_FILE_PATH_INVALID'
+  | 'DB_FILE_INVALID'
+  | 'DB_FILE_MIGRATION_FAILED'
+  | 'FILE_ALREADY_EXISTS'
+  | 'UNKNOWN_ERROR';
+
+export interface LoadDBFileResult {
+  workspaceId?: string;
+  error?: ErrorMessage;
+  canceled?: boolean;
+}
+
+export interface SaveDBFileResult {
+  filePath?: string;
+  canceled?: boolean;
+  error?: ErrorMessage;
+}
+
+export interface SelectDBFileLocationResult {
+  filePath?: string;
+  error?: ErrorMessage;
+  canceled?: boolean;
+}
+
+export interface MoveDBFileResult {
+  filePath?: string;
+  error?: ErrorMessage;
+  canceled?: boolean;
+}
+
+// provide a backdoor to set dialog path for testing in playwright
+export interface FakeDialogResult {
+  canceled?: boolean;
+  filePath?: string;
+  filePaths?: string[];
+}
+
 // NOTE:
 // we are using native dialogs because HTML dialogs do not give full file paths
 

packages/frontend/electron/src/helper/exposed.ts

@@ -1,25 +1,13 @@
-import type {
-  DBHandlers,
-  DialogHandlers,
-  WorkspaceHandlers,
-} from '@toeverything/infra/type';
-
 import { dbEvents, dbHandlers } from './db';
 import { dialogHandlers } from './dialog';
 import { provideExposed } from './provide';
 import { workspaceEvents, workspaceHandlers } from './workspace';
 
-type AllHandlers = {
-  db: DBHandlers;
-  workspace: WorkspaceHandlers;
-  dialog: DialogHandlers;
-};
-
 export const handlers = {
   db: dbHandlers,
   workspace: workspaceHandlers,
   dialog: dialogHandlers,
-} satisfies AllHandlers;
+};
 
 export const events = {
   db: dbEvents,

packages/frontend/electron/src/helper/index.ts

@@ -1,6 +1,6 @@
-import type { RendererToHelper } from '@toeverything/infra/preload/electron';
 import { AsyncCall } from 'async-call-rpc';
 
+import type { RendererToHelper } from '../shared/type';
 import { events, handlers } from './exposed';
 import { logger } from './logger';
 

packages/frontend/electron/src/helper/main-rpc.ts

@@ -1,10 +1,7 @@
 import { assertExists } from '@blocksuite/global/utils';
-import type {
-  HelperToMain,
-  MainToHelper,
-} from '@toeverything/infra/preload/electron';
 import { AsyncCall } from 'async-call-rpc';
 
+import type { HelperToMain, MainToHelper } from '../shared/type';
 import { exposed } from './provide';
 
 const helperToMainServer: HelperToMain = {

packages/frontend/electron/src/helper/provide.ts

@@ -1,4 +1,4 @@
-import type { ExposedMeta } from '@toeverything/infra/preload/electron';
+import type { ExposedMeta } from '../shared/type';
 
 /**
  * A naive DI implementation to get rid of circular dependency.

packages/frontend/electron/src/main/handlers.ts

@@ -1,12 +1,3 @@
-import type {
-  ClipboardHandlerManager,
-  ConfigStorageHandlerManager,
-  DebugHandlerManager,
-  ExportHandlerManager,
-  UIHandlerManager,
-  UnwrapManagerHandlerToServerSide,
-  UpdaterHandlerManager,
-} from '@toeverything/infra/index';
 import { ipcMain } from 'electron';
 
 import { clipboardHandlers } from './clipboard';
@@ -25,33 +16,6 @@ export const debugHandlers = {
   },
 };
 
-type AllHandlers = {
-  debug: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    DebugHandlerManager
-  >;
-  clipboard: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    ClipboardHandlerManager
-  >;
-  export: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    ExportHandlerManager
-  >;
-  ui: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    UIHandlerManager
-  >;
-  updater: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    UpdaterHandlerManager
-  >;
-  configStorage: UnwrapManagerHandlerToServerSide<
-    Electron.IpcMainInvokeEvent,
-    ConfigStorageHandlerManager
-  >;
-};
-
 // Note: all of these handlers will be the single-source-of-truth for the apis exposed to the renderer process
 export const allHandlers = {
   debug: debugHandlers,
@@ -60,7 +24,7 @@ export const allHandlers = {
   export: exportHandlers,
   updater: updaterHandlers,
   configStorage: configStorageHandlers,
-} satisfies AllHandlers;
+};
 
 export const registerHandlers = () => {
   // TODO: listen to namespace instead of individual event types

packages/frontend/electron/src/main/helper-process.ts

@@ -1,9 +1,5 @@
 import path from 'node:path';
 
-import type {
-  HelperToMain,
-  MainToHelper,
-} from '@toeverything/infra/preload/electron';
 import { type _AsyncVersionOf, AsyncCall } from 'async-call-rpc';
 import {
   app,
@@ -15,6 +11,7 @@ import {
   type WebContents,
 } from 'electron';
 
+import type { HelperToMain, MainToHelper } from '../shared/type';
 import { MessageEventChannel } from '../shared/utils';
 import { logger } from './logger';
 

packages/frontend/electron/src/preload/bootstrap.ts

@@ -1,57 +1,15 @@
-import { contextBridge, ipcRenderer } from 'electron';
+import { contextBridge } from 'electron';
 
-(async () => {
-  const { appInfo, getElectronAPIs } = await import(
-    '@toeverything/infra/preload/electron'
-  );
-  const { apis, events } = getElectronAPIs();
+import { affine, appInfo, getElectronAPIs } from './electron-api';
 
-  contextBridge.exposeInMainWorld('appInfo', appInfo);
-  contextBridge.exposeInMainWorld('apis', apis);
-  contextBridge.exposeInMainWorld('events', events);
+const { apis, events } = getElectronAPIs();
 
-  // Credit to microsoft/vscode
-  const globals = {
-    ipcRenderer: {
-      send(channel: string, ...args: any[]) {
-        ipcRenderer.send(channel, ...args);
-      },
+contextBridge.exposeInMainWorld('appInfo', appInfo);
+contextBridge.exposeInMainWorld('apis', apis);
+contextBridge.exposeInMainWorld('events', events);
 
-      invoke(channel: string, ...args: any[]) {
-        return ipcRenderer.invoke(channel, ...args);
-      },
-
-      on(
-        channel: string,
-        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
-      ) {
-        ipcRenderer.on(channel, listener);
-        return this;
-      },
-
-      once(
-        channel: string,
-        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
-      ) {
-        ipcRenderer.once(channel, listener);
-        return this;
-      },
-
-      removeListener(
-        channel: string,
-        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
-      ) {
-        ipcRenderer.removeListener(channel, listener);
-        return this;
-      },
-    },
-  };
-
-  try {
-    contextBridge.exposeInMainWorld('affine', globals);
-  } catch (error) {
-    console.error('Failed to expose affine APIs to window object!', error);
-  }
-})().catch(err => {
-  console.error('Failed to bootstrap preload script!', err);
-});
+try {
+  contextBridge.exposeInMainWorld('affine', affine);
+} catch (error) {
+  console.error('Failed to expose affine APIs to window object!', error);
+}

packages/frontend/electron/src/preload/electron-api.ts

@@ -0,0 +1,246 @@
+// Please add modules to `external` in `rollupOptions` to avoid wrong bundling.
+import { AsyncCall, type EventBasedChannel } from 'async-call-rpc';
+import { ipcRenderer } from 'electron';
+import { Subject } from 'rxjs';
+import { z } from 'zod';
+
+import type {
+  ExposedMeta,
+  HelperToRenderer,
+  RendererToHelper,
+} from '../shared/type';
+
+export const affine = {
+  ipcRenderer: {
+    send(channel: string, ...args: any[]) {
+      ipcRenderer.send(channel, ...args);
+    },
+
+    invoke(channel: string, ...args: any[]) {
+      return ipcRenderer.invoke(channel, ...args);
+    },
+
+    on(
+      channel: string,
+      listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+    ) {
+      ipcRenderer.on(channel, listener);
+      return this;
+    },
+
+    once(
+      channel: string,
+      listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+    ) {
+      ipcRenderer.once(channel, listener);
+      return this;
+    },
+
+    removeListener(
+      channel: string,
+      listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+    ) {
+      ipcRenderer.removeListener(channel, listener);
+      return this;
+    },
+  },
+};
+
+export function getElectronAPIs() {
+  const mainAPIs = getMainAPIs();
+  const helperAPIs = getHelperAPIs();
+
+  return {
+    apis: {
+      ...mainAPIs.apis,
+      ...helperAPIs.apis,
+    },
+    events: {
+      ...mainAPIs.events,
+      ...helperAPIs.events,
+    },
+  };
+}
+
+// todo: remove duplicated codes
+const ReleaseTypeSchema = z.enum(['stable', 'beta', 'canary', 'internal']);
+const envBuildType = (process.env.BUILD_TYPE || 'canary').trim().toLowerCase();
+const buildType = ReleaseTypeSchema.parse(envBuildType);
+const isDev = process.env.NODE_ENV === 'development';
+let schema = buildType === 'stable' ? 'affine' : `affine-${envBuildType}`;
+schema = isDev ? 'affine-dev' : schema;
+
+export const appInfo = {
+  electron: true,
+  windowName: process.argv
+    .find(arg => arg.startsWith('--window-name='))
+    ?.split('=')[1],
+  schema,
+};
+
+function getMainAPIs() {
+  const meta: ExposedMeta = (() => {
+    const val = process.argv
+      .find(arg => arg.startsWith('--main-exposed-meta='))
+      ?.split('=')[1];
+
+    return val ? JSON.parse(val) : null;
+  })();
+
+  // main handlers that can be invoked from the renderer process
+  const apis: any = (() => {
+    const { handlers: handlersMeta } = meta;
+
+    const all = handlersMeta.map(([namespace, functionNames]) => {
+      const namespaceApis = functionNames.map(name => {
+        const channel = `${namespace}:${name}`;
+        return [
+          name,
+          (...args: any[]) => {
+            return ipcRenderer.invoke(channel, ...args);
+          },
+        ];
+      });
+      return [namespace, Object.fromEntries(namespaceApis)];
+    });
+
+    return Object.fromEntries(all);
+  })();
+
+  // main events that can be listened to from the renderer process
+  const events: any = (() => {
+    const { events: eventsMeta } = meta;
+
+    // NOTE: ui may try to listen to a lot of the same events, so we increase the limit...
+    ipcRenderer.setMaxListeners(100);
+
+    const all = eventsMeta.map(([namespace, eventNames]) => {
+      const namespaceEvents = eventNames.map(name => {
+        const channel = `${namespace}:${name}`;
+        return [
+          name,
+          (callback: (...args: any[]) => void) => {
+            const fn: (
+              event: Electron.IpcRendererEvent,
+              ...args: any[]
+            ) => void = (_, ...args) => {
+              callback(...args);
+            };
+            ipcRenderer.on(channel, fn);
+            return () => {
+              ipcRenderer.off(channel, fn);
+            };
+          },
+        ];
+      });
+      return [namespace, Object.fromEntries(namespaceEvents)];
+    });
+    return Object.fromEntries(all);
+  })();
+
+  return { apis, events };
+}
+
+const helperPort$ = new Promise<MessagePort>(resolve =>
+  ipcRenderer.on('helper-connection', e => {
+    console.info('[preload] helper-connection', e);
+    resolve(e.ports[0]);
+  })
+);
+
+const createMessagePortChannel = (port: MessagePort): EventBasedChannel => {
+  return {
+    on(listener) {
+      port.onmessage = e => {
+        listener(e.data);
+      };
+      port.start();
+      return () => {
+        port.onmessage = null;
+        port.close();
+      };
+    },
+    send(data) {
+      port.postMessage(data);
+    },
+  };
+};
+
+function getHelperAPIs() {
+  const events$ = new Subject<{ channel: string; args: any[] }>();
+  const meta: ExposedMeta | null = (() => {
+    const val = process.argv
+      .find(arg => arg.startsWith('--helper-exposed-meta='))
+      ?.split('=')[1];
+
+    return val ? JSON.parse(val) : null;
+  })();
+
+  const rendererToHelperServer: RendererToHelper = {
+    postEvent: (channel, ...args) => {
+      events$.next({ channel, args });
+    },
+  };
+
+  const rpc = AsyncCall<HelperToRenderer>(rendererToHelperServer, {
+    channel: helperPort$.then(helperPort =>
+      createMessagePortChannel(helperPort)
+    ),
+    log: false,
+  });
+
+  const toHelperHandler = (namespace: string, name: string) => {
+    return rpc[`${namespace}:${name}`];
+  };
+
+  const toHelperEventSubscriber = (namespace: string, name: string) => {
+    return (callback: (...args: any[]) => void) => {
+      const subscription = events$.subscribe(({ channel, args }) => {
+        if (channel === `${namespace}:${name}`) {
+          callback(...args);
+        }
+      });
+      return () => {
+        subscription.unsubscribe();
+      };
+    };
+  };
+
+  const setup = (meta: ExposedMeta) => {
+    const { handlers, events } = meta;
+
+    const helperHandlers = Object.fromEntries(
+      handlers.map(([namespace, functionNames]) => {
+        return [
+          namespace,
+          Object.fromEntries(
+            functionNames.map(name => {
+              return [name, toHelperHandler(namespace, name)];
+            })
+          ),
+        ];
+      })
+    );
+
+    const helperEvents = Object.fromEntries(
+      events.map(([namespace, eventNames]) => {
+        return [
+          namespace,
+          Object.fromEntries(
+            eventNames.map(name => {
+              return [name, toHelperEventSubscriber(namespace, name)];
+            })
+          ),
+        ];
+      })
+    );
+    return [helperHandlers, helperEvents];
+  };
+
+  if (meta) {
+    const [apis, events] = setup(meta);
+    return { apis, events };
+  } else {
+    return { apis: {}, events: {} };
+  }
+}

packages/frontend/electron/src/shared/type.ts

@@ -0,0 +1,29 @@
+import type { app, dialog, shell } from 'electron';
+
+export interface ExposedMeta {
+  handlers: [string, string[]][];
+  events: [string, string[]][];
+}
+
+// render <-> helper
+export interface RendererToHelper {
+  postEvent: (channel: string, ...args: any[]) => void;
+}
+
+export interface HelperToRenderer {
+  [key: string]: (...args: any[]) => Promise<any>;
+}
+
+// helper <-> main
+export interface HelperToMain {
+  getMeta: () => ExposedMeta;
+}
+
+export type MainToHelper = Pick<
+  typeof dialog & typeof shell & typeof app,
+  | 'showOpenDialog'
+  | 'showSaveDialog'
+  | 'openExternal'
+  | 'showItemInFolder'
+  | 'getPath'
+>;