Skip to content

fix(vapor): infer component multi-root metadata from SFC templates for hydration#14530

Open
edison1105 wants to merge 26 commits intominorfrom
edison/fix/vdomHydrationFix
Open

fix(vapor): infer component multi-root metadata from SFC templates for hydration#14530
edison1105 wants to merge 26 commits intominorfrom
edison/fix/vdomHydrationFix

Conversation

@edison1105
Copy link
Member

@edison1105 edison1105 commented Mar 6, 2026

This PR makes Vapor hydration consume SSR fragment starts more precisely by adding explicit structural metadata from the compiler instead of relying on runtime heuristics.

On the compiler side, Vapor SFCs now receive __multiRoot metadata, and createIf codegen now carries blockShape so each branch can describe whether it owns a fragment wrapper. On the runtime side, Vapor hydration uses this metadata to determine whether the current belongs to the current component / v-if branch and can be consumed immediately during creation, which fixes several nested multi-root and interop hydration edge cases.

@coderabbitai
Copy link

coderabbitai bot commented Mar 6, 2026

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.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 743c2b1a-a460-4fe8-aa3d-71d459aa938c

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

Use the checkbox below for a quick retry:

  • ✅ Review completed - (🔄 Check again to review again)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch edison/fix/vdomHydrationFix

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 6, 2026

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14530
npm i https://pkg.pr.new/@vue/compiler-core@14530
yarn add https://pkg.pr.new/@vue/compiler-core@14530.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14530
npm i https://pkg.pr.new/@vue/compiler-dom@14530
yarn add https://pkg.pr.new/@vue/compiler-dom@14530.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14530
npm i https://pkg.pr.new/@vue/compiler-sfc@14530
yarn add https://pkg.pr.new/@vue/compiler-sfc@14530.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14530
npm i https://pkg.pr.new/@vue/compiler-ssr@14530
yarn add https://pkg.pr.new/@vue/compiler-ssr@14530.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14530
npm i https://pkg.pr.new/@vue/compiler-vapor@14530
yarn add https://pkg.pr.new/@vue/compiler-vapor@14530.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14530
npm i https://pkg.pr.new/@vue/reactivity@14530
yarn add https://pkg.pr.new/@vue/reactivity@14530.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14530
npm i https://pkg.pr.new/@vue/runtime-core@14530
yarn add https://pkg.pr.new/@vue/runtime-core@14530.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14530
npm i https://pkg.pr.new/@vue/runtime-dom@14530
yarn add https://pkg.pr.new/@vue/runtime-dom@14530.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14530
npm i https://pkg.pr.new/@vue/runtime-vapor@14530
yarn add https://pkg.pr.new/@vue/runtime-vapor@14530.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14530
npm i https://pkg.pr.new/@vue/server-renderer@14530
yarn add https://pkg.pr.new/@vue/server-renderer@14530.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14530
npm i https://pkg.pr.new/@vue/shared@14530
yarn add https://pkg.pr.new/@vue/shared@14530.tgz

vue

pnpm add https://pkg.pr.new/vue@14530
npm i https://pkg.pr.new/vue@14530
yarn add https://pkg.pr.new/vue@14530.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14530
npm i https://pkg.pr.new/@vue/compat@14530
yarn add https://pkg.pr.new/@vue/compat@14530.tgz

commit: 132b8eb

@github-actions
Copy link

github-actions bot commented Mar 6, 2026

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 86.4 kB 30.2 kB 26.6 kB
runtime-dom.global.prod.js 110 kB 41.6 kB 37.3 kB
vue.global.prod.js 169 kB 61.4 kB 54.7 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 50.3 kB 19.7 kB 18 kB
createApp 59.3 kB 23 kB 20.9 kB
createApp + vaporInteropPlugin 83.4 kB (+1 B) 30.9 kB (-5 B) 28 kB (+16 B)
createVaporApp 28.8 kB (+5 B) 11.2 kB (+2 B) 10.2 kB (-1 B)
createSSRApp 63.5 kB 24.7 kB 22.4 kB
createVaporSSRApp 32.3 kB (+87 B) 12.5 kB (+64 B) 11.5 kB (+56 B)
defineCustomElement 65.3 kB 24.8 kB 22.5 kB
defineVaporCustomElement 39.2 kB (+88 B) 14.5 kB (+56 B) 13.3 kB (+56 B)
overall 74.2 kB 28.3 kB 25.7 kB

@edison1105 edison1105 added scope: vapor related to vapor mode interop vdom / vapor interop labels Mar 6, 2026
@edison1105 edison1105 changed the title fix(runtime-vapor): only skip fragment start anchor when cursor is at the container's first child fix(runtime-vapor): align hydration cursor for multi-root VDOM interop Mar 6, 2026
@edison1105 edison1105 changed the title fix(runtime-vapor): align hydration cursor for multi-root VDOM interop fix(runtime-vapor): align hydration node for multi-root VDOM interop Mar 6, 2026
@edison1105 edison1105 changed the title fix(runtime-vapor): align hydration node for multi-root VDOM interop fix(vapor): infer component multi-root metadata from SFC templates for hydration Mar 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

interop vdom / vapor interop scope: vapor related to vapor mode

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant