hot-reload-api.md

Hot Reload API

Self-accepting modules

import { setName } from './some-util';
import { hot } from 'reboost/hot';

export const name = 'Some name';

setName(name);

if (hot) { // Code will be stripped out when bundled using a bundler
  hot.accept((updatedMod) => {
    // Called when the module itself updates
    // `updatedMod` is the updated instance of the module

    // Do some updates
    setName(updatedMod.name);
  });

  hot.dispose((data) => {
    // Called before `hot.accept` callback
    // You can do cleanups here
    // Assign properties to the `data` to pass the data to the
    // module which being updated
  });
}

Accepting other modules

import { name } from './some-module'; // Actual code may differ, this is just an example
import { setName, resetName } from './another-module';
import { hot } from 'reboost/hot';

setName(name);

if (hot) {
  hot.accept('./some-module', (updatedMod) => {
    // Called when `./some-module` updates
    // `updatedMod` is the updated instance of the module

    // Do some updates
    setName(updatedMod.name);
  });

  hot.dispose('./some-module', () => {
    // Called before `hot.accept` function
    // You can do cleanups here, like so
    resetName();
  });
}

Declining Hot Reload updates

import { hot } from 'reboost/hot';

if (hot) {
  // `hot.decline` marks this module as not Hot Reload-able
  // Even if another module accepts this module, it will not trigger any
  // Hot Reload updates. Whenever this module is updated (doing modification and saving it)
  // it will do a full page reload no matter what

  // Decline the module itself
  hot.decline();
  // or decline other modules
  hot.decline('./someDep.js');
}

Canceling ongoing Hot Reload update

import { hot } from 'reboost/hot';

if (hot) {
  hot.accept(() => {
    // You can cancel an ongoing Hot Reload update by calling `hot.invalidate`
    // You can use it to cancel updates conditionally
    if (someCondition) {
      hot.invalidate();
    }
  });
}

Passing data to the module which is being updated

// main.js
import any from 'dep.js';
import { hot } from 'reboost/hot';

if (hot) {
  hot.dispose('./dep.js', (data) => {
    // Add properties to the `data` object, it will be passed to the module
    // which is being updated (in this case, using the `dispose` function)
    data.VALUE = 'Hi, there';
  });
}

// dep.js
import { hot } from 'reboost/hot';

if (hot) {
  console.log(hot.data);
  /*
    `hot.data` would be undefined when this module (`dep.js`) is being imported for the first time

    But when this module is accepted by any module and updated using Hot Reload
    `hot.data` would be the data which is passed from the `dispose` function
    in our case `hot.data` would be `{ VALUE: 'Hi, there' }`
   */
}

Getting ID of a module

import { hot } from 'reboost/hot';

if (hot) {
  hot.id // ID of the module where `hot` is imported
  // You can use it as a key to store module specific data
  // on some global object
}

Using a custom reload mechanism

// By default, Reboost uses the native `location.reload` function
// to reload the page. But you can change it by assigning `reload` property
// to the `Reboost` object of global `self` object
self.Reboost.reload = () => {
  // Do your things to reload the page
  // like asking the user if they want to reload the page or not
}