@atlaspack/inspector 0.0.19-canary.3998

package/src/backend/services/buildTreemap.ts

@@ -0,0 +1,273 @@
+/* eslint-disable monorepo/no-internal-import */
+// @ts-expect-error TS2749
+import type BundleGraph from '@atlaspack/core/lib/BundleGraph.js';
+// @ts-expect-error TS2749
+import {requestTypes} from '@atlaspack/core/lib/RequestTracker.js';
+// @ts-expect-error TS2749
+import type RequestTracker from '@atlaspack/core/lib/RequestTracker.js';
+// @ts-expect-error TS2749
+import type {RequestGraphNode} from '@atlaspack/core/lib/RequestTracker.js';
+// @ts-expect-error TS2749
+import type {Node} from '@atlaspack/core/lib/types.js';
+import fs from 'fs';
+import path from 'path';
+import {logger} from '../config/logger';
+
+/**
+ * An asset tree node.
+ *
+ * This is the file-tree structure of the bundle. Each file and directory is a node in the
+ * tree.
+ *
+ * Directories' sizes are the sum of their children's sizes.
+ *
+ * Sizes are read from disk, not from the bundle itself.
+ */
+export type AssetTreeNode = {
+  /**
+   * ID of this file.
+   */
+  id: string;
+  /**
+   * Children of this node (empty is this is a file).
+   *
+   * This is the next path component in the file-path leading to each child.
+   */
+  children: Record<string, AssetTreeNode>;
+  /**
+   * Size of this node in bytes.
+   */
+  size: number;
+  /**
+   * The full file-path of this node.
+   */
+  path: string;
+};
+
+/**
+ * A bundle in the tree-map.
+ */
+export interface TreemapBundle {
+  /**
+   * The bundle `id` for tree-map purposes.
+   */
+  id: string;
+  /**
+   * A display name for the UI
+   */
+  displayName: string;
+  /**
+   * Raw bundle node from the bundle graph.
+   */
+  bundle: any;
+  /**
+   * Size of the bundle in bytes, as read from disk.
+   */
+  size: number;
+  /**
+   * The file path of the bundle on disk.
+   */
+  filePath: string;
+  /**
+   * The file-tree for the bundle.
+   */
+  assetTree: AssetTreeNode;
+}
+
+/**
+ * The tree-map model.
+ */
+export interface Treemap {
+  /**
+   * Each bundle in the application build.
+   */
+  bundles: Array<TreemapBundle>;
+  /**
+   * Total size of all bundles in bytes.
+   */
+  totalSize: number;
+}
+
+/**
+ * In order to find the sizes of bundles, we look-up write bundle requests for each bundle
+ * in this build, then read the sizes of each file from disk.
+ */
+export function getWriteBundleRequestsByBundleId(
+  requestTracker: RequestTracker,
+): Map<string, RequestGraphNode> {
+  const writeBundleRequests = requestTracker.graph.nodes.filter(
+    (requestNode: RequestGraphNode) =>
+      requestNode &&
+      requestNode.type === 1 &&
+      requestNode.requestType === requestTypes.write_bundle_request,
+  );
+
+  return new Map(
+    writeBundleRequests.map((request: RequestGraphNode) => [
+      request.result?.bundleId ?? '',
+      request,
+    ]),
+  );
+}
+
+/**
+ * Builds a tree-map model for a bundle graph.
+ *
+ * The tree-map is a tree structure starting at the bundle and having layers for
+ * each asset sub-directory in its asset tree.
+ *
+ * Asset sizes are calculated from the asset size stats, which should represent
+ * sizes post-transformation, but before minification.
+ *
+ * Bundle sizes are read from the bundle files on disk.
+ *
+ * The sub-directories are sized to the size of their children.
+ */
+export function buildTreemapBundle({
+  writeBundleRequestsByBundleId,
+  node,
+  projectRoot,
+  repositoryRoot,
+  bundleGraph,
+}: {
+  writeBundleRequestsByBundleId: Map<string, RequestGraphNode>;
+  node: Node;
+  projectRoot: string;
+  repositoryRoot: string;
+  bundleGraph: BundleGraph;
+}): TreemapBundle {
+  const writeBundleRequest = writeBundleRequestsByBundleId.get(node.id);
+  const {size, filePath} = findBundleInfo({
+    writeBundleRequest,
+    projectRoot,
+    repositoryRoot,
+    node,
+  });
+
+  // this is the directory structure
+  const assetTree: AssetTreeNode = {
+    id: `${node.id}::/`,
+    path: '',
+    children: {},
+    size: 0,
+  };
+
+  const assets: any[] = [];
+  bundleGraph.traverseAssets(node.value, (asset: any) => {
+    assets.push(asset);
+  });
+
+  for (const asset of assets) {
+    const filePath = path.isAbsolute(asset.filePath)
+      ? path.relative(repositoryRoot, asset.filePath)
+      : asset.filePath;
+    const parts = filePath.split('/');
+    const assetSize = asset.stats.size;
+    let current = assetTree;
+
+    let currentSubpath = '';
+    for (let part of parts) {
+      currentSubpath += '/' + part;
+      current.size += assetSize;
+      current.children[part] = current.children[part] ?? {
+        id: `${node.id}::${currentSubpath}`,
+        path: currentSubpath,
+        children: {},
+        size: 0,
+      };
+      current = current.children[part];
+    }
+    current.size += assetSize;
+  }
+
+  const treemapBundle = {
+    id: node.id,
+    displayName: node.value.displayName,
+    bundle: node,
+    size,
+    filePath: filePath ?? '',
+    assetTree,
+  };
+  return treemapBundle;
+}
+
+/**
+ * Finds the size and file path of a bundle.
+ *
+ * If the file path is not absolute, it is made absolute by joining it with the project root.
+ *
+ * If the file path is not found, the size is 0.
+ *
+ * If the file path is found but the file cannot be read, an error is logged and the size is 0.
+ */
+export function findBundleInfo({
+  writeBundleRequest,
+  projectRoot,
+  repositoryRoot,
+  node,
+}: {
+  writeBundleRequest: RequestGraphNode | undefined;
+  projectRoot: string;
+  repositoryRoot: string;
+  node: Node;
+}): {size: number; filePath: string | null} {
+  let filePath = writeBundleRequest?.result?.filePath
+    ? path.isAbsolute(writeBundleRequest?.result?.filePath)
+      ? writeBundleRequest.result.filePath
+      : path.join(projectRoot, writeBundleRequest.result.filePath)
+    : null;
+  let size = 0;
+  try {
+    size = filePath ? fs.statSync(filePath).size : 0;
+  } catch (e) {
+    logger.error(
+      {filePath, nodeId: node.id, error: e},
+      `Error getting size of bundle at ${filePath}`,
+    );
+  }
+
+  filePath = filePath
+    ? path.isAbsolute(filePath)
+      ? path.relative(repositoryRoot, filePath)
+      : filePath
+    : null;
+
+  return {size, filePath};
+}
+
+export function buildTreemap({
+  projectRoot,
+  repositoryRoot,
+  bundleGraph,
+  requestTracker,
+}: {
+  projectRoot: string;
+  repositoryRoot: string;
+  bundleGraph: BundleGraph;
+  requestTracker: RequestTracker;
+}): Treemap {
+  const treemap: Treemap = {
+    bundles: [],
+    totalSize: 0,
+  };
+
+  const writeBundleRequestsByBundleId =
+    getWriteBundleRequestsByBundleId(requestTracker);
+
+  bundleGraph._graph.nodes.forEach((node: Node) => {
+    if (node.type === 'bundle') {
+      const treemapBundle = buildTreemapBundle({
+        writeBundleRequestsByBundleId,
+        node,
+        projectRoot,
+        repositoryRoot,
+        bundleGraph,
+      });
+
+      treemap.bundles.push(treemapBundle);
+      treemap.totalSize += treemapBundle.size;
+    }
+  });
+
+  return treemap;
+}

package/src/backend/services/buildTreemapBundle.test.ts

@@ -0,0 +1,348 @@
+import assert from 'assert';
+import * as sinon from 'sinon';
+import fs from 'fs';
+import path from 'path';
+import {buildTreemapBundle} from './buildTreemap';
+
+jest.mock('../config/logger');
+
+describe('buildTreemapBundle', function () {
+  let sandbox: sinon.SinonSandbox;
+  let mockBundleGraph: any;
+  let mockNode: any;
+  let mockWriteBundleRequestsByBundleId: Map<string, any>;
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox();
+
+    // Mock fs.statSync
+    sandbox.stub(fs, 'statSync').returns({size: 1024} as any);
+
+    // Mock path.join
+    sandbox
+      .stub(path, 'join')
+      .callsFake((...paths: string[]) => paths.join('/'));
+
+    // Mock bundle node
+    mockNode = {
+      id: 'bundle123',
+      type: 'bundle',
+      value: {
+        displayName: 'main.js',
+      },
+    };
+
+    // Mock bundle graph with traverseAssets method
+    mockBundleGraph = {
+      traverseAssets: sandbox.stub(),
+    };
+
+    // Mock write bundle requests map
+    mockWriteBundleRequestsByBundleId = new Map([
+      [
+        'bundle123',
+        {
+          result: {
+            bundleId: 'bundle123',
+            filePath: 'dist/main.js',
+          },
+        },
+      ],
+    ]);
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it('should build treemap bundle with correct basic properties', function () {
+    // Setup mock assets
+    const mockAssets = [
+      {
+        filePath: '/src/index.js',
+        stats: {size: 100},
+      },
+      {
+        filePath: '/src/utils.js',
+        stats: {size: 50},
+      },
+    ];
+
+    // Mock traverseAssets to call callback with each asset
+    mockBundleGraph.traverseAssets.callsFake(
+      (bundleValue: any, callback: (asset: any) => void) => {
+        mockAssets.forEach(callback);
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    assert.equal(result.id, 'bundle123');
+    assert.equal(result.displayName, 'main.js');
+    assert.equal(result.bundle, mockNode);
+    assert.equal(result.size, 1024); // from mocked fs.statSync
+    assert.equal(result.filePath, 'dist/main.js');
+    assert(result.assetTree);
+  });
+
+  it('should handle missing write bundle request', function () {
+    const emptyMap = new Map();
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (_bundleValue: any, _callback: (asset: any) => void) => {
+        // No assets
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: emptyMap,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    assert.equal(result.size, 0);
+    assert.equal(result.filePath, '');
+  });
+
+  it('should build correct asset tree structure', function () {
+    const mockAssets = [
+      {
+        filePath: 'src/components/Button.js',
+        stats: {size: 100},
+      },
+      {
+        filePath: 'src/utils/helpers.js',
+        stats: {size: 50},
+      },
+    ];
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (bundleValue: any, callback: (asset: any) => void) => {
+        mockAssets.forEach(callback);
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    // Check that tree structure exists
+    assert(result.assetTree.children.src);
+    assert.equal(result.assetTree.path, '');
+    assert.equal(result.assetTree.children.src.path, '/src');
+
+    // Check components subdirectory exists
+    assert(result.assetTree.children.src.children.components);
+    assert.equal(
+      result.assetTree.children.src.children.components.path,
+      '/src/components',
+    );
+
+    // Check utils subdirectory exists
+    assert(result.assetTree.children.src.children.utils);
+    assert.equal(
+      result.assetTree.children.src.children.utils.path,
+      '/src/utils',
+    );
+
+    assert.equal(result.assetTree.size, 150);
+    assert.equal(result.assetTree.children.src.size, 150);
+    assert.equal(result.assetTree.children.src.children.components.size, 100);
+    assert.equal(result.assetTree.children.src.children.utils.size, 50);
+  });
+
+  it('should handle assets with same directory correctly', function () {
+    const mockAssets = [
+      {
+        filePath: 'lib/module1.js',
+        stats: {size: 100},
+      },
+      {
+        filePath: 'lib/module2.js',
+        stats: {size: 200},
+      },
+    ];
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (bundleValue: any, callback: (asset: any) => void) => {
+        mockAssets.forEach(callback);
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    // lib directory should contain total of all files under it
+    assert.equal(result.assetTree.children.lib.size, 300); // 100 + 200
+    assert.equal(
+      result.assetTree.children.lib.children['module1.js'].size,
+      100,
+    );
+    assert.equal(
+      result.assetTree.children.lib.children['module2.js'].size,
+      200,
+    );
+  });
+
+  it('should handle empty assets array', function () {
+    mockBundleGraph.traverseAssets.callsFake(
+      (_bundleValue: any, _callback: (asset: any) => void) => {
+        // No assets
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    assert.equal(result.assetTree.size, 0);
+    assert.deepEqual(result.assetTree.children, {});
+  });
+
+  it('should handle file path without extension', function () {
+    const mockAssets = [
+      {
+        filePath: 'src/config',
+        stats: {size: 25},
+      },
+    ];
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (_bundleValue: any, callback: (asset: any) => void) => {
+        mockAssets.forEach(callback);
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    assert.equal(result.assetTree.children.src.children.config.size, 25);
+  });
+
+  it('should call traverseAssets with correct bundle value', function () {
+    mockBundleGraph.traverseAssets.callsFake(
+      (_bundleValue: any, _callback: (asset: any) => void) => {
+        // Just verify it was called
+      },
+    );
+
+    buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    assert(mockBundleGraph.traverseAssets.calledOnce);
+    assert(mockBundleGraph.traverseAssets.calledWith(mockNode.value));
+  });
+
+  it('should calculate directory sizes correctly', function () {
+    // Test case matching user's example:
+    // lib/child/a.js - 10
+    // lib/other/b.js - 10
+    // lib/other/c.js - 10
+    const mockAssets = [
+      {
+        filePath: 'lib/child/a.js',
+        stats: {size: 10},
+      },
+      {
+        filePath: 'lib/other/b.js',
+        stats: {size: 10},
+      },
+      {
+        filePath: 'lib/other/c.js',
+        stats: {size: 10},
+      },
+    ];
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (bundleValue: any, callback: (asset: any) => void) => {
+        mockAssets.forEach(callback);
+      },
+    );
+
+    const result = buildTreemapBundle({
+      writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+      node: mockNode,
+      projectRoot: '/project',
+      repositoryRoot: '/project',
+      bundleGraph: mockBundleGraph,
+    });
+
+    // Root should contain total of all files
+    // assert.equal(result.assetTree.size, 30); // 10+10+10
+
+    // lib directory should contain total of all files under lib
+    assert.equal(result.assetTree.children.lib.size, 30); // 10+10+10
+
+    // lib/child should contain only a.js
+    assert.equal(result.assetTree.children.lib.children.child.size, 10); // 10
+
+    // lib/other should contain b.js + c.js
+    assert.equal(result.assetTree.children.lib.children.other.size, 20); // 10+10
+
+    // Individual files should have their own sizes
+    assert.equal(
+      result.assetTree.children.lib.children.child.children['a.js'].size,
+      10,
+    );
+    assert.equal(
+      result.assetTree.children.lib.children.other.children['b.js'].size,
+      10,
+    );
+    assert.equal(
+      result.assetTree.children.lib.children.other.children['c.js'].size,
+      10,
+    );
+  });
+
+  it('should handle fs.statSync errors gracefully', function () {
+    // Make fs.statSync throw an error
+    (fs.statSync as sinon.SinonStub).throws(new Error('File not found'));
+
+    mockBundleGraph.traverseAssets.callsFake(
+      (_bundleValue: any, _callback: (asset: any) => void) => {
+        // No assets
+      },
+    );
+
+    assert.doesNotThrow(() => {
+      buildTreemapBundle({
+        writeBundleRequestsByBundleId: mockWriteBundleRequestsByBundleId,
+        node: mockNode,
+        projectRoot: '/project',
+        repositoryRoot: '/project',
+        bundleGraph: mockBundleGraph,
+      });
+    }, Error);
+  });
+});