Allow passing ReactElement to errors/warnings and validation messages

[Komoszek]

Currently ReactElement can only be passed to message in the rules passed to the Field. This PR fixes types a bit, which in turn means that ReactElement can also be passed to warnings/errors/validation messages and getFieldError/getFieldsError/getFieldWarning have correct return types.

Summary by CodeRabbit

发布说明

• 新功能

  • 表单验证的错误/警告消息现在支持 React 元素，可在验证提示中展示富文本、图标或链接，提升展示能力与用户体验。

• 重构

  • 表单查询/验证相关的错误与警告接口已统一为更丰富的消息类型，相关 API 返回与事件会携带该富消息格式（可能影响依赖旧字符串数组的集成）。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel[bot]]

@Komoszek is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit 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

引入公开类型 Message = string | ReactElement，并将表单系统中所有错误/警告相关类型从 string[] 迁移为 Message[]，同时同步更新 Field、useForm、interface 及示例代码的签名和内部验证/聚合路径。

Changes

内聚体 / 文件(s)	变更总结
类型系统新增 src/interface.ts	新增导出类型 `Message = string
字段实现与状态 src/Field.tsx	导入 Message 类型；EMPTY_ERRORS/EMPTY_WARNINGS 类型改为 never[]；字段状态 errors/warnings 从 string[] -> Message[]；验证 promise 类型从 Promise<string[]> -> Promise<RuleError[]>，本地 nextErrors/nextWarnings 改为 Message[]。
表单存储 / API src/useForm.ts	导入 Message；getFieldError/getFieldWarning 返回类型由 string[] -> Message[]；内部缓存、聚合与通知流程改为处理 Message[]；验证结果与合并逻辑调整为基于新的错误类型。
示例与文档 docs/examples/validate-perf.tsx	更新导入以使用新的 Message 类型；示例中 onPasswordError 的 errors 参数由 string[] -> Message[]。

Sequence Diagram(s)

sequenceDiagram
  participant App as 应用
  participant Form as FormStore
  participant Field as Field
  participant Rule as ValidatorRule

  rect rgb(230,245,255)
    Note over App,Form: 用户触发验证/提交
    App->>Form: validateFields()
    Form->>Field: validateRules()
    Field->>Rule: run validators
    Rule-->>Field: 返回 RuleError { errors: Message[] }
    Field-->>Form: resolve validatePromise with RuleError[]
  end

  rect rgb(235,255,230)
    Note over Form,Field: 汇总并通知
    Form->>Form: merge FieldError.errors (Message[])
    Form->>App: notify onFieldsChange / onFinish with Message[]
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 分钟

• 需重点检查文件与接口间的类型一致性和向后兼容性，尤其是：
  • src/interface.ts 中 Message 类型及其在所有导出接口的正确应用
  • src/Field.tsx 中验证 promise 与 RuleError 的类型传播
  • src/useForm.ts 中缓存、聚合与通知逻辑在类型变更后的正确性
  • 与现有自定义验证器（仍返回 string）的兼容处理

Possibly related PRs

• react-component/field-form#748 — 修改了 ValidateErrorEntity 的结构并涉及验证错误字段，代码层面与本次错误类型演进直接相关。

Suggested reviewers

• zombieJ

走过一遍

该拉取请求引入了新的 Message 类型定义（string | ReactElement），并将整个表单验证系统中的错误和警告类型从 string[] 改为 Message[]，包括字段元数据、验证规则、表单实例方法和内部验证流程。

诗歌

🐰 消息不再只是字符串，

也能是元素轻盈舞，
验证流中新语义，
错误花样更芳馨，
小白兔为改动欢欣~ 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题清晰准确地概括了此次变更的主要目标：允许在错误/警告和验证消息中传递ReactElement类型。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e197dea5d228027ce0b03d77c341b562fced28fc and edb3477181bd9fae2e57728d5e9f726a66e066fb.

📒 Files selected for processing (1)

• src/useForm.ts (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/useForm.ts (2)

src/interface.ts (3)

• NamePath (7-7)
• Message (12-12)
• FieldError (129-133)

src/utils/valueUtil.ts (1)

• getNamePath (15-17)

🔇 Additional comments (6)

src/useForm.ts (6)

19-19: 正确引入 Message 类型。

引入 Message 类型以支持错误和警告消息使用 string | ReactElement，与 interface.ts 中的类型定义保持一致。

---

386-392: 正确更新 getFieldError 返回类型。

返回类型从 string[] 更新为 Message[]，与 FieldError 接口中的 errors 字段类型一致。

---

394-400: 正确更新 getFieldWarning 返回类型。

返回类型从 string[] 更新为 Message[]，与 FieldError 接口中的 warnings 字段类型一致。

---

881-890: 正确更新错误缓存类型。

缓存类型从 NameMap<string[]> 更新为 NameMap<Message[]>，与 FieldError.errors 的类型保持一致，确保在 triggerOnFieldsChange 中正确存储和检索错误消息。

---

1025-1034: 正确更新 catch 块的类型注解（已解决之前的评审意见）。

参数类型从 { name: InternalNamePath; errors: string[] }[] 更新为 FieldError[]，这与验证 Promise 链中拒绝值的实际结构一致（第 987-991 行），并且正确反映了 errors 和 warnings 字段现在是 Message[] 类型。

注意：此更改解决了之前评审中标记的类型不一致问题。

---

975-999: 类型更新已验证，确认无误。

验证结果显示，RuleError 接口中的 errors 字段确实已定义为 Message[] 类型（src/interface.ts 第 136 行）。这与 src/useForm.ts 中 mergedErrors 和 mergedWarnings 的类型更新完全一致。

代码流程正确：

• 从 ruleErrors 数组迭代访问 errors 属性（类型为 Message[]）
• 将这些错误正确地推送到相应的 merged* 数组中
• 最终在 FieldError 对象中使用这些类型一致的数组

无需进一步调整。

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist[bot]]

Summary of Changes

Hello @Komoszek, I'm Gemini Code Assist[^1]! 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 significantly enhances the flexibility of message handling within the form validation system by allowing React elements to be used directly in error, warning, and general validation messages. This change involves a comprehensive update to the type definitions across the codebase, ensuring that the API correctly reflects this new capability and provides a more consistent developer experience.

Highlights

• Enhanced Message Flexibility: The system now supports passing ReactElement directly to error, warning, and validation messages, expanding beyond the previous limitation of only rules.message.
• Type System Alignment: Return types for getFieldError, getFieldsError, and getFieldWarning have been updated to correctly reflect the ability to return ReactElements, ensuring type safety and consistency across the API.
• New Message Type Definition: A new Message type has been introduced, defined as string | ReactElement, to centralize and simplify type declarations for all message-related properties and methods.

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 :thumbsup: and :thumbsdown: 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.

[^1]: 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.

[Komoszek]

@zombieJ what do you think?