Sandbox Component Tagger

一个为React组件添加自定义数据属性的Vite插件，便于在开发过程中识别和追踪组件。

功能

• 自动为JSX/TSX文件中的组件添加data-libra-id和其他识别属性
• 支持Tailwind CSS配置文件转换
• 跳过Three.js/Fiber和Drei库组件的标记

安装

npm install --save-dev sandbox-tagger

使用方法

在Vite配置文件中添加插件：

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { componentTagger } from 'sandbox-tagger';

export default defineConfig({
  plugins: [
    react(),
    componentTagger(),
  ],
});

工作原理

插件会在预处理阶段分析JSX/TSX文件，为自定义组件添加以下数据属性：

• data-libra-id: 组件唯一标识符（文件路径:行:列）
• data-libra-name: 组件名称
• 以及向后兼容的属性：
  • data-component-path
  • data-component-line
  • data-component-file
  • data-component-name
  • data-component-content

这些属性可以被开发工具用来识别和定位源代码中的组件位置。