Merge branch 'main' of github.com:caoxiemeihao/electron-vue-vite into main

Author: caoxiemeihao

.gitignore

@@ -23,3 +23,4 @@ dist-ssr
 
 release
 .vscode/.debug.env
+dist-electron

.vscode/launch.json

@@ -32,7 +32,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": "built in [0-9]*ms.*$",
+          "endsPattern": "^.*[startup] Electron App.*$",
         }
       }
     }

electron-builder.json5

@@ -8,6 +8,7 @@
     "output": "release/${version}"
   },
   "files": [
+    "dist-electron",
     "dist"
   ],
   "mac": {

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 {
-    /**
-     * The built directory structure
-     *
-     * ```tree
-     * ├─┬ dist
-     * │ ├─┬ electron
-     * │ │ ├─┬ main
-     * │ │ │ └── index.js
-     * │ │ └─┬ preload
-     * │ │   └── index.js
-     * │ ├── index.html
-     * │ ├── ...other-static-files-from-public
-     * │
-     * ```
-     */
+    VSCODE_DEBUG?: 'true'
+    DIST_ELECTRON: string
     DIST: string
     /** /dist/ or /public/ */
     PUBLIC: string

electron/main/index.ts

@@ -1,16 +1,16 @@
 // The built directory structure
 //
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js    > Electron-Main
+// │ └─┬ preload
+// │   └── index.js    > Preload-Scripts
 // ├─┬ dist
-// │ ├─┬ electron
-// │ │ ├─┬ main
-// │ │ │ └── index.js
-// │ │ └─┬ preload
-// │ │   └── index.js
-// │ ├── 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')
+// │ └── index.html    > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, '..')
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
+process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public')
 
 import { app, BrowserWindow, shell, ipcMain } from 'electron'
 import { release } from 'os'
@@ -35,7 +35,7 @@ if (!app.requestSingleInstanceLock()) {
 let win: BrowserWindow | null = null
 // Here, you can also use other preload
 const preload = join(__dirname, '../preload/index.js')
-const url = process.env.VITE_DEV_SERVER_URL as string
+const url = process.env.VITE_DEV_SERVER_URL
 const indexHtml = join(process.env.DIST, 'index.html')
 
 async function createWindow() {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-vue-vite",
-  "version": "2.0.0",
-  "main": "dist/electron/main/index.js",
+  "version": "2.1.0",
+  "main": "dist-electron/main/index.js",
   "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <[email protected]>",
   "license": "MIT",
@@ -15,18 +15,16 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
-    "electron": "^20.0.2",
+    "electron": "^21.0.1",
     "electron-builder": "^23.3.3",
     "typescript": "^4.7.4",
     "vite": "^3.0.8",
-    "vite-plugin-electron": "^0.9.3",
+    "vite-electron-plugin": "^0.4.1",
     "vue": "^3.2.37",
     "vue-tsc": "^0.40.1"
   },
   "debug": {
     "env": {
-      "VITE_DEV_SERVER_HOSTNAME": "127.0.0.1",
-      "VITE_DEV_SERVER_PORT": 3344,
       "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344"
     }
   },

src/main.ts

@@ -1,5 +1,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+
+/**
+ * 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'
 
 createApp(App)

vite.config.ts

@@ -1,49 +1,41 @@
 import { rmSync } from 'fs'
-import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-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('dist', { recursive: true, force: true }) // v14.14.0
+rmSync('dist-electron', { recursive: true, force: true })
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     electron({
-      main: {
-        entry: 'electron/main/index.ts',
-        vite: {
-          build: {
-            // For Debug
-            sourcemap: true,
-            outDir: 'dist/electron/main',
-          },
-          // Will start Electron via VSCode Debug
-          plugins: [process.env.VSCODE_DEBUG ? onstart() : null],
-        },
+      include: ['electron'],
+      transformOptions: {
+        sourcemap: !!process.env.VSCODE_DEBUG,
       },
-      preload: {
-        input: {
-          // You can configure multiple preload here
-          index: path.join(__dirname, 'electron/preload/index.ts'),
-        },
-        vite: {
-          build: {
-            // For Debug
-            sourcemap: 'inline',
-            outDir: 'dist/electron/preload',
-          },
-        },
-      },
-      // Enables use of Node.js API in the Renderer-process
-      // https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
-      renderer: {},
+      // Will start Electron via VSCode Debug
+      plugins: process.env.VSCODE_DEBUG
+        ? [customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')))]
+        : undefined,
     }),
   ],
-  server: process.env.VSCODE_DEBUG ? {
-    host: pkg.debug.env.VITE_DEV_SERVER_HOSTNAME,
-    port: pkg.debug.env.VITE_DEV_SERVER_PORT,
-  } : undefined,
+  server: process.env.VSCODE_DEBUG ? (() => {
+    const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+    return {
+      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
+}