feat: electron:serve起動時にエディタを起動しないオプションを追加 (#2309)

Co-authored-by: Hiroshiba Kazuyuki <[email protected]>

.vscode/launch.template.json

@@ -6,11 +6,14 @@
     "configurations": [
         {
             "name": "Attach to Renderer Process",
-            // NOTE: background.tsで指定しているremote-debugging-port
-            "port": 9222,
+            "port": 9222, // NOTE: background.tsで指定しているremote-debugging-port
             "request": "attach",
             "type": "chrome",
-            "webRoot": "${workspaceFolder}",
+            "webRoot": "${workspaceFolder}/src",
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
+            ],
             "timeout": 20000, // 20 * 1000 ms程度あればビルド時間は間に合うはず
         },
         {
@@ -26,6 +29,23 @@
             ],
             "type": "node"
         },
+        {
+            // 直接Electronのみを起動し、バックグラウンドで"electron:serve"を実行する
+            // NOTE: ホットリロードできない代わりに、デバッグ起動が軽い
+            "name": "Launch Electron Main Process without hot reload",
+            "request": "launch",
+            "type": "node",
+            "runtimeExecutable": "npx",
+            "args": [
+                "electron",
+                ".",
+                "--no-sandbox"
+            ],
+            "preLaunchTask": "Electron Serve without Launch Electron",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
         {
             "name": "Attach by Process ID",
             // .bin viteを指定するとElectronのMain Processのデバッグが可能
@@ -35,13 +55,25 @@
                 "<node_internals>/**"
             ],
             "type": "node"
-        },
+        }
     ],
     "compounds": [
         {
             "name": "Launch Electron Main/Renderer",
-            "configurations": ["Attach to Renderer Process", "Launch Electron Main Process via NPM"],
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process via NPM"
+            ],
+            "stopAll": true
+        },
+        {
+            // ホットリロードできない代わりにデバッグ起動が軽いモード
+            "name": "Launch Electron Main/Renderer without hot reload",
+            "configurations": [
+                "Attach to Renderer Process",
+                "Launch Electron Main Process without hot reload"
+            ],
             "stopAll": true
         }
     ]
-}
+}

.vscode/tasks.template.json

@@ -0,0 +1,28 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Electron Serve without Launch Electron",
+            // Electronを起動せずにバックグラウンドで"electron:serve"を実行する
+            // NOTE: デバッグ起動を軽くできる
+            "type": "npm",
+            "script": "electron:serve",
+            "options": {
+                "env": {
+                    "SKIP_LAUNCH_ELECTRON": "1"
+                }
+            },
+            "isBackground": true,
+            "problemMatcher": {
+                "pattern": {
+                    "regexp": ""
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "building for development\\.\\.\\.",
+                    "endsPattern": "main process build is complete\\."
+                }
+            }
+        }
+    ]
+}

README.md

@@ -319,7 +319,9 @@ npx openapi-generator-cli version-manager list
 
 npm scripts の `serve` や `electron:serve` などの開発ビルド下では、ビルドに使用している vite で sourcemap を出力するため、ソースコードと出力されたコードの対応付けが行われます。
 
-`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を作成することで、開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
+`.vscode/launch.template.json` をコピーして `.vscode/launch.json` を、
+`.vscode/tasks.template.json` をコピーして `.vscode/tasks.json` を作成することで、
+開発ビルドを VS Code から実行し、デバッグを可能にするタスクが有効になります。
 
 ## ライセンス
 

src/backend/electron/ipc.ts

@@ -68,8 +68,8 @@ export const ipcMainSendProxy = new Proxy(
 const validateIpcSender = (event: IpcMainInvokeEvent) => {
   let isValid: boolean;
   const senderUrl = new URL(event.senderFrame.url);
-  if (process.env.VITE_DEV_SERVER_URL != undefined) {
-    const devServerUrl = new URL(process.env.VITE_DEV_SERVER_URL);
+  if (import.meta.env.VITE_DEV_SERVER_URL != undefined) {
+    const devServerUrl = new URL(import.meta.env.VITE_DEV_SERVER_URL);
     isValid = senderUrl.origin === devServerUrl.origin;
   } else {
     isValid = senderUrl.protocol === "app:";

src/backend/electron/main.ts

@@ -146,7 +146,7 @@ protocol.registerSchemesAsPrivileged([
   { scheme: "app", privileges: { secure: true, standard: true, stream: true } },
 ]);
 
-const firstUrl = process.env.VITE_DEV_SERVER_URL ?? "app://./index.html";
+const firstUrl = import.meta.env.VITE_DEV_SERVER_URL ?? "app://./index.html";
 
 // engine
 const vvppEngineDir = path.join(app.getPath("userData"), "vvpp-engines");
@@ -281,7 +281,7 @@ async function createWindow() {
   }
 
   // ソフトウェア起動時はプロトコルを app にする
-  if (process.env.VITE_DEV_SERVER_URL == undefined) {
+  if (import.meta.env.VITE_DEV_SERVER_URL == undefined) {
     protocol.handle("app", (request) => {
       // 読み取り先のファイルがインストールディレクトリ内であることを確認する
       // ref: https://www.electronjs.org/ja/docs/latest/api/protocol#protocolhandlescheme-handler

src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_APP_NAME: string;
   readonly VITE_APP_VERSION: string;
   readonly VITE_DEFAULT_ENGINE_INFOS: string;
+  readonly VITE_DEV_SERVER_URL: string | undefined;
   readonly VITE_OFFICIAL_WEBSITE_URL: string;
   readonly VITE_LATEST_UPDATE_INFOS_URL: string;
   readonly VITE_GTM_CONTAINER_ID: string;

tests/e2e/electron/example.spec.ts

@@ -44,10 +44,6 @@ test("起動したら「利用規約に関するお知らせ」が表示され
   const app = await electron.launch({
     args: ["."],
     timeout: process.env.CI ? 0 : 60000,
-    env: {
-      ...process.env,
-      VITE_DEV_SERVER_URL: "http://localhost:7357",
-    },
   });
 
   const sut = await app.firstWindow({

vite.config.mts

@@ -26,7 +26,6 @@ export default defineConfig((options) => {
     );
   }
 
-  const shouldEmitSourcemap = ["development", "test"].includes(options.mode);
   // 型を曖昧にして下の[process.platform]のエラーを回避する
   const sevenZipBinNames: Record<string, string> = {
     win32: "7za.exe",
@@ -42,9 +41,16 @@ export default defineConfig((options) => {
       ? path.join(__dirname, "build", "vendored", "7z") + path.sep
       : "") + sevenZipBinName;
   process.env.VITE_APP_VERSION = process.env.npm_package_version;
+
+  const shouldEmitSourcemap = ["development", "test"].includes(options.mode);
   const sourcemap: BuildOptions["sourcemap"] = shouldEmitSourcemap
     ? "inline"
     : false;
+
+  // ref: electronの起動をスキップしてデバッグ起動を軽くする
+  const skipLahnchElectron =
+    options.mode === "test" || process.env.SKIP_LAUNCH_ELECTRON === "1";
+
   return {
     root: path.resolve(__dirname, "src"),
     envDir: __dirname,
@@ -87,7 +93,8 @@ export default defineConfig((options) => {
             entry: "./src/backend/electron/main.ts",
             // ref: https://github.com/electron-vite/vite-plugin-electron/pull/122
             onstart: ({ startup }) => {
-              if (options.mode !== "test") {
+              console.log("main process build is complete.");
+              if (!skipLahnchElectron) {
                 void startup([".", "--no-sandbox"]);
               }
             },
@@ -103,7 +110,9 @@ export default defineConfig((options) => {
             // ref: https://electron-vite.github.io/guide/preload-not-split.html
             entry: "./src/backend/electron/preload.ts",
             onstart({ reload }) {
-              reload();
+              if (!skipLahnchElectron) {
+                reload();
+              }
             },
             vite: {
               plugins: [tsconfigPaths({ root: __dirname })],