feat: init window.affine (#2682)

(cherry picked from commit 8f6db00402)

apps/electron/layers/preload/src/affine-apis.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
 // NOTE: we will generate preload types from this file
 import { ipcRenderer } from 'electron';
 

apps/electron/layers/preload/src/bootstrap.ts

@@ -0,0 +1,72 @@
+import { contextBridge, ipcRenderer } from 'electron';
+
+(async () => {
+  const affineApis = await import('./affine-apis');
+  contextBridge.exposeInMainWorld('apis', affineApis.apis);
+  contextBridge.exposeInMainWorld('events', affineApis.events);
+  contextBridge.exposeInMainWorld('appInfo', affineApis.appInfo);
+
+  // Credit to microsoft/vscode
+  function validateIPC(channel: string) {
+    if (!channel || !channel.startsWith('affine:')) {
+      throw new Error(`Unsupported event IPC channel '${channel}'`);
+    }
+
+    return true;
+  }
+
+  const globals = {
+    ipcRenderer: {
+      send(channel: string, ...args: any[]) {
+        if (validateIPC(channel)) {
+          ipcRenderer.send(channel, ...args);
+        }
+      },
+
+      invoke(channel: string, ...args: any[]) {
+        if (validateIPC(channel)) {
+          return ipcRenderer.invoke(channel, ...args);
+        }
+      },
+
+      on(
+        channel: string,
+        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+      ) {
+        if (validateIPC(channel)) {
+          ipcRenderer.on(channel, listener);
+
+          return this;
+        }
+      },
+
+      once(
+        channel: string,
+        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+      ) {
+        if (validateIPC(channel)) {
+          ipcRenderer.once(channel, listener);
+
+          return this;
+        }
+      },
+
+      removeListener(
+        channel: string,
+        listener: (event: Electron.IpcRendererEvent, ...args: any[]) => void
+      ) {
+        if (validateIPC(channel)) {
+          ipcRenderer.removeListener(channel, listener);
+
+          return this;
+        }
+      },
+    },
+  };
+
+  try {
+    contextBridge.exposeInMainWorld('affine', globals);
+  } catch (error) {
+    console.error(error);
+  }
+})();

apps/electron/layers/preload/src/index.ts

@@ -1,18 +1 @@
-/**
- * @module preload
- */
-
-import { contextBridge } from 'electron';
-
-import * as affineApis from './affine-apis';
-
-/**
- * The "Main World" is the JavaScript context that your main renderer code runs in.
- * By default, the page you load in your renderer executes code in this world.
- *
- * @see https://www.electronjs.org/docs/api/context-bridge
- */
-
-contextBridge.exposeInMainWorld('apis', affineApis.apis);
-contextBridge.exposeInMainWorld('events', affineApis.events);
-contextBridge.exposeInMainWorld('appInfo', affineApis.appInfo);
+import './bootstrap';

apps/web/src/bootstrap/index.ts

@@ -9,3 +9,26 @@ if (config.enablePlugin && !environment.isServer) {
 if (!environment.isServer) {
   import('@affine/bookmark-block');
 }
+
+if (!environment.isDesktop && !environment.isServer) {
+  // Polyfill Electron
+  const unimplemented = () => {
+    throw new Error('AFFiNE Plugin Web will be supported in the future');
+  };
+  const affine = {
+    ipcRenderer: {
+      invoke: unimplemented,
+      send: unimplemented,
+      on: unimplemented,
+      once: unimplemented,
+      removeListener: unimplemented,
+    },
+  };
+
+  Object.freeze(affine);
+
+  Object.defineProperty(window, 'affine', {
+    value: affine,
+    writable: false,
+  });
+}