wip(vapor): more hydration

packages/runtime-vapor/src/apiCreateApp.ts

@@ -21,7 +21,7 @@ import {
 import type { RawProps } from './componentProps'
 import { getGlobalThis } from '@vue/shared'
 import { optimizePropertyLookup } from './dom/prop'
-import { withHydration } from './dom/hydrate'
+import { withHydration } from './dom/hydration'
 
 let _createApp: CreateAppFunction<ParentNode, VaporComponent>
 

packages/runtime-vapor/src/block.ts

@@ -7,7 +7,7 @@ import {
 } from './component'
 import { createComment, createTextNode } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
-import { isHydrating } from './dom/hydrate'
+import { isHydrating } from './dom/hydration'
 
 export type Block =
   | Node

packages/runtime-vapor/src/dom/hydration.ts

@@ -7,8 +7,16 @@ export function setCurrentHydrationNode(node: Node | null): void {
   currentHydrationNode = node
 }
 
+let isOptimized = false
+
 export function withHydration(container: ParentNode, fn: () => void): void {
   adoptHydrationNode = adoptHydrationNodeImpl
+  if (!isOptimized) {
+    // optimize anchor cache lookup
+    const proto = Comment.prototype as any
+    proto.$p = proto.$e = undefined
+    isOptimized = true
+  }
   isHydrating = true
   currentHydrationNode = child(container)
   const res = fn()
@@ -48,7 +56,9 @@ function adoptHydrationNodeImpl(
   let end: Node | undefined | null
 
   if (template) {
-    while (node.nodeType === 8) node = next(node)
+    if (template[0] !== '<' && template[1] !== '!') {
+      while (node.nodeType === 8) node = next(node)
+    }
     adopted = end = node
   } else if (isComment(node, '[')) {
     // fragment
@@ -96,14 +106,16 @@ function adoptHydrationNodeImpl(
   if (__DEV__ && template) {
     const type = adopted.nodeType
     if (
-      type === 8 ||
+      (type === 8 && !template.startsWith('<!')) ||
       (type === 1 &&
         !template.startsWith(
           `<` + (adopted as Element).tagName.toLowerCase(),
         )) ||
-      (type === 3 && !template.startsWith((adopted as Text).data))
+      (type === 3 &&
+        template.trim() &&
+        !template.startsWith((adopted as Text).data))
     ) {
-      // TODO recover
+      // TODO recover and provide more info
       throw new Error('hydration mismatch!')
     }
   }

packages/runtime-vapor/src/dom/template.ts

@@ -2,7 +2,7 @@ import {
   adoptHydrationNode,
   currentHydrationNode,
   isHydrating,
-} from './hydrate'
+} from './hydration'
 import { child } from './node'
 
 let t: HTMLTemplateElement