为 #1949 补充 loading 隔离单测和 demo - #1982
Conversation
…#1949 Add unit tests verifying streamStatus is isolated per component instance: - Renderer-level: different/same tag names, interleaved, nested, self-closing - Full pipeline: Parser + DOMPurify + html-react-parser - XMarkdown component: streaming loading/done transitions Add demo showing multiple custom components with independent loading states. Closes ant-design#1949
📝 WalkthroughWalkthrough新增自定义组件实例级 Changes加载状态隔离
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Bubble
participant XMarkdown
participant DataCard
participant InfoPanel
Bubble->>XMarkdown: 按 index 提供流式内容
XMarkdown->>DataCard: 传递独立 streamStatus
XMarkdown->>InfoPanel: 传递独立 streamStatus
DataCard-->>XMarkdown: 渲染 loading 或 done
InfoPanel-->>XMarkdown: 渲染 loading 或 done
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![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 tests and a demo to verify and showcase loading isolation for multiple custom components during streaming (Issue #1949). Specifically, it adds a comprehensive test suite in loading-isolation.test.tsx, a demo application in multi-component-loading.tsx, and updates the corresponding documentation. The review feedback suggests improving the demo's theme detection by inspecting token colors instead of relying on the fragile theme.id property, and refactoring the test suite to use afterEach for restoring mocks to prevent test pollution if assertions fail.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const { theme: antdTheme } = theme.useToken(); | ||
| const className = antdTheme.id === 0 ? 'x-markdown-light' : 'x-markdown-dark'; |
There was a problem hiding this comment.
在 Ant Design v5 中，theme.useToken() 返回的 theme.id 是 @ant-design/cssinjs 内部用于缓存主题的自增标识符。依赖 antdTheme.id === 0 来判断是否为亮色主题是非常脆弱且不可靠的。例如，如果页面中存在多个 ConfigProvider，或者进行了动态主题切换，亮色主题的 id 可能会变成其他数字，导致主题样式判断错误。
建议通过判断 Token 中的颜色值（例如 token.colorBgContainer 是否为暗色背景）来更可靠地判断当前是否为暗色模式。
| const { theme: antdTheme } = theme.useToken(); | |
| const className = antdTheme.id === 0 ? 'x-markdown-light' : 'x-markdown-dark'; | |
| const { token } = theme.useToken(); | |
| const isDark = token.colorBgContainer === '#141414' || token.colorBgContainer === '#000'; | |
| const className = isDark ? 'x-markdown-dark' : 'x-markdown-light'; |
| streamStatus: string; | ||
| } | ||
|
|
||
| describe('Loading isolation (Issue #1949)', () => { |
There was a problem hiding this comment.
在测试用例中，每个 it 块内部都使用了 jest.spyOn(React, 'createElement') 并在末尾调用了 spy.mockRestore()。然而，如果测试中的断言（expect）失败，代码将提前抛出错误，导致后面的 spy.mockRestore() 无法执行。这会造成测试污染，影响后续其他测试用例的执行。
建议在 describe 块中使用 afterEach 来统一恢复所有的 mock，这样即使断言失败也能保证清理工作正常执行。
| describe('Loading isolation (Issue #1949)', () => { | |
| describe('Loading isolation (Issue #1949)', () => { | |
| afterEach(() => { | |
| jest.restoreAllMocks(); | |
| }); |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/docs/x-markdown/demo/streaming/multi-component-loading.tsx`:
- Line 77: Update the InfoPanel text in the multi-component loading demo to say
it “loads independently” instead of “downloads independently,” preserving the
rest of the message unchanged.
🪄 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
Run ID: d59e0a24-8fda-4ccd-b7d2-ad276ddfc697
📒 Files selected for processing (4)
packages/x-markdown/src/XMarkdown/__tests__/loading-isolation.test.tsxpackages/x/docs/x-markdown/demo/streaming/multi-component-loading.tsxpackages/x/docs/x-markdown/streaming.en-US.mdpackages/x/docs/x-markdown/streaming.zh-CN.md
|
|
||
| Some text between components. | ||
|
|
||
| <info-panel>Component B: This info panel downloads independently.</info-panel> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
将 “downloads independently” 改为 “loads independently”。
当前文案错误地表示 InfoPanel 会独立“下载”，与演示的 loading 状态含义不符。
-<info-panel>Component B: This info panel downloads independently.</info-panel>
+<info-panel>Component B: This info panel loads independently.</info-panel>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <info-panel>Component B: This info panel downloads independently.</info-panel> | |
| <info-panel>Component B: This info panel loads independently.</info-panel> |
🤖 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/demo/streaming/multi-component-loading.tsx` at
line 77, Update the InfoPanel text in the multi-component loading demo to say it
“loads independently” instead of “downloads independently,” preserving the rest
of the message unchanged.
1 participant
Closes #1949
背景
XMarkdown 在流式渲染时，多个自定义组件的
streamStatus（loading/done）需要按组件实例隔离，而非按标签名共享。PR #1590 已修复核心逻辑，本 PR 补充验收所需的测试和 demo。改动内容
单测（
loading-isolation.test.tsx）：13 个测试用例，覆盖三层验证：Demo（
multi-component-loading.tsx）：展示多个自定义组件在流式渲染中各自独立 loading 的效果Summary by CodeRabbit
Bug 修复
loading或完成状态，状态会随对应标签闭合及流式结束正确更新。文档