feat(file-tree): improve parser flexibility and UI enhancements #15
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## 完成内容 ### 1. 添加了新测试用例 在 `packages/rspress-plugin-file-tree/tests/parser.spec.ts` 中添加了： - 在 `Should parse input with spaces` 测试中增加了 2-space 缩进格式的验证 - 新增 `Should parse 2-space and 4-space indentation identically` 测试，验证两种缩进格式产生相同结果 ### 2. 修复了 tree-parser 在 `packages/rspress-plugin-file-tree/src/components/tree-parser/tree-parser.ts` 的 `calculateIndent` 函数中： - 添加了对 `│ ` (2-char) 缩进模式的支持 - 添加了对 ` ` (2 spaces) 缩进模式的支持 - 保持了对原有 4-char 缩进模式的兼容 现在两种格式都能正确解析为相同的树结构： ``` │ ├── (4-space) │ ├── (2-space) ```
## 完成内容 ### 1. 类型定义更新 `src/components/tree-parser/types.ts`: - 在 `TreeNode` 接口中添加了 `comment?: string` 字段 ### 2. Parser 更新 `src/components/tree-parser/tree-parser.ts`: - 支持 `//` 和 `#` 两种注释格式 - 解析出的注释存储在 `comment` 字段中 ### 3. UI 组件更新 `src/components/FileTree/FileTreeItem.tsx`: - 添加注释显示逻辑 `src/components/FileTree/FileTreeItem.module.less`: - 添加 `.comment` 样式，使用 `var(--rp-c-text-2)` 颜色 ### 4. 新增测试 - `Should parse space-only indentation without tree characters` - 测试纯空格缩进格式 - `Should parse both // and # style comments` - 测试两种注释格式 现在以下格式都能正确解析并显示注释： ``` docs ├── advanced.mdx └── advanced ├── _meta.json # hello world └── utils.ts // hello world2 ```
## 完成内容 ### Parser 重构 `src/components/tree-parser/tree-parser.ts`: 1. **新增 `extractNameAndComment` 函数** - 基于文件名规则检测注释： - 使用 2+ 空格作为主要分隔符 - 文件有扩展名时，扩展名后的内容是注释 - 目录名后跟非字母数字开头的内容是注释 - 隐藏文件（以 `.` 开头）后的内容是注释 2. **新增 `isValidName` 函数** - 验证文件/目录名是否合法 3. **移除了特定注释符号的检测** - 不再特判 `//`, `#`, `<--` 等，所有文件名后的内容都完整保留为注释 ### 测试更新 - 更新了快照以反映注释包含完整内容 - 修改了测试期望值：`<-- "@rspress/core/theme"` 现在作为完整注释保留 ### 新行为示例 ``` index.mdx <-- "@rspress/core/theme" ``` - `name`: `index.mdx` - `comment`: `<-- "@rspress/core/theme"`（完整保留）
- `index.html` → type: `file`, extension: `html` - `about.html` → type: `file`, extension: `html` - `hello-world.html` → type: `file`, extension: `html` - `...` → type: `file` (不是目录) 如果你发现 `.html` 的图标没有正确显示，问题可能不在 parser，而在 icon 映射部分。需要我检查 `getFileIcon` 函数吗？
已添加：
```typescript
{
id: 'html',
icons: [
{
name: 'html',
content: () => import('material-icon-theme/icons/html.svg?raw'),
matcher: /^.*\.html?$/,
},
],
},
```
正则 `/^.*\.html?$/` 可以匹配 `.html` 和 `.htm` 两种扩展名。
总结本次修改： **Parser 更新** (`tree-parser.ts`): - 在解析开始时检查第一行是否为 `.`（当前目录标记） - 如果是，则跳过该行，不将其作为节点 **新增测试**: - `Should skip leading . line (current directory marker)` - 验证以 `.` 开头的 tree 能正确跳过第一行 现在这种格式可以正确解析： ```tree . ├── docs │ └── index.mdx <-- "@rspress/core/theme" ├── theme │ └── index.tsx <-- "@rspress/core/theme-original" └── rspress.config.ts ``` 结果只有 3 个顶级节点：`docs`、`theme`、`rspress.config.ts`。
**FileTreeItem.tsx** 更新： ```tsx // Default to collapsed if directory has no children const hasChildren = node.type === 'directory' && node.children.length > 0; const [expanded, setExpanded] = useState(hasChildren); ``` 现在的行为： - 有子文件的目录：默认展开 (`expanded = true`) - 没有子文件的空目录：默认折叠 (`expanded = false`)
这是一个 patch 版本更新，包含以下改进： - 支持 2-space 和 4-space 两种缩进格式 - 支持文件名后的注释（任何文件名后的文本都作为注释） - 支持 `#`、`//`、`<--`、`-->` 等注释样式 - 跳过开头的 `.` 行（当前目录标记） - 添加 HTML 文件图标支持 - 空目录默认折叠 - 支持 `...` 省略号表示省略内容
SoonIter
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Related issues
AI Summary
Changes Made
This PR significantly improves the
rspress-plugin-file-treeplugin with better parsing flexibility and UI enhancements.Parser Improvements
│ ├──) and 4-space (│ ├──) indentation styles, allowing users to use either format interchangeablyfile.ts // commentfile.ts # commentfile.ts <-- annotationfile.ts --> note.line: Automatically skips the current directory marker (.) thattreecommand outputs...as a file indicator for omitted contentUI Enhancements
.html,.htm)--rp-c-text-2color--rp-code-block-bgbackground color to the container for better visual consistencyFiles Changed
tree-parser.ts: Refactored parsing logic with newextractNameAndCommentfunctiontypes.ts: Addedcommentfield toTreeNodeinterfacelanguages.ts: Added HTML icon definitionFileTreeItem.tsx: Added comment display and smart collapse logicFileTreeItem.module.less: Added.commentstylesFileTree.module.less: Added background colorparser.spec.ts: Added comprehensive tests (10 test cases)Why These Changes
These improvements make the plugin more robust and user-friendly:
This PR was written using Vibe Kanban