@mtharrison/pkg-profiler 2.1.0 → 2.2.0

package/src/dep-chain.ts

@@ -0,0 +1,111 @@
+/**
+ * Resolve dependency chains for transitive npm packages.
+ *
+ * BFS through node_modules package.json files starting from the project's
+ * direct dependencies to find the shortest path to each profiled package.
+ */
+
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+interface PkgJson {
+  dependencies?: Record<string, string>;
+  optionalDependencies?: Record<string, string>;
+}
+
+function readPkgJson(dir: string, cache: Map<string, PkgJson | null>): PkgJson | null {
+  if (cache.has(dir)) return cache.get(dir)!;
+  try {
+    const raw = readFileSync(join(dir, 'package.json'), 'utf-8');
+    const parsed = JSON.parse(raw) as PkgJson;
+    cache.set(dir, parsed);
+    return parsed;
+  } catch {
+    cache.set(dir, null);
+    return null;
+  }
+}
+
+function depsOf(pkg: PkgJson): string[] {
+  return [
+    ...Object.keys(pkg.dependencies ?? {}),
+    ...Object.keys(pkg.optionalDependencies ?? {}),
+  ];
+}
+
+/**
+ * Resolve the shortest dependency chain from the project's direct deps
+ * to each of the given package names.
+ *
+ * @param projectRoot - Absolute path to the project root (contains package.json and node_modules/)
+ * @param packageNames - Set of package names that appeared in profiling data
+ * @param maxDepth - Maximum BFS depth to search (default 5)
+ * @returns Map from package name to chain array (e.g. `["express", "qs"]` means project -> express -> qs)
+ */
+export function resolveDependencyChains(
+  projectRoot: string,
+  packageNames: Set<string>,
+  maxDepth: number = 5,
+): Map<string, string[]> {
+  const result = new Map<string, string[]>();
+  const cache = new Map<string, PkgJson | null>();
+
+  const rootPkg = readPkgJson(projectRoot, cache);
+  if (!rootPkg) return result;
+
+  const directDeps = new Set(depsOf(rootPkg));
+
+  // Mark direct deps — they have no chain
+  for (const name of packageNames) {
+    if (directDeps.has(name)) {
+      // Direct dep: no chain needed (empty array signals "direct")
+    }
+  }
+
+  // Only need to resolve transitive deps
+  const targets = new Set<string>();
+  for (const name of packageNames) {
+    if (!directDeps.has(name)) {
+      targets.add(name);
+    }
+  }
+
+  if (targets.size === 0) return result;
+
+  // BFS: queue entries are [packageName, chain-so-far]
+  const visited = new Set<string>();
+  const queue: Array<[string, string[]]> = [];
+
+  for (const dep of directDeps) {
+    queue.push([dep, [dep]]);
+    visited.add(dep);
+  }
+
+  let qi = 0;
+  while (qi < queue.length && targets.size > 0) {
+    const [pkgName, chain] = queue[qi++]!;
+
+    if (chain.length > maxDepth) continue;
+
+    // If this package is one of our targets, record the chain (excluding the target itself)
+    if (targets.has(pkgName)) {
+      result.set(pkgName, chain.slice(0, -1));
+      targets.delete(pkgName);
+      if (targets.size === 0) break;
+    }
+
+    // Read this package's deps and enqueue
+    const pkgDir = join(projectRoot, 'node_modules', pkgName);
+    const pkg = readPkgJson(pkgDir, cache);
+    if (!pkg) continue;
+
+    for (const child of depsOf(pkg)) {
+      if (!visited.has(child)) {
+        visited.add(child);
+        queue.push([child, [...chain, child]]);
+      }
+    }
+  }
+
+  return result;
+}

package/src/reporter/aggregate.ts

@@ -13,6 +13,7 @@ import type {
   FileEntry,
   FunctionEntry,
 } from '../types.js';
+import { resolveDependencyChains } from '../dep-chain.js';
 
 /**
  * Sum all microseconds in a SampleStore.
@@ -37,7 +38,7 @@ function sumStore(store: SampleStore): number {
  * @param asyncStore - Optional SampleStore with async wait time data
  * @returns ReportData with all packages sorted desc by time, no threshold applied
  */
-export function aggregate(store: SampleStore, projectName: string, asyncStore?: SampleStore, globalAsyncTimeUs?: number, wallTimeUs?: number): ReportData {
+export function aggregate(store: SampleStore, projectName: string, asyncStore?: SampleStore, globalAsyncTimeUs?: number, wallTimeUs?: number, projectRoot?: string): ReportData {
   // 1. Calculate total user-attributed time
   const totalTimeUs = sumStore(store);
   // Per-entry percentages use the raw sum so they add up to 100%
@@ -232,6 +233,22 @@ export function aggregate(store: SampleStore, projectName: string, asyncStore?:
     packages.push(pkgEntry);
   }
 
+  // Resolve dependency chains for non-first-party packages
+  if (projectRoot) {
+    const thirdPartyNames = new Set(
+      packages.filter(p => !p.isFirstParty).map(p => p.name),
+    );
+    if (thirdPartyNames.size > 0) {
+      const chains = resolveDependencyChains(projectRoot, thirdPartyNames);
+      for (const pkg of packages) {
+        const chain = chains.get(pkg.name);
+        if (chain && chain.length > 0) {
+          pkg.depChain = chain;
+        }
+      }
+    }
+  }
+
   // Sort packages by timeUs descending
   packages.sort((a, b) => b.timeUs - a.timeUs);
 

package/src/reporter/html.ts

@@ -9,6 +9,11 @@
 import type { ReportData, PackageEntry, FileEntry } from '../types.js';
 import { formatTime, formatPct, escapeHtml } from './format.js';
 
+function formatDepChain(depChain: string[] | undefined): string {
+  if (!depChain || depChain.length === 0) return '';
+  return `<span class="dep-chain">via ${depChain.map(n => escapeHtml(n)).join(' &gt; ')}</span>`;
+}
+
 function generateCss(): string {
   return `
     :root {
@@ -152,6 +157,7 @@ function generateCss(): string {
     }
 
     td.pkg-name { font-family: var(--font-mono); font-size: 0.85rem; }
+    .dep-chain { display: block; font-size: 0.7rem; color: var(--muted); font-family: var(--font-sans); }
     td.numeric { text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }
     td.async-col { color: var(--bar-fill-async); }
 
@@ -381,6 +387,11 @@ function generateJs(): string {
       .replace(/'/g, '&#39;');
   }
 
+  function depChainHtml(depChain) {
+    if (!depChain || depChain.length === 0) return '';
+    return '<span class="dep-chain">via ' + depChain.map(function(n) { return escapeHtml(n); }).join(' &gt; ') + '</span>';
+  }
+
   var sortBy = 'cpu';
 
   function metricTime(entry) {
@@ -451,6 +462,7 @@ function generateJs(): string {
         pct: pkg.pct,
         isFirstParty: pkg.isFirstParty,
         sampleCount: pkg.sampleCount,
+        depChain: pkg.depChain,
         asyncTimeUs: pkg.asyncTimeUs,
         asyncPct: pkg.asyncPct,
         asyncOpCount: pkg.asyncOpCount,
@@ -472,7 +484,7 @@ function generateJs(): string {
       var barVal = isAsync ? (pkg.asyncTimeUs || 0) : pkg.timeUs;
       var pctVal = barTotal > 0 ? (barVal / barTotal) * 100 : 0;
       rows += '<tr class="' + cls + '">' +
-        '<td class="pkg-name">' + escapeHtml(pkg.name) + '</td>' +
+        '<td class="pkg-name">' + escapeHtml(pkg.name) + depChainHtml(pkg.depChain) + '</td>' +
         '<td class="numeric">' + escapeHtml(formatTime(pkg.timeUs)) + '</td>' +
         '<td class="bar-cell"><div class="bar-container">' +
           '<div class="bar-track"><div class="bar-fill" style="width:' + pctVal.toFixed(1) + '%"></div></div>' +
@@ -526,6 +538,7 @@ function generateJs(): string {
       html += '<details class="level-0' + fpCls + '"><summary>';
       html += '<span class="tree-label pkg">pkg</span>';
       html += '<span class="tree-name">' + escapeHtml(pkg.name) + '</span>';
+      html += depChainHtml(pkg.depChain);
       html += '<span class="tree-stats">' + escapeHtml(formatTime(pkgTime)) + ' &middot; ' + escapeHtml(formatPct(pkgTime, pctTotal)) + ' &middot; ' + pkg.sampleCount + ' samples</span>';
       html += asyncStats(pkg);
       html += '</summary>';
@@ -633,7 +646,7 @@ function renderSummaryTable(
     const pctVal = totalTimeUs > 0 ? (pkg.timeUs / totalTimeUs) * 100 : 0;
     rows += `
       <tr class="${cls}">
-        <td class="pkg-name">${escapeHtml(pkg.name)}</td>
+        <td class="pkg-name">${escapeHtml(pkg.name)}${formatDepChain(pkg.depChain)}</td>
         <td class="numeric">${escapeHtml(formatTime(pkg.timeUs))}</td>
         <td class="bar-cell">
           <div class="bar-container">
@@ -697,6 +710,7 @@ function renderTree(
     html += `<summary>`;
     html += `<span class="tree-label pkg">pkg</span>`;
     html += `<span class="tree-name">${escapeHtml(pkg.name)}</span>`;
+    html += formatDepChain(pkg.depChain);
     html += `<span class="tree-stats">${escapeHtml(formatTime(pkg.timeUs))} &middot; ${escapeHtml(formatPct(pkg.timeUs, totalTimeUs))} &middot; ${pkg.sampleCount} samples</span>`;
     if (hasAsync) html += formatAsyncStats(pkg);
     html += `</summary>`;

package/src/sampler.ts

@@ -103,13 +103,15 @@ function stopSync(): PkgProfile {
 
   processProfile(profile);
 
-  const projectName = readProjectName(process.cwd());
+  const cwd = process.cwd();
+  const projectName = readProjectName(cwd);
   const data = aggregate(
     store,
     projectName,
     asyncStore.packages.size > 0 ? asyncStore : undefined,
     globalAsyncTimeUs,
     wallTimeUs,
+    cwd,
   );
   store.clear();
   asyncStore.clear();

package/src/types.ts

@@ -41,6 +41,7 @@ export interface FileEntry extends ReportEntry {
 
 export interface PackageEntry extends ReportEntry {
   isFirstParty: boolean;
+  depChain?: string[];
   files: FileEntry[];
   otherCount: number;
 }