feat(vite): inspect modules and plugins page

[webfansplz]

Screenshot:

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/devtools@389

npm i https://pkg.pr.new/@vitejs/devtools-kit@389

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@389

npm i https://pkg.pr.new/@vitejs/devtools-self-inspect@389

commit: 9612d30

[Copilot]

Pull request overview

Adds a new Vite DevTools UI experience (Nuxt app in packages/vite) for inspecting Vite modules and plugins, backed by a new node-side “inspect” collector and RPC surface, and refactors/shared-izes several UI utilities/components to support graph/path selection and visualization.

Changes:

• Introduces a Vite inspect collector plugin that hijacks Vite plugin hooks, tracks module/plugin timing, and exposes data via new vite:inspect:* RPC functions and shared state.
• Adds new Nuxt UI pages/components for module graph exploration, module details (flow + charts + imports), and plugin details (flow + table + optional charts), including Monaco-based diff viewing in a worker.
• Extracts/improves shared UI building blocks in packages/ui (module graph, search panel, path selector, plugin charts, color helpers) and updates Rolldown UI to use them.

Reviewed changes

Copilot reviewed 105 out of 107 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/vite/src/nuxt.config.ts	Adds optimizeDeps includes for new UI/runtime deps.
packages/vite/src/node/rpc/index.ts	Splits base vs inspect RPC, adds shared-state typing for module-updated notifications.
packages/vite/src/node/rpc/functions/vite-resolve-id.ts	New inspect RPC: resolveId.
packages/vite/src/node/rpc/functions/vite-get-server-metrics.ts	New inspect RPC: server middleware metrics readout.
packages/vite/src/node/rpc/functions/vite-get-plugin-metrics.ts	New inspect RPC: plugin metrics summary.
packages/vite/src/node/rpc/functions/vite-get-plugin-details.ts	New inspect RPC: detailed per-plugin call timeline.
packages/vite/src/node/rpc/functions/vite-get-modules-list.ts	New inspect RPC: modules list.
packages/vite/src/node/rpc/functions/vite-get-module-transform-info.ts	New inspect RPC: per-module transform chain details.
packages/vite/src/node/rpc/functions/vite-get-metadata.ts	New inspect RPC: instances/environments/plugins metadata.
packages/vite/src/node/rpc/functions/vite-clear-module-transform.ts	New inspect RPC action: clear/re-run a module transform.
packages/vite/src/node/plugin.ts	Registers the Vite UI dock and hosts static UI assets.
packages/vite/src/node/inspect/utils.ts	Shared inspect utilities: plugin serialization, id normalization, error parsing, env/id enumerators.
packages/vite/src/node/inspect/types.ts	Shared types for inspect data models (modules, plugins, server metrics).
packages/vite/src/node/inspect/server.ts	Hooks env invalidation + measures middleware performance.
packages/vite/src/node/inspect/plugin.ts	Core inspect collector plugin: registers RPC, shared state, hijacks plugins, tracks resolver + HMR updates.
packages/vite/src/node/inspect/hijack.ts	Wraps transform/load/resolveId hooks to record timings, results, and errors.
packages/vite/src/node/index.ts	Exports new public node APIs (inspect plugin/types/UI plugin).
packages/vite/src/node/diagnostics.ts	Adds VDT diagnostics codes for inspect context/target errors.
packages/vite/src/node/tests/inspect-plugin.test.ts	Adds tests ensuring inspect RPC is only enabled in serve mode.
packages/vite/src/modules/rpc.ts	Switches Nuxt module to register DevToolsViteInspect() instead of manual rpc list.
packages/vite/src/index.ts	Exposes the new node exports at package root.
packages/vite/src/app/worker/diff.worker.ts	Worker-side diff computation via diff-match-patch for Monaco decorations.
packages/vite/src/app/worker/diff.ts	Worker bootstrap/wrapper via Comlink.
packages/vite/src/app/utils/icon.ts	Adds module/plugin type rules for consistent iconography.
packages/vite/src/app/utils/format.ts	Adds bytes formatting, tree building, and timestamp formatting helpers.
packages/vite/src/app/utils/filepath.ts	Adds module path parsing/normalization for display/grouping.
packages/vite/src/app/utils/color.ts	Adds plugin color assignment logic for UI.
packages/vite/src/app/utils/cache.ts	Adds a small memoization helper used by UI utilities.
packages/vite/src/app/types/plugins.ts	Adds app-side plugin detail/item types derived from RPC.
packages/vite/src/app/types/modules.ts	Adds app-side module list/build-metrics types used by UI.
packages/vite/src/app/types/chart.ts	Adds chart node/info types for nanovis-based plugin charts.
packages/vite/src/app/styles/splitpanes.css	Adds Splitpanes styling overrides.
packages/vite/src/app/styles/global.css	Adds global UI styling + FloatingVue/Monaco overrides and animations.
packages/vite/src/app/styles/cm.css	Adds Monaco editor font/background styling.
packages/vite/src/app/state/settings.ts	Adds persisted client settings + settingsRefs helpers.
packages/vite/src/app/state/flowmap.ts	Adds shared flowmap swapping state reset handlers.
packages/vite/src/app/pages/plugins.vue	Adds Plugins page with search/filtering + details panel wiring.
packages/vite/src/app/pages/graph.vue	Adds Modules Graph page with list/graph/folder views and path selector integration.
packages/vite/src/app/composables/rpc.ts	Adds shared-state subscription for module-updated events + client RPC connect updates.
packages/vite/src/app/composables/monaco.ts	Adds Monaco init/theme + readonly editor helpers + scroll sync.
packages/vite/src/app/composables/chart.ts	Adds reusable chart graph composition for nanovis visualizations.
packages/vite/src/app/components/modules/Graph.vue	Adds module graph rendering using shared DisplayModuleGraph.
packages/vite/src/app/components/modules/Folder.vue	Adds folder-based module explorer using a virtual tree.
packages/vite/src/app/components/modules/FlatList.vue	Adds simple modules virtual list view.
packages/vite/src/app/components/modules/DetailedList.vue	Adds detailed modules list with transform/plugin/build metrics chips.
packages/vite/src/app/components/modules/BuildMetrics.vue	Adds build-metrics summary UI for a module row.
packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue	Adds plugin details timeline UI for resolve/load/transform phases.
packages/vite/src/app/components/flowmap/PluginFlow.vue	Adds plugin flow + table view container with settings integration.
packages/vite/src/app/components/flowmap/NodePluginInfo.vue	Adds compact modules/calls/duration badge row for plugin flow nodes.
packages/vite/src/app/components/flowmap/NodeModuleInfo.vue	Adds flowmap node rendering for module resolve/load/transform/no-change groups.
packages/vite/src/app/components/flowmap/Node.vue	Adds shared flowmap node shell (lines + expandable node body).
packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue	Adds code diff/detail panel for selected flow nodes.
packages/vite/src/app/components/flowmap/ModuleFlow.vue	Adds splitpane layout for module flow timeline + details panel.
packages/vite/src/app/components/flowmap/Expandable.vue	Adds expandable flow sections (with caret + tail connectors).
packages/vite/src/app/components/display/VirtualTree.vue	Adds virtualized folder tree for module browsing.
packages/vite/src/app/components/display/ModuleId.vue	Adds module id display component with relative-path logic + tooltip/linking.
packages/vite/src/app/components/display/HighlightedPath.ts	Adds syntax-highlighted module path rendering (path vs query parts).
packages/vite/src/app/components/display/GraphHoverView.vue	Adds floating hover popover positioning via floating-ui.
packages/vite/src/app/components/display/FileSizeBadge.vue	Adds size badge with color scaling + optional percent display.
packages/vite/src/app/components/display/FileIcon.vue	Adds file-type icon selection based on module id rules.
packages/vite/src/app/components/data/PluginDetailsTable.vue	Adds filterable/sortable plugin call table.
packages/vite/src/app/components/data/ModuleImportRelationships.vue	Adds importer/import visualization for a selected module.
packages/vite/src/app/components/data/ModuleDetailsLoader.vue	Adds module details panel loader + refresh-on-update logic.
packages/vite/src/app/components/code/DiffEditor.vue	Adds Monaco-based diff viewer with worker diff + inline/line decorations.
packages/vite/src/app/components/chart/ModuleFlamegraph.vue	Adds module flamegraph visualization for timing breakdowns.
packages/vite/src/app/app.vue	Adds new side-nav entries for Modules Graph + Plugins and wires new styles.
packages/vite/package.json	Adds/adjusts dependencies for inspect UI + collector and declares vite peer dep.
packages/ui/src/utils/color.ts	Adds shared plugin color map + getPluginColor helper.
packages/ui/src/composables/zoom-element.ts	Minor cleanup in zoom composable comments/formatting.
packages/ui/src/composables/module-graph.ts	Refactors module graph composable, removes unused selector code, and cleans up formatting.
packages/ui/src/composables/graph-path-selector.ts	Improves typing + import-id extraction for path BFS/selector manager.
packages/ui/src/components/PluginsSunburst.vue	Generalizes plugin sunburst component and adds slot-based module rendering.
packages/ui/src/components/PluginsFlatList.vue	Generalizes plugin list component typing and internal imports.
packages/ui/src/components/DisplayTimeoutView.vue	Adds a reusable transient message view component.
packages/ui/src/components/DisplayPluginName.vue	Adjusts import path for shared getPluginColor.
packages/ui/src/components/DisplayModuleGraph.vue	Refactors to use local composable imports and adds timeout messaging integration.
packages/ui/src/components/DataSearchPanel.vue	Makes FilterMatchRule local/exported and improves model typing.
packages/ui/src/components/DataPathSelectorItem.vue	Refactors imports/typing for shared path selector components.
packages/ui/src/components/DataPathSelector.vue	Refactors imports/typing and fixes import-id handling without session dependency.
packages/ui/src/components/ChartNavBreadcrumb.vue	Generalizes breadcrumb typing and loosens options typing.
packages/ui/package.json	Adds peerDependencies required by extracted UI components/composables.
packages/rolldown/src/app/pages/session/[session]/plugins.vue	Switches to shared UI plugin list + search panel components.
packages/rolldown/src/app/pages/session/[session]/packages.vue	Switches to shared chart breadcrumb/search panel components.
packages/rolldown/src/app/pages/session/[session]/graph/index.vue	Switches graph/path selector to shared UI components/composables.
packages/rolldown/src/app/pages/session/[session]/chunks.vue	Switches to shared chart breadcrumb/path selector/search panel components.
packages/rolldown/src/app/pages/session/[session]/assets.vue	Switches to shared chart breadcrumb/search panel components.
packages/rolldown/src/app/components/modules/Graph.vue	Uses shared module graph display and composables.
packages/rolldown/src/app/components/modules/DetailedList.vue	Uses shared DisplayPluginName component.
packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue	Uses shared DisplayPluginName component.
packages/rolldown/src/app/components/flowmap/PluginFlow.vue	Uses shared DataSearchPanel component.
packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue	Uses shared DisplayPluginName component.
packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue	Uses shared DisplayPluginName component.
packages/rolldown/src/app/components/data/PluginDetailsLoader.vue	Uses shared DisplayPluginName + generalized PluginsSunburst slot rendering.
packages/rolldown/src/app/components/data/ModuleImportRelationships.vue	Uses shared module graph composables/types.
packages/rolldown/src/app/components/data/AssetRelationships.vue	Uses shared module graph composables/types.
packages/rolldown/src/app/components/chunks/Sunburst.vue	Uses shared chart breadcrumb component.
packages/rolldown/src/app/components/chunks/Graph.vue	Uses shared module graph display/composables/types.
packages/rolldown/src/app/components/assets/Sunburst.vue	Uses shared chart breadcrumb component.
docs/kit/diagnostics.md	Updates diagnostics prefix table to include VDT as active (not reserved).
docs/errors/VDT0002.md	Adds new error reference doc for inspect target not found.
docs/errors/VDT0001.md	Adds new error reference doc for inspect context unavailable.
docs/errors/index.md	Adds VDT section and updates prefix mapping description.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.