@0xminds/component-tagger

A Vite plugin that automatically adds metadata attributes to React/JSX components to enable Design Mode functionality in the 0xminds platform.

Features

✅ Automatic Component Tagging: Adds unique IDs to every JSX element
✅ File & Line Tracking: Tracks source file and line number for each component
✅ TypeScript Support: Full TypeScript support with type definitions
✅ Smart Filtering: Excludes node_modules, dist, and UI library components
✅ Development-Only: Automatically disabled in production builds
✅ Zero Runtime Overhead: Pure build-time transformation
✅ Source Maps: Preserves source maps for debugging

Installation

``bash
npm install @0xminds/component-tagger --save-dev
`

Usage

$3

Add the plugin to your vite.config.ts:

`typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { componentTagger } from '@0xminds/component-tagger';

export default defineConfig({
plugins: [
react(),
componentTagger(), // Add this line
],
});
`

$3

`typescript
import { componentTagger } from '@0xminds/component-tagger';

export default defineConfig({
plugins: [
react(),
componentTagger({
enabled: true, // Force enable (default: auto-detect from mode)
debug: true, // Enable debug logging
include: ['*/.{jsx,tsx}'], // Files to process
exclude: ['/ui/'], // Files to exclude
attributeName: 'data-0x-component-id', // Custom attribute name
}),
],
});
`

How It Works

$3

`jsx
function MyComponent() {
return (


`jsx
function MyComponent() {
return (
data-0x-component-id="div_MyComponent_3_5"
data-0x-file="src/components/MyComponent.tsx"
data-0x-line="3"
data-0x-column="5"
data-0x-component="div"
data-0x-content="children"
className="container"
>
data-0x-component-id="h1_MyComponent_4_7"
data-0x-file="src/components/MyComponent.tsx"
data-0x-line="4"
data-0x-column="7"
data-0x-component="h1"
data-0x-content="static"
>
Hello World

data-0x-component-id="Button_MyComponent_5_7"
data-0x-file="src/components/MyComponent.tsx"
data-0x-line="5"
data-0x-column="7"
data-0x-component="Button"
data-0x-content="static"
variant="primary"
>
Click Me