feat(x-markdown): add componentsProps to pass extra props to custom components - #1993
Open
Div627 wants to merge 1 commit into
Open
feat(x-markdown): add componentsProps to pass extra props to custom components#1993Div627 wants to merge 1 commit into
Div627 wants to merge 1 commit into
Conversation
…omponents Custom components registered via `components` could only receive extra business data (theme, callbacks, etc.) through inline wrapper functions, which create a new component type on every render and force React to unmount/remount the whole subtree — losing internal state and hurting performance in streaming scenarios. `componentsProps` passes extra props by tag name while keeping component references stable. Extra props are merged over parsed HTML attributes at element creation; internally computed fields (children, and block / streamStatus / lang for code) still win. The generated reconciliation key is now always applied last so it can never be clobbered. close #1989 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dosubot
Bot
added
enhancement
Contributor
📝 WalkthroughWalkthroughXMarkdown 新增 ChangescomponentsProps 支持
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant XMarkdown
participant Renderer
participant CustomComponent
XMarkdown->>Renderer: 传入 componentsProps
Renderer->>Renderer: 按组件名称合并组件属性
Renderer->>CustomComponent: 传递最终 props
XMarkdown->>Renderer: 更新 componentsProps
Renderer->>CustomComponent: 更新 props
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Contributor
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
Bundle ReportChanges will increase total bundle size by 8 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antdx-array-pushAssets Changed:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/x-markdown/src/XMarkdown/core/Renderer.ts`:
- Around line 206-207: 调整 Renderer 中构造组件 props 的合并顺序：先合并解析出的属性与
componentsProps，再写入内部生成的 domNode 和 streamStatus，确保额外 props 无法覆盖内部字段。处理 className
时让 componentsProps.className 覆盖 HTML 解析出的 class，而不是进行拼接。补充覆盖
domNode、streamStatus 及 className 冲突场景的测试。
In `@packages/x/docs/x-markdown/components.zh-CN.md`:
- Line 56: Update the props-priority wording at
packages/x/docs/x-markdown/components.zh-CN.md:56-56 to state that
componentsProps only overrides parsed HTML attributes, while internally computed
children, key, and code-component fields block, lang, and streamStatus retain
priority. Apply the equivalent clarification at
packages/x/docs/x-markdown/components.en-US.md:56-56, keeping both language
versions consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9f04e5be-3bec-4450-96aa-26cd8f573d03
📒 Files selected for processing (8)
packages/x-markdown/src/XMarkdown/__tests__/index.test.tsxpackages/x-markdown/src/XMarkdown/core/Renderer.tspackages/x-markdown/src/XMarkdown/index.tsxpackages/x-markdown/src/XMarkdown/interface.tspackages/x/docs/x-markdown/components.en-US.mdpackages/x/docs/x-markdown/components.zh-CN.mdpackages/x/docs/x-markdown/examples.en-US.mdpackages/x/docs/x-markdown/examples.zh-CN.md
Comment on lines
+206
to
+207
| ...this.options.componentsProps?.[name], | ||
| key, |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
修正 componentsProps 的优先级顺序。
当前实现允许额外 props 覆盖内部生成的 domNode 和 streamStatus；同时，componentsProps.className 会与 HTML 的 class 拼接而非覆盖。应先合并解析属性与额外 props，再写入内部字段，并让额外 class 属性覆盖解析出的 class。补充这些冲突场景的测试。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/x-markdown/src/XMarkdown/core/Renderer.ts` around lines 206 - 207,
调整 Renderer 中构造组件 props 的合并顺序：先合并解析出的属性与 componentsProps，再写入内部生成的 domNode 和
streamStatus，确保额外 props 无法覆盖内部字段。处理 className 时让 componentsProps.className 覆盖
HTML 解析出的 class，而不是进行拼接。补充覆盖 domNode、streamStatus 及 className 冲突场景的测试。
| />; | ||
| ``` | ||
|
|
||
| `componentsProps` 以标签名为 key，对应的 props 会与解析出的 HTML 属性合并后传给组件（同名时 `componentsProps` 优先）。`componentsProps` 变化时组件只会正常更新 props，不会被重新挂载。 |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
同步修正文档中的 props 优先级说明。
Renderer 中 componentsProps 仅覆盖解析出的 HTML 属性；children、key 以及代码组件的 block、lang、streamStatus 会在之后由内部逻辑重新计算。当前两份文档都表述为所有冲突均由 componentsProps 覆盖，需改为明确列出内部字段仍保持优先级。
packages/x/docs/x-markdown/components.zh-CN.md#L56-L56: 将“同名时componentsProps优先”限定为解析出的 HTML 属性。packages/x/docs/x-markdown/components.en-US.md#L56-L56: 同步英文表述，说明内部计算字段不会被覆盖。
📍 Affects 2 files
packages/x/docs/x-markdown/components.zh-CN.md#L56-L56(this comment)packages/x/docs/x-markdown/components.en-US.md#L56-L56
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/x/docs/x-markdown/components.zh-CN.md` at line 56, Update the
props-priority wording at packages/x/docs/x-markdown/components.zh-CN.md:56-56
to state that componentsProps only overrides parsed HTML attributes, while
internally computed children, key, and code-component fields block, lang, and
streamStatus retain priority. Apply the equivalent clarification at
packages/x/docs/x-markdown/components.en-US.md:56-56, keeping both language
versions consistent.
Contributor
|
This comment is automatically generated by the x-markdown performance CI. |
Deploying ant-design-x with
|
| Latest commit: |
678aa34
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://68da7151.ant-design-x.pages.dev |
| Branch Preview URL: | https://feat-x-markdown-components-p.ant-design-x.pages.dev |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1993 +/- ##
=======================================
Coverage 97.06% 97.06%
=======================================
Files 159 159
Lines 5766 5766
Branches 1712 1713 +1
=======================================
Hits 5597 5597
Misses 167 167
Partials 2 2 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
size-limit report 📦
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
close #1989
💡 Background and Solution
Custom components registered via
componentscould only receive extra business data (theme, callbacks, dynamic state, …) through inline wrapper functions:This PR adds a
componentsPropsoption that passes extra props by tag name while keeping component references stable:Design notes:
renderPropsapproach suggested in the issue (callingrenderElement(props)directly instead ofReact.createElement) was intentionally not taken: it would strip custom components of their identity as real React components (hooks would attach to the parent, no reconciliation boundary).componentsPropsis a purely additive API instead — fully backward compatible.componentsPropswins on conflicts). This also matters because DOMPurify strips non-standard, non-data-*attributes (e.g.theme) from raw HTML anyway, socomponentsPropsis the reliable way to pass such data.children, andblock/streamStatus/ parsedlangforcode, protecting streaming semantics.componentsPropschanges, components receive a normal props update without remounting (covered by a mount-count test).Only applies to tags registered in
components; entries for unregistered tags are ignored.📝 Change Log
componentsPropsoption to pass extra props to custom components by tag name, keeping component references stable and avoiding remounts caused by inline functions.componentsProps选项，支持按标签名向自定义组件传递额外 props，保持组件引用稳定，避免内联函数导致的重复挂载。🤖 Generated with Claude Code
Summary by CodeRabbit
新功能
componentsProps配置，可按组件标签名向自定义组件传递额外属性。文档
componentsProps的使用方式、属性合并规则及最佳实践说明。