@atlaspack/inspector 0.0.19-canary.3998

package/lib/backend/services/getCacheStats.test.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = __importDefault(require("assert"));
+const sinon = __importStar(require("sinon"));
+const getCacheStats_1 = require("./getCacheStats");
+describe('getCacheStats', function () {
+    let sandbox;
+    let mockCache;
+    beforeEach(() => {
+        sandbox = sinon.createSandbox();
+        mockCache = {
+            keys: sandbox.stub(),
+            getBlobSync: sandbox.stub(),
+        };
+    });
+    afterEach(() => {
+        sandbox.restore();
+    });
+    it('should return empty stats for empty cache', function () {
+        mockCache.keys.returns([]);
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        assert_1.default.deepEqual(result, {
+            size: 0,
+            count: 0,
+            keySize: 0,
+            assetContentCount: 0,
+            assetContentSize: 0,
+            assetMapCount: 0,
+            assetMapSize: 0,
+        });
+    });
+    it('should calculate stats for cache with regular keys', function () {
+        const mockKeys = ['key1', 'key2', 'key3'];
+        const mockValues = [
+            Buffer.from('value1'),
+            Buffer.from('value2'),
+            Buffer.from('value3'),
+        ];
+        mockCache.keys.returns(mockKeys);
+        mockCache.getBlobSync.onCall(0).returns(mockValues[0]);
+        mockCache.getBlobSync.onCall(1).returns(mockValues[1]);
+        mockCache.getBlobSync.onCall(2).returns(mockValues[2]);
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        const expectedSize = mockValues[0].length + mockValues[1].length + mockValues[2].length;
+        const expectedKeySize = Buffer.from('key1').length +
+            Buffer.from('key2').length +
+            Buffer.from('key3').length;
+        assert_1.default.equal(result.size, expectedSize);
+        assert_1.default.equal(result.count, 3);
+        assert_1.default.equal(result.keySize, expectedKeySize);
+        assert_1.default.equal(result.assetContentCount, 0);
+        assert_1.default.equal(result.assetContentSize, 0);
+        assert_1.default.equal(result.assetMapCount, 0);
+        assert_1.default.equal(result.assetMapSize, 0);
+    });
+    it('should count asset content keys correctly', function () {
+        const mockKeys = ['asset1:content', 'asset2:content', 'other-key'];
+        const mockValues = [
+            Buffer.from('content1'),
+            Buffer.from('content2'),
+            Buffer.from('other'),
+        ];
+        mockCache.keys.returns(mockKeys);
+        mockCache.getBlobSync.onCall(0).returns(mockValues[0]);
+        mockCache.getBlobSync.onCall(1).returns(mockValues[1]);
+        mockCache.getBlobSync.onCall(2).returns(mockValues[2]);
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        assert_1.default.equal(result.assetContentCount, 2);
+        assert_1.default.equal(result.assetContentSize, mockValues[0].length + mockValues[1].length);
+    });
+    it('should count asset map keys correctly', function () {
+        const mockKeys = ['asset1:map', 'asset2:map', 'other-key'];
+        const mockValues = [
+            Buffer.from('map1'),
+            Buffer.from('map2'),
+            Buffer.from('other'),
+        ];
+        mockCache.keys.returns(mockKeys);
+        mockCache.getBlobSync.onCall(0).returns(mockValues[0]);
+        mockCache.getBlobSync.onCall(1).returns(mockValues[1]);
+        mockCache.getBlobSync.onCall(2).returns(mockValues[2]);
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        assert_1.default.equal(result.assetMapCount, 2);
+        assert_1.default.equal(result.assetMapSize, mockValues[0].length + mockValues[1].length);
+    });
+    it('should handle mixed cache keys correctly', function () {
+        const mockKeys = [
+            'asset1:content',
+            'asset2:map',
+            'regular-key',
+            'asset3:content',
+            'asset4:map',
+        ];
+        const mockValues = [
+            Buffer.from('content1'),
+            Buffer.from('map1'),
+            Buffer.from('regular'),
+            Buffer.from('content2'),
+            Buffer.from('map2'),
+        ];
+        mockCache.keys.returns(mockKeys);
+        mockValues.forEach((value, index) => {
+            mockCache.getBlobSync.onCall(index).returns(value);
+        });
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        const totalSize = mockValues.reduce((sum, val) => sum + val.length, 0);
+        const totalKeySize = mockKeys.reduce((sum, key) => sum + Buffer.from(key).length, 0);
+        assert_1.default.equal(result.size, totalSize);
+        assert_1.default.equal(result.count, 5);
+        assert_1.default.equal(result.keySize, totalKeySize);
+        assert_1.default.equal(result.assetContentCount, 2);
+        assert_1.default.equal(result.assetContentSize, mockValues[0].length + mockValues[3].length);
+        assert_1.default.equal(result.assetMapCount, 2);
+        assert_1.default.equal(result.assetMapSize, mockValues[1].length + mockValues[4].length);
+    });
+    it('should handle empty string keys', function () {
+        const mockKeys = [''];
+        const mockValues = [Buffer.from('')];
+        mockCache.keys.returns(mockKeys);
+        mockCache.getBlobSync.onCall(0).returns(mockValues[0]);
+        const result = (0, getCacheStats_1.getCacheStats)(mockCache);
+        assert_1.default.equal(result.size, 0);
+        assert_1.default.equal(result.count, 1);
+        assert_1.default.equal(result.keySize, 0);
+    });
+});

package/lib/backend/services/getDisplayName.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplayName = getDisplayName;
+function getDisplayName(node) {
+    if (node.type === 'asset') {
+        return `asset: ${node.value.filePath}`;
+    }
+    if (node.type === 'dependency') {
+        return `dependency: import '${node.value.specifier}'`;
+    }
+    if (node.type === 'asset_group') {
+        return `asset group: ${node.value.filePath}`;
+    }
+    if (node.type === 'bundle') {
+        return `bundle: ${node.value.displayName}`;
+    }
+    return node.id;
+}

package/lib/backend/services/getDisplayName.test.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = __importDefault(require("assert"));
+const getDisplayName_1 = require("./getDisplayName");
+describe('getDisplayName', function () {
+    it('should return display name for asset node', function () {
+        const assetNode = {
+            type: 'asset',
+            value: {
+                filePath: '/path/to/file.js',
+            },
+            id: 'asset1',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(assetNode);
+        assert_1.default.equal(result, 'asset: /path/to/file.js');
+    });
+    it('should return display name for dependency node', function () {
+        const dependencyNode = {
+            type: 'dependency',
+            value: {
+                specifier: './module',
+            },
+            id: 'dep1',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(dependencyNode);
+        assert_1.default.equal(result, "dependency: import './module'");
+    });
+    it('should return display name for asset_group node', function () {
+        const assetGroupNode = {
+            type: 'asset_group',
+            value: {
+                filePath: '/path/to/asset-group.js',
+            },
+            id: 'group1',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(assetGroupNode);
+        assert_1.default.equal(result, 'asset group: /path/to/asset-group.js');
+    });
+    it('should return display name for bundle node', function () {
+        const bundleNode = {
+            type: 'bundle',
+            value: {
+                displayName: 'main.js',
+            },
+            id: 'bundle1',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(bundleNode);
+        assert_1.default.equal(result, 'bundle: main.js');
+    });
+    it('should return node id for unknown node type', function () {
+        const unknownNode = {
+            type: 'unknown',
+            value: {},
+            id: 'unknown123',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(unknownNode);
+        assert_1.default.equal(result, 'unknown123');
+    });
+    it('should return node id when value is null', function () {
+        const nodeWithNullValue = {
+            type: 'unknown_type',
+            value: null,
+            id: 'null-asset',
+        };
+        const result = (0, getDisplayName_1.getDisplayName)(nodeWithNullValue);
+        assert_1.default.equal(result, 'null-asset');
+    });
+});

package/lib/backend/services/loadCacheData.js

@@ -0,0 +1,209 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadRequestTracker = loadRequestTracker;
+exports.findCachePath = findCachePath;
+exports.loadCacheData = loadCacheData;
+/* eslint-disable monorepo/no-internal-import */
+const path_1 = __importDefault(require("path"));
+const v8_1 = __importDefault(require("v8"));
+const build_cache_1 = require("@atlaspack/build-cache");
+const cache_1 = require("@atlaspack/cache");
+// @ts-expect-error TS2749
+const RequestTracker_js_1 = __importDefault(require("@atlaspack/core/lib/RequestTracker.js"));
+const package_json_1 = require("@atlaspack/core/package.json");
+const RequestTracker_js_2 = require("@atlaspack/core/lib/RequestTracker.js");
+const fs_1 = __importDefault(require("fs"));
+const buildTreemap_1 = require("./buildTreemap");
+const logger_1 = require("../config/logger");
+const LazyValue_1 = require("./LazyValue");
+/**
+ * Similar to `@atlaspack/query`.
+ *
+ * Since query is using a different approach to determine valid BundleGraph/AssetGraph in
+ * the cache it was easier to rewrite this here.
+ *
+ * This will find the first `RequestGraph` entry in the cache and load it.
+ *
+ * We should be keeping meta-data about the builds that correspond to these entries so as
+ * to load the most relevant one (for example the most recent) as well as performing
+ * clean-up in other areas of the `atlaspack` codebase.
+ */
+async function loadRequestTracker(cache) {
+    let requestGraphBlob = null;
+    for (let key of cache.keys()) {
+        if (key.startsWith('RequestTracker/') && key.endsWith('/RequestGraph')) {
+            requestGraphBlob = key;
+        }
+    }
+    if (!requestGraphBlob) {
+        logger_1.logger.warn('No request graph key found in cache');
+        return { requestTracker: null };
+    }
+    const requestGraphKey = requestGraphBlob.split('/').slice(0, -1).join('/');
+    try {
+        logger_1.logger.debug({ requestGraphBlob, requestGraphKey }, 'Loading RequestGraph...');
+        const { requestGraph } = await (0, RequestTracker_js_2.readAndDeserializeRequestGraph)(cache, requestGraphBlob, requestGraphKey);
+        const requestTracker = new RequestTracker_js_1.default({
+            graph: requestGraph,
+            farm: null,
+            options: null,
+        });
+        return {
+            requestTracker,
+        };
+    }
+    catch (e) {
+        logger_1.logger.error(e, `Error loading Request Graph.
+
+A failure happened when loading atlaspack cache data.
+
+This might happen because:
+
+- There is a version mismatch between the atlaspack-inspector and the atlaspack CLI used to build the cache
+- The cache was built without the required 'cachePerformanceImprovements' feature flag set to true
+
+The inspector will try to load caches even if there are version mismatches, but it might fail due to breaking
+changes between versions.
+
+You can run "atlaspack-inspector build <entrypoint...>" to build the app for the inspector with correct
+feature-flags.`);
+        return {
+            requestTracker: null,
+        };
+    }
+}
+/**
+ * Find the cache path from the `--target` flag.
+ *
+ * This is meant to make the tool nicer to use by forgiving a developer if they specify
+ * `--target` as the path to their project root or to a sub-directory, instead of the
+ * cache.
+ *
+ * It will also prevent creating caches where there were none, since opening a non-existent
+ * cache would create a new empty cache.
+ */
+function findCachePath(target) {
+    target = path_1.default.resolve(process.cwd(), target);
+    if (fs_1.default.existsSync(path_1.default.join(target, 'data.mdb'))) {
+        return target;
+    }
+    if (fs_1.default.existsSync(path_1.default.join(target, '.parcel-cache'))) {
+        return path_1.default.join(target, '.parcel-cache');
+    }
+    if (fs_1.default.existsSync(path_1.default.join(target, '.atlaspack-cache'))) {
+        return path_1.default.join(target, '.atlaspack-cache');
+    }
+    if (path_1.default.dirname(target) !== target &&
+        target &&
+        target !== '/' &&
+        target !== '.') {
+        return findCachePath(path_1.default.dirname(target));
+    }
+    return null;
+}
+function mapObjectStringValues(object, fn) {
+    if (typeof object !== 'object' || object === null) {
+        return object;
+    }
+    if (Array.isArray(object)) {
+        return object;
+    }
+    return Object.fromEntries(Object.entries(object).map(([key, value]) => {
+        if (typeof value === 'string') {
+            return [key, fn(key, value)];
+        }
+        if (value &&
+            typeof value === 'object' &&
+            value.constructor.name !== 'Object') {
+            return [key, value];
+        }
+        return [key, mapObjectStringValues(value, fn)];
+    }));
+}
+function getSync(cache, key) {
+    const blob = cache.getBlobSync(key);
+    if (!blob) {
+        return null;
+    }
+    let deserialized = v8_1.default.deserialize(blob);
+    deserialized = mapObjectStringValues(deserialized, (key, value) => {
+        if (key === '$$type') {
+            return value.replace(/^\d+\.\d+\.\d+:/, `${package_json_1.version}:`);
+        }
+        return value;
+    });
+    return (0, build_cache_1.restoreDeserializedObject)(deserialized);
+}
+/**
+ * Loads the cache and pre-processes some data.
+ */
+async function loadCacheData({ target, projectRoot, repositoryRoot, }) {
+    const cachePath = findCachePath(target);
+    if (!cachePath) {
+        throw new Error(`Invalid cache path provided, could not find cache in any directory above the path provided: ${target}.
+
+Make sure you have run "atlaspack build --feature-flag cachePerformanceImprovements=true" before running the inspector.
+
+Alternatively you can run "atlaspack-inspector build <entrypoint...>" to build the app for the inspector.`);
+    }
+    logger_1.logger.info({ cachePath, projectRoot }, 'Loading graphs...');
+    const cache = new cache_1.LMDBLiteCache(cachePath);
+    const { requestTracker } = await loadRequestTracker(cache);
+    if (!requestTracker) {
+        throw new Error('Failed to load request tracker');
+    }
+    logger_1.logger.debug('Loaded RequestTracker');
+    const bundleGraphLazyValue = new LazyValue_1.LazyValue(() => {
+        logger_1.logger.info('Loading BundleGraph...');
+        const bundleGraphRequest = requestTracker.graph.nodes.find((node) => node &&
+            node.type === 1 &&
+            node.requestType === RequestTracker_js_2.requestTypes.bundle_graph_request);
+        const bundleGraph = bundleGraphRequest?.resultCacheKey &&
+            getSync(cache, bundleGraphRequest.resultCacheKey)?.bundleGraph;
+        if (!bundleGraphRequest) {
+            logger_1.logger.error('Failed to find bundle graph request');
+        }
+        else if (bundleGraph != null) {
+            logger_1.logger.debug('Loaded BundleGraph');
+        }
+        return bundleGraph;
+    });
+    const treemap = new LazyValue_1.LazyValue(() => {
+        logger_1.logger.info({ projectRoot }, 'Building treemap...');
+        const bundleGraph = bundleGraphLazyValue.get();
+        return bundleGraph && requestTracker
+            ? (0, buildTreemap_1.buildTreemap)({ projectRoot, repositoryRoot, bundleGraph, requestTracker })
+            : null;
+    });
+    const assetGraph = new LazyValue_1.LazyValue(() => {
+        logger_1.logger.info('Loading AssetGraph...');
+        const assetGraphRequest = requestTracker.graph.nodes.find((node) => node &&
+            node.type === 1 &&
+            node.requestType === RequestTracker_js_2.requestTypes.asset_graph_request);
+        const assetGraph = assetGraphRequest?.resultCacheKey &&
+            getSync(cache, assetGraphRequest.resultCacheKey)?.assetGraph;
+        if (!assetGraphRequest) {
+            logger_1.logger.error('Failed to find asset graph request');
+        }
+        else if (assetGraph != null) {
+            logger_1.logger.debug('Loaded AssetGraph');
+        }
+        return assetGraph;
+    });
+    return {
+        get assetGraph() {
+            return assetGraph.get();
+        },
+        get bundleGraph() {
+            return bundleGraphLazyValue.get();
+        },
+        get treemap() {
+            return treemap.get();
+        },
+        cache,
+        requestTracker,
+    };
+}

package/lib/backend/services/loadCacheData.test.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const TemporaryDirectory_1 = require("../testing/TemporaryDirectory");
+const core_1 = __importDefault(require("@atlaspack/core"));
+const fs_1 = __importDefault(require("fs"));
+const loadCacheData_1 = require("./loadCacheData");
+const assert_1 = __importDefault(require("assert"));
+jest.mock('../config/logger');
+async function setupMockProject() {
+    const tempDir = new TemporaryDirectory_1.TemporaryDirectory();
+    await fs_1.default.promises.writeFile(path_1.default.join(tempDir.get(), '.git'), '', 'utf-8');
+    await fs_1.default.promises.writeFile(path_1.default.join(tempDir.get(), '.parcelrc'), JSON.stringify({
+        extends: '@atlaspack/config-default',
+    }), 'utf-8');
+    await fs_1.default.promises.writeFile(path_1.default.join(tempDir.get(), 'index.js'), `
+import './a.js';
+import './b.js';
+      `, 'utf-8');
+    await fs_1.default.promises.writeFile(path_1.default.join(tempDir.get(), 'a.js'), 'console.log("Hello, world!");', 'utf-8');
+    await fs_1.default.promises.writeFile(path_1.default.join(tempDir.get(), 'b.js'), 'console.log("Hello, world!");', 'utf-8');
+    const atlaspack = new core_1.default({
+        featureFlags: {
+            cachePerformanceImprovements: true,
+        },
+        entries: [path_1.default.join(tempDir.get(), 'index.js')],
+    });
+    await atlaspack.run();
+    return tempDir;
+}
+describe('loadCacheData', () => {
+    it('should load the cache data', async () => {
+        const tempDir = await setupMockProject();
+        const cacheData = await (0, loadCacheData_1.loadCacheData)({
+            target: tempDir.get(),
+            projectRoot: tempDir.get(),
+            repositoryRoot: tempDir.get(),
+        });
+        const assetGraph = cacheData.assetGraph;
+        let numAssets = 0;
+        assetGraph.traverseAssets(() => {
+            numAssets++;
+        });
+        assert_1.default.equal(numAssets, 3);
+        const treemap = cacheData.treemap;
+        const assetTree = treemap?.bundles[0].assetTree;
+        const cleanNode = (node) => {
+            delete node.id;
+            Object.values(node.children).forEach(cleanNode);
+        };
+        cleanNode(assetTree);
+        expect(assetTree).toMatchInlineSnapshot(`
+     {
+       "children": {
+         "a.js": {
+           "children": {},
+           "path": "/a.js",
+           "size": 30,
+         },
+         "b.js": {
+           "children": {},
+           "path": "/b.js",
+           "size": 30,
+         },
+         "index.js": {
+           "children": {},
+           "path": "/index.js",
+           "size": 60,
+         },
+       },
+       "path": "",
+       "size": 120,
+     }
+    `);
+    });
+});

package/lib/backend/testing/TemporaryDirectory.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemporaryDirectory = void 0;
+const fs_1 = require("fs");
+const crypto_1 = require("crypto");
+const path_1 = __importDefault(require("path"));
+afterAll(() => {
+    const tmpDir = path_1.default.join(__dirname, 'tmp');
+    if ((0, fs_1.existsSync)(tmpDir)) {
+        (0, fs_1.rmSync)(tmpDir, { recursive: true, force: true });
+    }
+});
+/**
+ * Testing helper to create a temporary directory and remove it when
+ * tests complete.
+ *
+ * @example
+ * ```ts
+ * {
+ *   const tempDir = new TemporaryDirectory();
+ *   console.log(tempDir.get());
+ * }
+ * // the directory will be automatically removed
+ * // both by testing hooks and by custom dispose logic.
+ * ```
+ */
+class TemporaryDirectory {
+    constructor() {
+        const randomId = (0, crypto_1.randomUUID)();
+        this.path = path_1.default.join(__dirname, 'tmp', 'atlaspack-inspector-tests', `${randomId}`);
+        (0, fs_1.mkdirSync)(this.path, { recursive: true });
+    }
+    /**
+     * The file-path to the temporary directory.
+     */
+    get() {
+        return this.path;
+    }
+    [Symbol.dispose]() {
+        (0, fs_1.rmSync)(this.path, { recursive: true, force: true });
+    }
+}
+exports.TemporaryDirectory = TemporaryDirectory;