Hot Module Replacement API manuell ansprechen

Problem

Frontend Developer kennen Hot Module Replacement (HMR) im Zusammenhang mit diversen Frameworks, wie z. B. React. Die Idee ist simpel: Man benutzt einen Entwicklungs-Server, ändert Code und ohne, dass die Webseite neu geladen werden muss (und somit State verloren geht), aktualisiert sich die Logik. Dies geschieht für die populären Frameworks automagisch.

Doch es gibt auch die Möglichkeit, HMR manuell anzusteuern. Es existiert zwar noch keine Standardisierte API, allerdings sind die Unterschiede der Dev-Server relativ gering, wahrscheinlich weil sich die meisten am Platzhirsch webpack orientieren.

Lösung

Die wichtigsten Funktionen

// Accept updates
module.hot.accept(...)
// Reject updates
module.hot.decline(...)
// Tear-down and transfer of data
module.hot.dispose((data) => { ... })

Vereinfachtes Beispiel

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 });
  }
}

Wichtig dabei zu bedenken:
Sobald Datei A ein Update akzeptiert, bekommt Datei B, welche A importiert, die Aktualisierung nicht mehr mit. Wichtig ist hierbei natürlich zu bedenken, dass Datei B in dem Fall vielleicht einen Wert importiert hat, der nach dem Update eine andere Instanz ist. Eine neue Datei C könnte dann schon den neuen Wert erhalten haben, während Datei B noch den alten hat. Um dieses Problem muss man sich nun selbst kümmern.

Real-Life Einsatzzwecke:
Warum will man so etwas machen? Eventuell gibt es keinen Out-of-the-Box-Support für das UI-Framework, das man nutzen möchte. Oder man hat ein Szenario, das nicht mit klassischen UI-Frameworks abzubilden ist.
In meinem Fall schrieb ich an einem Videospiel. Dafür habe ich ein Dependency-Injection-Framework geschrieben, bei dem Dateien ihre Services global registrieren (und aktualisieren) können. Das DI-Framework sorgt dann dafür, dass im Dev-Server nur Proxies der Services zurückgeliefert werden und somit die Referenz auf die Serviceinstanz im Hintergrund ausgetauscht werden kann, ohne dabei den State zu verlieren.