Merge pull request #903 from yuya-oc/upgrade-build-tools

Upgrade babel, webpack and storybook stack

.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["Electron >= 1.8"],
-        "node": "8.2"
-      }
-    }],
-    "react"
-  ],
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
-}

babel.config.js

@@ -0,0 +1,19 @@
+// Copyright (c) 2015-2016 Yuya Ochiai
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+module.exports = (api) => { // eslint-disable-line import/no-commonjs
+  api.cache.forever();
+  return {
+    presets: [
+      ['@babel/preset-env', {
+        targets: {
+          browsers: ['Electron >= 2.0'],
+          node: '8.9',
+        },
+      }],
+      '@babel/preset-react',
+    ],
+    plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
+  };
+};

package.json

@@ -26,7 +26,7 @@
     "watch:main": "node scripts/watch_main_and_preload.js",
     "watch:renderer": "webpack-dev-server --config webpack.config.renderer.js",
     "test": "npm-run-all test:* lint:*",
-    "test:app": "cross-env NODE_ENV=production npm run build && mocha -r babel-register --reporter mocha-circleci-reporter --recursive test/specs",
+    "test:app": "cross-env NODE_ENV=production npm run build && mocha -r @babel/register --reporter mocha-circleci-reporter --recursive test/specs",
     "package:all": "cross-env NODE_ENV=production npm-run-all check-build-config package:windows package:mac package:linux",
     "package:windows": "cross-env NODE_ENV=production npm-run-all check-build-config build && build --win --x64 --ia32 --config.extraMetadata.name=mattermost --publish=never",
     "package:mac": "cross-env NODE_ENV=production npm-run-all check-build-config build && build --mac --publish=never",
@@ -34,20 +34,23 @@
     "manipulate-windows-zip": "node scripts/manipulate_windows_zip.js",
     "lint:js": "eslint --ignore-path .gitignore --ignore-pattern node_modules --ext .js --ext .jsx .",
     "fix:js": "eslint --ignore-path .gitignore --ignore-pattern node_modules --quiet --ext .js --ext .jsx . --fix",
-    "check-build-config": "node -r babel-register scripts/check_build_config.js"
+    "check-build-config": "node -r @babel/register scripts/check_build_config.js"
   },
   "devDependencies": {
     "7zip-bin": "^4.0.2",
-    "@storybook/react": "^3.4.6",
+    "@babel/core": "^7.1.6",
-    "babel-core": "^6.26.3",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@storybook/addon-actions": "^4.0.9",
+    "@storybook/react": "^4.0.9",
     "babel-eslint": "^8.2.3",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^8.0.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
     "chai": "^4.1.2",
     "cross-env": "^5.1.6",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.1",
     "devtron": "^1.4.0",
     "electron": "^3.0.10",
     "electron-builder": "20.14.7",
@@ -57,18 +60,18 @@
     "eslint-plugin-header": "^1.2.0",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
-    "file-loader": "^1.1.6",
+    "file-loader": "^2.0.0",
     "mocha": "^5.2.0",
     "mocha-circleci-reporter": "0.0.3",
     "npm-run-all": "^4.1.3",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "spectron": "^5.0.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.23.1",
-    "url-loader": "^1.0.1",
+    "url-loader": "^1.1.2",
-    "webpack": "^4.8.3",
+    "webpack": "^4.26.1",
-    "webpack-cli": "^2.1.4",
+    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.4",
+    "webpack-dev-server": "^3.1.10",
-    "webpack-merge": "^4.1.2"
+    "webpack-merge": "^4.1.4"
   }
 }

src/.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-actions/register';

src/.storybook/webpack.config.js

@@ -1,7 +1,18 @@
 const path = require("path");
 
+const rendererConfig = require('../../webpack.config.renderer');
+
 // https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default
-module.exports = (baseConfig, env, defaultConfig) => {
+module.exports = (storybookBaseConfig, configType) => {
-  defaultConfig.resolve.modules = [path.resolve(__dirname, '../node_modules'), 'node_modules'];
+  // Avoid conflicting two instances of React due to two package.json structure
-  return defaultConfig;
+  storybookBaseConfig.resolve.modules.unshift(path.resolve(__dirname, '../node_modules'));
+
+  // Use same rules
+  storybookBaseConfig.module.rules = rendererConfig.module.rules.concat({
+    test: /\.(ttf|woff2?|eot|svg)/,
+    use: {
+      loader: 'file-loader'
+    }
+  });
+  return storybookBaseConfig;
 }