@infince/component-tagger

A Vite plugin that adds data-infince-id and data-infince-name attributes to every JSX/TSX element in development mode. This is useful for debugging, testing, and component identification.

Features

- 🔧 Development only: Automatically applies only in dev mode (vite serve)
- 🎯 Smart targeting: Works with both .jsx and .tsx files
- 📍 Precise identification: Adds unique IDs based on file location and line numbers
- 🏷️ Component naming: Automatically extracts and adds component/tag names
- ⚡ Fast: Uses Babel transformation with minimal overhead
- 📦 TypeScript ready: Includes TypeScript definitions

Installation

``bash
npm install @infince/component-tagger --save-dev
`

You'll also need the peer dependencies:

`bash
npm install @babel/core --save-dev
`

Usage

Add the plugin to your vite.config.js or vite.config.ts:

`javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import infinceComponentTagger from '@infince/component-tagger';

export default defineConfig({
plugins: [
react(),
infinceComponentTagger(), // Add this plugin
],
});
`

$3

`javascript
infinceComponentTagger({
include: ['/.jsx', '/.tsx'], // Files to include (default)
exclude: /node_modules/, // Files to exclude (default)
})
`

What it does

The plugin transforms your JSX elements by adding two data attributes:

- data-infince-id: A unique identifier based on file path and location
- data-infince-name: The tag/component name

$3

`jsx
function MyComponent() {
return (



);
}
`

$3

`jsx
function MyComponent() {
return (



);
}
`

Use Cases

- Component debugging: Quickly identify which component is rendering
- E2E testing: Use the data attributes for reliable element selection
- Development tools: Build tools that need to identify React components
- Performance monitoring: Track component rendering and interactions

API

$3

#### Options

| Option | Type | Default | Description |
|-----------|----------|------------------------------|---------------------------------|
| include | string[] | ['/.jsx', '/.tsx'] | Glob patterns for files to include |
| exclude | string | RegExp | /node_modules/` | Files/patterns to exclude |

Requirements

- Node.js 14+
- Vite 3+
- React 16.8+ or any JSX-compatible framework

License

MIT