Inspiration

Hot-reloading has been a huge productivity boost to projects like React and other front-end tools, but with Web Assembly, it has been a challenge to enable live changes to be propagated to the browser due to a compile step from a non-JS language (eg. Go or Rust). We hoped to get it to work with zero configuration on the part of the user, via the Parcel bundler.

What it does

The project enables Web Assembly to be hot-reloaded in the browser on file change, for the Parcel bundler. In practical terms, whenever a project file changes (eg. a Rust project), the browser will automatically reflect this change without needing a page reload, theoretically allowing state to be preserved. This is a significant development improvement from the current ability of Parcel, which only shows changes on each page reload.

How we built it

We used JavaScript, WebAssembly, and Rust, in order to rewrite portions of the Parcel bundler in order to support hot-reload on file change. We also built a sample project in Rust to demonstrate this capability. A lot of work was put into analyzing how Parcel's Web Assembly build pipeline currently works, so that we could enhance it - we made parts of it asynchronous, as well as made other modifications in order to enable it to support other types of static files (SVGs, etc.) to be hot-reloaded in the future.

Challenges we ran into

Parcel's code base is massive, and due to its young age, has much less documentation than other more mature build tools. A lot of approaches we looked into simply required changing too much of the code base that wasn't originally built to support Web Assembly originally. Due to its zero-config approach, adding features often required changing a lot of internal code, so we tried to strike a balance of not rewriting too much versus adding functionality and generalizing where it made sense to.

Accomplishments that we're proud of

We got the Rust project to be hot-reloaded!!!!!!! This is the first time I've seen Web Assembly be hot-reloaded in the browser working out-of-the-box, with zero configuration beforehand on the part of the user.

What we learned

Over the course of this weekend, our team has learned a lot of the internals of how Parcel works. We've explored how the Rust compiler gets called, how bundles are hashed differently in production and development, how caching refreshes work, which processes get called on each refresh and update, and so much more. We've also learned a lot about the challenges of Web Assembly and its limits compared to other traditional assets.

What's next for WASM hot-loading for Parcel

The next step would be to be able to support other static file types, and improving incremental build performance, perhaps via more intelligent caching, and better tree traversal to hot-reload the minimal number of modules on each change.

Built With

+ 3 more
Share this project:
×

Updates