I missed Jetpack Compose's @Preview in React, so I built a Vite plugin for it

Описание и применение

Vitrine позволяет React-разработчикам быстро просматривать компоненты в режиме реального времени, создавая варианты и делясь галереей, тем самым ускоряя цикл разработки.

Задача

React developers often rebuild and reload the app to see component changes, lacking an inline preview like Jetpack Compose's @Preview.

Результат

Vitrine enables React developers to preview components inline, create variants, and share galleries, reducing the need for manual reloads and improving development speed.

Рабочий процесс

• Add a /** @preview */ comment above a component export.
• Configure Vite by adding the vitrine plugin alongside the React plugin in vite.config.ts.
• Run the Vite dev server; open /__vitrine to view the component preview.
• Use the gallery to adjust props, create variants, and view matrix combinations.
• Optionally install the VS Code extension to see previews beside the editor.
• Share the gallery by building static files with vitrine-plugin-static.

Доказательства

You add a comment above a component you export: /** @preview */ export const PrimaryButton = () => <Button tone="primary">Save</Button> ;

Источник

Setup is one plugin next to your React plugin: // vite.config.ts import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import vitrine from "vite-plugin-react-vitrine"; export default defineConfig({ plugins: [react(), vitrine()], });

Источник

Because the previews go through your own dev server, aliases, CSS, plugins and HMR behave exactly like in your app.

Источник

The gallery also gives you: Props controls generated from your TypeScript prop types, Variants side by side, and a Matrix that renders every combination of two props

Источник