The Vite plugin uses Babel during your build to inject useComponentTrace into supported named function components. It does not instrument every React component shape; use the hook directly for unsupported forms.

📥 Installation

npm install -D @traceora/vite-plugin

🔧 Usage

Add it to vite.config.ts. Place it before the React plugin so it transforms code first.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { traceoraPlugin } from '@traceora/vite-plugin';

export default defineConfig({
  plugins: [
    traceoraPlugin(),   // ← Must come first
    react(),
  ],
});

During development, the plugin also serves the DevTools' /__open-in-editor endpoint. Install the VS Code or Cursor CLI, or set TRACEORA_EDITOR to an executable that accepts --goto <file:line:column>.

⚙️ How It Works

The plugin hooks into Vite's transform step and runs a Babel pass on every .tsx / .jsx file.

Your code:

export function Profile() {
  return <div>Hello</div>;
}

What the plugin outputs (at build time):

import { useComponentTrace as __useComponentTrace } from '@traceora/react';

export function Profile() {
  __useComponentTrace('Profile');
  return <div>Hello</div>;
}

The injection happens entirely at build time — your source files are never modified. The result is:

• ✅ Mounts and renders are tracked for supported components
• ✅ Named function declarations, function expressions, and block-bodied arrow functions are supported
• ✅ Component name is preserved for the DevTools timeline
• ✅ Zero impact on your source code
• ✅ Error frames can open in VS Code or Cursor during Vite development (install the editor CLI or set TRACEORA_EDITOR)

🔗 Related Packages

| Package | Role | |---|---| | @traceora/react | The hooks & DevTools UI this plugin injects | | @traceora/core | The underlying event engine |