Allow --summary to work in watch for tooling

[connor4312]

In VS Code, task problem matchers are used to match against output and detect the state of the compilation.

A common pattern is to use a watch-mode compiler, like webpack --watch or tsc --watch, as a background task. In addition to their usefulness as standalone tasks the user can run, these can also be used in debugging to, for instance, wait for compilation to be complete before running or restarting a program.

esbuild's --watch mode is silent, and while it's usually super fast I ran into some cases where I would make a change and hit "debug" (which triggers a save) and the program would launch before the bundle was completely ready to go.

It would be great if there was a way to have esbuild output more information for tooling in watch mode to know when it starting compiling, when it finishes, and when it errors (errors are already detectable). The --summary flag in normal compilation does this, so making it work in watch mode could be a convenient way to do this without adding more knobs or api.

[evanw]

It should be easy to do this with esbuild's build API. You can use onRebuild to know when a rebuild happens. More documentation here: https://esbuild.github.io/api/#watch.

[connor4312]

That would require everyone who uses esbuild project and wants to use tasks to use the API to run their builds (and probably some package so that outputs would be standard) rather than the CLI. It'd be easy but less convenient for users -- more setup on their end.

[jasikpark]

Would it be possible to print something else than the bubble animation? I usually run esbuild concurrently with other tasks in the same terminal via https://www.npmjs.com/package/concurrently and a --summary or verbose output would be very helpful as a command line option rather than the 3 dots that overwrite the output of other commands...

[evanw]

The next release will have more structured watch mode output, although it is not exactly the same as --summary (see the release notes for details). Closing this as I believe it will be sufficient to address this.

[connor4312]

Thanks, I have it working nicely with the output you added 🙂 https://marketplace.visualstudio.com/items?itemName=connor4312.esbuild-problem-matchers

[stolinski]

@connor4312 Did you have to add anything special to your esbuild watch code?

[connor4312]

nope, just --watch

[stolinski]

nope, just --watch

Interesting. I've downloaded your extension. Using node build.js

    await esbuild.build({
      ...buildDefaults,
      incremental: true,
      watch: true,
    })

To build and VSCode doesn't seem to move past the task. ie, it starts the task and then hangs and never moves on to the executable.

I wonder if --watch is doing something different than watch: true.

[connor4312]

What does your stdout/err look like when running that?

[stolinski]

Just triggered failing build

> rm -rf ./dist/index.js; node ./scripts/buildWatch.js --trace-warnings && nodemon --trace-warnings ./dist/index.js --config ./scripts/serveWatch.json

 > src/config/graphqlAPI/startAPI.ts:13:23: error: Expected "from" but found "fro"
    13 │ import { Environment } fro
       ╵                        ~~~

[stolinski]

No output when files changed and no errors.

From looking at your package, I'm assuming your's outputs

[watch] build started
[watch] build finished

[connor4312]

Hm, yea. In the CLI on the latest esbuild, even in an error case we have those started/finished bounds, e.g.

I haven't used the programmatic API much, could experiment with it later. PRs welcome as well.

[stolinski]

Will def do. I'll plug on this with the watch property function and submit a pr with the relevant info. Thank you @connor4312 great timing.