fix(createKeyedFragment): improve insertion handling and reset state

diff --git a/packages/runtime-vapor/src/apiCreateFragment.ts b/packages/runtime-vapor/src/apiCreateFragment.ts
index d4bb8763681979bc4155d1c563b730b8b8740c97..a1b3fe29763b0ce2747c39a5e768bd93d17b6565 100644 (file)
--- a/packages/runtime-vapor/src/apiCreateFragment.ts
+++ b/packages/runtime-vapor/src/apiCreateFragment.ts
@@ -1,11 +1,29 @@
-import type { Block, BlockFn } from './block'
+import { type Block, type BlockFn, insert } from './block'
+import { advanceHydrationNode, isHydrating } from './dom/hydration'
 import { DynamicFragment } from './fragment'
+import {
+  insertionAnchor,
+  insertionParent,
+  resetInsertionState,
+} from './insertionState'
 import { renderEffect } from './renderEffect'
 
 export function createKeyedFragment(key: () => any, render: BlockFn): Block {
+  const _insertionParent = insertionParent
+  const _insertionAnchor = insertionAnchor
+  if (!isHydrating) resetInsertionState()
+
   const frag = __DEV__ ? new DynamicFragment('keyed') : new DynamicFragment()
   renderEffect(() => {
     frag.update(render, key())
   })
+
+  if (!isHydrating) {
+    if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
+  } else {
+    if (_insertionAnchor !== undefined) {
+      advanceHydrationNode(_insertionParent!)
+    }
+  }
   return frag
 }