diff --git a/.gitignore b/.gitignore index cb801a2..3c0d0bb 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ release package-lock.json pnpm-lock.yaml yarn.lock +dist-electron diff --git a/.vscode/launch.json b/.vscode/launch.json index decf6a3..c36a0e2 100644 --- a/.vscode/launch.json +++ b/.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", diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 0fdfa46..ef1386a 100644 --- a/.vscode/tasks.json +++ b/.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.*$", } } } diff --git a/electron-builder.json5 b/electron-builder.json5 index 3da0db0..6bde6a5 100644 --- a/electron-builder.json5 +++ b/electron-builder.json5 @@ -10,7 +10,10 @@ output: "release/${version}", buildResources: "electron/resources", }, - files: ["dist"], + files: [ + "dist-electron", + "dist" + ], win: { target: [ { diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts index b0ec4b6..3b33998 100644 --- a/electron/electron-env.d.ts +++ b/electron/electron-env.d.ts @@ -1,22 +1,9 @@ -/// +/// 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 diff --git a/electron/main/index.ts b/electron/main/index.ts index 4e13919..819f640 100644 --- a/electron/main/index.ts +++ b/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 -// │ │ ├─┬ 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') -process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' +// │ └── 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' diff --git a/package.json b/package.json index 8b6f66b..d1f9a88 100644 --- a/package.json +++ b/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" } } diff --git a/src/main.tsx b/src/main.tsx index a012db0..c897ef0 100644 --- a/src/main.tsx +++ b/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( diff --git a/vite.config.ts b/vite.config.ts index 9c112e7..f62ed82 100644 --- a/vite.config.ts +++ b/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: { - 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', + 'preload', + ], + transformOptions: { + sourcemap: !!process.env.VSCODE_DEBUG, }, - preload: { - input: { - // You can configure multiple preload scripts 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 Electron-Renderer - // 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 void>(fn: Fn, delay = 299) { + let t: NodeJS.Timeout + return ((...args) => { + clearTimeout(t) + t = setTimeout(() => fn(...args), delay) + }) as Fn +}