dashboard: separate UI development from production

.gitignore

@@ -42,6 +42,7 @@ profile.cov
 /dashboard/assets/node_modules
 /dashboard/assets/stats.json
 /dashboard/assets/bundle.js
+/dashboard/assets/bundle.js.map
 /dashboard/assets/package-lock.json
 
 **/yarn-error.log

dashboard/assets/.eslintrc

@@ -33,15 +33,11 @@
         "eslint:recommended",
         "airbnb",
         "plugin:flowtype/recommended",
-        "plugin:react/recommended",
+        "plugin:react/recommended"
-        "prettier",
-        "prettier/flowtype",
-        "prettier/react"
     ],
     "plugins": [
         "flowtype",
-        "react",
+        "react"
-        "prettier"
     ],
     "rules": {
         "no-tabs":                "off",
@@ -49,7 +45,7 @@
         "react/jsx-indent":       ["error", "tab"],
         "react/jsx-indent-props": ["error", "tab"],
         "react/prefer-stateless-function": "off",
-        //"react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}], // buggy
+        "react/destructuring-assignment": ["error", "always", {"ignoreClassFields": true}],
         "jsx-quotes":  ["error", "prefer-single"],
         "no-plusplus": "off",
         "no-console":  ["error", { "allow": ["error"] }],
@@ -70,11 +66,7 @@
         // Prohibits padding inside curly braces.
         "object-curly-spacing": ["error", "never"],
         "no-use-before-define": "off", // message types
-        "default-case": "off",
+        "default-case": "off"
-        "prettier/prettier": ["error", {
-            "singleQuote": true,
-            "useTabs": true,
-        }]
     },
     "settings": {
         "import/resolver": {

dashboard/assets/.flowconfig

@@ -7,4 +7,5 @@ node_modules/jss/flow-typed
 
 [options]
 include_warnings=true
-module.name_mapper='\(.*\)$' -> '<PROJECT_ROOT>/\1'
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=components

dashboard/assets/components/Dashboard.jsx

@@ -17,6 +17,7 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 import React, {Component} from 'react';
+import {hot} from 'react-hot-loader';
 
 import withStyles from '@material-ui/core/styles/withStyles';
 
@@ -190,8 +191,8 @@ class Dashboard extends Component<Props, State> {
 	// reconnect establishes a websocket connection with the server, listens for incoming messages
 	// and tries to reconnect on connection loss.
 	reconnect = () => {
-		// PROD is defined by webpack.
+		const host = process.env.NODE_ENV === 'production' ? window.location.host : 'localhost:8080';
-		const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://')}${PROD ? window.location.host : 'localhost:8080'}/api`);
+		const server = new WebSocket(`${((window.location.protocol === 'https:') ? 'wss://' : 'ws://')}${host}/api`);
 		server.onopen = () => {
 			this.setState({content: defaultContent(), shouldUpdate: {}, server});
 		};
@@ -253,4 +254,4 @@ class Dashboard extends Component<Props, State> {
 	}
 }
 
-export default withStyles(themeStyles)(Dashboard);
+export default hot(module)(withStyles(themeStyles)(Dashboard));

dashboard/assets/package.json

@@ -1,61 +1,62 @@
 {
+    "private": true,
     "dependencies": {
-        "@material-ui/core": "^1.4.3",
+        "@babel/core": "^7.0.0",
-        "@material-ui/icons": "^2.0.1",
+        "@babel/plugin-proposal-class-properties": "^7.0.0",
-        "babel-core": "^6.26.3",
+        "@babel/plugin-proposal-function-bind": "^7.0.0",
-        "babel-eslint": "^8.2.6",
+        "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-        "babel-loader": "^7.1.5",
+        "@babel/preset-env": "^7.0.0",
-        "babel-plugin-transform-class-properties": "^6.24.1",
+        "@babel/preset-react": "^7.0.0",
-        "babel-plugin-transform-decorators-legacy": "^1.3.5",
+        "@babel/preset-stage-0": "^7.0.0",
-        "babel-plugin-transform-flow-strip-types": "^6.22.0",
+        "@material-ui/core": "3.0.3",
-        "babel-plugin-transform-runtime": "^6.23.0",
+        "@material-ui/icons": "^3.0.1",
-        "babel-preset-env": "^1.7.0",
+        "babel-eslint": "9.0.0",
-        "babel-preset-react": "^6.24.1",
+        "babel-loader": "8.0.2",
-        "babel-preset-stage-0": "^6.24.1",
-        "babel-runtime": "^6.26.0",
         "classnames": "^2.2.6",
         "css-loader": "^1.0.0",
         "escape-html": "^1.0.3",
-        "eslint": "^4.19.1",
+        "eslint": "5.5.0",
         "eslint-config-airbnb": "^17.0.0",
-        "eslint-config-prettier": "^2.9.0",
+        "eslint-config-prettier": "3.0.1",
         "eslint-loader": "^2.1.0",
         "eslint-plugin-flowtype": "^2.50.0",
         "eslint-plugin-import": "^2.13.0",
         "eslint-plugin-jsx-a11y": "^6.1.1",
         "eslint-plugin-node": "^7.0.1",
         "eslint-plugin-prettier": "^2.6.2",
-        "eslint-plugin-promise": "^3.8.0",
+        "eslint-plugin-promise": "4.0.1",
-        "eslint-plugin-react": "^7.10.0",
+        "eslint-plugin-react": "7.11.1",
-        "file-loader": "^1.1.11",
+        "file-loader": "2.0.0",
-        "flow-bin": "^0.78.0",
+        "flow-bin": "0.80.0",
         "flow-bin-loader": "^1.0.3",
         "flow-typed": "^2.5.1",
         "path": "^0.12.7",
         "prettier": "^1.14.2",
         "prettier-eslint": "^8.8.2",
-        "react": "^16.4.2",
+        "react": "^16.5.0",
-        "react-dom": "^16.4.2",
+        "react-dom": "^16.5.0",
         "react-fa": "^5.0.0",
+        "react-hot-loader": "^4.3.6",
         "react-transition-group": "^2.4.0",
-        "recharts": "^1.1.0",
+        "recharts": "^1.2.0",
-        "style-loader": "^0.22.1",
+        "style-loader": "0.23.0",
-        "uglifyjs-webpack-plugin": "^1.2.7",
+        "uglifyjs-webpack-plugin": "1.3.0",
         "url": "^0.11.0",
-        "url-loader": "^1.0.1",
+        "url-loader": "1.1.1",
-        "webpack": "^4.16.5",
+        "webpack": "^4.17.2",
         "webpack-cli": "^3.1.0",
-        "webpack-dev-server": "^3.1.5"
+        "webpack-dev-server": "3.1.8",
+        "webpack-merge": "^4.1.4"
     },
     "scripts": {
-        "build": "NODE_ENV=production webpack",
+        "build": "webpack --config webpack.config.prod.js",
-        "stats": "webpack --profile --json > stats.json",
+        "stats": "webpack --config webpack.config.prod.js --profile --json > stats.json",
-        "dev": "webpack-dev-server",
+        "dev": "webpack-dev-server --open --config webpack.config.dev.js",
         "install-flow": "flow-typed install",
         "flow": "flow status --show-all-errors",
         "eslint": "eslint **/*",
-        "lint": "yarn eslint && yarn flow",
         "eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
     },
+    "sideEffects": false,
     "license": "LGPL-3.0-or-later"
 }

dashboard/assets/webpack.config.common.js

@@ -0,0 +1,85 @@
+// Copyright 2018 The go-ethereum Authors
+// This file is part of the go-ethereum library.
+//
+// The go-ethereum library is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// The go-ethereum library 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 Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
+
+const path = require('path');
+
+module.exports = {
+	target: 'web',
+	entry:  {
+		bundle: './index',
+	},
+	output: {
+		filename:          '[name].js',
+		path:              path.resolve(__dirname, ''),
+		sourceMapFilename: '[file].map',
+	},
+	resolve: {
+		modules: [
+			'node_modules',
+			path.resolve(__dirname, 'components'), // import './components/Component' -> import 'Component'
+		],
+		extensions: ['.js', '.jsx'],
+	},
+	module: {
+		rules: [
+			{
+				test:    /\.jsx$/, // regexp for JSX files
+				exclude: /node_modules/,
+				use:     [ // order: from bottom to top
+					{
+						loader:  'babel-loader',
+						options: {
+							presets: [ // order: from bottom to top
+								'@babel/env',
+								'@babel/react',
+							],
+							plugins: [ // order: from top to bottom
+								'@babel/proposal-function-bind', // instead of stage 0
+								'@babel/proposal-class-properties', // static defaultProps
+								'@babel/transform-flow-strip-types',
+								'react-hot-loader/babel',
+							],
+						},
+					},
+					// 'eslint-loader', // show errors in the console
+				],
+			},
+			{
+				test:  /\.css$/,
+				oneOf: [
+					{
+						test: /font-awesome/,
+						use:  [
+							'style-loader',
+							'css-loader',
+							path.resolve(__dirname, './fa-only-woff-loader.js'),
+						],
+					},
+					{
+						use: [
+							'style-loader',
+							'css-loader',
+						],
+					},
+				],
+			},
+			{
+				test: /\.woff2?$/, // font-awesome icons
+				use:  'url-loader',
+			},
+		],
+	},
+};

dashboard/assets/webpack.config.dev.js

@@ -0,0 +1,33 @@
+// Copyright 2018 The go-ethereum Authors
+// This file is part of the go-ethereum library.
+//
+// The go-ethereum library is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// The go-ethereum library 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 Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
+
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.config.common.js');
+
+module.exports = merge(common, {
+	mode:    'development',
+	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
+	],
+	// devtool:   'eval',
+	devtool:   'inline-source-map',
+	devServer: {
+		port:     8081,
+		hot:      true,
+		compress: true,
+	},
+});

dashboard/assets/webpack.config.js

@@ -39,7 +39,8 @@ module.exports = {
 		// },
 		extensions: ['.js', '.jsx'],
 	},
-	// devtool:      'source-map',
+	devtool: 'eval',
+	// devtool: 'inline-source-map',
 	optimization: {
 		minimize:     true,
 		namedModules: true, // Module names instead of numbers - resolves the large diff problem.
@@ -47,10 +48,13 @@ module.exports = {
 			new UglifyJsPlugin({
 				uglifyOptions: {
 					compress: true,
+					mangle: true,
 					output:   {
 						comments: false,
 						beautify: true,
+						bracketize: true,
 					},
+					warnings: true,
 				},
 				// sourceMap: true,
 			}),
@@ -60,6 +64,7 @@ module.exports = {
 		new webpack.DefinePlugin({
 			PROD: process.env.NODE_ENV === 'production',
 		}),
+		new webpack.HotModuleReplacementPlugin(),
 	],
 	module: {
 		rules: [
@@ -71,18 +76,18 @@ module.exports = {
 						loader:  'babel-loader',
 						options: {
 							plugins: [ // order: from top to bottom
-								// 'transform-decorators-legacy', // @withStyles, @withTheme
+								'@babel/proposal-function-bind', // instead of stage 0
-								'transform-class-properties', // static defaultProps
+								'@babel/proposal-class-properties', // static defaultProps
-								'transform-flow-strip-types',
+								'@babel/transform-flow-strip-types',
+								'react-hot-loader/babel',
 							],
 							presets: [ // order: from bottom to top
-								'env',
+								'@babel/env',
-								'react',
+								'@babel/react',
-								'stage-0',
 							],
 						},
 					},
-					// 'eslint-loader', // show errors not only in the editor, but also in the console
+					// 'eslint-loader', // show errors in the console
 				],
 			},
 			{
@@ -112,6 +117,7 @@ module.exports = {
 	},
 	devServer: {
 		port:     8081,
+		hot:      true,
 		compress: true,
 	},
 };

dashboard/assets/webpack.config.prod.js

@@ -0,0 +1,42 @@
+// Copyright 2018 The go-ethereum Authors
+// This file is part of the go-ethereum library.
+//
+// The go-ethereum library is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// The go-ethereum library 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 Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
+
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const merge = require('webpack-merge');
+const common = require('./webpack.config.common.js');
+
+module.exports = merge(common, {
+	mode:         'production',
+	devtool:      'nosources-source-map',
+	optimization: {
+		minimize:     true,
+		namedModules: true, // Module names instead of numbers - resolves the large diff problem.
+		minimizer:    [
+			new UglifyJsPlugin({
+				uglifyOptions: {
+					compress: true,
+					output:   {
+						comments:   false,
+						beautify:   true,
+						bracketize: true,
+					},
+					// warnings: true,
+				},
+				sourceMap: true,
+			}),
+		],
+	},
+});