diff --git a/.env_example b/.env_example index ef667ea2..b1da1dd0 100644 --- a/.env_example +++ b/.env_example @@ -11,7 +11,7 @@ USE_EXTERNAL_SERVER=false # You can attach your own ComfyUI instance to the frontend dev server as well. # Run `npm run dev` in the frontend repo(https://github.com/Comfy-Org/ComfyUI_frontend) # to start a development server. -DEV_SERVER_URL=http://192.168.2.20:5173 +DEV_SERVER_URL=http://localhost:5173 # When DEV_SERVER_URL is set, whether to automatically open dev tools on app start. DEV_TOOLS_AUTO=false diff --git a/.vscode/launch.json b/.vscode/launch.json index e20dc7cd..7ea7e4be 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -2,20 +2,15 @@ "version": "0.2.0", "configurations": [ { - "name": "Debug Main Process", "type": "node", - "request": "attach", - "port": 9223, - "cwd": "${workspaceFolder}", - "outputCapture": "std", - "sourceMaps": true, - "resolveSourceMapLocations": [ - "${workspaceFolder}/src/**", - "${workspaceFolder}/.vite/**", - "!**/node_modules/**" - ], - "preLaunchTask": "Start Vite Dev Server", + "request": "launch", + "name": "Electron: Main", "autoAttachChildProcesses": true, + "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", + "windows": { + "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" + }, + "runtimeArgs": ["--remote-debugging-port=9223", "."], "env": { "ELECTRON_ENABLE_LOGGING": "true", "ELECTRON_ENABLE_STACK_DUMPING": "true", @@ -24,7 +19,16 @@ "outFiles": [ "${workspaceFolder}/.vite/**/*.js", "${workspaceFolder}/.vite/**/*.js.map" - ] + ], + "outputCapture": "std" + }, + { + "name": "Electron: Renderer", + "type": "chrome", + "request": "attach", + "port": 9223, + "webRoot": "${workspaceFolder}", + "timeout": 30000 } ] } diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 32a24ab5..669ad5f7 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -1,24 +1,82 @@ { "version": "2.0.0", "tasks": [ + // Build tasks { - "label": "Start Vite Dev Server", + "label": "Start Vite Build Watchers", + "dependsOn": ["Vite Watch - Main", "Vite Watch - Preload"], + "group": { + "kind": "build" + // "isDefault": true + } + }, + // Vite watchers + { + "label": "Vite Watch - Main", "type": "shell", - "command": "yarn start", + "command": "yarn vite build --watch", + "isBackground": true, + "problemMatcher": { + "pattern": { + "regexp": ".*" + }, + "background": { + "activeOnStart": true, + // Detect build start/stop + "beginsPattern": ".*", + "endsPattern": "^built in " + } + } + }, + { + "label": "Vite Watch - Preload", + "type": "shell", + "command": "yarn vite build --watch --config vite.preload.config.ts", "linux": { "options": { "shell": { "args": ["-ci"] } } }, "isBackground": true, "problemMatcher": { "pattern": { - "regexp": "^.*$" + "regexp": ".*" }, "background": { "activeOnStart": true, "beginsPattern": ".*", - "endsPattern": "Debugger listening on" + "endsPattern": "^built in " } } + }, + + // Terminate tasks (for automation) + { + "label": "Terminate Vite Watchers", + "dependsOn": ["Terminate Main Watcher", "Terminate Preload Watcher"], + "problemMatcher": [] + }, + { + "label": "Terminate Main Watcher", + "command": "echo ${input:terminateMainWatcher}", + "type": "shell" + }, + { + "label": "Terminate Preload Watcher", + "command": "echo ${input:terminatePreloadWatcher}", + "type": "shell" + } + ], + "inputs": [ + { + "id": "terminateMainWatcher", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "Vite Watch - Main" + }, + { + "id": "terminatePreloadWatcher", + "type": "command", + "command": "workbench.action.tasks.terminate", + "args": "Vite Watch - Preload" } ] } diff --git a/README.md b/README.md index 8a714c69..8926cac0 100644 --- a/README.md +++ b/README.md @@ -172,7 +172,7 @@ First, initialize the application resources by running `yarn make:assets`: This command will install ComfyUI and ComfyUI-Manager under `assets/`. The exact versions of each package is defined in `package.json`. -You can then run `start` to build/launch the code and a live buildserver that will automatically rebuild the code on any changes: +You can then run `start` to build and launch the app. A watcher will also be started; it will automatically rebuild the app when a source file is changed: ```bash deactivate # Deactivate your existing python env to avoid influencing the @@ -251,9 +251,11 @@ apt-get install libnss3 ### Debugger -There are helpful debug launch scripts for VSCode / Cursor under `.vscode/launch.json`. It will start the dev server as defined in `.vscode/tasks.json`. Then attach the debugger. +There are helpful debug launch scripts for VSCode / Cursor under `.vscode/launch.json`. The default launch script runs the Electron launcher in the project root and attaches the debugger. By default, the app is not built when this is used. -This can be used simply by pressing `F5` in VSCode or VSCode derivative. +The default launch script can be run by pressing `F5` in VSCode or VSCode derivative. `Ctrl + Shift + F5` restarts the app with the debugger attached. `Shift + F5` terminates the debugger and the process tree it is attached to. + +To keep the app built and up to date as you make changes, run the `Start Vite Build Watchers` build task defined in `.vscode/tasks.json`. This spawns two watcher tasks - one for the main app, and one for the preload script. These watchers will automatically rebuild the app when a source file is changed. The launch environment can be customised, e.g. add a `"linux"` section to source your `~/.profile` (and other interactive config) when debugging in linux: diff --git a/infrastructure/viteElectronAppPlugin.ts b/infrastructure/viteElectronAppPlugin.ts index d98e4b8b..76875941 100644 --- a/infrastructure/viteElectronAppPlugin.ts +++ b/infrastructure/viteElectronAppPlugin.ts @@ -1,6 +1,6 @@ import electronPath from 'electron'; import { type ChildProcess, spawn } from 'node:child_process'; -import type { PluginOption } from 'vite'; +import type { PluginOption, UserConfig } from 'vite'; /** * Loads the electron app whenever vite is loaded in watch mode. @@ -17,10 +17,14 @@ export function viteElectronAppPlugin(): PluginOption { }; let electronApp: ChildProcess | null = null; + let mode: string | undefined; return { name: 'Load Electron app in watch mode', apply: 'build', + config(config: UserConfig) { + mode = config.mode; + }, buildStart() { // Only operate in watch mode. if (this.meta.watchMode !== true || !electronApp) return; @@ -31,7 +35,7 @@ export function viteElectronAppPlugin(): PluginOption { }, closeBundle() { // Only operate in watch mode. - if (this.meta.watchMode === true) startApp(); + if (this.meta.watchMode === true && mode === 'startwatch') startApp(); }, }; } diff --git a/package.json b/package.json index b1c0d997..eb392919 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "publish:staging": "yarn run vite:compile && todesktop build --config=./todesktop.staging.json --async", "reset-install": "node scripts/resetInstall.js", "sign": "node debug/sign.js", - "start": "vite build --config vite.preload.config.ts && vite build --watch", + "start": "vite build --config vite.preload.config.ts && vite build --watch --mode startwatch", "test:e2e": "npx playwright test", "test:unit": "vitest run", "test:update-snapshots": "npx playwright test --update-snapshots", diff --git a/src/shell/terminal.ts b/src/shell/terminal.ts index 7f089f77..db594c07 100644 --- a/src/shell/terminal.ts +++ b/src/shell/terminal.ts @@ -54,9 +54,16 @@ export class Terminal { #createPty() { const window = this.window; + // node-pty hangs when debugging - fallback to winpty + // https://github.com/microsoft/node-pty/issues/490 + + // Alternativelsy, insert a 500-1000ms timeout before the connect call: + // node-pty/lib/windowsPtyAgent.js#L112 + const debugging = process.env.NODE_DEBUG === 'true'; // TODO: does this want to be a setting? const shell = getDefaultShell(); const instance = pty.spawn(shell, [], { + useConpty: !debugging, handleFlowControl: false, conptyInheritCursor: false, name: 'xterm',