feat(vapor): defineVaporAsyncComponent (#13059)

Author: edison1105

packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts

@@ -41,12 +41,6 @@ const buffer = process.env.CI ? 50 : 20
 const transitionFinish = (time = duration) => timeout(time + buffer)
 
 describe('vdom / vapor interop', () => {
-  beforeEach(async () => {
-    const baseUrl = `http://localhost:${port}/interop/`
-    await page().goto(baseUrl)
-    await page().waitForSelector('#app')
-  })
-
   test(
     'should work',
     async () => {
@@ -104,6 +98,21 @@ describe('vdom / vapor interop', () => {
     E2E_TIMEOUT,
   )
 
+  describe('async component', () => {
+    const container = '.async-component-interop'
+    test(
+      'with-vdom-inner-component',
+      async () => {
+        const testContainer = `${container} .with-vdom-component`
+        expect(await html(testContainer)).toBe('<span>loading...</span>')
+
+        await timeout(duration)
+        expect(await html(testContainer)).toBe('<div>foo</div>')
+      },
+      E2E_TIMEOUT,
+    )
+  })
+
   describe('keepalive', () => {
     test(
       'render vapor component',

packages-private/vapor-e2e-test/interop/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
-import VaporComp from './VaporComp.vue'
+import { ref, defineVaporAsyncComponent, h, shallowRef } from 'vue'
+import VaporComp from './components/VaporComp.vue'
+import VdomFoo from './components/VdomFoo.vue'
 import SimpleVaporComp from './components/SimpleVaporComp.vue'
 import VaporCompA from '../transition/components/VaporCompA.vue'
 import VdomComp from '../transition/components/VdomComp.vue'
@@ -9,6 +10,18 @@ import VaporSlot from '../transition/components/VaporSlot.vue'
 const msg = ref('hello')
 const passSlot = ref(true)
 
+const duration = typeof process !== 'undefined' && process.env.CI ? 200 : 50
+
+const AsyncVDomFoo = defineVaporAsyncComponent({
+  loader: () => {
+    return new Promise(r => {
+      setTimeout(() => {
+        r(VdomFoo as any)
+      }, duration)
+    })
+  },
+  loadingComponent: () => h('span', 'loading...'),
+})
 ;(window as any).calls = []
 ;(window as any).getCalls = () => {
   const ret = (window as any).calls.slice()
@@ -43,6 +56,13 @@ const enterClick = () => items.value.push('d', 'e')
     <template #test v-if="passSlot">A test slot</template>
   </VaporComp>
 
+  <!-- async component  -->
+  <div class="async-component-interop">
+    <div class="with-vdom-component">
+      <AsyncVDomFoo />
+    </div>
+  </div>
+  <!-- async component end -->
   <!-- keepalive -->
   <div class="render-vapor-component">
     <button class="btn-show" @click="show = !show">show</button>

packages-private/vapor-e2e-test/interop/VaporComp.vue renamed to packages-private/vapor-e2e-test/interop/components/VaporComp.vue

@@ -27,7 +27,8 @@ const slotProp = ref('slot prop')
         change slot prop
       </button>
       <div class="vdom-slot-in-vapor-default">
-        #default: <slot :foo="slotProp" />
+        #default:
+        <slot :foo="slotProp" />
       </div>
       <div class="vdom-slot-in-vapor-test">
         #test: <slot name="test">fallback content</slot>

packages-private/vapor-e2e-test/interop/VdomComp.vue renamed to packages-private/vapor-e2e-test/interop/components/VdomComp.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>foo</div>
+</template>