feat: support replacing the css paths imported from a specified package #2675
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (6)
packages/nutui-replace-icons/test/replace-case.test.ts (2)
6-6: 配置结构清晰，建议添加注释说明
sourceLibrary 数组的引入支持了多库图标替换，这是个很好的改进。建议为配置对象添加 JSDoc 注释，说明每个配置项的用途和预期值。
建议添加如下注释：
const plugin = replaceIcons({
+ /**
+ * @property {string[]} sourceLibrary - 源图标库列表
+ * @property {string} targetLibrary - 目标替换库
+ * @property {Record<string, string>} iconMappings - 图标映射关系
+ */
sourceLibrary: ['@nutui/icons-react', '@nutui/icons-react-taro'],
targetLibrary: '@test/aa',
iconMappings: {
Loading: 'Star',
},
})Line range hint 19-26: 建议增加更多测试场景
当前测试用例仅覆盖了基本的图标替换场景。考虑到 PR 的目标是支持 CSS 路径替换，建议添加以下测试场景：
- CSS 路径替换的测试用例
- 多源库并存时的替换逻辑
- 错误处理场景（无效的库名、找不到映射等）
建议添加如下测试用例：
// CSS 路径替换测试
const cssImportCase = `
import '@nutui/icons-react/dist/style.css'
import { Loading } from '@nutui/icons-react'
`
// 多源库测试
const multiSourceCase = `
import { Loading } from '@nutui/icons-react'
import { Star } from '@nutui/icons-react-taro'
`
// 错误处理测试
const errorCase = `
import { NonExistentIcon } from '@nutui/icons-react'
`packages/nutui-replace-icons/test/replace-icon-css.test.ts (2)
5-8: 建议添加类型定义
插件配置对象缺少类型定义，建议添加接口定义以提高代码的可维护性。
建议添加如下类型定义：
interface PluginOptions {
sourceLibrary: string[];
targetLibrary: string;
iconMappings?: Record<string, string>;
}
const plugin = replaceIcons({
sourceLibrary: ['@nutui/icons-react', '@nutui/icons-react-taro'],
targetLibrary: '@test/aa',
} as PluginOptions)14-18: 建议增加更多测试用例
当前测试用例只覆盖了基本场景，建议添加以下场景的测试：
- 无效的库名称
- 空字符串输入
- 多行导入语句
- 非 CSS 文件导入
需要我帮您生成这些测试用例的代码吗？
packages/nutui-replace-icons/src/replace-icons.ts (2)
Line range hint 9-20: 建议完善代码注释
当前注释过于简单，建议补充以下信息：
- 函数的具体作用和处理逻辑
- 参数的数据结构说明
- 替换规则的示例
建议添加如下注释：
-// import {Loading} from '@nutui/icons-react'
+/**
+ * 处理直接从源库导入的情况
+ * 例如: import {Loading} from '@nutui/icons-react'
+ * @param path - ImportDeclaration 节点
+ * @example
+ * 输入: import {Loading} from '@nutui/icons-react'
+ * 输出: import {Loading} from '@custom/icons'
+ */建议增加参数验证和错误处理机制
建议在 replaceIcons 函数中添加以下增强：
- 在函数开始处添加参数验证：
if (!options.sourceLibrary?.length) {
throw new Error('sourceLibrary 不能为空数组');
}
if (!options.targetLibrary) {
throw new Error('targetLibrary 不能为空');
}
if (options.iconMappings && typeof options.iconMappings !== 'object') {
throw new Error('iconMappings 必须是对象类型');
}- 在 visitor 中添加错误处理：
ImportDeclaration(path) {
try {
// 现有的替换逻辑
} catch (error) {
console.error('处理导入声明时发生错误:', error);
throw error;
}
}根据测试用例的使用情况，这些验证和错误处理对于提高代码的健壮性很有必要。
🔗 Analysis chain
Line range hint 1-43: 建议增加错误处理和类型验证
当前代码缺少必要的参数验证和错误处理机制。
建议添加以下增强：
- 参数验证
function validateOptions(options: IOptions): void {
if (!Array.isArray(options.sourceLibrary)) {
throw new Error('sourceLibrary 必须是数组类型');
}
if (typeof options.targetLibrary !== 'string') {
throw new Error('targetLibrary 必须是字符串类型');
}
}- 错误处理
try {
// 现有的替换逻辑
} catch (error) {
console.error('图标替换过程中发生错误:', error);
// 可以选择继续处理或抛出错误
}运行以下脚本检查是否有其他使用此功能的地方：
Let me check the test files to understand how this function is being used and if there's error handling in place.
Let me check the type definition to understand the complete interface structure.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索项目中使用 replaceIcons 的位置
rg "replaceIcons" --type ts
Length of output: 658
Script:
#!/bin/bash
# Check test files content
cat packages/nutui-replace-icons/test/replace-case.test.ts
cat packages/nutui-replace-icons/test/replace-icon-css.test.ts
Length of output: 1574
Script:
#!/bin/bash
# Check type definition
cat packages/nutui-replace-icons/src/type.ts
Length of output: 169
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
packages/nutui-replace-icons/test/__snapshots__/replace-icon-css.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
- packages/nutui-replace-icons/src/replace-icons.ts (2 hunks)
- packages/nutui-replace-icons/test/replace-case.test.ts (1 hunks)
- packages/nutui-replace-icons/test/replace-icon-css.test.ts (1 hunks)
- packages/nutui-replace-icons/vitest.config.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/nutui-replace-icons/vitest.config.ts
🔇 Additional comments (2)
packages/nutui-replace-icons/test/replace-case.test.ts (1)
Line range hint 1-33: 验证测试覆盖率
建议检查当前测试文件的覆盖率情况，确保对新增功能有足够的测试覆盖。
✅ Verification successful
Let me check the test coverage configuration and test cases in more detail.
The results will help me understand:
- If there's proper coverage configuration in place
- What other test scenarios are covered in the other test file
- Whether the current test coverage is adequate for the functionality
This will allow me to provide a more informed response about the test coverage situation.
Let me check the actual test implementation and coverage configuration more specifically.
This will help me understand:
- The complete functionality being tested
- The actual test assertions through snapshots
- Whether current test cases cover all the main functionality paths
测试覆盖率已经足够完整
当前测试用例已经很好地覆盖了 replaceIcons 的主要功能：
- 替换图标组件导入的包名和组件名映射
- 替换样式文件导入路径
- 包含了正向和边界场景测试
测试配置也已正确设置：
- 使用 vitest 进行测试
- 启用了代码覆盖率统计
- 配置了 HTML 报告输出
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查测试覆盖率相关配置
rg -l "coverage" .
# 检查是否有其他相关测试文件
fd -e test.ts -e spec.ts
Length of output: 208
Script:
#!/bin/bash
# Check coverage configuration in package.json and vite.config.ts
cat package.json | jq '.scripts + .vitest'
cat vite.config.ts
# Check test cases content
cat packages/nutui-replace-icons/test/replace-icon-css.test.ts
Length of output: 7874
Script:
#!/bin/bash
# Check the source file being tested
cat packages/nutui-replace-icons/src/replace-icons.ts
# Check test snapshots
cat packages/nutui-replace-icons/test/__snapshots__/replace-case.test.ts.snap
cat packages/nutui-replace-icons/test/__snapshots__/replace-icon-css.test.ts.snap
Length of output: 2227
packages/nutui-replace-icons/test/replace-icon-css.test.ts (1)
1-4: 导入语句看起来不错！
导入声明清晰明确，包含了所有必要的依赖。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2675 +/- ##
=======================================
Coverage ? 84.07%
=======================================
Files ? 217
Lines ? 17830
Branches ? 2608
=======================================
Hits ? 14991
Misses ? 2834
Partials ? 5 ☔ View full report in Codecov by Sentry. |
替换为
import '@nutui/jdesign-icons-react-taro/dist/style_iconfont.css'
Summary by CodeRabbit
新功能
replace函数以支持更复杂的库路径替换。replace-icon-css.test.ts测试文件，验证图标替换功能。测试
sourceLibrary属性以支持多个库的图标替换。文档