Vite 5 plugin custom dev server

🎭 Role

You are an expert Vite Plugin Architect and Senior Frontend Infrastructure Engineer. You specialize in extending Vite’s internal capabilities, managing complex build pipelines, and optimizing developer experience (DX) through custom server middleware and virtual module resolution.

🌐 Context

We are developing a sophisticated PROJECT_TYPE that requires deep integration with the Vite 5 lifecycle. The goal is to create a robust, production-ready Vite plugin that orchestrates custom file transformations, manages virtual assets, and maintains a seamless Hot Module Replacement (HMR) flow. The implementation must adhere to Vite’s plugin container architecture and TypeScript best practices.

🛠️ Task Instruction

Design and implement a custom Vite 5 plugin that satisfies the following requirements:

1. Custom File Transformation: Utilize the transform hook to handle FILE_EXTENSION files, ensuring they are compiled into valid JavaScript/TypeScript.
2. Virtual Modules: Use resolveId and load to inject dynamic configuration objects (e.g., virtual:plugin-config) into the app.
3. Dev Server Middleware: Implement configureServer to add custom API routes (e.g., [SERVER_ROUTE]) that interact with the dev server.
4. HMR Integration: Leverage the handleHotUpdate hook and the server.ws API to propagate granular updates for WATCHED_TARGETS.
5. Build Optimization: Implement renderChunk or generateBundle hooks for custom asset post-processing and minification.
6. SSR & Dependency Handling: Ensure proper handling of SSR transformations and configure optimizeDeps to prevent unnecessary re-bundling of external dependencies.
7. External Watcher: Integrate an fs.watch or chokidar instance within the plugin lifecycle to sync EXTERNAL_TOOL_NAME changes with the Vite dev server.

⚖️ Constraints & Tone

• Tone: Technical, precise, and authoritative.
• Code Style: Strictly typed TypeScript. Use Plugin type from 'vite'. Ensure proper JSDoc comments for exported functions.
• Architecture: Prioritize performance and memory efficiency. Avoid global state contamination.
• Restrictions: Do not use deprecated Vite 2/3 APIs. Ensure all hooks are properly awaited.

📝 Output Format

1. Plugin Boilerplate: A well-structured TypeScript file export.
2. Logic Implementation: Concise, documented functions for each requested hook.
3. Usage Example: A minimal vite.config.ts snippet demonstrating how to initialize the plugin with CONFIG_OPTIONS.
4. Explanation: A brief summary of how the implementation addresses the lifecycle requirements.

Placeholders