Module Graph Analysis

Module dependency tracking and analysis for Vue/JS/TS files with real-time updates during development. This functionality enables the DevTools to visualize and analyze the module dependency graph of your application.

Capabilities

Module Graph Retrieval

Analyzes the project's module dependency graph and returns information about Vue, JavaScript, and TypeScript modules with their dependencies.

/**
 * Gets module dependency graph for Vue/JS/TS files
 * @returns Promise resolving to array of module information with dependencies
 */
function getGraphModules(): Promise<ModuleInfo[]>;

interface ModuleInfo {
  /** Module identifier (file path) */
  id: string;
  /** Array of module IDs that this module depends on */
  deps: string[];
}

Usage Examples:

// Get complete module graph
const modules = await getGraphModules();

// Example result:
[
  {
    id: "/src/main.ts",
    deps: ["/src/App.vue", "/src/router/index.ts"]
  },
  {
    id: "/src/App.vue", 
    deps: ["/src/components/Header.vue", "/src/stores/user.ts"]
  },
  {
    id: "/src/components/Header.vue",
    deps: []
  }
]

Module Filtering

The module graph analysis focuses on development-relevant files by filtering modules based on specific criteria:

Included File Types

Only modules matching these patterns are included in the dependency graph:

• Vue Files: .vue - Single File Components
• JavaScript: .js - JavaScript modules
• TypeScript: .ts - TypeScript modules
• JSX: .jsx - React-style JSX files
• TSX: .tsx - TypeScript JSX files
• HTML: .html - HTML entry points
• JSON: .json - Configuration and data files

Pattern Matching

Files are included if they match: /\.(vue|js|ts|jsx|tsx|html|json)($|\?v=)/

This pattern captures:

• Standard file extensions
• Vite's versioned imports (e.g., file.js?v=abc123)

Dependency Resolution

The module graph analysis uses a recursive dependency search algorithm:

Search Algorithm

/**
 * Recursively searches for Vue/JS/TS dependencies
 * @param id - Module ID to search dependencies for
 * @param seen - Set of already processed modules (prevents circular references)
 * @returns Array of filtered dependency IDs
 */
function searchForVueDeps(id: string, seen?: Set<string>): string[];

Dependency Chain Resolution

1. Direct Dependencies: Immediate imports from the target module
2. Transitive Dependencies: Dependencies of dependencies (recursively resolved)
3. Circular Reference Prevention: Uses a seen set to avoid infinite loops
4. Filtering: Only includes dependencies that match the file type criteria

Example Dependency Resolution:

main.ts
├── App.vue (direct)
├── router/index.ts (direct) 
│   └── views/Home.vue (transitive via router)
└── node_modules/vue (excluded - not Vue/JS/TS file)

Result: ["App.vue", "router/index.ts", "views/Home.vue"]

Real-time Updates

The module graph is automatically updated during development:

Update Triggers

• File Changes: Module modifications trigger graph updates
• New Imports: Adding new import statements updates dependencies
• File Deletions: Removing files updates dependent modules
• Hot Module Replacement: Vite HMR triggers selective graph updates

Update Mechanism

// Debounced update function (100ms delay)
const debouncedModuleUpdated = debounce(() => {
  getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('graphModuleUpdated')
}, 100);

Middleware Integration

The plugin integrates with Vite's middleware system to detect changes:

server.middlewares.use((_, __, next) => {
  debouncedModuleUpdated()
  next()
})

Integration with Vite Inspect

The module graph functionality leverages Vite's plugin inspection API:

Metadata Retrieval

// Gets Vite instance metadata
const meta = await rpc.getMetadata();

// Retrieves modules list from Vite environment
const modules = await rpc.getModulesList({
  vite: meta?.instances[0].vite,
  env: meta?.instances[0].environments[0],
});

Environment Context

• Vite Instance: References the specific Vite build instance
• Environment: Development environment context for module resolution
• Module List: Complete list of modules known to Vite's module graph