		@@ -14,7 +14,7 @@ /** @jsx React.DOM */
		componentWillMount: function () {
		window.setInterval(this.incrementNumber, 1000);
		this._intervalHandle = window.setInterval(this.incrementNumber, 1000);
		},

		componentWillUnmount: function () {
		window.clearInterval(this.incrementNumber);
		window.clearInterval(this._intervalHandle);
		window.alert('Unmounting parent');
		@@ -21,0 +21,0 @@ },

example/b.jsx

		@@ -11,2 +11,4 @@ /** @jsx React.DOM */
		<img src='http://facebook.github.io/react/img/logo_og.png' width='200' />
		<br />
		<C />
		</div>
		@@ -21,2 +23,8 @@ );

		var C = React.createClass({
		render: function () {
		return <span>This should also work for multiple components in the same file.</span>;
		}
		});

		module.exports = B;

example/webpack.config.js

		@@ -18,5 +18,5 @@ var path = require('path');
		loaders: [
		{ test: /\.jsx$/, loaders: ['react-hot', 'jsx-loader'] }
		{ test: /\.jsx$/, loaders: ['react-hot', 'jsx'] }
		]
		}
		};

index.js

		@@ -15,17 +15,20 @@ var path = require('path'),
		return [
		'var React = require("react")',
		'var hot = require(' + JSON.stringify(require.resolve('./hot')) + ')(React);',
		'var notify = require(' + JSON.stringify(require.resolve('./notify')) + ')(' + JSON.stringify(query.notify) + ');',
		'module.exports = require(' + JSON.stringify(patchedModuleRequest) + ')(hot.createClass);',
		'if (module.hot) {',
		'var React = require("react");',
		'var notifier = require(' + JSON.stringify(require.resolve('./makeNotifier')) + ')(' + JSON.stringify(originalFilename) + ', ' + JSON.stringify(query.notify) + ');',
		'var moduleUpdater = require(' + JSON.stringify(require.resolve('./makeModuleUpdater')) + ')(' + JSON.stringify(originalFilename) + ', React);',

		'module.exports = require(' + JSON.stringify(patchedModuleRequest) + ')(moduleUpdater.createClass);',

		'if (module.hot && moduleUpdater.canUpdateModule() && React.isValidClass(module.exports)) {',
		' module.hot.accept(' + JSON.stringify(patchedModuleRequest) + ', function () {',
		' try {',
		' module.exports = require(' + JSON.stringify(patchedModuleRequest) + ')(hot.updateClass);',
		' notify.success(' + JSON.stringify(originalFilename) + ')',
		' require(' + JSON.stringify(patchedModuleRequest) + ')(moduleUpdater.updateClass);',
		' moduleUpdater.updateMountedInstances();',
		' notifier.handleSuccess()',
		' } catch (err) {',
		' notify.failure(' + JSON.stringify(originalFilename) + ', err)',
		' notifier.handleFailure(err)',
		' }',
		' });',
		'}',
		'}'
		].join('\n');
		};

package.json

		{
		"name": "react-hot-loader",
		"version": "0.1.11",
		"version": "0.2.0",
		"description": "Webpack loader that enables live-editing React components without unmounting or losing their state",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -9,2 +9,12 @@ # react-hot-loader

		## Installation

		`npm install react-hot-loader`

		## Demo

		### [Real Project Video Demo](https://vimeo.com/100010922)

		### Bundled Example

		![](http://f.cl.ly/items/0d0P3u2T0f2O163K3m1B/2014-07-14%2014_09_02.gif)
		@@ -14,6 +24,2 @@

		## Installation

		`npm install react-hot-loader`

		## Usage
		@@ -41,2 +47,8 @@

		### 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 `displayName`s are different.

		### Options
		@@ -43,0 +55,0 @@

replaceCreateClass.js

		module.exports = function (source) {
		this.cacheable && this.cacheable();
		return [
		'module.exports = function replaceCreateClass(createHotClass) {',
		source.replace('React.createClass', 'createHotClass'),
		'module.exports = function replaceCreateClass(createClassProxy) {',
		source.replace(/React\.createClass/g, 'createClassProxy'),
		' var Component = module.exports;',
		@@ -7,0 +7,0 @@ ' module.exports = replaceCreateClass;',

hot.js

notify.js

react-hot-loader - npm Package Compare versions

New alerts