feat(vapor): defineVaporAsyncComponent

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

@@ -2,13 +2,15 @@ import path from 'node:path'
 import {
   E2E_TIMEOUT,
   setupPuppeteer,
+  timeout,
 } from '../../../packages/vue/__tests__/e2e/e2eUtils'
 import connect from 'connect'
 import sirv from 'sirv'
+const { page, click, text, enterValue, html } = setupPuppeteer()
 
-describe('vdom / vapor interop', () => {
-  const { page, click, text, enterValue } = setupPuppeteer()
+const duration = process.env.CI ? 200 : 50
 
+describe('vdom / vapor interop', () => {
   let server: any
   const port = '8193'
   beforeAll(() => {
@@ -22,12 +24,15 @@ describe('vdom / vapor interop', () => {
     server.close()
   })
 
+  beforeEach(async () => {
+    const baseUrl = `http://localhost:${port}/interop/`
+    await page().goto(baseUrl)
+    await page().waitForSelector('#app')
+  })
+
   test(
     'should work',
     async () => {
-      const baseUrl = `http://localhost:${port}/interop/`
-      await page().goto(baseUrl)
-
       expect(await text('.vapor > h2')).toContain('Vapor component in VDOM')
 
       expect(await text('.vapor-prop')).toContain('hello')
@@ -81,4 +86,19 @@ 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,
+    )
+  })
 })

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

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import VaporComp from './VaporComp.vue'
+import { ref, defineVaporAsyncComponent, h } from 'vue'
+import VaporComp from './components/VaporComp.vue'
+import VdomFoo from './components/VdomFoo.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...'),
+})
 </script>
 
 <template>
@@ -19,4 +33,12 @@ const passSlot = ref(true)
 
     <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 -->
 </template>

packages-private/vapor-e2e-test/interop/VaporComp.vue → 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/components/VdomFoo.vue

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