Bundle Analyzer

Copyconst potentialEntryDependents = [
  'next/dist/esm/build/templates/pages.js',
  'next/dist/esm/build/templates/pages-api.js',
  'next/dist/esm/build/templates/pages-edge-api.js',
  'next/dist/esm/build/templates/edge-ssr.js',
  'next/dist/esm/build/templates/app-route.js',
  'next/dist/esm/build/templates/edge-app-route.js',
  'next/dist/esm/build/templates/app-page.js',
  'next/dist/esm/build/templates/edge-ssr-app.js',
  'next/dist/esm/build/templates/middleware.js',
  '[next]/entry/page-loader.ts',
]

Copyexport enum SizeMode {
  Compressed = 'compressed',
  Uncompressed = 'uncompressed',
}

Copy// Count all descendant files
function countDescendants(idx: SourceIndex): number {
  const children = analyzeData.sourceChildren(idx)
  if (children.length === 0) return 1
  return children.reduce(
    (sum, childIdx) => sum + countDescendants(childIdx),
    0
  )
}

Copyfunction getFileColor(
  node: {
    js?: boolean
    css?: boolean
    json?: boolean
    asset?: boolean
    server?: boolean
    client?: boolean
    traced?: boolean
    specialModuleType: SpecialModule | null
  },
  colors: CanvasColors
): string {
  const { js, css, json, asset, client, traced, specialModuleType } = node
 
  if (isPolyfill(specialModuleType)) {
    return colors.polyfill
  }
 
  let color = '#9ca3af' // gray-400 default
  if (js) color = '#4682b4'
  if (css) color = '#8b7d9e'
  if (json) color = '#297a3a'
  if (asset) color = '#da2f35'
 
  if (!client) {
    // Make it darker for server (30% darker)
    color = darken(0.3, color)
 
    if (traced) {
      // Make it slightly lighter (15% lighter than darkened)
      color = lighten(0.15, color)
    }
  }
  return color
}

Copyfunction findNodeAtPosition(
  node: LayoutNode,
  x: number,
  y: number
): LayoutNode | null {
  const { rect } = node
 
  // Check if point is within this node's bounds
  if (
    x < rect.x ||
    x > rect.x + rect.width ||
    y < rect.y ||
    y > rect.y + rect.height
  ) {
    return null
  }
 
  if (node.type === 'collapsed-directory') {
    return node
  }
 
  // For regular directories, check if we're in the title bar first
  if (node.type === 'directory') {
    const titleBarHeight = node.titleBarHeight || 0
    if (y >= rect.y && y <= rect.y + titleBarHeight) {
      return node // Clicked on title bar
    }
  }
 
  // Check children (if any)
  if (node.children) {
    for (const child of node.children) {
      const found = findNodeAtPosition(child, x, y)
      if (found) return found
    }
  }
 
  return node
}

Copy{selectedSource && !hasChildModules && (
  <>
    <ImportChain
      startFileId={selectedSourceIndex}
      analyzeData={analyzeData}
      modulesData={modulesData}
      depthMap={moduleDepthMap}
      environmentFilter={environmentFilter}
    />
    {chunks.length > 0 ? (
      <div className="mt-2">
        <p className="text-xs font-semibold text-foreground">
          Output Chunks
        </p>
        <ul className="text-xs text-muted-foreground font-mono mt-1 space-y-1">
          {chunks.map((chunk) => (
            <li key={chunk} className="break-all">
              {chunk}
            </li>
          ))}
        </ul>
      </div>
    ) : null}
  </>
)}

Copyexport function ImportChain({
  startFileId,
  analyzeData,
  modulesData,
  depthMap,
  environmentFilter,
}: ImportChainProps) {
  // Filter to include only the current route
  const [currentRouteOnly, setCurrentRouteOnly] = useState(true)
 
  // Track which dependent is selected at each level
  const [selectedIndices, setSelectedIndices] = useState<number[]>([])
 
  const chain = buildImportChain(
    startFileId,
    analyzeData,
    modulesData,
    depthMap,
    environmentFilter,
    selectedIndices,
    currentRouteOnly
  )
 
  const handlePrevious = (levelIndex: number) => {
    setSelectedIndices((prev) => {
      const newIndices = [...prev]
      const currentIdx = newIndices[levelIndex] ?? 0
      const level = chain[levelIndex]
      newIndices[levelIndex] =
        currentIdx > 0 ? currentIdx - 1 : level.totalCount - 1
      return newIndices.slice(0, levelIndex + 1)
    })
  }
 
  const handleNext = (levelIndex: number) => {
    setSelectedIndices((prev) => {
      const newIndices = [...prev]
      const currentIdx = newIndices[levelIndex] ?? 0
      const level = chain[levelIndex]
      newIndices[levelIndex] =
        currentIdx < level.totalCount - 1 ? currentIdx + 1 : 0
      return newIndices.slice(0, levelIndex + 1)
    })
  }

Copyfunction collectLeaves(
  side: 'A' | 'B',
  data: AnalyzeData,
  options: SourceDiffOptions
): Map<string, LeafEntry> {
  const out = new Map<string, LeafEntry>()
  const count = data.sourceCount()
  for (let i = 0; i < count; i++) {
    // Only include leaf sources (real files, not directory aggregations).
    if (data.sourceChildren(i).length > 0) continue
    if (options.filterSource && !options.filterSource(side, i)) continue
    const fullPath = data.getFullSourcePath(i)
    if (!fullPath) continue
    const own = data.getOwnSizes(i)
    // Skip empty contributions — they aren't really "in" the bundle.
    if (own.size === 0 && own.compressedSize === 0) continue
    const flags = data.getSourceFlags(i)
    out.set(fullPath, {
      index: i,
      size: own.size,
      compressedSize: own.compressedSize,
      client: flags.client,
      server: flags.server,
    })
  }
  return out
}
 
/**
 * Diffs every source between two analyze datasets, joining by full source
 * path (stable across builds modulo file moves).
 *
 * Directories (sources with children) are excluded — only leaf "files" appear
 * in the resulting rows. Their own size is the sum of their {@link
 * AnalyzeData.sourceChunkParts} contributions.
 */
export function diffSources(
  analyzeA: AnalyzeData | null,
  analyzeB: AnalyzeData | null,
  options: SourceDiffOptions = {}
): DiffSummary<SourceDiffRow> {
  const summary = emptySummary<SourceDiffRow>()
 
  const leavesA = analyzeA
    ? collectLeaves('A', analyzeA, options)
    : new Map<string, LeafEntry>()
  const leavesB = analyzeB
    ? collectLeaves('B', analyzeB, options)
    : new Map<string, LeafEntry>()
 
  const allKeys = new Set<string>([...leavesA.keys(), ...leavesB.keys()])
  for (const key of allKeys) {
    const a = leavesA.get(key)
    const b = leavesB.get(key)
    const pretty = prettifySourcePath(key)
    pushRow(summary, {
      key,
      name: pretty.display,
      status: statusFor(
        a?.size ?? 0,
        b?.size ?? 0,
        a !== undefined,
        b !== undefined
      ),
      sizeA: a?.size ?? 0,
      sizeB: b?.size ?? 0,
      compressedA: a?.compressedSize ?? 0,
      compressedB: b?.compressedSize ?? 0,
      sourceIndexA: a?.index ?? null,
      sourceIndexB: b?.index ?? null,
      pathKind: pretty.kind,
      packageName: pretty.packageName,
      // OR-merge env flags across both sides so the badge reflects the
      // row's overall environment(s). A source that's client-only in A
      // and removed in B is still "client" for the purpose of the row.
      client: (a?.client ?? false) || (b?.client ?? false),
      server: (a?.server ?? false) || (b?.server ?? false),
    })
  }
 

Copyexport function createDiffTreemapLayout(
  rows: SourceDiffRow[],
  useCompressed: boolean
): DiffTreemapLayout {
  let nextIndex = 0
  const root: DiffTreeNode = {
    index: nextIndex++,
    name: 'All Changed Modules',
    parentIndex: null,
    size: 0,
    children: [],
  }
  const nodeByIndex = new Map<number, DiffTreeNode>([[root.index, root]])
  const directoryByPath = new Map<string, DiffTreeNode>([['', root]])
  const rowBySourceIndex = new Map<number, SourceDiffRow>()
  const sourceIndexByKey = new Map<string, number>()
 
  for (const row of rows) {
    const change = delta(row, useCompressed)
    if (change === 0) continue
 
    const parts = isNextBuildOutput(row.key)
      ? ['Unattributed output', getBasename(row.key)]
      : row.key.split('/').filter(Boolean)
    let parent = root
    let directoryPath = ''
 
    for (const part of parts.slice(0, -1)) {
      directoryPath += `/${part}`
      let directory = directoryByPath.get(directoryPath)
      if (!directory) {
        directory = {
          index: nextIndex++,
          name: `${part}/`,
          parentIndex: parent.index,
          size: 0,
          children: [],
        }
        parent.children.push(directory)
        directoryByPath.set(directoryPath, directory)
        nodeByIndex.set(directory.index, directory)
      }
      parent = directory
    }
 
    const leaf: DiffTreeNode = {
      index: nextIndex++,
      name: parts.at(-1) ?? row.name,
      parentIndex: parent.index,
      size: Math.abs(change),
      row,
      children: [],
    }
    parent.children.push(leaf)
    nodeByIndex.set(leaf.index, leaf)
    rowBySourceIndex.set(leaf.index, row)
    sourceIndexByKey.set(row.key, leaf.index)
  }

Copyfunction aggregateSize(node: DiffTreeNode): number {
  if (node.row) return node.size
  node.size = node.children.reduce(
    (total, child) => total + aggregateSize(child),
    0
  )
  return node.size
}
aggregateSize(root)
 
function computeLayout(node: DiffTreeNode, rect: LayoutRect): LayoutNode {
  if (node.row) {
    return {
      name: node.name,
      size: node.size,
      type: 'file',
      rect,
      sourceIndex: node.index,
      specialModuleType: null,
      client: node.row.client,
      server: node.row.server,
    }
  }
 
  const titleBarHeight = Math.round(
    Math.max(12, Math.min(24, rect.height * 0.1))
  )
  const isCollapsed = rect.height < 30
  if (isCollapsed) {
    return {
      name: node.name,
      size: node.size,
      type: 'collapsed-directory',
      rect,
      titleBarHeight,
      children: [],
      itemCount: countLeaves(node),
      sourceIndex: node.index,
      specialModuleType: null,
    }
  }
 
  const contentRect: LayoutRect = {
    x: Math.round(rect.x),
    y: Math.round(rect.y + titleBarHeight),
    width: Math.max(0, Math.round(rect.width - 2)),
    height: Math.max(0, Math.round(rect.height - titleBarHeight - 2)),
  }
  const children = [...node.children].sort((a, b) => b.size - a.size)
  const childRects = layoutTreemap(
    children.map((child) => child.size),
    contentRect
  )
 
  return {
    name: node.name,
    size: node.size,
    type: 'directory',
    rect,
    titleBarHeight,
    children: children.map((child, index) =>
      computeLayout(child, childRects[index])
    ),
    sourceIndex: node.index,
    specialModuleType: null,
  }
}

Copy  const diffLayout = useMemo(
    () => createDiffTreemapLayout(summary.rows, useCompressed),
    [summary.rows, useCompressed]
  )
  const { rowBySourceIndex, sourceIndexByKey } = diffLayout
 
  function getFileColorOverride(
    node: LayoutNode,
    colors: CanvasColors
  ): string | undefined {
    if (node.sourceIndex === undefined) return undefined
    const row = rowBySourceIndex.get(node.sourceIndex)
    return row ? colorForRow(row, useCompressed, colors) : undefined
  }
 
  // Show size deltas on changed tiles instead of absolute sizes.
  function getFileSizeLabel(node: LayoutNode): string | undefined {
    if (node.sourceIndex === undefined) return undefined
    const row = rowBySourceIndex.get(node.sourceIndex)
    if (!row || row.status === 'identical') return undefined
    return formatDelta(delta(row, useCompressed))
  }
 
  // Focus state stays local: it controls drill-in/zoom, which is purely a
  // visual concern of the treemap and shouldn't affect the sidebar.
  const initialRoot = diffLayout.rootIndex
  const [focusedSourceIndex, setFocusedSourceIndex] =
    useState<number>(initialRoot)
 
  // Translate selection into the synthetic tree's index. If the selected
  // path has no size delta, fall back to the root of changed files.
  const selectedSourceIndex =
    (selectedKey != null ? sourceIndexByKey.get(selectedKey) : undefined) ??
    initialRoot
 
  const handleSelectSourceIndex = (idx: number) => {
    if (!onSelectKey) return
    const row = rowBySourceIndex.get(idx)
    onSelectKey(row?.key ?? null)
  }
 
  if (!data) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        No data for this route.
      </div>
    )
  }
 
  return (
    <TreemapVisualizer
      source={diffLayout}
      selectedSourceIndex={selectedSourceIndex}
      onSelectSourceIndex={handleSelectSourceIndex}
      focusedSourceIndex={focusedSourceIndex}
      onFocusSourceIndex={setFocusedSourceIndex}
      getFileSizeLabel={getFileSizeLabel}
      sizeMode={useCompressed ? SizeMode.Compressed : SizeMode.Uncompressed}
      getFileColorOverride={getFileColorOverride}
      searchQuery={searchQuery}
      overlay={<DiffLegend />}
    />
  )
}
 
/**
 * Picks a fill color for a diff row. Mirrors the previous DiffTreemap's
 * scheme: bright blue/amber for added/removed and lighter tints scaled by the
 * relative magnitude of the change for grew/shrank.
 */
function colorForRow(
  row: SourceDiffRow,
  useCompressed: boolean,
  colors: CanvasColors
): string {
  if (row.status === 'added') return colors.increase
  if (row.status === 'removed') return colors.decrease
  const deltaValue = useCompressed
    ? row.compressedB - row.compressedA
    : row.sizeB - row.sizeA