{"_id":"@0xminds/component-tagger","_rev":"3-efe23f05eccd3c715c058e1a33ae42ea","name":"@0xminds/component-tagger","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@0xminds/component-tagger","version":"1.0.0","keywords":["vite","plugin","react","jsx","component","tagger","design-mode","0xminds"],"author":{"name":"0xminds"},"license":"MIT","_id":"@0xminds/component-tagger@1.0.0","maintainers":[{"name":"0xminds","email":"xminds2025@gmail.com"}],"dist":{"shasum":"2543c6ab2c1e7fb1f7e4d5e1d594ceb166a795b6","tarball":"https://registry.npmjs.org/@0xminds/component-tagger/-/component-tagger-1.0.0.tgz","fileCount":6,"integrity":"sha512-7Ib3xZEhwFUB4f9k3MrVMNOGhg1NHwmyRCwslrEZ/45civoAvvdnh6BSM6VfMaZLUJv6DNVC81JDfVYw7VuM1g==","signatures":[{"sig":"MEUCIQDTkzBrhQR6I5XCkixh4g6UXcA5f+TRl9RbgyubtPNUzAIgWbYyesaQdvjHWQ/v5lN1Bg1wDZqNQU27X2nzqLuU81A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23943},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"8db5ace8380b8a761f289f99482e82c85bd626a6","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","test":"echo \"No tests yet\"","build":"tsup src/index.ts --format cjs,esm --dts --clean","prepublishOnly":"npm run build"},"_npmUser":{"name":"0xminds","email":"xminds2025@gmail.com"},"_npmVersion":"10.9.2","description":"Vite plugin for tagging React/JSX components with design mode metadata","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@babel/types":"^7.25.8","magic-string":"^0.30.12","@babel/parser":"^7.25.9","@babel/traverse":"^7.25.9"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.5.3","@types/node":"^22.5.5","@types/babel__core":"^7.20.5","@types/babel__traverse":"^7.20.6"},"peerDependencies":{"vite":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/component-tagger_1.0.0_1763563065671_0.9011828347769859","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@0xminds/component-tagger","version":"1.0.1","keywords":["vite","plugin","react","jsx","component","tagger","design-mode","0xminds"],"author":{"name":"0xminds"},"license":"MIT","_id":"@0xminds/component-tagger@1.0.1","maintainers":[{"name":"0xminds","email":"xminds2025@gmail.com"}],"dist":{"shasum":"430b31201f78452208a221274e43d213e355175f","tarball":"https://registry.npmjs.org/@0xminds/component-tagger/-/component-tagger-1.0.1.tgz","fileCount":6,"integrity":"sha512-wOkrgpIGoEFMfqbp8VadbtnwDwuxdzA2HY8aLRrUrc0wU9HKNl6ltTLpN0Tmh9VN7RBWV+76I0lASFMtcoSkdw==","signatures":[{"sig":"MEUCIQDz74tuwvzEp06zF2FTEzz75f1K3cWwxw0fRV9UchRI6wIgEhafFrpqUiJrd6E32Fwyu0KHHcxa5jiibTcskfkQ9aU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23943},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","test":"echo \"No tests yet\"","build":"tsup src/index.ts --format cjs,esm --dts --clean","prepublishOnly":"npm run build"},"_npmUser":{"name":"0xminds","email":"xminds2025@gmail.com"},"_npmVersion":"10.9.2","description":"Vite plugin for tagging React/JSX components with design mode metadata","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@babel/types":"^7.25.8","magic-string":"^0.30.12","@babel/parser":"^7.25.9","@babel/traverse":"^7.25.9"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.5.3","@types/node":"^22.5.5","@types/babel__core":"^7.20.5","@types/babel__traverse":"^7.20.6"},"peerDependencies":{"vite":">=5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/component-tagger_1.0.1_1764505017594_0.07141657096343756","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@0xminds/component-tagger","version":"1.1.0","description":"Vite plugin for tagging React/JSX components with design mode metadata","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts --clean","dev":"tsup src/index.ts --format cjs,esm --dts --watch","test":"echo \"No tests yet\"","prepublishOnly":"npm run build"},"keywords":["vite","plugin","react","jsx","component","tagger","design-mode","0xminds"],"author":{"name":"0xminds"},"license":"MIT","peerDependencies":{"vite":">=5.0.0"},"dependencies":{"@babel/parser":"^7.25.9","@babel/traverse":"^7.25.9","@babel/types":"^7.25.8","magic-string":"^0.30.12"},"devDependencies":{"@types/babel__core":"^7.20.5","@types/babel__traverse":"^7.20.6","@types/node":"^22.5.5","tsup":"^8.0.0","typescript":"^5.5.3"},"_id":"@0xminds/component-tagger@1.1.0","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-4Osdi4GGkKhYl34llK+jvdCSTzfyt51tLJnHnO9hsP6+as+X3qGbGx7Dz40/2IzTGTxylwqkD/QEMdTQXjd1AQ==","shasum":"698907f9ed5d86288f7f428beae58663e619343f","tarball":"https://registry.npmjs.org/@0xminds/component-tagger/-/component-tagger-1.1.0.tgz","fileCount":6,"unpackedSize":26238,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIACKx1R6xzpniws1eqb/+o6xpUt/lhwcOfCihor6ffY9AiBwMiUzh0BWkcER51ar1T6gGtZeZaxRekA9Lg9cM5ckfA=="}]},"_npmUser":{"name":"0xminds","email":"xminds2025@gmail.com"},"directories":{},"maintainers":[{"name":"0xminds","email":"xminds2025@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/component-tagger_1.1.0_1764513440985_0.5480821053117417"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-19T14:37:45.575Z","modified":"2025-11-30T14:37:21.353Z","1.0.0":"2025-11-19T14:37:45.859Z","1.0.1":"2025-11-30T12:16:57.769Z","1.1.0":"2025-11-30T14:37:21.164Z"},"author":{"name":"0xminds"},"license":"MIT","keywords":["vite","plugin","react","jsx","component","tagger","design-mode","0xminds"],"description":"Vite plugin for tagging React/JSX components with design mode metadata","maintainers":[{"name":"0xminds","email":"xminds2025@gmail.com"}],"readme":"# @0xminds/component-tagger\n\nA Vite plugin that automatically adds metadata attributes to React/JSX components to enable Design Mode functionality in the 0xminds platform.\n\n## Features\n\n✅ **Automatic Component Tagging**: Adds unique IDs to every JSX element\n✅ **File & Line Tracking**: Tracks source file and line number for each component\n✅ **TypeScript Support**: Full TypeScript support with type definitions\n✅ **Smart Filtering**: Excludes node_modules, dist, and UI library components\n✅ **Development-Only**: Automatically disabled in production builds\n✅ **Zero Runtime Overhead**: Pure build-time transformation\n✅ **Source Maps**: Preserves source maps for debugging\n\n## Installation\n\n```bash\nnpm install @0xminds/component-tagger --save-dev\n```\n\n## Usage\n\n### Basic Setup\n\nAdd the plugin to your `vite.config.ts`:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport { componentTagger } from '@0xminds/component-tagger';\n\nexport default defineConfig({\n plugins: [\n react(),\n componentTagger(), // Add this line\n ],\n});\n```\n\n### With Custom Options\n\n```typescript\nimport { componentTagger } from '@0xminds/component-tagger';\n\nexport default defineConfig({\n plugins: [\n react(),\n componentTagger({\n enabled: true, // Force enable (default: auto-detect from mode)\n debug: true, // Enable debug logging\n include: ['**/*.{jsx,tsx}'], // Files to process\n exclude: ['**/ui/**'], // Files to exclude\n attributeName: 'data-0x-component-id', // Custom attribute name\n }),\n ],\n});\n```\n\n## How It Works\n\n### Before Transformation\n\n```jsx\nfunction MyComponent() {\n return (\n
\n

Hello World

\n \n
\n );\n}\n```\n\n### After Transformation\n\n```jsx\nfunction MyComponent() {\n return (\n \n \n Hello World\n \n \n Click Me\n \n \n );\n}\n```\n\n## Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `enabled` | `boolean` | `auto` | Enable/disable the plugin (auto = dev only) |\n| `include` | `string[]` | `['**/*.{jsx,tsx}']` | File patterns to include |\n| `exclude` | `string[]` | `['node_modules/**', 'dist/**', '**/ui/**']` | File patterns to exclude |\n| `attributeName` | `string` | `'data-0x-component-id'` | Main attribute name |\n| `includeFilePath` | `boolean` | `true` | Add file path attribute |\n| `includeLineNumber` | `boolean` | `true` | Add line number attribute |\n| `rootDir` | `string` | `process.cwd()` | Root directory for relative paths |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n## Generated Attributes\n\nEach tagged component receives the following attributes:\n\n- **`data-0x-component-id`**: Unique identifier (format: `ComponentName_FileName_Line_Column`)\n- **`data-0x-file`**: Relative file path from project root\n- **`data-0x-line`**: Line number in source file\n- **`data-0x-column`**: Column number in source file\n- **`data-0x-component`**: Component/element name\n- **`data-0x-content`**: Content type (`static` | `dynamic` | `empty` | `children`)\n\n### Content Types\n\n| Type | Description | Example |\n|------|-------------|---------|\n| `static` | Static text content | `

Hello World

` |\n| `dynamic` | Dynamic/variable content | `

{title}

` |\n| `empty` | No text content | `
` or `` |\n| `children` | Contains child elements | `
...
` |\n\n## Use Cases\n\nThis plugin is designed for:\n\n- 🎨 **Design Mode**: Click-to-edit functionality in visual builders\n- 🔍 **Component Inspector**: Identify components in rendered output\n- 🐛 **Debugging**: Track component source locations\n- 📊 **Analytics**: Component usage tracking\n- 🧪 **Testing**: Element selection in E2E tests\n\n## Performance\n\n- **Zero Runtime Impact**: All transformations happen at build time\n- **Smart Caching**: Only processes changed files\n- **Production Safe**: Automatically disabled in production builds\n- **Source Maps**: Maintains accurate source maps for debugging\n\n## Compatibility\n\n- ✅ Vite 5.x and above\n- ✅ React 18+\n- ✅ TypeScript 5+\n- ✅ JSX/TSX files\n- ✅ All modern browsers\n\n## Troubleshooting\n\n### Plugin not working?\n\n1. Check that `mode` is set to `'development'` in Vite config\n2. Verify file matches `include` patterns and not in `exclude`\n3. Enable `debug: true` to see transformation logs\n4. Check console for error messages\n\n### Attributes not appearing?\n\nMake sure:\n- Plugin is listed **before** React plugin in Vite config\n- Files are not in excluded directories (`node_modules`, `dist`, `ui`)\n- Build cache is cleared: `rm -rf node_modules/.vite`\n\n### TypeScript errors?\n\nInstall type definitions:\n```bash\nnpm install --save-dev @types/babel__core @types/babel__traverse\n```\n\n## Examples\n\nSee the `examples/` directory for complete working examples:\n\n- Basic React app\n- TypeScript project\n- shadcn/ui integration\n- Next.js (experimental)\n\n## Contributing\n\nContributions welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) first.\n\n## License\n\nMIT © 0xminds\n\n## Support\n\n- 📧 Email: support@0xminds.com\n- 🐛 Issues: [GitHub Issues](https://github.com/0xminds/0x-tagger/issues)\n- 📖 Docs: [Full Documentation](https://docs.0xminds.com/tagger)\n\n---\n\nMade with ❤️ by the 0xminds team\n","readmeFilename":"README.md"}