Update: Webpack 4 + dependencies

.eslintrc

@@ -20,7 +20,6 @@
         "describe": false,
         "expect": false,
         "it": false,
-        "sinon": false,
         "assert": false,
         "fixture": false,
         "__": false,

build/webpack.common.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
-const pkg = require('../package.json');
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const pkg = require('../package.json');
 
 const { DefinePlugin } = webpack;
 const NormalPlugin = webpack.NormalModuleReplacementPlugin;
@@ -22,56 +22,30 @@ module.exports = () => {
                 {
                     test: /\.js$/,
                     use: 'babel-loader',
-                    exclude: [
-                        path.resolve('node_modules')
-                    ]
+                    exclude: [path.resolve('node_modules')]
                 },
                 {
                     test: /\.s?css$/,
-                    loader: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: [
-                            {
-                                loader: 'css-loader',
-                                options: {
-                                    importLoaders: 1
-                                }
-                            },
-                            {
-                                loader: 'postcss-loader'
-                            },
-                            {
-                                loader: 'sass-loader'
-                            }
-                        ]
-                    }),
-                    exclude: [
-                        path.resolve('node_modules')
-                    ]
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
                 },
                 {
                     test: /\.(svg|html)$/,
                     loader: 'raw-loader',
-                    exclude: [
-                        path.resolve('node_modules')
-                    ]
+                    exclude: [path.resolve('node_modules')]
                 },
                 {
                     test: /\.(jpe?g|png|gif|woff2|woff)$/,
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]'
                     },
-                    exclude: [
-                        path.resolve('node_modules')
-                    ]
+                    exclude: [path.resolve('node_modules')]
                 }
             ]
         },
         plugins: [
-            new ExtractTextPlugin({
-                filename: '[name].css',
-                allChunks: true
+            new MiniCssExtractPlugin({
+                filename: '[name].css'
             }),
             new DefinePlugin({
                 __NAME__: JSON.stringify(pkg.name),

build/webpack.config.js

@@ -4,11 +4,11 @@ const isRelease = process.env.NODE_ENV === 'production';
 const isDev = process.env.NODE_ENV === 'dev';
 
 const path = require('path');
-const commonConfig = require('./webpack.common.config');
-const { UglifyJsPlugin } = require('webpack').optimize;
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const { BannerPlugin } = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const commonConfig = require('./webpack.common.config');
 const license = require('./license');
 
 /* eslint-disable key-spacing, require-jsdoc */
@@ -38,22 +38,29 @@ if (isRelease) {
         })
     );
 
-    // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
-    config.plugins.push(
-        new UglifyJsPlugin({
-            compress: {
-                warnings: false, // Don't output warnings
-                drop_console: true // Drop console statements
-            },
-            comments: false, // Remove comments
-            sourceMap: false
-        })
-    );
+    // https://webpack.js.org/configuration/optimization/#optimization-minimize
+    config.optimization = {
+        minimizer: [
+            new UglifyJsPlugin({
+                uglifyOptions: {
+                    warnings: false, // Don't output warnings
+                    compress: {
+                        drop_console: true // Drop console statements
+                    },
+                    output: {
+                        comments: false // Remove comments
+                    }
+                },
+                sourceMap: false
+            })
+        ]
+    };
 
     // Optimize CSS - minimize, remove comments and duplicate rules
     config.plugins.push(
         new OptimizeCssAssetsPlugin({
             cssProcessorOptions: {
+                discardComments: { removeAll: true },
                 safe: true
             }
         })

package.json

@@ -12,70 +12,71 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "box-react-ui": "^25.6.0"
+    "box-react-ui": "^25.12.0"
   },
   "devDependencies": {
-    "autoprefixer": "^8.3.0",
+    "autoprefixer": "^9.1.3",
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.3",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.6",
     "babel-jest": "^23.4.2",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-require-ignore": "^0.1.1",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "box-react-ui": "^25.6.0",
+    "box-react-ui": "^25.12.0",
     "chai": "^4.1.2",
-    "chai-dom": "^1.6.0",
+    "chai-dom": "^1.8.0",
     "codeceptjs-webdriverio": "^1.1.0",
-    "commitlint": "^6.1.3",
-    "conventional-changelog-cli": "^1.3.22",
-    "conventional-github-releaser": "^2.0.0",
-    "css-loader": "^0.28.7",
+    "commitlint": "^7.0.0",
+    "conventional-changelog-cli": "^2.0.5",
+    "conventional-github-releaser": "^3.1.2",
+    "css-loader": "^1.0.0",
     "cssnano-cli": "^1.0.5",
     "enzyme-to-json": "^3.3.4",
-    "eslint": "^4.12.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-babel": "^5.0.0",
-    "eslint-plugin-import": "^2.11.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint": "^5.4.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^3.0.1",
+    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "fetch-mock": "^6.0.0",
+    "fetch-mock": "^6.5.2",
     "fetch-mock-forwarder": "^1.0.0",
     "husky": "^0.14.3",
     "jest": "^23.5.0",
     "jest-canvas-mock": "^1.1.0",
-    "lint-staged": "^7.0.4",
-    "mocha": "^5.1.1",
+    "lint-staged": "^7.2.2",
+    "mini-css-extract-plugin": "^0.4.2",
+    "mocha": "^5.2.0",
+    "node-fetch": "^2.2.0",
     "node-noop": "^1.0.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.3",
     "nsp": "^3.2.1",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^2.1.4",
-    "prettier": "^1.12.1",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^1.14.2",
     "prettier-eslint-cli": "^4.4.2",
     "rangy": "^1.3.0",
     "raw-loader": "^0.5.1",
     "rbush": "^2.0.1",
-    "sass-loader": "^7.0.1",
-    "sinon": "^4.1.2",
-    "sinon-chai": "^3.0.0",
-    "sinon-stub-promise": "^4.0.0",
-    "style-loader": "^0.21.0",
-    "stylelint": "^9.1.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.0.0",
-    "stylelint-order": "^0.8.1",
-    "stylelint-scss": "^3.0.1",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.1",
+    "stylelint-order": "^1.0.0",
+    "stylelint-scss": "^3.3.0",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^4.12.0",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.0.7",
     "whatwg-fetch": "^2.0.3"
   },
   "scripts": {

src/__tests__/Annotator-test.js

@@ -171,25 +171,20 @@ describe('Annotator', () => {
         it('should fetch and then render annotations', () => {
             annotator.fetchPromise = Promise.resolve();
             annotator.loadAnnotations();
-            return annotator.fetchPromise
-                .then(() => {
-                    expect(annotator.render).toBeCalled();
-                    expect(annotator.emit).not.toBeCalled();
-                })
-                .catch(() => {
-                    sinon.assert.failException;
-                });
+            return annotator.fetchPromise.then(() => {
+                expect(annotator.render).toBeCalled();
+                expect(annotator.emit).not.toBeCalled();
+            });
         });
 
         it('should emit an error if the annotator fails to fetch and render annotations', () => {
             annotator.fetchPromise = Promise.reject();
             annotator.loadAnnotations();
             return annotator.fetchPromise
                 .then(() => {
-                    sinon.assert.failException;
+                    expect(annotator.render).not.toBeCalled();
                 })
                 .catch((err) => {
-                    expect(annotator.render).not.toBeCalled();
                     expect(annotator.emit).toBeCalledWith(ANNOTATOR_EVENT.loadError, err);
                 });
         });
@@ -355,15 +350,11 @@ describe('Annotator', () => {
                 };
 
                 const result = annotator.fetchAnnotations();
-                result
-                    .then(() => {
-                        expect(result).toBeTruthy();
-                        expect(annotator.threadMap).not.toBeUndefined();
-                        expect(annotator.emit).toBeCalledWith(ANNOTATOR_EVENT.fetch);
-                    })
-                    .catch(() => {
-                        sinon.assert.failException;
-                    });
+                result.then(() => {
+                    expect(result).toBeTruthy();
+                    expect(annotator.threadMap).not.toBeUndefined();
+                    expect(annotator.emit).toBeCalledWith(ANNOTATOR_EVENT.fetch);
+                });
             });
 
             it('should fetch existing annotations if the user can view all annotations', () => {

src/doc/CreateHighlightDialog.js

@@ -1,7 +1,7 @@
 import CreateAnnotationDialog from '../CreateAnnotationDialog';
 import { ICON_HIGHLIGHT, ICON_HIGHLIGHT_COMMENT } from '../icons/icons';
 import { generateBtn, repositionCaret, getPageInfo, getDialogWidth, showElement } from '../util';
-import { getDialogCoordsFromRange } from '../doc/docUtil';
+import { getDialogCoordsFromRange } from './docUtil';
 import {
     CREATE_EVENT,
     CLASS_ANNOTATION_CARET,

src/doc/DocDrawingThread.js

@@ -1,6 +1,6 @@
 import DrawingPath from '../drawing/DrawingPath';
 import DrawingThread from '../drawing/DrawingThread';
-import DocDrawingDialog from '../doc/DocDrawingDialog';
+import DocDrawingDialog from './DocDrawingDialog';
 import {
     STATES,
     DRAW_STATES,
@@ -41,7 +41,9 @@ class DocDrawingThread extends DrawingThread {
     handleMove(location) {
         if (this.drawingFlag !== DRAW_STATES.drawing || !location) {
             return;
-        } else if (this.hasPageChanged(location)) {
+        }
+
+        if (this.hasPageChanged(location)) {
             this.onPageChange(location);
             return;
         }

src/util.js

@@ -500,7 +500,9 @@ export function repositionCaret(dialogEl, dialogX, highlightDialogWidth, browser
         annotationCaretEl.style.left = `${caretLeftX}px`;
 
         return 0;
-    } else if (dialogPastRight && !dialogPastLeft) {
+    }
+
+    if (dialogPastRight && !dialogPastLeft) {
         // Leave a minimum of 10 pixels so caret doesn't go off edge
         const caretRightX = Math.max(10, pageWidth - browserX);