feat(vapor): hydration

[edison1105]

Compiler Changes

• SSR Compiler (@vue/compiler-ssr):
  • Modified to inject special comment anchors (e.g., <!--if-->, <!--for-->, <!--slot-->, <!--dynamic-component-->, <!--[[-->, <!--]]-->) into the server-rendered HTML output. These anchors are essential markers for the client-side hydration process.
• Vapor Compiler (@vue/compiler-vapor):
  • Updated transformChildren to create placeholder nodes (<!>) in the template string for each dynamic child, facilitating node matching during hydration.

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). These versions intelligently skip over SSR comment anchors and insignificant text nodes 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 embedded within VDOM components.
  • Updated core hydration logic to skip Vapor-specific anchors during traversal.

• 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) and utility functions (isVaporAnchors, isDynamicAnchor, isVaporFragmentAnchor) to identify these special comment nodes.

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="...">).
    • Scenarios involving adjacent dynamic nodes requiring dynamic anchors (<!--[[-->, <!--]]-->).
    • 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