feat: add module and chunk graph visualization to REPL

[Copilot]

Adds Mermaid-based graph visualization to visualize module dependencies and chunk composition during bundling.

Implementation

Graph extraction via plugin

const moduleGraphPlugin = {
  name: 'collect-module-graph',
  buildEnd() {
    const moduleIds = this.getModuleIds()
    for (const id of moduleIds) {
      const info = this.getModuleInfo(id)
      moduleInfoMap.set(id, {
        importedIds: info.importedIds,
        dynamicallyImportedIds: info.dynamicallyImportedIds,
        importers: info.importers,
        dynamicImporters: info.dynamicImporters,
        isEntry: info.isEntry,
      })
    }
  }
}

Components

• GraphContainer.vue - Renders Mermaid flowcharts with Module/Chunk tabs
• OutputView.vue - Adds Output/Graph tab switcher
• graph-mermaid.ts - Generates Mermaid syntax from graph data

Mermaid integration

• Dynamic import from npm (mermaid@11.12.2) for code splitting
• Modern node syntax: note@{ shape: notch-rect, label: "..." }
• Line breaks via <br/> tags

Visualization features

• Module graph: Shows import relationships with solid arrows (static) and dashed arrows (dynamic)
• Chunk graph: Shows composition with module counts
• Color coding: Entry modules/chunks (green), dynamic entries (orange)

Dependencies

• Added langium@3.3.1 to trustPolicyExclude in pnpm-workspace.yaml

Screenshots

Module Graph:

Chunk Graph:

Original prompt

add a panel to visualize the input module graph and the output chunk graph

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[netlify]

✅ Deploy Preview for rolldown-repl ready!

Name	Link
🔨 Latest commit	da3f770
🔍 Latest deploy log	https://app.netlify.com/projects/rolldown-repl/deploys/69849f3445c56e00088e4e1f
😎 Deploy Preview	https://deploy-preview-38--rolldown-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sapphi-red]

@copilot we should have the arrows between the input modules. static imports should be a normal arrow and dynamic imports should be a dotted arrow.

[Copilot]

@copilot we should have the arrows between the input modules. static imports should be a normal arrow and dynamic imports should be a dotted arrow.

Added module import relationships to the graph visualization. The implementation now uses a plugin in the buildEnd hook to collect module information via getModuleInfo(), which includes importedIds and dynamicallyImportedIds for each module.

The module graph now displays:

• Solid arrows (-->) for static imports
• Dashed arrows (-.->) for dynamic imports

Commit: aeb4a33

[sapphi-red]

Example: https://deploy-preview-38--rolldown-repl.netlify.app/#eNptj80OgyAQhF/F7MU2Qaq2J5q+iRdFTNr4F9DGxPjuZSEoJZ6Y3cw3w67QAFuhpB+Fbw/MagJcy3c3DnKKYnrjehk/C1n0sBGoPLvRoR0zrP3YLUcEAQGsKVsldBhGuzCj/bCLC7vu5XU1JpnH7PP5J2zZJGfsQm8esGYOO/Eq3fkH4wEONNpC3VDPraBiQVZFr+iRe1caVsNf7cxoStNEcnqH7QfBA25x

[sapphi-red]

Merging so that I can use it