@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

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

You'll also need the peer dependencies:

npm install @babel/core --save-dev

Usage

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

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
  ],
});

With Options

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

Before transformation:

function MyComponent() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <CustomButton onClick={handleClick}>
        Click me
      </CustomButton>
    </div>
  );
}

After transformation (dev mode only):

function MyComponent() {
  return (
    <div 
      className="container"
      data-infince-id="src/components/MyComponent.jsx:3:4"
      data-infince-name="div"
    >
      <h1 
        data-infince-id="src/components/MyComponent.jsx:4:6"
        data-infince-name="h1"
      >
        Hello World
      </h1>
      <CustomButton 
        onClick={handleClick}
        data-infince-id="src/components/MyComponent.jsx:5:6"
        data-infince-name="CustomButton"
      >
        Click me
      </CustomButton>
    </div>
  );
}

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

infinceComponentTagger(options?)

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