Vite plugin for component tagging and tracking
npm install steercode-taggerA Vite plugin that automatically adds data attributes to JSX/TSX components for easier debugging, tracking, and analytics.
``bash`
npm install steercode-tagger
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
],
});
`
This plugin automatically adds data attributes to your JSX/TSX components:
- data-steer-id: A unique identifier for each componentdata-steer-name
- : The name of the componentdata-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
The plugin works out of the box with no configuration needed. It automatically detects JSX/TSX files and adds the appropriate attributes.
MIT