consider separating the "rebuild" and "dirty monitoring" concepts

[ianstormtaylor]

Hello, thanks for this great tool!

I'm running into something similar to what people are discussing in #805 — trying to get some of the functionality from serve and watch at the same time — specifically being able to build in memory, have it served on a throwaway port, but also be notified when input files change. (I'm doing this inside an Electron app built for creative coding / generative art.)

I understand that watch and serve aren't compatible, because they rebuild at different times, so enabling both would end up with duplicate work. But I think there might be a slight tweak to the abstraction, which allows for the idea of "monitoring dirty files" without being tightly coupled to rebuilding (as it is in watch mode).

For example (in pseudocode) if there was an onDirty callback, you could actually define watch mode yourself as:

let result = await build({
  incremental: true,
  onDirty() {
    result.rebuild()
  }
})

But this would also allow for using serve and monitoring files, but without the double rebuilding from watch:

let result  = await serve({
  onDirty() {
    // invoke whatever you want. in my case it's some logic to
    // notify existing canvases that they should reload the sketch
  }
})

What do you think? I might be missing something, but being able to tap into Esbuild's nice and simple logic for knowing when input files change would be really valuable even when using serve.

[ianstormtaylor]

Bit more context…

I know that the recommendation so far has been that "live reload" is outside the scope of Esbuild. And I did try to get a better live reload setup with an external library, but all the ones I found had frustrating issues—haven't been updated in years, don't have Node API equivalents, don't return server handles for graceful shutdown, have hard-coded ports… they all made the code way harder to reason about.

As a hack (in case anyone else wants this) I've just resorted to running both build and serve at the same time, with build not writing but just watching, and serve doing the serving. (And you can leave off the more expensive things like bundle and sourcemap from the build call since it's not being used.) Something like:

// Start build to watch for reloading.
let build = await Esbuild.build({
  entryPoints: [file],
  outdir: dir,
  write: false,
  watch: {
    onRebuild: (error) => {
      // your reloading logic here…
    },
  },
})

// Start serve to serve the bundled files.
let serve = await Esbuild.serve(
  { servedir: dir },
  {
    entryPoints: [file],
    outdir: dir,
    bundle: true,
    sourcemap: true,
  }
)

But I'd love to see it available with just serve out of the box.