Working HOT RELOAD !!

js/.babelrc

@@ -13,6 +13,9 @@
   "env": {
     "production": {
       "plugins": ["transform-react-remove-prop-types"]
+    },
+    "development": {
+      "plugins": ["react-hot-loader/babel"]
     }
   }
 }

js/package.json

@@ -109,7 +109,7 @@
     "react-addons-perf": "~15.3.2",
     "react-addons-test-utils": "~15.3.2",
     "react-dom": "~15.3.2",
-    "react-hot-loader": "~1.3.0",
+    "react-hot-loader": "~3.0.0-beta.6",
     "rucksack-css": "~0.8.6",
     "sinon": "~1.17.4",
     "sinon-as-promised": "~4.0.2",

js/src/index.js

@@ -22,17 +22,20 @@ es6Promise.polyfill();
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+
 import injectTapEventPlugin from 'react-tap-event-plugin';
 import { createHashHistory } from 'history';
-import { Redirect, Router, Route, useRouterHistory } from 'react-router';
+import { useRouterHistory } from 'react-router';
 import qs from 'querystring';
 
 import SecureApi from './secureApi';
 import ContractInstances from './contracts';
 
 import { initStore } from './redux';
-import { ContextProvider, muiTheme } from './ui';
+import ContextProvider from './ui/ContextProvider';
-import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
+import muiTheme from './ui/Theme';
+import MainApplication from './main';
 
 import { setApi } from './redux/providers/apiActions';
 
@@ -41,8 +44,6 @@ import './environment';
 import '../assets/fonts/Roboto/font.css';
 import '../assets/fonts/RobotoMono/font.css';
 
-import styles from './reset.css';
-
 injectTapEventPlugin();
 
 if (process.env.NODE_ENV === 'development') {
@@ -76,32 +77,47 @@ window.secureApi = api;
 const routerHistory = useRouterHistory(createHashHistory)({});
 
 ReactDOM.render(
-  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+  <AppContainer>
-    <Router className={ styles.reset } history={ routerHistory }>
+    <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-      <Redirect from='/' to='/accounts' />
+      <MainApplication
-      <Redirect from='/auth' to='/accounts' query={ {} } />
+        routerHistory={ routerHistory }
-      <Redirect from='/settings' to='/settings/views' />
+      />
-      <Route path='/' component={ Application }>
+    </ContextProvider>
-        <Route path='accounts' component={ Accounts } />
+  </AppContainer>,
-        <Route path='account/:address' component={ Account } />
-        <Route path='addresses' component={ Addresses } />
-        <Route path='address/:address' component={ Address } />
-        <Route path='apps' component={ Dapps } />
-        <Route path='app/:id' component={ Dapp } />
-        <Route path='contracts' component={ Contracts } />
-        <Route path='contracts/write' component={ WriteContract } />
-        <Route path='contract/:address' component={ Contract } />
-        <Route path='settings' component={ Settings }>
-          <Route path='background' component={ SettingsBackground } />
-          <Route path='proxy' component={ SettingsProxy } />
-          <Route path='views' component={ SettingsViews } />
-          <Route path='parity' component={ SettingsParity } />
-        </Route>
-        <Route path='signer' component={ Signer } />
-        <Route path='status' component={ Status } />
-        <Route path='status/:subpage' component={ Status } />
-      </Route>
-    </Router>
-  </ContextProvider>,
   document.querySelector('#container')
 );
+
+if (module.hot) {
+  // module.hot.accept('./redux', () => {
+  //   // redux store has a method replaceReducer
+  //   // const newStore = initStore(api);
+  //   console.warn('REDUX UPDATE');
+  //   // store.replaceReducer(appReducer);
+
+  //   // ReactDOM.render(
+  //   //   <AppContainer>
+  //   //     <ContextProvider api={ api } muiTheme={ muiTheme } store={ newStore }>
+  //   //       <MainApplication
+  //   //         routerHistory={ routerHistory }
+  //   //       />
+  //   //     </ContextProvider>
+  //   //   </AppContainer>,
+  //   //   document.querySelector('#container')
+  //   // );
+  // });
+
+  module.hot.accept('./main.js', () => {
+    require('./main.js');
+
+    ReactDOM.render(
+      <AppContainer>
+        <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
+          <MainApplication
+            routerHistory={ routerHistory }
+          />
+        </ContextProvider>
+      </AppContainer>,
+      document.querySelector('#container')
+    );
+  });
+}

js/src/main.js

@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { Redirect, Router, Route } from 'react-router';
+
+import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
+
+import styles from './reset.css';
+
+export default class MainApplication extends Component {
+  static propTypes = {
+    routerHistory: PropTypes.any.isRequired
+  };
+
+  render () {
+    const { routerHistory } = this.props;
+
+    return (
+      <Router className={ styles.reset } history={ routerHistory }>
+        <Redirect from='/' to='/accounts' />
+        <Redirect from='/auth' to='/accounts' query={ {} } />
+        <Redirect from='/settings' to='/settings/views' />
+        <Route path='/' component={ Application }>
+          <Route path='accounts' component={ Accounts } />
+          <Route path='account/:address' component={ Account } />
+          <Route path='addresses' component={ Addresses } />
+          <Route path='address/:address' component={ Address } />
+          <Route path='apps' component={ Dapps } />
+          <Route path='app/:id' component={ Dapp } />
+          <Route path='contracts' component={ Contracts } />
+          <Route path='contracts/write' component={ WriteContract } />
+          <Route path='contract/:address' component={ Contract } />
+          <Route path='settings' component={ Settings }>
+            <Route path='background' component={ SettingsBackground } />
+            <Route path='proxy' component={ SettingsProxy } />
+            <Route path='views' component={ SettingsViews } />
+            <Route path='parity' component={ SettingsParity } />
+          </Route>
+          <Route path='signer' component={ Signer } />
+          <Route path='status' component={ Status } />
+          <Route path='status/:subpage' component={ Status } />
+        </Route>
+      </Router>
+    );
+  }
+}

js/src/redux/actions.js

@@ -17,7 +17,7 @@
 import { newError } from '../ui/Errors/actions';
 import { setAddressImage } from './providers/imagesActions';
 import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from './providers/statusActions';
-import { toggleView } from '../views/Settings';
+import { toggleView } from '../views/Settings/actions';
 
 export {
   newError,

js/src/redux/reducers.js

@@ -19,9 +19,9 @@ import { routerReducer } from 'react-router-redux';
 
 import { apiReducer, balancesReducer, blockchainReducer, compilerReducer, imagesReducer, personalReducer, signerReducer, statusReducer as nodeStatusReducer } from './providers';
 
-import { errorReducer } from '../ui/Errors';
+import errorReducer from '../ui/Errors/reducers';
-import { settingsReducer } from '../views/Settings';
+import settingsReducer from '../views/Settings/reducers';
-import { tooltipReducer } from '../ui/Tooltips';
+import tooltipReducer from '../ui/Tooltips/reducers';
 
 export default function () {
   return combineReducers({

js/webpack/config.js

@@ -51,9 +51,9 @@ module.exports = {
         exclude: /node_modules/,
         // use: [ 'happypack/loader?id=js' ]
         use: isProd ? ['babel-loader'] : [
-          // 'react-hot-loader',
           'babel-loader?cacheDirectory=true'
-        ]
+        ],
+        options: Shared.getBabelrc()
       },
       {
         test: /\.js$/,

js/webpack/dev.server.js

@@ -25,7 +25,6 @@ const ProgressBar = require('progress');
 const webpackConfig = require('./config');
 const Shared = require('./shared');
 
-const hotMiddlewareScript = 'webpack-hot-middleware/client';
 let progressBar = { update: () => {} };
 
 /**
@@ -36,11 +35,18 @@ let progressBar = { update: () => {} };
   Object.keys(webpackConfig.entry).forEach((key) => {
     const entry = webpackConfig.entry[key];
 
-    webpackConfig.entry[key] = [].concat(entry, hotMiddlewareScript);
+    webpackConfig.entry[key] = [].concat(
+      'react-hot-loader/patch',
+      'webpack-hot-middleware/client',
+      'webpack/hot/only-dev-server',
+      entry
+    );
   });
 
   webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+  webpackConfig.plugins.push(new webpack.NamedModulesPlugin());
   webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+
   webpackConfig.plugins.push(new webpack.ProgressPlugin(
     (percentage) => progressBar.update(percentage)
   ));
@@ -49,6 +55,10 @@ let progressBar = { update: () => {} };
 const app = express();
 const compiler = webpack(webpackConfig);
 
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log
+}));
+
 app.use(webpackDevMiddleware(compiler, {
   noInfo: false,
   quiet: false,
@@ -59,10 +69,6 @@ app.use(webpackDevMiddleware(compiler, {
   }
 }));
 
-app.use(webpackHotMiddleware(compiler, {
-  log: console.log
-}));
-
 app.use(express.static(webpackConfig.output.path));
 
 // Add the dev proxies in the express App

js/webpack/shared.js

@@ -16,6 +16,7 @@
 
 const webpack = require('webpack');
 const path = require('path');
+const fs = require('fs');
 // const HappyPack = require('happypack');
 
 const postcssImport = require('postcss-import');
@@ -27,9 +28,13 @@ const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
 function getBabelrc () {
-  const babelrc = require('../.babelrc');
+  const babelrc = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../.babelrc')));
+
   const es2015Index = babelrc.presets.findIndex((p) => p === 'es2015');
-  babelrc.preset[es2015Index] = [ 'es2015', { modules: false } ];
+
+  // [ "es2015", { "modules": false } ]
+  babelrc.presets[es2015Index] = [ 'es2015', { modules: false } ];
+  babelrc['babelrc'] = false;
   return babelrc;
 }
 
@@ -50,6 +55,8 @@ function getPlugins (_isProd = isProd) {
   ];
 
   const plugins = [
+    // NB: HappyPack is not yet working with Webpack 2... (as of Nov. 26)
+
     // new HappyPack({
     //   id: 'css',
     //   threads: 4,
@@ -90,7 +97,8 @@ function getPlugins (_isProd = isProd) {
       debug: !isProd,
       options: {
         context: path.join(__dirname, '../src'),
-        postcss: postcss
+        postcss: postcss,
+        babel: getBabelrc()
       }
     }),