How does parcel's HMR work exactly/Questions about parcel's HMR?

[ChristophP]

Hi, I am trying to understand how parcel's HMR is working, since it seems differ in some ways to other bundlers implementations.

The docs say this

HMR works by replacing the code for a module, and then re-evaluating it and along with all of its parents. If you need to customize this process, you can hook into it using the module.hot.accept and module.hot.dispose methods. These let you save and restore state inside the new version of the module.

Specifically, how is state preserved?
Given this redux store definition.

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
  // Can create a root reducer separately and pass that in
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => {
    const middleware = getDefaultMiddleware()
      .prepend(listenerMiddleware.middleware)
      .concat(api.middleware, sessionClipboard.middleware);

    // Conditionally add another middleware in dev
    return middleware;
  },
});

if (module.hot) {
  // replace reducer with new version
  module.hot.accept(() => {
    console.log("ACCEPT");
    store.replaceReducer(rootReducer);
  });
}

export default store;

I was first under the impression that only the accept callback will be called but given that parcel reevalueates the entire module (and thus also recreates the store) how does it manage to preserve the state? It works but I do not understand why. Does it reevalue the module but export the store from the previous module?

Would be great to have some info about the details in the docs too.

[ChristophP]

I also found that sometimes instead of hot reloading the page is reloading. When adding the callbacks in a function instead of the module top level.

// index.ts

if (module.hot) {
  module.hot.dispose(() => console.log('TOP LEVEL DISPOSE'));
  module.hot.accept(() => console.log('TOP LEVEL ACCEPT'));
}

function init() {
  if (module.hot) {
    module.hot.dispose(() => console.log('SCOPED DISPOSE'));
    module.hot.accept(() => console.log('SCOPED ACCEPT'));
  }
}

init();

When I safe and reload the page I see

TOP LEVEL DISPOSE
SCOPED DISPOSE
TOP LEVEL ACCEPT

but SCOPED ACCEPT is missing 🤷
Is this intended behavior? If so why is that?

[mischnic]

Does it really break because of the scoping, or just because there are two dispose/accept callbacks?

It should work fine. These are just regular function calls, just like addEventListener. No compile time magic

[ChristophP]

Yes, it's actually the scoping. If I only have this.

// index.ts

function init() {
  if (module.hot) {
    module.hot.accept(() => console.log('SCOPED ACCEPT'));
  }
}

init();

and save the file I get no console output. If I put this in the file

// index.ts

if (module.hot) {
  module.hot.accept(() => console.log('TOP LEVEL ACCEPT'));
}

and save the file. I get TOP LEVEL ACCEPT printed to the console.

[ChristophP]

@mischnic would you consider this a bug? If so should I open an issue for it?

[mischnic]

Here's an example for how you can preserve state between updates:

let counter = 0;
if (module.hot) {
  module.hot.dispose(function (data) {
	// called in the old module before the update. Allows you to store the state that should be preserved
    data.counter = counter;
  });
  module.hot.accept(function () {
	// called in the new module after the update. Allows you to reapply the stored state
    counter = module.hot.data.counter;
    render();
  });
}

let btn = document.querySelector("button");
btn.onclick = (e) => {
  counter++;
  render();
}
function render(){
  btn.innerText = \`Update (\${counter})\`;
}
render();

[ChristophP]

Thanks for showing. That example using module.hot.data was actually quite well explained in the docs.
I guess my question was more about, when I a module is reevaluated what gets exported the old instance (with the old state) or the new instance (with the initial state).

Example

// module-b.ts
export default const state = { counter};
setTimeout( () => { state.counter += 1 }, 1000) // increment counter each second

// module-a.ts
import state;

console.log(state)

Like would it be expected to after hot updating module-b.ts after 10 seconds to get the old instance (with count 0) or the new (one with count 9 or 10) ?