grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Working HOT RELOAD !!

Browse Source
This commit is contained in:
Nicolas Gotchac 2016-11-28 12:37:13 +01:00
parent f9b3a98ff7
commit b823b675a4
9 changed files with 141 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/.babelrc
View File

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

2
js/package.json
View File

@ -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",

80
js/src/index.js
View File

@ -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 { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from './views';
import ContextProvider from './ui/ContextProvider';
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 }>
<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>
</ContextProvider>,
<AppContainer>
<ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
<MainApplication
routerHistory={ routerHistory }
/>
</ContextProvider>
</AppContainer>,
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')
);
});
}

60
js/src/main.js Normal file
View File

@ -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>
);
}
}

2
js/src/redux/actions.js
View File

@ -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,

6
js/src/redux/reducers.js
View File

@ -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 { settingsReducer } from '../views/Settings';
import { tooltipReducer } from '../ui/Tooltips';
import errorReducer from '../ui/Errors/reducers';
import settingsReducer from '../views/Settings/reducers';
import tooltipReducer from '../ui/Tooltips/reducers';
export default function () {
return combineReducers({

4
js/webpack/config.js
View File

@ -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$/,

18
js/webpack/dev.server.js
View File

@ -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

14
js/webpack/shared.js
View File

@ -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()
}
}),