wip: create anchor for DynamicFragment in ssr slot vnode fallback

diff --git a/packages/runtime-vapor/src/fragment.ts b/packages/runtime-vapor/src/fragment.ts
index cee29ace4262a776f1373cf8f5f9a7ca20d39ea4..762e60e503efbc4da2b843eca3e8ff9e403a6bfe 100644 (file)
--- a/packages/runtime-vapor/src/fragment.ts
+++ b/packages/runtime-vapor/src/fragment.ts
@@ -74,7 +74,7 @@ export class DynamicFragment extends VaporFragment {
 
   update(render?: BlockFn, key: any = render): void {
     if (key === this.current) {
-      if (isHydrating) this.hydrate(this.anchorLabel!, true)
+      if (isHydrating && this.anchorLabel) this.hydrate(this.anchorLabel!, true)
       return
     }
     this.current = key
@@ -155,30 +155,33 @@ export class DynamicFragment extends VaporFragment {
   }
 
   hydrate(label: string, isEmpty: boolean = false): void {
-    if (!label && isEmpty) return
-
-    // for `v-if="false"` the node will be an empty comment, use it as the anchor.
+    // for `v-if="false"`, the node will be an empty comment, use it as the anchor.
     // otherwise, find next sibling vapor fragment anchor
     if (label === 'if' && isEmpty) {
       this.anchor = locateVaporFragmentAnchor(currentHydrationNode!, '')!
     } else {
-      let anchor = locateVaporFragmentAnchor(currentHydrationNode!, label)!
-      if (!anchor) {
-        // TODO: comment anchors are not included in ssr slot vnode fallback
+      this.anchor = locateVaporFragmentAnchor(currentHydrationNode!, label)!
+      if (!this.anchor) {
+        // comment anchors are not included in ssr slot vnode fallback
         if (label === 'slot') {
           // fallback to fragment end anchor for
-          anchor = locateVaporFragmentAnchor(currentHydrationNode!, ']')!
-        } else if (label === 'if') {
+          this.anchor = locateVaporFragmentAnchor(currentHydrationNode!, ']')!
+        } else {
+          // create anchor
+          insert(
+            (this.anchor = __DEV__ ? createComment(label) : createTextNode()),
+            currentHydrationNode!.parentNode!,
+            currentHydrationNode!.nextSibling,
+          )
         }
       }
-      if (anchor) {
-        this.anchor = anchor
-      } else if (__DEV__) {
-        // this should not happen
-        throw new Error(`${label} fragment anchor node was not found.`)
-      }
     }
-    advanceHydrationNode(this.anchor)
+
+    if (this.anchor) {
+      advanceHydrationNode(this.anchor)
+    } else if (__DEV__) {
+      throw new Error(`${label} fragment anchor node was not found.`)
+    }
   }
 }