fix(compiler-ssr): handle ssr attr fallthrough when preserve whitespace

[edison1105]

close #8072

Summary by CodeRabbit

• Bug Fixes

  • Improved server-side rendering of fallthrough component content when whitespace or comments are present, ensuring consistent output for conditional branches.

• Tests

  • Added coverage verifying whitespace-preserving rendering of fallthrough components with conditional content.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB	38.9 kB	35.1 kB
vue.global.prod.js	161 kB	58.8 kB	52.4 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.8 kB
createApp	55 kB	21.4 kB	19.6 kB
createSSRApp	59.3 kB	23.1 kB	21.1 kB
defineCustomElement	60.6 kB	23.1 kB	21.1 kB
overall	69.3 kB	26.6 kB	24.3 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12304

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12304

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12304

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12304

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12304

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12304

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12304

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12304

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12304

vue

npm i https://pkg.pr.new/vue@12304

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12304

commit: b58dfa9

[coderabbitai]

Walkthrough

Updates SSR fallthrough attribute injection to ignore comment and whitespace nodes when detecting single-child fallthroughs; adds a test asserting correct rendering with whitespace: 'preserve' for v-if/v-else component branches.

Changes

Cohort / File(s)	Summary
Test Coverage packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts	Added test "fallthrough component content (with whitespace: 'preserve')" verifying SSR fallthrough attributes and identical output for v-if/v-else branches when whitespace is preserved.
Transform Logic packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts	Broadened child-filtering to exclude comment and whitespace nodes (via isCommentOrWhitespace) instead of filtering only COMMENT nodes, affecting single-child detection for fallthrough attribute injection.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Compiler as SSR Compiler
  participant Transform as ssrInjectFallthroughAttrs
  participant AST as Component AST
  participant Renderer as SSR Renderer

  Compiler->>Transform: pass AST for component
  note right of Transform `#DFF2E1`: filter children\n(using isCommentOrWhitespace)
  Transform->>AST: filter children (ignore comments & whitespace)
  alt single visible child detected
    Transform->>AST: inject fallthrough attrs (ssrRenderAttrs)
  else multiple/none
    Transform-->>AST: no injection
  end
  Transform->>Renderer: emit SSR code
  Renderer->>Renderer: render final HTML

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Pay attention to: the filtering predicate change in ssrInjectFallthroughAttrs.ts and its interaction with adjacent conditional branch detection; verify the new test covers the reported whitespace-preserve scenario.

Possibly related PRs

• fix(compiler): share logic for comments and whitespace #13550 — Introduces/uses the shared isCommentOrWhitespace predicate that this transform now imports and applies.
• fix(compiler-core): ignore whitespace when matching adjacent v-if #12321 — Similar traversal change to ignore whitespace/comments when matching adjacent v-if/v-else branches in compiler core; conceptually related.

Poem

🐰
I hopped through ASTs with gentle care,
Chased comments and spaces out of the lair,
Now fallthrough attrs find their home,
No more lost classes when branches roam,
Quietly nibbling bugs with flair. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the fix: handling SSR attribute fallthrough when whitespace is set to 'preserve', which directly matches the main change in the PR.
Linked Issues check	✅ Passed	The PR successfully addresses issue #8072 by fixing attribute fallthrough in SSR when whitespace is preserved, updating filterChild logic to exclude whitespace nodes alongside comments.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the issue: a test case for the whitespace preservation scenario and a targeted fix in ssrInjectFallthroughAttrs.ts to handle whitespace filtering.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/fix/8072

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a206058 and b58dfa9.

📒 Files selected for processing (1)

• packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: test / e2e-test

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts (1)

13-16: Fix the filterChild function to preserve non-whitespace TEXT nodes at the root level.

The current implementation incorrectly filters out all TEXT nodes, causing fallthrough attributes to be injected when there's actual text content at the root level. This violates Vue 3's single-root behavior: multiple root nodes (including non-whitespace text) should not receive fallthrough attributes.

The missing test case confirms this scenario is not covered: root-level non-whitespace text combined with v-if/v-else branches. Apply the suggested fix at packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts lines 13-16:

 const filterChild = (node: ParentNode) =>
   node.children.filter(
-    n => n.type !== NodeTypes.COMMENT && n.type !== NodeTypes.TEXT,
+    n => 
+      n.type !== NodeTypes.COMMENT && 
+      (n.type !== NodeTypes.TEXT || n.content.trim() !== ''),
   )

🧹 Nitpick comments (1)

packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts (1)

51-74: LGTM! Test validates the fix for issue #8072.

The test correctly validates that when whitespace: 'preserve' is enabled, whitespace between v-if/v-else elements doesn't prevent fallthrough attribute injection. Both branches properly receive _ssrRenderAttrs(_attrs) in the output.

Consider adding an edge case test to ensure non-whitespace text content at the root level prevents fallthrough attribute injection:

test('should not inject with non-whitespace text and v-if', () => {
  expect(
    compile(
      `Text content
      <div v-if="condition">Branch A</div>
      <div v-else>Branch B</div>`,
      { whitespace: 'preserve' }
    ).code
  ).not.toContain('_ssrRenderAttrs(_attrs)')
})

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8f82f23 and a206058.

📒 Files selected for processing (2)

• packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts (1 hunks)
• packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts (1 hunks)