chore(pkg): upgrade devDeps & to webpack 5

Author: STRML

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.150.1
+^0.153.0
 
 [ignore]
 .*/node_modules/@babel.*

README.md

@@ -1,6 +1,6 @@
 ### React-Resizable
 
-[View the Demo](https://react-grid-layout.github.io/react-resizable/examples/1.html)
+[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)
 
 A simple widget that can be resized via one or more handles.
 

examples/1.html examples/index.htmlexamples/1.html renamed to examples/index.html

@@ -139,7 +139,7 @@ export default class Resizable extends React.Component<Props, void> {
       // Don't call 'onResize' if dimensions haven't changed.
       const shouldSkipCb = handlerName === 'onResize' && !dimensionsChanged;
       if (cb && !shouldSkipCb) {
-        if (typeof e.persist === 'function') e.persist();
+        e.persist?.();
         cb(e, {node, size: {width, height}, handle: axis});
       }
 

lib/Resizable.js

@@ -44,7 +44,7 @@ export default class ResizableBox extends React.Component<ResizableBoxProps, Res
   onResize: (e: SyntheticEvent<>, data: ResizeCallbackData) => void = (e, data) => {
     const {size} = data;
     if (this.props.onResize) {
-      e.persist && e.persist();
+      e.persist?.();
       this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
     } else {
       this.setState(size);

lib/ResizableBox.js

@@ -9,8 +9,7 @@
     "unit": "jest --watch --verbose",
     "build": "bash build.sh",
     "build-example": "webpack",
-    "dev": "webpack-dev-server --open --open-page=examples/1.html",
-    "watch": "webpack --progress --watch",
+    "dev": "webpack serve --open",
     "prepublishOnly": "npm run build",
     "validate": "yarn check",
     "preversion": "npm run lint",
@@ -34,32 +33,32 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-resizable",
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/eslint-parser": "^7.14.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.4",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
     "babel-loader": "^8.0.6",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
+    "css-loader": "^5.2.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "eslint": "^7.28.0",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-react": "^7.24.0",
-    "flow-bin": "^0.150.1",
+    "flow-bin": "^0.153.0",
     "jest": "^27.0.4",
     "lodash": "^4.17.20",
     "pre-commit": "^1.1.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-test-renderer": "^16.11.0",
-    "style-loader": "^1.0.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.39.0",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.8.2"
   },
   "dependencies": {

package.json

@@ -1,7 +1,12 @@
 const webpack = require('webpack');
 const path = require('path');
 
+const isProduction = process.env.NODE_ENV === 'production';
+const isDevelopment = !isProduction;
+
 module.exports = {
+  mode: isProduction ? 'production' : 'development',
+  bail: isProduction,
   context: __dirname,
   entry: {
     test: "./examples/example.js",
@@ -13,6 +18,7 @@ module.exports = {
     library: 'ReactResizable',
     libraryTarget: 'umd'
   },
+  target: 'web', // Work around https://github.com/webpack/webpack-dev-server/issues/2758
   externals: {
     'react': {
       'commonjs': 'react',
@@ -30,16 +36,17 @@ module.exports = {
   },
   module: {
     rules: [
-      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?cacheDirectory=true'},
+      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: {cacheDirectory: true}},
     ]
   },
   resolve: {
     extensions: [".js"]
   },
   devServer: {
-    contentBase: __dirname,
+    contentBase: path.join(__dirname, 'examples'),
     compress: true,
     port: 4003,
+    hot: true,
   },
   plugins: [
     // Scope hoisting