Cursor rule

1---
2description: 
3globs: 
4alwaysApply: false
5---
6# Vite Tagger 实现细节
7 
8## 核心实现
9 
10插件使用 [Babel](mdc:https:/babeljs.io) 解析JSX代码并使用 [estree-walker](mdc:https:/github.com/Rich-Harris/estree-walker) 遍历语法树，找到所有HTML元素并添加调试属性。
11 
12主要处理流程在 [src/index.ts](mdc:src/index.ts) 的 `viteTagger` 函数中：
13 
141. 解析配置选项
152. 解析源代码为AST
163. 遍历AST查找JSX元素
174. 为符合条件的元素添加调试属性
185. 返回修改后的代码
19 
20## 关键处理逻辑
21 
22### 元素内容提取
23 
24元素内容提取逻辑位于 `transform` 方法中：
25 
261. 提取元素的文本内容（递归处理嵌套元素）
272. 提取元素的关键属性（placeholder、className、id、title、alt等）
283. 构建content对象
294. 当content为空对象时，不添加`data-component-content`属性
30 
31### 3D元素过滤
32 
33插件内置了 Three.js 和 Drei 元素列表，可以通过配置选项 `filter3DElements` 来控制是否过滤这些3D元素。
34 
35## 测试
36 
37[src/index.test.ts](mdc:src/index.test.ts) 包含了多个测试用例，验证插件的核心功能：
38 
391. 测试文本内容提取
402. 测试简单按钮处理
413. 测试空内容元素不添加content属性
42