Vite plugin for component tagging
npm install superdev-taggerA lightweight utility for tagging React components in Vite-based applications with custom data attributes.
``bash`
npm install superdev-taggeror
yarn add superdev-tagger
This package provides two main features:
1. Component Tagging HOC - A higher-order component that wraps your React components with custom data attributes
2. Vite Plugin - A plugin that automatically tags JSX/TSX components in your Vite application
`tsx
import { tagComponent } from 'superdev-tagger';
import MyComponent from './MyComponent';
// Tag a component with default options
const TaggedComponent = tagComponent(MyComponent);
// Usage
function App() {
return
// Renders as:
$3
`tsx
import { tagComponent } from 'superdev-tagger';
import MyComponent from './MyComponent';// Tag with custom options
const TaggedComponent = tagComponent(MyComponent, {
id: 'unique-id',
attributes: {
'feature': 'search',
'version': '1.2.0'
}
});
// Usage
function App() {
return ;
// Renders as:
...
}
`$3
`tsx
function App() {
return (
tagOptions={{
id: 'runtime-id',
attributes: {
'feature': 'dynamic-search'
}
}}
/>
);
}
`Usage - Vite Plugin
Add the plugin to your Vite configuration:
`ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { componentTagger } from 'superdev-tagger';export default defineConfig({
plugins: [
react(),
componentTagger()
],
});
`This will automatically add data attributes to your JSX/TSX components:
`tsx
// Your component
function Button() {
return ;
}// After processing by the plugin, it becomes:
//
`API
$3
Creates a higher-order component that wraps the provided component with additional data attributes.
#### Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
|
id | string | undefined | A unique identifier for the component |
| attributes | Record | {} | Custom data attributes to add |
| includeComponentName | boolean | true` | Whether to include component name |Creates a Vite plugin that automatically tags JSX/TSX components with data attributes.
MIT # superdev-tagger