npm package: @infince/component-tagger
Description: Vite plugin to add data-infince-id and data-infince-name to every JSX element in dev mode
Author: Infince Team
Latest version: 1.0.0

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

### With Options

```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

### Before transformation:

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

### After transformation (dev mode only):

```jsx
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