feat: add extensions to options

Author: dkazakov8

README.md

@@ -56,6 +56,10 @@ with the following properties:
 - `open` (boolean, optional): Automatically open the analyzer in the browser. Defaults to `false`.
 - `getStartResponse` (function, optional): Callback function that receives the response object 
 of the analyzer server.
+- `extensions` (Array<string>, optional): Which extensions should be included. By default 
+`['.js', '.cjs', '.mjs', '.ts', '.tsx']`. It's not possible to analyze `.css` because 
+`webpack-bundle-analyzer` filters output files by `/\.(js|mjs|cjs)$/iu`. But you may include smth.
+like `.json` if it is imported in some file.
 
 ### Example
 

assets/cjs.svg

@@ -30,7 +30,7 @@
     "gen-size-badge": "node --import tsx ./scripts/genSizeBadges.ts"
   },
   "dependencies": {
-    "webpack-bundle-analyzer": "4.9.1"
+    "webpack-bundle-analyzer": "4.10.2"
   },
   "devDependencies": {
     "@types/node": "22.5.1",

assets/coverage.svg

@@ -8,6 +8,8 @@ declare module 'webpack-bundle-analyzer' {
       port: number;
       host: string;
       openBrowser: boolean;
+      reportTitle: string;
+      entrypoints?: Array<string>;
     }
   ) => Promise<TypeStartResponse>;
 }

assets/esm.svg

@@ -0,0 +1,93 @@
+import * as path from 'node:path';
+
+import { Metafile } from 'esbuild';
+
+import { TypeStats } from './types.js';
+
+type TypeInputFilePath = string;
+type TypeOutputFilePath = string;
+
+export const getStats = ({ inputs, outputs }: Metafile, extensionsSet: Set<string>): TypeStats => {
+  const stats: TypeStats = {
+    assets: [],
+    modules: [],
+  };
+
+  /**
+   * Filter outputs so they have valid extensions and valid children
+   *
+   */
+
+  const outputsFilteredEntries = Object.entries(outputs).filter(
+    ([outputFilePath, outputChunkData]) => {
+      const outputFileExt = path.parse(outputFilePath).ext;
+
+      const hasValidChildren =
+        Object.keys(outputChunkData.inputs).length > 0 &&
+        Object.keys(outputChunkData.inputs).some((inputFilePath) => {
+          const inputFileExt = path.parse(inputFilePath).ext;
+
+          return extensionsSet.has(inputFileExt);
+        });
+
+      return extensionsSet.has(outputFileExt) && hasValidChildren;
+    }
+  );
+
+  /**
+   * Visualization should be grouped by output files,
+   * so first we need to connect each input file to the corresponding output files
+   *
+   * it's just an optimization of On3 complexity to On2
+   *
+   */
+
+  const chunksIndexed: Record<TypeInputFilePath, Array<TypeOutputFilePath>> = {};
+  const chunksSizesInOutput: Record<TypeInputFilePath, number> = {};
+
+  outputsFilteredEntries.forEach(([outputFilePath, outputChunkData]) => {
+    Object.entries(outputChunkData.inputs).forEach(([inputFilePath, { bytesInOutput }]) => {
+      chunksIndexed[inputFilePath] ??= [];
+      chunksIndexed[inputFilePath].push(outputFilePath);
+
+      chunksSizesInOutput[inputFilePath] = bytesInOutput;
+    });
+  });
+
+  /**
+   * Filter inputs so they have valid extensions and outputted in some file
+   *
+   */
+
+  const inputsFilteredEntries = Object.entries(inputs).filter(([inputFilePath]) => {
+    const inputFileExt = path.parse(inputFilePath).ext;
+
+    return extensionsSet.has(inputFileExt) && chunksIndexed[inputFilePath]?.length > 0;
+  });
+
+  /**
+   * Some package managers like to build a huge tree structure of folders like pnpm
+   * ex. node_modules/.pnpm/[email protected][email protected]/node_modules/dk-mobx-restore-state
+   *
+   * so let's take the final part only
+   *
+   */
+
+  stats.modules = inputsFilteredEntries.map(([inputFilePath, { bytes }]) => {
+    const name = `./${inputFilePath.replace(/(.*)?node_modules/, 'node_modules')}`;
+
+    return {
+      id: name,
+      name,
+      size: chunksSizesInOutput[inputFilePath] || bytes,
+      chunks: chunksIndexed[inputFilePath],
+    };
+  });
+
+  stats.assets = outputsFilteredEntries.map(([outputFilePath]) => ({
+    name: outputFilePath,
+    chunks: [outputFilePath],
+  }));
+
+  return stats;
+};

package.json

@@ -1,18 +1,27 @@
-import * as path from 'node:path';
-
 import { start } from 'webpack-bundle-analyzer';
 import { Plugin } from 'esbuild';
 
-import { TypeOptions, TypeStats, TypeStartResponse } from './types.js';
+import { TypeOptions, TypeStartResponse } from './types.js';
 import { pluginName } from './constants.js';
-import { getModules } from './getModules.js';
+import { getStats } from './getStats.js';
 import { validateResult } from './validators/validateResult.js';
 import { validateOptions } from './validators/validateOptions.js';
 import { validateSetup } from './validators/validateSetup.js';
 
 export const pluginWebpackAnalyzer = (options?: TypeOptions): Plugin => {
   validateOptions(options);
 
+  const finalOptions: TypeOptions = {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    port: options?.port ?? 8888,
+    host: options?.host ?? '127.0.0.1',
+    open: options?.open || false,
+    extensions: options?.extensions || ['.js', '.cjs', '.mjs', '.ts', '.tsx'],
+    getStartResponse: options?.getStartResponse,
+  };
+
+  const extensionsSet = new Set(finalOptions.extensions);
+
   return {
     name: pluginName,
     setup(build) {
@@ -23,13 +32,7 @@ export const pluginWebpackAnalyzer = (options?: TypeOptions): Plugin => {
       build.onEnd((resultRaw) => {
         const result = validateResult(resultRaw);
 
-        const stats: TypeStats = {
-          assets: Object.keys(result.metafile.outputs).map((chunkName) => ({
-            name: chunkName,
-            chunks: [path.parse(chunkName).name.split('.').shift()!],
-          })),
-          modules: getModules(result.metafile),
-        };
+        const stats = getStats(result.metafile, extensionsSet);
 
         if (response?.updateChartData) {
           response.updateChartData(stats);
@@ -40,14 +43,14 @@ export const pluginWebpackAnalyzer = (options?: TypeOptions): Plugin => {
         // https://github.com/webpack-contrib/webpack-bundle-analyzer
         return start(stats, {
           analyzerUrl: (params) => `http://${params.listenHost}:${params.boundAddress.port}`,
-          // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-          port: options?.port ?? 8888,
-          host: options?.host ?? '127.0.0.1',
-          openBrowser: options?.open || false,
+          port: finalOptions.port!,
+          host: finalOptions.host!,
+          openBrowser: finalOptions.open!,
+          reportTitle: 'Analyzer',
         }).then((res) => {
           response = res;
 
-          options?.getStartResponse?.(res);
+          finalOptions?.getStartResponse?.(res);
         });
       });