wip: save

Author: edison1105

packages/runtime-vapor/__tests__/components/Suspense.spec.ts

@@ -35,11 +35,12 @@ describe('vapor / vdom interop', () => {
     return { container }
   }
 
-  function asyncWrapper(code: string) {
+  function withAsyncScript(code: string) {
     return {
       code: `
     <script vapor>
-      const data = _data;
+      const data = _data; 
+      const components = _components;
       const p = new Promise(r => setTimeout(r, 5))
       data.deps.push(p.then(() => Promise.resolve()))
       await p
@@ -60,20 +61,54 @@ describe('vapor / vdom interop', () => {
         <Suspense>
           <components.VaporChild/>
           <template #fallback>
-            <span>loading</span>
+            <span>fallback</span>
           </template>
         </Suspense>
       </template>`,
       {
-        VaporChild: asyncWrapper(`<template><div>hi</div></template>`),
+        VaporChild: withAsyncScript(`<template><div>hi</div></template>`),
       },
       data,
     )
 
-    expect(container.innerHTML).toBe(`<span>loading</span>`)
+    expect(container.innerHTML).toBe(`<span>fallback</span>`)
     expect(data.deps.length).toBe(1)
     await Promise.all(data.deps)
     await nextTick()
     expect(container.innerHTML).toBe(`<div>hi</div>`)
   })
+
+  test('vdom suspense: nested async vapor components', async () => {
+    const data = { deps: [] }
+    const { container } = await testSuspense(
+      `<script setup>
+        const components = _components;
+      </script>
+      <template>
+        <Suspense>
+          <components.AsyncOuter/>
+          <template #fallback>
+            <span>fallback</span>
+          </template>
+        </Suspense>
+      </template>`,
+      {
+        AsyncOuter: withAsyncScript(
+          `<template><components.AsyncInner/></template>`,
+        ),
+        AsyncInner: withAsyncScript(`<template><div>inner</div></template>`),
+      },
+      data,
+    )
+
+    expect(container.innerHTML).toBe(`<span>fallback</span>`)
+
+    await data.deps[0]
+    await nextTick()
+    expect(container.innerHTML).toBe(`<span>fallback</span>`)
+
+    await Promise.all(data.deps)
+    await nextTick()
+    expect(container.innerHTML).toBe(`<div>inner</div>`)
+  })
 })

packages/runtime-vapor/src/component.ts

@@ -67,6 +67,7 @@ import {
 import { hmrReload, hmrRerender } from './hmr'
 import { isHydrating, locateHydrationNode } from './dom/hydration'
 import { insertionAnchor, insertionParent } from './insertionState'
+import { currentSuspense } from './components/Suspense'
 
 export { currentInstance } from '@vue/runtime-dom'
 
@@ -144,7 +145,6 @@ export function createComponent(
   appContext: GenericAppContext = (currentInstance &&
     currentInstance.appContext) ||
     emptyContext,
-  parentSuspense?: SuspenseBoundary | null,
 ): VaporComponentInstance {
   const _insertionParent = insertionParent
   const _insertionAnchor = insertionAnchor
@@ -188,7 +188,7 @@ export function createComponent(
     rawProps as RawProps,
     rawSlots as RawSlots,
     appContext,
-    parentSuspense,
+    currentSuspense,
   )
 
   if (__DEV__) {
@@ -483,6 +483,30 @@ export function mountComponent(
   parent: ParentNode,
   anchor?: Node | null | 0,
 ): void {
+  if (
+    __FEATURE_SUSPENSE__ &&
+    instance.suspense &&
+    instance.asyncDep &&
+    !instance.asyncResolved
+  ) {
+    const component = instance.type as any
+    instance.suspense.registerDep(
+      instance as any,
+      (setupResult: any) => {
+        handleSetupResult(
+          setupResult,
+          component,
+          instance,
+          undefined,
+          isFunction(component) ? component : component.setup,
+        )
+        mountComponent(instance, parent, anchor)
+      },
+      false,
+    )
+    return
+  }
+
   if (__DEV__) {
     startMeasure(instance, `mount`)
   }

packages/runtime-vapor/src/components/Suspense.ts

@@ -0,0 +1,13 @@
+import type { SuspenseBoundary } from '@vue/runtime-dom'
+
+export let currentSuspense: SuspenseBoundary | null = null
+export function setCurrentSuspense(suspense: SuspenseBoundary | null): void {
+  currentSuspense = suspense
+}
+
+// TODO
+export const VaporSuspenseImpl = {
+  name: 'VaporSuspense',
+  __isSuspense: true,
+  process(): void {},
+}

packages/runtime-vapor/src/vdomInterop.ts

@@ -23,7 +23,6 @@ import {
   type VaporComponent,
   VaporComponentInstance,
   createComponent,
-  handleSetupResult,
   mountComponent,
   unmountComponent,
 } from './component'
@@ -34,6 +33,7 @@ import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
+import { setCurrentSuspense } from './components/Suspense'
 
 // mounting vapor components and slots in vdom
 const vaporInteropImpl: Omit<
@@ -49,6 +49,10 @@ const vaporInteropImpl: Omit<
     const propsRef = shallowRef(vnode.props)
     const slotsRef = shallowRef(vnode.children)
 
+    if (__FEATURE_SUSPENSE__) {
+      setCurrentSuspense(parentSuspense)
+    }
+
     const component = vnode.type as any as VaporComponent
     // @ts-expect-error
     const instance = (vnode.component = createComponent(
@@ -61,28 +65,10 @@ const vaporInteropImpl: Omit<
       } as any as RawSlots,
       undefined,
       undefined,
-      parentSuspense,
     ))
     instance.rawPropsRef = propsRef
     instance.rawSlotsRef = slotsRef
-    if (__FEATURE_SUSPENSE__ && parentSuspense && instance.asyncDep) {
-      parentSuspense.registerDep(
-        instance as any,
-        (setupResult: any) => {
-          handleSetupResult(
-            setupResult,
-            component,
-            instance,
-            undefined,
-            isFunction(component) ? component : component.setup,
-          )
-          mountComponent(instance, container, selfAnchor)
-        },
-        false,
-      )
-    } else {
-      mountComponent(instance, container, selfAnchor)
-    }
+    mountComponent(instance, container, selfAnchor)
     simpleSetCurrentInstance(prev)
     return instance
   },