feat: better ipcRenderer api expose

electron/preload/index.ts

@@ -1,14 +1,26 @@
 import { ipcRenderer, contextBridge } from 'electron'
 
 // --------- Expose some API to the Renderer process ---------
-contextBridge.exposeInMainWorld('app', {
-  onEvent(cb) {
-    const channel = 'main-process-message'
-    const channel2 = 'other-ipc-channel'
-
-    ipcRenderer.on(channel, (_e, ...args) => cb(channel, ...args))
-    ipcRenderer.on(channel2, (_e, ...args) => cb(channel2, ...args))
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  on(...args: Parameters<typeof ipcRenderer.on>) {
+    const [channel, listener] = args
+    ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
+  },
+  off(...args: Parameters<typeof ipcRenderer.off>) {
+    const [channel, ...omit] = args
+    ipcRenderer.off(channel, ...omit)
+  },
+  send(...args: Parameters<typeof ipcRenderer.send>) {
+    const [channel, ...omit] = args
+    ipcRenderer.send(channel, ...omit)
   },
+  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
+    const [channel, ...omit] = args
+    ipcRenderer.invoke(channel, ...omit)
+  },
+
+  // You can expose other APTs you need here.
+  // ...
 })
 
 // --------- Preload scripts loading ---------

src/demos/ipc.ts

@@ -1,4 +1,4 @@
 
-window.app.onEvent((channel, ...args) => {
-  console.log(channel, ...args)
+window.ipcRenderer.on('main-process-message', (_event, ...args) => {
+  console.log('[Receive Main-process message]:', ...args)
 })

src/vite-env.d.ts

@@ -7,8 +7,6 @@ declare module '*.vue' {
 }
 
 interface Window {
-  app: {
-    // Expose in the `electron/preload/index.ts`
-    onEvent: (cb: (channel: string, ...args: any[]) => void) => void
-  }
+  // expose in the `electron/preload/index.ts`
+  ipcRenderer: import('electron').IpcRenderer
 }