diff --git a/.vscode/launch.template.json b/.vscode/launch.template.json index 969c53d659..483689b55b 100644 --- a/.vscode/launch.template.json +++ b/.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": [ + "/**" + ] + }, { "name": "Attach by Process ID", // .bin viteを指定するとElectronのMain Processのデバッグが可能 @@ -35,13 +55,25 @@ "/**" ], "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 } ] -} \ No newline at end of file +} diff --git a/.vscode/tasks.template.json b/.vscode/tasks.template.json new file mode 100644 index 0000000000..f79d5158ce --- /dev/null +++ b/.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\\." + } + } + } + ] +} diff --git a/README.md b/README.md index c8e5a0e8ea..ae1d1f2f6d 100644 --- a/README.md +++ b/README.md @@ -297,7 +297,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 から実行し、デバッグを可能にするタスクが有効になります。 ## ライセンス diff --git a/src/backend/electron/ipc.ts b/src/backend/electron/ipc.ts index 588af9de98..02df0c6032 100644 --- a/src/backend/electron/ipc.ts +++ b/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:"; diff --git a/src/backend/electron/main.ts b/src/backend/electron/main.ts index 42a908ecca..57bd91b9f9 100644 --- a/src/backend/electron/main.ts +++ b/src/backend/electron/main.ts @@ -145,7 +145,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"); @@ -280,7 +280,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 diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 2112976e79..c7fbf04555 100644 --- a/src/vite-env.d.ts +++ b/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; diff --git a/tests/e2e/electron/example.spec.ts b/tests/e2e/electron/example.spec.ts index 56fb7733cf..9829fc75c0 100644 --- a/tests/e2e/electron/example.spec.ts +++ b/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({ diff --git a/vite.config.mts b/vite.config.mts index 69cf4cc135..123886b699 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -26,7 +26,6 @@ export default defineConfig((options) => { ); } - const shouldEmitSourcemap = ["development", "test"].includes(options.mode); // 型を曖昧にして下の[process.platform]のエラーを回避する const sevenZipBinNames: Record = { 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 })],