Upgrade to NodeJS 12

Update javascript deps to latest version. Rebuild assets - Keep `stylehint` in a lower version because starting at v9.0.0 it generates too much errors. We might fix them later. - Don't touch `materialize-css` to avoid too much side effect. We might update it later (to 1.0.0).
tsknadaj · Aug 25, 2020 · dce3c84 · dce3c84
1 parent 092cab5
commit dce3c84
Show file tree

Hide file tree

Showing 20 changed files with 3,819 additions and 3,152 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,10 @@
 {
-    "presets": [
-        ["env", {"modules": false}]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
     ]
+  ]
 }
diff --git a/.travis.yml b/.travis.yml
@@ -26,9 +26,6 @@ php:
     - 7.3
     - 7.4
 
-node_js:
-    - "5"
-
 env:
     - DB=mysql
     - DB=pgsql
@@ -56,7 +53,7 @@ before_install:
     - yes | pecl install imagick
 
 install:
-    - if [[ $ASSETS = build ]]; then source ~/.nvm/nvm.sh && nvm install 6.10; fi;
+    - if [[ $ASSETS = build ]]; then source ~/.nvm/nvm.sh && nvm install 12; fi;
     - if [[ $ASSETS = build ]]; then npm install -g yarn@latest; fi;
     - if [[ $ASSETS = build ]]; then yarn install; fi;
     - composer install -o --no-interaction --no-progress --prefer-dist --no-suggest

diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js
@@ -1,18 +1,17 @@
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const webpack = require('webpack');
 const commonConfig = require('./common.js');
 
 module.exports = function () {
-  return webpackMerge(commonConfig(), {
+  return merge(commonConfig(), {
     devtool: 'eval-source-map',
     output: {
       filename: '[name].dev.js',
     },
-
+    mode: 'development',
     devServer: {
       hot: true,
       // enable HMR on the server
-
       contentBase: './web',
       // match the output path
     },
@@ -33,7 +32,7 @@ module.exports = function () {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['env'],
+              presets: ['@babel/preset-env']
             },
           },
         },
@@ -47,7 +46,12 @@ module.exports = function () {
                 importLoaders: 1,
               },
             },
-            'postcss-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: [require('autoprefixer')({})],
+              },
+            },
             'sass-loader',
           ],
         },

diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js
@@ -1,35 +1,43 @@
 const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const { merge } = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const commonConfig = require('./common.js');
 
 module.exports = function () {
-  return webpackMerge(commonConfig(), {
+  return merge(commonConfig(), {
     output: {
       filename: '[name].js',
     },
+    mode: 'production',
     devtool: 'source-map',
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true,
+          terserOptions: {
+            output: {
+              comments: false,
+            },
+          },
+          extractComments: false,
+        }),
+      ]
+    },
     plugins: [
       new webpack.DefinePlugin({
         'process.env': {
           'NODE_ENV': JSON.stringify('production'),
         },
       }),
-      new webpack.optimize.UglifyJsPlugin({
-        beautify: false,
-        mangle: {
-          screw_ie8: true,
-          keep_fnames: true,
-        },
-        compress: {
-          screw_ie8: true,
-          warnings: false,
-        },
-        comments: false,
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+        chunkFilename: '[id].css',
       }),
-      new ExtractTextPlugin('[name].css'),
       new ManifestPlugin({
         fileName: 'manifest.json',
       }),
@@ -48,32 +56,33 @@ module.exports = function () {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['env'],
+              presets: ['@babel/preset-env']
             },
           },
         },
         {
-          test: /\.(s)?css$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [
-              {
-                loader: 'css-loader',
-                options: {
-                  importLoaders: 1,
-                  minimize: {
-                    discardComments: {
-                      removeAll: true,
-                    },
-                    core: true,
-                    minifyFontValues: true,
-                  },
-                },
+          test: /\.(sa|sc|c)ss$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                hmr: process.env.NODE_ENV === 'development',
               },
-              'postcss-loader',
-              'sass-loader',
-            ],
-          }),
+            },
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: [require('autoprefixer')({})],
+              },
+            },
+            'sass-loader',
+          ],
         },
         {
           test: /\.(jpg|png|gif|svg|ico)$/,

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "doc": "docs"
   },
   "engines": {
-    "node": ">=6.10"
+    "node": ">=12"
   },
   "repository": {
     "type": "git",
@@ -36,31 +36,32 @@
     "url": "https://github.com/wallabag/wallabag/issues"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.4.0",
-    "css-loader": "^0.28.0",
-    "eslint": "^4.0.0",
-    "eslint-config-airbnb-base": "^11.1.3",
-    "eslint-loader": "^1.7.1",
+    "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.0",
+    "autoprefixer": "^9.8.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.2",
+    "eslint": "^7.7.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.2.0",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.0",
+    "file-loader": "^6.0.0",
     "lato-font": "^3.0.0",
-    "node-sass": "^4.5.2",
-    "postcss-loader": "^2.0.5",
-    "sass-loader": "^6.0.3",
-    "style-loader": "^0.18.2",
+    "mini-css-extract-plugin": "^0.10.0",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^10.0.0",
+    "style-loader": "^1.2.1",
     "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
-    "stylelint-webpack-plugin": "^0.7.0",
-    "url-loader": "^0.5.8",
-    "webpack": "^2.3.2",
-    "webpack-dev-server": "^2.4.4",
-    "webpack-manifest-plugin": "^1.1.0",
-    "webpack-merge": "^4.1.0"
+    "stylelint-webpack-plugin": "^1.0.0",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-manifest-plugin": "^2.2.0",
+    "webpack-merge": "^5.1.2"
   },
   "dependencies": {
     "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
@@ -76,7 +77,7 @@
     "mathjax": "^3.0.0",
     "mousetrap": "^1.6.0",
     "ptsans-npm-webfont": "^0.0.4",
-    "roboto-fontface": "^0.7.0",
+    "roboto-fontface": "^0.10.0",
     "waypoints": "^4.0.1"
   },
   "scripts": {

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/web/wallassets/baggy.css b/web/wallassets/baggy.css
diff --git a/web/wallassets/baggy.css.map b/web/wallassets/baggy.css.map
diff --git a/web/wallassets/baggy.js b/web/wallassets/baggy.js
diff --git a/web/wallassets/baggy.js.map b/web/wallassets/baggy.js.map
diff --git a/web/wallassets/manifest.json b/web/wallassets/manifest.json
@@ -1,66 +1,21 @@
 {
   "baggy.css": "baggy.css",
-  "baggy.css.map": "baggy.css.map",
   "baggy.js": "baggy.js",
-  "fonts/IcoMoon-Free.ttf": "fonts/IcoMoon-Free.ttf",
-  "fonts/MaterialIcons-Regular.eot": "fonts/MaterialIcons-Regular.eot",
-  "fonts/MaterialIcons-Regular.ttf": "fonts/MaterialIcons-Regular.ttf",
-  "fonts/MaterialIcons-Regular.woff": "fonts/MaterialIcons-Regular.woff",
-  "fonts/MaterialIcons-Regular.woff2": "fonts/MaterialIcons-Regular.woff2",
-  "fonts/Roboto-Bold.woff": "fonts/Roboto-Bold.woff",
-  "fonts/Roboto-Bold.woff2": "fonts/Roboto-Bold.woff2",
-  "fonts/Roboto-Light.woff": "fonts/Roboto-Light.woff",
-  "fonts/Roboto-Light.woff2": "fonts/Roboto-Light.woff2",
-  "fonts/Roboto-Medium.woff": "fonts/Roboto-Medium.woff",
-  "fonts/Roboto-Medium.woff2": "fonts/Roboto-Medium.woff2",
-  "fonts/Roboto-Regular.woff": "fonts/Roboto-Regular.woff",
-  "fonts/Roboto-Regular.woff2": "fonts/Roboto-Regular.woff2",
-  "fonts/Roboto-Thin.woff": "fonts/Roboto-Thin.woff",
-  "fonts/Roboto-Thin.woff2": "fonts/Roboto-Thin.woff2",
-  "fonts/lato-black-italic.woff": "fonts/lato-black-italic.woff",
-  "fonts/lato-black-italic.woff2": "fonts/lato-black-italic.woff2",
-  "fonts/lato-black.woff": "fonts/lato-black.woff",
-  "fonts/lato-black.woff2": "fonts/lato-black.woff2",
-  "fonts/lato-bold-italic.woff": "fonts/lato-bold-italic.woff",
-  "fonts/lato-bold-italic.woff2": "fonts/lato-bold-italic.woff2",
-  "fonts/lato-bold.woff": "fonts/lato-bold.woff",
-  "fonts/lato-bold.woff2": "fonts/lato-bold.woff2",
-  "fonts/lato-hairline-italic.woff": "fonts/lato-hairline-italic.woff",
-  "fonts/lato-hairline-italic.woff2": "fonts/lato-hairline-italic.woff2",
-  "fonts/lato-hairline.woff": "fonts/lato-hairline.woff",
-  "fonts/lato-hairline.woff2": "fonts/lato-hairline.woff2",
-  "fonts/lato-heavy-italic.woff": "fonts/lato-heavy-italic.woff",
-  "fonts/lato-heavy-italic.woff2": "fonts/lato-heavy-italic.woff2",
-  "fonts/lato-heavy.woff": "fonts/lato-heavy.woff",
-  "fonts/lato-heavy.woff2": "fonts/lato-heavy.woff2",
-  "fonts/lato-light-italic.woff": "fonts/lato-light-italic.woff",
-  "fonts/lato-light-italic.woff2": "fonts/lato-light-italic.woff2",
-  "fonts/lato-light.woff": "fonts/lato-light.woff",
-  "fonts/lato-light.woff2": "fonts/lato-light.woff2",
-  "fonts/lato-medium-italic.woff": "fonts/lato-medium-italic.woff",
-  "fonts/lato-medium-italic.woff2": "fonts/lato-medium-italic.woff2",
-  "fonts/lato-medium.woff": "fonts/lato-medium.woff",
-  "fonts/lato-medium.woff2": "fonts/lato-medium.woff2",
-  "fonts/lato-normal-italic.woff": "fonts/lato-normal-italic.woff",
-  "fonts/lato-normal-italic.woff2": "fonts/lato-normal-italic.woff2",
-  "fonts/lato-normal.woff": "fonts/lato-normal.woff",
-  "fonts/lato-normal.woff2": "fonts/lato-normal.woff2",
-  "fonts/lato-semibold-italic.woff": "fonts/lato-semibold-italic.woff",
-  "fonts/lato-semibold-italic.woff2": "fonts/lato-semibold-italic.woff2",
-  "fonts/lato-semibold.woff": "fonts/lato-semibold.woff",
-  "fonts/lato-semibold.woff2": "fonts/lato-semibold.woff2",
-  "fonts/lato-thin-italic.woff": "fonts/lato-thin-italic.woff",
-  "fonts/lato-thin-italic.woff2": "fonts/lato-thin-italic.woff2",
-  "fonts/lato-thin.woff": "fonts/lato-thin.woff",
-  "fonts/lato-thin.woff2": "fonts/lato-thin.woff2",
-  "img/annotator-glyph-sprite.png?embed": "img/annotator-glyph-sprite.png",
-  "img/annotator-icon-sprite.png?embed": "img/annotator-icon-sprite.png",
+  "baggy.css.map": "baggy.css.map",
+  "baggy.js.map": "baggy.js.map",
   "material.css": "material.css",
-  "material.css.map": "material.css.map",
   "material.js": "material.js",
+  "material.css.map": "material.css.map",
+  "material.js.map": "material.js.map",
   "public.css": "public.css",
-  "public.css.map": "public.css.map",
   "public.js": "public.js",
+  "public.css.map": "public.css.map",
+  "public.js.map": "public.js.map",
+  "fonts/index.scss": "fonts/IcoMoon-Free.ttf",
+  "fonts/material-design-icons.css": "fonts/MaterialIcons-Regular.woff2",
+  "fonts/materialize.css": "fonts/Roboto-Thin.woff2",
+  "fonts/lato-font.css": "fonts/lato-thin.woff2",
+  "img/annotator.css": "img/annotator-icon-sprite.png",
   "themes/_global/img/appicon/apple-touch-icon-114.png": "themes/_global/img/appicon/apple-touch-icon-114.png",
   "themes/_global/img/appicon/apple-touch-icon-120.png": "themes/_global/img/appicon/apple-touch-icon-120.png",
   "themes/_global/img/appicon/apple-touch-icon-144.png": "themes/_global/img/appicon/apple-touch-icon-144.png",

diff --git a/web/wallassets/material.css b/web/wallassets/material.css
diff --git a/web/wallassets/material.css.map b/web/wallassets/material.css.map
diff --git a/web/wallassets/material.js b/web/wallassets/material.js
diff --git a/web/wallassets/material.js.map b/web/wallassets/material.js.map
diff --git a/web/wallassets/public.css b/web/wallassets/public.css