update dependencies to latest and cleanup webpack

runfaj · runfaj · commit 8be2828d02fd · 2022-09-28T23:22:45.000-06:00
diff --git a/.babelrc b/.babelrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to loose [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2022-09-28
+### Changed
+- Updated build tools and demo dependencies to latest versions.
+- Updated webpack to output significantly smaller build.
+- Removed an unnecessary lodash dependency that could be handled natively.
+
 ## [1.0.0] - 2020-10-23
 ### Changed
 - Bumped to version 1 after months of testing with various scenarios.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,31 @@
+module.exports = {
+  presets: [
+    // check https://github.com/babel/babel/blob/main/packages/babel-preset-env/src/available-plugins.ts to see which plugins are included in preset-env
+    ['@babel/preset-env',
+      { corejs: '3.25', useBuiltIns: 'entry', debug: false },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    ['@babel/plugin-proposal-decorators',
+      { legacy: true },
+    ], // required for mobx decorators. Must come above class-properties
+    ['@babel/plugin-proposal-class-properties',
+      { loose: false },
+    ], // required for mobx decorators
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-proposal-function-sent',
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-proposal-export-default-from',
+    ['@babel/plugin-proposal-pipeline-operator',
+      { proposal: 'minimal' },
+    ],
+    '@babel/plugin-proposal-do-expressions',
+    '@babel/plugin-proposal-function-bind',
+  ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-runtime'],
+    },
+  },
+};
diff --git a/package.json b/package.json
@@ -1,10 +1,11 @@
 {
   "name": "react-nested-popper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A react library based on popper.js that supports nested poppers and proper context binding.",
   "main": "dist/lib.js",
   "scripts": {
     "build": "webpack --mode=production",
+    "build-dev": "webpack --mode=development",
     "start": "webpack-dev-server --mode=development",
     "deploy": "gh-pages -d dist",
     "post-deploy": "rm dist/demo.css dist/demo.js dist/index.html",
@@ -37,8 +38,8 @@
   },
   "homepage": "https://github.com/runfaj/react-nested-popper#readme",
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x"
+    "react": ">=16.x",
+    "react-dom": ">=16.x"
   },
   "dependencies": {
     "@popperjs/core": "^2.5.3",
@@ -71,13 +72,13 @@
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.7.4",
+    "autoprefixer": "^10.4.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.4.2",
-    "cssnano": "^4.1.10",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.5.1",
+    "cssnano": "^5.0.10",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
@@ -88,20 +89,21 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.0",
     "gh-pages": "^2.2.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "jest": "^25.1.0",
     "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
-    "postcss-loader": "^3.0.0",
+    "mini-css-extract-plugin": "^2.4.4",
+    "postcss-loader": "^6.2.0",
+    "progress-webpack-plugin": "^1.0.16",
     "react": "^16.12.0",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
-    "sass-loader": "^8.0.2",
-    "terser-webpack-plugin": "^2.3.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "sass": "^1.55.0",
+    "sass-loader": "^12.3.0",
+    "webpack": "^5.64.1",
+    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.5.0"
   }
 }
diff --git a/src/Target.js b/src/Target.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import _omit from 'lodash/omit';
 
 export default class Target extends React.Component {
   static className = 'react-nested-popper_Target';
@@ -11,25 +10,33 @@ export default class Target extends React.Component {
       so we enforce this component.
   */
   setRef(el) {
-    if (this.props.innerRef) {
-      this.props.innerRef(el);
+    const { innerRef, _targetRef } = this.props;
+    if (innerRef) {
+      innerRef(el);
     }
-    if (this.props._targetRef) {
-      this.props._targetRef(el);
+    if (_targetRef) {
+      _targetRef(el);
     }
   }
 
   render() {
-    const rest = _omit(this.props, Object.keys(Target.propTypes));
+    const {
+      children,
+      className,
+      _onClick,
+      innerRef,
+      _targetRef,
+      ...rest
+    } = this.props;
 
     return (
       <div
-        className={this.props.className}
+        className={className}
         ref={el => this.setRef(el)}
-        onClick={this.props._onClick}
+        onClick={_onClick}
         {...rest}
       >
-        {this.props.children}
+        {children}
       </div>
     );
   }
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
-import Popper from './Popper';
-import Target from './Target';
-import Content from './Content';
-import Stack from './Stack';
-
-export {
-  Popper,
-  Target,
-  Content,
-  Stack,
-};
+export Popper from './Popper';
+export Target from './Target';
+export Content from './Content';
+export Stack from './Stack';
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,35 +2,18 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const AutoPrefixerPlugin = require('autoprefixer');
 const CSSNanoPlugin = require('cssnano');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const ProgressPlugin = require('progress-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-const { NODE_ENV = 'development' } = process.env;
-const useProductionBuild = NODE_ENV === 'production';
-
-module.exports = {
-  mode: useProductionBuild ? 'production' : 'development',
-  devtool: useProductionBuild ? 'source-map' : 'cheap-module-eval-source-map',
-  stats: 'errors-only',
+const config = {
   devServer: {
     compress: true,
-    contentBase: false,
     historyApiFallback: true,
     hot: true,
     port: 8765,
-    stats: {
-      assets: false,
-      children: false,
-      chunkModules: false,
-      chunks: false,
-      colors: true,
-      hash: false,
-      version: false,
-      modules: false,
-      warningsFilter: warning => !_.contains(warning, 'WARNING in chunk') && !_.contains(warning, 'Conflicting order between'),
-    },
   },
   entry: {
     lib: path.resolve(__dirname, 'src/index.js'),
@@ -42,32 +25,6 @@ module.exports = {
     pathinfo: false,
     libraryTarget: 'umd',
   },
-  optimization: (!useProductionBuild
-    ? {
-      removeAvailableModules: false,
-      removeEmptyChunks: false,
-      splitChunks: false,
-    }
-    : {
-      splitChunks: {
-        cacheGroups: {
-          peerDependencies: {
-            test: /[\\/]node_modules[\\/]react(-dom)?[\\/]/,
-          },
-        },
-      },
-      minimizer: [
-        new TerserPlugin({
-          sourceMap: true,
-          terserOptions: {
-            output: {
-              comments: false,
-            },
-          },
-        }),
-      ],
-    }
-  ),
   module: {
     rules: [
       {
@@ -81,7 +38,7 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              hmr: !useProductionBuild,
+              esModule: false,
             },
           },
           {
@@ -97,12 +54,13 @@ module.exports = {
           {
             loader: 'postcss-loader',
             options: {
-              plugins: [
-                AutoPrefixerPlugin,
-                CSSNanoPlugin,
-              ],
+              postcssOptions: {
+                plugins: [
+                  AutoPrefixerPlugin,
+                  CSSNanoPlugin,
+                ],
+              },
               sourceMap: true,
-              modules: true,
             },
           },
           {
@@ -117,13 +75,40 @@ module.exports = {
   },
   plugins: [
     new CleanWebpackPlugin(),
-
+    new ProgressPlugin(true),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),
-
     new HtmlWebpackPlugin({
       template: './demo/index.template.html',
     }),
+    // new BundleAnalyzerPlugin(),
   ],
 };
+
+module.exports = (env, argv) => {
+  if (argv.mode === 'development') {
+    config.devtool = 'eval-cheap-module-source-map';
+    config.optimization = {
+      removeAvailableModules: false,
+      removeEmptyChunks: false,
+      splitChunks: false,
+    };
+  } else {
+    config.devtool = 'source-map';
+    config.optimization = {
+      chunkIds: 'total-size',
+      minimize: true,
+      moduleIds: 'size',
+      splitChunks: {
+        cacheGroups: {
+          peerDependencies: {
+            test: /[\\/]node_modules[\\/]react(-dom)?[\\/]/,
+          },
+        },
+      },
+    };
+  }
+
+  return config;
+};
diff --git a/yarn.lock b/yarn.lock
