Gathering detailed insights and metrics for use-vite-manifest-parser
Gathering detailed insights and metrics for use-vite-manifest-parser
Installations
npm install use-vite-manifest-parserDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
feliperohdee
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
3 Commits
1 Forks
1 Watchers
1 Branches
1 Contributors
Updated on May 11, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
use-vite-manifest-parser@1.0.1
Unpacked Size
7.12 kB
Size
2.87 kB
File Count
6
Published on
Mar 12, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
5
use-vite-manifest-parser
A lightweight TypeScript utility for parsing Vite's manifest.json files to extract necessary HTML tags for scripts, CSS, and preloaded assets.
Table of Contents
Installation
1yarn add use-vite-manifest-parser
or
1npm install use-vite-manifest-parser
Core Features
- 🔍 Efficiently parses Vite's manifest.json files
- 🏷️ Extracts essential HTML tags for your application
- 📝 Generates lists of links, preloads, and scripts
- 🔄 Handles complex dependency chains
- ⚡ Type-safe with full TypeScript support
- 📦 Minimal dependencies (only uses lodash/forEach)
Usage
Basic Usage
1import parse from 'use-vite-manifest-parser'; 2import fs from 'fs'; 3 4// Load the manifest file generated by Vite 5const manifestJson = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf-8')); 6 7// Parse the manifest to get HTML tags 8const tags = parse(manifestJson); 9 10// Result structure: 11// { 12// links: ['assets/style.css', ...], 13// preloads: ['assets/chunk.js', ...], 14// scripts: ['assets/main.js', ...] 15// } 16 17// Use these tags to generate HTML or inject in your server-side rendering
Manifest Structure
The parser expects a Vite manifest structure which typically looks like:
1{ 2 "app/index.tsx": { 3 "file": "assets/index-abc123.js", 4 "css": ["assets/index-xyz789.css"], 5 "isEntry": true, 6 "src": "app/index.tsx", 7 "imports": ["app/shared.ts"], 8 "dynamicImports": ["app/dynamic.tsx"] 9 }, 10 "app/shared.ts": { 11 "file": "assets/shared-def456.js", 12 "src": "app/shared.ts" 13 }, 14 "app/dynamic.tsx": { 15 "file": "assets/dynamic-ghi789.js", 16 "isDynamicEntry": true, 17 "src": "app/dynamic.tsx" 18 } 19}
API Reference
parse
1function parse(input: Manifest): Tags;
Processes a Vite manifest to extract HTML tags for scripts, styles, and preloads.
Types
1type Manifest = Record<string, ManifestChunk>; 2 3type ManifestChunk = { 4 assets?: string[]; 5 css?: string[]; 6 dynamicImports?: string[]; 7 file: string; 8 imports?: string[]; 9 isDynamicEntry?: boolean; 10 isEntry?: boolean; 11 name?: string; 12 src?: string; 13}; 14 15type Tags = { 16 links: string[]; 17 preloads: string[]; 18 scripts: string[]; 19};
Examples
Server-Side Rendering with Cloudflare Workers
1import parse from 'use-vite-manifest-parser'; 2 3// Load the manifest file during build and create a JSON string 4// This is typically done in your build process 5const manifestJson = JSON.stringify({ 6 'app/index.tsx': { 7 file: 'assets/index-abc123.js', 8 css: ['assets/index-xyz789.css'], 9 isEntry: true 10 } 11}); 12 13export default { 14 async fetch(request, env) { 15 // Parse the manifest string in the worker 16 const manifest = JSON.parse(manifestJson); 17 const tags = parse(manifest); 18 19 const html = `<!DOCTYPE html> 20 <html> 21 <head> 22 ${tags.links.map(css => `<link rel="stylesheet" href="/${css}">`).join('\n ')} 23 ${tags.preloads.map(js => `<link rel="modulepreload" href="/${js}">`).join('\n ')} 24 </head> 25 <body> 26 <div id="app"></div> 27 ${tags.scripts.map(js => `<script type="module" src="/${js}"></script>`).join('\n ')} 28 </body> 29 </html>`; 30 31 return new Response(html, { 32 headers: { 33 'Content-Type': 'text/html' 34 } 35 }); 36 } 37};
Testing
The library includes comprehensive test coverage. Run tests with:
1yarn test
Tests cover various scenarios including:
- Multiple entry points
- Multiple CSS files
- Complex import chains
- Dynamic imports
- Missing optional properties
- Circular dependencies
- Missing chunk references
👨💻 Author
Felipe Rohde
- Twitter: @felipe_rohde
- Github: @feliperohdee
- Email: feliperohdee@gmail.com
📝 License
MIT © Felipe Rohde
No vulnerabilities found.
No security vulnerabilities found.