fix(runtime-vapor): insert anchor for DynamicFragment when using insertionState

packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts

@@ -1,6 +1,11 @@
 import { shallowRef } from '@vue/reactivity'
 import { nextTick } from '@vue/runtime-dom'
-import { createDynamicComponent } from '../src'
+import {
+  createDynamicComponent,
+  defineVaporComponent,
+  setInsertionState,
+  template,
+} from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender()
@@ -54,4 +59,34 @@ describe('api: createDynamicComponent', () => {
     await nextTick()
     expect(html()).toBe('<baz></baz><!--dynamic-component-->')
   })
+
+  test('switch dynamic component children', async () => {
+    const CompA = defineVaporComponent({
+      setup() {
+        return template('<div>A</div>')()
+      },
+    })
+    const CompB = defineVaporComponent({
+      setup() {
+        return template('<div>B</div>')()
+      },
+    })
+
+    const current = shallowRef(CompA)
+    const { html } = define({
+      setup() {
+        const t1 = template('<div></div>')
+        const n2 = t1() as any
+        setInsertionState(n2)
+        createDynamicComponent(() => current.value)
+        return n2
+      },
+    }).render()
+
+    expect(html()).toBe('<div><div>A</div><!--dynamic-component--></div>')
+
+    current.value = CompB
+    await nextTick()
+    expect(html()).toBe('<div><div>B</div><!--dynamic-component--></div>')
+  })
 })

packages/runtime-vapor/src/block.ts

@@ -8,6 +8,7 @@ import {
 import { createComment, createTextNode } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
 import { isHydrating } from './dom/hydration'
+import { insertionAnchor, insertionParent } from './insertionState'
 
 export type Block =
   | Node
@@ -47,6 +48,9 @@ export class DynamicFragment extends VaporFragment {
     }
     this.current = key
 
+    const _insertionParent = insertionParent
+    const _insertionAnchor = insertionAnchor
+
     pauseTracking()
     const parent = this.anchor.parentNode
 
@@ -59,7 +63,11 @@ export class DynamicFragment extends VaporFragment {
     if (render) {
       this.scope = new EffectScope()
       this.nodes = this.scope.run(render) || []
-      if (parent) insert(this.nodes, parent, this.anchor)
+      if (parent) {
+        insert(this.nodes, parent, this.anchor)
+      } else if (!isHydrating && _insertionParent) {
+        insert(this.anchor, _insertionParent, _insertionAnchor)
+      }
     } else {
       this.scope = undefined
       this.nodes = []