How Vite Transforms React Component Development: Faster Builds, Dynamic Docs, and Seamless HMR

Background

Last year a TypeScript‑AST based tool automatically generated screenshots, usage examples, parameter docs, README and demos for over 1,000 React components, gaining good community feedback. However, the Webpack‑based solution added a compilation layer that became a bottleneck as the library grew beyond 300 components.

Why Vite Is a Game‑Changer

Vite integrates esbuild, native ESM, HMR and pre‑bundling, dramatically speeding up development. Its approach reduces the need to compile every component, limits compilation to the preview page, and makes HMR instantly visible.

Design Ideas

Inspired by Vite, the proposed system aims to:

Avoid compiling the entire component library.

Provide a preview page for developers with controlled browser compatibility.

Leverage HMR for rapid feedback during component development.

Compile only the TypeScript types and JS comments needed for a component at runtime.

This enables a shift from static StoryBook‑style documentation to dynamic, markdown‑driven usage examples.

Component Usage via Markdown

Following the ideas of dumi and Icework, component usage can be written in .md files. A custom compiler parses JSX/TSX/CSS/SCSS/LESS code blocks, executes them, and renders the result, allowing developers to see live demos and edit props on the fly. import ReactComponent from './component1.tsx' Component metadata can then be loaded as:

import ComponentTypeInfo from './component1.tsx.type.json';
// or
const ComponentTypeInfoPromise = import('./component1.tsx.type.json');

Rollup plugins in Vite handle .type.json files, providing hot‑updatable type information.

Runtime Architecture

The runtime ties together React components, their README.md, and TypeScript interfaces, presenting a unified development page. Requests for /*/(README|*).html are transformed into HTML that loads the component, its docs, and usage examples.

http://localhost:7000/components/component1/README.html -> Runtime HTML

Build Process

During the build phase, Vite uses Rollup to bundle components into static HTML files. All component entries must be supplied to Rollup, and the plugin lifecycle must be respected to keep serve‑time and build‑time behavior consistent.

Summary of Benefits

Fast startup (<1000 ms) even with 2,000 components.

On‑demand metadata loading reduces unnecessary compilation.

Millisecond‑level HMR thanks to esbuild.

The Vite‑based solution, named vite‑comp , consists of three loosely coupled plugins: Markdown parser, TypeScript interface extractor, and a runtime for component development and documentation.

Future Outlook

Vite is still early, but its compilation model promises many more innovations, such as integrating backend services like Midway with serverless functions for full‑stack front‑end solutions.