feat(ssr-render): suspense supports server-side triggering of onResolve

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

@@ -614,7 +614,6 @@
           }
         }
       }
-
       // invoke @resolve event
       triggerEvent(vnode, 'onResolve')
     },
@@ -902,3 +901,21 @@
   const suspensible = vnode.props && vnode.props.suspensible
   return suspensible != null && suspensible !== false
 }
+
+export type ssrSuspenseBoundary = {
+  deps: number
+  resolve: (node: VNode) => void
+  vnode: VNode
+  parentSuspense: null | ssrSuspenseBoundary
+} & SuspenseBoundary
+export function createSSRSuspenseBoundary(vnode: VNode) {
+  return {
+    deps: 0,
+    resolve(vnode: VNode) {
+      // invoke @resolve event
+      triggerEvent(vnode, 'onResolve')
+    },
+    vnode: vnode,
+    parentSuspense: null,
+  }
+}

packages/runtime-core/src/index.ts

@@ -113,7 +113,12 @@ export { createVNode, cloneVNode, mergeProps, isVNode } from './vnode'
 export { Fragment, Text, Comment, Static, type VNodeRef } from './vnode'
 // Built-in components
 export { Teleport, type TeleportProps } from './components/Teleport'
-export { Suspense, type SuspenseProps } from './components/Suspense'
+export {
+  Suspense,
+  createSSRSuspenseBoundary,
+  type ssrSuspenseBoundary,
+  type SuspenseProps,
+} from './components/Suspense'
 export { KeepAlive, type KeepAliveProps } from './components/KeepAlive'
 export {
   BaseTransition,

packages/server-renderer/__tests__/render.spec.ts

@@ -963,6 +963,7 @@ function testRender(type: string, render: typeof renderToString) {
                 _push,
                 createVNode(resolveDynamicComponent('B'), null, null),
                 _parent,
+                null,
               )
             },
           }),

packages/server-renderer/__tests__/ssrSuspense.spec.ts

@@ -1,5 +1,6 @@
 import { Suspense, createApp, h } from 'vue'
 import { renderToString } from '../src/renderToString'
+import { expect } from 'vitest'
 
 describe('SSR Suspense', () => {
   const ResolvingAsync = {
@@ -8,6 +9,12 @@ describe('SSR Suspense', () => {
     },
   }
 
+  const ResolvingSync = {
+    setup() {
+      return () => h('div', 'sync')
+    },
+  }
+
   const RejectingAsync = {
     setup() {
       return new Promise((_, reject) => reject('foo'))
@@ -78,6 +85,106 @@ describe('SSR Suspense', () => {
     expect('missing template or render function').toHaveBeenWarned()
   })
 
+  test('suspense onResolve & ssr render & async', async () => {
+    const onResolve = vi.fn()
+    const Comp = {
+      render() {
+        return h(
+          Suspense,
+          {
+            onResolve,
+          },
+          {
+            default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
+            fallback: h('div', 'fallback'),
+          },
+        )
+      },
+    }
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>async</div><div>async</div></div>`,
+    )
+    expect(onResolve).toHaveBeenCalledTimes(1)
+  })
+
+  test('suspense onResolve & ssr render & nested async deps', async () => {
+    const onResolve = vi.fn()
+    const child = {
+      async setup() {
+        return () => h(ResolvingAsync)
+      },
+    }
+    const Comp = {
+      render() {
+        return h(
+          Suspense,
+          {
+            onResolve,
+          },
+          {
+            default: h('div', [h(child)]),
+            fallback: h('div', 'fallback'),
+          },
+        )
+      },
+    }
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>async</div></div>`,
+    )
+    expect(onResolve).toHaveBeenCalledTimes(1)
+  })
+
+  test('suspense onResolve & ssr render & sync', async () => {
+    const onResolve = vi.fn()
+    const Comp = {
+      render() {
+        return h(
+          Suspense,
+          {
+            onResolve,
+          },
+          {
+            default: h('div', [h(ResolvingSync), h(ResolvingSync)]),
+            fallback: h('div', 'fallback'),
+          },
+        )
+      },
+    }
+    expect(await renderToString(createApp(Comp))).toBe(
+      `<div><div>sync</div><div>sync</div></div>`,
+    )
+    expect(onResolve).toHaveBeenCalledTimes(1)
+  })
+
+  test('nested suspense onResolve & ssr render', async () => {
+    const onResolve = vi.fn()
+    const onNestedResolve = vi.fn()
+    const Comp = {
+      render() {
+        return h(
+          Suspense,
+          {
+            onResolve,
+          },
+          {
+            default: h(
+              Suspense,
+              {
+                onResolve: onNestedResolve,
+              },
+              {
+                default: h(ResolvingAsync),
+              },
+            ),
+          },
+        )
+      },
+    }
+    expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
+    expect(onResolve).toHaveBeenCalledTimes(1)
+    expect(onNestedResolve).toHaveBeenCalledTimes(1)
+  })
+
   test('failing suspense in passing suspense', async () => {
     const Comp = {
       errorCaptured: vi.fn(() => false),

packages/server-renderer/src/helpers/ssrRenderComponent.ts

@@ -17,6 +17,7 @@ export function ssrRenderComponent(
   return renderComponentVNode(
     createVNode(comp, props, children),
     parentComponent,
+    null,
     slotScopeId,
   )
 }

packages/server-renderer/src/helpers/ssrRenderSlot.ts

@@ -70,6 +70,7 @@ export function ssrRenderSlotInner(
           push,
           validSlotContent,
           parentComponent,
+          null,
           slotScopeId,
         )
       } else if (fallbackRenderFn) {