upgrade to react-hot-loader from deprecated react-transform-hmr

Author: mrtnbroder

.eslintrc

@@ -14,6 +14,7 @@
   "globals": {
     "__DEV__": true,
     "__BROWSER__": true,
+    "__INITIAL_STATE__": true,
     "google": true,
     "jest": true
   },

package.json

@@ -25,17 +25,15 @@
     "react-dom": "^15.3.1",
     "react-redux": "^4.4.5",
     "react-router": "^2.7.0",
-    "redux": "^3.5.2",
-    "redux-actions": "^0.11.0",
+    "redux": "^3.6.0",
+    "redux-actions": "^0.12.0",
     "redux-promise-middleware": "^4.0.0"
   },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
+    "autoprefixer": "^6.4.1",
     "babel-core": "^6.14.0",
     "babel-eslint": "^6.1.2",
-    "babel-jest": "^14.1.0",
     "babel-loader": "^6.2.5",
-    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-syntax-trailing-function-commas": "^6.13.0",
     "babel-plugin-transform-class-constructor-call": "^6.8.0",
     "babel-plugin-transform-class-properties": "^6.11.5",
@@ -44,15 +42,16 @@
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
-    "browser-sync": "^2.14.3",
-    "css-loader": "^0.24.0",
+    "browser-sync": "^2.15.0",
+    "css-loader": "^0.25.0",
     "eslint": "^3.4.0",
     "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "kneden": "^1.0.5",
     "lodash.merge": "^4.6.0",
-    "postcss-loader": "^0.11.0",
+    "postcss-loader": "^0.11.1",
     "react-a11y": "^0.3.3",
+    "react-hot-loader": "^3.0.0-beta.3",
     "style-loader": "^0.13.1",
     "webpack": "^2.1.0-beta.21",
     "webpack-hot-middleware": "^2.12.2",

scripts/start.js

@@ -27,26 +27,9 @@ const onPluginDone = (b) => new Promise((accept) => b.plugin('done', accept))
 const createHotMiddlewares = (compilers) => compilers.filter(onlyBrowserCompiler).map(webpackHotMiddleware)
 const onlyBrowserCompiler = (compiler) => onlyBrowser(compiler.options)
 const onlyBrowser = (x) => x.target === 'web'
-const onlyBabel = (x) => x.loader === 'babel'
-const addTransformQuery = () => {
-  const query = {
-    plugins: [
-      ['react-transform', {
-        transforms: [{
-          transform: 'react-transform-hmr',
-          imports: ['react'],
-          locals: ['module']
-        }]
-      }]
-    ]
-  }
-
-  return (x) => x.query = query
-}
 const addHotMiddleware = (c) => {
-  c.entry[config.appName] = ['webpack-hot-middleware/client', c.entry[config.appName]]
+  c.entry[config.appName] = ['react-hot-loader/patch', 'webpack-hot-middleware/client', c.entry[config.appName]]
   c.plugins.push(new webpack.HotModuleReplacementPlugin())
-  c.module.loaders.filter(onlyBabel).forEach(addTransformQuery())
 }
 const startBrowserSync = (middlewares, bundler, restartServer) =>
   () => new Promise((accept) => {

src/Application/components/Authorized/components/Dashboard/view.jsx

@@ -3,10 +3,9 @@ import React, { PropTypes as PT } from 'react'
 import { Link } from 'react-router'
 import { actions } from './update'
 
-export const view = ({ model, children, dispatch, ...props }) => {
-  console.log('dashboard', model)
+export const view = ({ model, children, dispatch }) => {
   return (
-    <div {...props}>
+    <div>
       <h2>Dashboard</h2>
       <button onClick={() => dispatch(actions.modify({ forename: 'Hans', lastname: 'Jürgen' }))}>Change Name</button>
       <Link to='/authorized/profile'>Profile</Link>

src/Application/components/Login/view.jsx

@@ -3,9 +3,9 @@ import React, { PropTypes as PT } from 'react'
 import { Link } from 'react-router'
 import { Actions } from './update'
 
-export const view = ({ children, dispatch, ...props }) => {
+export const view = ({ children, dispatch }) => {
   return (
-    <div {...props}>
+    <div>
       <h2>Login</h2>
       <button onClick={() => dispatch(Actions.update({ username: 'Harald', password: 'Francois' }))}>Login</button>
       <Link to='/authorized'>Authorized</Link>

src/client/index.jsx

@@ -1,5 +1,6 @@
 
 import { Router, browserHistory } from 'react-router/es6'
+import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
 import React from 'react'
 import configureStore from 'configureStore'
@@ -9,26 +10,27 @@ import { route as routes } from '../Application'
 
 if (__DEV__) {
   const Perf = require('react/lib/ReactPerf')
-  // const a11y = require('react-a11y')
 
   // Export React and Performance Utility for debugging
   window.React = React
   window.Perf = Perf
-  // a11y(React)
 }
 
-const main = () => {
-  const store = configureStore(reducers)(/*__INITIAL_STATE__*/)
-  const rootEl = document.getElementById('app')
+const store = configureStore(reducers)(__INITIAL_STATE__)
+const rootEl = document.getElementById('app')
 
+const main = () => {
   render(
-    <Provider store={store}>
-      <Router history={browserHistory}>
-        {routes}
-      </Router>
-    </Provider>,
+    <AppContainer>
+      <Provider store={store}>
+        <Router history={browserHistory} routes={routes}/>
+      </Provider>
+    </AppContainer>,
     rootEl
   )
 }
 
+if (module.hot)
+  module.hot.accept(main)
+
 main()

src/shared/configureStore/index.js

@@ -1,6 +1,6 @@
 
+import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
 import promiseMiddleware from 'redux-promise-middleware'
-import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
 
 export default (reducers = {}) => (initalState = {}) => {
   const rootReducer = combineReducers(reducers)
@@ -10,13 +10,5 @@ export default (reducers = {}) => (initalState = {}) => {
     __BROWSER__ ? window.devToolsExtension ? window.devToolsExtension() : (f) => f : (f) => f
   )(createStore)(rootReducer, initalState)
 
-  if (module.hot)
-    // Enable Webpack hot module replacement for reducers
-    module.hot.accept('../modules', () => {
-      const nextReducer = require('../modules')
-
-      store.replaceReducer(nextReducer)
-    })
-
   return store
 }

webpack/webpack.config.js

@@ -33,7 +33,8 @@ const webpackConfig = {
         test: /\.(js|jsx)$/,
         loader: 'babel',
         query: {
-          cacheDirectory: true
+          cacheDirectory: true,
+          plugins: DEBUG ? ['react-hot-loader/babel'] : []
         },
         exclude: /node_modules/,
         include: path.resolve('.')