fix(runtime-vapor): dynamic component fallback rendering with insertion state (#13492)

Author: edison1105

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>')
+  })
 })

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
 }