From eecbe0d7690b684497b819d0c5c6b9b66c1b2e37 Mon Sep 17 00:00:00 2001 From: "youchao.liu" Date: Sun, 7 Jan 2018 01:32:03 +0800 Subject: [PATCH] Fixed development mode not work under old `react-hot-loader` --- demos/demo0-simple-transition/index.jsx | 22 ++++++++++++++++++- demos/demo1-chat-heads/index.jsx | 22 ++++++++++++++++++- demos/demo2-draggable-balls/index.jsx | 22 ++++++++++++++++++- demos/demo3-todomvc-list-transition/index.jsx | 22 ++++++++++++++++++- demos/demo4-photo-gallery/index.jsx | 22 ++++++++++++++++++- .../demo5-spring-parameters-chooser/index.jsx | 22 ++++++++++++++++++- demos/demo7-water-ripples/index.jsx | 22 ++++++++++++++++++- demos/demo8-draggable-list/index.jsx | 22 ++++++++++++++++++- package.json | 2 +- webpack.config.js | 2 +- 10 files changed, 170 insertions(+), 10 deletions(-) diff --git a/demos/demo0-simple-transition/index.jsx b/demos/demo0-simple-transition/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo0-simple-transition/index.jsx +++ b/demos/demo0-simple-transition/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo1-chat-heads/index.jsx b/demos/demo1-chat-heads/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo1-chat-heads/index.jsx +++ b/demos/demo1-chat-heads/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo2-draggable-balls/index.jsx b/demos/demo2-draggable-balls/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo2-draggable-balls/index.jsx +++ b/demos/demo2-draggable-balls/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo3-todomvc-list-transition/index.jsx b/demos/demo3-todomvc-list-transition/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo3-todomvc-list-transition/index.jsx +++ b/demos/demo3-todomvc-list-transition/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo4-photo-gallery/index.jsx b/demos/demo4-photo-gallery/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo4-photo-gallery/index.jsx +++ b/demos/demo4-photo-gallery/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo5-spring-parameters-chooser/index.jsx b/demos/demo5-spring-parameters-chooser/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo5-spring-parameters-chooser/index.jsx +++ b/demos/demo5-spring-parameters-chooser/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo7-water-ripples/index.jsx b/demos/demo7-water-ripples/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo7-water-ripples/index.jsx +++ b/demos/demo7-water-ripples/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/demos/demo8-draggable-list/index.jsx b/demos/demo8-draggable-list/index.jsx index 365c2ed2..19f66cee 100644 --- a/demos/demo8-draggable-list/index.jsx +++ b/demos/demo8-draggable-list/index.jsx @@ -1,5 +1,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Demo from './Demo'; +import { AppContainer } from 'react-hot-loader'; -ReactDOM.render(, document.querySelector('#content')); +const render = Component => { + ReactDOM.render( + + + , + document.querySelector('#content'), + ); +}; + +render(Demo); + +if (module.hot) { + module.hot.accept('./Demo.jsx', () => { + /* eslint-disable global-require */ + const nextDemo = require('./Demo'); + + render(nextDemo); + /* eslint-enable */ + }); +} diff --git a/package.json b/package.json index b8ded97f..d5a8dc3b 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "react": ">=15.5.0", "react-codemirror": ">=0.1.2", "react-dom": ">=15.5.0", - "react-hot-loader": "^1.2.8", + "react-hot-loader": "^3.1.3", "style-loader": "^0.12.4", "webpack": "^1.10.1", "webpack-dev-server": "^1.10.1" diff --git a/webpack.config.js b/webpack.config.js index cd50d321..cf01f250 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -31,12 +31,12 @@ var entry = { if (process.env.NODE_ENV === 'development') { devtool ='eval-source-map'; - loaders = ['react-hot'].concat(loaders); plugins = plugins.concat([ new webpack.HotModuleReplacementPlugin() ]); entry = Object.keys(entry).reduce(function (result, key) { result[key] = [ + 'react-hot-loader/patch', 'webpack-dev-server/client?http://0.0.0.0:' + port, 'webpack/hot/only-dev-server', entry[key]