0
# Module Graph Analysis
1

2
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.
3

4
## Capabilities
5

6
### Module Graph Retrieval
7

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

10
```typescript { .api }
11
/**
12
 * Gets module dependency graph for Vue/JS/TS files
13
 * @returns Promise resolving to array of module information with dependencies
14
 */
15
function getGraphModules(): Promise<ModuleInfo[]>;
16

17
interface ModuleInfo {
18
  /** Module identifier (file path) */
19
  id: string;
20
  /** Array of module IDs that this module depends on */
21
  deps: string[];
22
}
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
// Get complete module graph
29
const modules = await getGraphModules();
30

31
// Example result:
32
[
33
  {
34
    id: "/src/main.ts",
35
    deps: ["/src/App.vue", "/src/router/index.ts"]
36
  },
37
  {
38
    id: "/src/App.vue", 
39
    deps: ["/src/components/Header.vue", "/src/stores/user.ts"]
40
  },
41
  {
42
    id: "/src/components/Header.vue",
43
    deps: []
44
  }
45
]
46
```
47

48
## Module Filtering
49

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

52
### Included File Types
53

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

56
- **Vue Files**: `.vue` - Single File Components
57
- **JavaScript**: `.js` - JavaScript modules  
58
- **TypeScript**: `.ts` - TypeScript modules
59
- **JSX**: `.jsx` - React-style JSX files
60
- **TSX**: `.tsx` - TypeScript JSX files
61
- **HTML**: `.html` - HTML entry points
62
- **JSON**: `.json` - Configuration and data files
63

64
### Pattern Matching
65

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

68
This pattern captures:
69
- Standard file extensions
70
- Vite's versioned imports (e.g., `file.js?v=abc123`)
71

72
## Dependency Resolution
73

74
The module graph analysis uses a recursive dependency search algorithm:
75

76
### Search Algorithm
77

78
```typescript { .api }
79
/**
80
 * Recursively searches for Vue/JS/TS dependencies
81
 * @param id - Module ID to search dependencies for
82
 * @param seen - Set of already processed modules (prevents circular references)
83
 * @returns Array of filtered dependency IDs
84
 */
85
function searchForVueDeps(id: string, seen?: Set<string>): string[];
86
```
87

88
### Dependency Chain Resolution
89

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

95
**Example Dependency Resolution:**
96

97
```
98
main.ts
99
├── App.vue (direct)
100
├── router/index.ts (direct) 
101
│   └── views/Home.vue (transitive via router)
102
└── node_modules/vue (excluded - not Vue/JS/TS file)
103
```
104

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

107
## Real-time Updates
108

109
The module graph is automatically updated during development:
110

111
### Update Triggers
112

113
- **File Changes**: Module modifications trigger graph updates
114
- **New Imports**: Adding new import statements updates dependencies
115
- **File Deletions**: Removing files updates dependent modules
116
- **Hot Module Replacement**: Vite HMR triggers selective graph updates
117

118
### Update Mechanism
119

120
```typescript { .api }
121
// Debounced update function (100ms delay)
122
const debouncedModuleUpdated = debounce(() => {
123
  getViteRpcServer<ViteRPCFunctions>?.()?.broadcast?.emit('graphModuleUpdated')
124
}, 100);
125
```
126

127
### Middleware Integration
128

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

131
```typescript
132
server.middlewares.use((_, __, next) => {
133
  debouncedModuleUpdated()
134
  next()
135
})
136
```
137

138
## Integration with Vite Inspect
139

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

142
### Metadata Retrieval
143

144
```typescript { .api }
145
// Gets Vite instance metadata
146
const meta = await rpc.getMetadata();
147

148
// Retrieves modules list from Vite environment
149
const modules = await rpc.getModulesList({
150
  vite: meta?.instances[0].vite,
151
  env: meta?.instances[0].environments[0],
152
});
153
```
154

155
### Environment Context
156

157
- **Vite Instance**: References the specific Vite build instance
158
- **Environment**: Development environment context for module resolution
159
- **Module List**: Complete list of modules known to Vite's module graph
160

161