tessl/npm-vite-plugin-vue-devtools
A vite plugin for Vue DevTools that enhances Vue developer experience with debugging and inspection capabilities
—
Pending
asset-analysis.mddocs/
Asset Analysis
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.
Capabilities
Static Asset Scanning
Scans the project directory for all supported asset types and returns detailed information about each asset.
/**
* Scans project for all static assets and returns detailed information
* @returns Promise resolving to array of asset information objects
*/
function getStaticAssets(): Promise<AssetInfo[]>;
interface AssetInfo {
/** Relative path from public directory (for Vite asset resolution) */
path: string;
/** Relative path from project root */
relativePath: string;
/** Public URL path for the asset */
publicPath: string;
/** Absolute file system path */
filePath: string;
/** Detected asset type based on file extension */
type: AssetType;
/** File size in bytes */
size: number;
/** Last modification time in milliseconds */
mtime: number;
}
type AssetType = 'image' | 'video' | 'audio' | 'font' | 'text' | 'wasm' | 'other';Supported File Types:
- Images: png, jpg, jpeg, gif, svg, webp, avif, ico, bmp, tiff
- 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
- 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
- Fonts: woff, woff2, eot, ttf, otf, ttc, pfa, pfb, pfm, afm
- Text: json, json5, jsonc, txt, text, tsx, jsx, md, mdx, mdc, markdown, yaml, yml, toml
- WebAssembly: wasm
Asset Import Tracking
Identifies which modules import or reference a specific asset.
/**
* Gets all modules that import or reference a specific asset
* @param url - Asset URL to find importers for
* @returns Promise resolving to array of importer information
*/
function getAssetImporters(url: string): Promise<AssetImporter[]>;
interface AssetImporter {
/** Module URL that imports the asset */
url: string | null;
/** Module ID that imports the asset */
id: string | null;
}Usage Example:
// Find which components use a specific image
const importers = await getAssetImporters('/src/assets/logo.png');
// Result: [{ url: '/src/components/Header.vue', id: '/src/components/Header.vue' }]Image Metadata Extraction
Extracts metadata from image files including dimensions, format, and other properties.
/**
* Extracts metadata from image files
* @param filepath - Absolute path to image file
* @returns Promise resolving to image metadata or undefined if extraction fails
*/
function getImageMeta(filepath: string): Promise<ImageMeta | undefined>;
interface ImageMeta {
/** Image width in pixels */
width: number;
/** Image height in pixels */
height: number;
/** Image format/type (e.g., 'jpeg', 'png', 'webp') */
type: string;
/** Additional format-specific metadata (varies by image type) */
[key: string]: any;
}Usage Examples:
// Get image dimensions and format
const meta = await getImageMeta('/absolute/path/to/image.jpg');
if (meta) {
console.log(`${meta.width}x${meta.height} ${meta.type}`);
// Output: "1920x1080 jpeg"
}Text Asset Content Preview
Retrieves a preview of text-based asset content with configurable length limit.
/**
* Gets preview content from text-based assets
* @param filepath - Absolute path to text file
* @param limit - Maximum number of characters to return (default: 300)
* @returns Promise resolving to text content preview or undefined if read fails
*/
function getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>;Usage Examples:
// Get preview of a JSON file
const preview = await getTextAssetContent('/path/to/config.json', 500);
if (preview) {
console.log(preview); // First 500 characters of the file
}
// Get default preview (300 chars) of a markdown file
const mdPreview = await getTextAssetContent('/path/to/README.md');Asset Type Detection
The plugin automatically detects asset types based on file extensions using pattern matching.
/**
* Determines asset type based on file extension
* @param path - File path to analyze
* @returns Detected asset type
*/
function guessType(path: string): AssetType;Detection Rules:
- Images:
/\.(?:png|jpe?g|jxl|gif|svg|webp|avif|ico|bmp|tiff?)$/i - 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 - 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 - Fonts:
/\.(?:woff2?|eot|ttf|otf|ttc|pfa|pfb|pfm|afm)/i - Text:
/\.(?:json[5c]?|te?xt|[mc]?[jt]sx?|md[cx]?|markdown|ya?ml|toml)/i - WebAssembly:
/\.wasm/i
Real-time Updates
Asset information is automatically updated when files change in the project:
- File system watcher monitors for asset additions, deletions, and modifications
- Changes trigger debounced updates to connected DevTools clients
- Asset cache is invalidated and refreshed when relevant files change
- Module graph updates reflect new asset import relationships
Install with Tessl CLI
npx tessl i tessl/npm-vite-plugin-vue-devtools