fix(runtime-vapor): properly handle consecutive prepend operations

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -105,10 +105,10 @@ export function isValidBlock(block: Block): boolean {
 
 export function insert(
   block: Block,
-  parent: ParentNode,
+  parent: ParentNode & { $anchor?: Node | null },
   anchor: Node | null | 0 = null, // 0 means prepend
 ): void {
-  anchor = anchor === 0 ? parent.firstChild : anchor
+  anchor = anchor === 0 ? parent.$anchor || parent.firstChild : anchor
   if (block instanceof Node) {
     if (!isHydrating) {
       parent.insertBefore(block, anchor)

packages/runtime-vapor/src/insertionState.ts

@@ -6,7 +6,18 @@ export let insertionAnchor: Node | 0 | undefined
  * (component, slot outlet, if, for) is created. The state is used for actual
  * insertion on client-side render, and used for node adoption during hydration.
  */
-export function setInsertionState(parent: ParentNode, anchor?: Node | 0): void {
+export function setInsertionState(
+  parent: ParentNode & { $anchor?: Node | null },
+  anchor?: Node | 0,
+): void {
+  // When setInsertionState(n3, 0) is called consecutively, the first prepend operation
+  // uses parent.firstChild as the anchor. However, after insertion, parent.firstChild
+  // changes and cannot serve as the anchor for subsequent prepends. Therefore, we cache
+  // the original parent.firstChild on the first call for subsequent prepend operations.
+  if (anchor === 0 && !parent.$anchor) {
+    parent.$anchor = parent.firstChild
+  }
+
   insertionParent = parent
   insertionAnchor = anchor
 }