vite-plugin-react-component-source

A Vite plugin that automatically adds source file location (path:line:column) as data-component attributes to React JSX elements. This makes debugging much easier by showing exactly where each element is defined in your source code.

Features

• 🎯 Precise Location Tracking - Shows exact file path, line number, and column number
• 🔍 Easy Debugging - Inspect any element in DevTools and instantly know where it's defined
• ⚡ Development Only - Automatically disabled in production builds
• 🎨 Customizable - Configure attribute name and enable/disable as needed
• 🚀 Zero Runtime Overhead - Works at build time via Babel transformation

Installation

npm install vite-plugin-react-component-source --save-dev

or

yarn add vite-plugin-react-component-source --dev

or

pnpm add vite-plugin-react-component-source --save-dev

Usage

Basic Setup

Add the plugin to your Vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { componentSource } from 'vite-plugin-react-component-source'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [componentSource()]
      }
    })
  ]
})

With Options

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { componentSource } from 'vite-plugin-react-component-source'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          componentSource({
            // Custom attribute name (default: 'data-component')
            attributeName: 'data-source',

            // Manually control when to enable (default: enabled in development only)
            enabled: process.env.NODE_ENV !== 'production'
          })
        ]
      }
    })
  ]
})

Mode-Based Configuration

Only enable in development mode:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { componentSource } from 'vite-plugin-react-component-source'

export default defineConfig(({ mode }) => ({
  plugins: [
    react({
      babel: mode === 'development' ? {
        plugins: [componentSource()]
      } : undefined
    })
  ]
}))

How It Works

The plugin transforms your JSX elements by adding source location information:

Before:

<div className="container">
  <Button onClick={handleClick}>Click me</Button>
</div>

After (in development):

<div data-component="src/components/Container.tsx:10:2" className="container">
  <Button data-component="src/components/Container.tsx:11:4" onClick={handleClick}>Click me</Button>
</div>

Debugging Workflow

1. Open your app in the browser
2. Right-click on any element and select "Inspect Element"
3. Look for the data-component attribute in DevTools
4. The value shows you: filepath:line:column
5. Jump directly to that location in your code editor!

Example DevTools Output

<button data-component="src/components/auth/LoginForm.tsx:45:6" class="btn-primary">
  Login
</button>

This tells you the button is defined at:

• File: src/components/auth/LoginForm.tsx
• Line: 45
• Column: 6

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | attributeName | string | 'data-component' | Name of the HTML attribute to add | | enabled | boolean | process.env.NODE_ENV !== 'production' | Whether to enable the plugin |

Requirements

• Vite 5.x or higher
• @vitejs/plugin-react 4.x or higher
• React project using JSX/TSX

TypeScript Support

This plugin includes TypeScript definitions out of the box.

Performance

• Build Time: Negligible impact (runs during Babel transformation)
• Runtime: Zero overhead (only adds HTML attributes)
• Bundle Size: No impact (plugin runs at build time only)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Related

• Vite
• @vitejs/plugin-react
• Babel