-
-
Notifications
You must be signed in to change notification settings - Fork 200
fix(theme/CodeBlockRuntime): Render SSR fallback for CodeBlockRuntime to avoid first-paint empty DOM/CLS #2902
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
✅ Deploy Preview for rspress-v2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
c609ca1 to
a7e3b7d
Compare
Rsdoctor Bundle Diff Analysis📊 Quick Summary (Click to expand)
📁 webPath:
📦 Download Diff Report: web Bundle Diff Generated by Rsdoctor GitHub Action |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This pull request adds server-side rendering (SSR) fallback support to the CodeBlockRuntime component to prevent empty DOM on first paint and avoid Cumulative Layout Shift (CLS) issues during static site generation.
Key Changes:
- Implemented a lightweight fallback that renders unhighlighted code immediately during SSR, preventing empty DOM until Shiki syntax highlighting completes
- Added explicit prop flow for
wrapCode,lineNumbers, and button group properties through both fallback and highlighted rendering paths - Extended E2E test coverage with a new test suite that verifies SSG output renders correctly with JavaScript disabled
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
packages/core/src/theme/components/CodeBlockRuntime/index.tsx |
Added useMemo-based fallback rendering with SSR-compatible <pre><code> structure; restructured prop handling to explicitly pass through wrapCode and lineNumbers |
packages/core/src/theme/components/CodeBlock/index.scss |
Converted pixel units to rem units for improved accessibility and consistency (margins and padding) |
e2e/fixtures/code-block-runtime/index.test.ts |
Added new test suite for SSG scenario that verifies static HTML renders code content when JavaScript is disabled |
scripts/dictionary.txt |
Added 'domcontentloaded' to the spell-check dictionary for the new test code |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: SoonIter <[email protected]>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.