implement new react-hot-loader@next

fintory · Sep 12, 2017 · a4e2e88 · a4e2e88
1 parent 7a726e9
commit a4e2e88
Show file tree

Hide file tree

Showing 8 changed files with 486 additions and 177 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,18 @@
 {
   "presets": ["es2015", "stage-0", "react", "flow"],
-  "plugins": ["transform-runtime"]
+  "plugins": [
+    "react-hot-loader/babel",
+    "transform-decorators-legacy",
+    "transform-runtime",
+    "transform-object-assign",
+    "lodash"
+  ],
+  "env": {
+    "production": {
+      "plugins": [
+        "transform-remove-console",
+        "transform-react-remove-prop-types"
+      ]
+    }
+  }
 }
diff --git a/client/App.js b/client/App.js
@@ -0,0 +1,20 @@
+
+import React from 'react';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import { Route } from 'react-router-dom';
+
+import Root from './pages';
+
+import store from './modules/store';
+import history from './modules/history';
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <ConnectedRouter history={history}>
+        <Route component={Root} />
+      </ConnectedRouter>
+    </Provider>
+  );
+}
diff --git a/client/index.js b/client/index.js
@@ -1,13 +1,12 @@
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
 import initializeFastClick from 'react-fastclick';
-import { ConnectedRouter } from 'react-router-redux';
 
-import App from './pages';
-import store from './modules/store';
-import history from './modules/history';
+import App from './App';
+
+console.info('Application running in', process.env.NODE_ENV, 'mode.'); // eslint-disable-line
 
 /*
  * Add `react-fastclick` so mobile devices don't have any problems with to slow
@@ -18,11 +17,24 @@ initializeFastClick();
 /*
  * Render the React Pages into the actual DOM
  */
-ReactDOM.render(
-  <Provider store={store}>
-    <ConnectedRouter history={history}>
-      <App />
-    </ConnectedRouter>
-  </Provider>,
+render(
+  <AppContainer>
+    <App />
+  </AppContainer>,
   document.getElementById('root'),
 );
+
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    // If you use Webpack 2 in ES modules mode, you can
+    // use <App /> here rather than require() a <NextApp />.
+    const NextApp = require('./App').default; // eslint-disable-line
+
+    render(
+      <AppContainer>
+        <NextApp />
+      </AppContainer>,
+      document.getElementById('root'),
+    );
+  });
+}
diff --git a/config/webpack.config.common.js b/config/webpack.config.common.js
@@ -4,16 +4,13 @@ import paths from './paths';
 
 const { NODE_ENV } = process.env;
 
-const babelLoaders = (NODE_ENV === 'development')
-  ? ['react-hot-loader', 'babel-loader']
-  : ['babel-loader'];
-
 module.exports = {
   context: paths.appBuild,
   entry: {
     jsx: [
+      NODE_ENV === 'development' && 'react-hot-loader/patch',
       './index.js',
-    ],
+    ].filter(entry => !!entry),
     vendor: [
       'react',
       'react-dom',
@@ -38,7 +35,7 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules|blueprints/,
-        use: babelLoaders,
+        use: ['babel-loader'],
       },
       {
         test: /\.css$/,

diff --git a/config/webpack.config.dev.babel.js b/config/webpack.config.dev.babel.js
@@ -16,9 +16,12 @@ module.exports = {
   plugins: [
     new webpack.NamedModulesPlugin(),
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
-    new webpack.DefinePlugin(JSON.stringify({
-      'process.env.NODE_ENV': 'development',
-    })),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+      },
+      __DEVTOOLS__: true,
+    }),
     new HtmlWebpackPlugin({
       inject: true,
       template: 'index.html',

diff --git a/config/webpack.config.prod.babel.js b/config/webpack.config.prod.babel.js
@@ -9,7 +9,7 @@ module.exports = {
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }),
     new webpack.DefinePlugin(JSON.stringify({
-      'process.env.NODE_ENV': 'production',
+      'process.env': JSON.stringify({ NODE_ENV: 'production' }),
     })),
     new HtmlWebpackPlugin({
       inject: true,

diff --git a/package.json b/package.json
@@ -17,7 +17,12 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.5.2",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.0",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
+    "babel-plugin-transform-remove-console": "^6.8.5",
     "babel-plugin-transform-runtime": "^6.5.2",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-flow": "^6.23.0",
@@ -29,36 +34,32 @@
     "css-loader": "^0.28.1",
     "enzyme": "^2.8.2",
     "eslint": "^4.1.0",
-    "eslint-config-airbnb": "^15.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.0",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint-config-kreativgebiet": "^0.2.2",
+    "eslint-plugin-flowtype": "^2.34.0",
     "file-loader": "^0.11.1",
     "flow-bin": "^0.51.1",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^2.30.1",
     "img-loader": "^2.0.0",
     "ip": "^1.1.5",
     "jsdom": "^11.0.0",
     "minimist": "^1.2.0",
     "mocha": "^3.4.2",
-    "mocha-webpack": "next",
+    "mocha-webpack": "^0.7.0",
     "null-loader": "^0.1.1",
     "postcss-loader": "^2.0.5",
-    "react-hot-loader": "^1.3.0",
+    "react-hot-loader": "next",
     "react-test-renderer": "^15.5.4",
     "rucksack-css": "^1.0.0",
     "sinon": "^3.0.0",
     "style-loader": "0.18.2",
     "url-loader": "^0.5.7",
     "webpack": "^3.0.0",
-    "webpack-dev-server": "^2.4.5",
+    "webpack-dev-server": "^2.7.1",
     "webpack-hot-middleware": "^2.7.1",
     "webpack-node-externals": "^1.6.0"
   },
   "dependencies": {
     "classnames": "^2.2.3",
-    "eslint-plugin-flowtype": "^2.34.0",
     "express": "^4.15.3",
     "history": "^4.6.1",
     "immutable": "^3.8.1",
@@ -77,6 +78,7 @@
     "redux": "^3.3.1",
     "redux-thunk": "^2.1.0",
     "reselect": "^3.0.1",
-    "spin.js": "^2.3.2"
+    "spin.js": "^2.3.2",
+    "webpack-dev-middleware": "^1.12.0"
   }
 }