update to @rc-component/virtual-list #310
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更主要涉及依赖包的升级与迁移、类型注解的细化、部分导入路径的更新，以及对 React 相关组件的 Ref 类型进行明确指定。同时，部分开发和测试依赖也做了调整， Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant List
participant Item
participant Filler
participant ScrollBar
App->>List: 渲染并传递 Ref
List->>Filler: 渲染并传递 Ref
List->>ScrollBar: 渲染并传递 Ref
List->>Item: 渲染并传递 Ref
Note over List,Item: Ref 类型由 any/HTMLElement 明确为 HTML*Element
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/height.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
examples/animate.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
examples/basic.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
|
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: 1
🧹 Nitpick comments (1)
src/hooks/useScrollTo.tsx (1)
40-40: 显式初始化scrollRef为null并完善类型
将scrollRef初始化为null以保证一致性，可进一步完善泛型以涵盖null。- const scrollRef = React.useRef<number>(null); + const scrollRef = React.useRef<number | null>(null);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
.gitignore(1 hunks)examples/animate.tsx(7 hunks)examples/basic.tsx(1 hunks)examples/height.tsx(2 hunks)examples/nest.tsx(1 hunks)examples/no-virtual.tsx(5 hunks)examples/switch.tsx(4 hunks)package.json(3 hunks)src/Filler.tsx(4 hunks)src/Item.tsx(1 hunks)src/List.tsx(5 hunks)src/ScrollBar.tsx(3 hunks)src/hooks/useFrameWheel.ts(1 hunks)src/hooks/useMobileTouchMove.ts(1 hunks)src/hooks/useScrollDrag.ts(1 hunks)src/hooks/useScrollTo.tsx(2 hunks)src/mock.tsx(1 hunks)tests/scroll.test.js(1 hunks)tests/scrollWidth.test.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
examples/switch.tsx (1)
src/List.tsx (1)
ListRef(42-46)
src/List.tsx (1)
src/ScrollBar.tsx (1)
ScrollBarRef(24-26)
🪛 GitHub Actions: test
tests/scrollWidth.test.tsx
[error] 1-1: Test suite failed to run: ReferenceError: MessageChannel is not defined in react-dom-server.browser.development.js
tests/scroll.test.js
[error] 1-1: Test suite failed to run: ReferenceError: MessageChannel is not defined in react-dom-server.browser.development.js
🔇 Additional comments (47)
src/hooks/useFrameWheel.ts (1)
1-1: 更新raf导入路径
已将raf从rc-util/lib/raf迁移至@rc-component/util/lib/raf，与其他模块的导入路径保持一致，无需其他修改。src/hooks/useScrollDrag.ts (1)
1-1: 同步raf导入路径
raf已正确由rc-util/lib/raf更新为@rc-component/util/lib/raf，符合依赖重构要求，逻辑未受影响。src/hooks/useMobileTouchMove.ts (1)
1-1: 迁移useLayoutEffect导入来源
已将useLayoutEffect从rc-util/lib/hooks/useLayoutEffect切换到@rc-component/util/lib/hooks/useLayoutEffect，与整体依赖迁移保持一致。.gitignore (1)
10-10: 新增 pnpm 锁文件忽略规则
已在.gitignore中添加pnpm-lock.yaml，确保 pnpm 锁文件不被提交，符合多包管理工具兼容性需求。src/hooks/useScrollTo.tsx (3)
3-3: 更新raf导入路径
raf源自@rc-component/util/lib/raf，已正确替换旧路径，相关调用无需调整。
6-6: 更新useLayoutEffect导入路径
useLayoutEffect已切换至@rc-component/util/lib/hooks/useLayoutEffect，与新依赖一致。
7-7: 更新warning导入路径
warning已从新包@rc-component/util引入，导入路径无语法或类型问题。src/Item.tsx (2)
9-9: 类型注解改进参数
node的类型现在明确为HTMLElement，这提高了类型安全性，使函数参数类型更加明确。
12-12: 增加泛型类型参数
React.cloneElement调用现在添加了<any>泛型参数，增强了类型安全性，同时保持了组件的灵活性。tests/scroll.test.js (2)
4-4: 包路径更新导入路径从
rc-resize-observer/lib/utils/observerUtil更新为@rc-component/resize-observer/lib/utils/observerUtil，与PR中的依赖升级保持一致。
5-5: 包路径更新导入路径从
rc-util/lib/warning更新为@rc-component/util/lib/warning，与PR中的依赖升级保持一致。tests/scrollWidth.test.tsx (2)
3-3: 包路径更新导入路径从
rc-resize-observer/lib/utils/observerUtil更新为@rc-component/resize-observer/lib/utils/observerUtil，与PR中的依赖升级保持一致。
4-4: 包路径更新导入路径从
rc-util/lib/test/domHook更新为@rc-component/util/lib/test/domHook，与PR中的依赖升级保持一致。examples/nest.tsx (1)
16-16: 增强类型安全性
MyItem组件的ForwardRefRenderFunction类型现在明确指定了 ref 类型为HTMLDivElement而不是泛型或any，提高了类型安全性和代码可读性。examples/basic.tsx (1)
9-9: 类型安全性改进将
MyItem组件的 ref 类型从any更改为明确的HTMLSpanElement类型，增强了类型安全性并提高了代码的可读性。这样可以确保转发的 ref 指向正确的 HTML 元素类型。src/mock.tsx (2)
5-5: 明确指定泛型类型参数为
React.forwardRef调用明确指定了泛型类型参数<ListRef, ListProps<any>>，而不是依赖隐式类型推断，这提高了代码的类型安全性和可读性。
11-13: 优化生产环境构建只在非生产环境中设置
displayName属性是一个很好的优化。这可以减小生产环境的包体积，因为displayName主要用于开发时的调试目的。examples/height.tsx (2)
9-9: 类型安全性改进将
MyItem组件的 ref 类型从any更改为明确的HTMLSpanElement类型，增强了类型安全性并提高了代码的可读性。这与examples/basic.tsx文件中的类似更改保持一致。
53-53: 语法调整在传递给
List组件的内联函数中为参数(item)添加了括号。这是一个微小的语法调整，不影响功能，但使代码风格更一致。src/ScrollBar.tsx (5)
2-2: 依赖包路径更新从
rc-util/lib/raf更新为@rc-component/util/lib/raf，符合项目中依赖包迁移到@rc-component命名空间的整体变更。
52-53: ref 初始化改进明确使用
null初始化 React refs，而不是让它们保持未定义状态。这增强了类型安全性并使 ref 初始化更加一致。
57-57: ref 初始化改进明确使用
null初始化visibleTimeoutRef，提高了代码的一致性和类型安全性。
60-62: 代码格式改进为条件语句中的
return添加了花括号，提高了代码的可读性和一致性。虽然这是一个样式上的改进，但不会改变逻辑。
125-128: ref 初始化改进明确使用
null初始化enableScrollRangeRef和enableOffsetRangeRef，保持了 ref 初始化的一致性和类型安全性。examples/no-virtual.tsx (2)
10-10: 类型定义更加明确和安全将
MyItem组件的类型从简单的函数组件改为明确的ForwardRefRenderFunction类型，并指定了 ref 的类型为HTMLSpanElement，这提高了代码的类型安全性和可读性。
53-53: 语法一致性改进箭头函数参数从简写形式
item => ...改为带括号形式(item) => ...，提高了代码风格的一致性。Also applies to: 67-67, 81-81, 94-94
src/Filler.tsx (4)
2-2: 依赖包更新将
ResizeObserver的导入源从rc-resize-observer更新为@rc-component/resize-observer，符合项目依赖包的结构调整。
31-35: 类型安全性增强为
React.forwardRef增加了明确的泛型类型参数<HTMLDivElement, FillerProps>，提高了组件的类型安全性。
73-73: className 表达式简化简化了 className 的条件表达式，使代码更加简洁。
86-88: 生产环境优化添加了对
displayName的条件判断，仅在非生产环境下设置组件名称，这有助于减小生产环境的包体积。src/List.tsx (3)
2-5: 依赖包路径更新将
ResizeObserverProps、ResizeObserver、useEvent和useLayoutEffect的导入路径从rc-resize-observer和rc-util更新为@rc-component/resize-observer和@rc-component/util，与项目依赖结构调整保持一致。
151-153: Ref 初始化规范化显式地将 React refs (
componentRef,fillerInnerRef,containerRef,diffItemRef,verticalScrollBarRef,horizontalScrollBarRef) 初始化为null，提高了类型安全性和一致性。这是一种良好的实践，可以确保在不同 React 版本下行为一致。Also applies to: 193-193, 312-313
678-680: 生产环境优化与
Filler.tsx中的更改类似，添加了对displayName的条件判断，仅在非生产环境下设置组件名称，有助于减小生产环境的包体积。examples/animate.tsx (5)
2-3: 依赖包更新
- 将
CSSMotion的导入源从rc-animate/lib/CSSMotion更新为@rc-component/motion- 显式导入
CSSMotionRef类型以增强类型安全性- 将
useLayoutEffect的导入路径从rc-util/lib/hooks/useLayoutEffect更新为@rc-component/util/lib/hooks/useLayoutEffect这些更改符合项目依赖包的结构调整。
Also applies to: 6-6
45-58: 类型定义优化将
MyItem组件的类型从简单的函数组件改为明确的React.ForwardRefRenderFunction<CSSMotionRef, MyItemProps>类型，指定了 ref 的类型为CSSMotionRef，提高了类型安全性。
75-78: 箭头函数格式调整调整了箭头函数的格式，使代码风格更加一致。
Also applies to: 146-147, 160-161, 167-168
136-136: Ref 初始化规范化显式地将
listRef初始化为null，与src/List.tsx中的其他 ref 初始化保持一致，提高了类型安全性。
188-188: 样式格式调整调整了样式对象的格式，没有功能上的变化。
examples/switch.tsx (5)
9-9: 改进了组件类型定义将
MyItem组件从泛型 React 函数组件改为明确的引用转发渲染函数，并指定了正确的 DOM 元素类型，提高了类型安全性。
26-26: 正确使用了 React.forwardRef 类型使用
React.forwardRef<HTMLSpanElement, Item>(MyItem)替代了之前可能使用any类型转换的做法，代码更加类型安全。
42-42: 正确初始化 React ref使用
React.useRef<ListRef>(null)明确初始化 ref 的值为 null，而不是让它保持 undefined。这是 React 的最佳实践，可以避免潜在的类型错误。
120-120: 样式对象格式改变将多行样式对象简化为单行。这只是格式变化，不影响功能。
122-122: 移除了不必要的类型转换移除了
(item as any)类型转换，让 TypeScript 类型系统自然处理类型推断，代码更加简洁。package.json (4)
2-3: 包名变更与版本重置包名从
rc-virtual-list更改为@rc-component/virtual-list，版本号从3.18.6重置到1.0.0。这表明这是一个重大更新或重组。请确保在发布说明中明确说明此变更，以便用户了解需要更新导入路径。
39-43: 依赖项更新依赖项已更新为使用
@rc-component命名空间下的包，与包名变更保持一致。这看起来是 RC 组件生态系统更广泛重组的一部分。
47-56: 开发依赖更新添加了
@rc-component/motion依赖，并更新了 React 相关类型定义至更新的版本。这与整体依赖升级策略一致。
69-70: React 开发依赖大幅更新React 和 ReactDOM 版本从固定的
16.14.0更新到了灵活的^19.1.0，这是一个较大的版本跨度。请确保组件在这些新版本下正常工作且没有使用到仅在 React 19 中可用而在 React 18 中不可用的特性。
| "peerDependencies": { | ||
| "react": ">=18.0.0", | ||
| "react-dom": ">=18.0.0" | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
对等依赖要求提高
将 React 和 ReactDOM 的最低版本要求从 >=16.9.0 提高到 >=18.0.0，这是一个破坏性变更。不再支持 React 16 和 17。
请确保：
- 在发布说明中明确标记这是一个破坏性变更
- 提供升级指南给仍在使用旧版本 React 的用户
🏁 Script executed:
#!/bin/bash
# 检查项目中是否有任何依赖于 React 16 或 17 特定功能的代码
rg "React\.version|react-dom.*16|react-dom.*17|\bReact\.render\b|\bfindDOMNode\b|\bunmountComponentAtNode\b" --type ts --type tsxLength of output: 159
以下脚本将修正文件类型过滤，重新在 .ts 和 .tsx 文件中搜索 React 16/17 特定 API：
🏁 Script executed:
#!/bin/bash
# 在 .ts 和 .tsx 文件中检查是否使用了 React 16/17 特定 API
rg "React\.version|react-dom.*16|react-dom.*17|\bReact\.render\b|\bfindDOMNode\b|\bunmountComponentAtNode\b" -g '*.ts' -g '*.tsx'Length of output: 131
下面再在 .js 和 .jsx 文件中执行相同的检查，确保覆盖所有源文件类型：
🏁 Script executed:
#!/bin/bash
# 在 .js 和 .jsx 文件中检查是否使用了 React 16/17 特定 API
rg "React\.version|react-dom.*16|react-dom.*17|\bReact\.render\b|\bfindDOMNode\b|\bunmountComponentAtNode\b" -g '*.js' -g '*.jsx'Length of output: 131
请标注破坏性变更并提供升级指南
我已在 .ts、.tsx、.js 和 .jsx 源文件中搜索 React 16/17 特定 API（如 React.render、findDOMNode、unmountComponentAtNode 等），未发现相关用法，内部代码与 React 18 兼容。请在发布流程中补充以下内容：
- 在发布说明（CHANGELOG/Release Notes）中明确标记将 React 和 ReactDOM 的最低版本从
>=16.9.0提升至>=18.0.0属于破坏性变更 - 提供升级指南，说明从 React 16/17 迁移到 React 18 的注意事项、常见问题及示例代码片段
🤖 Prompt for AI Agents
In package.json lines 73 to 76, the peerDependencies for React and ReactDOM have
been raised from >=16.9.0 to >=18.0.0, which is a breaking change. Update the
release notes or CHANGELOG to clearly mark this as a breaking change and add an
upgrade guide section that explains the migration from React 16/17 to React 18,
including key considerations, common issues, and example code snippets to assist
users in upgrading smoothly.
Summary by CodeRabbit
新特性
修复与优化
依赖调整
测试
其他