feat(vapor): hydration

[edison1105]

Compiler Changes

• SSR Compiler (@vue/compiler-ssr): In Vapor components:
  • Inject special comment anchors into the server-rendered HTML output. These anchors are essential markers for the client-side hydration process.
    • block node anchors:
      • <!--if--> - the anchor of if
      • <!--for--> - the anchor of for
      • <!--slot--> - the anchor of slot
      • <!--dynamic-component--> - the anchor of dynamic component
    • insertion anchors:
      • <!--[p--><!--p]--> - wrap prepend block node
      • <!--[a--><!--a]--> - wrap append block node
      • <!--[i--><!--i]--> - wrap insertion block node
  • v-if and v-for no longer render the <!--[--> and <!--]--> anchor markers because Vapor components do not need them.

Runtime Changes

• Hydration-Aware APIs (@vue/runtime-vapor):

  • Runtime functions like createIf, createFor, createDynamicComponent, and createSlot are now hydration-aware. They use the SSR anchors (identified by labels like IF_ANCHOR_LABEL, FOR_ANCHOR_LABEL, etc.) to locate and reuse corresponding DOM nodes rendered by the server.

• DOM Traversal (@vue/runtime-vapor/dom):

  • Introduced hydration-specific implementations for DOM traversal helpers (__child, __next, __nthChild, __txt). These versions skip over the block node by insertion anchors to correctly find the target nodes for hydration.

  • Added enableHydrationNodeLookup and disableHydrationNodeLookup to switch between standard and hydration-specific traversal logic.

  • see benchmark for direct function call vs delegated function call

    benchmark result

    benchmark                   avg (min … max) p75 / p99    (min … top 1%)
    ------------------------------------------- -------------------------------
    direct function call         534.76 ps/iter   1.22 ns █                     !
                           (0.00 ps … 19.53 ns)   2.44 ns █         █          
                        (  0.00  b …   0.00  b)   0.00  b █▁▁▁▁▁▁▁▁▁█▁▁▁▁▁▁▁▁▁▁
    
    impl function call           536.44 ps/iter   1.22 ns █                     !
                           (0.00 ps … 21.97 ns)   2.44 ns █         █          
                        (  0.00  b …   0.00  b)   0.00  b █▁▁▁▁▁▁▁▁▁█▁▁▁▁▁▁▁▁▁▁
    
    summary
      direct function call
       1x faster than impl function call

• Core Runtime (@vue/runtime-core):

  • Enhanced the existing hydration.ts to recognize and correctly handle the hydration of Vapor components within VDOM components.

• VDOM Interop (@vue/runtime-vapor/vdomInterop.ts):

  • Updated the interop plugin to support hydration when mixing VDOM and Vapor components. Ensures that VDOM components rendered within Vapor contexts, and vice-versa, are correctly hydrated.

• Shared Utilities (@vue/shared):

  • Added domAnchors.ts defining constants for the various anchor labels (e.g., IF_ANCHOR_LABEL, DYNAMIC_START_ANCHOR_LABEL).

Tests

• Hydration Tests (runtime-vapor/__tests__/hydration.spec.ts):
  • Added extensive tests specifically for Vapor mode hydration, covering:
    • Basic text and element hydration.
    • Hydration of components (including fragment components, dynamic components).
    • Control flow directives (v-if, v-for).
    • slots and dynamic components (<component :is="...">).
    • VDOM interop hydration scenarios.

NOTE

The following two PR changes have already been included in this PR

• fix(compiler-vapor): move next, child and nthChild before setInsertionState #13057
• fix(compiler-vapor): properly handle static ref in inline mode #13257

[coderabbitai]

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.

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

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/feat/vaporHydration

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	0ca32f4
🔍 Latest deploy log	https://app.netlify.com/projects/vapor-repl/deploys/6867420c316c91000855dc27
😎 Deploy Preview	https://deploy-preview-13226--vapor-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13226

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13226

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 32542fb

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	84.1 kB (+25 B)	29.8 kB (+21 B)	26.3 kB (+10 B)
runtime-dom.global.prod.js	104 kB (+23 B)	39.1 kB (-1 B)	35.2 kB (-41 B)
vue.global.prod.js	162 kB (+46 B)	59.3 kB (+10 B)	52.8 kB (-6 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.2 kB (+20 B)	18.4 kB (+14 B)	16.9 kB (+7 B)
createApp	56 kB (+20 B)	21.6 kB (+9 B)	19.7 kB (-5 B)
createApp + vaporInteropPlugin	74.8 kB (+6.27 kB)	28.3 kB (+2.48 kB)	25.8 kB (+2.17 kB)
createVaporApp	21.2 kB (+356 B)	8.37 kB (+112 B)	7.67 kB (+114 B)
createSSRApp	60.3 kB (+21 B)	23.3 kB (+3 B)	21.3 kB (+2 B)
defineCustomElement	61 kB (+20 B)	23.1 kB (+5 B)	21.1 kB (+4 B)
overall	70.5 kB (+20 B)	26.8 kB (+11 B)	24.4 kB (+7 B)