use-vite-manifest-parser

v1.0.2

Published

9 months ago

A lightweight TypeScript utility for parsing Vite's manifest.json files to extract necessary HTML tags for scripts, CSS, and preloaded assets.

Downloads

0High
0Medium
0Low

feliperohdee

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.

Installation

yarn add use-vite-manifest-parser

npm 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

import parse from 'use-vite-manifest-parser';
import fs from 'fs';

// Load the manifest file generated by Vite
const manifestJson = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf-8'));

// Parse the manifest to get HTML tags
const tags = parse(manifestJson);

// Result structure:
// {
//   links: ['assets/style.css', ...],
//   preloads: ['assets/chunk.js', ...],
//   scripts: ['assets/main.js', ...]
// }

// 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:

{
	"app/index.tsx": {
		"file": "assets/index-abc123.js",
		"css": ["assets/index-xyz789.css"],
		"isEntry": true,
		"src": "app/index.tsx",
		"imports": ["app/shared.ts"],
		"dynamicImports": ["app/dynamic.tsx"]
	},
	"app/shared.ts": {
		"file": "assets/shared-def456.js",
		"src": "app/shared.ts"
	},
	"app/dynamic.tsx": {
		"file": "assets/dynamic-ghi789.js",
		"isDynamicEntry": true,
		"src": "app/dynamic.tsx"
	}
}

API Reference

parse

function parse(input: Manifest): Tags;

Processes a Vite manifest to extract HTML tags for scripts, styles, and preloads.

Types

type Manifest = Record<string, ManifestChunk>;

type ManifestChunk = {
	assets?: string[];
	css?: string[];
	dynamicImports?: string[];
	file: string;
	imports?: string[];
	isDynamicEntry?: boolean;
	isEntry?: boolean;
	name?: string;
	src?: string;
};

type Tags = {
	links: string[];
	preloads: string[];
	scripts: string[];
};

Examples

Server-Side Rendering with Cloudflare Workers

import parse from 'use-vite-manifest-parser';

// Load the manifest file during build and create a JSON string
// This is typically done in your build process
const manifestJson = JSON.stringify({
	'app/index.tsx': {
		file: 'assets/index-abc123.js',
		css: ['assets/index-xyz789.css'],
		isEntry: true
	}
});

export default {
	async fetch(request, env) {
		// Parse the manifest string in the worker
		const manifest = JSON.parse(manifestJson);
		const tags = parse(manifest);

		const html = `<!DOCTYPE html>
    <html>
      <head>
        ${tags.links.map(css => `<link rel="stylesheet" href="/${css}">`).join('\n        ')}
        ${tags.preloads.map(js => `<link rel="modulepreload" href="/${js}">`).join('\n        ')}
      </head>
      <body>
        <div id="app"></div>
        ${tags.scripts.map(js => `<script type="module" src="/${js}"></script>`).join('\n        ')}
      </body>
    </html>`;

		return new Response(html, {
			headers: {
				'Content-Type': 'text/html'
			}
		});
	}
};

Testing

The library includes comprehensive test coverage. Run tests with:

yarn 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

use-vite-manifest-parser

Table of Contents

Installation

Core Features

Usage

Basic Usage

Manifest Structure

API Reference

parse

Types

Examples

Server-Side Rendering with Cloudflare Workers

Testing

👨‍💻 Author

📝 License