Update dependencies for Node.js (2018-12-31) (#9669)

* Update react-* to v16.7.0

* Upgrade react-hotkeys to v1.1.4

* Update react-intl to v2.7.2

* Update react-select to v2.2.0

* Update react-swipeable-views to v0.13.0

* Upgrade react-textarea-autosize to v7.1.0

* Upgrade redux to v4.0.1

* Upgrade reselect to v4.0.0

* Update raf to v3.4.1

* Update enzyme to v3.8.0

* Update rails-ujs to v5.2.2

* Update axios to v0.18.0

* Update http-link-header to v1.0.2

* Update rellax to v1.7.1

* Update intersection-observer to v0.5.1

* Update stringz to v1.0.0

* Upgrade babel-eslint to v10.0.1

* Update @babel/* to v7.2.x

* Update babel-plugin-react-intl to v3.0.1

* Update babel-plugin-transform-react-remove-prop-types to v0.4.21

* Upgrade dotenv to v6.2.0

* Update express to v4.16.4

* Update webpack to v4.28.3

* Upgrade autoprefixer to v9.4.3

* Update babel-loader to v8.0.4

* Upgrade css-loader to v2.1.0

* Upgrade file-loader to v3.0.1

* Update marky to v1.2.1

* Update mini-css-extract-plugin to v0.5.0

* Update offline-plugin to v5.0.6

* Update style-loader to v0.23.1

* Update eslint-plugin-jsx-a11y to v6.1.2

* yarn upgrade

* fix

* Replace webpack-manifest-plugin to webpack-assets-manifest

* Replace node-zopfli to @gfz/zopfli

* Remove monkey-patch for http-link-header

.postcssrc.yml

@@ -1,9 +0,0 @@
-plugins:
-  postcss-smart-import: {}
-  precss: {}
-  autoprefixer:
-    browsers:
-      - last 2 versions
-      - IE >= 11
-      - iOS >= 9
-  postcss-object-fit-images: {}

app/javascript/mastodon/api.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
+import LinkHeader from 'http-link-header';
 import ready from './ready';
-import LinkHeader from './link_header';
 
 export const getLinks = response => {
   const value = response.headers.link;

app/javascript/mastodon/features/introduction/index.js

@@ -98,8 +98,8 @@ FrameInteractions.propTypes = {
   onNext: PropTypes.func.isRequired,
 };
 
-@connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
-export default class Introduction extends React.PureComponent {
+export default @connect(state => ({ domain: state.getIn(['meta', 'domain']) }))
+class Introduction extends React.PureComponent {
 
   static propTypes = {
     domain: PropTypes.string.isRequired,

app/javascript/mastodon/features/ui/containers/columns_area_container.js

@@ -6,4 +6,4 @@ const mapStateToProps = state => ({
   isModalOpen: !!state.get('modal').modalType,
 });
 
-export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea);
+export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea);

app/javascript/mastodon/features/ui/containers/loading_bar_container.js

@@ -1,8 +1,8 @@
 import { connect }    from 'react-redux';
 import LoadingBar from 'react-redux-loading-bar';
 
-const mapStateToProps = (state) => ({
-  loading: state.get('loadingBar'),
+const mapStateToProps = (state, ownProps) => ({
+  loading: state.get('loadingBar')[ownProps.scope || 'default'],
 });
 
 export default connect(mapStateToProps)(LoadingBar.WrappedComponent);

app/javascript/mastodon/features/ui/index.js

@@ -134,7 +134,7 @@ class SwitchingColumnsArea extends React.PureComponent {
   });
 
   setRef = c => {
-    this.node = c.getWrappedInstance().getWrappedInstance();
+    this.node = c.getWrappedInstance();
   }
 
   render () {

app/javascript/mastodon/link_header.js

@@ -1,33 +0,0 @@
-import Link from 'http-link-header';
-import querystring from 'querystring';
-
-Link.parseAttrs = (link, parts) => {
-  let match = null;
-  let attr  = '';
-  let value = '';
-  let attrs = '';
-
-  let uriAttrs = /<(.*)>;\s*(.*)/gi.exec(parts);
-
-  if(uriAttrs) {
-    attrs = uriAttrs[2];
-    link  = Link.parseParams(link, uriAttrs[1]);
-  }
-
-  while(match = Link.attrPattern.exec(attrs)) { // eslint-disable-line no-cond-assign
-    attr  = match[1].toLowerCase();
-    value = match[4] || match[3] || match[2];
-
-    if( /\*$/.test(attr)) {
-      Link.setAttr(link, attr, Link.parseExtendedValue(value));
-    } else if(/%/.test(value)) {
-      Link.setAttr(link, attr, querystring.decode(value));
-    } else {
-      Link.setAttr(link, attr, value);
-    }
-  }
-
-  return link;
-};
-
-export default Link;

app/javascript/mastodon/store/configureStore.js

@@ -11,5 +11,5 @@ export default function configureStore() {
     loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
     errorsMiddleware(),
     soundsMiddleware()
-  ), window.devToolsExtension ? window.devToolsExtension() : f => f));
+  ), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f));
 };

config/webpack/loaders/sass.js

@@ -1,22 +1,23 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { env } = require('../configuration.js');
 
 module.exports = {
   test: /\.s?css$/i,
   use: [
     MiniCssExtractPlugin.loader,
+    'css-loader',
     {
-      loader: 'css-loader',
+      loader: 'postcss-loader',
       options: {
-        minimize: env.NODE_ENV === 'production',
+        sourceMap: true,
       },
     },
     {
-      loader: 'postcss-loader',
+      loader: 'sass-loader',
       options: {
+        fiber: require('fibers'),
+        implementation: require('sass'),
         sourceMap: true,
       },
     },
-    'sass-loader',
   ],
 };

config/webpack/production.js

@@ -3,6 +3,7 @@
 const merge = require('webpack-merge');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const zopfli = require('@gfx/zopfli');
 const sharedConfig = require('./shared.js');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const OfflinePlugin = require('offline-plugin');
@@ -10,16 +11,6 @@ const { publicPath } = require('./configuration.js');
 const path = require('path');
 const { URL } = require('url');
 
-let compressionAlgorithm;
-try {
-  const zopfli = require('node-zopfli');
-  compressionAlgorithm = (content, options, fn) => {
-    zopfli.gzip(content, options, fn);
-  };
-} catch (error) {
-  compressionAlgorithm = 'gzip';
-}
-
 let attachmentHost;
 
 if (process.env.S3_ENABLED === 'true') {
@@ -69,7 +60,9 @@ module.exports = merge(sharedConfig, {
 
   plugins: [
     new CompressionPlugin({
-      algorithm: compressionAlgorithm,
+      algorithm(input, compressionOptions, callback) {
+        return zopfli.gzip(input, compressionOptions, callback);
+      },
       test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/,
     }),
     new BundleAnalyzerPlugin({ // generates report.html and stats.json

config/webpack/shared.js

@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const { basename, dirname, join, relative, resolve } = require('path');
 const { sync } = require('glob');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const AssetsManifestPlugin = require('webpack-assets-manifest');
 const extname = require('path-complete-extname');
 const { env, settings, themes, output, loadersDir } = require('./configuration.js');
 const localePackPaths = require('./generateLocalePacks');
@@ -75,10 +75,9 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: env.NODE_ENV === 'production' ? '[name]-[contenthash].css' : '[name].css',
     }),
-    new ManifestPlugin({
-      publicPath: output.publicPath,
-      writeToFileEmit: true,
-      filter: file => !file.isAsset || file.isModuleAsset,
+    new AssetsManifestPlugin({
+      publicPath: true,
+      writeToDisk: true,
     }),
   ],
 

package.json

@@ -25,132 +25,133 @@
   ],
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.0.1",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
-    "@babel/plugin-transform-react-jsx-self": "^7.0.0",
-    "@babel/plugin-transform-react-jsx-source": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-proposal-decorators": "^7.2.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
+    "@babel/plugin-transform-react-jsx-self": "^7.2.0",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
     "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
+    "@babel/runtime": "^7.2.0",
+    "@gfx/zopfli": "^1.0.10",
     "array-includes": "^3.0.3",
-    "autoprefixer": "^8.6.5",
-    "axios": "~0.16.2",
+    "autoprefixer": "^9.4.3",
+    "axios": "^0.18.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^8.0.2",
+    "babel-loader": "^8.0.4",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-preval": "^3.0.1",
-    "babel-plugin-react-intl": "^3.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.15",
+    "babel-plugin-react-intl": "^3.0.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
+    "babel-runtime": "^6.26.0",
     "classnames": "^2.2.5",
     "compression-webpack-plugin": "^2.0.0",
     "cross-env": "^5.1.4",
-    "css-loader": "^1.0.0",
+    "css-loader": "^2.1.0",
+    "cssnano": "^4.1.8",
     "detect-passive-events": "^1.0.2",
-    "dotenv": "^4.0.0",
+    "dotenv": "^6.2.0",
     "emoji-mart": "Gargron/emoji-mart#build",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
-    "express": "^4.16.2",
-    "file-loader": "^2.0.0",
+    "express": "^4.16.4",
+    "fibers": "^3.1.1",
+    "file-loader": "^3.0.1",
     "font-awesome": "^4.7.0",
     "glob": "^7.1.1",
     "history": "^4.7.2",
-    "http-link-header": "^0.8.0",
+    "http-link-header": "^1.0.2",
     "immutable": "^3.8.2",
     "imports-loader": "^0.8.0",
-    "intersection-observer": "^0.5.0",
+    "intersection-observer": "^0.5.1",
     "intl": "^1.2.5",
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
     "is-nan": "^1.2.1",
     "js-yaml": "^3.11.0",
-    "lodash": "^4.17.5",
+    "lodash": "^4.7.11",
     "mark-loader": "^0.1.6",
-    "marky": "^1.2.0",
-    "mini-css-extract-plugin": "^0.4.2",
+    "marky": "^1.2.1",
+    "mini-css-extract-plugin": "^0.5.0",
     "mkdirp": "^0.5.1",
-    "node-sass": "^4.9.2",
     "npmlog": "^4.1.2",
     "object-assign": "^4.1.1",
     "object-fit-images": "^3.2.3",
     "object.values": "^1.0.4",
-    "offline-plugin": "^5.0.5",
+    "offline-plugin": "^5.0.6",
     "path-complete-extname": "^1.0.0",
     "pg": "^6.4.0",
     "postcss-loader": "^3.0.0",
     "postcss-object-fit-images": "^1.1.2",
-    "postcss-smart-import": "^0.7.6",
-    "precss": "^3.1.2",
     "prop-types": "^15.5.10",
     "punycode": "^2.1.0",
-    "rails-ujs": "^5.2.0",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
-    "react-hotkeys": "^0.10.0",
+    "rails-ujs": "^5.2.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-hotkeys": "^1.1.4",
     "react-immutable-proptypes": "^2.1.0",
     "react-immutable-pure-component": "^1.1.1",
-    "react-intl": "^2.4.0",
+    "react-intl": "^2.7.2",
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
     "react-overlays": "^0.8.3",
-    "react-redux": "^5.0.4",
-    "react-redux-loading-bar": "^2.9.3",
+    "react-redux": "^6.0.0",
+    "react-redux-loading-bar": "^4.1.0",
     "react-router-dom": "^4.1.1",
     "react-router-scroll-4": "^1.0.0-beta.1",
-    "react-select": "^2.0.0",
+    "react-select": "^2.2.0",
     "react-sparklines": "^1.7.0",
-    "react-swipeable-views": "^0.12.17",
-    "react-textarea-autosize": "^5.2.1",
+    "react-swipeable-views": "^0.13.0",
+    "react-textarea-autosize": "^7.1.0",
     "react-toggle": "^4.0.1",
     "redis": "^2.7.1",
-    "redux": "^3.7.1",
+    "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0",
-    "rellax": "^1.6.2",
+    "rellax": "^1.7.1",
     "requestidlecallback": "^0.3.0",
-    "reselect": "^3.0.1",
+    "reselect": "^4.0.0",
     "rimraf": "^2.6.1",
+    "sass": "^1.15.2",
     "sass-loader": "^7.0.3",
-    "stringz": "^0.3.0",
-    "style-loader": "^0.23.0",
+    "stringz": "^1.0.0",
+    "style-loader": "0.23.1",
     "substring-trie": "^1.0.2",
     "throng": "^4.0.0",
     "tiny-queue": "^0.2.1",
-    "uglifyjs-webpack-plugin": "^1.2.7",
+    "uglifyjs-webpack-plugin": "^2.1.1",
     "uuid": "^3.1.0",
     "uws": "10.148.0",
-    "webpack": "^4.18.0",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.0.8",
-    "webpack-manifest-plugin": "^2.0.4",
-    "webpack-merge": "^4.1.3",
+    "webpack": "^4.28.3",
+    "webpack-assets-manifest": "^3.1.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-merge": "^4.1.5",
     "websocket.js": "^0.1.12"
   },
   "devDependencies": {
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
     "eslint": "^4.19.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-import": "~2.8.0",
+    "eslint-plugin-jsx-a11y": "~6.1.2",
+    "eslint-plugin-promise": "~3.8.0",
+    "eslint-plugin-react": "~7.8.2",
     "jest": "^23.6.0",
-    "raf": "^3.4.0",
+    "raf": "^3.4.1",
     "react-intl-translations-manager": "^5.0.3",
-    "react-test-renderer": "^16.5.0",
-    "webpack-dev-server": "^3.1.8",
+    "react-test-renderer": "^16.7.0",
+    "webpack-dev-server": "^3.1.14",
     "yargs": "^8.0.2"
   },
   "optionalDependencies": {
-    "fsevents": "*",
-    "node-zopfli": "^2.0.2"
+    "fsevents": "*"
   }
 }

postcss.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      browsers: [
+        'last 2 versions',
+        'IE >= 11',
+        'iOS >= 9',
+      ],
+    },
+    'postcss-object-fit-images': {},
+    cssnano: {},
+  },
+};