feat(XMarkdown): streaming markdown benchmark and performance pannel

[Div627]

中文版模板 / Chinese template

🤔 This is a ...

• 🆕 New feature
• 🐞 Bug fix
• 📝 Site / documentation improvement
• 📽️ Demo improvement
• 💄 Component style improvement
• 🤖 TypeScript definition improvement
• 📦 Bundle size optimization
• ⚡️ Performance optimization
• ⭐️ Feature enhancement
• 🌐 Internationalization
• 🛠 Refactoring
• 🎨 Code style optimization
• ✅ Test Case
• 🔀 Branch merge
• ⏩ Workflow
• ⌨️ Accessibility improvement
• ❓ Other (about what?)

🔗 Related Issues

This PR implements the benchmark proposed in the RFC:

• RFC Discussion: #1313
• RFC Title: "[RFC] 流式 Markdown Benchmark"

📝 Change Log

Language	Changelog
🇺🇸 English	Implemented performance benchmarking for streaming Markdown rendering using Playwright Component Testing.
Added a debug prop to enable the built-in performance monitor (real-time FPS and memory metrics) during development.
🇨🇳 Chinese	基于 Playwright Component Testing 实现流式 Markdown 渲染的性能基准测试。
新增 debug 属性，支持在开发时启用内置性能监控器（含 FPS 与内存实时指标）。

2026-01-12.19.03.45.mov

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

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.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature_markdown_benchmark

---

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.}

[github-actions]

[gemini-code-assist]

Summary of Changes

Hello @Div627, I'm Gemini Code Assist¹! 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 a new, standardized performance benchmark for streaming Markdown rendering. It utilizes Playwright Component Testing to automate the measurement of various Markdown libraries, including x-markdown, marked, markdown-it, react-markdown, and streamdown. The goal is to provide quantifiable metrics like duration, FPS, and memory usage for incremental rendering scenarios, which will be valuable for continuous integration and informed technology selection within the frontend ecosystem.

Highlights

• New Benchmark Suite: Introduced a new performance benchmark suite specifically designed for streaming Markdown rendering, addressing a gap in quantifiable performance evaluation for incremental rendering.
• Playwright Integration: The benchmark leverages Playwright Component Testing for standardized and automated collection of performance metrics, ensuring reproducible results.
• Comprehensive Comparison: The suite compares the performance of x-markdown against other popular Markdown rendering libraries, including marked, markdown-it, react-markdown, and streamdown.
• Robust Test Data: A large and complex test.md file has been added to serve as a standardized dataset, simulating real-world Markdown content to stress-test parsers effectively.
• Metric Collection: The benchmark measures key performance indicators such as rendering duration, average FPS, and memory usage during the streaming process.

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

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. ↩

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive performance benchmark for streaming Markdown rendering using Playwright, which is a valuable addition for evaluating and comparing different rendering libraries. The overall implementation is solid. My review focuses on improving code quality, maintainability, and the robustness of the testing setup. I've included suggestions for using proper TypeScript types, avoiding hardcoded values, ensuring test failures are correctly reported, and optimizing component rendering logic within the benchmark.

[codecov]

Bundle Report

Changes will increase total bundle size by 10.83kB (0.58%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
x-markdown-array-push	117.77kB	10.83kB (10.13%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: x-markdown-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
x-markdown.min.js	7.21kB	111.41kB	6.92% ⚠️
x-markdown.min.css	3.62kB	6.36kB	131.76% ⚠️

[github-actions]

size-limit report 📦

Path	Size
packages/x/dist/antdx.min.js	441.23 KB
packages/x-sdk/dist/x-sdk.min.js	7.88 KB
packages/x-markdown/dist/x-markdown.min.js	30.5 KB (+1.59 KB 🔺)
packages/x-markdown/dist/plugins/latex.min.js	61.95 KB

[cloudflare-workers-and-pages]

Deploying ant-design-x with    Cloudflare Pages

Latest commit:	be2b3cf
Status:	✅  Deploy successful!
Preview URL:	https://bbca493d.ant-design-x.pages.dev
Branch Preview URL:	https://feature-markdown-benchmark.ant-design-x.pages.dev

View logs

[codecov]

Codecov Report

❌ Patch coverage is 99.13793% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 97.20%. Comparing base (f6073ce) to head (be2b3cf).
⚠️ Report is 1 commits behind head on feature.

Files with missing lines	Patch %	Lines
...x-markdown/src/XMarkdown/DebugPanel/DebugPanel.tsx	99.13%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           feature    #1314      +/-   ##
===========================================
+ Coverage    97.15%   97.20%   +0.05%     
===========================================
  Files          140      141       +1     
  Lines         4328     4444     +116     
  Branches      1205     1248      +43     
===========================================
+ Hits          4205     4320     +115     
- Misses         121      122       +1     
  Partials         2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	dekko@​0.2.1
	father@​4.6.13
	gh-pages@​6.3.0

View full report

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Protestware or unwanted behavior: npm es5-ext Note: This package prints a protestware console message on install regarding Ukraine for users with Russian language locale From: ? → npm/es5-ext@0.10.64 ℹ Read more on: This package | This alert | What is protestware? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Consider that consuming this package may come along with functionality unrelated to its primary purpose. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/es5-ext@0.10.64. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Protestware or unwanted behavior: npm es5-ext Note: The script attempts to run a local post-install script, which could potentially contain malicious code. The error handling suggests that it is designed to fail silently, which is a common tactic in malicious scripts. From: ? → npm/es5-ext@0.10.64 ℹ Read more on: This package | This alert | What is protestware? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Consider that consuming this package may come along with functionality unrelated to its primary purpose. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/es5-ext@0.10.64. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.

[github-actions]

⚠️ Performance benchmark report not found.

---

This comment is automatically generated by the x-markdown performance CI.