v2.1.0: use `vite-electron-plugin` instead `vite-plugin-electron`

.gitignore

@@ -26,3 +26,4 @@ release
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+dist-electron

.vscode/launch.json

@@ -33,7 +33,8 @@
         "--remote-debugging-port=9229",
         "."
       ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env"
+      "envFile": "${workspaceFolder}/.vscode/.debug.env",
+      "console": "integratedTerminal"
     },
     {
       "name": "Debug Renderer Process",

.vscode/tasks.json

@@ -12,6 +12,7 @@
         "owner": "typescript",
         "fileLocation": "relative",
         "pattern": {
+          // TODO: correct "regexp"
           "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
           "file": 1,
           "line": 3,
@@ -21,8 +22,7 @@
         },
         "background": {
           "activeOnStart": true,
-          "beginsPattern": "^.*building for development.*$",
+          "endsPattern": "^.*[startup] Electron App.*$",
-          "endsPattern": "built in [0-9]*ms.*$",
         }
       }
     }

electron-builder.json5

@@ -10,7 +10,10 @@
     output: "release/${version}",
     buildResources: "electron/resources",
   },
-  files: ["dist"],
+  files: [
+    "dist-electron",
+    "dist"
+  ],
   win: {
     target: [
       {

electron/electron-env.d.ts

@@ -1,22 +1,9 @@
-/// <reference types="vite-plugin-electron/electron-env" />
+/// <reference types="vite-electron-plugin/electron-env" />
 
 declare namespace NodeJS {
   interface ProcessEnv {
-    /**
+    VSCODE_DEBUG?: 'true'
-     * The built directory structure
+    DIST_ELECTRON: string
-     *
-     * ```tree
-     * ├─┬ dist
-     * │ ├─┬ electron
-     * │ │ ├─┬ main
-     * │ │ │ └── index.js
-     * │ │ └─┬ preload
-     * │ │   └── index.js
-     * │ ├── index.html
-     * │ ├── ...other-static-files-from-public
-     * │
-     * ```
-     */
     DIST: string
     /** /dist/ or /public/ */
     PUBLIC: string

electron/main/index.ts

@@ -1,17 +1,16 @@
 // The built directory structure
 //
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js    > Electron-Main
+// │ └─┬ preload
+// │   └── index.js    > Preload-Scripts
 // ├─┬ dist
-// │ ├─┬ electron
+// │ └── index.html    > Electron-Renderer
-// │ │ ├─┬ main
+//
-// │ │ │ └── index.js
+process.env.DIST_ELECTRON = join(__dirname, '..')
-// │ │ └─┬ preload
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
-// │ │   └── index.js
+process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public')
-// │ ├── index.html
-// │ ├── ...other-static-files-from-public
-// │
-process.env.DIST = join(__dirname, '../..')
-process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST, '../public')
-process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 import { app, BrowserWindow, shell, ipcMain } from 'electron'
 import { release } from 'os'

package.json

@@ -2,11 +2,11 @@
   "name": "electron-vite-react",
   "productName": "Electron",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vite React Electron boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
   "license": "MIT",
-  "main": "dist/electron/main/index.js",
+  "main": "dist-electron/main/index.js",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && electron-builder"
@@ -26,12 +26,10 @@
     "sass": "^1.54.4",
     "typescript": "^4.7.4",
     "vite": "^3.0.7",
-    "vite-plugin-electron": "^0.9.2"
+    "vite-electron-plugin": "^0.4.1"
   },
   "debug": {
     "env": {
-      "VITE_DEV_SERVER_HOSTNAME": "127.0.0.1",
-      "VITE_DEV_SERVER_PORT": 7777,
       "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777"
     }
   }

src/main.tsx

@@ -1,9 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-// import './samples/node-api'
 import 'styles/index.css'
 
+/**
+ * If you enables use of Node.js API in the Renderer-process
+ * ```
+ * npm i -D vite-plugin-electron-renderer
+ * ```
+ * @see - https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
+ */
+// import './samples/node-api'
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

vite.config.ts

@@ -2,10 +2,11 @@ import { rmSync } from 'fs'
 import path from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import electron, { onstart } from 'vite-plugin-electron'
+import electron from 'vite-electron-plugin'
+import { customStart } from 'vite-electron-plugin/plugin'
 import pkg from './package.json'
 
-rmSync(path.join(__dirname, 'dist'), { recursive: true, force: true }) // v14.14.0
+rmSync(path.join(__dirname, 'dist-electron'), { recursive: true, force: true })
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -18,38 +19,33 @@ export default defineConfig({
   plugins: [
     react(),
     electron({
-      main: {
+      include: [
-        entry: 'electron/main/index.ts',
+        'electron',
-        vite: {
+        'preload',
-          build: {
+      ],
-            // For Debug
+      transformOptions: {
-            sourcemap: true,
+        sourcemap: !!process.env.VSCODE_DEBUG,
-            outDir: 'dist/electron/main',
-          },
-          // Will start Electron via VSCode Debug
-          plugins: [process.env.VSCODE_DEBUG ? onstart() : null],
-        },
       },
-      preload: {
+      // Will start Electron via VSCode Debug
-        input: {
+      plugins: process.env.VSCODE_DEBUG
-          // You can configure multiple preload scripts here
+        ? [customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')))]
-          index: path.join(__dirname, 'electron/preload/index.ts'),
+        : undefined,
-        },
-        vite: {
-          build: {
-            // For Debug
-            sourcemap: 'inline',
-            outDir: 'dist/electron/preload',
-          }
-        },
-      },
-      // Enables use of Node.js API in the Electron-Renderer
-      // https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
-      renderer: {},
     }),
   ],
-  server: process.env.VSCODE_DEBUG ? {
+  server: process.env.VSCODE_DEBUG ? (() => {
-    host: pkg.debug.env.VITE_DEV_SERVER_HOSTNAME,
+    const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
-    port: pkg.debug.env.VITE_DEV_SERVER_PORT,
+    return {
-  } : undefined,
+      host: url.hostname,
+      port: +url.port,
+    }
+  })() : undefined,
+  clearScreen: false,
 })
+
+function debounce<Fn extends (...args: any[]) => void>(fn: Fn, delay = 299) {
+  let t: NodeJS.Timeout
+  return ((...args) => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), delay)
+  }) as Fn
+}