reactor: better debug experience

.vscode/debug.script.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { createRequire } from 'module'
+import { build, createServer } from 'vite'
+
+const pkg = createRequire(import.meta.url)('../package.json')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+async function startDebug() {
+  const server = await createServer({ configFile: 'packages/renderer/vite.config.ts' })
+
+  await server.listen()
+
+  await build({
+    configFile: 'packages/preload/vite.config.ts',
+    build: {
+      watch: true,
+      sourcemap: true,
+    },
+    mode: 'development',
+  })
+
+  await build({
+    configFile: 'packages/main/vite.config.ts',
+    build: {
+      watch: true,
+      sourcemap: true,
+    },
+    mode: 'development',
+    plugins: [{
+      name: 'electron-preload-watcher',
+      writeBundle() {
+        server.ws.send({ type: 'full-reload' })
+      },
+    }],
+  })
+}
+
+function writeEnvLocal() {
+  const envContent = Object.entries(pkg.env).map(([key, val]) => `${key}=${val}`)
+  fs.writeFileSync(path.join(__dirname, '.env'), envContent.join('\n'))
+}
+
+// bootstrap
+writeEnvLocal()
+startDebug()

.vscode/launch.json

@@ -1,39 +1,44 @@
 {
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
+  "compounds": [
+    {
+      "name": "Debug App",
+      "preLaunchTask": "start debug.script.mjs",
+      "configurations": [
+        "Debug Main Process",
+        "Debug Renderer Process"
+      ],
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 1
+      },
+      "stopAll": true
+    }
+  ],
   "configurations": [
     {
-      "type": "node",
+      "name": "Debug Main Process",
+      "type": "pwa-node",
       "request": "launch",
-      "name": "Main(inspector)",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
-      "runtimeArgs": [
-        "--remote-debugging-port=9222",
-        "${workspaceFolder}/dist/main/index.cjs",
-      ],
-      "env": {
-        "DEBUG": "true",
-      },
       "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
       },
-      "sourceMaps": true
+      "runtimeArgs": [
+        "--remote-debugging-port=9229",
+        "${workspaceRoot}/dist/main/index.cjs"
+      ],
+      "envFile": "${workspaceFolder}/.vscode/.env"
     },
     {
-      "type": "node",
+      "name": "Debug Renderer Process",
-      "request": "launch",
+      "port": 9229,
-      "name": "Main(vite)",
+      "request": "attach",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "type": "pwa-chrome"
-      "runtimeArgs": [
-        "${workspaceFolder}/dist/main/index.cjs",
-      ],
-      "env": {
-        "VITE_DEV_SERVER_HOST": "127.0.0.1",
-        "VITE_DEV_SERVER_PORT": "3344",
-      },
-      "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
-      },
-      "sourceMaps": true
     },
   ]
-}
+}

.vscode/task.json

@@ -1,13 +0,0 @@
-{
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "debug",
-      "problemMatcher": [],
-      "label": "npm: debug",
-      "detail": "cross-env-shell NODE_ENV=debug \"npm run typecheck && node scripts/build.mjs && vite ./packages/renderer\"",
-      "group": "build"
-    }
-  ]
-}

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558 
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "start debug.script.mjs",
+      "command": "node",
+      "args": [
+        ".vscode/debug.script.mjs"
+      ],
+      "isBackground": true,
+      "problemMatcher": []
+    }
+  ]
+}

packages/main/index.ts

@@ -26,7 +26,7 @@ async function createWindow() {
     },
   })
 
-  if (app.isPackaged || process.env['DEBUG']) {
+  if (app.isPackaged) {
     win.loadFile(join(__dirname, '../renderer/index.html'))
   } else {
     // 🚧 Use ['ENV_NAME'] avoid vite:define plugin

packages/main/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       fileName: () => '[name].cjs',
     },
     minify: process.env./* from mode option */NODE_ENV === 'production',
-    sourcemap: process.env./* from mode option */NODE_ENV === 'debug',
+    sourcemap: true,
     rollupOptions: {
       external: [
         'electron',

packages/renderer/vite.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   ],
   base: './',
   build: {
-    sourcemap: process.env.NODE_ENV === 'debug',
+    sourcemap: true,
     outDir: '../../dist/renderer',
   },
   resolve: {
@@ -36,7 +36,8 @@ export default defineConfig({
     },
   },
   server: {
-    port: pkg.env.PORT,
+    host: pkg.env.VITE_DEV_SERVER_HOST,
+    port: pkg.env.VITE_DEV_SERVER_PORT,
   },
 })
 

scripts/build.mjs

@@ -1,8 +1,5 @@
 import { build } from 'vite'
 
-await build({
+await build({ configFile: 'packages/main/vite.config.ts' })
-  configFile: 'packages/main/vite.config.ts',
-  mode: process.env.NODE_ENV === 'debug' ? 'debug' : 'production'
-})
 await build({ configFile: 'packages/preload/vite.config.ts' })
 await build({ configFile: 'packages/renderer/vite.config.ts' })