Fonctionnement de l'API HMR (Hot Module Replacement) de Vite

Publié le 23/04/2025 | Lien : https://bjornlu.com/blog/hot-module-replacement-is-easy

En général, les plugins Vite de chaque frameworks front (React, Vue, Svelte…) s’occupent entre autres de recevoir les événements HMR de Vite et de mettre à jour les composants in-place là où c’est possible. Mais c’est aussi possible d’implémenter l’HMR “à la main”, même sans framework, dans son code (là où ça fait sens.)

Cet article explique en profondeur comment cette API fonctionne. Il s’agit “simplement” d’événements avec le nouveau code en payload : chaque module peut choisir, pour lui-même ou ses dépendances, de capter ces événements (pour se mettre à jour avec le nouveau code), ou les ignorer (et éventuellement déclencher un Full Page Reload.)

L’auteur présente cet exemple :

export let data = [1, 2, 3]

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // If the `data` export is deleted or renamed
    if (!(data in newModule)) {
      // Bail out and invalidate the module
      import.meta.hot.invalidate()
    }
  })
}