Update dependencies (mciastek#23)

* Update dependencies

* Update test config. Update babel config.

* Update css extraction. Update babel. Add size tracking.

* Update css config. Build.

* 0.6.2

.babelrc

@@ -1,15 +1,27 @@
 {
   "presets": [
-    "es2015",
-    "stage-0"
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": 3
+      }
+    ]
   ],
   "env": {
     "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ],
       "plugins": [
-        ["transform-runtime", {
-          "polyfill": false,
-          "regenerator": true,
-        }]
+        "@babel/transform-runtime"
       ]
     }
   }

.eslintrc

@@ -29,7 +29,7 @@
     "jest": true
   },
   "globals": {
-    "process": 1,
-    "module": 1
+    "process": "readonly",
+    "module": "readonly"
   }
 }

.gitignore

@@ -30,3 +30,6 @@ node_modules
 
 # Dev files to ignore
 dist/*.map
+
+# waiting for https://github.com/GoogleChromeLabs/size-plugin/issues/28
+size-plugin.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sal.js",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Performance focused, lightweight scroll animation library",
   "main": "dist/sal.js",
   "repository": {
@@ -30,37 +30,41 @@
     "css"
   ],
   "scripts": {
-    "build": "webpack",
+    "build": "NODE_ENV=production webpack",
     "pretest": "./node_modules/.bin/eslint ./src/**/*.js",
     "test": "NODE_ENV=test jest --verbose",
     "test:watch": "NODE_ENV=test jest --verbose --watchAll"
   },
   "author": "Mirosław Ciastek",
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^7.1.4",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^21.2.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.7.2",
-    "eslint-config-airbnb-base": "^12.0.0",
-    "eslint-plugin-import": "^2.7.0",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/runtime": "^7.6.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "core-js": "^3.2.1",
+    "css-loader": "^3.2.0",
+    "cssnano": "^4.1.10",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.18.2",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^21.2.1",
-    "node-sass": "4.10.0",
-    "postcss-loader": "^2.0.6",
-    "pug": "^2.0.3",
+    "jest": "^24.9.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "pug": "^2.0.4",
     "pug-loader": "^2.4.0",
-    "puppeteer": "^0.12.0",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "webpack": "^3.6.0"
+    "puppeteer": "^1.19.0",
+    "sass-loader": "^8.0.0",
+    "size-plugin": "^2.0.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.8"
   },
   "jest": {
     "transform": {

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
-    autoprefixer: {},
+    'postcss-preset-env': {},
+    cssnano: {},
   },
 };

src/sal.js

@@ -61,7 +61,7 @@ const reverse = (entry) => {
  * Check if element was animated
  * @param  {Node} element
  */
-const isAnimated = element => (
+const isAnimated = (element) => (
   element.classList.contains(options.animateClassName)
 );
 
@@ -84,10 +84,10 @@ const disableAnimations = () => {
  * @return {Boolean}
  */
 const isDisabled = () => (
-  options.disabled ||
-  (
-    (typeof options.disabled === 'function') &&
-    options.disabled()
+  options.disabled
+  || (
+    (typeof options.disabled === 'function')
+    && options.disabled()
   )
 );
 
@@ -133,10 +133,10 @@ const enable = () => {
 
   elements = [].filter.call(
     document.querySelectorAll(options.selector),
-    element => !isAnimated(element, options.animateClassName),
+    (element) => !isAnimated(element, options.animateClassName),
   );
 
-  elements.forEach(element => intersectionObserver.observe(element));
+  elements.forEach((element) => intersectionObserver.observe(element));
 };
 
 /**

webpack.config.js

@@ -1,9 +1,10 @@
 const path = require('path');
-const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SizePlugin = require('size-plugin');
 
 module.exports = {
+  mode: 'production',
   entry: './src/sal.js',
   devtool: 'source-map',
   output: {
@@ -20,27 +21,33 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        use: 'babel-loader',
       }, {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader?minimize&sourceMap!postcss-loader!sass-loader',
-        }),
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader?sourceMap',
+          'postcss-loader',
+          'sass-loader',
+        ],
       },
       {
         test: /\.pug$/,
-        loader: 'pug-loader',
+        use: 'pug-loader',
       },
     ],
   },
   plugins: [
-    new ExtractTextPlugin('sal.css'),
-    new webpack.optimize.UglifyJsPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'sal.css',
+    }),
     new HtmlWebpackPlugin({
       template: './website/template/index.pug',
       filename: path.resolve(__dirname, './index.html'),
       inject: false,
     }),
+    new SizePlugin({
+      writeFile: false,
+    }),
   ],
 };