@atlaspack/inspector 0.0.19-canary.3998

package/lib/frontend/node_modules/@atlaspack/packager-js/lib/dev-prelude.js

@@ -0,0 +1,145 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+        ? self
+        : typeof window !== 'undefined'
+          ? window
+          : typeof global !== 'undefined'
+            ? global
+            : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        globalObject
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+});

package/lib/frontend/node_modules/@atlaspack/packager-js/src/dev-prelude.js

@@ -0,0 +1,145 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+        ? self
+        : typeof window !== 'undefined'
+          ? window
+          : typeof global !== 'undefined'
+            ? global
+            : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        globalObject
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+});

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@atlaspack/inspector",
+  "version": "0.0.19-canary.3998+35dd7a9e2",
+  "license": "(MIT OR Apache-2.0)",
+  "authors": [
+    "Pedro Tacla Yamada"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "yarn run build",
+    "build": "tsc --project . && cd .. && yarn workspace @atlaspack/inspector-frontend build",
+    "dev": "PINO_LEVEL=debug node --max-old-space-size=32768 --watch --require esbuild-register ./src/backend/cli.ts",
+    "docs": "npx typedoc --readme src/backend/README.md --entryPointStrategy Expand --out docs src/backend",
+    "lint": "oxlint",
+    "test": "yarn test:unit && yarn test:e2e",
+    "test:frontend": "yarn workspace @atlaspack/inspector-frontend test",
+    "test:unit": "jest ./src/backend",
+    "test:e2e": "yarn build && playwright test --update-snapshots missing ./test/e2e-tests/index.test.ts",
+    "test:e2e:debug": "playwright test ./test/e2e-tests/index.test.ts --debug"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atlassian-labs/atlaspack.git"
+  },
+  "bin": {
+    "atlaspack-inspector": "bin/atlaspack-inspector.js"
+  },
+  "main": "lib/backend/index.js",
+  "files": [
+    "bin",
+    "lib",
+    "src",
+    "README.md",
+    "screenshots",
+    "frontend/dist"
+  ],
+  "dependencies": {
+    "@atlaspack/build-cache": "2.13.5",
+    "@atlaspack/cache": "3.2.21",
+    "@atlaspack/cli": "2.14.4",
+    "@atlaspack/core": "2.23.2",
+    "@atlaspack/feature-flags": "2.23.1",
+    "@modelcontextprotocol/sdk": "^1.13.0",
+    "commander": "^7.0.0",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "pino": "^9.7.0",
+    "pino-http": "^10.5.0",
+    "pino-pretty": "^13.0.0",
+    "supertest": "^7.1.1",
+    "zod": "^3"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.50.0",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^4.17.21",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.13.10",
+    "@types/sinon": "^17.0.4",
+    "@types/supertest": "^6.0.3",
+    "esbuild": "^0.25.5",
+    "esbuild-register": "^3.6.0",
+    "jest": "^30.0.0",
+    "oxlint": "^1.2.0",
+    "path-browserify": "^1.0.0",
+    "playwright": "1.50.0",
+    "prettier": "^3.5.3",
+    "sinon": "^20.0.0",
+    "ts-jest": "^29.3.4",
+    "typescript": "^5.8.3"
+  },
+  "gitHead": "35dd7a9e2b9c0817ef370addc55d0e91531b0722"
+}

package/src/backend/README.md

@@ -0,0 +1,14 @@
+API and HTTP server for `@atlaspack/inspector`.
+
+Uses:
+
+- `express`
+- `pino`
+- `@atlaspack/core`
+- `@atlaspack/query`
+- `@atlaspack/graph`
+
+Exposes data from the `atlaspack` cache through a HTTP API.
+
+Serves the front-end when in production mode. The front-end is bundled and published
+with this package.

package/src/backend/cli.ts

@@ -0,0 +1,3 @@
+import {main} from './index';
+
+main();

package/src/backend/config/logger.ts

@@ -0,0 +1,14 @@
+import pino from 'pino';
+import pinoPretty from 'pino-pretty';
+
+/**
+ * Pino is used for logging.
+ *
+ * - https://github.com/pinojs/pino
+ */
+export const logger = pino(
+  {
+    level: process.env.PINO_LEVEL ?? 'info',
+  },
+  pinoPretty(),
+);

package/src/backend/config/middleware/cacheDataMiddleware.ts

@@ -0,0 +1,94 @@
+/* eslint-disable monorepo/no-internal-import */
+import {Request, Response, NextFunction} from 'express';
+import {CacheData} from '../../services/loadCacheData';
+import {HTTPError} from '../../errors/HTTPError';
+// @ts-expect-error TS2749
+import BundleGraph from '@atlaspack/core/lib/BundleGraph.js';
+import {Treemap} from '../../services/buildTreemap';
+// @ts-expect-error TS2749
+import RequestTracker from '@atlaspack/core/lib/RequestTracker.js';
+// @ts-expect-error TS2749
+import AssetGraph from '@atlaspack/core/lib/AssetGraph.js';
+import {LMDBLiteCache} from '@atlaspack/cache';
+
+export function getCacheDataKey<K extends keyof CacheData>(
+  res: Response,
+  key: K,
+  missingKeyError?: string,
+): NonNullable<CacheData[K]> {
+  const cacheData: CacheData = res.locals.cacheData;
+  if (!cacheData[key]) {
+    throw new HTTPError(missingKeyError ?? `${key} not found`, 500);
+  }
+  return cacheData[key];
+}
+
+export const getCache = (res: Response): LMDBLiteCache =>
+  getCacheDataKey(res, 'cache');
+
+let missingErrorHelp = `
+Please make sure to run "atlaspack build --feature-flag cachePerformanceImprovements=true" before running the inspector.
+Or your application's build command.
+`.trim();
+
+export const getBundleGraph = (res: Response): BundleGraph =>
+  getCacheDataKey(
+    res,
+    'bundleGraph',
+    `
+BundleGraph not found in cache. The bundle graph is the data structure that contains all the information about the
+bundles in the application.
+
+This could happen if you are trying to run the inspector against a cache which has no builds or where a build terminated
+with errors before bundling.
+
+${missingErrorHelp}`.trim(),
+  );
+
+export const getTreemap = (res: Response): Treemap =>
+  getCacheDataKey(
+    res,
+    'treemap',
+    `
+Treemap not found in cache. The treemap data can only be generated if the cache contains a bundle graph and request tracker.
+
+This could happen if you are trying to run the inspector against a cache which has no builds or where a build terminated
+with errors before writing the cache or finishing bundling.
+
+${missingErrorHelp}`.trim(),
+  );
+
+export const getRequestTracker = (res: Response): RequestTracker =>
+  getCacheDataKey(
+    res,
+    'requestTracker',
+    `
+RequestTracker not found in cache. The request tracker is the data structure that contains all the information about the
+build tasks made during the build.
+
+This could happen if you are trying to run the inspector against a cache which has no builds or where a build terminated
+with errors before writing the cache.
+
+${missingErrorHelp}`.trim(),
+  );
+
+export const getAssetGraph = (res: Response): AssetGraph =>
+  getCacheDataKey(
+    res,
+    'assetGraph',
+    `
+AssetGraph not found in cache. The asset graph is the data structure that contains all the information about the
+assets in the application.
+
+This could happen if you are trying to run the inspector against a cache which has no builds or where a build terminated
+with errors before transforming and resolving assets.
+
+${missingErrorHelp}`.trim(),
+  );
+
+export function cacheDataMiddleware(cacheData: Promise<CacheData>) {
+  return async (_req: Request, res: Response, next: NextFunction) => {
+    res.locals.cacheData = await cacheData;
+    next();
+  };
+}

package/src/backend/config/middleware/errorHandlingMiddleware.test.ts

@@ -0,0 +1,52 @@
+import assert from 'assert';
+import express from 'express';
+import request from 'supertest';
+import {errorHandlingMiddleware} from './errorHandlingMiddleware';
+import {HTTPError} from '../../errors/HTTPError';
+
+jest.mock('../logger');
+
+describe('errorHandlingMiddleware integration', function () {
+  let app: express.Express;
+
+  beforeEach(() => {
+    app = express();
+
+    // Add test routes that throw errors
+    app.get('/http-error', (req, res, next) => {
+      next(new HTTPError('Custom not found', 404));
+    });
+
+    app.get('/server-error', (req, res, next) => {
+      next(new Error('Something went wrong'));
+    });
+
+    app.get('/bad-request', (req, res, next) => {
+      next(new HTTPError('Bad request error', 400));
+    });
+
+    // Add error handling middleware
+    app.use(errorHandlingMiddleware);
+  });
+
+  it('should handle HTTPError with custom status and message', async () => {
+    const response = await request(app).get('/http-error').expect(404);
+
+    assert.deepEqual(response.body, {error: 'Custom not found', status: 404});
+  });
+
+  it('should handle regular Error as 500 internal server error', async () => {
+    const response = await request(app).get('/server-error').expect(500);
+
+    assert.deepEqual(response.body, {
+      error: 'Internal server error',
+      status: 500,
+    });
+  });
+
+  it('should handle different HTTPError status codes', async () => {
+    const response = await request(app).get('/bad-request').expect(400);
+
+    assert.deepEqual(response.body, {error: 'Bad request error', status: 400});
+  });
+});

package/src/backend/config/middleware/errorHandlingMiddleware.ts

@@ -0,0 +1,20 @@
+import {NextFunction, Request, Response} from 'express';
+import {HTTPError} from '../../errors/HTTPError';
+import {logger} from '../logger';
+
+/**
+ * A middleware that sets status codes for {@link HTTPError} instances.
+ */
+export function errorHandlingMiddleware(
+  err: Error,
+  _req: Request,
+  res: Response,
+  _next: NextFunction,
+) {
+  if (err instanceof HTTPError) {
+    res.status(err.status).json({error: err.message, status: err.status});
+  } else {
+    logger.error(err, 'Internal server error');
+    res.status(500).json({error: 'Internal server error', status: 500});
+  }
+}

package/src/backend/config/middleware/loggingMiddleware.ts

@@ -0,0 +1,24 @@
+import {logger} from '../logger';
+import {Request, Response, RequestHandler, NextFunction} from 'express';
+
+/**
+ * Log HTTP status codes and durations with `pino`.
+ */
+export function loggingMiddleware(): RequestHandler {
+  return (req: Request, res: Response, next: NextFunction) => {
+    const start = Date.now();
+    next();
+    res.on('finish', () => {
+      const duration = Date.now() - start;
+      logger.debug(
+        {
+          method: req.method,
+          statusCode: res.statusCode,
+          url: req.url,
+          duration,
+        },
+        `[${res.statusCode}] ${req.method} ${req.url} ${duration}ms`,
+      );
+    });
+  };
+}

package/src/backend/controllers/BundleGraphController.ts

@@ -0,0 +1,73 @@
+/* eslint-disable monorepo/no-internal-import */
+import {Router} from 'express';
+// @ts-expect-error TS2749
+import {Node} from '@atlaspack/core/lib/types.js';
+
+import {buildJsonGraph} from '../services/buildJsonGraph';
+import {
+  getBundleGraph,
+  getRequestTracker,
+} from '../config/middleware/cacheDataMiddleware';
+import {
+  findBundleInfo,
+  getWriteBundleRequestsByBundleId,
+} from '../services/buildTreemap';
+
+export interface BundleGraphControllerParams {
+  projectRoot: string;
+  repositoryRoot: string;
+}
+
+export function makeBundleGraphController({
+  projectRoot,
+  repositoryRoot,
+}: BundleGraphControllerParams): Router {
+  const router = Router();
+
+  router.get('/api/bundle-graph', (req, res) => {
+    const bundleGraph = getBundleGraph(res);
+    const requestTracker = getRequestTracker(res);
+
+    const writeBundleRequestsByBundleId =
+      getWriteBundleRequestsByBundleId(requestTracker);
+
+    const jsonGraph = buildJsonGraph(
+      bundleGraph._graph,
+      typeof req.query.rootNodeId === 'string' ? req.query.rootNodeId : null,
+      (node: Node) => node.type !== 'asset' && node.type !== 'dependency',
+      (node: Node) => {
+        const writeBundleRequest = writeBundleRequestsByBundleId.get(node.id);
+        const {size, filePath} = findBundleInfo({
+          writeBundleRequest,
+          projectRoot,
+          repositoryRoot,
+          node,
+        });
+        return {
+          size,
+          filePath,
+        };
+      },
+    );
+
+    res.json(jsonGraph);
+  });
+
+  router.get('/api/bundle-graph/related-bundles', (req, res) => {
+    const bundleGraph = getBundleGraph(res);
+    const bundleId = req.query.bundle as string;
+
+    const bundle = bundleGraph._graph.getNode(
+      bundleGraph._graph.getNodeIdByContentKey(bundleId),
+    );
+    const childBundles = bundleGraph.getChildBundles(bundle).map((b: any) => ({
+      id: b.id,
+    }));
+
+    res.json({
+      childBundles,
+    });
+  });
+
+  return router;
+}