Component tagger Vite plugin and Babel plugin for JSX metadata
npm install @prover-coder-ai/component-taggerVite and Babel plugin that adds a data-path attribute to every JSX opening tag, enabling component source location tracking.
``html`Hello
Format:
- ✅ Idempotent: adds data-path only if it doesn't already existdata-*
- ✅ HTML5 compliant: uses standard attributes
- ✅ Configurable: customize the attribute name via options
- ✅ Dual plugin support: works with both Vite and Babel
`bash`
npm install @prover-coder-ai/component-tagger
`ts
import { defineConfig, type PluginOption } from "vite"
import { componentTagger } from "@prover-coder-ai/component-tagger"
export default defineConfig(({ mode }) => {
const isDevelopment = mode === "development"
const plugins = [isDevelopment && componentTagger()].filter(Boolean) as PluginOption[]
return { plugins }
})
`
With custom attribute name:
`ts`
const plugins = [
isDevelopment && componentTagger({ attributeName: "data-component-path" })
].filter(Boolean) as PluginOption[]
Add to your .babelrc:
`json`
{
"presets": ["next/babel"],
"env": {
"development": {
"plugins": ["@prover-coder-ai/component-tagger/babel"]
}
}
}
With options:
`json`
{
"presets": ["next/babel"],
"env": {
"development": {
"plugins": [
[
"@prover-coder-ai/component-tagger/babel",
{
"rootDir": "/custom/root",
"attributeName": "data-component-path"
}
]
]
}
}
}
`ts`
type ComponentTaggerOptions = {
/**
* Name of the attribute to add to JSX elements.
* @default "data-path"
*/
attributeName?: string
}
`ts`
type ComponentTaggerBabelPluginOptions = {
/**
* Root directory for computing relative paths.
* @default process.cwd()
*/
rootDir?: string
/**
* Name of the attribute to add to JSX elements.
* @default "data-path"
*/
attributeName?: string
}
- Idempotency: If data-path (or custom attribute) already exists on an element, no duplicate is addeddata-path
- Default attribute: is used when no attributeName is specifieddata-*` custom attributes by default
- Standard compliance: Uses HTML5