Upgrade to Webpack 4 and Babel 7 (#58)

* Fix eslint warnings

* Upgrade to Webpack 4 and Babel 7

* Update Node.js versions

.travis.yml

@@ -8,9 +8,9 @@ os:
   - linux
 
 node_js:
+  - '10'
+  - '8'
   - '6'
-  - '5'
-  - '4'
 
 before_install:
   - npm install -g npm
@@ -36,4 +36,4 @@ deploy:
   on:
     # https://docs.travis-ci.com/user/deployment#Conditional-Releases-with-on
     tags: true  # Deploy app only when a tag is applied to the commit
-    node: '4'
+    node: '6'

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    extends: '@trendmicro/babel-config',
+    presets: [
+        '@babel/preset-env',
+        '@babel/preset-react'
+    ]
+};

examples/index.jsx

@@ -17,7 +17,7 @@ class App extends React.Component {
 
     simpleList = null;
 
-    addMoreItems() {
+    addMoreItems = () => {
         const items = [
             'Apple',
             'Banana',
@@ -33,8 +33,11 @@ class App extends React.Component {
             'Strawberry'
         ];
         const i = random(0, items.length - 1);
-        this.setState({ groupLeft: this.state.groupLeft.concat(items[i]) });
-    }
+        this.setState(state => ({
+            groupLeft: state.groupLeft.concat(items[i])
+        }));
+    };
+
     render() {
         const simpleList = this.state.simpleList.map((val, key) => (
             <li key={uniqueId()} data-id={val}>List Item {val}</li>
@@ -96,7 +99,7 @@ class App extends React.Component {
                         <button
                             type="button"
                             className="btn btn-default"
-                            onClick={::this.addMoreItems}
+                            onClick={this.addMoreItems}
                         >
                             Add more items
                         </button>
@@ -113,7 +116,6 @@ class App extends React.Component {
                                     }
                                 }}
                                 className="block-list"
-                                ref="group-left"
                                 onChange={(items) => {
                                     this.setState({ groupLeft: items });
                                 }}
@@ -135,7 +137,6 @@ class App extends React.Component {
                                 onChange={(items) => {
                                     this.setState({ groupRight: items });
                                 }}
-                                ref="group-right"
                             >
                                 {groupRight}
                             </Sortable>

examples/webpack.config.js

@@ -1,10 +1,11 @@
-var path = require('path');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var stylusLoader = require('stylus-loader');
-var nib = require('nib');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const stylusLoader = require('stylus-loader');
+const nib = require('nib');
+const babelConfig = require('../babel.config');
 
 module.exports = {
+    mode: 'development',
     devtool: 'source-map',
     entry: path.resolve(__dirname, 'index.jsx'),
     output: {
@@ -28,19 +29,33 @@ module.exports = {
             {
                 test: /\.jsx?$/,
                 loader: 'babel-loader',
+                options: {
+                    ...babelConfig
+                },
                 exclude: /(node_modules|bower_components)/
             },
             {
                 test: /\.styl$/,
                 use: [
                     'style-loader',
-                    'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            localIdentName: '[local]---[hash:base64:5]',
+                            camelCase: true,
+                            importLoaders: 1
+                        }
+                    },
                     'stylus-loader'
                 ]
             },
             {
                 test: /\.css$/,
-                loader: 'style-loader!css-loader'
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ]
             },
             {
                 test: /\.(png|jpg)$/,
@@ -64,11 +79,6 @@ module.exports = {
         ]
     },
     plugins: [
-        new webpack.LoaderOptionsPlugin({
-            debug: true,
-        }),
-        new webpack.NamedModulesPlugin(),
-        new webpack.NoEmitOnErrorsPlugin(),
         new stylusLoader.OptionsPlugin({
             default: {
                 // nib - CSS3 extensions for Stylus

package.json

@@ -4,16 +4,15 @@
   "description": "A React component built on top of Sortable (https://github.com/SortableJS/Sortable).",
   "main": "lib/index.js",
   "scripts": {
-    "prepublish": "npm run lint && npm test && npm run build && npm run dist && npm run build-examples && npm run release",
+    "prepublish": "npm run eslint && npm test && npm run build && npm run dist && npm run build-examples && npm run release",
     "build": "babel --out-dir ./lib ./src",
-    "build-examples": "cd examples; webpack",
-    "dist": "webpack; BUILD_ENV=dist webpack",
+    "build-examples": "cd examples; webpack-cli",
+    "dist": "webpack-cli; BUILD_ENV=dist webpack-cli",
     "release": "mkdir -p releases; cp -f dist/react-sortable.js releases/react-sortable-${npm_package_version}.js; cp -f dist/react-sortable.min.js releases/react-sortable-${npm_package_version}.min.js",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint --fix ./src",
-    "precommit-check": "npm run lint",
-    "test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
-    "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
+    "eslint": "eslint ./src",
+    "precommit-check": "npm run eslint",
+    "test": "tap test/*.js --node-arg=--require --node-arg=@babel/register --node-arg=--require --node-arg=@babel/polyfill",
+    "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register --nyc-arg=--require --nyc-arg=@babel/polyfill | coveralls",
     "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
   },
   "pre-commit": [
@@ -46,32 +45,36 @@
     "prop-types": ">=15.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.2",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "coveralls": "^2.13.1",
-    "eslint": "~3.19.0",
-    "eslint-config-trendmicro": "~0.5.1",
-    "eslint-loader": "~1.7.1",
-    "eslint-plugin-import": "~2.2.0",
-    "eslint-plugin-jsx-a11y": "~2.2.3",
-    "eslint-plugin-react": "~6.10.3",
-    "html-webpack-plugin": "^2.28.0",
-    "lodash": "^4.17.4",
-    "nib": "^1.1.2",
+    "@babel/cli": "~7.2.3",
+    "@babel/core": "~7.2.2",
+    "@babel/polyfill": "~7.2.5",
+    "@babel/preset-env": "~7.2.3",
+    "@babel/preset-react": "~7.0.0",
+    "@babel/register": "~7.0.0",
+    "@trendmicro/babel-config": "~1.0.0-alpha",
+    "@trendmicro/react-anchor": "~0.5.6",
+    "@trendmicro/react-buttons": "~1.3.1",
+    "babel-eslint": "~10.0.1",
+    "babel-loader": "~8.0.4",
+    "coveralls": "~3.0.2",
+    "eslint": "~5.11.1",
+    "eslint-config-trendmicro": "~1.4.1",
+    "eslint-loader": "~2.1.1",
+    "eslint-plugin-import": "~2.14.0",
+    "eslint-plugin-jsx-a11y": "~6.1.2",
+    "eslint-plugin-react": "~7.11.1",
+    "html-webpack-plugin": "~3.2.0",
+    "lodash": "~4.17.4",
+    "nib": "~1.1.2",
     "react": ">=15.0.0",
     "react-dom": ">=15.0.0",
-    "sortablejs": "^1.6.1",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "tap": "^10.3.2",
-    "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2",
+    "sortablejs": "~1.6.1",
+    "stylus-loader": "~3.0.1",
+    "tap": "~12.1.1",
+    "terser-webpack-plugin": "~1.2.1",
+    "webpack": "~4.28.2",
+    "webpack-cli": "~3.1.2",
+    "webpack-dev-server": "~3.1.14",
     "which": "~1.2.14"
   }
 }

src/index.js

@@ -1,3 +1,3 @@
-import Sortable from './Sortable';
+const Sortable = require('./Sortable').default;
 
 module.exports = Sortable;

webpack.config.babel.js → webpack.config.js

@@ -1,28 +1,30 @@
-import path from 'path';
-import webpack from 'webpack';
-import pkg from './package.json';
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const pkg = require('./package.json');
 
 const banner = pkg.name + ' v' + pkg.version + ' | (c) ' + new Date().getFullYear() + ' ' + pkg.author + ' | ' + pkg.license + ' | ' + pkg.homepage;
 const env = process.env.BUILD_ENV;
-let plugins = [
-    new webpack.BannerPlugin(banner)
-];
 
-if (env === 'dist') {
-    plugins = plugins.concat([
-        new webpack.optimize.UglifyJsPlugin({ minimize: true })
-    ]);
-}
-
-export default {
+module.exports = {
+    mode: 'production',
     entry: path.resolve(__dirname, 'lib/index.js'),
     output: {
         path: path.join(__dirname, 'dist'),
-        filename: env === 'dist' ? 'react-sortable.min.js' : 'react-sortable.js',
+        filename: (env === 'dist') ? 'react-sortable.min.js' : 'react-sortable.js',
         libraryTarget: 'umd',
         library: 'ReactSortable'
     },
-    plugins: plugins,
+    optimization: {
+        minimizer: [
+            (env === 'dist') && (
+                new TerserPlugin()
+            )
+        ].filter(Boolean)
+    },
+    plugins: [
+        new webpack.BannerPlugin(banner),
+    ],
     externals: {
         'react': {
             root: 'React',