feat(vapor): hydration

[edison1105]

Compiler Changes

• Compiler-vapor:
  • Adjusted the timing of child/nthChild/next calls when a setInsertionState call is present, ensuring they execute sequentially rather than entirely before setInsertionState (reverting fix(compiler-vapor): move next, child and nthChild before setInsertionState #13057).
  • Modified the anchor handling for setInsertionState. For append scenarios, the anchor now has two possible values:
    • null: Indicates that there are no nodes before the dynamic node to be appended.
    • A number greater than 0: Represents the count of static nodes preceding it (used for node positioning during hydration).

Runtime Changes

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

  • Since the insertion of dynamic nodes may affect the childNodes under the insertionParent, which could cause the nodes returned by child/nthChild/next to shift, we need to create a backup copy of insertionParent.childNodes when executing setInsertionState. The child/nthChild/next operations should then perform lookups on this backed-up childNodes.
  • Runtime functions like createIf, createFor, createDynamicComponent, and createSlot are now hydration-aware.

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

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

  • Added enableHydrationNodeHelper and disableHydrationNodeHelper 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.

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.
    • mismatch handling
    • data-allow-mismatch

[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 (beta)

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

---

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

[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: be48dc6