SteerCode Component Tagger

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

Installation

npm install steercode-tagger

Usage

Add the plugin to your Vite configuration:

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