Hot Reload & HMR in JavaScript
One of the original goals of Bikbok, my tiny modular build system, was to have a simple way to swap out JavaScript modules at runtime when their source files change (known as Hot Module Replacement, or HMR). This is already a popular feature in build tools like Vite, but I wanted something lightweight and framework-agnostic.
Another goal of this project was to be able to easily hook into the hot reloading process for non-JavaScript assets as well, such as WebGPU shaders, texture assets, and so on. This has been extremely useful in my WebGPU and game development projects, where it allows me to quickly iterate without losing the current state.
During development, I had to solve some interesting challenges around injecting the hot-reloading logic:
- When and how should hot-reloading logic be injected into the code? I ended up with a module for my build-tool Bikbok that intercepts scripts served by the dev server.
- How can module imports by parsed and replace at runtime? I experimented with many different approaches, including some interesting uses of the Node.js V8 module, but ultimately settled on parsing Regular Expressions.
- How can breakpoint locations and stack traces be preserved when modules are swapped out? I ended up implementing a simple source map generator.
I’m currently working on a revised version of the library and blog post about the whole process.