Hot Module Reload

[bsr203]

Hello,

there are flaws in HMR for react now, and probably the best way is to reload the page or the app.
see. gaearon/react-hot-boilerplate#97 (comment)
facebook/create-react-app#802

doing full page manually is bit time cumbersome and takes few seconds, using browsersync and other livereload options are bit intrusive, and wonder a better way with navigation.

one option may be to use webpack HMR, along the lines of, (not tried with navigation, but used to work with react-router)

import Root from './Root';
import routeConf from './routes';

..

function setupNav(Component) {
  const stateNavigator = new StateNavigator(routeConf);
  stateNavigator.onNavigate((oldState, state, data) => {
    .....
    ReactDOM.render(<Root
      ......
    />, rootEl);
  });

  stateNavigator.start();
}

setupNav(Root); // first time load

if (module.hot) {
  module.hot.accept('./routes', () => {
    console.warn('hot! ./routes');
    window.location.reload();
  });
  module.hot.accept(Root, () => {
    console.warn('hot! ./Root');
    const NextRoot = require('./Root').default;
    setupNav(NextRoot)
  });
}

is there a better way not to re-register the routes, but just trigger a navigation event (but new code may need to load though).
just thinking aloud, and sure you have better ideas :-)

thanks.
bsr.

ref http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app

[grahammendick]

HMR works great with Navigation. No need for those pesky reloads!

You call configure on your stateNavigator, passing in your hot-loaded States. This clears out the old States and sets up the new ones. Then you trigger a navigation passing the current state key and data so that your onNavigate handler is called with the new configuration.

import routeConf from './routes';

var stateNavigator = new StateNavigator(routeConf);

if (module.hot) {
  module.hot.accept('./routes', function() {
    stateNavigator.configure(require('./routes').default);
    var currentState = stateNavigator.stateContext.state.key;
    var currentData = stateNavigator.stateContext.includeCurrentData({});
    stateNavigator.navigate(currentState, currentData);
  });
}

[bsr203]

I can't believe it :-) it works great with the code above. Thanks a ton.