0
# Asset Analysis
1

2
Server-side RPC functions for analyzing and managing project assets including images, videos, fonts, and other static resources. These functions enable the DevTools to provide comprehensive asset information and dependency tracking.
3

4
## Capabilities
5

6
### Static Asset Scanning
7

8
Scans the project directory for all supported asset types and returns detailed information about each asset.
9

10
```typescript { .api }
11
/**
12
 * Scans project for all static assets and returns detailed information
13
 * @returns Promise resolving to array of asset information objects
14
 */
15
function getStaticAssets(): Promise<AssetInfo[]>;
16

17
interface AssetInfo {
18
  /** Relative path from public directory (for Vite asset resolution) */
19
  path: string;
20
  /** Relative path from project root */
21
  relativePath: string;
22
  /** Public URL path for the asset */
23
  publicPath: string;
24
  /** Absolute file system path */
25
  filePath: string;
26
  /** Detected asset type based on file extension */
27
  type: AssetType;
28
  /** File size in bytes */
29
  size: number;
30
  /** Last modification time in milliseconds */
31
  mtime: number;
32
}
33

34
type AssetType = 'image' | 'video' | 'audio' | 'font' | 'text' | 'wasm' | 'other';
35
```
36

37
**Supported File Types:**
38

39
- **Images**: png, jpg, jpeg, gif, svg, webp, avif, ico, bmp, tiff
40
- **Videos**: mp4, webm, ogv, mov, avi, flv, wmv, mpg, mpeg, mkv, 3gp, m2ts, vob, ogm, ogx, rm, rmvb, asf, amv, divx, m4v, svi, viv, f4v, f4p, f4a, f4b
41
- **Audio**: mp3, wav, ogg, flac, aac, wma, alac, ape, ac3, dts, tta, opus, amr, aiff, au, mid, midi, ra, rm, wv, weba, dss, spx, vox, tak, dsf, dff, dsd, cda
42
- **Fonts**: woff, woff2, eot, ttf, otf, ttc, pfa, pfb, pfm, afm
43
- **Text**: json, json5, jsonc, txt, text, tsx, jsx, md, mdx, mdc, markdown, yaml, yml, toml
44
- **WebAssembly**: wasm
45

46
### Asset Import Tracking
47

48
Identifies which modules import or reference a specific asset.
49

50
```typescript { .api }
51
/**
52
 * Gets all modules that import or reference a specific asset
53
 * @param url - Asset URL to find importers for
54
 * @returns Promise resolving to array of importer information
55
 */
56
function getAssetImporters(url: string): Promise<AssetImporter[]>;
57

58
interface AssetImporter {
59
  /** Module URL that imports the asset */
60
  url: string | null;
61
  /** Module ID that imports the asset */
62
  id: string | null;
63
}
64
```
65

66
**Usage Example:**
67

68
```typescript
69
// Find which components use a specific image
70
const importers = await getAssetImporters('/src/assets/logo.png');
71
// Result: [{ url: '/src/components/Header.vue', id: '/src/components/Header.vue' }]
72
```
73

74
### Image Metadata Extraction
75

76
Extracts metadata from image files including dimensions, format, and other properties.
77

78
```typescript { .api }
79
/**
80
 * Extracts metadata from image files
81
 * @param filepath - Absolute path to image file
82
 * @returns Promise resolving to image metadata or undefined if extraction fails
83
 */
84
function getImageMeta(filepath: string): Promise<ImageMeta | undefined>;
85

86
interface ImageMeta {
87
  /** Image width in pixels */
88
  width: number;
89
  /** Image height in pixels */
90
  height: number;
91
  /** Image format/type (e.g., 'jpeg', 'png', 'webp') */
92
  type: string;
93
  /** Additional format-specific metadata (varies by image type) */
94
  [key: string]: any;
95
}
96
```
97

98
**Usage Examples:**
99

100
```typescript
101
// Get image dimensions and format
102
const meta = await getImageMeta('/absolute/path/to/image.jpg');
103
if (meta) {
104
  console.log(`${meta.width}x${meta.height} ${meta.type}`);
105
  // Output: "1920x1080 jpeg"
106
}
107
```
108

109
### Text Asset Content Preview
110

111
Retrieves a preview of text-based asset content with configurable length limit.
112

113
```typescript { .api }
114
/**
115
 * Gets preview content from text-based assets
116
 * @param filepath - Absolute path to text file
117
 * @param limit - Maximum number of characters to return (default: 300)
118
 * @returns Promise resolving to text content preview or undefined if read fails
119
 */
120
function getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>;
121
```
122

123
**Usage Examples:**
124

125
```typescript
126
// Get preview of a JSON file
127
const preview = await getTextAssetContent('/path/to/config.json', 500);
128
if (preview) {
129
  console.log(preview); // First 500 characters of the file
130
}
131

132
// Get default preview (300 chars) of a markdown file
133
const mdPreview = await getTextAssetContent('/path/to/README.md');
134
```
135

136
## Asset Type Detection
137

138
The plugin automatically detects asset types based on file extensions using pattern matching.
139

140
```typescript { .api }
141
/**
142
 * Determines asset type based on file extension
143
 * @param path - File path to analyze
144
 * @returns Detected asset type
145
 */
146
function guessType(path: string): AssetType;
147
```
148

149
**Detection Rules:**
150

151
- **Images**: `/\.(?:png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i`
152
- **Videos**: `/\.(?:mp4|webm|ogv|mov|avi|flv|wmv|mpg|mpeg|mkv|3gp|3g2|ts|mts|m2ts|vob|ogm|ogx|rm|rmvb|asf|amv|divx|m4v|svi|viv|f4v|f4p|f4a|f4b)$/i`
153
- **Audio**: `/\.(?:mp3|wav|ogg|flac|aac|wma|alac|ape|ac3|dts|tta|opus|amr|aiff|au|mid|midi|ra|rm|wv|weba|dss|spx|vox|tak|dsf|dff|dsd|cda)$/i`
154
- **Fonts**: `/\.(?:woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i`
155
- **Text**: `/\.(?:json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown|ya?ml|toml)/i`
156
- **WebAssembly**: `/\.wasm/i`
157

158
## Real-time Updates
159

160
Asset information is automatically updated when files change in the project:
161

162
- File system watcher monitors for asset additions, deletions, and modifications
163
- Changes trigger debounced updates to connected DevTools clients
164
- Asset cache is invalidated and refreshed when relevant files change
165
- Module graph updates reflect new asset import relationships