[
{
"path": ".babelrc",
"content": "// Babel config for Node\n// Compiles sources, gulpfile and tests\n{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"targets\": { \"node\": \"16.20.2\" }\n }\n ]\n ]\n}\n"
},
{
"path": ".browserslistrc",
"content": "# Supported browsers\n\nlast 2 Chrome major versions\nlast 2 Firefox major versions\nlast 1 Safari major version\n"
},
{
"path": ".editorconfig",
"content": "root = true\n\n[*]\ncharset = utf-8\n\nindent_style = space\nindent_size = 2\n\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\ntrim_trailing_whitespace = false\n"
},
{
"path": ".github/workflows/main.yml",
"content": "name: main\non:\n push:\n branches:\n - main\n pull_request:\njobs:\n build-and-test:\n strategy:\n fail-fast: false\n matrix:\n node:\n - version: 20.x\n - version: 22.x\n - version: 24.x\n runs-on: ubuntu-22.04\n name: Tests on Node.js v${{ matrix.node.version }}\n steps:\n - name: Checkout repo\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n\n - name: Setup node\n uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0\n with:\n node-version: ${{ matrix.node.version }}\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n\n - name: Build sources\n run: ${{ matrix.node.env }} npm run build\n\n - name: Run tests\n run: ${{ matrix.node.env }} npm run test:coverage\n\n - name: Codecov\n uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5.5.2\n env:\n CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}\n\n lint:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout repo\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2\n\n - name: Setup node\n uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0\n with:\n node-version: \"22.x\"\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n\n - name: Build sources\n run: npm run build\n\n - name: Run lint\n run: npm run lint\n"
},
{
"path": ".gitignore",
"content": "/lib\n/public\n/samples\nnode_modules\nnpm-debug.log\n.eslintcache\n"
},
{
"path": ".npm-upgrade.json",
"content": "{\n \"ignore\": {\n \"mobx\": {\n \"versions\": \">=6\",\n \"reason\": \"v6 drops decorators\"\n },\n \"mobx-react\": {\n \"versions\": \">=7\",\n \"reason\": \"v7 requires MobX v6\"\n },\n \"webpack-cli\": {\n \"versions\": \">=4\",\n \"reason\": \"Current version of Webpack Dev Server doesn't work with v4\"\n }\n }\n}\n"
},
{
"path": ".nvmrc",
"content": "v22.14.0\n"
},
{
"path": ".prettierignore",
"content": "test/bundles/**\ntest/stats/**\ntest/output/**\nsamples/**\nCHANGELOG.md\n"
},
{
"path": "CHANGELOG.md",
"content": "# Changelog\n\n> **Tags:**\n> - [Breaking Change]\n> - [New Feature]\n> - [Improvement]\n> - [Bug Fix]\n> - [Internal]\n> - [Documentation]\n\n_Note: Gaps between patch versions are faulty, broken or test releases._\n\n## UNRELEASED\n\n* **Bug Fix**\n * Fix a race condition in `writeStats` that could lead to incorrect content in `stats.json` ([#711](https://github.com/webpack/webpack-bundle-analyzer/pull/711) by [@colinaaa](https://github.com/colinaaa))\n\n## 5.2.0\n\n* **New Feature**\n * Add support for Zstandard compression ([#693](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/693) by [@bjohansebas](https://github.com/bjohansebas))\n\n* **Internal**\n * Prettier applied to the code base ([#693](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/694) by [@alexander-akait](https://github.com/alexander-akait))\n * Update `sirv` dependency ([#692](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/692) by [@bjohansebas](https://github.com/bjohansebas))\n * Update `ws` dependency ([#691](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/691) by [@bjohansebas](https://github.com/bjohansebas))\n\n## 5.1.1\n\n* **Bug Fix**\n * Fix tooltip styling in dark mode when using CSS Modules ([#688](https://github.com/webpack/webpack-bundle-analyzer/pull/688) by [@theEquinoxDev](https://github.com/theEquinoxDev))\n * Avoid parse failures for bundles with IIFE ([#685](https://github.com/webpack/webpack-bundle-analyzer/pull/685) by [@hai-x](https://github.com/hai-x))\n\n## 5.1.0\n\n* **Bug Fix**\n * Prevent `TypeError` when `assets` or `modules` are undefined in `analyzer.js`\n ([#679](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/679) by [@Srushti-33](https://github.com/Srushti-33))\n\n* **New Feature**\n * Add optional dark/light mode toggle ([#683](https://github.com/webpack/webpack-bundle-analyzer/pull/683) by [@theEquinoxDev](https://github.com/theEquinoxDev))\n\n\n## 5.0.1\n\n* **Bug Fix**\n * Restore `@babel/plugin-transform-class-properties` to fix HTML report ([#682](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/682) by [@valscion](https://github.com/valscion))\n\n## 5.0.0\n\n* **Breaking Change**\n * Remove explicit support for Node versions below 20.9.0 ([#676](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/676) by [@valscion](https://github.com/valscion))\n\n* **Improvement**\n * Parse bundles as ES modules based on stats JSON information ([#649](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/649) by [@eamodio](https://github.com/eamodio))\n\n* **New Feature**\n * Add support for Brotli compression ([#663](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/663) by [@dcsaszar](https://github.com/dcsaszar))\n * Add support for React Native ([666](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/666) by [@ilteoood](https://github.com/ilteoood))\n\n## 4.10.2\n\n* **Bug Fix**\n * fix `.cjs` files not being handled ([#512](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/512) by [@Rush](https://github.com/Rush))\n\n* **Internal**\n * Remove `is-plain-object` ([#627](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/627) by [@SukkaW](https://github.com/SukkaW))\n\n## 4.10.1\n\n* **Bug Fix**\n * fix `this.handleValueChange.cancel()` is not a function ([#611](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/625) by [@life2015](https://github.com/life2015))\n\n## 4.10.0\n\n* **Improvement**\n * Allows filtering the list of entrypoints ([#624](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/624) by [@chriskrogh](https://github.com/chriskrogh))\n\n* **Internal**\n * Make module much slimmer by replacing all `lodash.*` packages ([#612](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/612)) by [@sukkaw](https://github.com/sukkaw).\n\n## 4.9.1\n\n* **Internal**\n * Replace some lodash usages with JavaScript native API ([#505](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/505)) by [@sukkaw](https://github.com/sukkaw).\n * Make module much slimmer ([#609](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/609)) by [@sukkaw](https://github.com/sukkaw).\n\n* **Bug Fix**\n * fix `analyzerMode: 'server'` on certain machines ([#611](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/611) by [@panbenson](https://github.com/panbenson))\n\n## 4.9.0\n\n* **Improvement**\n * Display modules included in concatenated entry modules on Webpack 5 when \"Show content of concatenated modules\" is checked ([#602](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/602) by [@pgoldberg](https://github.com/pgoldberg))\n\n## 4.8.0\n\n * **Improvement**\n * Support reading large (>500MB) stats.json files ([#423](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/423) by [@henry-alakazhang](https://github.com/henry-alakazhang))\n * Improve search UX by graying out non-matches ([#554](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/554) by [@starpit](https://github.com/starpit))\n\n * **Internal**\n * Add Node.js v16.x to CI and update GitHub actions ([#539](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/539) by [@amareshsm](https://github.com/amareshsm))\n\n## 4.7.0\n\n * **New Feature**\n * Add the ability to filter to displaying only initial chunks per entrypoint ([#519](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/519) by [@pas-trop-de-zele](https://github.com/pas-trop-de-zele))\n\n## 4.6.1\n\n* **Bug Fix**\n * fix outputting different URL in cli mode ([#524](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/524) by [@southorange1228](https://github.com/southorange1228))\n\n## 4.6.0\n\n* **New Feature**\n * Support outputting different URL in server mode ([#520](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/520) by [@southorange1228](https://github.com/southorange1228))\n * Use deterministic chunk colors (#[501](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/501) by [@CreativeTechGuy](https://github.com/CreativeTechGuy))\n\n## 4.5.0\n\n * **Improvement**\n * Stop publishing src folder to npm ([#478](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/478) by [@wood1986](https://github.com/wood1986))\n\n* **Internal**\n * Update some dependencies ([#448](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/448))\n * Replace nightmare with Puppeteer ([#469](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/469) by [@valscion](https://github.com/valscion))\n * Replace Mocha with Jest ([#470](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/470) by [@valscion](https://github.com/valscion))\n\n## 4.4.2\n\n * **Bug Fix**\n * Fix failure with `compiler.outputFileSystem.constructor` being `undefined` ([#447](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/447) by [@kedarv](https://github.com/kedarv) and [@alexander-akait](https://github.com/alexander-akait))\n * **NOTE:** This fix doesn't have added test coverage so the fix might break in future versions unless test coverage is added later.\n\n## 4.4.1\n\n * **Bug Fix**\n * Fix missing module chunks ([#433](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/433) by [@deanshub](https://github.com/deanshub))\n\n * **Internal**\n * Fix tests timing out in CI ([#435](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/435) by [@deanshub](https://github.com/deanshub))\n * Fix command in issue template ([#428](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/428) by [@cncolder](https://github.com/cncolder))\n\n## 4.4.0\n\n * **Improvement**\n * Keep treemap labels visible during zooming animations for better user experience ([#414](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/414) by [@stanislawosinski](https://github.com/stanislawosinski))\n\n * **Bug Fix**\n * Don't show an empty tooltip when hovering over the FoamTree attribution group or between top-level groups ([#413](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/413) by [@stanislawosinski](https://github.com/stanislawosinski))\n\n * **Internal**\n * Upgrade FoamTree to version 3.5.0, replace vendor dependency with an NPM package ([#412](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/412) by [@stanislawosinski](https://github.com/stanislawosinski))\n\n## 4.3.0\n\n * **Improvement**\n * Replace express with builtin node server, reducing number of dependencies ([#398](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/398) by [@TrySound](https://github.com/TrySound))\n * Move `filesize` to dev dependencies, reducing number of dependencies ([#401](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/401) by [@realityking](https://github.com/realityking))\n\n * **Internal**\n * Replace Travis with GitHub actions ([#402](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/402) by [@valscion](https://github.com/valscion))\n\n## 4.2.0\n\n * **Improvement**\n * A number of improvements to reduce the number of dependencies ([#391](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/391), [#396](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/396), [#397](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/397))\n\n * **Bug Fix**\n * Prevent crashes for bundles generated from webpack array configs. ([#394](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/394) by [@ctavan](https://github.com/ctavan))\n * Fix `non-asset` assets causing analyze failure. ([#385](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/385) by [@ZKHelloworld](https://github.com/ZKHelloworld))\n\n## 4.1.0\n\n * **Improvement**\n * Significantly speed up generation of `stats.json` file (see `generateStatsFile` option).\n\n## 4.0.0\n\n * **Breaking change**\n * Dropped support for Node.js 6 and 8. Minimal required version now is v10.13.0\n\n * **Improvement**\n * Support for Webpack 5\n\n * **Bug Fix**\n * Prevent crashes when `openAnalyzer` was set to true in environments where there's no program to handle opening. ([#382](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/382) by [@wbobeirne](https://github.com/wbobeirne))\n\n * **Internal**\n * Updated dependencies\n * Added support for multiple Webpack versions in tests\n\n## 3.9.0\n\n * **New Feature**\n * Adds option `reportTitle` to set title in HTML reports; default remains date of report generation ([#354](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/354) by [@eoingroat](https://github.com/eoingroat))\n\n * **Improvement**\n * Added capability to parse bundles that have child assets generated ([#376](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/376) by [@masterkidan](https://github.com/masterkidan) and [#378](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/378) by [@https://github.com/dabbott](https://github.com/https://github.com/dabbott))\n\n## 3.8.0\n\n * **Improvement**\n * Added support for exports.modules when webpack target = node ([#345](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/345) by [@Spikef](https://github.com/Spikef))\n\n * **New Feature**\n * Support [WebWorkerChunkTemplatePlugin](https://github.com/webpack/webpack/blob/c9d4ff7b054fc581c96ce0e53432d44f9dd8ca72/lib/webworker/WebWorkerChunkTemplatePlugin.js) ([#353](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/353) by [@Gongreg](https://github.com/Gongreg))\n\n * **Bug Fix**\n * Support any custom `globalObject` option in Webpack Config. ([#352](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/352) by [@Gongreg](https://github.com/Gongreg))\n\n## 3.7.0\n\n * **New Feature**\n * Added JSON output option (`analyzerMode: \"json\"` in plugin, `--mode json` in CLI) ([#341](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/341) by [@Gongreg](https://github.com/Gongreg))\n\n * **Improvement**\n * Persist \"Show content of concatenated modules\" option ([#322](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/322) by [@lorenzos](https://github.com/lorenzos))\n\n## 3.6.1\n\n * **Bug Fix**\n * Add leading zero to hour & minute on `` when needed ([#314](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/314) by [@mhxbe](https://github.com/mhxbe))\n\n * **Internal**\n * Update some dependencies to get rid of vulnerability warnings ([#339](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/339))\n\n## 3.6.0\n\n * **Improvement**\n * Support webpack builds where `output.globalObject` is set to `'self'` ([#323](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/323) by [@lemonmade](https://github.com/lemonmade))\n * Improve readability of tooltips ([#320](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/320) by [@lorenzos](https://github.com/lorenzos))\n\n## 3.5.2\n\n * **Bug Fix**\n * Fix sidebar not showing visibility status of chunks hidden via popup menu (issue [#316](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/316) by [@gaokun](https://github.com/gaokun), fixed in [#317](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/317) by [@bregenspan](https://github.com/bregenspan))\n\n## 3.5.1\n\n * **Bug Fix**\n * Fix regression in support of webpack dev server and `webpack --watch` (issue [#312](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/312), fixed in [#313](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/313) by [@gaokun](https://github.com/gaokun))\n\n## 3.5.0\n\n * **Improvements**\n * Improved report title and added favicon ([#310](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/310), [@gaokun](https://github.com/gaokun))\n\n## 3.4.1\n\n * **Bug Fix**\n * Fix regression of requiring an object to be passed to `new BundleAnalyzerPlugin()` (issue [#300](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/300), fixed in [#302](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/302) by [@jerryOnlyZRJ](https://github.com/jerryOnlyZRJ))\n\n## 3.4.0\n\n * **Improvements**\n * Add `port: 'auto'` option ([#290](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/290), [@avin-kavish](https://github.com/avin-kavish))\n\n * **Bug Fix**\n * Avoid mutation of the generated `stats.json` ([#293](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/293), [@wood1986](https://github.com/wood1986))\n\n * **Internal**\n * Use Autoprefixer ([#266](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/266), [@bregenspan](https://github.com/bregenspan))\n * Detect `AsyncMFS` to support dev-server of Nuxt 2.5 and above ([#275](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/275), [@amoshydra](https://github.com/amoshydra))\n\n## 3.3.2\n\n * **Bug Fix**\n * Fix regression with escaping internal assets ([#264](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/264), fixes [#263](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/263))\n\n## 3.3.1\n\n * **Improvements**\n * Use relative links for serving internal assets ([#261](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/261), fixes [#254](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/254))\n * Properly escape embedded JS/JSON ([#262](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/262))\n\n * **Bug Fix**\n * Fix showing help message on `-h` flag ([#260](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/260), fixes [#239](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239))\n\n## 3.3.0\n\n * **New Feature**\n * Show/hide chunks using context menu ([#246](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/246), [@bregenspan](https://github.com/bregenspan))\n\n * **Internal**\n * Updated dev dependencies\n\n## 3.2.0\n\n * **Improvements**\n * Add support for .mjs output files ([#252](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/252), [@jlopezxs](https://github.com/jlopezxs))\n\n## 3.1.0\n\n * **Bug Fix**\n * Properly determine the size of the modules containing special characters ([#223](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/223), [@hulkish](https://github.com/hulkish))\n * Update acorn to v6 ([#248](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/248), [@realityking](https://github.com/realityking))\n\n## 3.0.4\n\n * **Bug Fix**\n * Make webpack's done hook wait until analyzer writes report or stat file ([#247](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/247), [@mareolan](https://github.com/mareolan))\n\n## 3.0.3\n\n * **Bug Fix**\n * Disable viewer websocket connection when report is generated in `static` mode ([#215](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/215), [@sebastianhaeni](https://github.com/sebastianhaeni))\n\n## 3.0.2\n\n * **Improvements**\n * Drop `@babel/runtime` dependency ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))\n * Properly specify minimal Node.js version in `.babelrc` ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))\n\n * **Bug Fix**\n * Move some \"dependencies\" to \"devDependencies\" ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))\n\n## 3.0.1\n\n * **Bug Fix**\n * Small UI fixes\n\n## 3.0.0\n\n * **Breaking change**\n * Dropped support for Node.js v4. Minimal required version now is v6.14.4\n * Contents of concatenated modules are now hidden by default because of a number of related issues ([details](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188)), but can be shown using a new checkbox in the sidebar.\n\n * **New Feature**\n * Added modules search\n * Added ability to pin and resize the sidebar\n * Added button to toggle the sidebar\n * Added checkbox to show/hide contents of concatenated modules\n\n * **Improvements**\n * Nested folders that contain only one child folder are now visually merged i.e. `folder1 => folder2 => file1` is now shown like `folder1/folder2 => file1` (thanks to [@varun-singh-1](https://github.com/varun-singh-1) for the idea)\n\n * **Internal**\n * Dropped support for Node.js v4\n * Using MobX for state management\n * Updated dependencies\n\n## 2.13.1\n\n * **Improvement**\n * Pretty-format the generated stats.json ([#180](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/180)) [@edmorley](https://github.com/edmorley))\n\n * **Bug Fix**\n * Properly parse Webpack 4 async chunk with `Array.concat` optimization ([#184](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/184), fixes [#183](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/183))\n\n * **Internal**\n * Refactor bundle parsing logic ([#184](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/184))\n\n## 2.13.0\n\n * **Improvement**\n * Loosen bundle parsing logic ([#181](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/181)). Now analyzer will still show parsed sizes even if:\n * It can't parse some bundle chunks. Those chunks just won't have content in the report. Fixes issues like [#160](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/160).\n * Some bundle chunks are missing (it couldn't find files to parse). Those chunks just won't be visible in the report for parsed/gzipped sizes.\n\n## 2.12.0\n\n * **New Feature**\n * Add option that allows to exclude assets from the report ([#178](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/178))\n\n## 2.11.3\n\n * **Bug Fix**\n * Filter out modules that weren't found during bundles parsing ([#177](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/177))\n\n## 2.11.2\n\n * **Bug Fix**\n * Properly process stat files that contain modules inside of `chunks` array ([#175](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/175))\n * Fix parsing of async chunks that push to `this.webpackJsonp` array ([#176](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/176))\n\n## 2.11.1\n\n * **Improvement**\n * Add support for parsing Webpack 4's chunked modules ([#159](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/159), [@jdelStrother](https://github.com/jdelStrother))\n\n## 2.11.0\n\n * **Improvement**\n * Show contents of concatenated module (requires Webpack 4) ([#158](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/158), closes [#157](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/157))\n\n## 2.10.1\n\n * **Improvement**\n * Support webpack 4 without deprecation warnings. @ai in [#156](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/156), fixes [#154](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/154)\n\n## 2.10.0\n\n * **Bug Fix**\n * Fix \"out of memory\" crash when dealing with huge stats objects ([#129](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/129), [@ryan953](https://github.com/ryan953))\n\n * **Internal**\n * Update dependencies ([#146](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/146))\n * Update gulp to v4 and simplify gulpfile ([#146](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/146), [#149](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/149))\n * Simplify ESLint configs ([#148](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/148))\n\n## 2.9.2\n\n * **Bug Fix**\n * Add a listener for the 'error' event on the WebSocket server client (#140)\n\n * **Internal**\n * Clean up .travis.yml (#140)\n * Update ws to version 4.0.0 (#140)\n\n## 2.9.1\n\n * **Bug Fix**\n * Bump `ws` dependency to fix DoS vulnerability (closes [#130](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/130))\n\n## 2.9.0\n * **New Feature**\n * Show chunk sizes in sidebar (closes #91)\n\n * **Bug Fix**\n * Properly parse webpack bundles that use arrow functions as module wrappers (#108, @regiontog)\n\n## 2.8.3\n * **Bug Fix**\n * Correctly advertise port when using a random one (#89, @yannickcr)\n * Add proper support for `multi` entries (fixes #92, #87)\n * Support parsing of ESNext features (fixes #94)\n\n## 2.8.2\n * **Improvement**\n * Greatly improved accuracy of gzip sizes\n\n * **Bug Fix**\n * Generate report file in the bundle output directory when used with Webpack Dev Server (fixes #75)\n\n## 2.8.1\n * **Improvement**\n * Improve warning message when analyzer client couldn't connect to WebSocket server\n\n## 2.8.0\n * **Improvement**\n * Analyzer now supports `webpack --watch` and Webpack Dev Server!\n It will automatically update modules treemap according to changes in the sources via WebSockets!\n\n * **Internal**\n * Use `babel-preset-env` and two different Babel configs to compile node and browser code\n * Update deps\n\n## 2.7.0\n * **New Feature**\n * Add control to sidebar that allows to choose shown chunks (closes #71 and partially addresses #38)\n\n## 2.6.0\n * **New Feature**\n * Add `defaultSizes` option (closes #52)\n\n## 2.5.0\n * **New Feature**\n * Added `--host` CLI option (@difelice)\n\n## 2.4.1\n * **Improvement**\n * Support `NamedChunksPlugin` (@valscion)\n\n## 2.4.0\n * **Bug Fix**\n * Fix `TypeError: currentFolder.addModule is not a function`\n\n * **Internal**\n * Update deps\n\n## 2.3.1\n * **Improvement**\n * Improve compatibility with Webpack 2 (@valscion)\n\n## 2.3.0\n * **Improvement**\n * Add `analyzerHost` option (@freaz)\n\n * **Internal**\n * Update deps\n\n## 2.2.3\n * **Bug Fix**\n * Support bundles that uses `Array.concat` expression in modules definition (@valscion)\n\n## 2.2.1\n * **Bug Fix**\n * Fix regression in analyzing stats files with non-empty `children` property (@gbakernet)\n\n## 2.2.0\n * **Improvement**\n * Improve treemap sharpness on hi-res displays (fixes #33)\n * Add support for stats files with all the information under `children` property (fixes #10)\n\n * **Internal**\n * Update deps\n\n## 2.1.1\n * **Improvement**\n * Add support for `output.jsonpFunction` webpack config option (fixes #16)\n\n## 2.1.0\n * **New Feature**\n * Add `logLevel` option (closes #19)\n\n## 2.0.1\n * **Bug Fix**\n * Support query in bundle filenames (fixes #22)\n\n * **Internal**\n * Minimize CSS for report UI\n\n## 2.0.0\n * **New Feature**\n * Analyzer now also shows gzipped sizes (closes #6)\n * Added switcher that allows to choose what sizes will be used to generate tree map.\n Just move your mouse to the left corner of the browser and settings sidebar will appear.\n\n * **Bug Fix**\n * Properly show sizes for some asset modules (e.g. CSS files loaded with `css-loader`)\n\n * **Internal**\n * Completely rewritten analyzer UI. Now uses Preact and Webpack 2.\n\n## 1.5.4\n\n * **Bug Fix**\n * Fix bug when Webpack build is being controlled by some wrapper like `grunt-webpack` (see #21)\n\n## 1.5.3\n\n * **Bug Fix**\n * Workaround `Express` bug that caused wrong `ejs` version to be used as view engine (fixes #17)\n\n## 1.5.2\n\n * **Bug Fix**\n * Support array module descriptors that can be generated if `DedupePlugin` is used (fixes #4)\n\n## 1.5.1\n\n * **Internal**\n * Plug analyzer to Webpack compiler `done` event instead of `emit`. Should fix #15.\n\n## 1.5.0\n\n * **New Feature**\n * Add `statsOptions` option for `BundleAnalyzerPlugin`\n\n## 1.4.2\n\n * **Bug Fix**\n * Fix \"Unable to find bundle asset\" error when bundle name starts with `/` (fixes #3)\n\n## 1.4.1\n\n * **Bug Fix**\n * Add partial support for `DedupePlugin` (see #4 for more info)\n\n## 1.4.0\n\n * **New Feature**\n * Add \"static report\" mode (closes #2)\n\n## 1.3.0\n\n * **Improvement**\n * Add `startAnalyzer` option for `BundleAnalyzerPlugin` (fixes #1)\n * **Internal**\n * Make module much slimmer - remove/replace bloated dependencies\n\n## 1.2.5\n\n * Initial public release\n"
},
{
"path": "CONTRIBUTING.md",
"content": "# Contributing\n\nTo contribute to `webpack-bundle-analyzer`, fork the repository and clone it to your machine. [See this GitHub help page for what forking and cloning means](https://help.github.com/articles/fork-a-repo/)\n\n## Setup packages\n\nNext, install this package's dependencies:\n\n```sh\nnpm i\n```\n\n## Develop with your own project\n\nRun the following to build this library and watch its source files for changes:\n\n```sh\nnpm run start\n```\n\nYou will now have a fully functioning local build of this library ready to be used. **Leave the `start` script running**, and continue with a new Terminal/shell window.\n\nLink the local package with `yarn` and/or `npm` to use it in your own projects:\n\n```sh\n# Needed if your own project uses `yarn` to handle dependencies:\nyarn link\n# Needed if your own project uses `npm` to handle dependencies:\nnpm link\n```\n\nNow go to your own project directory, and tell `npm` or `yarn` to use the local copy of `webpack-bundle-analyzer` package:\n\n```sh\ncd /path/to/my/own/project\n# If you're using yarn, run this:\nyarn link webpack-bundle-analyzer\n# ...and if you're not, and you're using just npm in your own\n# project, run this:\nnpm link webpack-bundle-analyzer\n```\n\nNow when you call `require('webpack-bundle-analyzer')` in your own project, you will actually be using the local copy of the `webpack-bundle-analyzer` project.\n\nIf your own project's Webpack config has `BundleAnalyzerPlugin` configured with `analyzerMode: 'server'`, the changes you do inside `client` folder within your local copy of `webpack-bundle-analyzer` should now be immediately visible after you refresh your browser page. Hack away!\n\n## Send your changes back to us! :revolving_hearts:\n\nWe'd love for you to contribute your changes back to `webpack-bundle-analyzer`! To do that, it would be ace if you could commit your changes to a separate feature branch and open a Pull Request for those changes.\n\nPoint your feature branch to use the `main` branch as the base of this PR. The exact commands used depends on how you've setup your local git copy, but the flow could look like this:\n\n```sh\n# Inside your own copy of `webpack-bundle-analyzer` package...\ngit checkout --branch feature-branch-name-here upstream/main\n# Then hack away, and commit your changes:\ngit add -A\ngit commit -m \"Few words about the changes I did\"\n# Push your local changes back to your fork\ngit push --set-upstream origin feature-branch-name-here\n```\n\nAfter these steps, you should be able to create a new Pull Request for this repository. If you hit any issues following these instructions, please open an issue and we'll see if we can improve these instructions even further.\n\n## Add tests for your changes :tada:\n\nIt would be really great if the changes you did could be tested somehow. Our tests live inside the `test` directory, and they can be run with the following command:\n\n```sh\nnpm run test-dev\n```\n\nNow whenever you change some files, the tests will be rerun immediately. If you don't want that, and want to run tests as a one-off operation, you can use:\n\n```sh\nnpm test\n```\n"
},
{
"path": "LICENSE",
"content": "Copyright JS Foundation and other contributors\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
},
{
"path": "README.md",
"content": "[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![downloads][downloads]][downloads-url]\n\n
\n\n```js\nconst { BundleAnalyzerPlugin } = require(\"webpack-bundle-analyzer\");\n\nmodule.exports = {\n plugins: [new BundleAnalyzerPlugin()],\n};\n```\n\nIt will create an interactive treemap visualization of the contents of all your bundles.\n\n\n\nThis module will help you:\n\n1. Realize what's _really_ inside your bundle\n2. Find out what modules make up the most of its size\n3. Find modules that got there by mistake\n4. Optimize it!\n\nAnd the best thing is it supports minified bundles! It parses them to get real size of bundled modules.\nAnd it also shows their gzipped, Brotli, or Zstandard sizes!\n\n
Options (for plugin)
\n\n\n\n```js\nnew BundleAnalyzerPlugin(options?: object)\n```\n\n| Name | Type | Description |\n| :------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`analyzerMode`** | One of: `server`, `static`, `json`, `disabled` | Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `json` mode single JSON file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |\n| **`analyzerHost`** | `{String}` | Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server. |\n| **`analyzerPort`** | `{Number}` or `auto` | Default: `8888`. Port that will be used in `server` mode to start HTTP server. If `analyzerPort` is `auto`, the operating system will assign an arbitrary unused port |\n| **`analyzerUrl`** | `{Function}` called with `{ listenHost: string, listenHost: string, boundAddress: server.address}`. [server.address comes from Node.js](https://nodejs.org/api/net.html#serveraddress) | Default: `http://${listenHost}:${boundAddress.port}`. The URL printed to console with server mode. |\n| **`reportFilename`** | `{String}` | Default: `report.html`. Path to bundle report file that will be generated in `static` mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config). |\n| **`reportTitle`** | `{String\\|function}` | Default: function that returns pretty printed current date and time. Content of the HTML `title` element; or a function of the form `() => string` that provides the content. |\n| **`defaultSizes`** | One of: `stat`, `parsed`, `gzip`, `brotli` | Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean. |\n| **`compressionAlgorithm`** | One of: `gzip`, `brotli`, `zstd` | Default: `gzip`. Compression type used to calculate the compressed module sizes. |\n| **`openAnalyzer`** | `{Boolean}` | Default: `true`. Automatically open report in default browser. |\n| **`generateStatsFile`** | `{Boolean}` | Default: `false`. If `true`, webpack stats JSON file will be generated in bundle output directory |\n| **`statsFilename`** | `{String}` | Default: `stats.json`. Name of webpack stats JSON file that will be generated if `generateStatsFile` is `true`. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config). |\n| **`statsOptions`** | `null` or `{Object}` | Default: `null`. Options for `stats.toJson()` method. For example you can exclude sources of your modules from stats file with `source: false` option. [See more options here](https://webpack.js.org/configuration/stats/). |\n| **`excludeAssets`** | `{null\\|pattern\\|pattern[]}` where `pattern` equals to `{String\\|RegExp\\|function}` | Default: `null`. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via `new RegExp(str)`. If pattern is a function it should have the following signature `(assetName: string) => boolean` and should return `true` to _exclude_ matching asset. If multiple patterns are provided asset should match at least one of them to be excluded. |\n| **`logLevel`** | One of: `info`, `warn`, `error`, `silent` | Default: `info`. Used to control how much details the plugin outputs. |\n\n
Usage (as a CLI utility)
\n\nYou can analyze an existing bundle if you have a webpack stats JSON file.\n\nYou can generate it using `BundleAnalyzerPlugin` with `generateStatsFile` option set to `true` or with this simple\ncommand:\n\n```bash\nwebpack --profile --json > stats.json\n```\n\nIf you're on Windows and using PowerShell, you can generate the stats file with this command to [avoid BOM issues](https://github.com/webpack/webpack-bundle-analyzer/issues/47):\n\n```\nwebpack --profile --json | Out-file 'stats.json' -Encoding OEM\n```\n\nThen you can run the CLI tool.\n\n```\nwebpack-bundle-analyzer bundle/output/path/stats.json\n```\n\n
Options (for CLI)
\n\n```bash\nwebpack-bundle-analyzer [bundleDir] [options]\n```\n\nArguments are documented below:\n\n### `bundleStatsFile`\n\nPath to webpack stats JSON file\n\n### `bundleDir`\n\nDirectory containing all generated bundles.\n\n### `options`\n\n```\n -V, --version output the version number\n -m, --mode Analyzer mode. Should be `server`, `static` or `json`.\n In `server` mode analyzer will start HTTP server to show bundle report.\n In `static` mode single HTML file with bundle report will be generated.\n In `json` mode single JSON file with bundle report will be generated. (default: server)\n -h, --host Host that will be used in `server` mode to start HTTP server. (default: 127.0.0.1)\n -p, --port Port that will be used in `server` mode to start HTTP server. Should be a number or `auto` (default: 8888)\n -r, --report Path to bundle report file that will be generated in `static` mode. (default: report.html)\n -t, --title String to use in title element of html report. (default: pretty printed current date)\n -s, --default-sizes <type> Module sizes to show in treemap by default.\n Possible values: stat, parsed, gzip, brotli, zstd (default: parsed)\n --compression-algorithm <type> Compression algorithm that will be used to calculate the compressed module sizes.\n Possible values: gzip, brotli, zstd (default: gzip)\n -O, --no-open Don't open report in default browser automatically.\n -e, --exclude <regexp> Assets that should be excluded from the report.\n Can be specified multiple times.\n -l, --log-level <level> Log level.\n Possible values: debug, info, warn, error, silent (default: info)\n -h, --help output usage information\n```\n\n<h2 align=\"center\" id=\"size-definitions\">Size definitions</h2>\n\nwebpack-bundle-analyzer reports three values for sizes. `defaultSizes` can be used to control which of these is shown by default. The different reported sizes are:\n\n### `stat`\n\nThis is the \"input\" size of your files, before any transformations like\nminification.\n\nIt is called \"stat size\" because it's obtained from Webpack's\n[stats object](https://webpack.js.org/configuration/stats/).\n\n### `parsed`\n\nThis is the \"output\" size of your files. If you're using a Webpack plugin such\nas Uglify, then this value will reflect the minified size of your code.\n\n### `gzip`\n\nThis is the size of running the parsed bundles/modules through gzip compression.\n\n### `brotli`\n\nThis is the size of running the parsed bundles/modules through Brotli compression.\n\n### `zstd`\n\nThis is the size of running the parsed bundles/modules through Zstandard compression. (Node.js 22.15.0+ is required for this feature)\n\n<h2 align=\"center\">Selecting Which Chunks to Display</h2>\n\nWhen opened, the report displays all of the Webpack chunks for your project. It's possible to filter to a more specific list of chunks by using the sidebar or the chunk context menu.\n\n### Sidebar\n\nThe Sidebar Menu can be opened by clicking the `>` button at the top left of the report. You can select or deselect chunks to display under the \"Show chunks\" heading there.\n\n### Chunk Context Menu\n\nThe Chunk Context Menu can be opened by right-clicking or `Ctrl`-clicking on a specific chunk in the report. It provides the following options:\n\n- **Hide chunk:** Hides the selected chunk\n- **Hide all other chunks:** Hides all chunks besides the selected one\n- **Show all chunks:** Un-hides any hidden chunks, returning the report to its initial, unfiltered view\n\n<h2 align=\"center\">Troubleshooting</h2>\n\n### I don't see `gzip` or `parsed` sizes, it only shows `stat` size\n\nIt happens when `webpack-bundle-analyzer` analyzes files that don't actually exist in your file system, for example when you work with `webpack-dev-server` that keeps all the files in RAM. If you use `webpack-bundle-analyzer` as a plugin you won't get any errors, however if you run it via CLI you get the error message in terminal:\n\n```\nError parsing bundle asset \"your_bundle_name.bundle.js\": no such file\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n```\n\nTo get more information about it you can read [issue #147](https://github.com/webpack/webpack-bundle-analyzer/issues/147).\n\n<h2 align=\"center\">Other tools</h2>\n\n- [Statoscope](https://github.com/smelukov/statoscope/blob/master/packages/ui-webpack/README.md) - Webpack bundle analyzing tool to find out why a certain module was bundled (and more features, including interactive treemap)\n\n<h2 align=\"center\">Maintainers</h2>\n\n<table>\n <tbody>\n <tr>\n <td align=\"center\">\n <img width=\"150\" height=\"150\"\n src=\"https://avatars3.githubusercontent.com/u/302213?v=4&s=150\">\n </br>\n <a href=\"https://github.com/th0r\">Yuriy Grunin</a>\n </td>\n <td align=\"center\">\n <img width=\"150\" height=\"150\"\n src=\"https://avatars3.githubusercontent.com/u/482561?v=4&s=150\">\n </br>\n <a href=\"https://github.com/valscion\">Vesa Laakso</a>\n </td>\n </tr>\n <tbody>\n</table>\n\n[npm]: https://img.shields.io/npm/v/webpack-bundle-analyzer.svg\n[npm-url]: https://npmjs.com/package/webpack-bundle-analyzer\n[node]: https://img.shields.io/node/v/webpack-bundle-analyzer.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack/webpack-bundle-analyzer/actions/workflows/main.yml/badge.svg\n[tests-url]: https://github.com/webpack/webpack-bundle-analyzer/actions/workflows/main.yml\n[downloads]: https://img.shields.io/npm/dt/webpack-bundle-analyzer.svg\n[downloads-url]: https://npmjs.com/package/webpack-bundle-analyzer\n\n<h2 align=\"center\">Contributing</h2>\n\nCheck out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on contributing :tada:\n"
},
{
"path": "bin/install-test-webpack-versions.sh",
"content": "#!/usr/bin/env bash\n\nfor dir in \"$(dirname \"$0\")\"/../test/webpack-versions/*; do (cd \"$dir\" && npm i); done\n"
},
{
"path": "client/.eslintrc.json",
"content": "{\n \"extends\": [\"th0r-react\", \"../.eslintrc.json\"],\n \"settings\": {\n \"react\": {\n \"version\": \"16.2\"\n }\n },\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"legacyDecorators\": true\n }\n },\n \"rules\": {\n \"react/jsx-key\": \"off\",\n \"react/jsx-no-bind\": \"off\",\n \"react/react-in-jsx-scope\": \"off\"\n }\n}\n"
},
{
"path": "client/components/Button.css",
"content": ".button {\n background: var(--bg-primary);\n border: 1px solid var(--border-color);\n border-radius: 4px;\n cursor: pointer;\n display: inline-block;\n font: var(--main-font);\n outline: none;\n padding: 5px 7px;\n transition:\n background 0.3s ease,\n border-color 0.3s ease,\n color 0.3s ease;\n white-space: nowrap;\n color: var(--text-primary);\n}\n\n.button:focus,\n.button:hover {\n background: var(--hover-bg);\n}\n\n.button.active {\n background: #ffa500;\n color: #000;\n}\n\n.button[disabled] {\n cursor: default;\n}\n"
},
{
"path": "client/components/Button.jsx",
"content": "import cls from \"classnames\";\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\n\nimport * as styles from \"./Button.css\";\n\nexport default class Button extends PureComponent {\n static propTypes = {\n className: PropTypes.string,\n\n active: PropTypes.bool,\n toggle: PropTypes.bool,\n disabled: PropTypes.bool,\n\n onClick: PropTypes.func.isRequired,\n\n children: PropTypes.node,\n };\n\n render({ active, className, children, ...props }) {\n const classes = cls(className, {\n [styles.button]: true,\n [styles.active]: active,\n });\n\n return (\n <button\n {...props}\n ref={this.saveRef}\n type=\"button\"\n className={classes}\n disabled={this.disabled}\n onClick={this.handleClick}\n >\n {children}\n </button>\n );\n }\n\n get disabled() {\n const { disabled, active, toggle } = this.props;\n return disabled || (active && !toggle);\n }\n\n handleClick = (event) => {\n if (this.elem) {\n this.elem.blur();\n }\n\n this.props.onClick(event);\n };\n\n saveRef = (elem) => (this.elem = elem);\n}\n"
},
{
"path": "client/components/Checkbox.css",
"content": ".label {\n cursor: pointer;\n display: inline-block;\n}\n\n.checkbox {\n cursor: pointer;\n}\n\n.itemText {\n margin-left: 3px;\n position: relative;\n top: -2px;\n vertical-align: middle;\n}\n"
},
{
"path": "client/components/Checkbox.jsx",
"content": "import cls from \"classnames\";\nimport { Component } from \"preact\";\nimport PropTypes from \"prop-types\";\n\nimport * as styles from \"./Checkbox.css\";\n\nexport default class Checkbox extends Component {\n static propTypes = {\n className: PropTypes.string,\n\n checked: PropTypes.bool,\n\n onChange: PropTypes.func.isRequired,\n\n children: PropTypes.node,\n };\n\n render() {\n const { checked, className, children } = this.props;\n\n return (\n <label className={cls(styles.label, className)}>\n <input\n className={styles.checkbox}\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n />\n {children && <span className={styles.itemText}>{children}</span>}\n </label>\n );\n }\n\n handleChange = () => {\n this.props.onChange(!this.props.checked);\n };\n}\n"
},
{
"path": "client/components/CheckboxList.css",
"content": ".container {\n font: var(--main-font);\n white-space: nowrap;\n}\n\n.label {\n font-size: 11px;\n font-weight: bold;\n margin-bottom: 7px;\n}\n\n.item + .item {\n margin-top: 1px;\n}\n"
},
{
"path": "client/components/CheckboxList.jsx",
"content": "import PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport * as styles from \"./CheckboxList.css\";\nimport CheckboxListItem from \"./CheckboxListItem.jsx\";\nimport { ViewerDataType } from \"./types.js\";\n\nconst ALL_ITEM = Symbol(\"ALL_ITEM\");\n\nexport default class CheckboxList extends PureComponent {\n static propTypes = {\n label: PropTypes.string.isRequired,\n renderLabel: PropTypes.func.isRequired,\n items: PropTypes.oneOfType([ViewerDataType, PropTypes.symbol]),\n checkedItems: PropTypes.oneOfType([ViewerDataType, PropTypes.symbol]),\n\n onChange: PropTypes.func.isRequired,\n };\n\n static ALL_ITEM = ALL_ITEM;\n\n constructor(props) {\n super(props);\n this.state = {\n checkedItems: props.checkedItems || props.items,\n };\n }\n\n componentWillReceiveProps(newProps) {\n if (newProps.items !== this.props.items) {\n if (this.isAllChecked()) {\n // Preserving `all checked` state\n this.setState({ checkedItems: newProps.items });\n this.informAboutChange(newProps.items);\n } else if (this.state.checkedItems.length) {\n // Checking only items that are in the new `items` array\n const checkedItems = newProps.items.filter((item) =>\n this.state.checkedItems.find(\n (checkedItem) => checkedItem.label === item.label,\n ),\n );\n\n this.setState({ checkedItems });\n this.informAboutChange(checkedItems);\n }\n } else if (newProps.checkedItems !== this.props.checkedItems) {\n this.setState({ checkedItems: newProps.checkedItems });\n }\n }\n\n render() {\n const { label, items, renderLabel } = this.props;\n\n return (\n <div className={styles.container}>\n <div className={styles.label}>{label}:</div>\n <div>\n <CheckboxListItem\n item={ALL_ITEM}\n checked={this.isAllChecked()}\n onChange={this.handleToggleAllCheck}\n >\n {renderLabel}\n </CheckboxListItem>\n {items.map((item) => (\n <CheckboxListItem\n key={item.label}\n item={item}\n checked={this.isItemChecked(item)}\n onChange={this.handleItemCheck}\n >\n {renderLabel}\n </CheckboxListItem>\n ))}\n </div>\n </div>\n );\n }\n\n handleToggleAllCheck = () => {\n const checkedItems = this.isAllChecked() ? [] : this.props.items;\n this.setState({ checkedItems });\n this.informAboutChange(checkedItems);\n };\n\n handleItemCheck = (item) => {\n let checkedItems;\n\n if (this.isItemChecked(item)) {\n checkedItems = this.state.checkedItems.filter(\n (checkedItem) => checkedItem !== item,\n );\n } else {\n checkedItems = [...this.state.checkedItems, item];\n }\n\n this.setState({ checkedItems });\n this.informAboutChange(checkedItems);\n };\n\n isItemChecked(item) {\n return this.state.checkedItems.includes(item);\n }\n\n isAllChecked() {\n return this.props.items.length === this.state.checkedItems.length;\n }\n\n informAboutChange(checkedItems) {\n setTimeout(() => this.props.onChange(checkedItems));\n }\n}\n"
},
{
"path": "client/components/CheckboxListItem.jsx",
"content": "import { Component } from \"preact\";\nimport PropTypes from \"prop-types\";\n\nimport Checkbox from \"./Checkbox.jsx\";\nimport * as styles from \"./CheckboxList.css\";\nimport CheckboxList from \"./CheckboxList.jsx\";\nimport { ViewerDataItemType } from \"./types.js\";\n\nexport default class CheckboxListItem extends Component {\n static propTypes = {\n item: PropTypes.oneOfType([ViewerDataItemType, PropTypes.symbol])\n .isRequired,\n\n onChange: PropTypes.func.isRequired,\n\n children: PropTypes.func,\n };\n\n render() {\n return (\n <div className={styles.item}>\n <Checkbox {...this.props} onChange={this.handleChange}>\n {this.renderLabel()}\n </Checkbox>\n </div>\n );\n }\n\n renderLabel() {\n const { children, item } = this.props;\n if (children) {\n return children(item);\n }\n\n return item === CheckboxList.ALL_ITEM ? \"All\" : item.label;\n }\n\n handleChange = () => {\n this.props.onChange(this.props.item);\n };\n}\n"
},
{
"path": "client/components/ContextMenu.css",
"content": ".container {\n font: var(--main-font);\n position: absolute;\n padding: 0;\n border-radius: 4px;\n background: #fff;\n border: 1px solid #aaa;\n list-style: none;\n opacity: 1;\n white-space: nowrap;\n visibility: visible;\n transition:\n opacity 0.2s ease,\n visibility 0.2s ease;\n}\n\n.hidden {\n opacity: 0;\n visibility: hidden;\n}\n"
},
{
"path": "client/components/ContextMenu.jsx",
"content": "import cls from \"classnames\";\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport { store } from \"../store.js\";\nimport { elementIsOutside } from \"../utils.js\";\nimport * as styles from \"./ContextMenu.css\";\nimport ContextMenuItem from \"./ContextMenuItem.jsx\";\nimport { ViewerDataItemType } from \"./types.js\";\n\nexport default class ContextMenu extends PureComponent {\n static propTypes = {\n visible: PropTypes.bool,\n\n chunk: ViewerDataItemType,\n coords: PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number,\n }).isRequired,\n\n onHide: PropTypes.func,\n };\n\n componentDidMount() {\n this.boundingRect = this.node.getBoundingClientRect();\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.visible && !prevProps.visible) {\n document.addEventListener(\n \"mousedown\",\n this.handleDocumentMousedown,\n true,\n );\n } else if (prevProps.visible && !this.props.visible) {\n document.removeEventListener(\n \"mousedown\",\n this.handleDocumentMousedown,\n true,\n );\n }\n }\n\n render() {\n const { visible } = this.props;\n const containerClassName = cls({\n [styles.container]: true,\n [styles.hidden]: !visible,\n });\n const multipleChunksSelected = store.selectedChunks.length > 1;\n return (\n <ul\n ref={this.saveNode}\n className={containerClassName}\n style={this.getStyle()}\n >\n <ContextMenuItem\n disabled={!multipleChunksSelected}\n onClick={this.handleClickHideChunk}\n >\n Hide chunk\n </ContextMenuItem>\n <ContextMenuItem\n disabled={!multipleChunksSelected}\n onClick={this.handleClickFilterToChunk}\n >\n Hide all other chunks\n </ContextMenuItem>\n <hr />\n <ContextMenuItem\n disabled={store.allChunksSelected}\n onClick={this.handleClickShowAllChunks}\n >\n Show all chunks\n </ContextMenuItem>\n </ul>\n );\n }\n\n handleClickHideChunk = () => {\n const { chunk: selectedChunk } = this.props;\n if (selectedChunk && selectedChunk.label) {\n const filteredChunks = store.selectedChunks.filter(\n (chunk) => chunk.label !== selectedChunk.label,\n );\n store.setSelectedChunks(filteredChunks);\n }\n this.hide();\n };\n\n handleClickFilterToChunk = () => {\n const { chunk: selectedChunk } = this.props;\n\n if (selectedChunk && selectedChunk.label) {\n const filteredChunks = store.allChunks.filter(\n (chunk) => chunk.label === selectedChunk.label,\n );\n store.setSelectedChunks(filteredChunks);\n }\n this.hide();\n };\n\n handleClickShowAllChunks = () => {\n store.setSelectedChunks(store.allChunks);\n this.hide();\n };\n\n /**\n * Handle document-wide `mousedown` events to detect clicks\n * outside the context menu.\n * @param {MouseEvent} event DOM mouse event object\n * @returns {void}\n */\n handleDocumentMousedown = (event) => {\n const isSecondaryClick = event.ctrlKey || event.button === 2;\n if (!isSecondaryClick && elementIsOutside(event.target, this.node)) {\n event.preventDefault();\n event.stopPropagation();\n this.hide();\n }\n };\n\n hide() {\n if (this.props.onHide) {\n this.props.onHide();\n }\n }\n\n saveNode = (node) => (this.node = node);\n\n getStyle() {\n const { boundingRect } = this;\n\n // Upon the first render of this component, we don't yet know\n // its dimensions, so can't position it yet\n if (!boundingRect) return;\n\n const { coords } = this.props;\n\n const pos = {\n left: coords.x,\n top: coords.y,\n };\n\n if (pos.left + boundingRect.width > window.innerWidth) {\n // Shifting horizontally\n pos.left = window.innerWidth - boundingRect.width;\n }\n\n if (pos.top + boundingRect.height > window.innerHeight) {\n // Flipping vertically\n pos.top = coords.y - boundingRect.height;\n }\n return pos;\n }\n}\n"
},
{
"path": "client/components/ContextMenuItem.css",
"content": ".item {\n cursor: pointer;\n margin: 0;\n padding: 8px 14px;\n user-select: none;\n}\n\n.item:hover {\n background: #ffefd7;\n}\n\n.disabled {\n cursor: default;\n color: gray;\n}\n\n.item.disabled:hover {\n background: transparent;\n}\n"
},
{
"path": "client/components/ContextMenuItem.jsx",
"content": "import cls from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nimport * as styles from \"./ContextMenuItem.css\";\n\n/**\n * @returns {boolean} nothing\n */\nfunction noop() {\n return false;\n}\n\n/**\n * @typedef {object} ContextMenuItemProps\n * @property {React.ReactNode} children children\n * @property {boolean=} disabled - true when disabled, otherwise false\n * @property {React.MouseEventHandler<HTMLLIElement>=} onClick on click handler\n */\n\n/**\n * @param {ContextMenuItemProps} props props\n * @returns {JSX.Element} context menu item\n */\nexport default function ContextMenuItem({ children, disabled, onClick }) {\n const className = cls({\n [styles.item]: true,\n [styles.disabled]: disabled,\n });\n const handler = disabled ? noop : onClick;\n return (\n <li className={className} onClick={handler}>\n {children}\n </li>\n );\n}\n\nContextMenuItem.propTypes = {\n disabled: PropTypes.bool,\n\n children: PropTypes.node.isRequired,\n\n onClick: PropTypes.func,\n};\n"
},
{
"path": "client/components/Dropdown.css",
"content": ".container {\n font: var(--main-font);\n white-space: nowrap;\n}\n\n.label {\n font-size: 11px;\n font-weight: bold;\n margin-bottom: 7px;\n}\n\n.input {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n display: block;\n width: 100%;\n color: var(--text-secondary);\n height: 27px;\n background: var(--bg-primary);\n transition:\n background-color 0.3s ease,\n border-color 0.3s ease,\n color 0.3s ease;\n}\n\n.option {\n padding: 4px 0;\n cursor: pointer;\n}\n"
},
{
"path": "client/components/Dropdown.jsx",
"content": "import { createRef } from \"preact\";\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\n\nimport * as styles from \"./Dropdown.css\";\n\nexport default class Dropdown extends PureComponent {\n static propTypes = {\n label: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(PropTypes.string).isRequired,\n onSelectionChange: PropTypes.func.isRequired,\n };\n\n input = createRef();\n\n state = {\n query: \"\",\n showOptions: false,\n };\n\n componentDidMount() {\n document.addEventListener(\"click\", this.handleClickOutside, true);\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"click\", this.handleClickOutside, true);\n }\n\n render() {\n const { label, options } = this.props;\n\n const filteredOptions = this.state.query\n ? options.filter((option) =>\n option.toLowerCase().includes(this.state.query.toLowerCase()),\n )\n : options;\n\n return (\n <div className={styles.container}>\n <div className={styles.label}>{label}:</div>\n <div>\n <input\n ref={this.input}\n className={styles.input}\n type=\"text\"\n value={this.state.query}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n />\n {this.state.showOptions ? (\n <div>\n {filteredOptions.map((option) => (\n <div\n key={option}\n className={styles.option}\n onClick={this.getOptionClickHandler(option)}\n >\n {option}\n </div>\n ))}\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n\n handleClickOutside = (event) => {\n const el = this.input.current;\n if (el && event && !el.contains(event.target)) {\n this.setState({ showOptions: false });\n // If the query is not in the options, reset the selection\n if (this.state.query && !this.props.options.includes(this.state.query)) {\n this.setState({ query: \"\" });\n this.props.onSelectionChange(undefined);\n }\n }\n };\n\n handleInput = (event) => {\n const { value } = event.target;\n this.setState({ query: value });\n if (!value) {\n this.props.onSelectionChange(undefined);\n }\n };\n\n handleFocus = () => {\n // move the cursor to the end of the input\n this.input.current.value = this.state.query;\n this.setState({ showOptions: true });\n };\n\n getOptionClickHandler = (option) => () => {\n this.props.onSelectionChange(option);\n this.setState({ query: option, showOptions: false });\n };\n}\n"
},
{
"path": "client/components/Icon.css",
"content": ".icon {\n background: no-repeat center/contain;\n display: inline-block;\n filter: invert(0);\n}\n\n[data-theme=\"dark\"] .icon {\n filter: invert(1);\n}\n"
},
{
"path": "client/components/Icon.jsx",
"content": "import cls from \"classnames\";\nimport PropTypes from \"prop-types\";\nimport iconArrowRight from \"../assets/icon-arrow-right.svg\";\nimport iconMoon from \"../assets/icon-moon.svg\";\nimport iconPin from \"../assets/icon-pin.svg\";\nimport iconSun from \"../assets/icon-sun.svg\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\n\nimport * as styles from \"./Icon.css\";\n\nconst ICONS = {\n \"arrow-right\": {\n src: iconArrowRight,\n size: [7, 13],\n },\n pin: {\n src: iconPin,\n size: [12, 18],\n },\n moon: {\n src: iconMoon,\n size: [24, 24],\n },\n sun: {\n src: iconSun,\n size: [24, 24],\n },\n};\n\nexport default class Icon extends PureComponent {\n static propTypes = {\n className: PropTypes.string,\n\n name: PropTypes.string.isRequired,\n size: PropTypes.number,\n rotate: PropTypes.number,\n };\n\n render({ className }) {\n return <i className={cls(styles.icon, className)} style={this.style} />;\n }\n\n get style() {\n const { name, size, rotate } = this.props;\n const icon = ICONS[name];\n\n if (!icon) throw new TypeError(`Can't find \"${name}\" icon.`);\n\n let [width, height] = icon.size;\n\n if (size) {\n const ratio = size / Math.max(width, height);\n width = Math.min(Math.ceil(width * ratio), size);\n height = Math.min(Math.ceil(height * ratio), size);\n }\n\n return {\n backgroundImage: `url(${icon.src})`,\n width: `${width}px`,\n height: `${height}px`,\n transform: rotate ? `rotate(${rotate}deg)` : \"\",\n };\n }\n}\n"
},
{
"path": "client/components/ModuleItem.css",
"content": ".container {\n background: no-repeat left center;\n cursor: pointer;\n margin-bottom: 4px;\n padding-left: 18px;\n position: relative;\n white-space: nowrap;\n}\n\n.container.module {\n background-image: url(\"../assets/icon-module.svg\");\n background-position-x: 1px;\n}\n\n.container.folder {\n background-image: url(\"../assets/icon-folder.svg\");\n}\n\n.container.chunk {\n background-image: url(\"../assets/icon-chunk.svg\");\n}\n\n.container.invisible:hover::before {\n background: url(\"../assets/icon-invisible.svg\") no-repeat left center;\n content: \"\";\n height: 100%;\n left: 0;\n top: 1px;\n position: absolute;\n width: 13px;\n}\n"
},
{
"path": "client/components/ModuleItem.jsx",
"content": "import cls from \"classnames\";\nimport escapeRegExp from \"escape-string-regexp\";\nimport { filesize } from \"filesize\";\nimport { escape } from \"html-escaper\";\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport * as styles from \"./ModuleItem.css\";\nimport { ModuleType, SizeType } from \"./types.js\";\n\nexport default class ModuleItem extends PureComponent {\n static propTypes = {\n module: ModuleType.isRequired,\n showSize: SizeType.isRequired,\n highlightedText: PropTypes.instanceOf(RegExp),\n\n isVisible: PropTypes.func.isRequired,\n\n onClick: PropTypes.func.isRequired,\n };\n\n state = {\n visible: true,\n };\n\n render({ module, showSize }) {\n const invisible = !this.state.visible;\n const classes = cls(styles.container, styles[this.itemType], {\n [styles.invisible]: invisible,\n });\n\n return (\n <div\n className={classes}\n title={invisible ? this.invisibleHint : null}\n onClick={this.handleClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <span dangerouslySetInnerHTML={{ __html: this.titleHtml }} />\n {showSize && (\n <>\n {\" (\"}\n <strong>{filesize(module[showSize])}</strong>\n {\")\"}\n </>\n )}\n </div>\n );\n }\n\n get itemType() {\n const { module } = this.props;\n if (!module.path) return \"chunk\";\n return module.groups ? \"folder\" : \"module\";\n }\n\n get titleHtml() {\n let html;\n const { module } = this.props;\n const title = module.path || module.label;\n const term = this.props.highlightedText;\n\n if (term) {\n const regexp =\n term instanceof RegExp\n ? new RegExp(term.source, \"igu\")\n : new RegExp(`(?:${escapeRegExp(term)})+`, \"iu\");\n let match;\n let lastMatch;\n\n do {\n lastMatch = match;\n match = regexp.exec(title);\n } while (match);\n\n if (lastMatch) {\n html = `${escape(\n title.slice(0, lastMatch.index),\n )}<strong>${escape(lastMatch[0])}</strong>${escape(\n title.slice(lastMatch.index + lastMatch[0].length),\n )}`;\n }\n }\n\n if (!html) {\n html = escape(title);\n }\n\n return html;\n }\n\n get invisibleHint() {\n const itemType =\n this.itemType.charAt(0).toUpperCase() + this.itemType.slice(1);\n return `${itemType} is not rendered in the treemap because it's too small.`;\n }\n\n get isVisible() {\n const { isVisible } = this.props;\n return isVisible ? isVisible(this.props.module) : true;\n }\n\n handleClick = () => this.props.onClick(this.props.module);\n\n handleMouseEnter = () => {\n if (this.props.isVisible) {\n this.setState({ visible: this.isVisible });\n }\n };\n}\n"
},
{
"path": "client/components/ModulesList.css",
"content": ".container {\n font: var(--main-font);\n}\n"
},
{
"path": "client/components/ModulesList.jsx",
"content": "import cls from \"classnames\";\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport ModuleItem from \"./ModuleItem.jsx\";\nimport * as styles from \"./ModulesList.css\";\nimport { ModuleType, SizeType } from \"./types.js\";\n\nexport default class ModulesList extends PureComponent {\n static propTypes = {\n className: PropTypes.string,\n\n modules: PropTypes.arrayOf(ModuleType).isRequired,\n showSize: SizeType.isRequired,\n highlightedText: PropTypes.instanceOf(RegExp),\n\n isModuleVisible: PropTypes.func.isRequired,\n onModuleClick: PropTypes.func.isRequired,\n };\n\n render({ modules, showSize, highlightedText, isModuleVisible, className }) {\n return (\n <div className={cls(styles.container, className)}>\n {modules.map((module) => (\n <ModuleItem\n key={module.cid}\n module={module}\n showSize={showSize}\n highlightedText={highlightedText}\n isVisible={isModuleVisible}\n onClick={this.handleModuleClick}\n />\n ))}\n </div>\n );\n }\n\n handleModuleClick = (module) => this.props.onModuleClick(module);\n}\n"
},
{
"path": "client/components/ModulesTreemap.css",
"content": ".container {\n align-items: stretch;\n display: flex;\n height: 100%;\n position: relative;\n width: 100%;\n}\n\n.map {\n flex: 1;\n}\n\n.sidebarGroup {\n font: var(--main-font);\n margin-bottom: 20px;\n}\n\n.showOption {\n margin-top: 5px;\n}\n\n.activeSize {\n font-weight: bold;\n}\n\n.foundModulesInfo {\n display: flex;\n font: var(--main-font);\n margin: 8px 0 0;\n}\n\n.foundModulesInfoItem + .foundModulesInfoItem {\n margin-left: 15px;\n}\n\n.foundModulesContainer {\n margin-top: 15px;\n max-height: 600px;\n overflow: auto;\n}\n\n.foundModulesChunk + .foundModulesChunk {\n margin-top: 15px;\n}\n\n.foundModulesChunkName {\n cursor: pointer;\n font: var(--main-font);\n font-weight: bold;\n margin-bottom: 7px;\n}\n\n.foundModulesList {\n margin-left: 7px;\n}\n"
},
{
"path": "client/components/ModulesTreemap.jsx",
"content": "import { filesize } from \"filesize\";\nimport { computed, makeObservable } from \"mobx\";\nimport { observer } from \"mobx-react\";\nimport { Component } from \"preact\";\n\nimport localStorage from \"../localStorage.js\";\nimport { store } from \"../store.js\";\nimport { isChunkParsed } from \"../utils.js\";\nimport Checkbox from \"./Checkbox.jsx\";\nimport CheckboxList from \"./CheckboxList.jsx\";\nimport ContextMenu from \"./ContextMenu.jsx\";\nimport Dropdown from \"./Dropdown.jsx\";\nimport ModulesList from \"./ModulesList.jsx\";\nimport * as styles from \"./ModulesTreemap.css\";\nimport Search from \"./Search.jsx\";\nimport Sidebar from \"./Sidebar.jsx\";\nimport Switcher from \"./Switcher.jsx\";\nimport Tooltip from \"./Tooltip.jsx\";\nimport Treemap from \"./Treemap.jsx\";\n\n/** @typedef {\"statSize\" | \"parsedSize\" | \"gzipSize\" | \"brotliSize\" | \"zstdSize\"} PropSize */\n\n/**\n * @returns {{ label: string, prop: PropSize }[]} sizes\n */\nfunction getSizeSwitchItems() {\n const items = [\n { label: \"Stat\", prop: \"statSize\" },\n { label: \"Parsed\", prop: \"parsedSize\" },\n ];\n\n if (globalThis.compressionAlgorithm === \"gzip\") {\n items.push({ label: \"Gzipped\", prop: \"gzipSize\" });\n }\n\n if (globalThis.compressionAlgorithm === \"brotli\") {\n items.push({ label: \"Brotli\", prop: \"brotliSize\" });\n }\n\n if (globalThis.compressionAlgorithm === \"zstd\") {\n items.push({ label: \"Zstandard\", prop: \"zstdSize\" });\n }\n\n return items;\n}\n\nclass ModulesTreemap extends Component {\n mouseCoords = {\n x: 0,\n y: 0,\n };\n\n state = {\n selectedChunk: null,\n selectedMouseCoords: { x: 0, y: 0 },\n sidebarPinned: false,\n showChunkContextMenu: false,\n showTooltip: false,\n tooltipContent: null,\n };\n\n constructor() {\n super();\n\n makeObservable(this, {\n sizeSwitchItems: computed,\n activeSizeItem: computed,\n chunkItems: computed,\n highlightedModules: computed,\n foundModulesInfo: computed,\n });\n }\n\n componentDidMount() {\n document.addEventListener(\"mousemove\", this.handleMouseMove, true);\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"mousemove\", this.handleMouseMove, true);\n }\n\n render() {\n const {\n selectedChunk,\n selectedMouseCoords,\n sidebarPinned,\n showChunkContextMenu,\n showTooltip,\n tooltipContent,\n } = this.state;\n\n return (\n <div className={styles.container}>\n <Sidebar\n pinned={sidebarPinned}\n onToggle={this.handleSidebarToggle}\n onPinStateChange={this.handleSidebarPinStateChange}\n onResize={this.handleSidebarResize}\n >\n <div className={styles.sidebarGroup}>\n <Switcher\n label=\"Treemap sizes\"\n items={this.sizeSwitchItems}\n activeItem={this.activeSizeItem}\n onSwitch={this.handleSizeSwitch}\n />\n {store.hasConcatenatedModules && (\n <div className={styles.showOption}>\n <Checkbox\n checked={store.showConcatenatedModulesContent}\n onChange={this.handleConcatenatedModulesContentToggle}\n >\n {`Show content of concatenated modules${store.activeSize === \"statSize\" ? \"\" : \" (inaccurate)\"}`}\n </Checkbox>\n </div>\n )}\n </div>\n <div className={styles.sidebarGroup}>\n <Dropdown\n label=\"Filter to initial chunks\"\n options={store.entrypoints}\n onSelectionChange={this.handleSelectionChange}\n />\n </div>\n <div className={styles.sidebarGroup}>\n <Search\n label=\"Search modules\"\n query={store.searchQuery}\n autofocus\n onQueryChange={this.handleQueryChange}\n />\n <div className={styles.foundModulesInfo}>\n {this.foundModulesInfo}\n </div>\n {store.isSearching && store.hasFoundModules && (\n <div className={styles.foundModulesContainer}>\n {store.foundModulesByChunk.map(({ chunk, modules }) => (\n <div key={chunk.cid} className={styles.foundModulesChunk}>\n <div\n className={styles.foundModulesChunkName}\n onClick={() => this.treemap.zoomToGroup(chunk)}\n >\n {chunk.label}\n </div>\n <ModulesList\n className={styles.foundModulesList}\n modules={modules}\n showSize={store.activeSize}\n highlightedText={store.searchQueryRegexp}\n isModuleVisible={this.isModuleVisible}\n onModuleClick={this.handleFoundModuleClick}\n />\n </div>\n ))}\n </div>\n )}\n </div>\n {this.chunkItems.length > 1 && (\n <div className={styles.sidebarGroup}>\n <CheckboxList\n label=\"Show chunks\"\n items={this.chunkItems}\n checkedItems={store.selectedChunks}\n renderLabel={this.renderChunkItemLabel}\n onChange={this.handleSelectedChunksChange}\n />\n </div>\n )}\n </Sidebar>\n <Treemap\n ref={this.saveTreemapRef}\n className={styles.map}\n data={store.visibleChunks}\n highlightGroups={this.highlightedModules}\n weightProp={store.activeSize}\n onMouseLeave={this.handleMouseLeaveTreemap}\n onGroupHover={this.handleTreemapGroupHover}\n onGroupSecondaryClick={this.handleTreemapGroupSecondaryClick}\n onResize={this.handleResize}\n />\n {tooltipContent && (\n <Tooltip visible={showTooltip}>{tooltipContent}</Tooltip>\n )}\n <ContextMenu\n visible={showChunkContextMenu}\n chunk={selectedChunk}\n coords={selectedMouseCoords}\n onHide={this.handleChunkContextMenuHide}\n />\n </div>\n );\n }\n\n renderModuleSize(module, sizeType) {\n const sizeProp = `${sizeType}Size`;\n const size = module[sizeProp];\n const sizeLabel = getSizeSwitchItems().find(\n (item) => item.prop === sizeProp,\n ).label;\n const isActive = store.activeSize === sizeProp;\n\n return typeof size === \"number\" ? (\n <div className={isActive ? styles.activeSize : \"\"}>\n {sizeLabel} size: <strong>{filesize(size)}</strong>\n </div>\n ) : null;\n }\n\n renderChunkItemLabel = (item) => {\n const isAllItem = item === CheckboxList.ALL_ITEM;\n const label = isAllItem ? \"All\" : item.label;\n const size = isAllItem ? store.totalChunksSize : item[store.activeSize];\n\n return (\n <>\n {label} (<strong>{filesize(size)}</strong>)\n </>\n );\n };\n\n get sizeSwitchItems() {\n return store.hasParsedSizes\n ? getSizeSwitchItems()\n : getSizeSwitchItems().slice(0, 1);\n }\n\n get activeSizeItem() {\n return this.sizeSwitchItems.find((item) => item.prop === store.activeSize);\n }\n\n get chunkItems() {\n const { allChunks, activeSize } = store;\n let chunkItems = [...allChunks];\n\n if (activeSize !== \"statSize\") {\n chunkItems = chunkItems.filter(isChunkParsed);\n }\n\n chunkItems.sort(\n (chunk1, chunk2) => chunk2[activeSize] - chunk1[activeSize],\n );\n\n return chunkItems;\n }\n\n get highlightedModules() {\n return new Set(store.foundModules);\n }\n\n get foundModulesInfo() {\n if (!store.isSearching) {\n // ` ` to reserve space\n return \"\\u00A0\";\n }\n\n if (store.hasFoundModules) {\n return (\n <>\n <div className={styles.foundModulesInfoItem}>\n Count: <strong>{store.foundModules.length}</strong>\n </div>\n <div className={styles.foundModulesInfoItem}>\n Total size: <strong>{filesize(store.foundModulesSize)}</strong>\n </div>\n </>\n );\n }\n\n return `Nothing found${store.allChunksSelected ? \"\" : \" in selected chunks\"}`;\n }\n\n handleSelectionChange = (selected) => {\n if (!selected) {\n store.setSelectedChunks(store.allChunks);\n return;\n }\n\n store.setSelectedChunks(\n store.allChunks.filter(\n (chunk) => chunk.isInitialByEntrypoint[selected] ?? false,\n ),\n );\n };\n\n handleConcatenatedModulesContentToggle = (flag) => {\n store.showConcatenatedModulesContent = flag;\n if (flag) {\n localStorage.setItem(\"showConcatenatedModulesContent\", true);\n } else {\n localStorage.removeItem(\"showConcatenatedModulesContent\");\n }\n };\n\n handleChunkContextMenuHide = () => {\n this.setState({\n showChunkContextMenu: false,\n });\n };\n\n handleResize = () => {\n // Close any open context menu when the report is resized,\n // so it doesn't show in an incorrect position\n if (this.state.showChunkContextMenu) {\n this.setState({\n showChunkContextMenu: false,\n });\n }\n };\n\n handleSidebarToggle = () => {\n if (this.state.sidebarPinned) {\n setTimeout(() => this.treemap.resize());\n }\n };\n\n handleSidebarPinStateChange = (pinned) => {\n this.setState({ sidebarPinned: pinned });\n setTimeout(() => this.treemap.resize());\n };\n\n handleSidebarResize = () => {\n this.treemap.resize();\n };\n\n handleSizeSwitch = (sizeSwitchItem) => {\n store.setSelectedSize(sizeSwitchItem.prop);\n };\n\n handleQueryChange = (query) => {\n store.setSearchQuery(query);\n };\n\n handleSelectedChunksChange = (selectedChunks) => {\n store.setSelectedSize(selectedChunks);\n };\n\n handleMouseLeaveTreemap = () => {\n this.setState({ showTooltip: false });\n };\n\n handleTreemapGroupSecondaryClick = (event) => {\n const { group } = event;\n\n if (group && group.isAsset) {\n this.setState({\n selectedChunk: group,\n selectedMouseCoords: { ...this.mouseCoords },\n showChunkContextMenu: true,\n });\n } else {\n this.setState({\n selectedChunk: null,\n showChunkContextMenu: false,\n });\n }\n };\n\n handleTreemapGroupHover = (event) => {\n const { group } = event;\n\n if (group) {\n this.setState({\n showTooltip: true,\n tooltipContent: this.getTooltipContent(group),\n });\n } else {\n this.setState({ showTooltip: false });\n }\n };\n\n handleFoundModuleClick = (module) => this.treemap.zoomToGroup(module);\n\n handleMouseMove = (event) => {\n Object.assign(this.mouseCoords, {\n x: event.pageX,\n y: event.pageY,\n });\n };\n\n isModuleVisible = (module) => this.treemap.isGroupRendered(module);\n\n saveTreemapRef = (treemap) => (this.treemap = treemap);\n\n getTooltipContent(module) {\n if (!module) return null;\n\n return (\n <div>\n <div>\n <strong>{module.label}</strong>\n </div>\n <br />\n {this.renderModuleSize(module, \"stat\")}\n {!module.inaccurateSizes && this.renderModuleSize(module, \"parsed\")}\n {!module.inaccurateSizes &&\n this.renderModuleSize(module, globalThis.compressionAlgorithm)}\n {module.path && (\n <div>\n Path: <strong>{module.path}</strong>\n </div>\n )}\n {module.isAsset && (\n <div>\n <br />\n <strong>\n <em>Right-click to view options related to this chunk</em>\n </strong>\n </div>\n )}\n </div>\n );\n }\n}\n\nexport default observer(ModulesTreemap);\n"
},
{
"path": "client/components/Search.css",
"content": ".container {\n font: var(--main-font);\n white-space: nowrap;\n}\n\n.label {\n font-weight: bold;\n margin-bottom: 7px;\n}\n\n.row {\n display: flex;\n}\n\n.input {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n display: block;\n flex: 1;\n padding: 5px;\n background: var(--bg-primary);\n color: var(--text-primary);\n transition:\n background-color 0.3s ease,\n color 0.3s ease,\n border-color 0.3s ease;\n}\n\n.input:focus {\n outline: none;\n border-color: var(--text-secondary);\n}\n\n.clear {\n flex: 0 0 auto;\n line-height: 1;\n margin-left: 3px;\n padding: 5px 8px 7px;\n}\n"
},
{
"path": "client/components/Search.jsx",
"content": "// TODO: switch to a more modern debounce package once we drop Node.js 10 support\nimport debounce from \"debounce\";\n\nimport PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport Button from \"./Button.jsx\";\n\nimport * as styles from \"./Search.css\";\n\nexport default class Search extends PureComponent {\n static propTypes = {\n className: PropTypes.string,\n\n label: PropTypes.string.isRequired,\n query: PropTypes.string.isRequired,\n\n autofocus: PropTypes.bool,\n\n onQueryChange: PropTypes.func.isRequired,\n };\n\n componentDidMount() {\n if (this.props.autofocus) {\n this.focus();\n }\n }\n\n componentWillUnmount() {\n this.handleValueChange.clear();\n }\n\n render() {\n const { label, query } = this.props;\n\n return (\n <div className={styles.container}>\n <div className={styles.label}>{label}:</div>\n <div className={styles.row}>\n <input\n ref={this.saveInputNode}\n className={styles.input}\n type=\"text\"\n value={query}\n placeholder=\"Enter regexp\"\n onInput={this.handleValueChange}\n onBlur={this.handleInputBlur}\n onKeyDown={this.handleKeyDown}\n />\n <Button className={styles.clear} onClick={this.handleClearClick}>\n x\n </Button>\n </div>\n </div>\n );\n }\n\n handleValueChange = debounce((event) => {\n this.informChange(event.target.value);\n }, 400);\n\n handleInputBlur = () => {\n this.handleValueChange.flush();\n };\n\n handleClearClick = () => {\n this.clear();\n this.focus();\n };\n\n handleKeyDown = (event) => {\n let handled = true;\n\n switch (event.key) {\n case \"Escape\":\n this.clear();\n break;\n case \"Enter\":\n this.handleValueChange.flush();\n break;\n default:\n handled = false;\n }\n\n if (handled) {\n event.stopPropagation();\n }\n };\n\n focus() {\n if (this.input) {\n this.input.focus();\n }\n }\n\n clear() {\n this.handleValueChange.clear();\n this.informChange(\"\");\n this.input.value = \"\";\n }\n\n informChange(value) {\n this.props.onQueryChange(value);\n }\n\n saveInputNode = (node) => (this.input = node);\n}\n"
},
{
"path": "client/components/Sidebar.css",
"content": ".container {\n background: var(--bg-primary);\n border: none;\n border-right: 1px solid var(--border-color);\n box-sizing: border-box;\n max-width: calc(50% - 10px);\n opacity: 0.95;\n z-index: 1;\n transition:\n background-color 0.3s ease,\n border-color 0.3s ease;\n}\n\n.container:not(.hidden) {\n min-width: 200px;\n}\n\n.container:not(.pinned) {\n bottom: 0;\n position: absolute;\n top: 0;\n transition: transform 200ms ease;\n}\n\n.container.pinned {\n position: relative;\n}\n\n.container.left {\n left: 0;\n}\n\n.container.left.hidden {\n transform: translateX(calc(-100% + 7px));\n}\n\n.content {\n box-sizing: border-box;\n height: 100%;\n overflow-y: auto;\n padding: 25px 20px 20px;\n width: 100%;\n}\n\n.empty.pinned .content {\n padding: 0;\n}\n\n.container :global(.themeToggle) {\n position: absolute;\n top: 10px;\n left: 15px;\n z-index: 10;\n height: 26px;\n width: 27px;\n padding: 0;\n}\n\n.pinButton,\n.toggleButton {\n cursor: pointer;\n height: 26px;\n line-height: 0;\n position: absolute;\n top: 10px;\n width: 27px;\n}\n\n.pinButton {\n right: 47px;\n}\n\n.toggleButton {\n padding-left: 6px;\n right: 15px;\n}\n\n.hidden .toggleButton {\n right: -35px;\n transition: transform 0.2s ease;\n}\n\n.hidden .toggleButton:hover {\n transform: translateX(4px);\n}\n\n.resizer {\n bottom: 0;\n cursor: col-resize;\n position: absolute;\n right: 0;\n top: 0;\n width: 7px;\n}\n\n:export {\n toggleTime: 200ms;\n}\n"
},
{
"path": "client/components/Sidebar.jsx",
"content": "import cls from \"classnames\";\nimport { Component } from \"preact\";\nimport PropTypes from \"prop-types\";\nimport Button from \"./Button.jsx\";\nimport Icon from \"./Icon.jsx\";\nimport * as styles from \"./Sidebar.css\";\nimport ThemeToggle from \"./ThemeToggle.jsx\";\n\nconst toggleTime = Number.parseInt(styles.toggleTime, 10);\n\nexport default class Sidebar extends Component {\n static propTypes = {\n pinned: PropTypes.bool.isRequired,\n position: PropTypes.string,\n\n onToggle: PropTypes.func.isRequired,\n onResize: PropTypes.func.isRequired,\n onPinStateChange: PropTypes.func.isRequired,\n\n children: PropTypes.node.isRequired,\n };\n\n static defaultProps = {\n pinned: false,\n position: \"left\",\n };\n\n allowHide = true;\n\n toggling = false;\n\n hideContentTimeout = null;\n\n width = null;\n\n state = {\n visible: true,\n renderContent: true,\n };\n\n componentDidMount() {\n this.hideTimeoutId = setTimeout(() => this.toggleVisibility(false), 3000);\n }\n\n componentWillUnmount() {\n clearTimeout(this.hideTimeoutId);\n clearTimeout(this.hideContentTimeout);\n }\n\n render() {\n const { position, pinned, children } = this.props;\n const { visible, renderContent } = this.state;\n\n const className = cls({\n [styles.container]: true,\n [styles.pinned]: pinned,\n [styles.left]: position === \"left\",\n [styles.hidden]: !visible,\n [styles.empty]: !renderContent,\n });\n\n return (\n <div\n ref={this.saveNode}\n className={className}\n onClick={this.handleClick}\n onMouseLeave={this.handleMouseLeave}\n >\n <ThemeToggle />\n {visible && (\n <Button\n type=\"button\"\n title=\"Pin\"\n className={styles.pinButton}\n active={pinned}\n toggle\n onClick={this.handlePinButtonClick}\n >\n <Icon name=\"pin\" size={13} />\n </Button>\n )}\n <Button\n type=\"button\"\n title={visible ? \"Hide\" : \"Show sidebar\"}\n className={styles.toggleButton}\n onClick={this.handleToggleButtonClick}\n >\n <Icon name=\"arrow-right\" size={10} rotate={visible ? 180 : 0} />\n </Button>\n {pinned && visible && (\n <div\n className={styles.resizer}\n onMouseDown={this.handleResizeStart}\n />\n )}\n <div\n className={styles.content}\n onMouseEnter={this.handleMouseEnter}\n onMouseMove={this.handleMouseMove}\n >\n {renderContent ? children : null}\n </div>\n </div>\n );\n }\n\n handleClick = () => {\n this.allowHide = false;\n };\n\n handleMouseEnter = () => {\n if (!this.toggling && !this.props.pinned) {\n clearTimeout(this.hideTimeoutId);\n this.toggleVisibility(true);\n }\n };\n\n handleMouseMove = () => {\n this.allowHide = true;\n };\n\n handleMouseLeave = () => {\n if (this.allowHide && !this.toggling && !this.props.pinned) {\n this.toggleVisibility(false);\n }\n };\n\n handleToggleButtonClick = () => {\n this.toggleVisibility();\n };\n\n handlePinButtonClick = () => {\n const pinned = !this.props.pinned;\n this.width = pinned ? this.node.getBoundingClientRect().width : null;\n this.updateNodeWidth();\n this.props.onPinStateChange(pinned);\n };\n\n handleResizeStart = (event) => {\n this.resizeInfo = {\n startPageX: event.pageX,\n initialWidth: this.width,\n };\n document.body.classList.add(\"resizing\", \"col\");\n document.addEventListener(\"mousemove\", this.handleResize, true);\n document.addEventListener(\"mouseup\", this.handleResizeEnd, true);\n };\n\n handleResize = (event) => {\n this.width =\n this.resizeInfo.initialWidth + (event.pageX - this.resizeInfo.startPageX);\n this.updateNodeWidth();\n };\n\n handleResizeEnd = () => {\n document.body.classList.remove(\"resizing\", \"col\");\n document.removeEventListener(\"mousemove\", this.handleResize, true);\n document.removeEventListener(\"mouseup\", this.handleResizeEnd, true);\n this.props.onResize();\n };\n\n toggleVisibility(flag) {\n clearTimeout(this.hideContentTimeout);\n\n const { visible } = this.state;\n const { onToggle, pinned } = this.props;\n\n if (flag === undefined) {\n flag = !visible;\n } else if (flag === visible) {\n return;\n }\n\n this.setState({ visible: flag });\n this.toggling = true;\n setTimeout(() => {\n this.toggling = false;\n }, toggleTime);\n\n if (pinned) {\n this.updateNodeWidth(flag ? this.width : null);\n }\n\n if (flag || pinned) {\n this.setState({ renderContent: flag });\n onToggle(flag);\n } else if (!flag) {\n // Waiting for the CSS animation to finish and hiding content\n this.hideContentTimeout = setTimeout(() => {\n this.hideContentTimeout = null;\n this.setState({ renderContent: false });\n onToggle(false);\n }, toggleTime);\n }\n }\n\n saveNode = (node) => (this.node = node);\n\n updateNodeWidth(width = this.width) {\n this.node.style.width = width ? `${width}px` : \"\";\n }\n}\n"
},
{
"path": "client/components/Switcher.css",
"content": ".container {\n font: var(--main-font);\n white-space: nowrap;\n}\n\n.label {\n font-weight: bold;\n font-size: 11px;\n margin-bottom: 7px;\n}\n\n.item + .item {\n margin-left: 5px;\n}\n"
},
{
"path": "client/components/Switcher.jsx",
"content": "import PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport * as styles from \"./Switcher.css\";\nimport SwitcherItem from \"./SwitcherItem.jsx\";\nimport { SwitcherItemType } from \"./types.js\";\n\nexport default class Switcher extends PureComponent {\n static propTypes = {\n label: PropTypes.string.isRequired,\n\n items: PropTypes.arrayOf(SwitcherItemType).isRequired,\n activeItem: SwitcherItemType.isRequired,\n\n onSwitch: PropTypes.func.isRequired,\n };\n\n render() {\n const { label, items, activeItem, onSwitch } = this.props;\n\n return (\n <div className={styles.container}>\n <div className={styles.label}>{label}:</div>\n <div>\n {items.map((item) => (\n <SwitcherItem\n key={item.label}\n className={styles.item}\n item={item}\n active={item === activeItem}\n onClick={onSwitch}\n />\n ))}\n </div>\n </div>\n );\n }\n}\n"
},
{
"path": "client/components/SwitcherItem.jsx",
"content": "import PropTypes from \"prop-types\";\nimport PureComponent from \"../lib/PureComponent.jsx\";\nimport Button from \"./Button.jsx\";\nimport { SwitcherItemType } from \"./types.js\";\n\nexport default class SwitcherItem extends PureComponent {\n static propTypes = {\n active: PropTypes.bool.isRequired,\n\n item: SwitcherItemType.isRequired,\n\n onClick: PropTypes.func.isRequired,\n };\n\n render({ item, ...props }) {\n return (\n <Button {...props} onClick={this.handleClick}>\n {item.label}\n </Button>\n );\n }\n\n handleClick = () => {\n this.props.onClick(this.props.item);\n };\n}\n"
},
{
"path": "client/components/ThemeToggle.css",
"content": ".themeToggle {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s ease;\n}\n\n.themeToggle:hover {\n background: rgba(0, 0, 0, 0.1);\n}\n\n[data-theme=\"dark\"] .themeToggle:hover {\n background: rgba(255, 255, 255, 0.1);\n}\n"
},
{
"path": "client/components/ThemeToggle.jsx",
"content": "import { observer } from \"mobx-react\";\nimport { Component } from \"preact\";\n\nimport { store } from \"../store.js\";\nimport Button from \"./Button.jsx\";\nimport Icon from \"./Icon.jsx\";\n\nimport * as styles from \"./ThemeToggle.css\";\n\nclass ThemeToggle extends Component {\n render() {\n const { darkMode } = store;\n\n return (\n <Button\n type=\"button\"\n title={darkMode ? \"Switch to Light Mode\" : \"Switch to Dark Mode\"}\n className={styles.themeToggle}\n onClick={this.handleToggle}\n >\n <Icon name={darkMode ? \"sun\" : \"moon\"} size={16} />\n </Button>\n );\n }\n\n handleToggle = () => {\n store.toggleDarkMode();\n };\n}\n\nexport default observer(ThemeToggle);\n"
},
{
"path": "client/components/Tooltip.css",
"content": ".container {\n font: var(--main-font);\n position: absolute;\n padding: 5px 10px;\n border-radius: 4px;\n background: #fff;\n border: 1px solid #aaa;\n opacity: 0.9;\n white-space: nowrap;\n visibility: visible;\n transition:\n opacity 0.2s ease,\n visibility 0.2s ease;\n}\n\n.hidden {\n opacity: 0;\n visibility: hidden;\n}\n\n:global(html[data-theme=\"dark\"]) .container {\n background: var(--bg-primary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n"
},
{
"path": "client/components/Tooltip.jsx",
"content": "import cls from \"classnames\";\nimport { Component } from \"preact\";\n\nimport PropTypes from \"prop-types\";\nimport * as styles from \"./Tooltip.css\";\n\nexport default class Tooltip extends Component {\n static propTypes = {\n visible: PropTypes.bool.isRequired,\n\n children: PropTypes.node.isRequired,\n };\n\n static marginX = 10;\n\n static marginY = 30;\n\n mouseCoords = {\n x: 0,\n y: 0,\n };\n\n state = {\n left: 0,\n top: 0,\n };\n\n componentDidMount() {\n document.addEventListener(\"mousemove\", this.handleMouseMove, true);\n }\n\n shouldComponentUpdate(nextProps) {\n return this.props.visible || nextProps.visible;\n }\n\n componentWillUnmount() {\n document.removeEventListener(\"mousemove\", this.handleMouseMove, true);\n }\n\n render() {\n const { children, visible } = this.props;\n\n const className = cls({\n [styles.container]: true,\n [styles.hidden]: !visible,\n });\n\n return (\n <div ref={this.saveNode} className={className} style={this.getStyle()}>\n {children}\n </div>\n );\n }\n\n handleMouseMove = (event) => {\n Object.assign(this.mouseCoords, {\n x: event.pageX,\n y: event.pageY,\n });\n\n if (this.props.visible) {\n this.updatePosition();\n }\n };\n\n saveNode = (node) => (this.node = node);\n\n getStyle() {\n return {\n left: this.state.left,\n top: this.state.top,\n };\n }\n\n updatePosition() {\n if (!this.props.visible) return;\n\n const pos = {\n left: this.mouseCoords.x + Tooltip.marginX,\n top: this.mouseCoords.y + Tooltip.marginY,\n };\n\n const boundingRect = this.node.getBoundingClientRect();\n\n if (pos.left + boundingRect.width > window.innerWidth) {\n // Shifting horizontally\n pos.left = window.innerWidth - boundingRect.width;\n }\n\n if (pos.top + boundingRect.height > window.innerHeight) {\n // Flipping vertically\n pos.top = this.mouseCoords.y - Tooltip.marginY - boundingRect.height;\n }\n\n this.setState(pos);\n }\n}\n"
},
{
"path": "client/components/Treemap.jsx",
"content": "import FoamTree from \"@carrotsearch/foamtree\";\nimport { Component } from \"preact\";\nimport PropTypes from \"prop-types\";\nimport { SizeType, ViewerDataType } from \"./types.js\";\n\n/**\n * @param {Event} event event\n */\nfunction preventDefault(event) {\n event.preventDefault();\n}\n\n/**\n * @param {string} str string\n * @returns {number} hash\n */\nfunction hashCode(str) {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const code = str.charCodeAt(i);\n hash = (hash << 5) - hash + code;\n hash &= hash;\n }\n return hash;\n}\n\nexport default class Treemap extends Component {\n static propTypes = {\n classname: PropTypes.string,\n\n data: ViewerDataType.isRequired,\n highlightGroups: PropTypes.instanceOf(Set).isRequired,\n weightProp: SizeType.isRequired,\n\n onGroupHover: PropTypes.func,\n onGroupSecondaryClick: PropTypes.func,\n onMouseLeave: PropTypes.func,\n onResize: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n this.treemap = null;\n this.zoomOutDisabled = false;\n this.findChunkNamePartIndex();\n }\n\n componentDidMount() {\n this.treemap = this.createTreemap();\n window.addEventListener(\"resize\", this.resize);\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.data !== this.props.data) {\n this.findChunkNamePartIndex();\n this.treemap.set({\n dataObject: this.getTreemapDataObject(nextProps.data),\n });\n } else if (nextProps.highlightGroups !== this.props.highlightGroups) {\n setTimeout(() => this.treemap.redraw());\n }\n }\n\n shouldComponentUpdate() {\n return false;\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.resize);\n this.treemap.dispose();\n }\n\n render() {\n return <div {...this.props} ref={this.saveNodeRef} />;\n }\n\n saveNodeRef = (node) => (this.node = node);\n\n getTreemapDataObject(data = this.props.data) {\n return { groups: data };\n }\n\n createTreemap() {\n const component = this;\n const { props } = this;\n\n return new FoamTree({\n element: this.node,\n layout: \"squarified\",\n stacking: \"flattened\",\n pixelRatio: window.devicePixelRatio || 1,\n maxGroups: Infinity,\n maxGroupLevelsDrawn: Infinity,\n maxGroupLabelLevelsDrawn: Infinity,\n maxGroupLevelsAttached: Infinity,\n wireframeLabelDrawing: \"always\",\n groupMinDiameter: 0,\n groupLabelVerticalPadding: 0.2,\n rolloutDuration: 0,\n pullbackDuration: 0,\n fadeDuration: 0,\n groupExposureZoomMargin: 0.2,\n zoomMouseWheelDuration: 300,\n openCloseDuration: 200,\n dataObject: this.getTreemapDataObject(),\n titleBarDecorator(opts, props, vars) {\n vars.titleBarShown = false;\n },\n groupColorDecorator(options, properties, variables) {\n const root = component.getGroupRoot(properties.group);\n const chunkName = component.getChunkNamePart(root.label);\n const hash = /[^0-9]/u.test(chunkName)\n ? hashCode(chunkName)\n : (Number.parseInt(chunkName, 10) / 1000) * 360;\n variables.groupColor = {\n model: \"hsla\",\n h: Math.round(Math.abs(hash) % 360),\n s: 60,\n l: 50,\n a: 0.9,\n };\n\n const { highlightGroups } = component.props;\n const module = properties.group;\n\n if (highlightGroups && highlightGroups.has(module)) {\n variables.groupColor = {\n model: \"rgba\",\n r: 255,\n g: 0,\n b: 0,\n a: 0.8,\n };\n } else if (highlightGroups && highlightGroups.size > 0) {\n // this means a search (e.g.) is active, but this module\n // does not match; gray it out\n // https://github.com/webpack/webpack-bundle-analyzer/issues/553\n variables.groupColor.s = 10;\n }\n },\n /**\n * Handle Foamtree's \"group clicked\" event\n * @param {FoamtreeEvent} event foamtree event object (see https://get.carrotsearch.com/foamtree/demo/api/index.html#event-details)\n * @returns {void}\n */\n onGroupClick(event) {\n preventDefault(event);\n if ((event.ctrlKey || event.secondary) && props.onGroupSecondaryClick) {\n props.onGroupSecondaryClick.call(component, event);\n return;\n }\n component.zoomOutDisabled = false;\n this.zoom(event.group);\n },\n onGroupDoubleClick: preventDefault,\n onGroupHover(event) {\n // Ignoring hovering on `FoamTree` branding group and the root group\n if (\n event.group &&\n (event.group.attribution || event.group === this.get(\"dataObject\"))\n ) {\n event.preventDefault();\n if (props.onMouseLeave) {\n props.onMouseLeave.call(component, event);\n }\n return;\n }\n\n if (props.onGroupHover) {\n props.onGroupHover.call(component, event);\n }\n },\n onGroupMouseWheel(event) {\n const { scale } = this.get(\"viewport\");\n const isZoomOut = event.delta < 0;\n\n if (isZoomOut) {\n if (component.zoomOutDisabled) return preventDefault(event);\n if (scale < 1) {\n component.zoomOutDisabled = true;\n preventDefault(event);\n }\n } else {\n component.zoomOutDisabled = false;\n }\n },\n });\n }\n\n getGroupRoot(group) {\n let nextParent;\n while (\n !group.isAsset &&\n (nextParent = this.treemap.get(\"hierarchy\", group).parent)\n ) {\n group = nextParent;\n }\n return group;\n }\n\n zoomToGroup(group) {\n this.zoomOutDisabled = false;\n\n while (group && !this.treemap.get(\"state\", group).revealed) {\n group = this.treemap.get(\"hierarchy\", group).parent;\n }\n\n if (group) {\n this.treemap.zoom(group);\n }\n }\n\n isGroupRendered(group) {\n const groupState = this.treemap.get(\"state\", group);\n return Boolean(groupState) && groupState.revealed;\n }\n\n update() {\n this.treemap.update();\n }\n\n resize = () => {\n const { props } = this;\n this.treemap.resize();\n\n if (props.onResize) {\n props.onResize();\n }\n };\n\n /**\n * Finds patterns across all chunk names to identify the unique \"name\" part.\n */\n findChunkNamePartIndex() {\n const splitChunkNames = this.props.data.map((chunk) =>\n chunk.label.split(/[^a-z0-9]/iu),\n );\n const longestSplitName = Math.max(\n ...splitChunkNames.map((parts) => parts.length),\n );\n const namePart = {\n index: 0,\n votes: 0,\n };\n for (let i = longestSplitName - 1; i >= 0; i--) {\n const identifierVotes = {\n name: 0,\n hash: 0,\n ext: 0,\n };\n let lastChunkPart = \"\";\n for (const splitChunkName of splitChunkNames) {\n const part = splitChunkName[i];\n if (part === undefined || part === \"\") {\n continue;\n }\n if (part === lastChunkPart) {\n identifierVotes.ext++;\n } else if (\n /[a-z]/u.test(part) &&\n /[0-9]/u.test(part) &&\n part.length === lastChunkPart.length\n ) {\n identifierVotes.hash++;\n } else if (/^[a-z]+$/iu.test(part) || /^[0-9]+$/u.test(part)) {\n identifierVotes.name++;\n }\n lastChunkPart = part;\n }\n if (identifierVotes.name >= namePart.votes) {\n namePart.index = i;\n namePart.votes = identifierVotes.name;\n }\n }\n this.chunkNamePartIndex = namePart.index;\n }\n\n getChunkNamePart(chunkLabel) {\n return (\n chunkLabel.split(/[^a-z0-9]/iu)[this.chunkNamePartIndex] || chunkLabel\n );\n }\n}\n"
},
{
"path": "client/components/types.js",
"content": "import PropTypes from \"prop-types\";\n\nexport const GroupType = PropTypes.shape({\n cid: PropTypes.number.isRequired,\n label: PropTypes.string.isRequired,\n path: PropTypes.string.isRequired,\n // eslint-disable-next-line new-cap\n groups: PropTypes.arrayOf((...args) => GroupType(...args)),\n statSize: PropTypes.number.isRequired,\n parsedSize: PropTypes.number.isRequired,\n gzipSize: PropTypes.number,\n brotliSize: PropTypes.number,\n zstdSize: PropTypes.number,\n});\n\nexport const ViewerDataItemType = PropTypes.shape({\n cid: PropTypes.number.isRequired,\n label: PropTypes.string.isRequired,\n isAsset: PropTypes.bool,\n statSize: PropTypes.number.isRequired,\n parsedSize: PropTypes.number.isRequired,\n gzipSize: PropTypes.number,\n brotliSize: PropTypes.number,\n zstdSize: PropTypes.number,\n groups: PropTypes.arrayOf(GroupType).isRequired,\n isInitialByEntrypoint: PropTypes.objectOf(PropTypes.bool),\n});\n\nexport const ViewerDataType = PropTypes.arrayOf(ViewerDataItemType);\n\nexport const ModuleType = PropTypes.shape({\n cid: PropTypes.number.isRequired,\n label: PropTypes.string.isRequired,\n path: PropTypes.string,\n statSize: PropTypes.number.isRequired,\n parsedSize: PropTypes.number.isRequired,\n gzipSize: PropTypes.number,\n brotliSize: PropTypes.number,\n zstdSize: PropTypes.number,\n weight: PropTypes.number.isRequired,\n});\n\nexport const SizeType = PropTypes.oneOf([\"statSize\", \"parsedSize\", \"gzipSize\"]);\n\nexport const SwitcherItemType = PropTypes.shape({\n label: PropTypes.string,\n prop: SizeType,\n});\n"
},
{
"path": "client/lib/PureComponent.jsx",
"content": "import { Component } from \"preact\";\n\n/**\n * @param {object} obj1 obj1\n * @param {object} obj2 obj2\n * @returns {boolean} true when the same, otherwise false\n */\nfunction isEqual(obj1, obj2) {\n if (obj1 === obj2) return true;\n const keys = Object.keys(obj1);\n if (keys.length !== Object.keys(obj2).length) return false;\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n if (obj1[key] !== obj2[key]) return false;\n }\n return true;\n}\n\nexport default class PureComponent extends Component {\n shouldComponentUpdate(nextProps, nextState) {\n return !isEqual(nextProps, this.props) || !isEqual(this.state, nextState);\n }\n}\n"
},
{
"path": "client/localStorage.js",
"content": "const KEY_PREFIX = \"wba\";\n\nexport default {\n getItem(key) {\n try {\n return JSON.parse(\n globalThis.localStorage.getItem(`${KEY_PREFIX}.${key}`),\n );\n } catch {\n return null;\n }\n },\n\n setItem(key, value) {\n try {\n globalThis.localStorage.setItem(\n `${KEY_PREFIX}.${key}`,\n JSON.stringify(value),\n );\n } catch {\n /* ignored */\n }\n },\n\n removeItem(key) {\n try {\n globalThis.localStorage.removeItem(`${KEY_PREFIX}.${key}`);\n } catch {\n /* ignored */\n }\n },\n};\n"
},
{
"path": "client/store.js",
"content": "import { action, computed, makeObservable, observable } from \"mobx\";\nimport localStorage from \"./localStorage.js\";\nimport { isChunkParsed, walkModules } from \"./utils.js\";\n\nexport class Store {\n cid = 0;\n\n sizes = new Set([\n \"statSize\",\n \"parsedSize\",\n \"gzipSize\",\n \"brotliSize\",\n \"zstdSize\",\n ]);\n\n allChunks;\n\n selectedChunks;\n\n searchQuery = \"\";\n\n defaultSize;\n\n selectedSize;\n\n showConcatenatedModulesContent =\n localStorage.getItem(\"showConcatenatedModulesContent\") === true;\n\n darkMode = (() => {\n const systemPrefersDark = globalThis.matchMedia(\n \"(prefers-color-scheme: dark)\",\n ).matches;\n\n try {\n const saved = localStorage.getItem(\"darkMode\");\n if (saved !== null) return saved === \"true\";\n } catch {\n // Some browsers might not have localStorage available and we can fail silently\n }\n\n return systemPrefersDark;\n })();\n\n constructor() {\n makeObservable(this, {\n allChunks: observable.ref,\n selectedChunks: observable.shallow,\n searchQuery: observable,\n defaultSize: observable,\n selectedSize: observable,\n showConcatenatedModulesContent: observable,\n darkMode: observable,\n\n toggleDarkMode: action,\n setModules: action,\n setSelectedChunks: action,\n setSelectedSize: action,\n setSearchQuery: action,\n\n hasParsedSizes: computed,\n activeSize: computed,\n visibleChunks: computed,\n allChunksSelected: computed,\n totalChunksSize: computed,\n searchQueryRegexp: computed,\n isSearching: computed,\n foundModulesByChunk: computed,\n foundModules: computed,\n hasFoundModules: computed,\n hasConcatenatedModules: computed,\n foundModulesSize: computed,\n });\n }\n\n setModules(modules) {\n walkModules(modules, (module) => {\n module.cid = this.cid++;\n });\n\n this.allChunks = modules;\n this.selectedChunks = this.allChunks;\n }\n\n setEntrypoints(entrypoints) {\n this.entrypoints = entrypoints;\n }\n\n get hasParsedSizes() {\n return this.allChunks.some(isChunkParsed);\n }\n\n setSelectedSize(selectedSize) {\n this.selectedSize = selectedSize;\n }\n\n get activeSize() {\n const activeSize = this.selectedSize || this.defaultSize;\n\n if (!this.hasParsedSizes || !this.sizes.has(activeSize)) {\n return \"statSize\";\n }\n\n return activeSize;\n }\n\n setSelectedChunks(chunks) {\n this.selectedChunks = chunks;\n }\n\n get visibleChunks() {\n const visibleChunks = this.allChunks.filter((chunk) =>\n this.selectedChunks.includes(chunk),\n );\n\n return this.filterModulesForSize(visibleChunks, this.activeSize);\n }\n\n get allChunksSelected() {\n return this.visibleChunks.length === this.allChunks.length;\n }\n\n get totalChunksSize() {\n return this.allChunks.reduce(\n (totalSize, chunk) => totalSize + (chunk[this.activeSize] || 0),\n 0,\n );\n }\n\n get searchQueryRegexp() {\n const query = this.searchQuery.trim();\n\n if (!query) {\n return null;\n }\n\n try {\n return new RegExp(query, \"iu\");\n } catch {\n return null;\n }\n }\n\n get isSearching() {\n return Boolean(this.searchQueryRegexp);\n }\n\n get foundModulesByChunk() {\n if (!this.isSearching) {\n return [];\n }\n\n const query = this.searchQueryRegexp;\n\n return this.visibleChunks\n .map((chunk) => {\n let foundGroups = [];\n\n walkModules(chunk.groups, (module) => {\n let weight = 0;\n\n /**\n * Splitting found modules/directories into groups:\n *\n * 1) Module with matched label (weight = 4)\n * 2) Directory with matched label (weight = 3)\n * 3) Module with matched path (weight = 2)\n * 4) Directory with matched path (weight = 1)\n */\n if (query.test(module.label)) {\n weight += 3;\n } else if (module.path && query.test(module.path)) {\n weight++;\n }\n\n if (!weight) return;\n\n if (!module.groups) {\n weight += 1;\n }\n\n const foundModules = (foundGroups[weight - 1] =\n foundGroups[weight - 1] || []);\n foundModules.push(module);\n });\n\n const { activeSize } = this;\n\n // Filtering out missing groups\n foundGroups = foundGroups.filter(Boolean).reverse();\n // Sorting each group by active size\n for (const modules of foundGroups) {\n modules.sort((m1, m2) => m2[activeSize] - m1[activeSize]);\n }\n\n return {\n chunk,\n modules: foundGroups.flat(),\n };\n })\n .filter((result) => result.modules.length > 0)\n .toSorted((c1, c2) => c1.modules.length - c2.modules.length);\n }\n\n setSearchQuery(query) {\n this.searchQuery = query;\n }\n\n get foundModules() {\n return this.foundModulesByChunk.reduce(\n (arr, chunk) => [...arr, ...chunk.modules],\n [],\n );\n }\n\n get hasFoundModules() {\n return this.foundModules.length > 0;\n }\n\n get hasConcatenatedModules() {\n let result = false;\n\n walkModules(this.visibleChunks, (module) => {\n if (module.concatenated) {\n result = true;\n return false;\n }\n });\n\n return result;\n }\n\n get foundModulesSize() {\n return this.foundModules.reduce(\n (summ, module) => summ + module[this.activeSize],\n 0,\n );\n }\n\n filterModulesForSize(modules, sizeProp) {\n return modules.reduce((filteredModules, module) => {\n if (module[sizeProp]) {\n if (module.groups) {\n const showContent =\n !module.concatenated || this.showConcatenatedModulesContent;\n\n module = {\n ...module,\n groups: showContent\n ? this.filterModulesForSize(module.groups, sizeProp)\n : null,\n };\n }\n\n module.weight = module[sizeProp];\n filteredModules.push(module);\n }\n\n return filteredModules;\n }, []);\n }\n\n toggleDarkMode() {\n this.darkMode = !this.darkMode;\n try {\n localStorage.setItem(\"darkMode\", this.darkMode);\n } catch {\n // Some browsers might not have localStorage available and we can fail silently\n }\n this.updateTheme();\n }\n\n updateTheme() {\n if (this.darkMode) {\n document.documentElement.dataset.theme = \"dark\";\n } else {\n delete document.documentElement.dataset.theme;\n }\n }\n}\n\nexport const store = new Store();\n"
},
{
"path": "client/utils.js",
"content": "/**\n * @param {Chunk} chunk chunk\n * @returns {boolean} true when chunk is parser, otherwise false\n */\nexport function isChunkParsed(chunk) {\n return typeof chunk.parsedSize === \"number\";\n}\n\n/**\n * @param {Module[]} modules modules\n * @param {(module: Module) => boolean} cb callback\n * @returns {boolean} state\n */\nexport function walkModules(modules, cb) {\n for (const module of modules) {\n if (cb(module) === false) return false;\n\n if (module.groups && walkModules(module.groups, cb) === false) {\n return false;\n }\n }\n}\n\n/**\n * @template T\n * @param {T} elem element\n * @param {T[]} container container\n * @returns {boolean} true when element is outside, otherwise false\n */\nexport function elementIsOutside(elem, container) {\n return !(elem === container || container.contains(elem));\n}\n"
},
{
"path": "client/viewer.css",
"content": ":root {\n --main-font: normal 11px Verdana, sans-serif;\n --bg-primary: #fff;\n --bg-secondary: #f5f5f5;\n --text-primary: #000;\n --text-secondary: #666;\n --border-color: #aaa;\n --border-light: #ddd;\n --shadow: rgba(0, 0, 0, 0.1);\n --hover-bg: rgba(0, 0, 0, 0.05);\n}\n\n[data-theme=\"dark\"] {\n --bg-primary: #1e1e1e;\n --bg-secondary: #252525;\n --text-primary: #e0e0e0;\n --text-secondary: #a0a0a0;\n --border-color: #404040;\n --border-light: #333;\n --shadow: rgba(0, 0, 0, 0.3);\n --hover-bg: rgba(255, 255, 255, 0.05);\n}\n\n:global html,\n:global body,\n:global #app {\n height: 100%;\n margin: 0;\n overflow: hidden;\n padding: 0;\n width: 100%;\n background: var(--bg-primary);\n color: var(--text-primary);\n transition:\n background-color 0.3s ease,\n color 0.3s ease;\n}\n\n:global body.resizing {\n user-select: none !important;\n}\n\n:global body.resizing * {\n pointer-events: none;\n}\n\n:global body.resizing.col {\n cursor: col-resize !important;\n}\n"
},
{
"path": "client/viewer.jsx",
"content": "import { render } from \"preact\";\n\nimport ModulesTreemap from \"./components/ModulesTreemap.jsx\";\nimport { store } from \"./store.js\";\n\nimport \"./viewer.css\";\n\n// Initializing WebSocket for live treemap updates\nlet ws;\ntry {\n if (globalThis.enableWebSocket) {\n ws = new WebSocket(`ws://${location.host}`);\n }\n} catch {\n // eslint-disable-next-line no-console\n console.warn(\n \"Couldn't connect to analyzer websocket server so you'll have to reload page manually to see updates in the treemap\",\n );\n}\n\nwindow.addEventListener(\n \"load\",\n () => {\n store.defaultSize = `${globalThis.defaultSizes}Size`;\n store.setModules(globalThis.chartData);\n store.setEntrypoints(globalThis.entrypoints);\n store.updateTheme();\n render(<ModulesTreemap />, document.querySelector(\"#app\"));\n\n if (ws) {\n ws.addEventListener(\"message\", (event) => {\n const msg = JSON.parse(event.data);\n\n if (msg.event === \"chartDataUpdated\") {\n store.setModules(msg.data);\n }\n });\n }\n },\n false,\n);\n"
},
{
"path": "eslint.config.mjs",
"content": "import { defineConfig, globalIgnores } from \"eslint/config\";\nimport config from \"eslint-config-webpack\";\nimport configs from \"eslint-config-webpack/configs.js\";\n\nexport default defineConfig([\n globalIgnores([\n // Ignore some test files\n \"lib/**/*\",\n \"public/**/*\",\n \"test/src/**/*\",\n \"test/dev-server/**/*\",\n \"test/bundles/**/*\",\n \"test/stats/**/*\",\n \"test/output/**/*\",\n ]),\n {\n ignores: [\"client/**/*\", \"src/tree/**/*\", \"src/sizeUtils.js\"],\n extends: [config],\n rules: {\n // We use babel so it will be applied by default\n strict: \"off\",\n },\n },\n {\n files: [\"src/bin/**/*\"],\n rules: {\n \"no-console\": \"off\",\n \"n/hashbang\": \"off\",\n \"n/no-process-exit\": \"off\",\n \"unicorn/prefer-top-level-await\": \"off\",\n },\n },\n {\n files: [\"src/tree/**/*\", \"src/sizeUtils.js\"],\n extends: [configs[\"node-recommended-module\"]],\n },\n {\n files: [\"client/**/*\"],\n extends: [configs[\"browser-recommended\"]],\n rules: {\n // TODO fix me in future\n \"react/no-deprecated\": \"off\",\n },\n },\n]);\n"
},
{
"path": "jest.config.js",
"content": "\"use strict\";\n\n// Jest configuration\n// Reference: https://jestjs.io/docs/configuration\n\nmodule.exports = {\n testTimeout: 15000,\n testMatch: [\"**/test/*.js\"],\n testPathIgnorePatterns: [\"<rootDir>/test/helpers.js\"],\n setupFilesAfterEnv: [\"<rootDir>/test/helpers.js\"],\n coveragePathIgnorePatterns: [\"<rootDir>/test\"],\n watchPathIgnorePatterns: [\n // Ignore the output generated by plugin tests\n // when watching for changes to avoid the test\n // runner continuously re-running tests\n \"<rootDir>/test/output\",\n ],\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"webpack-bundle-analyzer\",\n \"version\": \"5.2.0\",\n \"description\": \"Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap\",\n \"keywords\": [\n \"webpack\",\n \"bundle\",\n \"analyzer\",\n \"modules\",\n \"size\",\n \"interactive\",\n \"chart\",\n \"treemap\",\n \"zoomable\",\n \"zoom\"\n ],\n \"homepage\": \"https://github.com/webpack/webpack-bundle-analyzer\",\n \"bugs\": {\n \"url\": \"https://github.com/webpack/webpack-bundle-analyzer/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/webpack/webpack-bundle-analyzer.git\"\n },\n \"license\": \"MIT\",\n \"author\": \"Yury Grunin <grunin.ya@ya.ru>\",\n \"main\": \"lib/index.js\",\n \"bin\": \"lib/bin/analyzer.js\",\n \"files\": [\n \"public\",\n \"lib\"\n ],\n \"scripts\": {\n \"clean:analyzer\": \"del-cli lib\",\n \"clean:viewer\": \"del-cli public\",\n \"clean\": \"npm run clean:analyzer && npm run clean:viewer\",\n \"build:analyzer\": \"npm run clean:analyzer && babel src -d lib --copy-files\",\n \"build:viewer\": \"npm run clean:viewer && webpack-cli --node-env=production\",\n \"build\": \"npm run build:analyzer && npm run build:viewer\",\n \"watch:analyzer\": \"npm run build:analyzer -- --watch\",\n \"watch:viewer\": \"npm run build:viewer -- --node-env=development --watch\",\n \"npm-publish\": \"npm run lint && npm run build && npm test && npm publish\",\n \"lint\": \"npm run lint:code && npm run lint:types && npm run fmt:check\",\n \"lint:code\": \"eslint --cache .\",\n \"lint:types\": \"tsc --pretty --noEmit\",\n \"fmt\": \"npm run fmt:base -- --log-level warn --write\",\n \"fmt:check\": \"npm run fmt:base -- --check\",\n \"fmt:base\": \"prettier --cache --ignore-unknown .\",\n \"fix\": \"npm run fix:code && npm run fmt\",\n \"test\": \"NODE_OPTIONS=--openssl-legacy-provider jest --runInBand\",\n \"test:coverage\": \"npm run test -- --coverage\",\n \"test-dev\": \"NODE_OPTIONS=--openssl-legacy-provider jest --watch --runInBand\"\n },\n \"dependencies\": {\n \"@discoveryjs/json-ext\": \"^0.6.3\",\n \"acorn\": \"^8.0.4\",\n \"acorn-walk\": \"^8.0.0\",\n \"commander\": \"^14.0.2\",\n \"escape-string-regexp\": \"^5.0.0\",\n \"html-escaper\": \"^3.0.3\",\n \"opener\": \"^1.5.2\",\n \"picocolors\": \"^1.0.0\",\n \"sirv\": \"^3.0.2\",\n \"ws\": \"^8.19.0\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.28.6\",\n \"@babel/core\": \"^7.26.9\",\n \"@babel/plugin-transform-class-properties\": \"^7.27.1\",\n \"@babel/plugin-transform-runtime\": \"^7.26.9\",\n \"@babel/preset-env\": \"^7.26.9\",\n \"@babel/preset-react\": \"^7.26.3\",\n \"@babel/runtime\": \"^7.26.9\",\n \"@carrotsearch/foamtree\": \"^3.5.0\",\n \"@types/html-escaper\": \"^3.0.4\",\n \"@types/opener\": \"^1.4.3\",\n \"autoprefixer\": \"^10.2.5\",\n \"babel-eslint\": \"^10.1.0\",\n \"babel-loader\": \"^10.0.0\",\n \"classnames\": \"^2.3.1\",\n \"core-js\": \"^3.12.1\",\n \"css-loader\": \"^7.1.3\",\n \"cssnano\": \"^7.1.2\",\n \"debounce\": \"^3.0.0\",\n \"del-cli\": \"^7.0.0\",\n \"eslint\": \"^9.39.2\",\n \"eslint-config-webpack\": \"^4.9.3\",\n \"filesize\": \"^11.0.13\",\n \"jest\": \"^30.2.0\",\n \"mobx\": \"^6.15.0\",\n \"mobx-react\": \"^9.2.1\",\n \"postcss\": \"^8.3.0\",\n \"postcss-loader\": \"^8.2.0\",\n \"preact\": \"^10.5.13\",\n \"prettier\": \"^3.8.0\",\n \"prop-types\": \"^15.8.1\",\n \"puppeteer\": \"^24.30.0\",\n \"style-loader\": \"^4.0.0\",\n \"terser-webpack-plugin\": \"^5.1.2\",\n \"tinyglobby\": \"^0.2.15\",\n \"typescript\": \"^5.9.3\",\n \"webpack\": \"^5.105.2\",\n \"webpack-4\": \"npm:webpack@^4\",\n \"webpack-cli\": \"^6.0.1\",\n \"webpack-dev-server\": \"^5.2.0\"\n },\n \"packageManager\": \"npm@10.1.0\",\n \"engines\": {\n \"node\": \">= 20.9.0\"\n },\n \"changelog\": \"https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md\"\n}\n"
},
{
"path": "prettier.config.mjs",
"content": "export default {\n printWidth: 80,\n tabWidth: 2,\n trailingComma: \"all\",\n arrowParens: \"always\",\n};\n"
},
{
"path": "src/BundleAnalyzerPlugin.js",
"content": "const fs = require(\"node:fs\");\nconst path = require(\"node:path\");\nconst { bold } = require(\"picocolors\");\n\nconst Logger = require(\"./Logger\");\nconst { writeStats } = require(\"./statsUtils\");\nconst utils = require(\"./utils\");\nconst viewer = require(\"./viewer\");\n\n/** @typedef {import(\"net\").AddressInfo} AddressInfo */\n/** @typedef {import(\"webpack\").Compiler} Compiler */\n/** @typedef {import(\"webpack\").OutputFileSystem} OutputFileSystem */\n/** @typedef {import(\"webpack\").Stats} Stats */\n/** @typedef {import(\"webpack\").StatsOptions} StatsOptions */\n/** @typedef {import(\"webpack\").StatsAsset} StatsAsset */\n/** @typedef {import(\"webpack\").StatsCompilation} StatsCompilation */\n/** @typedef {import(\"./sizeUtils\").Algorithm} CompressionAlgorithm */\n/** @typedef {import(\"./Logger\").Level} LogLever */\n/** @typedef {import(\"./viewer\").ViewerServerObj} ViewerServerObj */\n\n/** @typedef {string | boolean | StatsOptions} PluginStatsOptions */\n\n// eslint-disable-next-line jsdoc/reject-any-type\n/** @typedef {any} EXPECTED_ANY */\n\n/** @typedef {\"static\" | \"json\" | \"server\" | \"disabled\"} Mode */\n/** @typedef {string | RegExp | ((asset: string) => void)} Pattern */\n/** @typedef {null | Pattern | Pattern[]} ExcludeAssets */\n/** @typedef {\"stat\" | \"parsed\" | \"gzip\" | \"brotli\" | \"zstd\"} Sizes */\n/** @typedef {string | (() => string)} ReportTitle */\n/** @typedef {(options: { listenHost: string, listenPort: number, boundAddress: string | AddressInfo | null }) => string} AnalyzerUrl */\n\n/**\n * @typedef {object} Options\n * @property {Mode=} analyzerMode analyzer mode\n * @property {string=} analyzerHost analyzer host\n * @property {\"auto\" | number=} analyzerPort analyzer port\n * @property {CompressionAlgorithm=} compressionAlgorithm compression algorithm\n * @property {string | null=} reportFilename report filename\n * @property {ReportTitle=} reportTitle report title\n * @property {Sizes=} defaultSizes default sizes\n * @property {boolean=} openAnalyzer open analyzer\n * @property {boolean=} generateStatsFile generate stats file\n * @property {string=} statsFilename stats filename\n * @property {PluginStatsOptions=} statsOptions stats options\n * @property {ExcludeAssets=} excludeAssets exclude assets\n * @property {LogLever=} logLevel exclude assets\n * @property {boolean=} startAnalyzer start analyzer\n * @property {AnalyzerUrl=} analyzerUrl start analyzer\n */\n\nclass BundleAnalyzerPlugin {\n /**\n * @param {Options=} opts options\n */\n constructor(opts = {}) {\n /** @type {Required<Omit<Options, \"analyzerPort\" | \"statsOptions\">> & { analyzerPort: number, statsOptions: undefined | PluginStatsOptions }} */\n this.opts = {\n analyzerMode: \"server\",\n analyzerHost: \"127.0.0.1\",\n compressionAlgorithm: \"gzip\",\n reportFilename: null,\n reportTitle: utils.defaultTitle,\n defaultSizes: \"parsed\",\n openAnalyzer: true,\n generateStatsFile: false,\n statsFilename: \"stats.json\",\n statsOptions: undefined,\n excludeAssets: null,\n logLevel: \"info\",\n // TODO deprecated\n startAnalyzer: true,\n analyzerUrl: utils.defaultAnalyzerUrl,\n ...opts,\n analyzerPort:\n opts.analyzerPort === \"auto\" ? 0 : (opts.analyzerPort ?? 8888),\n };\n\n /** @type {Compiler | null} */\n this.compiler = null;\n /** @type {Promise<ViewerServerObj> | null} */\n this.server = null;\n this.logger = new Logger(this.opts.logLevel);\n }\n\n /**\n * @param {Compiler} compiler compiler\n */\n apply(compiler) {\n this.compiler = compiler;\n\n /**\n * @param {Stats} stats stats\n * @param {(err?: Error) => void} callback callback\n */\n const done = (stats, callback) => {\n callback ||= () => {};\n\n /** @type {(() => Promise<void>)[]} */\n const actions = [];\n\n if (this.opts.generateStatsFile) {\n actions.push(() =>\n this.generateStatsFile(stats.toJson(this.opts.statsOptions)),\n );\n }\n\n // Handling deprecated `startAnalyzer` flag\n if (this.opts.analyzerMode === \"server\" && !this.opts.startAnalyzer) {\n this.opts.analyzerMode = \"disabled\";\n }\n\n if (this.opts.analyzerMode === \"server\") {\n actions.push(() => this.startAnalyzerServer(stats.toJson()));\n } else if (this.opts.analyzerMode === \"static\") {\n actions.push(() => this.generateStaticReport(stats.toJson()));\n } else if (this.opts.analyzerMode === \"json\") {\n actions.push(() => this.generateJSONReport(stats.toJson()));\n }\n\n if (actions.length) {\n // Making analyzer logs to be after all webpack logs in the console\n setImmediate(async () => {\n try {\n await Promise.all(actions.map((action) => action()));\n callback();\n } catch (err) {\n callback(/** @type {Error} */ (err));\n }\n });\n } else {\n callback();\n }\n };\n\n if (compiler.hooks) {\n compiler.hooks.done.tapAsync(\"webpack-bundle-analyzer\", done);\n } else {\n // @ts-expect-error old webpack@4 API\n compiler.plugin(\"done\", done);\n }\n }\n\n /**\n * @param {StatsCompilation} stats stats\n * @returns {Promise<void>}\n */\n async generateStatsFile(stats) {\n const statsFilepath = path.resolve(\n /** @type {Compiler} */\n (this.compiler).outputPath,\n this.opts.statsFilename,\n );\n await fs.promises.mkdir(path.dirname(statsFilepath), { recursive: true });\n\n try {\n await writeStats(stats, statsFilepath);\n\n this.logger.info(\n `${bold(\"Webpack Bundle Analyzer\")} saved stats file to ${bold(statsFilepath)}`,\n );\n } catch (error) {\n this.logger.error(\n `${bold(\"Webpack Bundle Analyzer\")} error saving stats file to ${bold(statsFilepath)}: ${error}`,\n );\n }\n }\n\n /**\n * @param {StatsCompilation} stats stats\n * @returns {Promise<void>}\n */\n async startAnalyzerServer(stats) {\n if (this.server) {\n (await this.server).updateChartData(stats);\n } else {\n this.server = viewer.startServer(stats, {\n openBrowser: this.opts.openAnalyzer,\n host: this.opts.analyzerHost,\n port: this.opts.analyzerPort,\n reportTitle: this.opts.reportTitle,\n compressionAlgorithm: this.opts.compressionAlgorithm,\n bundleDir: this.getBundleDirFromCompiler(),\n logger: this.logger,\n defaultSizes: this.opts.defaultSizes,\n excludeAssets: this.opts.excludeAssets,\n analyzerUrl: this.opts.analyzerUrl,\n });\n }\n }\n\n /**\n * @param {StatsCompilation} stats stats\n * @returns {Promise<void>}\n */\n async generateJSONReport(stats) {\n await viewer.generateJSONReport(stats, {\n reportFilename: path.resolve(\n /** @type {Compiler} */\n (this.compiler).outputPath,\n this.opts.reportFilename || \"report.json\",\n ),\n compressionAlgorithm: this.opts.compressionAlgorithm,\n bundleDir: this.getBundleDirFromCompiler(),\n logger: this.logger,\n excludeAssets: this.opts.excludeAssets,\n });\n }\n\n /**\n * @param {StatsCompilation} stats stats\n * @returns {Promise<void>}\n */\n async generateStaticReport(stats) {\n await viewer.generateReport(stats, {\n openBrowser: this.opts.openAnalyzer,\n reportFilename: path.resolve(\n /** @type {Compiler} */\n (this.compiler).outputPath,\n this.opts.reportFilename || \"report.html\",\n ),\n reportTitle: this.opts.reportTitle,\n compressionAlgorithm: this.opts.compressionAlgorithm,\n bundleDir: this.getBundleDirFromCompiler(),\n logger: this.logger,\n defaultSizes: this.opts.defaultSizes,\n excludeAssets: this.opts.excludeAssets,\n });\n }\n\n getBundleDirFromCompiler() {\n const outputFileSystemConstructor =\n /** @type {OutputFileSystem} */\n (/** @type {Compiler} */ (this.compiler).outputFileSystem).constructor;\n\n if (typeof outputFileSystemConstructor === \"undefined\") {\n return /** @type {Compiler} */ (this.compiler).outputPath;\n }\n switch (outputFileSystemConstructor.name) {\n case \"MemoryFileSystem\":\n return null;\n // Detect AsyncMFS used by Nuxt 2.5 that replaces webpack's MFS during development\n // Related: #274\n case \"AsyncMFS\":\n return null;\n default:\n return /** @type {Compiler} */ (this.compiler).outputPath;\n }\n }\n}\n\nmodule.exports = BundleAnalyzerPlugin;\n"
},
{
"path": "src/Logger.js",
"content": "/** @typedef {import(\"./BundleAnalyzerPlugin\").EXPECTED_ANY} EXPECTED_ANY */\n\n/** @typedef {\"debug\" | \"info\" | \"warn\" | \"error\" | \"silent\"} Level */\n\n/** @type {Level[]} */\nconst LEVELS = [\"debug\", \"info\", \"warn\", \"error\", \"silent\"];\n\n/** @type {Map<Level, string>} */\nconst LEVEL_TO_CONSOLE_METHOD = new Map([\n [\"debug\", \"log\"],\n [\"info\", \"log\"],\n [\"warn\", \"log\"],\n]);\n\nclass Logger {\n /** @type {Level[]} */\n static levels = LEVELS;\n\n /** @type {Level} */\n static defaultLevel = \"info\";\n\n /**\n * @param {Level=} level level\n */\n constructor(level = Logger.defaultLevel) {\n /** @type {Set<Level>} */\n this.activeLevels = new Set();\n this.setLogLevel(level);\n }\n\n /**\n * @param {Level} level level\n */\n setLogLevel(level) {\n const levelIndex = LEVELS.indexOf(level);\n\n if (levelIndex === -1) {\n throw new Error(\n `Invalid log level \"${level}\". Use one of these: ${LEVELS.join(\", \")}`,\n );\n }\n\n this.activeLevels.clear();\n\n for (const [i, level] of LEVELS.entries()) {\n if (i >= levelIndex) this.activeLevels.add(level);\n }\n }\n\n /**\n * @template {EXPECTED_ANY[]} T\n * @param {T} args args\n */\n debug(...args) {\n if (!this.activeLevels.has(\"debug\")) return;\n this._log(\"debug\", ...args);\n }\n\n /**\n * @template {EXPECTED_ANY[]} T\n * @param {T} args args\n */\n info(...args) {\n if (!this.activeLevels.has(\"info\")) return;\n this._log(\"info\", ...args);\n }\n\n /**\n * @template {EXPECTED_ANY[]} T\n * @param {T} args args\n */\n error(...args) {\n if (!this.activeLevels.has(\"error\")) return;\n this._log(\"error\", ...args);\n }\n\n /**\n * @template {EXPECTED_ANY[]} T\n * @param {T} args args\n */\n warn(...args) {\n if (!this.activeLevels.has(\"warn\")) return;\n this._log(\"warn\", ...args);\n }\n\n /**\n * @template {EXPECTED_ANY[]} T\n * @param {Level} level level\n * @param {T} args args\n */\n _log(level, ...args) {\n // eslint-disable-next-line no-console\n console[\n /** @type {Exclude<Level, \"silent\">} */\n (LEVEL_TO_CONSOLE_METHOD.get(level) || level)\n ](...args);\n }\n}\n\nmodule.exports = Logger;\n"
},
{
"path": "src/analyzer.js",
"content": "const fs = require(\"node:fs\");\nconst path = require(\"node:path\");\n\nconst { parseChunked } = require(\"@discoveryjs/json-ext\");\n\nconst Logger = require(\"./Logger\");\nconst { parseBundle } = require(\"./parseUtils\");\nconst { getCompressedSize } = require(\"./sizeUtils\");\nconst Folder = require(\"./tree/Folder\").default;\nconst { createAssetsFilter } = require(\"./utils\");\n\nconst FILENAME_QUERY_REGEXP = /\\?.*$/u;\nconst FILENAME_EXTENSIONS = /\\.(js|mjs|cjs|bundle)$/iu;\n\n/** @typedef {import(\"webpack\").StatsCompilation} StatsCompilation */\n/** @typedef {import(\"webpack\").StatsModule} StatsModule */\n/** @typedef {import(\"webpack\").StatsAsset} StatsAsset */\n/** @typedef {import(\"./BundleAnalyzerPlugin\").CompressionAlgorithm} CompressionAlgorithm */\n/** @typedef {import(\"./BundleAnalyzerPlugin\").ExcludeAssets} ExcludeAssets */\n\n/**\n * @typedef {object} AnalyzerOptions\n * @property {\"gzip\" | \"brotli\" | \"zstd\"} compressionAlgorithm compression algorithm\n */\n\n/**\n * @param {StatsModule[]} modules modules\n * @param {AnalyzerOptions} options options\n * @returns {Folder} a folder class\n */\nfunction createModulesTree(modules, options) {\n const root = new Folder(\".\", options);\n\n for (const module of modules) {\n root.addModule(module);\n }\n\n root.mergeNestedFolders();\n\n return root;\n}\n\n/**\n * arr-flatten <https://github.com/jonschlinkert/arr-flatten>\n *\n * Copyright (c) 2014-2017, Jon Schlinkert.\n * Released under the MIT License.\n *\n * Modified by Sukka <https://skk.moe>\n *\n * Replace recursively flatten with one-level deep flatten to match lodash.flatten\n *\n * TODO: replace with Array.prototype.flat once Node.js 10 support is dropped\n */\n/**\n * Flattens an array by one level.\n * @template T\n * @param {(T | T[])[]} arr the array to flatten\n * @returns {T[]} a new array containing the flattened elements\n */\nfunction flatten(arr) {\n if (!arr) return [];\n const len = arr.length;\n if (!len) return [];\n\n let cur;\n\n const res = [];\n for (let i = 0; i < len; i++) {\n cur = arr[i];\n if (Array.isArray(cur)) {\n res.push(...cur);\n } else {\n res.push(cur);\n }\n }\n return res;\n}\n\n/**\n * @param {StatsCompilation} bundleStats bundle stats\n * @param {string} assetName asset name\n * @returns {boolean} child asset bundlers\n */\nfunction getChildAssetBundles(bundleStats, assetName) {\n return flatten(\n (bundleStats.children || /** @type {StatsCompilation} */ ([])).find(\n /**\n * @param {StatsCompilation} child child stats\n * @returns {string[][]} assets by chunk name\n */\n (child) => Object.values(child.assetsByChunkName || []),\n ),\n ).includes(assetName);\n}\n\n/**\n * @param {StatsAsset} statsAsset stats asset\n * @param {StatsModule} statsModule stats modules\n * @returns {boolean} true when asset has a module\n */\nfunction assetHasModule(statsAsset, statsModule) {\n // Checking if this module is the part of asset chunks\n return (statsModule.chunks || []).some(\n (moduleChunk) =>\n statsAsset.chunks && statsAsset.chunks.includes(moduleChunk),\n );\n}\n\n/**\n * @param {StatsModule} statsModule stats Module\n * @returns {boolean} true when runtime modules, otherwise false\n */\nfunction isRuntimeModule(statsModule) {\n return statsModule.moduleType === \"runtime\";\n}\n\n/**\n * @param {StatsCompilation} bundleStats bundle stats\n * @returns {StatsModule[]} modules\n */\nfunction getBundleModules(bundleStats) {\n /** @type {Set<string | number>} */\n const seenIds = new Set();\n const modules = /** @type {StatsModule[]} */ ([\n ...(bundleStats.chunks?.map((chunk) => chunk.modules) || []),\n ...(bundleStats.modules || []),\n ]).filter(Boolean);\n\n return flatten(modules).filter((mod) => {\n // Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5)\n if (isRuntimeModule(mod)) {\n return false;\n }\n\n if (seenIds.has(mod.id)) {\n return false;\n }\n\n seenIds.add(mod.id);\n\n return true;\n });\n}\n\n/** @typedef {Record<string, Record<string, boolean>>} ChunkToInitialByEntrypoint */\n\n/**\n * @param {StatsCompilation} bundleStats bundle stats\n * @returns {ChunkToInitialByEntrypoint} chunk to initial by entrypoint\n */\nfunction getChunkToInitialByEntrypoint(bundleStats) {\n if (bundleStats === null || bundleStats === undefined) {\n return {};\n }\n /** @type {ChunkToInitialByEntrypoint} */\n const chunkToEntrypointInititalMap = {};\n for (const entrypoint of Object.values(bundleStats.entrypoints || {})) {\n for (const asset of entrypoint.assets || []) {\n chunkToEntrypointInititalMap[asset.name] ??= {};\n chunkToEntrypointInititalMap[asset.name][\n /** @type {string} */\n (entrypoint.name)\n ] = true;\n }\n }\n return chunkToEntrypointInititalMap;\n}\n\n/**\n * @param {StatsModule} statsModule stats modules\n * @returns {boolean} true when entry module, otherwise false\n */\nfunction isEntryModule(statsModule) {\n return statsModule.depth === 0;\n}\n\n/**\n * @typedef {object} ViewerDataOptions\n * @property {Logger} logger logger\n * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm\n * @property {ExcludeAssets} excludeAssets exclude assets\n */\n\n/** @typedef {import(\"./tree/Module\").ModuleChartData} ModuleChartData */\n/** @typedef {import(\"./tree/ContentModule\").ContentModuleChartData} ContentModuleChartData */\n/** @typedef {import(\"./tree/ConcatenatedModule\").ConcatenatedModuleChartData} ConcatenatedModuleChartData */\n/** @typedef {import(\"./tree/ContentFolder\").ContentFolderChartData} ContentFolderChartData */\n/** @typedef {import(\"./tree/Folder\").FolderChartData} FolderChartData */\n\n/**\n * @typedef {object} ChartDataItem\n * @property {string} label label\n * @property {true} isAsset true when is asset, otherwise false\n * @property {number} statSize stat size\n * @property {number | undefined} parsedSize stat size\n * @property {number | undefined} gzipSize gzip size\n * @property {number | undefined} brotliSize brotli size\n * @property {number | undefined} zstdSize zstd size\n * @property {(ModuleChartData | ContentModuleChartData | ConcatenatedModuleChartData | ContentFolderChartData | FolderChartData)[]} groups groups\n * @property {Record<string, boolean>} isInitialByEntrypoint record with initial entrypoints\n */\n\n/**\n * @typedef {ChartDataItem[]} ChartData\n */\n\n/**\n * @param {StatsCompilation} bundleStats bundle stats\n * @param {string | null} bundleDir bundle dir\n * @param {ViewerDataOptions=} opts options\n * @returns {ChartData} chart data\n */\nfunction getViewerData(bundleStats, bundleDir, opts) {\n const {\n logger = new Logger(),\n compressionAlgorithm = \"gzip\",\n excludeAssets = null,\n } = opts || {};\n\n const isAssetIncluded = createAssetsFilter(excludeAssets);\n\n // Sometimes all the information is located in `children` array (e.g. problem in #10)\n if (\n (bundleStats.assets === null ||\n bundleStats.assets === undefined ||\n bundleStats.assets.length === 0) &&\n bundleStats.children &&\n bundleStats.children.length > 0\n ) {\n const { children } = bundleStats;\n [bundleStats] = bundleStats.children;\n // Sometimes if there are additional child chunks produced add them as child assets,\n // leave the 1st one as that is considered the 'root' asset.\n for (let i = 1; i < children.length; i++) {\n for (const asset of children[i].assets || []) {\n asset.isChild = true;\n /** @type {StatsAsset[]} */\n (bundleStats.assets).push(asset);\n }\n }\n } else if (bundleStats.children && bundleStats.children.length > 0) {\n // Sometimes if there are additional child chunks produced add them as child assets\n for (const child of bundleStats.children) {\n for (const asset of child.assets || []) {\n asset.isChild = true;\n /** @type {StatsAsset[]} */\n (bundleStats.assets).push(asset);\n }\n }\n }\n\n // Picking only `*.js, *.cjs or *.mjs` assets from bundle that has non-empty `chunks` array\n bundleStats.assets = (bundleStats.assets || []).filter((asset) => {\n // Filter out non 'asset' type asset if type is provided (Webpack 5 add a type to indicate asset types)\n if (asset.type && asset.type !== \"asset\") {\n return false;\n }\n\n // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)\n // See #22\n asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, \"\");\n\n return (\n FILENAME_EXTENSIONS.test(asset.name) &&\n asset.chunks &&\n asset.chunks.length > 0 &&\n isAssetIncluded(asset.name)\n );\n });\n\n // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided\n /** @type {Record<string, { src: string, runtimeSrc: string }> | null} */\n let bundlesSources = null;\n /** @type {Record<string | number, boolean> | null} */\n let parsedModules = null;\n\n if (bundleDir) {\n bundlesSources = {};\n parsedModules = {};\n\n for (const statAsset of bundleStats.assets) {\n const assetFile = path.join(bundleDir, statAsset.name);\n let bundleInfo;\n\n try {\n bundleInfo = parseBundle(assetFile, {\n sourceType: statAsset.info.javascriptModule ? \"module\" : \"script\",\n });\n } catch (err) {\n const msg =\n /** @type {NodeJS.ErrnoException} */ (err).code === \"ENOENT\"\n ? \"no such file\"\n : /** @type {Error} */ (err).message;\n logger.warn(`Error parsing bundle asset \"${assetFile}\": ${msg}`, {\n cause: err,\n });\n continue;\n }\n\n bundlesSources[statAsset.name] = {\n src: bundleInfo.src,\n runtimeSrc: bundleInfo.runtimeSrc,\n };\n Object.assign(parsedModules, bundleInfo.modules);\n }\n\n if (Object.keys(bundlesSources).length === 0) {\n bundlesSources = null;\n parsedModules = null;\n logger.warn(\n \"\\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\\n\",\n );\n }\n }\n\n /** @typedef {{ size: number, parsedSize?: number, gzipSize?: number, brotliSize?: number, zstdSize?: number, modules: StatsModule[], tree: Folder }} Asset */\n\n const assets = bundleStats.assets.reduce((result, statAsset) => {\n // If asset is a childAsset, then calculate appropriate bundle modules by looking through stats.children\n const assetBundles = statAsset.isChild\n ? getChildAssetBundles(bundleStats, statAsset.name)\n : bundleStats;\n /** @type {StatsModule[]} */\n const modules = assetBundles\n ? // @ts-expect-error TODO looks like we have a bug with child compilation parsing, need to add test cases\n getBundleModules(assetBundles)\n : [];\n const asset = (result[statAsset.name] = /** @type {Asset} */ ({\n size: statAsset.size,\n }));\n const assetSources =\n bundlesSources && Object.hasOwn(bundlesSources, statAsset.name)\n ? bundlesSources[statAsset.name]\n : null;\n\n if (assetSources) {\n asset.parsedSize = Buffer.byteLength(assetSources.src);\n\n if (compressionAlgorithm === \"gzip\") {\n asset.gzipSize = getCompressedSize(\"gzip\", assetSources.src);\n }\n\n if (compressionAlgorithm === \"brotli\") {\n asset.brotliSize = getCompressedSize(\"brotli\", assetSources.src);\n }\n\n if (compressionAlgorithm === \"zstd\") {\n asset.zstdSize = getCompressedSize(\"zstd\", assetSources.src);\n }\n }\n\n // Picking modules from current bundle script\n /** @type {StatsModule[]} */\n let assetModules = (modules || []).filter((statModule) =>\n assetHasModule(statAsset, statModule),\n );\n\n // Adding parsed sources\n if (parsedModules) {\n /** @type {StatsModule[]} */\n const unparsedEntryModules = [];\n\n for (const statsModule of assetModules) {\n if (\n typeof statsModule.id !== \"undefined\" &&\n parsedModules[statsModule.id]\n ) {\n statsModule.parsedSrc = parsedModules[statsModule.id];\n } else if (isEntryModule(statsModule)) {\n unparsedEntryModules.push(statsModule);\n }\n }\n\n // Webpack 5 changed bundle format and now entry modules are concatenated and located at the end of it.\n // Because of this they basically become a concatenated module, for which we can't even precisely determine its\n // parsed source as it's located in the same scope as all Webpack runtime helpers.\n if (unparsedEntryModules.length && assetSources) {\n if (unparsedEntryModules.length === 1) {\n // So if there is only one entry we consider its parsed source to be all the bundle code excluding code\n // from parsed modules.\n unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc;\n } else {\n // If there are multiple entry points we move all of them under synthetic concatenated module.\n assetModules = (assetModules || []).filter(\n (mod) => !unparsedEntryModules.includes(mod),\n );\n assetModules.unshift({\n identifier: \"./entry modules\",\n name: \"./entry modules\",\n modules: unparsedEntryModules,\n size: unparsedEntryModules.reduce(\n (totalSize, module) =>\n totalSize + /** @type {number} */ (module.size),\n 0,\n ),\n parsedSrc: assetSources.runtimeSrc,\n });\n }\n }\n }\n\n asset.modules = assetModules;\n asset.tree = createModulesTree(asset.modules, { compressionAlgorithm });\n\n return result;\n }, /** @type {Record<string, Asset>} */ ({}));\n\n const chunkToInitialByEntrypoint = getChunkToInitialByEntrypoint(bundleStats);\n\n return Object.entries(assets).map(([filename, asset]) => ({\n label: filename,\n isAsset: true,\n // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.\n // In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will\n // be the size of minified bundle.\n // Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)\n statSize: asset.tree.size || asset.size,\n parsedSize: asset.parsedSize,\n gzipSize: asset.gzipSize,\n brotliSize: asset.brotliSize,\n zstdSize: asset.zstdSize,\n groups: Object.values(asset.tree.children).map((i) => i.toChartData()),\n isInitialByEntrypoint: chunkToInitialByEntrypoint[filename] ?? {},\n }));\n}\n\n/**\n * @param {string} filename filename\n * @returns {Promise<StatsCompilation>} result\n */\nfunction readStatsFromFile(filename) {\n return parseChunked(fs.createReadStream(filename, { encoding: \"utf8\" }));\n}\n\nmodule.exports = {\n getViewerData,\n readStatsFromFile,\n};\n"
},
{
"path": "src/bin/analyzer.js",
"content": "#! /usr/bin/env node\n\nconst { dirname, resolve } = require(\"node:path\");\n\nconst { program: commanderProgram } = require(\"commander\");\nconst { magenta } = require(\"picocolors\");\n\nconst Logger = require(\"../Logger\");\nconst analyzer = require(\"../analyzer\");\nconst { isZstdSupported } = require(\"../sizeUtils\");\nconst utils = require(\"../utils\");\nconst viewer = require(\"../viewer\");\n\nconst SIZES = new Set([\"stat\", \"parsed\", \"gzip\"]);\nconst COMPRESSION_ALGORITHMS = new Set(\n isZstdSupported ? [\"gzip\", \"brotli\", \"zstd\"] : [\"gzip\", \"brotli\"],\n);\n\n/**\n * @param {string} str string\n * @returns {string} break with string\n */\nfunction br(str) {\n return `\\n${\" \".repeat(32)}${str}`;\n}\n\n/**\n * @template T\n * @returns {(val: T) => T[]} array\n */\nfunction array() {\n /** @type {T[]} */\n const arr = [];\n return (val) => {\n arr.push(val);\n return arr;\n };\n}\n\nconst program = commanderProgram\n .version(require(\"../../package.json\").version)\n .argument(\"<bundleStatsFile>\", \"Path to Webpack Stats JSON file.\")\n .argument(\n \"[bundleDir]\",\n \"Directory containing all generated bundles. You should provided it if you want analyzer to show you the real parsed module sizes. By default a directory of stats file is used.\",\n )\n .option(\n \"-m, --mode <mode>\",\n `Analyzer mode. Should be \\`server\\`,\\`static\\` or \\`json\\`.${br(\n \"In `server` mode analyzer will start HTTP server to show bundle report.\",\n )}${br(\n \"In `static` mode single HTML file with bundle report will be generated.\",\n )}${br(\n \"In `json` mode single JSON file with bundle report will be generated.\",\n )}`,\n \"server\",\n )\n .option(\n // Had to make `host` parameter optional in order to let `-h` flag output help message\n // Fixes https://github.com/webpack/webpack-bundle-analyzer/issues/239\n \"-h, --host [host]\",\n \"Host that will be used in `server` mode to start HTTP server.\",\n \"127.0.0.1\",\n )\n .option(\n \"-p, --port <n>\",\n \"Port that will be used in `server` mode to start HTTP server.\",\n \"8888\",\n )\n .option(\n \"-r, --report <file>\",\n \"Path to bundle report file that will be generated in `static` mode.\",\n )\n .option(\n \"-t, --title <title>\",\n \"String to use in title element of html report.\",\n )\n .option(\n \"-s, --default-sizes <type>\",\n `Module sizes to show in treemap by default.${br(\n `Possible values: ${[...SIZES].join(\", \")}`,\n )}`,\n \"parsed\",\n )\n .option(\n \"--compression-algorithm <type>\",\n `Compression algorithm that will be used to calculate the compressed module sizes.${br(\n `Possible values: ${[...COMPRESSION_ALGORITHMS].join(\", \")}`,\n )}`,\n \"gzip\",\n )\n .option(\n \"-O, --no-open\",\n \"Don't open report in default browser automatically.\",\n )\n .option(\n \"-e, --exclude <regexp>\",\n `Assets that should be excluded from the report.${br(\n \"Can be specified multiple times.\",\n )}`,\n array(),\n )\n .option(\n \"-l, --log-level <level>\",\n `Log level.${br(`Possible values: ${[...Logger.levels].join(\", \")}`)}`,\n Logger.defaultLevel,\n )\n .parse();\n\nlet [bundleStatsFile, bundleDir] = program.args;\nlet {\n mode,\n host,\n port,\n report: reportFilename,\n title: reportTitle,\n defaultSizes,\n compressionAlgorithm,\n logLevel,\n open: openBrowser,\n exclude: excludeAssets,\n} = program.opts();\nconst logger = new Logger(logLevel);\n\nif (typeof reportTitle === \"undefined\") {\n reportTitle = utils.defaultTitle;\n}\n\n/**\n * @param {string} error error message\n */\nfunction showHelp(error) {\n if (error) console.log(`\\n ${magenta(error)}\\n`);\n program.outputHelp();\n process.exit(1);\n}\n\nif (!bundleStatsFile) {\n showHelp(\"Provide path to Webpack Stats file as first argument\");\n}\nif (mode !== \"server\" && mode !== \"static\" && mode !== \"json\") {\n showHelp(\"Invalid mode. Should be either `server`, `static` or `json`.\");\n}\nif (mode === \"server\") {\n if (!host) showHelp(\"Invalid host name\");\n\n port = port === \"auto\" ? 0 : Number(port);\n if (Number.isNaN(port)) {\n showHelp(\"Invalid port. Should be a number or `auto`\");\n }\n}\nif (!COMPRESSION_ALGORITHMS.has(compressionAlgorithm)) {\n showHelp(\n `Invalid compression algorithm option. Possible values are: ${[...COMPRESSION_ALGORITHMS].join(\", \")}`,\n );\n}\nif (!SIZES.has(defaultSizes)) {\n showHelp(\n `Invalid default sizes option. Possible values are: ${[...SIZES].join(\", \")}`,\n );\n}\n\nbundleStatsFile = resolve(bundleStatsFile);\n\nif (!bundleDir) bundleDir = dirname(bundleStatsFile);\n\n/**\n * @param {string} bundleStatsFile bundle stats file\n * @returns {Promise<void>}\n */\nasync function parseAndAnalyse(bundleStatsFile) {\n try {\n const bundleStats = await analyzer.readStatsFromFile(bundleStatsFile);\n if (mode === \"server\") {\n viewer.startServer(bundleStats, {\n openBrowser,\n port,\n host,\n defaultSizes,\n compressionAlgorithm,\n reportTitle,\n bundleDir,\n excludeAssets,\n logger: new Logger(logLevel),\n analyzerUrl: utils.defaultAnalyzerUrl,\n });\n } else if (mode === \"static\") {\n viewer.generateReport(bundleStats, {\n openBrowser,\n reportFilename: resolve(reportFilename || \"report.html\"),\n reportTitle,\n defaultSizes,\n compressionAlgorithm,\n bundleDir,\n excludeAssets,\n logger: new Logger(logLevel),\n });\n } else if (mode === \"json\") {\n viewer.generateJSONReport(bundleStats, {\n reportFilename: resolve(reportFilename || \"report.json\"),\n compressionAlgorithm,\n bundleDir,\n excludeAssets,\n logger: new Logger(logLevel),\n });\n }\n } catch (err) {\n logger.error(\n `Couldn't read webpack bundle stats from \"${bundleStatsFile}\":\\n${err}`,\n );\n logger.debug(/** @type {Error} */ (err).stack);\n process.exit(1);\n }\n}\n\nparseAndAnalyse(bundleStatsFile);\n"
},
{
"path": "src/index.js",
"content": "const { start } = require(\"./viewer\");\n\nmodule.exports = {\n start,\n BundleAnalyzerPlugin: require(\"./BundleAnalyzerPlugin\"),\n};\n"
},
{
"path": "src/parseUtils.js",
"content": "/** @typedef {import(\"acorn\").Node} Node */\n/** @typedef {import(\"acorn\").CallExpression} CallExpression */\n/** @typedef {import(\"acorn\").ExpressionStatement} ExpressionStatement */\n/** @typedef {import(\"acorn\").Expression} Expression */\n/** @typedef {import(\"acorn\").SpreadElement} SpreadElement */\n\nconst fs = require(\"node:fs\");\nconst acorn = require(\"acorn\");\nconst walk = require(\"acorn-walk\");\n\n/**\n * @param {Expression} node node\n * @returns {boolean} true when id is numeric, otherwise false\n */\nfunction isNumericId(node) {\n return (\n node.type === \"Literal\" &&\n node.value !== null &&\n node.value !== undefined &&\n Number.isInteger(node.value) &&\n /** @type {number} */ (node.value) >= 0\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when module id, otherwise false\n */\nfunction isModuleId(node) {\n return (\n node !== null &&\n node.type === \"Literal\" &&\n (isNumericId(node) || typeof node.value === \"string\")\n );\n}\n\n/**\n * @param {Expression | SpreadElement} node node\n * @returns {boolean} true when module wrapper, otherwise false\n */\nfunction isModuleWrapper(node) {\n return (\n // It's an anonymous function expression that wraps module\n ((node.type === \"FunctionExpression\" ||\n node.type === \"ArrowFunctionExpression\") &&\n !node.id) ||\n // If `DedupePlugin` is used it can be an ID of duplicated module...\n isModuleId(node) ||\n // or an array of shape [<module_id>, ...args]\n (node.type === \"ArrayExpression\" &&\n node.elements.length > 1 &&\n isModuleId(node.elements[0]))\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when module hash, otherwise false\n */\nfunction isModulesHash(node) {\n return (\n node !== null &&\n node.type === \"ObjectExpression\" &&\n node.properties\n .filter((property) => property.type !== \"SpreadElement\")\n .map((node) => node.value)\n .every(isModuleWrapper)\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when module array, otherwise false\n */\nfunction isModulesArray(node) {\n return (\n node !== null &&\n node.type === \"ArrayExpression\" &&\n node.elements.every(\n (elem) =>\n // Some of array items may be skipped because there is no module with such id\n !elem || isModuleWrapper(elem),\n )\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when simple modules list, otherwise false\n */\nfunction isSimpleModulesList(node) {\n return (\n // Modules are contained in hash. Keys are module ids.\n isModulesHash(node) ||\n // Modules are contained in array. Indexes are module ids.\n isModulesArray(node)\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when optimized modules array, otherwise false\n */\nfunction isOptimizedModulesArray(node) {\n // Checking whether modules are contained in `Array(<minimum ID>).concat(...modules)` array:\n // https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91\n // The `<minimum ID>` + array indexes are module ids\n return (\n node !== null &&\n node.type === \"CallExpression\" &&\n node.callee.type === \"MemberExpression\" &&\n // Make sure the object called is `Array(<some number>)`\n node.callee.object.type === \"CallExpression\" &&\n node.callee.object.callee.type === \"Identifier\" &&\n node.callee.object.callee.name === \"Array\" &&\n node.callee.object.arguments.length === 1 &&\n node.callee.object.arguments[0].type !== \"SpreadElement\" &&\n isNumericId(node.callee.object.arguments[0]) &&\n // Make sure the property X called for `Array(<some number>).X` is `concat`\n node.callee.property.type === \"Identifier\" &&\n node.callee.property.name === \"concat\" &&\n // Make sure exactly one array is passed in to `concat`\n node.arguments.length === 1 &&\n isModulesArray(node.arguments[0])\n );\n}\n\n/**\n * @param {Expression | SpreadElement | null} node node\n * @returns {boolean} true when modules list, otherwise false\n */\nfunction isModulesList(node) {\n return (\n isSimpleModulesList(node) ||\n // Modules are contained in expression `Array([minimum ID]).concat([<module>, <module>, ...])`\n isOptimizedModulesArray(node)\n );\n}\n\n/** @typedef {{ start: number, end: number }} Location */\n\n/**\n * @param {Node} node node\n * @returns {Location} location\n */\nfunction getModuleLocation(node) {\n return {\n start: node.start,\n end: node.end,\n };\n}\n\n/** @typedef {Record<number, Location>} ModulesLocations */\n\n/**\n * @param {Expression | SpreadElement} node node\n * @returns {ModulesLocations} modules locations\n */\nfunction getModulesLocations(node) {\n if (node.type === \"ObjectExpression\") {\n // Modules hash\n const modulesNodes = node.properties;\n\n return modulesNodes.reduce((result, moduleNode) => {\n if (moduleNode.type !== \"Property\") {\n return result;\n }\n\n const moduleId =\n moduleNode.key.type === \"Identifier\"\n ? moduleNode.key.name\n : // @ts-expect-error need verify why we need it, tests not cover it case\n moduleNode.key.value;\n\n if (moduleId === \"undefined\") {\n return result;\n }\n\n result[moduleId] = getModuleLocation(moduleNode.value);\n\n return result;\n }, /** @type {ModulesLocations} */ ({}));\n }\n\n const isOptimizedArray = node.type === \"CallExpression\";\n\n if (node.type === \"ArrayExpression\" || isOptimizedArray) {\n // Modules array or optimized array\n const minId =\n isOptimizedArray &&\n node.callee.type === \"MemberExpression\" &&\n node.callee.object.type === \"CallExpression\" &&\n node.callee.object.arguments[0].type === \"Literal\"\n ? // Get the [minId] value from the Array() call first argument literal value\n /** @type {number} */ (node.callee.object.arguments[0].value)\n : // `0` for simple array\n 0;\n const modulesNodes = isOptimizedArray\n ? // The modules reside in the `concat()` function call arguments\n node.arguments[0].type === \"ArrayExpression\"\n ? node.arguments[0].elements\n : []\n : node.elements;\n\n return modulesNodes.reduce((result, moduleNode, i) => {\n if (moduleNode) {\n result[i + minId] = getModuleLocation(moduleNode);\n }\n\n return result;\n }, /** @type {ModulesLocations} */ ({}));\n }\n\n return {};\n}\n\n/**\n * @param {ExpressionStatement} node node\n * @returns {boolean} true when IIFE, otherwise false\n */\nfunction isIIFE(node) {\n return (\n node.type === \"ExpressionStatement\" &&\n (node.expression.type === \"CallExpression\" ||\n (node.expression.type === \"UnaryExpression\" &&\n node.expression.argument.type === \"CallExpression\"))\n );\n}\n\n/**\n * @param {ExpressionStatement} node node\n * @returns {Expression} IIFE call expression\n */\nfunction getIIFECallExpression(node) {\n if (node.expression.type === \"UnaryExpression\") {\n return node.expression.argument;\n }\n\n return node.expression;\n}\n\n/**\n * @param {Expression} node node\n * @returns {boolean} true when chunks ids, otherwose false\n */\nfunction isChunkIds(node) {\n // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used\n return node.type === \"ArrayExpression\" && node.elements.every(isModuleId);\n}\n\n/**\n * @param {(Expression | SpreadElement | null)[]} args arguments\n * @returns {boolean} true when async chunk arguments, otherwise false\n */\nfunction mayBeAsyncChunkArguments(args) {\n return (\n args.length >= 2 &&\n args[0] !== null &&\n args[0].type !== \"SpreadElement\" &&\n isChunkIds(args[0])\n );\n}\n\n/**\n * Returns bundle source except modules\n * @param {string} content content\n * @param {ModulesLocations | null} modulesLocations modules locations\n * @returns {string} runtime code\n */\nfunction getBundleRuntime(content, modulesLocations) {\n const sortedLocations = Object.values(modulesLocations || {}).toSorted(\n (a, b) => a.start - b.start,\n );\n\n let result = \"\";\n let lastIndex = 0;\n\n for (const { start, end } of sortedLocations) {\n result += content.slice(lastIndex, start);\n lastIndex = end;\n }\n\n return result + content.slice(lastIndex);\n}\n\n/**\n * @param {CallExpression} node node\n * @returns {boolean} true when is async chunk push expression, otheriwse false\n */\nfunction isAsyncChunkPushExpression(node) {\n const { callee, arguments: args } = node;\n\n return (\n callee.type === \"MemberExpression\" &&\n callee.property.type === \"Identifier\" &&\n callee.property.name === \"push\" &&\n callee.object.type === \"AssignmentExpression\" &&\n args.length === 1 &&\n args[0].type === \"ArrayExpression\" &&\n mayBeAsyncChunkArguments(args[0].elements) &&\n isModulesList(args[0].elements[1])\n );\n}\n\n/**\n * @param {CallExpression} node node\n * @returns {boolean} true when is async web worker, otherwise false\n */\nfunction isAsyncWebWorkerChunkExpression(node) {\n const { callee, type, arguments: args } = node;\n\n return (\n type === \"CallExpression\" &&\n callee.type === \"MemberExpression\" &&\n args.length === 2 &&\n args[0].type !== \"SpreadElement\" &&\n isChunkIds(args[0]) &&\n isModulesList(args[1])\n );\n}\n\n/** @typedef {Record<string, string>} Modules */\n\n/**\n * @param {string} bundlePath bundle path\n * @param {{ sourceType: \"script\" | \"module\" }} opts options\n * @returns {{ modules: Modules, src: string, runtimeSrc: string }} parsed result\n */\nmodule.exports.parseBundle = function parseBundle(bundlePath, opts) {\n const { sourceType = \"script\" } = opts || {};\n\n const content = fs.readFileSync(bundlePath, \"utf8\");\n const ast = acorn.parse(content, {\n sourceType,\n ecmaVersion: \"latest\",\n });\n\n /** @type {{ locations: ModulesLocations | null, expressionStatementDepth: number }} */\n const walkState = {\n locations: null,\n expressionStatementDepth: 0,\n };\n\n walk.recursive(ast, walkState, {\n ExpressionStatement(node, state, callback) {\n if (state.locations) return;\n\n state.expressionStatementDepth++;\n\n if (\n // Webpack 5 stores modules in the the top-level IIFE\n state.expressionStatementDepth === 1 &&\n ast.body.includes(node) &&\n isIIFE(node)\n ) {\n const fn = getIIFECallExpression(node);\n\n if (\n fn.type === \"CallExpression\" &&\n // It should not contain neither arguments\n fn.arguments.length === 0 &&\n (fn.callee.type === \"FunctionExpression\" ||\n fn.callee.type === \"ArrowFunctionExpression\") &&\n // ...nor parameters\n fn.callee.params.length === 0 &&\n fn.callee.body.type === \"BlockStatement\"\n ) {\n // Modules are stored in the very first variable declaration as hash\n const firstVariableDeclaration = fn.callee.body.body.find(\n (node) => node.type === \"VariableDeclaration\",\n );\n\n if (firstVariableDeclaration) {\n for (const declaration of firstVariableDeclaration.declarations) {\n if (declaration.init && isModulesList(declaration.init)) {\n state.locations = getModulesLocations(declaration.init);\n\n if (state.locations) {\n break;\n }\n }\n }\n }\n }\n }\n\n if (!state.locations) {\n callback(node.expression, state);\n }\n\n state.expressionStatementDepth--;\n },\n\n AssignmentExpression(node, state) {\n if (state.locations) return;\n\n // Modules are stored in exports.modules:\n // exports.modules = {};\n const { left, right } = node;\n\n if (\n left &&\n left.type === \"MemberExpression\" &&\n left.object &&\n left.object.type === \"Identifier\" &&\n left.object.name === \"exports\" &&\n left.property &&\n left.property.type === \"Identifier\" &&\n left.property.name === \"modules\" &&\n isModulesHash(right)\n ) {\n state.locations = getModulesLocations(right);\n }\n },\n\n CallExpression(node, state, callback) {\n if (state.locations) return;\n\n const args = node.arguments;\n\n // Main chunk with webpack loader.\n // Modules are stored in first argument:\n // (function (...) {...})(<modules>)\n if (\n node.callee.type === \"FunctionExpression\" &&\n !node.callee.id &&\n args.length === 1 &&\n isSimpleModulesList(args[0])\n ) {\n state.locations = getModulesLocations(args[0]);\n return;\n }\n\n // Async Webpack < v4 chunk without webpack loader.\n // webpackJsonp([<chunks>], <modules>, ...)\n // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.\n if (\n node.callee.type === \"Identifier\" &&\n mayBeAsyncChunkArguments(args) &&\n args[1].type !== \"SpreadElement\" &&\n isModulesList(args[1])\n ) {\n state.locations = getModulesLocations(args[1]);\n return;\n }\n\n // Async Webpack v4 chunk without webpack loader.\n // (window.webpackJsonp=window.webpackJsonp||[]).push([[<chunks>], <modules>, ...]);\n // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.\n if (\n isAsyncChunkPushExpression(node) &&\n args[0].type === \"ArrayExpression\" &&\n args[0].elements[1]\n ) {\n state.locations = getModulesLocations(args[0].elements[1]);\n return;\n }\n\n // Webpack v4 WebWorkerChunkTemplatePlugin\n // globalObject.chunkCallbackName([<chunks>],<modules>, ...);\n // Both globalObject and chunkCallbackName can be changed through the config, so we can't check them.\n if (isAsyncWebWorkerChunkExpression(node)) {\n state.locations = getModulesLocations(args[1]);\n return;\n }\n\n // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack\n // features (e.g. `umd` library output) can wrap modules list into additional IIFE.\n for (const arg of args) {\n callback(arg, state);\n }\n },\n });\n\n /** @type {Modules} */\n const modules = {};\n\n if (walkState.locations) {\n for (const [id, loc] of Object.entries(walkState.locations)) {\n modules[id] = content.slice(loc.start, loc.end);\n }\n }\n\n return {\n modules,\n src: content,\n runtimeSrc: getBundleRuntime(content, walkState.locations),\n };\n};\n"
},
{
"path": "src/sizeUtils.js",
"content": "import zlib from \"node:zlib\";\n\nexport const isZstdSupported = \"createZstdCompress\" in zlib;\n\n/** @typedef {\"gzip\" | \"brotli\" | \"zstd\"} Algorithm */\n\n/**\n * @param {Algorithm} algorithm compression algorithm\n * @param {string} input input\n * @returns {number} compressed size\n */\nexport function getCompressedSize(algorithm, input) {\n if (algorithm === \"gzip\") {\n return zlib.gzipSync(input, { level: 9 }).length;\n }\n\n if (algorithm === \"brotli\") {\n return zlib.brotliCompressSync(input).length;\n }\n\n if (algorithm === \"zstd\" && isZstdSupported) {\n // eslint-disable-next-line n/no-unsupported-features/node-builtins\n return zlib.zstdCompressSync(input).length;\n }\n\n throw new Error(`Unsupported compression algorithm: ${algorithm}.`);\n}\n"
},
{
"path": "src/statsUtils.js",
"content": "const { createWriteStream } = require(\"node:fs\");\nconst { Readable } = require(\"node:stream\");\nconst { pipeline } = require(\"node:stream/promises\");\n\n/** @typedef {import(\"./BundleAnalyzerPlugin\").EXPECTED_ANY} EXPECTED_ANY */\n/** @typedef {import(\"webpack\").StatsCompilation} StatsCompilation */\n\nclass StatsSerializeStream extends Readable {\n /**\n * @param {StatsCompilation} stats stats\n */\n constructor(stats) {\n super();\n this._indentLevel = 0;\n this._stringifier = this._stringify(stats);\n }\n\n get _indent() {\n return \" \".repeat(this._indentLevel);\n }\n\n _read() {\n let readMore = true;\n\n while (readMore) {\n const { value, done } = this._stringifier.next();\n\n if (done) {\n this.push(null);\n readMore = false;\n } else {\n readMore = this.push(value);\n }\n }\n }\n\n /**\n * @param {EXPECTED_ANY} obj obj\n * @returns {Generator<string, undefined, unknown>} stringified result\n * @private\n */\n *_stringify(obj) {\n if (\n typeof obj === \"string\" ||\n typeof obj === \"number\" ||\n typeof obj === \"boolean\" ||\n obj === null\n ) {\n yield JSON.stringify(obj);\n } else if (Array.isArray(obj)) {\n yield \"[\";\n this._indentLevel++;\n\n let isFirst = true;\n for (let item of obj) {\n if (item === undefined) {\n item = null;\n }\n\n yield `${isFirst ? \"\" : \",\"}\\n${this._indent}`;\n yield* this._stringify(item);\n isFirst = false;\n }\n\n this._indentLevel--;\n yield obj.length ? `\\n${this._indent}]` : \"]\";\n } else {\n yield \"{\";\n this._indentLevel++;\n\n let isFirst = true;\n const entries = Object.entries(obj);\n for (const [itemKey, itemValue] of entries) {\n if (itemValue === undefined) {\n continue;\n }\n\n yield `${isFirst ? \"\" : \",\"}\\n${this._indent}${JSON.stringify(itemKey)}: `;\n yield* this._stringify(itemValue);\n isFirst = false;\n }\n\n this._indentLevel--;\n yield entries.length ? `\\n${this._indent}}` : \"}\";\n }\n }\n}\n\n/**\n * @param {StatsCompilation} stats stats\n * @param {string} filepath filepath file path\n * @returns {Promise<void>}\n */\nasync function writeStats(stats, filepath) {\n await pipeline(new StatsSerializeStream(stats), createWriteStream(filepath));\n}\n\nmodule.exports = { StatsSerializeStream, writeStats };\n"
},
{
"path": "src/template.js",
"content": "const fs = require(\"node:fs\");\nconst path = require(\"node:path\");\n\nconst { escape } = require(\"html-escaper\");\n\nconst projectRoot = path.resolve(__dirname, \"..\");\nconst assetsRoot = path.join(projectRoot, \"public\");\n\n/** @typedef {import(\"./BundleAnalyzerPlugin\").EXPECTED_ANY} EXPECTED_ANY */\n/** @typedef {import(\"./BundleAnalyzerPlugin\").Mode} Mode */\n/** @typedef {import(\"./BundleAnalyzerPlugin\").Sizes} Sizes */\n/** @typedef {import(\"./BundleAnalyzerPlugin\").CompressionAlgorithm} CompressionAlgorithm */\n/** @typedef {import(\"./analyzer\").ChartData} ChartData */\n/** @typedef {import(\"./viewer\").Entrypoints} Entrypoints */\n\n/**\n * Escapes `<` characters in JSON to safely use it in `<script>` tag.\n * @param {EXPECTED_ANY} json json\n * @returns {string} escaped json\n */\nfunction escapeJson(json) {\n return JSON.stringify(json).replaceAll(\"<\", \"\\\\u003c\");\n}\n\n/**\n * @param {string} filename filename\n * @returns {string} content the text content of the specified file.\n */\nfunction getAssetContent(filename) {\n const assetPath = path.join(assetsRoot, filename);\n\n if (!assetPath.startsWith(assetsRoot)) {\n throw new Error(`\"${filename}\" is outside of the assets root`);\n }\n\n return fs.readFileSync(assetPath, \"utf8\");\n}\n\n/**\n * @template {EXPECTED_ANY} T\n * @param {TemplateStringsArray} strings strings\n * @param {...T} values values\n * @returns {string} HTML\n */\nfunction html(strings, ...values) {\n return strings\n .map((string, index) => `${string}${values[index] || \"\"}`)\n .join(\"\");\n}\n\n/**\n * @param {string} filename filename\n * @param {Mode} mode mode\n * @returns {string} script tag\n */\nfunction getScript(filename, mode) {\n if (mode === \"static\") {\n return `<!-- ${escape(filename)} -->\n<script>${getAssetContent(filename)}</script>`;\n }\n\n return `<script src=\"${escape(filename)}\"></script>`;\n}\n\n/**\n * @typedef {object} ViewerOptions\n * @property {string} title title\n * @property {boolean} enableWebSocket true when need to enable, otherwise false\n * @property {ChartData} chartData chart data\n * @property {Entrypoints} entrypoints entrypoints\n * @property {Sizes} defaultSizes default sizes\n * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm\n * @property {Mode} mode mode\n */\n\n/**\n * @param {ViewerOptions} options viewer Options\n * @returns {string} content for viewer\n */\nfunction renderViewer({\n title,\n enableWebSocket,\n chartData,\n entrypoints,\n defaultSizes,\n compressionAlgorithm,\n mode,\n}) {\n return html`<!DOCTYPE html>\n <html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>${escape(title)}\n \n\n \n ${getScript(\"viewer.js\", mode)}\n \n\n \n \n \n \n
![](\"https://webpack.js.org/assets/icon-square-big.svg\"){kind=icon}
\n \n