@prover-coder-ai/component-tagger

Vite and Babel plugin that adds a data-path attribute to every JSX opening tag, enabling component source location tracking.

Example output

<h1data-path="src/App.tsx:22:4">Hello</h1>

Format: <relative-file-path>:<line>:<column>

Features

• ✅ Idempotent: adds data-path only if it doesn't already exist
• ✅ HTML5 compliant: uses standard data-* attributes
• ✅ Configurable: customize the attribute name via options
• ✅ Dual plugin support: works with both Vite and Babel

Installation

npm install @prover-coder-ai/component-tagger

Usage

Vite Plugin

import{defineConfig,typePluginOption}from"vite"import{componentTagger}from"@prover-coder-ai/component-tagger"exportdefaultdefineConfig(({ mode })=>{constisDevelopment=mode==="development"constplugins=[isDevelopment&&componentTagger()].filter(Boolean)asPluginOption[]return{ plugins }})

With custom attribute name:

constplugins=[isDevelopment&&componentTagger({attributeName: "data-component-path"})].filter(Boolean)asPluginOption[]

Babel Plugin (e.g., Next.js)

Add to your .babelrc:

{
"presets": ["next/babel"],
"env": {
"development": {
"plugins": ["@prover-coder-ai/component-tagger/babel"]
}
}
}

With options:

{
"presets": ["next/babel"],
"env": {
"development": {
"plugins": [
[
"@prover-coder-ai/component-tagger/babel",
{
"rootDir": "/custom/root",
"attributeName": "data-component-path"
}
]
]
}
}
}

Options

Vite Plugin Options

typeComponentTaggerOptions={/** * Name of the attribute to add to JSX elements. * @default "data-path" */attributeName?: string}

Babel Plugin Options

typeComponentTaggerBabelPluginOptions={/** * 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}

Behavior Guarantees

• Idempotency: If data-path (or custom attribute) already exists on an element, no duplicate is added
• Default attribute: data-path is used when no attributeName is specified
• Standard compliance: Uses HTML5 data-* custom attributes by default