nutui-react
nutui-react copied to clipboard
jdf2e
feat: configprovider
🤔 这个变动的性质是？
- [x] 新特性提交
- [ ] 日常 bug 修复
- [ ] 站点、文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] TypeScript 定义更新
- [ ] 包体积优化
- [ ] 性能优化
- [ ] 功能增强
- [ ] 国际化改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他改动（是关于什么的改动？）
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
⚠️ 请自检并全部勾选全部选项。⚠️
- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] fork仓库代码是否为最新避免文件冲突
- [ ] Files changed 没有 package.json lock 等无关文件
Summary by CodeRabbit
- Refactor
- 优化了多语言支持，提升了国际化文本显示的一致性和灵活性，让各语言版本呈现更加统一流畅的用户体验。
- 改进了配置管理模块，简化了主题、方向等设置，使定制化配置更直观，系统整体稳定性得到增强。
- 引入可选链操作符，增强了组件在处理未定义属性时的健壮性，减少潜在的运行时错误。
Walkthrough
此 PR 主要移除了旧的 BaseLang 接口，并在各处将类型声明从 BaseLang 更改为新的 Locales 类型。相关的本地化文件、配置组件以及类型定义文件均作了相应调整，包括更新 import 语句、接口签名和默认配置对象等。同时，对配置提供者（ConfigProvider）的实现和导出进行了重构，以增强类型的灵活性和安全性。
Changes
| 文件 | 变更摘要 |
|---|---|
src/locales/en-US.ts, src/locales/id-ID.ts,src/locales/tr-TR.ts,src/locales/zh-CN.ts, src/locales/zh-TW.ts, src/locales/zh-UG.ts |
更新类型声明，从 BaseLang 更改为 Locales；同时更新对应 import 语句，内容保持不变。 |
src/packages/configprovider/configprovider.taro.tsx |
移除 ConfigProviderProps 接口，改用 TaroConfigProviderProps<Locales>；更新 defaultConfigRef、setDefaultConfig、Context 类型及组件 prop 定义。 |
src/packages/configprovider/configprovider.tsx |
移除 ConfigProviderProps 接口，改用 WebConfigProviderProps<Locales>；修改 defaultConfigRef、setDefaultConfig、Context 以及组件 prop 类型，并更新相关断言。 |
src/packages/configprovider/index.taro.ts,src/packages/configprovider/index.ts |
更新导出类型，将原有的 ConfigProviderProps 和 ConfigProviderDirection 替换为新的类型（分别为 TaroConfigProviderProps/WebConfigProviderProps<Locales> 和 PageDirection as ConfigProviderDirection）。 |
src/types/base/locales.ts |
修改 BaseLang 接口允许包含 object 类型，并新增 Locales 接口以扩展部分 BaseLang 属性，细化各个本地化字符串的定义。 |
src/types/spec/configprovider/base.ts,src/types/spec/configprovider/h5.ts,src/types/spec/configprovider/taro.ts |
调整配置接口：采用泛型参数，使 locale 属性使用新的 Locales 类型，同时将 theme 修改为可选属性，增强了类型灵活性。 |
Sequence Diagram(s)
sequenceDiagram
participant UI as 组件
participant CP as ConfigProvider
participant CTX as ConfigContext
UI->>CP: 初始化并传入配置
CP->>CTX: 合并配置并调用 setDefaultConfig
UI->>CTX: 通过 useContext 获取最新配置
Possibly related PRs
- jdf2e/nutui-react#2666: 该 PR 涉及移除
BaseLang接口并替换为Locales类型，与本 PR 中对AvatarCropper组件本地化的改进直接相关。 - jdf2e/nutui-react#2597: 该 PR 添加了新的属性到
BaseLang接口，与本 PR 中对BaseLang接口的移除直接相关。 - jdf2e/nutui-react#2954: 该 PR 关注类型定义和组件如
FixedNav、Dialog和Overlay的属性处理，与本 PR 中的类型管理重构相关。
Suggested reviewers
- oasis-cloud
Poem
我是一只快乐的小兔，跳跃在代码的森林中，
更新类型如拓荒，迎来崭新的光风，
旧接口已随风散去，新接口遍地芬芳，
配置流转顺畅无阻，组件展现新模样，
编程世界趣味多，让我们共赏这变革的乐章！
🐇🌸
[!TIP]
⚡💬 Agentic Chat (Pro Plan, General Availability)
- We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.
✨ Finishing Touches
- [ ] 📝 Generate Docstrings
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
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)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai planto trigger planning for file edits and PR creation.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
Codecov Report
Attention: Patch coverage is 67.41573% with 29 lines in your changes missing coverage. Please review.
Project coverage is 86.51%. Comparing base (
ed2cda9) to head (cc878c8). Report is 1 commits behind head on feat_v3.x.
:x: Your patch check has failed because the patch coverage (67.41%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.
Additional details and impacted files
@@ Coverage Diff @@
## feat_v3.x #3180 +/- ##
=============================================
- Coverage 86.61% 86.51% -0.10%
=============================================
Files 289 289
Lines 18742 18765 +23
Branches 2822 2828 +6
=============================================
+ Hits 16233 16235 +2
- Misses 2504 2524 +20
- Partials 5 6 +1
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
不建议使用 extends 继承，因为在实际使用 configprovider 时，我们需要设计新的 locales 类型，如下面代码中给出的注释。
import { BaseProps } from '../../base/props'
import { Locales, PageDirection } from '../../base/locales'
import enUS from '../../../locales/en-US'
export interface BaseConfigProvider<T = Locales> extends BaseProps {
locale: T
direction: PageDirection
theme?: Record<string, string>
}
// 基础组件库部使用
const a: BaseConfigProvider = {
locale: enUS,
direction: 'ltr',
}
console.log(a)
// <ConfigProvider locale={enUs}>
// <Address />
// </ConfigProvider>
// 业务组件库使用
interface BizLocales {
sku: string
}
const bizEnUS: BizLocales = {
sku: '商品编号',
}
const a1: BaseConfigProvider<BizLocales> = {
locale: bizEnUS,
direction: 'ltr',
}
console.log(a1)
// <ConfigProvider locale={enUs & bizEnUS}>
// <Sku />
// </ConfigProvider>
// const { locale } = useConfig()
// <View>
// <InputNUmber />
// {locale.sku}
// </View>
