Skip to content

fix(site): true conditional rendering in FrameworkCase#1223

Merged
decepulis merged 1 commit intomainfrom
claude/research-frameworkcase-issue-2ZuCO
Apr 6, 2026
Merged

fix(site): true conditional rendering in FrameworkCase#1223
decepulis merged 1 commit intomainfrom
claude/research-frameworkcase-issue-2ZuCO

Conversation

@decepulis
Copy link
Copy Markdown
Collaborator

@decepulis decepulis commented Apr 6, 2026

Summary

  • Replace the hidden-div workaround in FrameworkCase.astro with Astro.slots.render() + set:html for true conditional rendering
  • Non-matching framework content is now completely absent from the DOM instead of rendered and hidden
  • Zero DOM pollution: no wrapper <div>, no hidden attribute, no data-search-ignore / data-llms-ignore attributes needed

Closes #1224

Context

The original implementation always rendered all framework variants and hid non-matching ones with the hidden attribute. This was a workaround for an Astro bug where {shouldRender && <slot />} broke hydration for the entire page.

The root cause is that Astro's <slot /> mechanism renders children (including their hydration scripts) regardless of whether the slot is actually placed in the output. When a conditional prevents the <slot /> from rendering, the hydration scripts are consumed but never emitted, breaking all client:* islands on the page.

Astro.slots.render('default') sidesteps this entirely — it's only called when shouldRender is true, so hydration scripts are never processed for content that won't be output.

Verified

  • Build completes with no errors
  • LLMs markdown output compared across 10 representative pages — identical to prod (with two minor improvements to heading rendering in reference pages)
  • DOM comparison on /docs/framework/html/concepts/overview:
    • Article payload 42% smaller (70KB → 41KB)
    • Astro islands halved (41 → 21 — hidden islands no longer hydrate)
    • Zero React-specific content leaking into HTML framework pages
    • All HTML-framework content preserved identically
    • Heading structure unchanged

Test plan

  • Verify hydration works in the browser on pages with client:* components inside FrameworkCase blocks (e.g. installation page interactive demos)
  • Verify React-only content is absent (not just hidden) on HTML framework pages and vice versa
  • Spot-check TOC filtering still works correctly

https://claude.ai/code/session_018wYM6TgaaHbvBXMRx2q9VT

…workCase

Replace the hidden-div workaround with Astro.slots.render() + set:html
to conditionally render framework-specific content. The old approach
rendered all framework variants to the DOM and hid non-matching ones,
causing DOM pollution. Upstream Astro fixes (#5032, #8222) resolved the
hydration script deduplication bug that previously broke this approach.

https://claude.ai/code/session_018wYM6TgaaHbvBXMRx2q9VT
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 6, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 265d41c
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/69d3d2fe917a6f0008181ed4
😎 Deploy Preview https://deploy-preview-1223--vjs10-site.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.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
v10-sandbox Ready Ready Preview, Comment Apr 6, 2026 3:36pm

Request Review

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 6, 2026

📦 Bundle Size Report

🎨 @videojs/html — no changes
Presets (7)
Entry Size
/video (default) 25.01 kB
/video (default + hls) 156.97 kB
/video (minimal) 24.98 kB
/video (minimal + hls) 156.92 kB
/audio (default) 23.13 kB
/audio (minimal) 23.17 kB
/background 6.93 kB
Media (7)
Entry Size
/media/background-video 1.04 kB
/media/container 1.59 kB
/media/dash-video 236.26 kB
/media/hls-video 133.40 kB
/media/mux-video 156.10 kB
/media/native-hls-video 3.54 kB
/media/simple-hls-video 15.06 kB
Players (3)
Entry Size
/video/player 6.65 kB
/audio/player 6.63 kB
/background/player 6.63 kB
Skins (17)
Entry Type Size
/video/minimal-skin.css css 3.42 kB
/video/skin.css css 3.44 kB
/video/minimal-skin js 24.98 kB
/video/minimal-skin.tailwind js 25.27 kB
/video/skin js 25.04 kB
/video/skin.tailwind js 25.37 kB
/audio/minimal-skin.css css 2.48 kB
/audio/skin.css css 2.45 kB
/audio/minimal-skin js 23.14 kB
/audio/minimal-skin.tailwind js 23.36 kB
/audio/skin js 23.13 kB
/audio/skin.tailwind js 23.46 kB
/background/skin.css css 117 B
/background/skin js 1.15 kB
/base.css css 157 B
/shared.css css 88 B
/skin-element js 1.34 kB
UI Components (22)
Entry Size
/ui/alert-dialog 2.20 kB
/ui/alert-dialog-close 1.73 kB
/ui/alert-dialog-description 1.62 kB
/ui/alert-dialog-title 1.63 kB
/ui/buffering-indicator 1.91 kB
/ui/captions-button 1.98 kB
/ui/controls 1.97 kB
/ui/error-dialog 2.40 kB
/ui/fullscreen-button 2.00 kB
/ui/mute-button 2.01 kB
/ui/pip-button 1.99 kB
/ui/play-button 1.97 kB
/ui/playback-rate-button 2.00 kB
/ui/popover 2.67 kB
/ui/poster 1.89 kB
/ui/seek-button 2.02 kB
/ui/slider 1.69 kB
/ui/thumbnail 2.28 kB
/ui/time 1.75 kB
/ui/time-slider 2.12 kB
/ui/tooltip 2.53 kB
/ui/volume-slider 2.44 kB

Sizes are marginal over the root entry point.

⚛️ @videojs/react — no changes
Presets (7)
Entry Size
/video (default) 19.99 kB
/video (default + hls) 152.25 kB
/video (minimal) 20.04 kB
/video (minimal + hls) 152.24 kB
/audio (default) 16.84 kB
/audio (minimal) 16.87 kB
/background 3.15 kB
Media (6)
Entry Size
/media/background-video 476 B
/media/dash-video 236.38 kB
/media/hls-video 133.35 kB
/media/mux-video 156.26 kB
/media/native-hls-video 3.50 kB
/media/simple-hls-video 15.03 kB
Skins (14)
Entry Type Size
/video/minimal-skin.css css 3.35 kB
/video/skin.css css 3.37 kB
/video/minimal-skin js 19.95 kB
/video/minimal-skin.tailwind js 23.45 kB
/video/skin js 19.92 kB
/video/skin.tailwind js 23.49 kB
/audio/minimal-skin.css css 2.38 kB
/audio/skin.css css 2.34 kB
/audio/minimal-skin js 16.77 kB
/audio/minimal-skin.tailwind js 19.23 kB
/audio/skin js 16.71 kB
/audio/skin.tailwind js 19.25 kB
/background/skin.css css 90 B
/background/skin js 272 B
UI Components (19)
Entry Size
/ui/alert-dialog 2.01 kB
/ui/buffering-indicator 1.75 kB
/ui/captions-button 1.89 kB
/ui/controls 1.69 kB
/ui/error-dialog 2.15 kB
/ui/fullscreen-button 1.83 kB
/ui/mute-button 1.84 kB
/ui/pip-button 1.88 kB
/ui/play-button 1.83 kB
/ui/playback-rate-button 1.91 kB
/ui/popover 3.43 kB
/ui/poster 1.56 kB
/ui/seek-button 1.88 kB
/ui/slider 3.66 kB
/ui/thumbnail 1.87 kB
/ui/time 1.94 kB
/ui/time-slider 3.23 kB
/ui/tooltip 2.76 kB
/ui/volume-slider 3.22 kB

Sizes are marginal over the root entry point.

🧩 @videojs/core — no changes
Entries (8)
Entry Size
. 5.29 kB
/dom 9.03 kB
/dom/media/custom-media-element 1.82 kB
/dom/media/dash 235.76 kB
/dom/media/hls 132.94 kB
/dom/media/mux 155.60 kB
/dom/media/native-hls 2.90 kB
/dom/media/simple-hls 14.45 kB
🏷️ @videojs/element — no changes
Entries (2)
Entry Size
. 999 B
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Size
. 1.39 kB
/html 696 B
/react 360 B
🔧 @videojs/utils — no changes
Entries (10)
Entry Size
/array 104 B
/dom 1.53 kB
/events 319 B
/function 327 B
/object 247 B
/predicate 265 B
/string 148 B
/style 190 B
/time 478 B
/number 158 B
📦 @videojs/spf — no changes
Entries (3)
Entry Size
. 40 B
/dom 12.45 kB
/playback-engine 12.41 kB

ℹ️ How to interpret

All sizes are standalone totals (minified + brotli).

Icon Meaning
No change
🔺 Increased ≤ 10%
🔴 Increased > 10%
🔽 Decreased
🆕 New (no baseline)

Run pnpm size locally to check current sizes.

@decepulis decepulis marked this pull request as ready for review April 6, 2026 15:52
Copy link
Copy Markdown
Collaborator Author

@decepulis decepulis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude is my hero

@decepulis decepulis merged commit 55a0755 into main Apr 6, 2026
21 checks passed
@decepulis decepulis deleted the claude/research-frameworkcase-issue-2ZuCO branch April 6, 2026 15:55
decepulis added a commit that referenced this pull request Apr 13, 2026
decepulis added a commit that referenced this pull request Apr 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: FrameworkCase Renders Non-Matching Content to the DOM

2 participants