@atlaspack/inspector 0.0.19-canary.3998

package/lib/backend/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureInspectorApp = configureInspectorApp;
+exports.buildInspectorApp = buildInspectorApp;
+exports.main = main;
+/* eslint-disable import/first */
+// Stateful import to ensure serializers are loaded
+require('@atlaspack/core');
+const commander_1 = require("commander");
+const express_1 = __importDefault(require("express"));
+const cors_1 = __importDefault(require("cors"));
+const path_1 = __importDefault(require("path"));
+const feature_flags_1 = require("@atlaspack/feature-flags");
+const loadCacheData_1 = require("./services/loadCacheData");
+const logger_1 = require("./config/logger");
+const errorHandlingMiddleware_1 = require("./config/middleware/errorHandlingMiddleware");
+const loggingMiddleware_1 = require("./config/middleware/loggingMiddleware");
+const FrontendAssetsController_1 = require("./controllers/FrontendAssetsController");
+const cacheDataMiddleware_1 = require("./config/middleware/cacheDataMiddleware");
+const BundleGraphController_1 = require("./controllers/BundleGraphController");
+const TreeMapController_1 = require("./controllers/TreeMapController");
+const CacheDataController_1 = require("./controllers/CacheDataController");
+const findSourceCodeUrl_1 = require("./services/findSourceCodeUrl");
+const InspectorMCPController_1 = require("./controllers/mcp/InspectorMCPController");
+const child_process_1 = require("child_process");
+const AnalyticsService_1 = require("./services/AnalyticsService");
+/**
+ * Configures the inspector app.
+ *
+ * - Find paths for the source repository, project and cache.
+ * - Open the cache and deserialize bundler data out of it.
+ * - Build the tree-map model.
+ */
+function configureInspectorApp({ projectRoot: projectRootFromFlags, target, }) {
+    const flags = {
+        ...feature_flags_1.DEFAULT_FEATURE_FLAGS,
+        cachePerformanceImprovements: true,
+    };
+    (0, feature_flags_1.setFeatureFlags)(flags);
+    const projectRoot = projectRootFromFlags ?? (0, findSourceCodeUrl_1.findProjectRoot)(target) ?? path_1.default.dirname(target);
+    const repositoryRoot = (0, findSourceCodeUrl_1.findRepositoryRoot)(target) ?? path_1.default.dirname(target);
+    const sourceCodeURL = (0, findSourceCodeUrl_1.findSourceCodeURL)(target);
+    logger_1.logger.debug({ target, projectRoot, repositoryRoot, sourceCodeURL }, 'Found paths');
+    const cacheData = (0, loadCacheData_1.loadCacheData)({ target, projectRoot, repositoryRoot });
+    return {
+        cacheData,
+        projectRoot,
+        repositoryRoot,
+        sourceCodeURL,
+    };
+}
+/**
+ * Wire-up the express server app.
+ */
+function buildInspectorApp({ cacheData, projectRoot, repositoryRoot, sourceCodeURL, }) {
+    const app = (0, express_1.default)();
+    app.use((0, loggingMiddleware_1.loggingMiddleware)());
+    app.use((0, cors_1.default)({
+        origin: /http:\/\/localhost:(\d+)/,
+        credentials: true,
+    }));
+    app.use(express_1.default.json());
+    app.use((0, cacheDataMiddleware_1.cacheDataMiddleware)(cacheData));
+    app.use((0, FrontendAssetsController_1.makeFrontendAssetsController)());
+    app.use((0, BundleGraphController_1.makeBundleGraphController)({ projectRoot, repositoryRoot }));
+    app.use((0, TreeMapController_1.makeTreemapController)({
+        projectRoot,
+        repositoryRoot,
+        sourceCodeURL,
+    }));
+    app.use((0, InspectorMCPController_1.makeInspectorMCPController)());
+    app.use((0, CacheDataController_1.makeCacheDataController)());
+    app.use(errorHandlingMiddleware_1.errorHandlingMiddleware);
+    return app;
+}
+/**
+ * Executes `atlaspack build` to build the client application for the inspector.
+ *
+ * The inspector requires `cachePerformanceImprovements` to be enabled.
+ *
+ * @param targets - The targets/entry-points to build.
+ */
+async function buildClientApplicationForInspector(targets) {
+    logger_1.logger.info({ targets }, 'Building app...');
+    const child = (0, child_process_1.spawn)('yarn', [
+        'atlaspack',
+        'build',
+        '--feature-flag',
+        'cachePerformanceImprovements=true',
+        ...targets,
+    ], {
+        shell: true,
+        stdio: 'inherit',
+    });
+    await new Promise((resolve, reject) => {
+        child.on('error', (error) => {
+            logger_1.logger.error(error, 'Build error');
+            process.exitCode = 1;
+            reject(error);
+        });
+        child.on('exit', (code) => {
+            logger_1.logger.info(`Build process exited with code ${code}`);
+            if (code !== 0) {
+                process.exitCode = code ?? 1;
+                reject(new Error(`Build failed with code ${code}`));
+            }
+            else {
+                resolve(null);
+            }
+        });
+    });
+}
+/**
+ * CLI entry point for `@atlaspack/inspector`.
+ *
+ * Usage:
+ *
+ * ```bash
+ * yarn @atlaspack/inspector --target ./path/to/cache --project-root ./path/to/project
+ * ```
+ */
+function main() {
+    const version = require('../../package.json').version;
+    let isStartCommand = false;
+    commander_1.program.name('atlaspack-inspector').version(version);
+    AnalyticsService_1.analyticsService.sendEvent({
+        data: {
+            name: 'atlaspack-inspector-start',
+            action: 'atlaspack-inspector-start',
+        },
+    });
+    const command = commander_1.program
+        .command('start [options]', { isDefault: true })
+        .description('Start the inspector server')
+        .option('-t, --target <path>', 'Path to the target cache', process.cwd())
+        .option('-p, --port <port>', 'Port to run the server on', '3000')
+        .option('--project-root <path>', 'Path to the project root', undefined)
+        .action(() => {
+        isStartCommand = true;
+    });
+    commander_1.program
+        .command('build <target...>')
+        .description('Build an app with atlaspack-inspector required feature-flags')
+        .action(async (targets) => {
+        await buildClientApplicationForInspector(targets);
+    });
+    commander_1.program.parse(process.argv);
+    if (!isStartCommand) {
+        return;
+    }
+    const options = command.opts();
+    const inspectorAppParams = configureInspectorApp({
+        target: options.target,
+        projectRoot: options.projectRoot,
+    });
+    const app = buildInspectorApp(inspectorAppParams);
+    const port = Number(options.port ?? process.env.PORT ?? 3000);
+    const server = app.listen(port, () => {
+        const address = server.address();
+        if (address == null) {
+            logger_1.logger.error('Server did not start correctly');
+        }
+        else {
+            const addressString = typeof address === 'string'
+                ? address
+                : `http://localhost:${address.port}`;
+            logger_1.logger.info(`Server is running on ${addressString}`);
+        }
+    });
+    server.on('error', (error) => {
+        logger_1.logger.error(error, 'HTTP Server error');
+    });
+    return server;
+}

package/lib/backend/services/AnalyticsService.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyticsService = exports.AnalyticsService = void 0;
+const crypto_1 = require("crypto");
+const logger_1 = require("../config/logger");
+/**
+ * Reports analytics events to a daemon server running at port 16621.
+ *
+ * The application will automatically check if the service is available and will not report
+ * anything if it is not.
+ */
+class AnalyticsService {
+    constructor() {
+        this.daemonUrl = 'http://localhost:16621';
+        this.isAvailable = null;
+    }
+    /**
+     * Return the analytics service status.
+     */
+    async checkAvailable() {
+        const response = await fetch(`${this.daemonUrl}/version`);
+        if (!response.ok) {
+            const status = response.status;
+            const body = await response.json();
+            logger_1.logger.warn({ body, status }, 'Failed to check analytics service availability');
+            this.isAvailable = false;
+            return { available: false };
+        }
+        const data = await response.json();
+        this.isAvailable = true;
+        return {
+            available: data.version !== 'unknown',
+            name: data.name,
+            version: data.version,
+        };
+    }
+    /**
+     * Record an analytics event.
+     */
+    async sendEvent(event) {
+        try {
+            if (this.isAvailable == null) {
+                const available = await this.checkAvailable();
+                logger_1.logger.debug(available, `Analytics service is ${available.available ? 'available' : 'not available'}`);
+            }
+            if (!this.isAvailable) {
+                return;
+            }
+            const body = {
+                id: `atlaspack-inspector-${(0, crypto_1.randomUUID)()}`,
+                cwd: process.cwd(),
+                type: 'DISCRETE_EVENT',
+                ...event,
+                data: {
+                    startTimestamp: new Date().toISOString(),
+                    status: 'success',
+                    product: 'atlaspack-inspector',
+                    category: 'atlaspack-internal',
+                    name: 'atlaspack-inspector',
+                    ...event.data,
+                },
+            };
+            logger_1.logger.debug({ event: body }, 'Tracking analytics event');
+            const response = await fetch(`${this.daemonUrl}/events`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(body),
+            });
+            if (!response.ok) {
+                const status = response.status;
+                const body = await response.json();
+                logger_1.logger.warn({ body, status }, 'Failed to send analytics event, skipping');
+                return;
+            }
+            const json = await response.json();
+            logger_1.logger.debug({ json }, 'Analytics event sent');
+        }
+        catch (err) {
+            logger_1.logger.warn({ err }, 'Failed to send analytics event');
+        }
+    }
+}
+exports.AnalyticsService = AnalyticsService;
+exports.analyticsService = new AnalyticsService();

package/lib/backend/services/LazyValue.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyValue = void 0;
+/**
+ * A value that is computed once on read, then cached.
+ *
+ * @example
+ *
+ * ```ts
+ * const lazyComputation = new LazyValue(() => doExpensiveComputation());
+ *
+ * const result1 = lazyComputation.get();
+ * const result2 = lazyComputation.get();
+ *
+ * assert(result1 === result2);
+ * ```
+ */
+class LazyValue {
+    constructor(factory) {
+        this.factory = factory;
+        this.value = null;
+    }
+    /**
+     * Builds the value if it hasn't been built and returns it.
+     */
+    get() {
+        if (this.value == null) {
+            this.value = this.factory();
+        }
+        return this.value;
+    }
+}
+exports.LazyValue = LazyValue;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const LazyValue_1 = require("./LazyValue");
+describe('LazyValue', () => {
+    it('should return the value by calling the factory function once', () => {
+        const mock = jest.fn().mockImplementation(() => 'test');
+        const lazyValue = new LazyValue_1.LazyValue(mock);
+        expect(lazyValue.get()).toBe('test');
+        expect(lazyValue.get()).toBe('test');
+        expect(mock).toHaveBeenCalledTimes(1);
+    });
+});

package/lib/backend/services/buildJsonGraph.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildJsonGraph = buildJsonGraph;
+const graph_1 = require("@atlaspack/graph");
+const getDisplayName_1 = require("./getDisplayName");
+/**
+ * Build a simplified representation of a graph for a front-end to render.
+ *
+ * The graph is simplified by:
+ * - being a JSON serialisable object
+ * - filtering out unnecessary nodes
+ * - limiting the depth of nodes returned from the root
+ */
+function buildJsonGraph(graph, rootNodeId, filter = () => true, extra) {
+    const depths = new Map();
+    const rootNodeIndex = rootNodeId
+        ? graph.getNodeIdByContentKey(rootNodeId)
+        : graph.rootNodeId;
+    // build path from `graph.rootNodeId` node to `rootNodeId`
+    let path = null;
+    {
+        const stack = [];
+        const visited = new Set();
+        graph.dfs({
+            visit: {
+                enter(nodeId, context, actions) {
+                    stack.push(nodeId);
+                    visited.add(nodeId);
+                    if (nodeId === rootNodeIndex) {
+                        actions.stop();
+                        path = stack.slice();
+                    }
+                },
+                exit() {
+                    stack.pop();
+                },
+            },
+            getChildren: (nodeId) => {
+                return graph.getNodeIdsConnectedFrom(nodeId, graph_1.ALL_EDGE_TYPES);
+            },
+            startNodeId: graph.rootNodeId,
+        });
+    }
+    // Build depths of all nodes in the graph
+    {
+        const topologicalOrder = [];
+        graph.traverse({
+            exit(nodeId) {
+                topologicalOrder.push(nodeId);
+            },
+        }, rootNodeIndex, graph_1.ALL_EDGE_TYPES);
+        topologicalOrder.reverse();
+        for (let i = 0; i < topologicalOrder.length; i++) {
+            const nodeId = topologicalOrder[i];
+            const currentDepth = depths.get(nodeId) ?? 0;
+            const neighbors = graph.getNodeIdsConnectedFrom(nodeId, graph_1.ALL_EDGE_TYPES);
+            for (const other of neighbors) {
+                const increment = filter(graph.getNode(other)) ? 1 : 0;
+                depths.set(other, Math.max(currentDepth + increment, depths.get(other) ?? 0));
+            }
+        }
+    }
+    const allNodes = [];
+    graph.traverse((nodeId) => {
+        allNodes.push(nodeId);
+    }, rootNodeIndex, graph_1.ALL_EDGE_TYPES);
+    const maxDepth = 100;
+    return {
+        nodes: allNodes
+            .filter((nodeId) => (depths.get(nodeId) ?? 0) < maxDepth)
+            .filter((nodeId) => filter(graph.getNode(nodeId)))
+            .map((nodeId) => ({
+            id: graph.getNode(nodeId).id,
+            nodeId,
+            path: nodeId === rootNodeIndex
+                ? (path?.map((id) => graph.getNode(id).id) ?? null)
+                : null,
+            displayName: (0, getDisplayName_1.getDisplayName)(graph.getNode(nodeId)),
+            level: depths.get(nodeId) ?? 0,
+            edges: graph
+                .getNodeIdsConnectedFrom(nodeId, graph_1.ALL_EDGE_TYPES)
+                .map((nodeId) => graph.getNode(nodeId).id),
+            extra: extra ? extra(graph.getNode(nodeId)) : null,
+        })),
+    };
+}

package/lib/backend/services/buildTreemap.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWriteBundleRequestsByBundleId = getWriteBundleRequestsByBundleId;
+exports.buildTreemapBundle = buildTreemapBundle;
+exports.findBundleInfo = findBundleInfo;
+exports.buildTreemap = buildTreemap;
+// @ts-expect-error TS2749
+const RequestTracker_js_1 = require("@atlaspack/core/lib/RequestTracker.js");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const logger_1 = require("../config/logger");
+/**
+ * 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.
+ */
+function getWriteBundleRequestsByBundleId(requestTracker) {
+    const writeBundleRequests = requestTracker.graph.nodes.filter((requestNode) => requestNode &&
+        requestNode.type === 1 &&
+        requestNode.requestType === RequestTracker_js_1.requestTypes.write_bundle_request);
+    return new Map(writeBundleRequests.map((request) => [
+        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.
+ */
+function buildTreemapBundle({ writeBundleRequestsByBundleId, node, projectRoot, repositoryRoot, bundleGraph, }) {
+    const writeBundleRequest = writeBundleRequestsByBundleId.get(node.id);
+    const { size, filePath } = findBundleInfo({
+        writeBundleRequest,
+        projectRoot,
+        repositoryRoot,
+        node,
+    });
+    // this is the directory structure
+    const assetTree = {
+        id: `${node.id}::/`,
+        path: '',
+        children: {},
+        size: 0,
+    };
+    const assets = [];
+    bundleGraph.traverseAssets(node.value, (asset) => {
+        assets.push(asset);
+    });
+    for (const asset of assets) {
+        const filePath = path_1.default.isAbsolute(asset.filePath)
+            ? path_1.default.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.
+ */
+function findBundleInfo({ writeBundleRequest, projectRoot, repositoryRoot, node, }) {
+    let filePath = writeBundleRequest?.result?.filePath
+        ? path_1.default.isAbsolute(writeBundleRequest?.result?.filePath)
+            ? writeBundleRequest.result.filePath
+            : path_1.default.join(projectRoot, writeBundleRequest.result.filePath)
+        : null;
+    let size = 0;
+    try {
+        size = filePath ? fs_1.default.statSync(filePath).size : 0;
+    }
+    catch (e) {
+        logger_1.logger.error({ filePath, nodeId: node.id, error: e }, `Error getting size of bundle at ${filePath}`);
+    }
+    filePath = filePath
+        ? path_1.default.isAbsolute(filePath)
+            ? path_1.default.relative(repositoryRoot, filePath)
+            : filePath
+        : null;
+    return { size, filePath };
+}
+function buildTreemap({ projectRoot, repositoryRoot, bundleGraph, requestTracker, }) {
+    const treemap = {
+        bundles: [],
+        totalSize: 0,
+    };
+    const writeBundleRequestsByBundleId = getWriteBundleRequestsByBundleId(requestTracker);
+    bundleGraph._graph.nodes.forEach((node) => {
+        if (node.type === 'bundle') {
+            const treemapBundle = buildTreemapBundle({
+                writeBundleRequestsByBundleId,
+                node,
+                projectRoot,
+                repositoryRoot,
+                bundleGraph,
+            });
+            treemap.bundles.push(treemapBundle);
+            treemap.totalSize += treemapBundle.size;
+        }
+    });
+    return treemap;
+}