@tutti-os/rrt-plugin-vite

Vite plugin for ReactRenderTracker.

Install

pnpm add -D @tutti-os/rrt-plugin-vite

Usage

// vite.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { PerfMonitorVitePlugin } from '@tutti-os/rrt-plugin-vite';

export default defineConfig({
  plugins: [
    react(),
    PerfMonitorVitePlugin({
      separate: false,
      diffMode: 'lite',
      updateTrace: true,
      commitTrace: true,
      // rendererId: 1,
      // editor: 'cursor',
      // disabled: process.env.NODE_ENV === 'production',
    }),
  ],
});

The plugin only runs in Vite serve mode.

Separate Mode

Set separate: true to run DevTools in a separate page.

// vite.config.ts
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { PerfMonitorVitePlugin } from '@tutti-os/rrt-plugin-vite';

export default defineConfig({
  plugins: [
    react(),
    PerfMonitorVitePlugin({
      separate: true,
    }),
  ],
});

Then open:

http://localhost:<port>/__react-render-tracker__/standalone

The plugin will also print this URL hint automatically when Vite starts.

Options

• disabled?: boolean
• rendererId?: number
• separate?: boolean
• editor?: 'code' | 'webstorm' | 'idea' | 'cursor' | 'zed' | 'code-insiders'
• diffMode?: 'off' | 'lite' | 'full'
• updateTrace?: boolean
• commitTrace?: boolean