Update node libraries (#2292)

* Upgraded Webpack 1.13 -> 2.2 * Made webpack.prodution.config.js work and updated yarn.lock * Updated a lot of small dependencies. * Upgraded React * Bunch of small devDependencies updated. * Fully updated devDependencies * Updated optionalDependencies * Updated everything except D3 zoom. * Fixed linting error. * Another update. * Reverted materialize-css upgrade and applied new eslint rules * Final fixes to webpack configs. * Updated yarn.lock again.
2026-07-21 22:36:39 +00:00 · 2017-05-04 13:12:00 +02:00
parent 54f7904d0d
commit 7669c325d7
9 changed files with 1597 additions and 1280 deletions
--- a/client/app/scripts/components/debug-toolbar.js
+++ b/client/app/scripts/components/debug-toolbar.js
@@ -339,8 +339,8 @@ class DebugToolbar extends React.Component {
          </tbody>
        </table>}

-        {this.state.showColors && [getNodeColor, getNodeColorDark].map((fn, i) => (
-          <table key={i}>
+        {this.state.showColors && [getNodeColor, getNodeColorDark].map(fn => (
+          <table key={fn}>
            <tbody>
              {LABEL_PREFIXES.map(r => (
                <tr key={r}>
--- a/client/app/scripts/components/matched-text.js
+++ b/client/app/scripts/components/matched-text.js
@@ -17,7 +17,7 @@ function chunkText(text, { start, length }) {
      chunks.push({text: text.substr(0, start)});
    }
    // matching chunk
-    chunks.push({match: true, text: text.substr(start, length)});
+    chunks.push({match: true, offset: start, text: text.substr(start, length)});
    // text after match
    const remaining = start + length;
    if (remaining < text.length) {
@@ -93,10 +93,10 @@ export default class MatchedText extends React.PureComponent {

    return (
      <span className="matched-text" title={text}>
-        {truncateChunks(chunks, displayText, maxLength).map((chunk, index) => {
+        {truncateChunks(chunks, displayText, maxLength).map((chunk) => {
          if (chunk.match) {
            return (
-              <span className="match" key={index}>
+              <span className="match" key={chunk.offset}>
                {chunk.text}
              </span>
            );
--- a/client/app/scripts/components/sparkline.js
+++ b/client/app/scripts/components/sparkline.js
@@ -105,5 +105,6 @@ Sparkline.defaultProps = {
  strokeColor: '#7d7da8',
  strokeWidth: '0.5px',
  curve: curveLinear,
-  circleDiameter: 1.75
+  circleDiameter: 1.75,
+  data: [],
 };
--- a/client/app/scripts/stores/configureStore.dev.js
+++ b/client/app/scripts/stores/configureStore.dev.js
@@ -1,6 +1,5 @@
 import { createStore, applyMiddleware, compose } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-// import createLogger from 'redux-logger';

 import DevTools from '../components/dev-tools';
 import { initialState, rootReducer } from '../reducers/root';
--- a/client/app/scripts/utils/data-generator-utils.js
+++ b/client/app/scripts/utils/data-generator-utils.js
@@ -33,7 +33,8 @@ function getNextValue(keyValues, maxValue) {
  const key = keyValues.join('-');
  let series = nodeData[key];
  if (!series || !series.length) {
-    series = nodeData[key] = bumpLayer(100, maxValue);
+    nodeData[key] = bumpLayer(100, maxValue);
+    series = nodeData[key];
  }
  const v = series.shift();
  return v;
--- a/client/package.json
+++ b/client/package.json
@@ -7,89 +7,89 @@
  "private": true,
  "main": "index.js",
  "dependencies": {
-    "babel-plugin-lodash": "^3.2.10",
-    "babel-polyfill": "6.16.0",
+    "babel-plugin-lodash": "3.2.11",
+    "babel-polyfill": "6.23.0",
    "classnames": "2.2.5",
-    "d3-array": "1.0.2",
-    "d3-color": "1.0.2",
-    "d3-format": "1.0.2",
-    "d3-scale": "1.0.4",
-    "d3-selection": "1.0.3",
-    "d3-shape": "1.0.4",
-    "d3-time-format": "2.0.3",
-    "d3-zoom": "1.1.1",
+    "d3-array": "1.2.0",
+    "d3-color": "1.0.3",
+    "d3-format": "1.2.0",
+    "d3-scale": "1.0.5",
+    "d3-selection": "1.0.5",
+    "d3-shape": "1.0.6",
+    "d3-time-format": "2.0.5",
+    "d3-zoom": "1.1.4",
    "dagre": "0.7.4",
-    "debug": "2.3.3",
-    "filesize": "3.3.0",
+    "debug": "2.6.6",
+    "filesize": "3.5.9",
    "font-awesome": "4.7.0",
    "immutable": "3.8.1",
    "lcp": "1.1.0",
-    "lodash": "4.17.2",
-    "materialize-css": "0.97.8",
-    "moment": "2.17.1",
+    "lodash": "4.17.4",
+    "materialize-css": "0.98.1",
+    "moment": "2.18.1",
    "page": "1.7.1",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "react-motion": "0.4.5",
-    "react-redux": "4.4.6",
-    "react-tooltip": "3.2.2",
-    "redux": "3.6.0",
-    "redux-immutable": "3.0.8",
-    "redux-logger": "2.7.4",
-    "redux-thunk": "2.1.0",
-    "reqwest": "2.0.5",
-    "reselect": "2.5.4",
-    "reselect-map": "1.0.0",
-    "whatwg-fetch": "2.0.1",
+    "react": "15.5.4",
    "react-addons-perf": "15.4.2",
-    "xterm": "2.2.3",
+    "react-dom": "15.5.4",
+    "react-motion": "0.5.0",
+    "react-redux": "5.0.4",
+    "react-tooltip": "3.3.0",
+    "redux": "3.6.0",
+    "redux-immutable": "4.0.0",
+    "redux-logger": "3.0.1",
+    "redux-thunk": "2.2.0",
+    "reqwest": "2.0.5",
+    "reselect": "3.0.0",
+    "reselect-map": "1.0.1",
+    "whatwg-fetch": "2.0.3",
+    "xterm": "2.5.0",
    "weaveworks-ui-components": "git+https://github.com/weaveworks/ui-components.git#v0.1.19"
  },
  "devDependencies": {
-    "autoprefixer": "6.5.3",
-    "babel-cli": "^6.18.0",
-    "babel-core": "6.18.2",
-    "babel-eslint": "7.1.1",
-    "babel-jest": "17.0.2",
-    "babel-loader": "6.2.8",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "6.16.0",
-    "clean-webpack-plugin": "0.1.14",
-    "css-loader": "0.26.1",
-    "eslint": "3.11.1",
-    "eslint-config-airbnb": "13.0.0",
-    "eslint-loader": "1.6.1",
+    "autoprefixer": "6.7.7",
+    "babel-cli": "6.24.1",
+    "babel-core": "6.24.1",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "19.0.0",
+    "babel-loader": "7.0.0",
+    "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "clean-webpack-plugin": "0.1.16",
+    "css-loader": "0.28.1",
+    "eslint": "3.19.0",
+    "eslint-config-airbnb": "14.1.0",
+    "eslint-loader": "1.7.1",
    "eslint-plugin-import": "2.2.0",
-    "eslint-plugin-jsx-a11y": "2.2.3",
-    "eslint-plugin-react": "6.8.0",
-    "expect": "^1.20.2",
-    "extract-text-webpack-plugin": "1.0.1",
-    "file-loader": "0.9.0",
-    "html-webpack-plugin": "2.24.1",
-    "http-proxy-rules": "1.0.1",
+    "eslint-plugin-jsx-a11y": "4.0.0",
+    "eslint-plugin-react": "6.10.3",
+    "expect": "1.20.2",
+    "extract-text-webpack-plugin": "2.1.0",
+    "file-loader": "0.11.1",
+    "html-webpack-plugin": "2.28.0",
+    "http-proxy-rules": "1.1.0",
    "immutable-devtools": "0.0.7",
-    "jest-cli": "17.0.3",
+    "jest-cli": "19.0.2",
    "json-loader": "0.5.4",
-    "node-sass": "3.13.1",
-    "postcss-loader": "1.2.0",
+    "node-sass": "4.5.2",
+    "postcss-loader": "1.3.3",
    "react-addons-perf": "15.4.2",
-    "redux-devtools": "3.3.1",
-    "redux-devtools-dock-monitor": "1.1.1",
-    "redux-devtools-log-monitor": "1.1.1",
-    "sass-loader": "4.1.1",
-    "style-loader": "0.13.1",
+    "redux-devtools": "3.4.0",
+    "redux-devtools-dock-monitor": "1.1.2",
+    "redux-devtools-log-monitor": "1.3.0",
+    "sass-loader": "6.0.3",
+    "style-loader": "0.17.0",
    "url": "0.11.0",
-    "url-loader": "0.5.7",
-    "webpack": "1.13.3"
+    "url-loader": "0.5.8",
+    "webpack": "2.4.1"
  },
  "optionalDependencies": {
-    "browser-perf": "1.4.5",
-    "express": "4.14.0",
-    "http-proxy": "1.16.1",
-    "perfjankie": "2.1.0",
-    "webpack-dev-middleware": "1.8.4",
-    "webpack-hot-middleware": "2.13.2"
+    "browser-perf": "1.4.11",
+    "express": "4.15.2",
+    "http-proxy": "1.16.2",
+    "perfjankie": "2.1.2",
+    "webpack-dev-middleware": "1.10.2",
+    "webpack-hot-middleware": "2.18.0"
  },
  "scripts": {
    "build": "webpack --config webpack.production.config.js",
@@ -113,7 +113,7 @@
    "setupFiles": [
      "<rootDir>/test/support/localStorage.js"
    ],
-    "testPathDirs": [
+    "roots": [
      "<rootDir>/app/scripts"
    ],
    "moduleFileExtensions": [
--- a/client/webpack.local.config.js
+++ b/client/webpack.local.config.js
@@ -52,11 +52,11 @@ module.exports = {

  // Necessary plugins for hot load
  plugins: [
-    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
-    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
+    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new ExtractTextPlugin('style-[name]-[chunkhash].css'),
    new HtmlWebpackPlugin({
      chunks: ['vendors', 'terminal-app'],
@@ -81,25 +81,21 @@ module.exports = {
    // Webpack is opionated about how pkgs should be laid out:
    // https://github.com/webpack/webpack/issues/1617
    noParse: [/xterm\/(.*).map$/, /xterm\/dist\/xterm\.js/],
-    include: [
-      path.resolve(__dirname, 'app/scripts', 'app/styles')
-    ],

-    preLoaders: [
+    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules|vendor/,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
+        loader: 'eslint-loader',
+        enforce: 'pre'
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'url-loader?limit=10000&minetype=application/font-woff'
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          minetype: 'application/font-woff',
+        }
      },
      {
        test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
@@ -108,29 +104,39 @@ module.exports = {
      {
        test: /\.jsx?$/,
        exclude: /node_modules|vendor/,
-        loaders: ['babel']
+        loader: 'babel-loader'
      },
      {
        test: /\.(scss|css)$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss!sass-loader')
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [{
+            loader: 'css-loader'
+          }, {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [
+                autoprefixer({
+                  browsers: ['last 2 versions']
+                })
+              ]
+            }
+          }, {
+            loader: 'sass-loader',
+            options: {
+              includePaths: [
+                path.resolve(__dirname, './node_modules/xterm'),
+                path.resolve(__dirname, './node_modules/font-awesome'),
+              ]
+            }
+          }],
+        })
      }
    ]
  },

-  postcss: [
-    autoprefixer({
-      browsers: ['last 2 versions']
-    })
-  ],
-
  // Automatically transform files with these extensions
  resolve: {
-    extensions: ['', '.js', '.jsx']
+    extensions: ['.js', '.jsx']
  },
-  sassLoader: {
-    includePaths: [
-      path.resolve(__dirname, './node_modules/xterm'),
-      path.resolve(__dirname, './node_modules/font-awesome')
-    ]
-  }
 };
--- a/client/webpack.production.config.js
+++ b/client/webpack.production.config.js
@@ -46,64 +46,11 @@ module.exports = {
    publicPath: PUBLIC_PATH
  },

-  module: {
-    // Webpack is opionated about how pkgs should be laid out:
-    // https://github.com/webpack/webpack/issues/1617
-    noParse: [/xterm\/dist\/xterm\.js/],
-    include: [
-      path.resolve(__dirname, 'app/scripts', 'app/styles')
-    ],
-    preLoaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules|vendor/,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'url-loader?limit=10000&minetype=application/font-woff'
-      },
-      {
-        test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        loader: 'file-loader'
-      },
-      {
-        test: /\.ico$/,
-        loader: 'file-loader?name=[name].[ext]'
-      },
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules|vendor/,
-        loader: 'babel'
-      },
-      {
-        test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss!sass-loader?minimize')
-      }
-    ]
-  },
-
-  postcss: [
-    autoprefixer({
-      browsers: ['last 2 versions']
-    })
-  ],
-
-  eslint: {
-    failOnError: true
-  },
-
-  resolve: {
-    extensions: ['', '.js', '.jsx']
-  },
-
  plugins: [
    new CleanWebpackPlugin(['build']),
    new webpack.DefinePlugin(GLOBALS),
-    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors-[chunkhash].js'),
-    new webpack.optimize.OccurenceOrderPlugin(true),
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.js' }),
+    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.IgnorePlugin(/.*\.map$/, /xterm\/lib\/addons/),
    new webpack.optimize.UglifyJsPlugin({
@@ -127,10 +74,77 @@ module.exports = {
    }),
    new ContrastStyleCompiler()
  ],
-  sassLoader: {
-    includePaths: [
-      path.resolve(__dirname, './node_modules/xterm'),
-      path.resolve(__dirname, './node_modules/font-awesome')
+
+  module: {
+    // Webpack is opionated about how pkgs should be laid out:
+    // https://github.com/webpack/webpack/issues/1617
+    noParse: [/xterm\/dist\/xterm\.js/],
+
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules|vendor/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        options: {
+          failOnError: true
+        }
+      },
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          minetype: 'application/font-woff',
+        }
+      },
+      {
+        test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /\.ico$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]'
+        }
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules|vendor/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [{
+            loader: 'css-loader'
+          }, {
+            loader: 'postcss-loader',
+            options: {
+              plugins: [
+                autoprefixer({
+                  browsers: ['last 2 versions']
+                })
+              ]
+            }
+          }, {
+            loader: 'sass-loader',
+            options: {
+              minimize: true,
+              includePaths: [
+                path.resolve(__dirname, './node_modules/xterm'),
+                path.resolve(__dirname, './node_modules/font-awesome')
+              ]
+            }
+          }]
+        })
+      }
    ]
-  }
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
 };
--- a/client/yarn.lock
+++ b/client/yarn.lock