SuperDev Tagger

A lightweight utility for tagging React components in Vite-based applications with custom data attributes.

Installation

``bash
npm install superdev-tagger


or


yarn add superdev-tagger
`

Features

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

Usage - Component Tagging HOC

$3

`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 Click me;
}

// After processing by the plugin, it becomes:
// Click me
`

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 |

$3

Creates a Vite plugin that automatically tags JSX/TSX components with data attributes.

License

MIT # superdev-tagger