From d6d3dd2f8523b91ce98199c914b755c418f8c05b Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Wed, 18 Jun 2025 17:28:38 +0800
Subject: [PATCH] fix(runtime-vapor): dynamic component fallback rendering with
 insertion state

---
 .../apiCreateDynamicComponent.spec.ts         | 31 +++++++++++++++++--
 packages/runtime-vapor/src/component.ts       | 12 +++++++
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
index 2f6cd7b3f3..87dc922ddf 100644
--- a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
+++ b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
@@ -1,6 +1,13 @@
-import { shallowRef } from '@vue/reactivity'
-import { nextTick } from '@vue/runtime-dom'
-import { createDynamicComponent } from '../src'
+import { ref, shallowRef } from '@vue/reactivity'
+import { nextTick, resolveDynamicComponent } from '@vue/runtime-dom'
+import {
+  createComponentWithFallback,
+  createDynamicComponent,
+  renderEffect,
+  setHtml,
+  setInsertionState,
+  template,
+} from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender()
@@ -54,4 +61,22 @@ describe('api: createDynamicComponent', () => {
     await nextTick()
     expect(html()).toBe('<baz></baz><!--dynamic-component-->')
   })
+
+  test('render fallback with insertionState', async () => {
+    const { html, mount } = define({
+      setup() {
+        const html = ref('hi')
+        const n1 = template('<div></div>', true)() as any
+        setInsertionState(n1)
+        const n0 = createComponentWithFallback(
+          resolveDynamicComponent('button') as any,
+        ) as any
+        renderEffect(() => setHtml(n0, html.value))
+        return n1
+      },
+    }).create()
+
+    mount()
+    expect(html()).toBe('<div><button>hi</button></div>')
+  })
 })
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 03675475b8..c6602ec961 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -476,6 +476,14 @@ export function createComponentWithFallback(
     return createComponent(comp, rawProps, rawSlots, isSingleRoot)
   }
 
+  const _insertionParent = insertionParent
+  const _insertionAnchor = insertionAnchor
+  if (isHydrating) {
+    locateHydrationNode()
+  } else {
+    resetInsertionState()
+  }
+
   const el = document.createElement(comp)
   // mark single root
   ;(el as any).$root = isSingleRoot
@@ -494,6 +502,10 @@ export function createComponentWithFallback(
     }
   }
 
+  if (!isHydrating && _insertionParent) {
+    insert(el, _insertionParent, _insertionAnchor)
+  }
+
   return el
 }
 
-- 
2.39.5