JSPM

react-hot-loader

1.0.0-alpha
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 892569
  • Score
    100M100P100Q179038F
  • License MIT

Webpack loader that enables live-editing React components without unmounting or losing their state

Package Exports

  • react-hot-loader
  • react-hot-loader/makeIdentitySourceMap
  • react-hot-loader/package
  • react-hot-loader/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hot-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-hot-loader

This is a stable for daily use in development implementation of React live code editing.

Hate reading? Use react-hot-boilerplate for your next ReactJS project.

Installation

npm install react-hot-loader

Usage

Read the walkthrough!

Seriously! It covers:

  • porting a project to use Webpack;
  • enabling Hot Module Replacement;
  • integrating react-hot-loader.

Also check out coffee-react-quickstart for an integration example with Gulp and CoffeeScript.

Exceptions

Hot reload is disabled for modules that contain no React.createClass calls and/or don't export a valid React class. For example, in the sample project, app.jsx doesn't get live updates because it is assumed to have side-effects.

Several components in one file will work as long as their displayNames are different.

Source Maps

If you use devtool: 'source-map' (or its equivalent), source maps will be emitted to hide hot reloading code.

This also works when previous loader emits its own source maps.

Running Example

npm install
npm start
open http://localhost:8080/webpack-dev-server/bundle

Then edit example/a.jsx and example/b.jsx. Your changes should be displayed live, without unmounting components or destroying their state.

Implementation Notes

Currently, it keeps a list of mounted instances and updates their prototypes when an update comes in.

A better approach may be to make monkeypatch createClass to return a proxy object as suggested by Pete Hunt:

The problem is that references to component descriptors could be stored in any number of places. What we could do is wrap all components in "proxy" components which look up the "real" component in some mapping

Changelog

0.5.0

0.4.5

  • Collapse all hot loader code in one line so it doesn't obscure beginning of file.

0.4.4

  • Errors occuring in module definition (such as ReferenceError) should not disable further reloading (fixes #29)

0.4.3

  • Support lowercase react reference name and usage with ES6 classes (createClass(MyComponent.prototype)) via #27

0.4.2

  • Catch errors in modules and log them instead of reloading (fixes #21)

0.4.1

0.4.0

  • Ignore files that contain no createClass calls (fixes #17)
  • Remove the need for pitch loader (fixes #19)
  • Improve performance by only using one loader instead of two
  • Now that performance is acceptable, remove desktop notifications and notify option
  • It is now recommended that you use devtool: 'eval' because it's much faster and has no downsides anymore

0.3.1

  • Avoid warnings on old browsers with missing Notification API
  • Errors don't cause page reload anymore

0.3.0

  • Use React 0.11

License

MIT (http://www.opensource.org/licenses/mit-license.php)