webpack-bundle-analyzer 5.2.0 → 5.3.0

package/lib/viewer.js

@@ -1,49 +1,130 @@
 "use strict";
 
-const path = require('path');
-const fs = require('fs');
-const http = require('http');
-const WebSocket = require('ws');
-const sirv = require('sirv');
+const fs = require("node:fs");
+const http = require("node:http");
+const path = require("node:path");
 const {
   bold
-} = require('picocolors');
-const Logger = require('./Logger');
-const analyzer = require('./analyzer');
-const {
-  open
-} = require('./utils');
+} = require("picocolors");
+const sirv = require("sirv");
+const WebSocket = require("ws");
+const Logger = require("./Logger");
+const analyzer = require("./analyzer");
 const {
   renderViewer
-} = require('./template');
-const projectRoot = path.resolve(__dirname, '..');
+} = require("./template");
+const {
+  open
+} = require("./utils");
+
+/** @typedef {import("http").Server} Server */
+/** @typedef {import("ws").WebSocketServer} WebSocketServer */
+/** @typedef {import("webpack").StatsCompilation} StatsCompilation */
+/** @typedef {import("./BundleAnalyzerPlugin").Sizes} Sizes */
+/** @typedef {import("./BundleAnalyzerPlugin").CompressionAlgorithm} CompressionAlgorithm */
+/** @typedef {import("./BundleAnalyzerPlugin").ReportTitle} ReportTitle */
+/** @typedef {import("./BundleAnalyzerPlugin").AnalyzerUrl} AnalyzerUrl */
+/** @typedef {import("./BundleAnalyzerPlugin").ExcludeAssets} ExcludeAssets */
+/** @typedef {import("./analyzer").ViewerDataOptions} ViewerDataOptions */
+/** @typedef {import("./analyzer").ChartData} ChartData */
+
+const projectRoot = path.resolve(__dirname, "..");
+
+/**
+ * @param {string | (() => string)} reportTitle report title
+ * @returns {string} resolved title
+ */
 function resolveTitle(reportTitle) {
-  if (typeof reportTitle === 'function') {
+  if (typeof reportTitle === "function") {
     return reportTitle();
-  } else {
-    return reportTitle;
   }
+  return reportTitle;
 }
+
+/**
+ * @param {Sizes} defaultSizes default sizes
+ * @param {CompressionAlgorithm} compressionAlgorithm compression algorithm
+ * @returns {Sizes} default sizes
+ */
 function resolveDefaultSizes(defaultSizes, compressionAlgorithm) {
-  if (['gzip', 'brotli', 'zstd'].includes(defaultSizes)) return compressionAlgorithm;
+  if (["gzip", "brotli", "zstd"].includes(defaultSizes)) {
+    return compressionAlgorithm;
+  }
   return defaultSizes;
 }
-module.exports = {
-  startServer,
-  generateReport,
-  generateJSONReport,
-  getEntrypoints,
-  // deprecated
-  start: startServer
-};
+
+/** @typedef {(string | undefined | null)[]} Entrypoints */
+
+/**
+ * @param {StatsCompilation} bundleStats bundle stats
+ * @returns {Entrypoints} entrypoints
+ */
+function getEntrypoints(bundleStats) {
+  if (bundleStats === null || bundleStats === undefined || !bundleStats.entrypoints) {
+    return [];
+  }
+  return Object.values(bundleStats.entrypoints).map(entrypoint => entrypoint.name);
+}
+
+/**
+ * @param {ViewerDataOptions} analyzerOpts analyzer options
+ * @param {StatsCompilation} bundleStats bundle stats
+ * @param {string | null} bundleDir bundle dir
+ * @returns {ChartData | null} chart data
+ */
+function getChartData(analyzerOpts, bundleStats, bundleDir) {
+  /** @type {ChartData | undefined | null} */
+  let chartData;
+  const {
+    logger
+  } = analyzerOpts;
+  try {
+    chartData = analyzer.getViewerData(bundleStats, bundleDir, analyzerOpts);
+  } catch (err) {
+    logger.error(`Couldn't analyze webpack bundle:\n${err}`);
+    logger.debug(/** @type {Error} */err.stack);
+    chartData = null;
+  }
+
+  // chartData can either be an array (bundleInfo[]) or null. It can't be an plain object anyway
+  if (
+  // analyzer.getViewerData() doesn't failed in the previous step
+  chartData && !Array.isArray(chartData)) {
+    logger.error("Couldn't find any javascript bundles in provided stats file");
+    chartData = null;
+  }
+  return chartData;
+}
+
+/**
+ * @typedef {object} ServerOptions
+ * @property {number} port port
+ * @property {string} host host
+ * @property {boolean} openBrowser true when need to open browser, otherwise false
+ * @property {string | null} bundleDir bundle dir
+ * @property {Logger} logger logger
+ * @property {Sizes} defaultSizes default sizes
+ * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
+ * @property {ExcludeAssets | null} excludeAssets exclude assets
+ * @property {ReportTitle} reportTitle report title
+ * @property {AnalyzerUrl} analyzerUrl analyzer url
+ */
+
+/** @typedef {{ ws: WebSocketServer, http: Server, updateChartData: (bundleStats: StatsCompilation) => void }} ViewerServerObj */
+
+/**
+ * @param {StatsCompilation} bundleStats bundle stats
+ * @param {ServerOptions} opts options
+ * @returns {Promise<ViewerServerObj>} server
+ */
 async function startServer(bundleStats, opts) {
   const {
     port = 8888,
-    host = '127.0.0.1',
+    host = "127.0.0.1",
     openBrowser = true,
     bundleDir = null,
     logger = new Logger(),
-    defaultSizes = 'parsed',
+    defaultSizes = "parsed",
     compressionAlgorithm,
     excludeAssets = null,
     reportTitle,
@@ -55,32 +136,38 @@ async function startServer(bundleStats, opts) {
     compressionAlgorithm
   };
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
-  const entrypoints = getEntrypoints(bundleStats);
-  if (!chartData) return;
+  if (!chartData) {
+    throw new Error("Can't get chart data");
+  }
   const sirvMiddleware = sirv(`${projectRoot}/public`, {
     // disables caching and traverse the file system on every request
     dev: true
   });
+  const entrypoints = getEntrypoints(bundleStats);
   const server = http.createServer((req, res) => {
-    if (req.method === 'GET' && req.url === '/') {
+    if (req.method === "GET" && req.url === "/") {
       const html = renderViewer({
-        mode: 'server',
+        mode: "server",
         title: resolveTitle(reportTitle),
-        chartData,
+        chartData: (/** @type {ChartData} */chartData),
         entrypoints,
         defaultSizes: resolveDefaultSizes(defaultSizes, compressionAlgorithm),
         compressionAlgorithm,
         enableWebSocket: true
       });
       res.writeHead(200, {
-        'Content-Type': 'text/html'
+        "Content-Type": "text/html"
       });
       res.end(html);
     } else {
       sirvMiddleware(req, res);
     }
   });
-  await new Promise(resolve => {
+  await new Promise(
+  /**
+   * @param {(value: void) => void} resolve resolve
+   */
+  resolve => {
     server.listen(port, host, () => {
       resolve();
       const url = analyzerUrl({
@@ -88,7 +175,7 @@ async function startServer(bundleStats, opts) {
         listenHost: host,
         boundAddress: server.address()
       });
-      logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
+      logger.info(`${bold("Webpack Bundle Analyzer")} is started at ${bold(url)}\n` + `Use ${bold("Ctrl+C")} to close it`);
       if (openBrowser) {
         open(url, logger);
       }
@@ -97,32 +184,54 @@ async function startServer(bundleStats, opts) {
   const wss = new WebSocket.Server({
     server
   });
-  wss.on('connection', ws => {
-    ws.on('error', err => {
+  wss.on("connection", ws => {
+    ws.on("error", err => {
       // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
-      if (err.errno) return;
+      if (/** @type {NodeJS.ErrnoException} */err.errno) return;
       logger.info(err.message);
     });
   });
-  return {
-    ws: wss,
-    http: server,
-    updateChartData
-  };
+
+  /**
+   * @param {StatsCompilation} bundleStats bundle stats
+   */
   function updateChartData(bundleStats) {
     const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
     if (!newChartData) return;
     chartData = newChartData;
-    wss.clients.forEach(client => {
+    for (const client of wss.clients) {
       if (client.readyState === WebSocket.OPEN) {
         client.send(JSON.stringify({
-          event: 'chartDataUpdated',
+          event: "chartDataUpdated",
           data: newChartData
         }));
       }
-    });
+    }
   }
+  return {
+    ws: wss,
+    http: server,
+    updateChartData
+  };
 }
+
+/**
+ * @typedef {object} GenerateReportOptions
+ * @property {boolean} openBrowser true when need to open browser, otherwise false
+ * @property {string} reportFilename report filename
+ * @property {ReportTitle} reportTitle report title
+ * @property {string | null} bundleDir bundle dir
+ * @property {Logger} logger logger
+ * @property {Sizes} defaultSizes default sizes
+ * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
+ * @property {ExcludeAssets} excludeAssets exclude assets
+ */
+
+/**
+ * @param {StatsCompilation} bundleStats bundle stats
+ * @param {GenerateReportOptions} opts opts
+ * @returns {Promise<void>}
+ */
 async function generateReport(bundleStats, opts) {
   const {
     openBrowser = true,
@@ -130,7 +239,7 @@ async function generateReport(bundleStats, opts) {
     reportTitle,
     bundleDir = null,
     logger = new Logger(),
-    defaultSizes = 'parsed',
+    defaultSizes = "parsed",
     compressionAlgorithm,
     excludeAssets = null
   } = opts || {};
@@ -142,7 +251,7 @@ async function generateReport(bundleStats, opts) {
   const entrypoints = getEntrypoints(bundleStats);
   if (!chartData) return;
   const reportHtml = renderViewer({
-    mode: 'static',
+    mode: "static",
     title: resolveTitle(reportTitle),
     chartData,
     entrypoints,
@@ -155,11 +264,26 @@ async function generateReport(bundleStats, opts) {
     recursive: true
   });
   fs.writeFileSync(reportFilepath, reportHtml);
-  logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
+  logger.info(`${bold("Webpack Bundle Analyzer")} saved report to ${bold(reportFilepath)}`);
   if (openBrowser) {
     open(`file://${reportFilepath}`, logger);
   }
 }
+
+/**
+ * @typedef {object} GenerateJSONReportOptions
+ * @property {string} reportFilename report filename
+ * @property {string | null} bundleDir bundle dir
+ * @property {Logger} logger logger
+ * @property {ExcludeAssets} excludeAssets exclude assets
+ * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
+ */
+
+/**
+ * @param {StatsCompilation} bundleStats bundle stats
+ * @param {GenerateJSONReportOptions} opts options
+ * @returns {Promise<void>}
+ */
 async function generateJSONReport(bundleStats, opts) {
   const {
     reportFilename,
@@ -178,33 +302,13 @@ async function generateJSONReport(bundleStats, opts) {
     recursive: true
   });
   await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
-  logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
+  logger.info(`${bold("Webpack Bundle Analyzer")} saved JSON report to ${bold(reportFilename)}`);
 }
-function getChartData(analyzerOpts, ...args) {
-  let chartData;
-  const {
-    logger
-  } = analyzerOpts;
-  try {
-    chartData = analyzer.getViewerData(...args, analyzerOpts);
-  } catch (err) {
-    logger.error(`Couldn't analyze webpack bundle:\n${err}`);
-    logger.debug(err.stack);
-    chartData = null;
-  }
-
-  // chartData can either be an array (bundleInfo[]) or null. It can't be an plain object anyway
-  if (
-  // analyzer.getViewerData() doesn't failed in the previous step
-  chartData && !Array.isArray(chartData)) {
-    logger.error("Couldn't find any javascript bundles in provided stats file");
-    chartData = null;
-  }
-  return chartData;
-}
-function getEntrypoints(bundleStats) {
-  if (bundleStats === null || bundleStats === undefined || !bundleStats.entrypoints) {
-    return [];
-  }
-  return Object.values(bundleStats.entrypoints).map(entrypoint => entrypoint.name);
-}
+module.exports = {
+  generateJSONReport,
+  generateReport,
+  getEntrypoints,
+  // deprecated
+  start: startServer,
+  startServer
+};

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
-  "author": "Yury Grunin <grunin.ya@ya.ru>",
-  "license": "MIT",
+  "keywords": [
+    "webpack",
+    "bundle",
+    "analyzer",
+    "modules",
+    "size",
+    "interactive",
+    "chart",
+    "treemap",
+    "zoomable",
+    "zoom"
+  ],
   "homepage": "https://github.com/webpack/webpack-bundle-analyzer",
-  "changelog": "https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md",
   "bugs": {
     "url": "https://github.com/webpack/webpack-bundle-analyzer/issues"
   },
@@ -13,95 +22,95 @@
     "type": "git",
     "url": "git+https://github.com/webpack/webpack-bundle-analyzer.git"
   },
+  "license": "MIT",
+  "author": "Yury Grunin <grunin.ya@ya.ru>",
   "main": "lib/index.js",
   "bin": "lib/bin/analyzer.js",
-  "engines": {
-    "node": ">= 20.9.0"
-  },
-  "packageManager": "npm@6.14.8",
-  "scripts": {
-    "start": "gulp watch",
-    "build": "gulp build",
-    "npm-publish": "npm run lint && npm run build && npm test && npm publish",
-    "lint": "eslint --ext js,jsx .",
-    "install-test-webpack-versions": "./bin/install-test-webpack-versions.sh",
-    "test": "npm run install-test-webpack-versions && NODE_OPTIONS=--openssl-legacy-provider jest --runInBand",
-    "test-dev": "npm run install-test-webpack-versions && NODE_OPTIONS=--openssl-legacy-provider jest --watch --runInBand"
-  },
   "files": [
     "public",
     "lib"
   ],
+  "scripts": {
+    "clean:analyzer": "del-cli lib",
+    "clean:viewer": "del-cli public",
+    "clean": "npm run clean:analyzer && npm run clean:viewer",
+    "build:analyzer": "npm run clean:analyzer && babel src -d lib --copy-files",
+    "build:viewer": "npm run clean:viewer && webpack-cli --node-env=production",
+    "build": "npm run build:analyzer && npm run build:viewer",
+    "watch:analyzer": "npm run build:analyzer -- --watch",
+    "watch:viewer": "npm run build:viewer -- --node-env=development --watch",
+    "npm-publish": "npm run lint && npm run build && npm test && npm publish",
+    "lint": "npm run lint:code && npm run lint:types && npm run fmt:check",
+    "lint:code": "eslint --cache .",
+    "lint:types": "tsc --pretty --noEmit",
+    "fmt": "npm run fmt:base -- --log-level warn --write",
+    "fmt:check": "npm run fmt:base -- --check",
+    "fmt:base": "prettier --cache --ignore-unknown .",
+    "fix": "npm run fix:code && npm run fmt",
+    "test": "NODE_OPTIONS=--openssl-legacy-provider jest --runInBand",
+    "test:coverage": "npm run test -- --coverage",
+    "test-dev": "NODE_OPTIONS=--openssl-legacy-provider jest --watch --runInBand",
+    "version": "changeset version",
+    "release": "npm run build && changeset publish"
+  },
   "dependencies": {
-    "@discoveryjs/json-ext": "0.5.7",
+    "@discoveryjs/json-ext": "^0.6.3",
     "acorn": "^8.0.4",
     "acorn-walk": "^8.0.0",
-    "commander": "^7.2.0",
-    "debounce": "^1.2.1",
-    "escape-string-regexp": "^4.0.0",
-    "html-escaper": "^2.0.2",
+    "commander": "^14.0.2",
+    "escape-string-regexp": "^5.0.0",
+    "html-escaper": "^3.0.3",
     "opener": "^1.5.2",
     "picocolors": "^1.0.0",
     "sirv": "^3.0.2",
     "ws": "^8.19.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.9",
-    "@babel/plugin-proposal-decorators": "7.25.9",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.26.9",
     "@babel/plugin-transform-class-properties": "^7.27.1",
-    "@babel/plugin-transform-runtime": "7.26.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
-    "@babel/runtime": "7.26.9",
-    "@carrotsearch/foamtree": "3.5.0",
-    "autoprefixer": "10.2.5",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "9.2.1",
-    "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.4",
-    "chai-subset": "1.6.0",
-    "classnames": "2.3.1",
-    "core-js": "3.12.1",
-    "css-loader": "5.2.5",
-    "cssnano": "5.0.4",
-    "del": "6.0.0",
-    "eslint": "5.16.0",
-    "eslint-config-th0r": "2.0.0",
-    "eslint-config-th0r-react": "2.0.1",
-    "eslint-plugin-react": "7.23.2",
-    "filesize": "^6.3.0",
-    "globby": "11.0.3",
-    "gulp": "4.0.2",
-    "gulp-babel": "8.0.0",
+    "@babel/plugin-transform-runtime": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/runtime": "^7.26.9",
+    "@carrotsearch/foamtree": "^3.5.0",
+    "@changesets/cli": "^2.30.0",
+    "@changesets/get-github-info": "^0.8.0",
+    "@types/html-escaper": "^3.0.4",
+    "@types/opener": "^1.4.3",
+    "autoprefixer": "^10.2.5",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^10.0.0",
+    "classnames": "^2.3.1",
+    "core-js": "^3.12.1",
+    "css-loader": "^7.1.3",
+    "cssnano": "^7.1.2",
+    "debounce": "^3.0.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-webpack": "^4.9.3",
+    "filesize": "^11.0.13",
     "jest": "^30.2.0",
-    "lodash.memoize": "^4.1.2",
-    "lodash.merge": "^4.6.2",
-    "lodash.partial": "^4.2.1",
-    "mobx": "5.15.7",
-    "mobx-react": "6.3.1",
-    "postcss": "8.3.0",
-    "postcss-icss-values": "2.0.2",
-    "postcss-loader": "5.3.0",
-    "preact": "10.5.13",
+    "mobx": "^6.15.0",
+    "mobx-react": "^9.2.1",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^8.2.0",
+    "preact": "^10.5.13",
+    "prettier": "^3.8.0",
+    "prop-types": "^15.8.1",
     "puppeteer": "^24.30.0",
-    "stream-combiner2": "1.1.1",
-    "style-loader": "2.0.0",
-    "terser-webpack-plugin": "5.1.2",
-    "url-loader": "4.1.1",
-    "webpack": "5.98.0",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.0"
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.1.2",
+    "tinyglobby": "^0.2.15",
+    "typescript": "^5.9.3",
+    "webpack": "^5.105.2",
+    "webpack-4": "npm:webpack@^4",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   },
-  "keywords": [
-    "webpack",
-    "bundle",
-    "analyzer",
-    "modules",
-    "size",
-    "interactive",
-    "chart",
-    "treemap",
-    "zoomable",
-    "zoom"
-  ]
+  "packageManager": "npm@10.1.0",
+  "engines": {
+    "node": ">= 20.9.0"
+  },
+  "changelog": "https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md"
 }