jambit TP 155 Icon

Address Hot Module Replacement API manually

Problem

Frontend developers are familiar with Hot Module Replacement (HMR) in the context of various frameworks, such as React. The idea is simple: You use a development server, change code, and without having to reload the web page (which means losing state), the logic updates itself. This happens automagically for popular frameworks.

But there is also the possibility to control HMR manually. There is no standardized API yet, but the differences between the dev servers are relatively small, probably because most follow the top dog webpack.

Solution

Most important functions
// Accept updates
module.hot.accept(...)
// Reject updates
module.hot.decline(...)
// Tear-down and transfer of data
module.hot.dispose((data) => { ... })
Simplified example
const value = 'constant';

export default value;

// module.hot is only present in dev server
if (module.hot) {
  // Accept updates
  module.hot.accept();

  // Transfer of information
  // to the updated version:
  module.hot.dispose((data) => {
    data.value = value;
  });

  // Was information transferred
  // from the old version?
  const oldValue = module.hot.data?.value;
  if (oldValue) {
    console.log("On-Update", {
      oldValue,
      value
    });
  } else {
    console.log("On-Create", { value });
  }
}

Important to keep in mind:

As soon as file A accepts an update, file B, which imports A, no longer receives the update. Of course, it is important to remember that file B may have imported a value that is a different instance after the update. A new file C could then already have received the new value, while file B still has the old one. Well, you have to take care of this problem yourself.

Real-life purposes:

Why would you want to do this? Maybe there is no out-of-the-box support for the UI framework you want to use. Or you have a scenario that can't be mapped with classic UI frameworks.

In my case, I was developing a video game. For that, I wrote a dependency injection framework where files can register (and update) their services globally. Here, the DI framework ensures that only proxies of the services are returned in the dev server and thus the reference to the service instance can be exchanged in the background without losing the state.

jambit-ToiletPaper-155-address-Hot-Module-Replacement-API-manually

Further Aspects

---

Author: Santo Pfingsten / Senior Software Architect / Office Leipzig

Cookie Settings

This website uses cookies to personalize content and ads, provide social media features, and analyze website traffic. In addition, information about your use of the website is shared with social media, advertising, and analytics partners. These partners may merge the information with other data that you have provided to them or that they have collected from you using the services.

For more information, please refer to our privacy policy. There you can also change your cookie settings later on.

contact icon

Contact us now