chore(deps): upgrade devDeps

Author: STRML

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.151.0
+^0.158.0
 
 [ignore]
 <PROJECT_ROOT>/build/.*

package.json

@@ -39,49 +39,49 @@
     "lodash.isequal": "^4.0.0",
     "prop-types": "^15.0.0",
     "react-draggable": "^4.0.0",
-    "react-resizable": "^3.0.1"
+    "react-resizable": "^3.0.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-flow-comments": "^7.12.13",
-    "@babel/preset-env": "^7.14.1",
-    "@babel/preset-flow": "^7.13.13",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/register": "^7.13.16",
-    "@webpack-cli/serve": "^1.4.0",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-flow-comments": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
+    "@webpack-cli/serve": "^1.5.2",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-preval": "^5.0.0",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.2.0",
     "ejs": "^3.1.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^7.26.0",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-mocha": "^8.1.0",
-    "eslint-plugin-react": "^7.23.2",
-    "exports-loader": "^2.0.0",
-    "flow-bin": "^0.151.0",
-    "husky": "^6.0.0",
-    "imports-loader": "^2.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^11.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-flowtype": "^5.9.0",
+    "eslint-plugin-mocha": "^9.0.0",
+    "eslint-plugin-react": "^7.24.0",
+    "exports-loader": "^3.0.0",
+    "flow-bin": "^0.158.0",
+    "husky": "^7.0.2",
+    "imports-loader": "^3.0.0",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.1.2",
     "lodash": "^4.17.21",
     "opener": "^1.5.2",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.13.0",
     "react-transform-hmr": "^1.0.2",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.2.1",
     "timsort": "^0.3.0",
-    "webpack": "^5.36.2",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">= 16.3.0",
@@ -100,11 +100,12 @@
     "testMatch": [
       "<rootDir>/test/spec/*.js"
     ],
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost"
   },
   "lint-staged": {
     "*.{js,jsx,css}": [
       "prettier --write"
     ]
   }
-}
+}

test/util/setupTests.js

@@ -10,14 +10,15 @@ Enzyme.configure({ adapter: new Adapter() });
 import { sort } from "timsort";
 
 // $FlowIgnore dirty hack
-Array.prototype.sort = function(comparator) {
+Array.prototype.sort = function (comparator) {
   sort(this, comparator);
   return this;
 };
 
 // Required in drag code, not working in JSDOM
 Object.defineProperty(HTMLElement.prototype, "offsetParent", {
   get() {
+    // $FlowIgnore[object-this-reference]
     return this.parentNode;
   }
 });

webpack-dev-server.config.js

@@ -9,7 +9,8 @@ module.exports = {
   output: {
     path: "/",
     filename: "bundle.js",
-    sourceMapFilename: "[file].map"
+    sourceMapFilename: "[file].map",
+    publicPath: "/"
   },
   module: {
     rules: [
@@ -33,12 +34,15 @@ module.exports = {
   ],
   devtool: "eval",
   devServer: {
-    publicPath: "/",
     compress: true,
     port: 4002,
-    open: true,
-    openPage: "index-dev.html",
-    contentBase: "."
+    open: "index-dev.html",
+    client: {
+      overlay: true
+    },
+    static: {
+      directory: "."
+    }
   },
   resolve: {
     extensions: [".webpack.js", ".web.js", ".js", ".jsx"],

webpack-examples.config.js

@@ -21,7 +21,8 @@ module.exports = {
   output: {
     path: __dirname + "/examples",
     filename: "[name].js",
-    sourceMapFilename: "[file].map"
+    sourceMapFilename: "[file].map",
+    publicPath: "/examples/"
   },
   module: {
     rules: [
@@ -37,19 +38,19 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify("production"),
-        // sigil to load self into #content
-        STATIC_EXAMPLES: JSON.stringify(true)
-      }
+      "process.env.STATIC_EXAMPLES": JSON.stringify(true)
     })
   ],
   devServer: {
+    compress: true,
     port: 4002,
-    open: true,
-    openPage: "examples/0-showcase.html",
-    contentBase: ".",
-    publicPath: "/examples/"
+    open: "examples/0-showcase.html",
+    client: {
+      overlay: true
+    },
+    static: {
+      directory: "."
+    }
   },
   resolve: {
     extensions: [".js", ".jsx"],
@@ -60,9 +61,7 @@ module.exports = {
 // Load all entry points
 const files = fs
   .readdirSync(__dirname + "/test/examples")
-  .filter(function (element, index, array) {
-    return element.match(/^.+\.jsx$/);
-  });
+  .filter(element => element.match(/^.+\.jsx$/));
 
 for (const file of files) {
   const module_name = file.replace(/\.jsx$/, "");