feat: add boostLevel prop and support value segmentation#144
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough本次变更扩展了 QR 码 Hook 与组件属性：支持 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Component as 组件
participant Hook as useQRCode
participant Segmenter as 段生成器
participant Encoder as QrCode.encodeSegments
rect rgb(240,248,255)
Component->>Hook: 调用({ value: string|string[], level, minVersion, boostLevel? })
end
Hook->>Segmenter: 规范化为数组并为每个值生成 segments
Segmenter-->>Hook: segments[]
rect rgb(245,255,240)
Hook->>Encoder: encodeSegments(segments, level, minVersion, undefined, undefined, boostLevel)
Encoder-->>Hook: 返回 QrCode 实例
end
Hook-->>Component: 返回 memo 化的 QrCode（依赖 value/level/minVersion/boostLevel）
Estimated code review effort🎯 3 (中等) | ⏱️ ~20 分钟 Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 @li-jia-nan, 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 enhancements to the QR code generation functionality by adding a boostLevel option to potentially improve error correction without increasing the QR code version, and by allowing the value prop to accept an array of strings for better data segmentation. These changes provide greater flexibility and optimization possibilities for generating QR codes.
Highlights
- New
boostLevelprop: Introduced a new optionalboostLevelboolean prop toQRPropsanduseQRCodeoptions. When enabled, this allows the QR code's error correction level to be boosted without increasing its version if it can be done. - Support for
valuesegmentation: Thevalueprop now accepts either a singlestringor an array ofstrings. This enables passing multiple segments to the QR code encoder, which can be used to further optimize the QR code generation. - Updated
useQRCodehook: TheuseQRCodehook has been updated to correctly handle the newvaluetype (string or string array) and to pass theboostLeveloption to the underlying QR code encoding function.
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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| 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 pull request 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. ↩
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #144 +/- ##
==========================================
+ Coverage 80.00% 80.08% +0.08%
==========================================
Files 6 6
Lines 670 673 +3
Branches 164 165 +1
==========================================
+ Hits 536 539 +3
Misses 134 134 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Code Review
This pull request introduces a boostLevel property to potentially increase the error correction level and adds support for value segmentation by allowing the value prop to be an array of strings. The implementation in the useQRCode hook is mostly correct, but I've found a critical issue where the new boostLevel prop is not passed down from the QRCodeCanvas and QRCodeSVG components, rendering the feature non-functional. I've also suggested a minor refactoring to improve code readability.
![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
🧹 Nitpick comments (9)
src/interface.ts (4)
63-64: 值支持数组：建议约束与空数组语义
- 类型建议使用只读数组以更好地兼容
as const与避免误用。- 请明确空数组的语义（当前实现若传入
[]可能最终向编码器传入空段数组，行为需确认）。可考虑如下修改：
- value: string | string[]; + value: string | readonly string[];并在注释中补充「传入空数组将按空字符串处理」等明确约定（实现侧在 hook 中兜底）。
65-71: boostLevel 文档说明到位；建议在实现侧显式默认值文档默认值是
true，实现当前依赖底层encodeSegments的形参默认值。建议在 hook 解构处显式默认为true，避免上游库将来默认变动造成行为漂移；同时在注释中注明该值映射到qrcodegen.encodeSegments的boostEcl参数。
33-36: 文案小拼写
horiztonal→horizontal。
89-93: 文案小拼写
foregtound→foreground。src/hooks/useQRCode.tsx (5)
6-8: Options.value 建议使用只读数组与对外
QRProps一致，使用readonly string[]可提升类型兼容性并减少误修改。- value: string | string[]; + value: string | readonly string[];
14-14: Options 补充注释以与对外接口对齐为
boostLevel?: boolean增补与interface.ts相同的注释，减少内部/外部 API 语义偏差。
26-27: 显式默认 boostLevel，避免依赖下游默认值直接在解构处给默认值，语义更清晰，也更抗变更。
- boostLevel, + boostLevel = true,
29-44: 空数组与分段构造：加兜底并简化实现
- 若传入
value: []，当前会得到segments = []。请确认QrCode.encodeSegments([] , ...)的行为；若不支持，应在此兜底为至少一个空字符串段。- 可用
flatMap简化段拼装。- const values = Array.isArray(value) ? value : [value]; - const segments = values.reduce<QrSegment[]>((accum, v) => { - accum.push(...QrSegment.makeSegments(v)); - return accum; - }, []); + const values = Array.isArray(value) ? (value.length ? value : ['']) : [value]; + const segments = values.flatMap(v => QrSegment.makeSegments(v));另外，这里通过传入
undefined占位maxVersion与mask可行，但可在注释中点明参数顺序，提升可读性。
43-44: 依赖项稳定性（可选）当
value为数组且每次以新引用传入时会频繁重算。可考虑引入一个稳定的valueKey（如 join 或自定义 hash）作为依赖，平衡性能与复杂度。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useQRCode.tsx(2 hunks)src/interface.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/hooks/useQRCode.tsx (3)
src/interface.ts (2)
ErrorCorrectionLevel(6-6)ImageSettings(13-56)src/libs/qrcodegen.ts (2)
QrCode(304-1101)QrSegment(108-286)src/utils.tsx (1)
ERROR_LEVEL_MAP(17-22)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/QRCodeCanvas.tsx (1)
139-140: 隐藏加载图像的可访问性微调该
已 display:none，不会被读屏；为更稳妥，建议显式从无障碍树移除：
应用此补丁：
- alt="QR-Code" + alt="" + aria-hidden="true"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/QRCodeCanvas.tsx(3 hunks)src/QRCodeSVG.tsx(2 hunks)src/hooks/useQRCode.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useQRCode.tsx
🔇 Additional comments (4)
src/QRCodeSVG.tsx (2)
27-29: 新增 boostLevel 解构与过滤 — LGTM属性已从 otherProps 中正确剔除，避免落到 上的无效 DOM 属性。
请确认 src/interface.ts 中 QRPropsSVG 已将 boostLevel?: boolean 对齐，且 README/类型声明已更新。
39-40: 透传 boostLevel 到 useQRCode：请确认默认行为如果未显式传入，确保 useQRCode 内部调用 QrCode.encodeSegments 时仍保持库的默认“提升等级”行为（通常为开启）。若底层函数对“传入 undefined”与“未传参”语义不同，建议在传参前只在 boostLevel !== undefined 时再添加该字段。
src/QRCodeCanvas.tsx (2)
29-31: 新增 boostLevel 解构与过滤 — LGTM与 SVG 版保持一致，未把无效属性透传到 。
58-59: 透传 boostLevel 到 useQRCode：确认默认兼容性同 SVG 版，请确认在未指定 boostLevel 时，底层仍采用默认的“提升等级”策略，避免行为回退。
2 participants
boostLevelprop and support value segmentation zpao/qrcode.react#374旧版：
新版：
Summary by CodeRabbit