Webpack 5 compatibility issues

.editorconfig

@@ -0,0 +1,11 @@
+# EditorConfig: http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+tab_width = 4

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+demo_stats
+lib
+dist-site

.eslintrc

@@ -1,90 +1,36 @@
 {
-    "extends": "eslint:recommended",
-    "plugins": [
-        "react"
-    ],
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
-    },
-    "ecmaFeatures": {
-        "experimentalObjectRestSpread": true,
-        "jsx": true,
-        "modules": true
+    "parser": "@babel/eslint-parser",
+    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"],
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2020,
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "requireConfigFile": false,
+        "babelOptions": {
+            "presets": ["@babel/preset-env", "@babel/preset-react"],
+            "plugins": [
+                [
+                    "@babel/plugin-proposal-class-properties",
+                    {
+                        "loose": true
+                    }
+                ]
+            ]
+        }
     },
     "rules": {
-        "no-alert": 2,
-        "no-array-constructor": 2,
-        "no-bitwise": 1,
-        "no-catch-shadow": 2,
-        "no-empty": 1,
-        "no-eval": 2,
-        "no-extend-native": 2,
-        "no-extra-bind": 1,
-        "no-implied-eval": 2,
-        "no-iterator": 2,
-        "no-label-var": 2,
-        "no-labels": 2,
-        "no-lone-blocks": 2,
-        "no-loop-func": 2,
-        "no-multi-spaces": 1,
-        "no-native-reassign": 2,
-        "no-new-func": 2,
-        "no-new-wrappers": 2,
-        "no-octal-escape": 2,
-        "no-proto": 2,
-        "no-return-assign": 2,
-        "no-sequences": 2,
-        "no-shadow": 2,
-        "no-shadow-restricted-names": 2,
-        "no-spaced-func": 2,
-        "no-undef-init": 2,
-        "no-unused-vars": [2, {"vars": "all", "args": "none"}],
-        "no-use-before-define": [2, "nofunc"],
-        "no-with": 2,
-
-        "arrow-spacing": 1,
-        "brace-style": [2, "1tbs"],
-        "camelcase": 1,
-        "comma-dangle": 1,
-        "comma-spacing": 1,
-        "curly": [2, "all"],
-        "dot-notation": [1, {"allowKeywords": true}],
-        "eqeqeq": [2, "smart"],
-        "indent": 2,
-        "jsx-quotes": 1,
-        "key-spacing": 1,
-        "new-cap": 1,
-        "new-parens": 2,
-        "quotes": [2, "single"],
-        "semi": 2,
-        "semi-spacing": 1,
-        "space-infix-ops": 1,
-        "space-return-throw-case": 1,
-        "space-unary-ops": 1,
-        "strict": [0, "function"],
-        "wrap-iife": [2, "any"],
-        "yoda": [1, "never"],
-
-        "react/jsx-closing-bracket-location": 1,
-        "react/jsx-curly-spacing": 1,
-        "react/jsx-indent-props": 1,
-        "react/jsx-max-props-per-line": [1, {"maximum": 3}],
-        "react/jsx-no-duplicate-props": 2,
-        "react/jsx-no-undef": 2,
-        "react/jsx-sort-prop-types": 1,
-        "react/jsx-uses-react": 2,
-        "react/jsx-uses-vars": 2,
-        "react/no-did-mount-set-state": [2, "allow-in-func"],
-        "react/no-did-update-set-state": 2,
-        "react/no-direct-mutation-state": 2,
-        "react/no-multi-comp": 1,
-        "react/no-unknown-property": 2,
-        "react/prop-types": [2, {ignore: "children"}],
-        "react/react-in-jsx-scope": 2,
-        "react/self-closing-comp": 1,
-        "react/sort-comp": 2,
-        "react/wrap-multilines": 2
+        "prettier/prettier": 1
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true
     }
 }

.gitignore

@@ -1,4 +1,9 @@
+demo_stats
 dist-site
 lib
 node_modules
 npm-debug.log
+package-lock.json
+.vscode
+yarn.lock
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "endOfLine": "lf",
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 120,
+    "tabWidth": 4
+}

README.md

@@ -1,37 +1,35 @@
-# Webpack Visualizer
-Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates.
+# Webpack Visualizer 2
 
-This tool is still pretty new, so please submit issues or feature requests!
+This is a working fork of the unmaintained [webpack-visualizer-plugin](https://github.com/chrisbateman/webpack-visualizer)
 
+It works with webpack 5.x
 
-## Site Usage
-
-Upload your stats JSON file to the site: [chrisbateman.github.io/webpack-visualizer/](http://chrisbateman.github.io/webpack-visualizer/)
-
-## Plugin Usage
+## Installation
 
 ```
-npm install webpack-visualizer-plugin
+npm i -D webpack-visualizer-plugin2
 ```
-```javascript
-var Visualizer = require('webpack-visualizer-plugin');
 
-//...
-plugins: [new Visualizer()],
-//...
-```
-This will output a file named `stats.html` in your output directory. You can modify the name/location by passing a `filename` parameter into the constructor.
+## Usage in webpack configuration
+This will generate the statistics page in /stats/ folder
+NOTE: "filename" points to the webpack output path, not the project root path
+
+```js
+const Visualizer = require('webpack-visualizer-plugin2');
+
+module.exports = {
+    plugins: [
+        new Visualizer(
+        {
+            filename: path.join('..', 'stats', 'statistics.html'),
+            throwOnError: true,
+        },
+        {
+            chunkModules: true
+        }),
+    ],
+}
 
-```javascript
-var Visualizer = require('webpack-visualizer-plugin');
-
-//...
-plugins: [new Visualizer({
-  filename: './statistics.html'
-})],
-//...
 ```
 
----
-
 ![](https://cloud.githubusercontent.com/assets/1145857/10471320/5b284d60-71da-11e5-8d35-7d1d4c58843a.png)

package.json

@@ -1,47 +1,81 @@
 {
-  "name": "webpack-visualizer-plugin",
-  "version": "0.1.11",
-  "main": "lib/plugin.js",
-  "author": "Chris Bateman (http://cbateman.com/)",
-  "license": "MIT",
-  "files": [
-    "lib",
-    "README.md"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "[email protected]:chrisbateman/webpack-visualizer.git"
-  },
-  "scripts": {
-    "build": "npm run buildsite && npm run buildplugin",
-    "prebuildplugin": "rm -rf lib && mkdir lib",
-    "buildplugin": "webpack src/plugin/main.jsx lib/pluginmain.js --config webpack.prod.js",
-    "postbuildplugin": "babel src/plugin/plugin.js --out-file lib/plugin.js && cp src/shared/style.css lib",
-    "prebuildsite": "rm -rf dist-site && mkdir dist-site",
-    "buildsite": "webpack src/site/main.jsx dist-site/build.js --config webpack.prod.js && babel-node src/site/serverRender.js",
-    "postbuildsite": "cp src/shared/style.css test/stats-demo.json dist-site",
-    "dev": "webpack-dev-server --config webpack.dev.js",
-    "lint": "eslint src --ext .js,.jsx",
-    "preversion": "npm run lint && npm run build",
-    "publishSite": "git checkout gh-pages && cp dist-site/* . && git add . && git commit -m 'release' && git push origin gh-pages && git checkout master"
-  },
-  "dependencies": {
-    "d3": "^3.5.6",
-    "mkdirp": "^0.5.1",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
-  },
-  "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-core": "^5.8.25",
-    "babel-loader": "^5.3.2",
-    "eslint": "^1.6.0",
-    "eslint-plugin-react": "^3.5.1",
-    "merge": "^1.2.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0"
-  },
-  "engines": {
-    "npm": ">=2.13.0"
-  }
+    "name": "webpack-visualizer-plugin2",
+    "description": "Generate webpack bundle chart",
+    "version": "2.0.0",
+    "main": "lib/plugin.js",
+    "author": "Chris Bateman (http://cbateman.com/)",
+    "contributors": [
+        {
+            "name": "Jonathan Mataloni",
+            "url": "https://github.com/jonamat",
+            "email": "[email protected]"
+        },
+        {
+            "name": "agnoStack Dev <[email protected]> (https://agnostack.com)",
+            "url": "https://github.com/agnostack",
+            "email": "[email protected]"
+        }
+    ],
+    "keywords": [
+        "webpack",
+        "statistics",
+        "bundle",
+        "chunks"
+    ],
+    "license": "MIT",
+    "files": [
+        "lib",
+        "README.md"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/jonamat/webpack-visualizer"
+    },
+    "scripts": {
+        "build": "npm run build:site && npm run build:plugin",
+        "build:plugin": "shx rm -rf ./lib/** && webpack --config ./webpack/plugin/webpack.prod.js && babel ./src/plugin/plugin.js --out-file lib/plugin.js --presets=@babel/preset-env",
+        "build:site": "webpack --config ./webpack/site/webpack.prod.js",
+        "build:stats": "webpack --config ./webpack/plugin/webpack.prod.js --json > demo_stats/stats-demo.json",
+        "start:plugin": "webpack serve --config ./webpack/plugin/webpack.dev.js",
+        "start:site": "webpack serve --config ./webpack/site/webpack.dev.js",
+        "lint": "eslint src --ext .js,.jsx",
+        "lint:fix": "eslint src --fix --ext .js,.jsx",
+        "preversion": "npm run build",
+        "publishSite": "git checkout gh-pages && cp dist-site/* . && git add . && git commit -m 'release' && git push origin gh-pages && git checkout master"
+    },
+    "dependencies": {
+        "d3": "^3.5.6",
+        "mkdirp": "^0.5.1",
+        "prop-types": "^15.7.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.12.8",
+        "@babel/core": "^7.12.9",
+        "@babel/eslint-parser": "^7.12.1",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/preset-env": "^7.12.7",
+        "@babel/preset-react": "^7.12.7",
+        "babel-loader": "^8.2.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "css-loader": "^5.0.1",
+        "eslint": "^7.14.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "eslint-plugin-react": "^7.21.5",
+        "eslint-webpack-plugin": "^2.4.0",
+        "html-webpack-plugin": "^4.5.0",
+        "mini-css-extract-plugin": "^1.3.1",
+        "prettier": "^2.2.1",
+        "shx": "^0.3.3",
+        "style-loader": "^2.0.0",
+        "webpack": "^5.9.0",
+        "webpack-cli": "^4.2.0",
+        "webpack-dev-server": "^3.11.0",
+        "webpack-merge": "^5.4.0"
+    },
+    "engines": {
+        "npm": ">=5.0.0"
+    }
 }

src/plugin/main.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './plugin-app';
 
+import '../shared/style.css';
 
-ReactDOM.render(<App stats={window.stats} />, document.getElementById('App'));
+const container = document.getElementById('App');
+const root = createRoot(container);
+
+root.render(<App stats={window.stats} />);