@tomjs/vite-plugin-electron 1.2.1 → 1.3.0

package/README.md

@@ -6,7 +6,7 @@
 
 > A Simple [vite](https://vitejs.dev/) plugin for [electron](https://www.electronjs.org), supports `esm` and `cjs`.
 
-I learned [caoxiemeihao](https://github.com/caoxiemeihao)'s [vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) and [Doubleshotjs](https://github.com/Doubleshotjs)'s [doubleshot](https://github.com/Doubleshotjs/doubleshot) These two excellent works, combined with some of my own ideas, developed this plugin. I hope that using it can simplify the development configuration and only focus on business development.
+Many thanks to [caoxiemeihao](https://github.com/caoxiemeihao)'s [vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) and [Doubleshotjs](https://github.com/Doubleshotjs)'s [doubleshot](https://github.com/Doubleshotjs/doubleshot) These two excellent libraries inspired me. I hope to use it to simplify development configuration and focus only on business development.
 
 ## Features
 
@@ -15,25 +15,18 @@ I learned [caoxiemeihao](https://github.com/caoxiemeihao)'s [vite-plugin-electro
 - Support `main`'s `Hot Restart`
 - Support `preload`'s `Hot Reload`
 - Support `esm` and `cjs`, you can use `esm` in [electron v28+](https://www.electronjs.org/blog/electron-28-0)
-- Support `vue` and `react` and [other frameworks](https://vitejs.dev/guide/#trying-vite-online)
+- Support `vue` and `react` and other [frameworks](https://vitejs.dev/guide/#trying-vite-online) supported by `vite`
 
 ## Install
 
-With `pnpm`
-
 ```bash
+# pnpm
 pnpm add @tomjs/vite-plugin-electron -D
-```
 
-With `yarn`
-
-```bash
+# yarn
 yarn add @tomjs/vite-plugin-electron -D
-```
-
-With `npm`
 
-```bash
+# npm
 npm i @tomjs/vite-plugin-electron --save-dev
 ```
 
@@ -188,7 +181,7 @@ export default defineConfig({
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| recommended | `boolean` | `true` | If set to true, it will change the main/preload/renderer outDir to be parallel outDir. For example, if vite build.outDir is 'dist', it will change main/preload/render to 'dist/main', 'dist/preload', and 'dist/renderer'. |
+| recommended | `boolean` | `true` | This option is intended to provide recommended default parameters and behavior. |
 | external | `string[]` |  | List of modules that should not be bundled. |
 | main | [MainOptions](#MainOptions) |  | Configuration options for the electron main process. |
 | preload | [PreloadOptions](#PreloadOptions) |  | Configuration options for the electron preload process. |
@@ -232,3 +225,66 @@ Based on [Options](https://paka.dev/npm/tsup) of [tsup](https://tsup.egoist.dev/
 | --------- | ------------------------ | ----------------------- |
 | sourcemap | `true`                   | `false`                 |
 | minify    | `false`                  | `true`                  |
+
+## Debug
+
+### Web debugging
+
+Use [@tomjs/electron-devtools-installer](https://npmjs.com/package/@tomjs/electron-devtools-installer) to install the `Chrome Devtools` plugins and use it like web development
+
+```ts
+import { app } from 'electron';
+
+app.whenReady().then(() => {
+  const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
+    '@tomjs/electron-devtools-installer'
+  );
+
+  installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+    .then(exts => {
+      console.log(
+        'Added Extension: ',
+        exts.map(s => s.name),
+      );
+    })
+    .catch(err => {
+      console.log('Failed to install extensions');
+      console.error(err);
+    });
+});
+```
+
+### Main thread debugging
+
+#### Turn on debugging
+
+Start code compilation through the following configuration or `ELECTRON_DEBUG=1 vite dev`
+
+- Enable by setting `APP_ELECTRON_DEBUG=1` in `.env` file
+- `vite.config.js` configures `electron({ debug: true })` to be turned on
+
+#### VSCODE
+
+Run `Debug Main Process` through `vscode` to debug the main thread. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)
+
+`launch.json` is configured as follows:
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      },
+      "program": "${workspaceRoot}/dist/main/index.js",
+      "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+    }
+  ]
+}
+```

package/README.zh_CN.md

@@ -6,7 +6,7 @@
 
 > 一个简单的 [electron](https://www.electronjs.org/zh/) [vite](https://cn.vitejs.dev/) 插件，支持 `esm` 和 `cjs`
 
-学习了 [caoxiemeihao](https://github.com/caoxiemeihao) 的 [vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) 和 [Doubleshotjs](https://github.com/Doubleshotjs) 的 [doubleshot](https://github.com/Doubleshotjs/doubleshot) 这两个优秀的作品，结合自己的一些想法，开发了该插件。希望使用它能简化开发配置，只关注业务开发。
+非常感谢 [caoxiemeihao](https://github.com/caoxiemeihao) 的 [vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) 和 [Doubleshotjs](https://github.com/Doubleshotjs) 的 [doubleshot](https://github.com/Doubleshotjs/doubleshot) 这两个优秀库给了我启发。我希望使用它能简化开发配置，只关注业务开发。
 
 ## 特性
 
@@ -15,25 +15,18 @@
 - 支持 `main` 的 `热重启`
 - 支持 `preload` 的 `热重载`
 - 支持 `esm` 和 `cjs` ，你可以在 [electron v28+](https://www.electronjs.org/zh/blog/electron-28-0) 中使用 `esm`
-- 支持 `vue` 和 `react` 以及 [其他框架](https://cn.vitejs.dev/guide/#trying-vite-online)
+- 支持 `vue` 和 `react` 等其他 `vite` 支持的[框架](https://cn.vitejs.dev/guide/#trying-vite-online)
 
 ## 安装
 
-使用 `pnpm`
-
 ```bash
+# pnpm
 pnpm add @tomjs/vite-plugin-electron -D
-```
 
-使用 `yarn`
-
-```bash
+# yarn
 yarn add @tomjs/vite-plugin-electron -D
-```
-
-使用 `npm`
 
-```bash
+# npm
 npm i @tomjs/vite-plugin-electron --save-dev
 ```
 
@@ -189,7 +182,7 @@ export default defineConfig({
 
 | 参数名 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| recommended | `boolean` | `true` | 推荐开关，如果为true，将具有以下默认行为：将main/preload/renderer的outDir更改为并行的outDir；例如，如果vite build.outDir为'dist'，将main/preload/render更改为'dist/main'、'dist/preload'和'dist/renderer' |
+| recommended | `boolean` | `true` | 这个选项是为了提供推荐的默认参数和行为 |
 | external | `string[]` |  | 不打包这些模块 |
 | main | [MainOptions](#MainOptions) |  | electron main 进程选项 |
 | preload | [PreloadOptions](#PreloadOptions) |  | electron preload 进程选项 |
@@ -231,3 +224,66 @@ export default defineConfig({
 | --------- | -------------- | -------------- |
 | sourcemap | `true`         | `false`        |
 | minify    | `false`        | `true`         |
+
+## 调试
+
+### Web调试
+
+使用 [@tomjs/electron-devtools-installer](https://npmjs.com/package/@tomjs/electron-devtools-installer) 安装 `Chrome Devtools` 插件后像 Web 开发一样使用
+
+```ts
+import { app } from 'electron';
+
+app.whenReady().then(() => {
+  const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
+    '@tomjs/electron-devtools-installer'
+  );
+
+  installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+    .then(exts => {
+      console.log(
+        'Added Extension: ',
+        exts.map(s => s.name),
+      );
+    })
+    .catch(err => {
+      console.log('Failed to install extensions');
+      console.error(err);
+    });
+});
+```
+
+### 主线程调试
+
+#### 开启调试
+
+通过如下配置或者 `ELECTRON_DEBUG=1 vite dev` 启动代码编译
+
+- 通过 `.env` 文件设置 `APP_ELECTRON_DEBUG=1` 开启
+- `vite.config.js` 配置 `electron({ debug: true })` 开启
+
+#### VSCODE
+
+通过 `vscode` 运行 `Debug Main Process` 调试主线程，调试工具参考 [官方文档](https://code.visualstudio.com/docs/editor/debugging)
+
+`launch.json` 配置如下：
+
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      },
+      "program": "${workspaceRoot}/dist/main/index.js",
+      "envFile": "${workspaceRoot}/node_modules/@tomjs/vite-plugin-electron/debug/.env"
+    }
+  ]
+}
+```

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { Plugin } from 'vite';
 import { Options } from 'tsup';
 
 /**
- * Electron main process options.
+ * Electron main process options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
  * @see https://paka.dev/npm/tsup
  * @see https://unpkg.com/browse/tsup/dist/index.d.ts
  */
@@ -26,7 +26,7 @@ interface MainOptions extends Omit<Options, 'entry' | 'format' | 'outDir' | 'wat
     onSuccess?: () => Promise<void | undefined | (() => void | Promise<void>)>;
 }
 /**
- * Electron preload process options.
+ * Electron preload process options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
  * @see https://paka.dev/npm/tsup
  * @see https://unpkg.com/browse/tsup/dist/index.d.ts
  */
@@ -74,10 +74,10 @@ interface PluginOptions {
      */
     preload?: PreloadOptions;
     /**
-     * electron start with the `--inspect`
-     * @default true
+     * electron debug mode, don't startup electron. You can also use `process.env.APP_ELECTRON_DEBUG`. Default is false.
+     * @default false
      */
-    inspect?: boolean;
+    debug?: boolean;
 }
 
 declare function vitePluginElectron(options?: PluginOptions): Plugin;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Plugin } from 'vite';
 import { Options } from 'tsup';
 
 /**
- * Electron main process options.
+ * Electron main process options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
  * @see https://paka.dev/npm/tsup
  * @see https://unpkg.com/browse/tsup/dist/index.d.ts
  */
@@ -26,7 +26,7 @@ interface MainOptions extends Omit<Options, 'entry' | 'format' | 'outDir' | 'wat
     onSuccess?: () => Promise<void | undefined | (() => void | Promise<void>)>;
 }
 /**
- * Electron preload process options.
+ * Electron preload process options. See [tsup](https://tsup.egoist.dev/) and [API Doc](https://paka.dev/npm/tsup) for more information.
  * @see https://paka.dev/npm/tsup
  * @see https://unpkg.com/browse/tsup/dist/index.d.ts
  */
@@ -74,10 +74,10 @@ interface PluginOptions {
      */
     preload?: PreloadOptions;
     /**
-     * electron start with the `--inspect`
-     * @default true
+     * electron debug mode, don't startup electron. You can also use `process.env.APP_ELECTRON_DEBUG`. Default is false.
+     * @default false
      */
-    inspect?: boolean;
+    debug?: boolean;
 }
 
 declare function vitePluginElectron(options?: PluginOptions): Plugin;

package/dist/index.js

@@ -1,5 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/index.ts
 var _fs = require('fs'); var _fs2 = _interopRequireDefault(_fs);
+var _process = require('process');
 var _lodashclonedeep = require('lodash.clonedeep'); var _lodashclonedeep2 = _interopRequireDefault(_lodashclonedeep);
 var _lodashmerge = require('lodash.merge'); var _lodashmerge2 = _interopRequireDefault(_lodashmerge);
 var _path = require('path'); var _path2 = _interopRequireDefault(_path);
@@ -69,10 +70,11 @@ function getBuildOptions(options) {
   });
 }
 async function startup(options) {
+  if (options.debug) {
+    return;
+  }
   await startup.exit();
-  const args = [];
-  options.inspect && args.push("--inspect");
-  process.electronApp = _child_process.spawn.call(void 0, _electron2.default, [".", ...args], {
+  process.electronApp = _child_process.spawn.call(void 0, _electron2.default, ["."], {
     stdio: "inherit"
   });
   process.electronApp.once("exit", process.exit);
@@ -97,9 +99,10 @@ startup.exit = async () => {
   });
 };
 async function runServe(options, server) {
+  options.debug && logger.warn(`debug mode`);
   const buildOptions = getBuildOptions(options);
+  const buildCounts = [0, buildOptions.length > 1 ? 0 : 1];
   for (let i = 0; i < buildOptions.length; i++) {
-    let isFirstBuild = true;
     const tsOpts = buildOptions[i];
     const { __NAME__: name, onSuccess: _onSuccess, watch, ...tsupOptions } = tsOpts;
     logger.info(`${name} build`);
@@ -107,16 +110,21 @@ async function runServe(options, server) {
       if (typeof _onSuccess === "function") {
         await _onSuccess();
       }
-      if (isFirstBuild) {
+      if (buildCounts[i] <= 0) {
+        buildCounts[i]++;
         logger.info(`${name} build succeeded`);
-        isFirstBuild = false;
+        if (buildCounts[0] == 1 && buildCounts[1] == 1) {
+          logger.info("electron startup");
+          await startup(options);
+        }
         return;
       }
       logger.success(`${name} rebuild succeeded!`);
       if (name === "main") {
-        console.log("main process exit");
+        logger.info("electron restart");
         await startup(options);
       } else {
+        logger.info("page reload");
         server.ws.send({
           type: "full-reload"
         });
@@ -124,7 +132,6 @@ async function runServe(options, server) {
     };
     await _tsup.build.call(void 0, { onSuccess, watch: true, ...tsupOptions });
   }
-  await startup(options);
 }
 async function runBuild(options) {
   const buildOptions = getBuildOptions(options);
@@ -219,32 +226,56 @@ function vitePluginElectron(options) {
         opts.preload.outDir ||= _path2.default.join("dist-electron", "preload");
       }
       if (isDev) {
-        opts.main.sourcemap ??= true;
-        opts.preload.sourcemap ??= true;
+        opts.main.sourcemap ??= "inline";
+        opts.preload.sourcemap ??= "inline";
       } else {
         opts.main.minify ??= true;
         opts.preload.minify ??= true;
       }
+      let envPrefix = config.envPrefix;
+      if (!envPrefix) {
+        envPrefix = ["VITE_"];
+      } else if (typeof envPrefix === "string") {
+        envPrefix = [envPrefix];
+      }
+      if (!envPrefix.includes("APP_")) {
+        envPrefix.push("APP_");
+      }
       return {
+        envPrefix: [...new Set(envPrefix)],
         build: {
           outDir
         }
       };
     },
+    configResolved(config) {
+      opts.debug = config.env.APP_ELECTRON_DEBUG ? !!config.env.APP_ELECTRON_DEBUG : opts.debug;
+    },
     configureServer(server) {
-      if (!(server == null ? void 0 : server.httpServer)) {
+      if (!server || !server.httpServer) {
         return;
       }
       server.httpServer.on("listening", async () => {
-        if (server.httpServer) {
-          const serve = server.httpServer.address();
-          const { address, port, family } = serve;
-          if (family === "IPv6") {
-            process.env.APP_DEV_SERVER_URL = `http://[${address}]:${port}`;
-          } else {
-            process.env.APP_DEV_SERVER_URL = `http://${address}:${port}`;
-          }
+        var _a;
+        const serve = (_a = server.httpServer) == null ? void 0 : _a.address();
+        const { address, port, family } = serve;
+        const hostname = family === "IPv6" ? `[${address}]` : address;
+        const protocol = server.config.server.https ? "https" : "http";
+        process.env.APP_DEV_SERVER_URL = `${protocol}://${hostname}:${port}`;
+        const DEBUG_PATH = _path2.default.resolve(
+          _process.cwd.call(void 0, ),
+          "node_modules",
+          "@tomjs",
+          "vite-plugin-electron",
+          "debug"
+        );
+        if (!_fs2.default.existsSync(DEBUG_PATH)) {
+          _fs.mkdirSync.call(void 0, DEBUG_PATH, { recursive: true });
         }
+        const env = Object.keys(process.env).filter((s) => s.startsWith("APP_") || s.startsWith("VITE_")).map((s) => `${s}=${process.env[s]}`).join("\n");
+        _fs.writeFileSync.call(void 0, _path2.default.join(DEBUG_PATH, ".env"), `NODE_ENV=development
+${env}`);
+        console.log("Server is running");
         await runServe(opts, server);
       });
     },

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/index.ts
-import fs2 from "fs";
+import fs2, { mkdirSync, writeFileSync } from "fs";
+import { cwd } from "process";
 import cloneDeep from "lodash.clonedeep";
 import merge from "lodash.merge";
 import path from "path";
@@ -69,10 +70,11 @@ function getBuildOptions(options) {
   });
 }
 async function startup(options) {
+  if (options.debug) {
+    return;
+  }
   await startup.exit();
-  const args = [];
-  options.inspect && args.push("--inspect");
-  process.electronApp = spawn(electron, [".", ...args], {
+  process.electronApp = spawn(electron, ["."], {
     stdio: "inherit"
   });
   process.electronApp.once("exit", process.exit);
@@ -97,9 +99,10 @@ startup.exit = async () => {
   });
 };
 async function runServe(options, server) {
+  options.debug && logger.warn(`debug mode`);
   const buildOptions = getBuildOptions(options);
+  const buildCounts = [0, buildOptions.length > 1 ? 0 : 1];
   for (let i = 0; i < buildOptions.length; i++) {
-    let isFirstBuild = true;
     const tsOpts = buildOptions[i];
     const { __NAME__: name, onSuccess: _onSuccess, watch, ...tsupOptions } = tsOpts;
     logger.info(`${name} build`);
@@ -107,16 +110,21 @@ async function runServe(options, server) {
       if (typeof _onSuccess === "function") {
         await _onSuccess();
       }
-      if (isFirstBuild) {
+      if (buildCounts[i] <= 0) {
+        buildCounts[i]++;
         logger.info(`${name} build succeeded`);
-        isFirstBuild = false;
+        if (buildCounts[0] == 1 && buildCounts[1] == 1) {
+          logger.info("electron startup");
+          await startup(options);
+        }
         return;
       }
       logger.success(`${name} rebuild succeeded!`);
       if (name === "main") {
-        console.log("main process exit");
+        logger.info("electron restart");
         await startup(options);
       } else {
+        logger.info("page reload");
         server.ws.send({
           type: "full-reload"
         });
@@ -124,7 +132,6 @@ async function runServe(options, server) {
     };
     await tsupBuild({ onSuccess, watch: true, ...tsupOptions });
   }
-  await startup(options);
 }
 async function runBuild(options) {
   const buildOptions = getBuildOptions(options);
@@ -218,32 +225,56 @@ function vitePluginElectron(options) {
         opts.preload.outDir ||= path.join("dist-electron", "preload");
       }
       if (isDev) {
-        opts.main.sourcemap ??= true;
-        opts.preload.sourcemap ??= true;
+        opts.main.sourcemap ??= "inline";
+        opts.preload.sourcemap ??= "inline";
       } else {
         opts.main.minify ??= true;
         opts.preload.minify ??= true;
       }
+      let envPrefix = config.envPrefix;
+      if (!envPrefix) {
+        envPrefix = ["VITE_"];
+      } else if (typeof envPrefix === "string") {
+        envPrefix = [envPrefix];
+      }
+      if (!envPrefix.includes("APP_")) {
+        envPrefix.push("APP_");
+      }
       return {
+        envPrefix: [...new Set(envPrefix)],
         build: {
           outDir
         }
       };
     },
+    configResolved(config) {
+      opts.debug = config.env.APP_ELECTRON_DEBUG ? !!config.env.APP_ELECTRON_DEBUG : opts.debug;
+    },
     configureServer(server) {
-      if (!(server == null ? void 0 : server.httpServer)) {
+      if (!server || !server.httpServer) {
         return;
       }
       server.httpServer.on("listening", async () => {
-        if (server.httpServer) {
-          const serve = server.httpServer.address();
-          const { address, port, family } = serve;
-          if (family === "IPv6") {
-            process.env.APP_DEV_SERVER_URL = `http://[${address}]:${port}`;
-          } else {
-            process.env.APP_DEV_SERVER_URL = `http://${address}:${port}`;
-          }
+        var _a;
+        const serve = (_a = server.httpServer) == null ? void 0 : _a.address();
+        const { address, port, family } = serve;
+        const hostname = family === "IPv6" ? `[${address}]` : address;
+        const protocol = server.config.server.https ? "https" : "http";
+        process.env.APP_DEV_SERVER_URL = `${protocol}://${hostname}:${port}`;
+        const DEBUG_PATH = path.resolve(
+          cwd(),
+          "node_modules",
+          "@tomjs",
+          "vite-plugin-electron",
+          "debug"
+        );
+        if (!fs2.existsSync(DEBUG_PATH)) {
+          mkdirSync(DEBUG_PATH, { recursive: true });
         }
+        const env = Object.keys(process.env).filter((s) => s.startsWith("APP_") || s.startsWith("VITE_")).map((s) => `${s}=${process.env[s]}`).join("\n");
+        writeFileSync(path.join(DEBUG_PATH, ".env"), `NODE_ENV=development
+${env}`);
+        console.log("Server is running");
         await runServe(opts, server);
       });
     },

package/env.d.ts

@@ -13,5 +13,9 @@ declare namespace NodeJS {
      * The url of the dev server.
      */
     APP_DEV_SERVER_URL?: string;
+    /**
+     * Electron main process debug, don't startup electron
+     */
+    APP_ELECTRON_DEBUG?: string;
   }
 }

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@tomjs/vite-plugin-electron",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A simple vite plugin for electron, supports esm/cjs.",
   "keywords": [
     "vite",
     "plugin",
     "electron",
-    "tsup"
+    "tsup",
+    "esm",
+    "cjs"
   ],
   "author": {
     "name": "Tom Gao",