SuperDev Tagger

1.1.8 verified Mon Apr 27 auth: no javascript

A Vite plugin and React HOC for automatically or manually tagging JSX/TSX components with custom data attributes. Version 1.1.8, actively maintained, ships TypeScript types. Peer dependency on Vite ^5.0.0. Key differentiators: supports both a build-time plugin for automatic tagging and runtime HOC for manual tagging, with runtime override support via tagOptions prop. Lightweight and focused on debugging/QA use cases.

Common errors

error Cannot find module 'superdev-tagger' or its corresponding type declarations. ↓

cause Package not installed or missing from package.json.

fix

Run 'npm install superdev-tagger' and ensure it appears in dependencies.

error TypeError: Cannot destructure property 'tagComponent' of '...' as it is undefined. ↓

cause Using default import instead of named import.

fix

Use import { tagComponent } from 'superdev-tagger' instead of import tagComponent from 'superdev-tagger'.

Warnings

breaking Vite plugin requires Vite ^5.0.0; incompatible with Vite 4 or lower. ↓

fix Upgrade Vite to version 5 or above.

gotcha The Vite plugin automatically adds attributes only to JSX/TSX components; classes or other patterns are not tagged. ↓

fix Use the tagComponent HOC for manual tagging outside JSX.

gotcha The HOC tagComponent wraps the component and thus may affect performance in large lists; does not memoize. ↓

fix Consider using React.memo on wrapped components or apply only during development.

Install

npm install superdev-tagger

yarn add superdev-tagger

pnpm add superdev-tagger

Imports

tagComponent
wrong
```
const tagComponent = require('superdev-tagger').tagComponent
```
correct
```
import { tagComponent } from 'superdev-tagger'
```
ESM-only; require() works only in CJS projects with dynamic import or bundler that converts.

componentTagger

wrong

import componentTagger from 'superdev-tagger'

correct

import { componentTagger } from 'superdev-tagger'

Named export, not default; used in vite.config.ts.

Quickstart

Demonstrates using the tagComponent HOC with custom options and runtime override.

import { tagComponent } from 'superdev-tagger';
import MyComponent from './MyComponent';

const TaggedComponent = tagComponent(MyComponent, {
  id: 'my-id',
  attributes: { feature: 'search' },
});

function App() {
  return <TaggedComponent tagOptions={{ id: 'runtime-id' }} />;
}