chore: migrate to @rc-component namespace and update dependencies #1065
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough此次变更将包名与内部导入从 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as 用户
participant S as Slider 组件
participant CS as useControlledState
participant H as Hooks/Helpers
participant P as 上层回调 (onChange/onAfterChange)
U->>S: 交互 (拖动/键盘/点击)
S->>CS: 读取/派生 mergedValue (defaultValue, value)
S->>H: 计算 rawValues、格式化、约束
H-->>S: 返回下一个 value(s)
S->>P: 触发 onChange(nextValue) (via useEvent)
alt 交互结束
S->>P: 触发 onAfterChange(nextValue)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @EmilyyyLiu, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request refactors the project's utility dependencies by migrating from rc-util to the more modern @rc-component/util package. This change involves updating import paths and the package.json dependency. Additionally, the state management within the Slider component has been improved by adopting the useControlledState hook, aligning with contemporary React practices for controlled components.
Highlights
- Dependency Upgrade: The project's utility dependency
rc-utilhas been upgraded and replaced with@rc-component/utilacross all relevant files and inpackage.json. - State Management Hook Replacement: The
useMergedStatehook insrc/Slider.tsxhas been replaced withuseControlledStatefrom the new utility package, streamlining state management for the Slider component.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/Slider.tsx (2)
362-385: range 可编辑插入位置的边界错误（应在数组开头插入时却插到索引 1）
valueBeforeIndex初始为0会导致当newValue小于现有所有值时插入索引错误（应为 0，现为 1）。将其初值改为-1更稳妥。- let valueBeforeIndex = 0; // Record the index which value < newValue + let valueBeforeIndex = -1; // Record the index which value < newValue ... - if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) { + if (rangeEditable && valueDist !== 0 && (!maxCount || rawValues.length < maxCount)) { cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue); focusIndex = valueBeforeIndex + 1; } else { cloneNextValues[valueIndex] = newValue; }
443-446: useState 类型不匹配（TS）
useState<number>(null)在严格模式下会报错，需允许null。- const [keyboardValue, setKeyboardValue] = React.useState<number>(null); + const [keyboardValue, setKeyboardValue] = React.useState<number | null>(null);
🧹 Nitpick comments (5)
docs/examples/components/TooltipSlider.tsx (1)
6-6: raf 导入迁移正确；建议为 cancel 增加空值保护并复位 ID当前
cancelKeepAlign里直接对可能为null的rafRef.current做取消，运行时会把null传给raf.cancel。为稳妥起见加一道判空并将 ref 复位，避免后续误用。可参考（非范围内变更示例）：
function cancelKeepAlign() { if (rafRef.current != null) { raf.cancel(rafRef.current); rafRef.current = null; } }tests/Slider.test.js (1)
4-5: 命名风格小一致性：建议统一使用KeyCode本文件用
keyCode（小驼峰），而其他文件多为KeyCode（帕斯卡）。不影响功能，但建议统一，便于检索与维护。可选（仅示意）：
-import keyCode from '@rc-component/util/lib/KeyCode'; +import KeyCode from '@rc-component/util/lib/KeyCode';src/Slider.tsx (3)
296-306: 内部状态建议存储为已排序数组，减少一次渲染差异
onChange前已对cloneNextValues排序，但存入本地状态时未排序。为保证渲染前后一致性，可直接存排序结果。- // We set this later since it will re-render component immediately - setValue(cloneNextValues); + // We set this later since it will re-render component immediately + setValue(cloneNextValues.slice().sort((a, b) => a - b));
308-337: handlesRef 直接调用存在空指针风险，建议加可选链
handlesRef.current在极端时间序（卸载/快速切换）下可能为空，添加可选链更稳妥。- handlesRef.current.hideHelp(); + handlesRef.current?.hideHelp?.(); ... - handlesRef.current.hideHelp(); - handlesRef.current.focus(nextFocusIndex); + handlesRef.current?.hideHelp?.(); + handlesRef.current?.focus?.(nextFocusIndex);
485-491: 拖拽结束后聚焦索引可能为 -1，应加保护当
draggingValue未在rawValues中找到时，valueIndex为-1，直接focus(-1)不安全。- React.useEffect(() => { - if (!dragging) { - const valueIndex = rawValues.lastIndexOf(draggingValue); - handlesRef.current.focus(valueIndex); - } - }, [dragging]); + React.useEffect(() => { + if (!dragging) { + const valueIndex = rawValues.lastIndexOf(draggingValue); + if (valueIndex >= 0) { + handlesRef.current?.focus?.(valueIndex); + } + } + }, [dragging]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/examples/components/TooltipSlider.tsx(1 hunks)package.json(1 hunks)src/Handles/Handle.tsx(1 hunks)src/Slider.tsx(2 hunks)src/hooks/useDrag.ts(1 hunks)src/hooks/useRange.ts(1 hunks)tests/Range.test.tsx(1 hunks)tests/Slider.test.js(1 hunks)tests/common.test.js(1 hunks)tests/marks.test.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/Slider.tsx (2)
docs/examples/editable.tsx (1)
value(12-69)docs/examples/multiple.tsx (1)
value(19-49)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (9)
tests/common.test.js (1)
4-5: 导入路径迁移 LGTM测试工具从 rc-util 切到 @rc-component/util 一致且无逻辑变动。
src/hooks/useRange.ts (1)
1-1: 统一warning的导入方式发现
src/Slider.tsx使用了默认导入：import warning from '@rc-component/util/lib/warning';而
src/hooks/useRange.ts则用了命名导入：import { warning } from '@rc-component/util/lib/warning';请确认
@rc-component/util/lib/warning的实际导出方式（default 或 named），并在全项目中统一导入，以避免运行时warning为undefined。src/hooks/useDrag.ts (1)
2-3: Hook 导入迁移 LGTM
useEvent与useLayoutEffect从 @rc-component/util 引入与预期一致，SSR 下该封装可避免警告。tests/marks.test.js (1)
4-4: 导入路径迁移 LGTM仅替换测试工具导入路径，无行为变化。
package.json (1)
46-46: 请手动确认 rc-util 迁移和 Node 版本兼容性
- 全库重新扫描，确保无任何
rc-util导入或残留依赖。- 核对
engines.node配置，确认满足 @rc-component/util@^1.3.0 的最低 Node 要求。src/Handles/Handle.tsx (1)
2-2: KeyCode 导入路径更新 LGTM与全局迁移保持一致，键盘交互逻辑无需调整。
tests/Range.test.tsx (1)
4-6: 迁移到 @rc-component/util 的测试导入看起来正确KeyCode、domHook、warning 重置的路径替换无误，测试语义未变更。
src/Slider.tsx (2)
253-254: useControlledState 使用方式合理，但请核对默认值语义
useControlledState(defaultValue, value)将替代原useMergedState。请确认在value与defaultValue同为undefined时，初值仍按期望在 UI 上呈现为min（当前通过后续逻辑回落到mergedMin）。若需要与旧行为完全一致，可补充回归用例覆盖“未受控且未提供 defaultValue”的初始渲染。
1-4: 确认 isEqual 第三参数语义一致性
rc-util 到 @rc-component/util 迁移已完成，但请手动核对isEqual(a, b, true)中第三个布尔参数在新包中的含义与旧实现保持一致，以免影响onChange触发判断。
EmilyyyLiu
changed the title
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
README.md (2)
1-1: README 标题仍是 rc-slider，需与包名同步为 @rc-component/slider与 package.json 中的
"name": "@rc-component/slider"不一致，易造成使用混淆。-# rc-slider +# @rc-component/slider
12-13: 将 README 中的徽章/链接从 rc-slider 更新为作用域包 @rc-component/slider（@在 URL 中需编码）README 多处仍引用 rc-slider，请按下方 diff 更新并在合并前本地预览 README 渲染确认徽章能正常加载。位置：README.md 行 12-13；也适用于行 24-27、32。
-[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-slider +[npm-image]: https://img.shields.io/npm/v/%40rc-component%2Fslider.svg?style=flat-square +[npm-url]: https://npmjs.org/package/@rc-component/slider -[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-slider -[bundlephobia-url]: https://bundlephobia.com/package/rc-slider -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-slider +[download-image]: https://img.shields.io/npm/dm/%40rc-component%2Fslider.svg?style=flat-square +[download-url]: https://npmjs.org/package/@rc-component/slider +[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/slider +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/slider -[](https://npmjs.org/package/rc-slider) +[](https://npmjs.org/package/@rc-component/slider)package.json (2)
31-31: 发布作用域包建议显式设置publishConfig.access缺少该配置时，
npm publish可能默认为私有或失败（视 registry 而定）。"files": [ "assets/*.css", "lib", "es" ], + "publishConfig": { + "access": "public" + },
82-83: 将 package.json 的 engines.node 升级到 >=18.x验证：npm view dumi/father/@rc-component/np engines 返回 { node: '>=18.x' }，当前 ">=8.x" 与工具链不符。
文件：package.json 行 82-83
- "engines": { - "node": ">=8.x" - } + "engines": { + "node": ">=18.x" + }
🧹 Nitpick comments (5)
docs/examples/editable.tsx (1)
2-2: 确认 UnstableContext 的公开导出；考虑避免示例依赖内部类型路径
- 请确认
UnstableContext在新包仍为公开导出（与旧包一致）。- 可选：将
UnstableContextProps从包内对外导出，或在此处改为从包内导入类型，减少对../../src/context的内部耦合。docs/examples/multiple.tsx (2)
31-36: 示例为受控用法但未更新 state，滑块将无法交互
value固定而onChange未调用setValue，导致示例不可拖动。建议启用受控更新，或改为非受控（用defaultValue并移除value）。推荐受控修复：
- value={value} - onChange={(nextValue) => { - // console.log('>>>', nextValue); - // setValue(nextValue as any); - }} + value={value} + onChange={(nextValue) => { + setValue(nextValue as number[]); + }}或者改为非受控：
- value={value} + defaultValue={value} - onChange={(nextValue) => { - // console.log('>>>', nextValue); - // setValue(nextValue as any); - }} + onChange={console.log}
11-13: 移除未使用的log函数或在 onChange 中使用当前未被使用，保留会增加示例噪音。
-function log(value) { - console.log(value); -} +// 可在 onChange 中直接使用 console.log，移除此函数README.md (1)
171-173: 版权段落中的包名亦需更新与包名保持一致。
-`rc-slider` is released under the MIT license. +`@rc-component/slider` is released under the MIT license.package.json (1)
15-16: bugs 链接建议切换为 HTTPS微调但更一致。
- "bugs": { - "url": "https://github.com/react-component/slider/issues" - }, + "bugs": { + "url": "https://github.com/react-component/slider/issues" + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
.dumirc.ts(1 hunks)README.md(3 hunks)docs/examples/components/TooltipSlider.tsx(1 hunks)docs/examples/debug.tsx(1 hunks)docs/examples/editable.tsx(1 hunks)docs/examples/handle.tsx(1 hunks)docs/examples/marks.tsx(1 hunks)docs/examples/multiple.tsx(1 hunks)docs/examples/range.tsx(1 hunks)docs/examples/slider.tsx(1 hunks)docs/examples/vertical.tsx(1 hunks)package.json(3 hunks)tests/__mocks__/rc-trigger.js(1 hunks)tsconfig.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/examples/components/TooltipSlider.tsx
🔇 Additional comments (10)
tsconfig.json (1)
13-13: 为 @rc-component/slider 增补 es/lib 子路径 alias（需本地或重新运行搜索确认）当前 tsconfig 仅映射根入口；为避免示例/测试或历史导入解析失败，建议同时映射 es/lib 子路径。自动化搜索在 sandbox 中未能检索文件（ripgrep 跳过所有文件），无法确认仓库内是否存在相关导入。位置: tsconfig.json（paths）。
"paths": { "@/*": ["src/*"], "@@/*": ["src/.umi/*"], - "@rc-component/slider": ["src/index.tsx"] + "@rc-component/slider": ["src/index.tsx"], + "@rc-component/slider/es/*": ["src/*"], + "@rc-component/slider/lib/*": ["src/*"] }在仓库根运行下面更稳健的搜索脚本以验证（若仍返回 “No files were searched”，加上 --debug 调试 ripgrep 或用 git grep）：
#!/bin/bash # 在仓库根运行 rg -nP -uu --hidden --glob '!node_modules/**' "from ['\"]rc-slider" || true rg -nP -uu --hidden --glob '!node_modules/**' "from ['\"]@rc-component/slider/(es|lib)" || true rg -nP -uu --hidden --glob '!node_modules/**' "useMergedState|useControlledState" || true # 备用：git grep（不受 .gitignore 限制） git grep -n -e "from ['\"]rc-slider" -e "from ['\"]@rc-component/slider/(es|lib)" -e "useMergedState" -e "useControlledState" || truedocs/examples/debug.tsx (1)
1-1: 导入路径切换到 @rc-component/slider，LGTM与别名迁移保持一致，无行为变化预期。
docs/examples/range.tsx (1)
2-2: 导入路径迁移正确，示例不涉及 API 变更本文件仅为别名替换，行为应保持一致。
docs/examples/vertical.tsx (1)
1-1: 导入路径迁移正确无其它改动，示例可按原逻辑运行。
docs/examples/handle.tsx (1)
1-1: 导入路径迁移正确顺带确认
./components/TooltipSlider内部也已迁移到@rc-component/*生态（tooltip/util 等）。docs/examples/slider.tsx (1)
2-2: 导入迁移 OK；请复核 null 受控语义在新 hook 下的表现内部从
useMergedState改为useControlledState后，value: null与undefined的受控/非受控语义边界可能不同。请手测本文件的NullableSlider/NullableRangeSlider场景，确认与旧版一致（含defaultValue与onChangeComplete时机）。docs/examples/marks.tsx (1)
1-1: 导入路径迁移正确仅别名替换，无功能改动。
.dumirc.ts (1)
6-8: 别名更新与迁移一致，LGTM
@rc-component/slider$与@rc-component/slider/es都指向src，满足文档/示例运行需求。package.json (2)
2-4: 包改名与版本重置为 1.0.0：请明确迁移/发布策略从
[email protected]迁移到作用域包并重置版本，生态会期望 README/NPM 标签/迁移指南一并到位。请确认：
- 是否并行发布（rc-slider 继续维护）；
- README 顶部是否增加迁移说明；
- CDN/unpkg 的路径示例是否同步。
我可以协助起草迁移段落与变更摘要（BREAKING CHANGE）放入 CHANGELOG。
44-47: 依赖迁移到@rc-component/util已完成，LGTM与源码与测试中的导入迁移一致。
| import Trigger from '@rc-component/trigger/lib/mock'; | ||
|
|
||
| export default Trigger; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Jest 手动 mock 名称与包名不匹配，当前 mock 可能不生效
文件名仍为 rc-trigger.js，但代码与依赖已迁移到 @rc-component/trigger。Jest 的手动 mock 会按“模块名=文件名”匹配，除非在配置中做了 moduleNameMapper 映射，否则导入 @rc-component/trigger 时不会命中此 mock。建议二选一：
- 重命名/新增 mock 文件为
tests/__mocks__/@rc-component/trigger.js； - 或在 Jest 配置里增加
moduleNameMapper将@rc-component/trigger映射到现有 mock。
可以按需应用以下任一修复。
重命名文件方案：
-// tests/__mocks__/rc-trigger.js
+// tests/__mocks__/@rc-component/trigger.js
import Trigger from '@rc-component/trigger/lib/mock';
export default Trigger;Jest 配置映射方案（示例：jest.config.js）：
module.exports = {
// ...
+ moduleNameMapper: {
+ '^@rc-component/trigger$': '<rootDir>/tests/__mocks__/rc-trigger.js',
+ },
};快速校验仓库中是否已存在相关映射或显式 mock：
🏁 Script executed:
#!/bin/bash
# 查找 jest 配置与模块映射，以及是否仍有对 rc-trigger 的显式 mock
fd -a -t f -g "jest*.{js,ts,cjs,mjs,json}" .
rg -n -C2 -P "(moduleNameMapper|@rc-component/trigger|rc-trigger)" --no-heading
rg -n -C2 -P "jest\.mock\(['\"](rc-trigger|@rc-component/trigger)['\"]\)" --type js --type ts --type tsx --type jsx tests srcLength of output: 515
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "==== jest.config.js (if exists) ===="
if [[ -f jest.config.js ]]; then
sed -n '1,400p' jest.config.js || true
else
echo "jest.config.js not found at repo root"
fi
echo "==== package.json relevant lines ===="
if [[ -f package.json ]]; then
sed -n '1,400p' package.json | rg -n --color=never "(\"@rc-component/trigger\"|moduleNameMapper|\"jest\")" || true
else
echo "package.json not found"
fi
echo "==== tests/__mocks__/rc-trigger.js ===="
if [[ -f tests/__mocks__/rc-trigger.js ]]; then
sed -n '1,200p' tests/__mocks__/rc-trigger.js || true
else
echo "tests/__mocks__/rc-trigger.js not found"
fi
echo "==== repo-wide search for moduleNameMapper / jest.mock / @rc-component/trigger / rc-trigger ===="
rg -n --hidden --no-ignore -S "(moduleNameMapper|jest\.mock\(|@rc-component/trigger|rc-trigger)" --no-heading || trueLength of output: 14722
修复 Jest 手动 mock 名称与包名不匹配
tests/mocks/rc-trigger.js 当前文件名为 rc-trigger，但导入的是 '@rc-component/trigger'；仓库未配置 moduleNameMapper，Jest 不会命中该 mock。可二选一：
- 方案 A（推荐）：重命名/新增 mock 为 scoped 包名：
-// tests/__mocks__/rc-trigger.js
+// tests/__mocks__/@rc-component/trigger.js
import Trigger from '@rc-component/trigger/lib/mock';
export default Trigger;- 方案 B：在 jest.config.js 添加映射到现有 mock：
module.exports = {
setupFiles: ["./tests/setup.js"],
+ moduleNameMapper: {
+ '^@rc-component/trigger$': '<rootDir>/tests/__mocks__/rc-trigger.js',
+ },
};位置：tests/mocks/rc-trigger.js，jest.config.js
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import Trigger from '@rc-component/trigger/lib/mock'; | |
| export default Trigger; | |
| // tests/__mocks__/@rc-component/trigger.js | |
| import Trigger from '@rc-component/trigger/lib/mock'; | |
| export default Trigger; |
| import Trigger from '@rc-component/trigger/lib/mock'; | |
| export default Trigger; | |
| module.exports = { | |
| setupFiles: ["./tests/setup.js"], | |
| moduleNameMapper: { | |
| '^@rc-component/trigger$': '<rootDir>/tests/__mocks__/rc-trigger.js', | |
| }, | |
| }; |
🤖 Prompt for AI Agents
tests/__mocks__/rc-trigger.js around lines 1-3: the manual Jest mock file name
(rc-trigger.js) does not match the scoped package name '@rc-component/trigger',
so Jest won’t pick it up; fix by either (A) renaming or adding a new mock file
that matches the scoped package path (create
tests/__mocks__/@rc-component/trigger.js or
tests/__mocks__/@rc-component/trigger/index.js and export the same mock), or (B)
add a moduleNameMapper entry in jest.config.js mapping '^@rc-component/trigger$'
to '<rootDir>/tests/__mocks__/rc-trigger.js'; choose A (recommended) unless you
prefer central mapping.
c9e2ef3 to
873a4ee
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1065 +/- ##
=======================================
Coverage 99.39% 99.39%
=======================================
Files 14 14
Lines 661 661
Branches 199 191 -8
=======================================
Hits 657 657
Misses 4 4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
依赖rc-util修改为 @rc-component/util
替换 useMergedState 为 useControlledState
Summary by CodeRabbit