Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 17, 2025

  • Understand current CodeBlockRuntime rendering and SSR gap
  • Run existing CodeBlockRuntime tests to establish baseline
  • Implement SSR fallback to render initial code placeholder
  • Add/update targeted tests to cover initial DOM rendering (SSG + no JS)
  • Re-run relevant tests and verify behavior
Original prompt

CodeBlockRuntime 组件,现在遇到两个问题

  1. 在 SSG 时,首屏没有 dom 信息
  2. 缺少首屏,导致会触发 CLS

可以在首屏时,将 Code 放上去,即使没有高亮,作为占位


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

@netlify
Copy link

netlify bot commented Dec 17, 2025

Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit e4a74f7
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/6942ab03cb3fba0008f458bc
😎 Deploy Preview https://deploy-preview-2902--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@CLAassistant
Copy link

CLAassistant commented Dec 17, 2025

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ SoonIter
❌ Copilot
You have signed the CLA already but the status is still pending? Let us recheck it.

Copilot AI changed the title [WIP] Fix missing DOM information in SSG initial screen Render SSR fallback for CodeBlockRuntime to avoid first-paint empty DOM/CLS Dec 17, 2025
Copilot AI requested a review from SoonIter December 17, 2025 07:46
@SoonIter SoonIter force-pushed the copilot/fix-ssg-dom-issues branch from c609ca1 to a7e3b7d Compare December 17, 2025 08:33
@github-actions
Copy link
Contributor

github-actions bot commented Dec 17, 2025

Rsdoctor Bundle Diff Analysis

📊 Quick Summary (Click to expand)
Project Total Size Change
web 14.9 MB ➡️ 302.0 B (0.0%)

📁 web

Path: website/doc_build/web/rsdoctor-data.json

📌 Baseline Commit: e86fde2df5 | PR: #2319

Metric Current Baseline Change
📊 Total Size 14.9 MB 14.9 MB 302.0 B (0.0%)
📄 JavaScript 14.3 MB 14.3 MB 298.0 B (0.0%)
🎨 CSS 114.2 KB 114.2 KB 4.0 B (0.0%)
🌐 HTML 0 B 0 B N/A
📁 Other Assets 512.5 KB 512.5 KB 0 B (0.0%)

📦 Download Diff Report: web Bundle Diff

Generated by Rsdoctor GitHub Action

@SoonIter SoonIter marked this pull request as ready for review December 17, 2025 09:58
Copilot AI review requested due to automatic review settings December 17, 2025 09:58
Copy link
Contributor

Copilot AI left a 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.

Copy link
Contributor Author

Copilot AI commented Dec 17, 2025

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:

  • esm.ubuntu.com
    • Triggering command: /usr/lib/apt/methods/https /usr/lib/apt/methods/https (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@SoonIter SoonIter changed the title Render SSR fallback for CodeBlockRuntime to avoid first-paint empty DOM/CLS fix(theme/CodeBlockRuntime): Render SSR fallback for CodeBlockRuntime to avoid first-paint empty DOM/CLS Dec 18, 2025
@SoonIter SoonIter merged commit 33f9e83 into main Dec 18, 2025
9 of 10 checks passed
@SoonIter SoonIter deleted the copilot/fix-ssg-dom-issues branch December 18, 2025 03:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants