Eleventy: async or sync beforeBuild/beforeWatch event handlers that are guaranteed to finish before reloading the browser

[cj81499]

See here: https://github.com/11ty/11ty-website/pull/562#issuecomment-647008047

[gobeli]

From my understanding this is currently not possible, since eleventy uses the native node EventEmitter internally, which is not able to await the emission of events:

https://github.com/11ty/eleventy/blob/29939d6d89acb04a64d7c24697f4de08737db8f5/src/UserConfig.js#L21

But I think this could be changed quite easily by using an EventEmitter which is capable of this.

[valtlai]

If the beforeBuild event is guaranteed to finish before starting the build, there should be another event that is guaranteed to finish before calling afterBuild but does allow Eleventy to start building immediately. Maybe it would be called build.

This way, the assets would be processed by the build event in parallel with the templates. The afterBuild event would be ran after both the assets and templates are fully processed.

[cj81499]

@valtlai Perhaps duringBuild would be a clearer name?

Another potentially interesting idea would be a way to "tag" event handler functions with a start time and end time (beforeBuild, startBuild, endBuild, afterBuild, (and any other interesting times during the build process, although I can't think of any). I'd be worried about such a solution being overkill (not useful), and confusing to work with.

[valtlai]

@cj81499 Maybe it would. I chose build just because you can’t say on during build (like in cfg.on("duringBuild", ...), but maybe that doesn’t really matter. I don’t have a strong opinion on the name.

Would startBuild be the same as duringBuild (or whatever name it would get)? If so, wouldn’t endBuild and afterBuild be the same (so we don’t need endBuild)?

[Ryuno-Ki]

I feel like this should become a GitHub discussion thread until we get more into technical bits …

[cj81499]

@valtlai In my mind, startBuild is an instant in time (an event), while a build describes a duration of time, which is why I still prefer startBuild.

beforeBuild would be the first thing eleventy does. Even before it even reads any files.

startBuild would be immediately before eleventy begins to read files.

We need beforeBuild and startBuild to be different so we can do things to files before eleventy reads them (ex: compress images).

endBuild would be immediately after eleventy finishes writing the last file.

afterBuild would be the last thing eleventy does. It would happen just before exiting/reloading the browser.

We need endBuild and afterBuild to be different so we can do things to files after eleventy has written them (ex: add a copyright comment).

I admit that both of my examples aren't great (since both are doable with transforms), but there might be other use cases that I can't think of right now.

It'd also be nice to have beforeBuild and afterBuild to do something alongside (but completely separate from) eleventy, such as processing sass, bundling javascript (via Webpack, Rollup, or Parcel), etc.

Again, I'm not sure this would be useful. It might be overkill to allow for this level of precision in "scheduling" an eventHandler.

The API could be something like: eleventyConfig.between(startEventName, endEventName, eventHandler)

Eleventy would call the eventHandler at startEvent and await that the promise the eventHandler returned at the endEvent.

@Ryuno-Ki I'm not sure how GitHub discussions work, but that seems reasonable enough to me.

[Ryuno-Ki]

I don't like it, but I could also imagine RxJS being of use here, since it has a nice abstraction of event streams.
But it adds a lot of complexity (in my opinion).

[zachleat]

I believe https://github.com/11ty/eleventy/pull/1363 fixes this and will ship with 1.0. That code is on master now if you want to test