wip: save

Author: edison1105

packages/runtime-vapor/src/apiCreateIf.ts

@@ -1,4 +1,4 @@
-import { type Block, type BlockFn, insert } from './block'
+import { type Block, type BlockFn, getComponentsInBlock, insert } from './block'
 import { advanceHydrationNode, isHydrating } from './dom/hydration'
 import {
   insertionAnchor,
@@ -7,6 +7,7 @@ import {
 } from './insertionState'
 import { renderEffect } from './renderEffect'
 import { DynamicFragment } from './fragment'
+import { mountComponent } from './component'
 
 export function createIf(
   condition: () => any,
@@ -30,6 +31,15 @@ export function createIf(
   if (!isHydrating) {
     if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
   } else {
+    if (_insertionParent) {
+      const components = getComponentsInBlock(frag)
+      if (components.length) {
+        components.forEach(i =>
+          mountComponent(i, _insertionParent, _insertionAnchor, false),
+        )
+      }
+    }
+
     // After block node hydration is completed, advance currentHydrationNode to
     // _insertionParent's next sibling if _insertionAnchor has a value
     // _insertionAnchor values:

packages/runtime-vapor/src/block.ts

@@ -230,3 +230,17 @@ export function setComponentScopeId(instance: VaporComponentInstance): void {
     }
   }
 }
+
+export function getComponentsInBlock(block: Block): VaporComponentInstance[] {
+  const components: VaporComponentInstance[] = []
+  if (isArray(block)) {
+    for (const item of block) {
+      components.push(...getComponentsInBlock(item))
+    }
+  } else if (isVaporComponent(block)) {
+    components.push(block)
+  } else if (isFragment(block)) {
+    components.push(...getComponentsInBlock(block.nodes))
+  }
+  return components
+}

packages/runtime-vapor/src/component.ts

@@ -29,6 +29,7 @@ import {
 } from '@vue/runtime-dom'
 import {
   type Block,
+  getComponentsInBlock,
   insert,
   isBlock,
   remove,
@@ -43,13 +44,7 @@ import {
   setActiveSub,
   unref,
 } from '@vue/reactivity'
-import {
-  EMPTY_OBJ,
-  invokeArrayFns,
-  isArray,
-  isFunction,
-  isString,
-} from '@vue/shared'
+import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
 import {
   type DynamicPropsSource,
   type RawProps,
@@ -653,24 +648,25 @@ export function mountComponent(
   instance: VaporComponentInstance,
   parent: ParentNode,
   anchor?: Node | null | 0,
+  needInsert: boolean = true,
 ): void {
   if (__DEV__) {
     startMeasure(instance, `mount`)
   }
   if (instance.bm) invokeArrayFns(instance.bm)
-  const block = instance.block
-  if (isHydrating) {
-    if (
-      !(block instanceof Node) ||
-      (isArray(block) && block.some(b => !(b instanceof Node)))
-    ) {
+  if (needInsert) {
+    const block = instance.block
+    if (isHydrating) {
+      // ensure components inside the block get mounted
+      const components = getComponentsInBlock(block)
+      if (components.length) {
+        components.forEach(i => mountComponent(i, parent, anchor, false))
+      }
+    } else {
       insert(block, parent, anchor)
+      setComponentScopeId(instance)
     }
-  } else {
-    insert(block, parent, anchor)
-    setComponentScopeId(instance)
   }
-
   if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
   instance.isMounted = true
   if (__DEV__) {

packages/runtime-vapor/src/componentSlots.ts

@@ -1,8 +1,18 @@
 import { EMPTY_OBJ, NO, hasOwn, isArray, isFunction } from '@vue/shared'
-import { type Block, type BlockFn, insert, setScopeId } from './block'
+import {
+  type Block,
+  type BlockFn,
+  getComponentsInBlock,
+  insert,
+  setScopeId,
+} from './block'
 import { rawPropsProxyHandlers } from './componentProps'
 import { currentInstance, isRef } from '@vue/runtime-dom'
-import type { LooseRawProps, VaporComponentInstance } from './component'
+import {
+  type LooseRawProps,
+  type VaporComponentInstance,
+  mountComponent,
+} from './component'
 import { renderEffect } from './renderEffect'
 import {
   insertionAnchor,
@@ -169,6 +179,13 @@ export function createSlot(
   } else {
     if (fragment.insert) {
       ;(fragment as VaporFragment).hydrate!()
+    } else if (_insertionParent) {
+      const components = getComponentsInBlock(fragment)
+      if (components.length) {
+        components.forEach(i =>
+          mountComponent(i, _insertionParent, _insertionAnchor, false),
+        )
+      }
     }
     if (_insertionAnchor !== undefined) {
       advanceHydrationNode(_insertionParent!)