fix: resolve ipcRenderer no returns (#478)

electron/main/index.ts

@@ -3,8 +3,8 @@ import { release } from 'node:os'
 import { join, dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-const __filename = fileURLToPath(import.meta.url)
+globalThis.__filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+globalThis.__dirname = dirname(__filename)
 
 // The built directory structure
 //
@@ -55,7 +55,7 @@ async function createWindow() {
 
       // Consider using contextBridge.exposeInMainWorld
       // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
-      contextIsolation: false,
+      // contextIsolation: false,
     },
   })
 

electron/preload/index.ts

@@ -1,3 +1,29 @@
+import { ipcRenderer, contextBridge } from 'electron'
+
+// --------- Expose some API to the Renderer process ---------
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  on(...args: Parameters<typeof ipcRenderer.on>) {
+    const [channel, listener] = args
+    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
+  },
+  off(...args: Parameters<typeof ipcRenderer.off>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.off(channel, ...omit)
+  },
+  send(...args: Parameters<typeof ipcRenderer.send>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.send(channel, ...omit)
+  },
+  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.invoke(channel, ...omit)
+  },
+
+  // You can expose other APTs you need here.
+  // ...
+})
+
+// --------- Preload scripts loading ---------
 function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
   return new Promise((resolve) => {
     if (condition.includes(document.readyState)) {

package.json

@@ -25,15 +25,14 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.1",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "electron": "^28.1.0",
+    "electron": "^29.1.1",
-    "electron-builder": "^24.9.1",
+    "electron-builder": "^24.13.3",
-    "tree-kill": "^1.2.2",
+    "typescript": "^5.4.2",
-    "typescript": "^5.3.3",
+    "vite": "^5.1.5",
-    "vite": "^5.0.10",
+    "vite-plugin-electron": "^0.28.4",
-    "vite-plugin-electron": "^0.28.0-beta.2",
     "vite-plugin-electron-renderer": "^0.14.5",
-    "vue": "^3.4.1",
+    "vue": "^3.4.21",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.6"
   }
 }

src/demos/ipc.ts

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

src/main.ts

@@ -3,9 +3,9 @@ import App from './App.vue'
 
 import './style.css'
 
-// `nodeIntegration` needs to be enabled in the Main process.
+import './demos/ipc'
+// If you want use Node.js, the`nodeIntegration` needs to be enabled in the Main process.
 // import './demos/node'
-// import './demos/ipc'
 
 createApp(App)
   .mount('#app')

src/vite-env.d.ts

@@ -5,3 +5,8 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+interface Window {
+  // expose in the `electron/preload/index.ts`
+  ipcRenderer: import('electron').IpcRenderer
+}

vite.config.ts

@@ -56,7 +56,9 @@ export default defineConfig(({ command }) => {
             },
           },
         },
-        // Use Node.js API in the Renderer process
+        // Ployfill the Electron and Node.js API for Renderer process.
+        // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
+        // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
         renderer: {},
       }),
     ],