Replace module.makeHot with a decorator

[gaearon]

Currently RHL only knows about the exported classes.
If you export a function, you need to use module.makeHot API provided by the hot loader:

export default function makeComponent(whatever) {
  class Something {
    ...
  }

  if (module.makeHot) { // false in production
    Something = module.makeHot(Something);
  }

  return Something;
}

This API is overly verbose and I don't like it.
Instead, we can do some magic to make this work:

import { hotReload } from 'react-hot-loader';

export default function makeComponent(whatever) {
  class Something {
    ...
  }
  return hotReload(Something);
}

This would be an identity function in production, and RHL patcher in development. RHL would emit additional code to keep track of current module so withHotReload knows which module to attach to.

Finally, with ES7 decorators (next version of Babel will support them), we can write this as

import { hotReload } from 'react-hot-loader';

export default function makeComponent(whatever) {
  return @hotReload class Something {
    ...
  };
}

Now that we talk about Babel, there's another, much more fun option. If Babel had a transform that wraps each class declaration into a specified function, we would not need this trickery at all. What do you think @sebmck?

[sebmck]

Finally, with ES7 annotations

Just to be pedantic they're decorators and are very different from annotations. 😜

If Babel had a transform that wraps each class declaration into a specified function, we would not need this trickery at all.

This would be absolutely doable with the plugin API coming in the next major.

[gaearon]

Just to be pedantic they're decorators and are very different from annotations.

Yeah. Some recent “decorators or annotations” argument caused a brainfart in my head.

[gaearon]

Just wrote some thoughts about what I want 2.0 to become: https://medium.com/@dan_abramov/the-death-of-react-hot-loader-765fa791d7c4

cc @sebmck @milankinen @caspervonb

[gaearon]

Continued by:

• Add playground for React Hot Loader 2 react-hot-boilerplate#33
• React Hot Loader 2 #182