{"id":22423,"library":"superdev-tagger","title":"SuperDev Tagger","description":"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.","status":"active","version":"1.1.8","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","plugin","component","tagger","typescript"],"install":[{"cmd":"npm install superdev-tagger","lang":"bash","label":"npm"},{"cmd":"yarn add superdev-tagger","lang":"bash","label":"yarn"},{"cmd":"pnpm add superdev-tagger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vite plugin (componentTagger); must be installed separately","package":"vite","optional":true}],"imports":[{"note":"ESM-only; require() works only in CJS projects with dynamic import or bundler that converts.","wrong":"const tagComponent = require('superdev-tagger').tagComponent","symbol":"tagComponent","correct":"import { tagComponent } from 'superdev-tagger'"},{"note":"Named export, not default; used in vite.config.ts.","wrong":"import componentTagger from 'superdev-tagger'","symbol":"componentTagger","correct":"import { componentTagger } from 'superdev-tagger'"}],"quickstart":{"code":"import { tagComponent } from 'superdev-tagger';\nimport MyComponent from './MyComponent';\n\nconst TaggedComponent = tagComponent(MyComponent, {\n  id: 'my-id',\n  attributes: { feature: 'search' },\n});\n\nfunction App() {\n  return <TaggedComponent tagOptions={{ id: 'runtime-id' }} />;\n}","lang":"typescript","description":"Demonstrates using the tagComponent HOC with custom options and runtime override."},"warnings":[{"fix":"Upgrade Vite to version 5 or above.","message":"Vite plugin requires Vite ^5.0.0; incompatible with Vite 4 or lower.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use the tagComponent HOC for manual tagging outside JSX.","message":"The Vite plugin automatically adds attributes only to JSX/TSX components; classes or other patterns are not tagged.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using React.memo on wrapped components or apply only during development.","message":"The HOC tagComponent wraps the component and thus may affect performance in large lists; does not memoize.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install superdev-tagger' and ensure it appears in dependencies.","cause":"Package not installed or missing from package.json.","error":"Cannot find module 'superdev-tagger' or its corresponding type declarations."},{"fix":"Use import { tagComponent } from 'superdev-tagger' instead of import tagComponent from 'superdev-tagger'.","cause":"Using default import instead of named import.","error":"TypeError: Cannot destructure property 'tagComponent' of '...' as it is undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}