Refactor/tooling upgrade (#157)

* Update babel preset stage-0 to stage-2

* Bump webpack version. Configure webpack-bundle-analyzer

* Upgrade css-loader. Downgrade and lock webpack-cli

* Upgrade react-editable-json-tree

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["react", "es2015", "stage-0"]
+  "presets": ["react", "es2015", "stage-2"]
 }

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
         Cypress: true,
         cy: true,
         module: true,
+        __dirname: true,
     },
     parser: "babel-eslint",
     parserOptions: {

package.json

@@ -11,7 +11,7 @@
         "dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules --optimize-minimize",
         "dist:sandbox": "webpack --config webpack.config.js -p",
         "dist:transpile": "./node_modules/babel-cli/bin/babel.js -d lib src",
-        "dist": "npm run check && node_modules/.bin/npm-run-all --parallel dist:*",
+        "dist": "npm run check && npm-run-all --parallel dist:*",
         "docs:lint": "node_modules/documentation/bin/documentation.js lint src/**/*.js",
         "docs:watch": "node_modules/documentation/bin/documentation.js --config documentation.yml build src/**/*.js -f html -o gen-docs --watch",
         "docs": "npm run docs:lint && node_modules/documentation/bin/documentation.js --config documentation.yml build src/**/*.js -f html -o gen-docs && node_modules/documentation/bin/documentation.js build src/**/*.js -f md > gen-docs/DOCUMENTATION.md",
@@ -47,14 +47,12 @@
         "babel-plugin-add-module-exports": "0.2.1",
         "babel-plugin-react-html-attrs": "2.0.0",
         "babel-plugin-transform-class-properties": "6.24.1",
-        "babel-plugin-transform-decorators-legacy": "1.3.4",
         "babel-polyfill": "6.26.0",
         "babel-preset-es2015": "6.24.1",
-        "babel-preset-es2017": "6.24.1",
         "babel-preset-react": "6.24.1",
-        "babel-preset-stage-0": "6.24.1",
+        "babel-preset-stage-2": "6.24.1",
         "cross-env": "^5.2.0",
-        "css-loader": "0.28.7",
+        "css-loader": "2.0.2",
         "cypress": "2.1.0",
         "d3": "^5.5.0",
         "documentation": "6.2.0",
@@ -77,12 +75,13 @@
         "react": "^16.4.1",
         "react-addons-test-utils": "15.6.2",
         "react-dom": "16.4.1",
-        "react-editable-json-tree": "2.2.0",
+        "react-editable-json-tree": "2.2.1",
         "react-jsonschema-form": "1.0.4",
         "react-test-renderer": "16.4.1",
         "style-loader": "0.18.2",
         "typescript": "^3.2.2",
-        "webpack": "4.2.0",
+        "webpack": "4.28.1",
+        "webpack-bundle-analyzer": "^3.0.3",
         "webpack-cli": "2.0.12",
         "webpack-dev-server": "3.1.3",
         "webpack-visualizer-plugin": "0.1.11"

webpack.config.dist.js

@@ -1,29 +1,35 @@
-const path = require('path');
-const webpack = require('webpack');
-const Visualizer = require('webpack-visualizer-plugin');
+const path = require("path");
+const Visualizer = require("webpack-visualizer-plugin");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
 module.exports = {
-    context: path.join(__dirname, 'src'),
-    entry: './index.js',
+    context: path.join(__dirname, "src"),
+    entry: "./index.js",
     output: {
-        path: __dirname + '/dist/',
-        filename: 'rd3g.bundle.js'
+        path: __dirname + "/dist/",
+        filename: "rd3g.bundle.js",
     },
     module: {
         rules: [
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules|sandbox/,
-                loader: 'babel-loader',
+                loader: "babel-loader",
                 options: {
-                    presets: ['react', 'es2015', 'stage-0'],
-                    plugins: ['react-html-attrs']
-                }
-            }
-        ]
+                    presets: ["react", "es2015", "stage-2"],
+                },
+            },
+        ],
     },
     resolve: {
-        extensions: ['.js', '.jsx']
+        extensions: [".js", ".jsx"],
     },
-    plugins: [new Visualizer({ filename: '../gen-docs/stats.html' })]
+    plugins: [
+        new BundleAnalyzerPlugin({
+            analyzerMode: "static",
+            reportFilename: "../gen-docs/bundle-analyser-stats.html",
+            openAnalyzer: true,
+        }),
+        new Visualizer({ filename: "../gen-docs/visualizer-stats.html" }),
+    ],
 };

webpack.config.js

@@ -1,32 +1,30 @@
-const path = require('path');
-const webpack = require('webpack');
+const path = require("path");
 
 module.exports = {
-    context: path.join(__dirname, 'sandbox'),
-    devtool: 'cheap-module-eval-source-map',
-    entry: './index.jsx',
+    context: path.join(__dirname, "sandbox"),
+    devtool: "cheap-module-eval-source-map",
+    entry: "./index.jsx",
     output: {
-        path: __dirname + '/sandbox/',
-        filename: 'rd3g.sandbox.bundle.js'
+        path: __dirname + "/sandbox/",
+        filename: "rd3g.sandbox.bundle.js",
     },
     module: {
         rules: [
             {
                 test: /\.css$/,
-                use: ['style-loader', 'css-loader']
+                use: ["style-loader", "css-loader"],
             },
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loader: 'babel-loader',
+                loader: "babel-loader",
                 options: {
-                    presets: ['react', 'es2015', 'stage-0'],
-                    plugins: ['react-html-attrs']
-                }
-            }
-        ]
+                    presets: ["react", "es2015", "stage-2"],
+                },
+            },
+        ],
     },
     resolve: {
-        extensions: ['.js', '.jsx']
-    }
+        extensions: [".js", ".jsx"],
+    },
 };