vite-plugin-wegic-metadata

为 JSX/TSX 元素自动注入元数据属性，用于实现类似 Lovable 的视觉编辑功能。

功能特性

• 🎯 自动为 JSX 元素注入 data-wegic-id 等元数据属性
• 📍 记录元素在源代码中的精确位置（文件路径、行号、列号）
• 🔧 支持自定义配置（包含/排除文件、启用/禁用）
• ⚡ 基于 Babel 的高效转换
• 🎨 保持代码格式和行号不变

安装

pnpm install vite-plugin-wegic-metadata

使用

在 vite.config.ts 中添加插件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import wegicMetadata from 'vite-plugin-wegic-metadata';

export default defineConfig({
  plugins: [
    react(),
    wegicMetadata({
      enabled: true, // 是否启用，默认 true
      include: ['.tsx', '.jsx'], // 处理的文件扩展名
      exclude: ['node_modules'], // 排除的路径
    }),
  ],
});

注入的元数据属性

插件会为每个 JSX 元素添加以下属性：

<div
  data-wegic-id="src/components/Hero.tsx:12:8"
  data-wegic-name="div"
  data-component-path="src/components/Hero.tsx"
  data-component-line="12"
  data-component-file="Hero.tsx"
  data-component-name="div"
  data-component-content="%7B%22className%22%3A%22container%22%7D"
>
  内容
</div>

属性说明

• data-wegic-id: 唯一标识符，格式为 文件路径:行号:列号
• data-wegic-name: 元素标签名或组件名
• data-component-path: 组件文件的相对路径
• data-component-line: 元素在源代码中的行号
• data-component-file: 文件名
• data-component-name: 元素名称
• data-component-content: URL 编码的元素属性内容（JSON 格式）

配置选项

interface WegicMetadataOptions {
  enabled?: boolean; // 是否启用，默认 true
  include?: string[]; // 处理的文件扩展名，默认 ['.tsx', '.jsx']
  exclude?: string[]; // 排除的路径模式，默认 ['node_modules']
  root?: string; // 项目根目录，默认 process.cwd()
}

工作原理

1. 拦截 .tsx 和 .jsx 文件的转换过程
2. 使用 Babel 解析 JSX 代码生成 AST
3. 遍历 AST，为每个 JSX 元素添加元数据属性
4. 生成新的代码并保持原始格式

注意事项

• 仅在开发环境下使用，生产环境建议禁用以减小包体积
• 已有 data-wegic-id 属性的元素不会重复注入
• Fragment 和特殊元素会被自动跳过

License

MIT