DXD Tagger

A Vite plugin that automatically adds component name attributes to React components for easier debugging, styling, and tracking.

Installation

npm install dxd-tagger

Usage

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dxdTagger from 'dxd-tagger';

export default defineConfig({
  plugins: [
    react(),
    dxdTagger({
      // options (all optional)
      attributeName: 'data-component', // default
      include: ['.jsx', '.tsx'], // default
      exclude: [] // default
    })
  ],
});

What it does

This plugin automatically adds a data-component attribute (or custom attribute name) to all React components in your JSX/TSX files. For example:

// Your code
function MyComponent() {
  return <div>Hello World</div>;
}

// Transformed code
function MyComponent() {
  return <div data-component="MyComponent">Hello World</div>;
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | attributeName | string | 'data-component' | The name of the attribute to add to components | | include | string[] | ['.jsx', '.tsx'] | File extensions to process | | exclude | string[] | [] | File extensions to exclude from processing |

License

MIT