electron/main/index.ts

@@ -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,28 +1,3 @@
-import { ipcRenderer, contextBridge } from 'electron'
-
-// --------- Expose some API to the Renderer process ---------
-contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer))
-
-// `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it.
-function withPrototype(obj: Record<string, any>) {
-  const protos = Object.getPrototypeOf(obj)
-
-  for (const [key, value] of Object.entries(protos)) {
-    if (Object.prototype.hasOwnProperty.call(obj, key)) continue
-
-    if (typeof value === 'function') {
-      // Some native APIs, like `NodeJS.EventEmitter['on']`, don't work in the Renderer process. Wrapping them into a function.
-      obj[key] = function (...args: any) {
-        return value.call(obj, ...args)
-      }
-    } else {
-      obj[key] = value
-    }
-  }
-  return obj
-}
-
-// --------- Preload scripts loading ---------
 function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
   return new Promise((resolve) => {
     if (condition.includes(document.readyState)) {

src/demos/ipc.ts

@@ -1,4 +1,5 @@
+import { ipcRenderer } from 'electron'
 
-window.ipcRenderer.on('main-process-message', (_event, ...args) => {
+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'
 
-import './demos/ipc'
+// `nodeIntegration` needs to be enabled in the Main process.
-// 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,8 +5,3 @@ 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,9 +56,7 @@ export default defineConfig(({ command }) => {
             },
           },
         },
-        // Ployfill the Electron and Node.js API for Renderer process.
+        // Use Node.js API in the 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: {},
       }),
     ],