feat(mergeProps): add mergeProps function#740
feat(mergeProps): add mergeProps function#740guoyunhe wants to merge 5 commits intoreact-component:masterfrom
Conversation
|
@guoyunhe is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello, 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 introduces a new utility function, Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe 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 by creating a comment using either
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 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
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Walkthrough添加了新的工具函数 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
庆祝诗
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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.
Code Review
This pull request introduces a mergeProps utility function, which is useful for merging multiple props objects while filtering out undefined values. The implementation is functional, but I have a couple of suggestions to improve code clarity and maintainability. Specifically, I've recommended refactoring the function body for better readability and renaming the file to use a .ts extension since it doesn't contain JSX.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #740 +/- ##
==========================================
+ Coverage 86.20% 86.31% +0.10%
==========================================
Files 38 39 +1
Lines 1044 1052 +8
Branches 385 372 -13
==========================================
+ Hits 900 908 +8
Misses 142 142
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/mergeProps.tsx (2)
4-16: 与composeProps的行为差异可能导致事件处理器被意外覆盖根据
src/composeProps.ts的实现，composeProps会将函数类型的属性进行链式组合（两个回调都会被调用）。而mergeProps使用简单覆盖语义 (ret[key] = item[key])，后传入的函数会完全替换前者。如果开发者在合并 React 组件 props 时误用
mergeProps来合并事件处理器（如onClick），可能会导致原有的处理器被静默丢弃。建议在函数上方添加 JSDoc 文档，明确说明：
- 这是浅合并（shallow merge）
- 后者覆盖前者
- 函数属性不会被组合，若需组合回调应使用
composeProps📝 建议添加文档注释
+/** + * Shallow merge multiple objects into one. Later values override earlier ones. + * Properties with `undefined` value are skipped. + * + * Note: Unlike `composeProps`, this function does NOT compose callback functions. + * If you need to chain event handlers, use `composeProps` instead. + */ function mergeProps<A, B>(a: A, b: B): B & A;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/mergeProps.tsx` around lines 4 - 16, The mergeProps implementation performs a shallow merge that overwrites earlier values with later ones (it does not compose functions), so add a JSDoc comment above the mergeProps function stating that: (1) this is a shallow merge, (2) later items override earlier items, and (3) function-valued props (e.g., event handlers like onClick) will be replaced rather than composed and that callers should use composeProps if they need to chain callbacks; reference the mergeProps and composeProps names in the comment to guide future maintainers.
1-3: 类型重载仅支持最多 4 个参数当前仅提供了 2-4 个参数的重载签名。若调用时传入 5 个或更多参数，返回类型将退化为
any，丢失类型安全。建议添加更多重载，或至少添加一个 fallback 签名以保持基本的类型提示：
♻️ 建议的修改
function mergeProps<A, B>(a: A, b: B): B & A; function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A; function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A; +function mergeProps<A, B, C, D, E>(a: A, b: B, c: C, d: D, e: E): E & D & C & B & A; +function mergeProps<T extends object>(...items: T[]): T; function mergeProps(...items: any[]) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/mergeProps.tsx` around lines 1 - 3, The overloads for mergeProps currently only cover 2–4 args causing calls with 5+ args to lose types; update mergeProps to handle arbitrarily many arguments by adding either extra explicit overloads (e.g., up to 6–8) or, preferably, a variadic fallback signature using a tuple generic and an intersection helper type. Concretely, keep the existing specific overloads, then add a final signature like a variadic rest: function mergeProps<T extends any[]>(...args: T): /* intersection of all T[number] */ and implement a small type helper (commonly named UnionToIntersection or MergeTupleToIntersection) to transform T[number] into the intersection result; ensure the runtime mergeProps implementation still accepts rest args and returns the merged object.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/mergeProps.tsx`:
- Around line 4-16: The mergeProps implementation performs a shallow merge that
overwrites earlier values with later ones (it does not compose functions), so
add a JSDoc comment above the mergeProps function stating that: (1) this is a
shallow merge, (2) later items override earlier items, and (3) function-valued
props (e.g., event handlers like onClick) will be replaced rather than composed
and that callers should use composeProps if they need to chain callbacks;
reference the mergeProps and composeProps names in the comment to guide future
maintainers.
- Around line 1-3: The overloads for mergeProps currently only cover 2–4 args
causing calls with 5+ args to lose types; update mergeProps to handle
arbitrarily many arguments by adding either extra explicit overloads (e.g., up
to 6–8) or, preferably, a variadic fallback signature using a tuple generic and
an intersection helper type. Concretely, keep the existing specific overloads,
then add a final signature like a variadic rest: function mergeProps<T extends
any[]>(...args: T): /* intersection of all T[number] */ and implement a small
type helper (commonly named UnionToIntersection or MergeTupleToIntersection) to
transform T[number] into the intersection result; ensure the runtime mergeProps
implementation still accepts rest args and returns the merged object.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1516228e-3796-492c-bfed-16823fe807df
📒 Files selected for processing (2)
src/index.tssrc/mergeProps.tsx
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/mergeProps.ts (1)
1-3: 类型重载未覆盖超过 4 个参数的情况。当前仅提供了 2-4 个参数的类型重载，但运行时实现支持任意数量的参数。建议添加一个通用的重载签名以支持更多参数的场景。
♻️ 建议添加通用重载签名
function mergeProps<A, B>(a: A, b: B): B & A; function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A; function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A; +function mergeProps<T extends object[]>(...items: T): object; function mergeProps(...items: any[]) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/mergeProps.ts` around lines 1 - 3, The overloads for mergeProps (functions mergeProps<A,B>, mergeProps<A,B,C>, mergeProps<A,B,C,D>) don't cover calls with more than four arguments even though the implementation accepts any number; add a general overload signature like function mergeProps<T extends object[]>(...objs: T): UnionToIntersection<T[number]> (or a generic rest-parameter overload returning an intersection of all input types) so TypeScript understands arbitrary-arity usage of mergeProps while keeping existing specific overloads for better inference.tests/mergeProps.test.ts (1)
41-47: 建议验证返回的是浅拷贝（不同引用）。当前测试只验证了返回值与原对象相等，但未验证返回的是一个新对象（不同引用）。建议增加引用不相等的断言，以确保函数确实返回了浅拷贝。
♻️ 建议增加引用检查
it('returns copy of single object', () => { const a = { foo: 1, bar: 2 }; - expect((mergeProps as (...items: any[]) => any)(a)).toEqual({ + const result = (mergeProps as (...items: any[]) => any)(a); + expect(result).toEqual({ foo: 1, bar: 2, }); + expect(result).not.toBe(a); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tests/mergeProps.test.ts` around lines 41 - 47, The test currently only checks deep equality; update the spec for mergeProps so it also asserts the returned object is a different reference than the input (i.e., not the same object) to verify a shallow copy is returned—call mergeProps(a) into a result variable and add an assertion like expect(result).not.toBe(a) (and optionally verify nested object references remain the same if you want to confirm "shallow" behavior).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/mergeProps.ts`:
- Around line 1-3: The overloads for mergeProps (functions mergeProps<A,B>,
mergeProps<A,B,C>, mergeProps<A,B,C,D>) don't cover calls with more than four
arguments even though the implementation accepts any number; add a general
overload signature like function mergeProps<T extends object[]>(...objs: T):
UnionToIntersection<T[number]> (or a generic rest-parameter overload returning
an intersection of all input types) so TypeScript understands arbitrary-arity
usage of mergeProps while keeping existing specific overloads for better
inference.
In `@tests/mergeProps.test.ts`:
- Around line 41-47: The test currently only checks deep equality; update the
spec for mergeProps so it also asserts the returned object is a different
reference than the input (i.e., not the same object) to verify a shallow copy is
returned—call mergeProps(a) into a result variable and add an assertion like
expect(result).not.toBe(a) (and optionally verify nested object references
remain the same if you want to confirm "shallow" behavior).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c8a6a023-f885-45d7-8d6b-79b6a0ff823b
📒 Files selected for processing (2)
src/mergeProps.tstests/mergeProps.test.ts
| function mergeProps<A, B>(a: A, b: B): B & A; | ||
| function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A; | ||
| function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A; | ||
| function mergeProps(...items: any[]) { |
There was a problem hiding this comment.
目前感觉不是很必要，因为每次 render 的 props 实例总是变化的，memo 不住呢
…th undefined values
2 participants
Copied from ant-design-mobile https://github.com/ant-design/ant-design-mobile/blob/master/src/utils/with-default-props.tsx
Maybe reused in ant-design
Summary by CodeRabbit
发行说明