SteerCode Component Tagger

A Vite plugin that automatically adds data attributes to JSX/TSX components for easier debugging, tracking, and analytics.

Installation

``bash
npm install steercode-tagger
`

Usage

Add the plugin to your Vite configuration:

`js
// vite.config.js or vite.config.ts
import { defineConfig } from 'vite';
import { componentTagger } from 'steercode-tagger';

export default defineConfig({
plugins: [
componentTagger(),
// ... other plugins
],
});
`

What It Does

This plugin automatically adds data attributes to your JSX/TSX components:

- data-steer-id: A unique identifier for each component
- data-steer-name: The name of the component
- data-component-path: File path (for legacy compatibility)
- data-component-line: Line number (for legacy compatibility)
- data-component-file: File name (for legacy compatibility)
- data-component-name: Component name (for legacy compatibility)
- data-component-content`: Content information (for legacy compatibility)

These attributes make it easier to:
- Track component usage in analytics
- Debug components in development
- Identify components in the DOM
- Connect components to their source code

Configuration

The plugin works out of the box with no configuration needed. It automatically detects JSX/TSX files and adds the appropriate attributes.

License

MIT