refactor: simplify suspense ssr + adjust behavior

packages/compiler-ssr/__tests__/ssrSuspense.spec.ts

@@ -9,12 +9,12 @@ describe('ssr compile: suspense', () => {
  return function ssrRender(_ctx, _push, _parent) {
  const _component_foo = _resolveComponent(\\"foo\\")
 
- _push(_ssrRenderSuspense({
- default: (_push) => {
+ _ssrRenderSuspense(_push, {
+ default: () => {
  _push(_ssrRenderComponent(_component_foo, null, null, _parent))
  },
  _: 1
- }))
+ })
  }"
  `)
  })
@@ -36,15 +36,15 @@ describe('ssr compile: suspense', () => {
  return function ssrRender(_ctx, _push, _parent) {
  const _component_foo = _resolveComponent(\\"foo\\")
 
- _push(_ssrRenderSuspense({
- default: (_push) => {
+ _ssrRenderSuspense(_push, {
+ default: () => {
  _push(_ssrRenderComponent(_component_foo, null, null, _parent))
  },
- fallback: (_push) => {
+ fallback: () => {
  _push(\` loading... \`)
  },
  _: 1
- }))
+ })
  }"
  `)
  })

packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts

@@ -38,7 +38,7 @@ export function ssrTransformSuspense(
  wipMap.set(node, wipEntry)
  wipEntry.slotsExp = buildSlots(node, context, (_props, children, loc) => {
  const fn = createFunctionExpression(
- [`_push`],
+ [],
  undefined, // no return, assign body later
  true, // newline
  false, // suspense slots are not treated as normal slots
@@ -71,8 +71,9 @@ export function ssrProcessSuspense(
  }
  // _push(ssrRenderSuspense(slots))
  context.pushStatement(
- createCallExpression(`_push`, [
- createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [slotsExp])
+ createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
+ `_push`,
+ slotsExp
  ])
  )
 }

packages/runtime-core/__tests__/component.spec.ts

@@ -6,8 +6,11 @@ import {
  nextTick,
  defineComponent
 } from '@vue/runtime-test'
+import { mockWarn } from '@vue/shared'
 
 describe('renderer: component', () => {
+ mockWarn()
+
  test.todo('should work')
 
  test.todo('shouldUpdateComponent')
@@ -40,6 +43,7 @@ describe('renderer: component', () => {
  expect(b1).toBe(true)
  expect(b2).toBe(true)
  expect(b3).toBe('')
+ expect('type check failed for prop "b1"').toHaveBeenWarned()
  })
  })
 

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

@@ -8,11 +8,11 @@ import {
  ref,
  defineComponent
 } from 'vue'
-import { escapeHtml, mockError } from '@vue/shared'
+import { escapeHtml, mockWarn } from '@vue/shared'
 import { renderToString, renderComponent } from '../src/renderToString'
 import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
 
-mockError()
+mockWarn()
 
 describe('ssr: renderToString', () => {
  test('should apply app context', async () => {

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

@@ -1,11 +1,9 @@
 import { createApp, h, Suspense } from 'vue'
 import { renderToString } from '../src/renderToString'
-import { ssrRenderSuspense } from '../src/helpers/ssrRenderSuspense'
-import { ssrRenderComponent } from '../src'
-import { mockError } from '@vue/shared'
+import { mockWarn } from '@vue/shared'
 
 describe('SSR Suspense', () => {
- mockError()
+ mockWarn()
 
  const ResolvingAsync = {
  async setup() {
@@ -19,161 +17,109 @@ describe('SSR Suspense', () => {
  }
  }
 
- describe('compiled', () => {
- test('basic', async () => {
- const app = createApp({
- ssrRender(_ctx, _push) {
- _push(
- ssrRenderSuspense({
- default: _push => {
- _push('<div>async</div>')
- }
- })
- )
- }
- })
-
- expect(await renderToString(app)).toBe(`<!--[--><div>async</div><!--]-->`)
- })
-
- test('with async component', async () => {
- const app = createApp({
- ssrRender(_ctx, _push) {
- _push(
- ssrRenderSuspense({
- default: _push => {
- _push(ssrRenderComponent(ResolvingAsync))
- }
- })
- )
- }
- })
-
- expect(await renderToString(app)).toBe(`<!--[--><div>async</div><!--]-->`)
- })
-
- test('fallback', async () => {
- const app = createApp({
- ssrRender(_ctx, _push) {
- _push(
- ssrRenderSuspense({
- default: _push => {
- _push(ssrRenderComponent(RejectingAsync))
- },
- fallback: _push => {
- _push('<div>fallback</div>')
- }
- })
- )
- }
- })
-
- expect(await renderToString(app)).toBe(
- `<!--[--><div>fallback</div><!--]-->`
- )
- expect('Uncaught error in async setup').toHaveBeenWarned()
- })
- })
-
- describe('vnode', () => {
- test('content', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h(ResolvingAsync),
- fallback: h('div', 'fallback')
- })
- }
+ test('content', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ default: h(ResolvingAsync),
+ fallback: h('div', 'fallback')
+ })
  }
+ }
 
-  expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
-  })
+ expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
+ })
 
- test('fallback', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h(RejectingAsync),
- fallback: h('div', 'fallback')
- })
- }
+ test('reject', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ default: h(RejectingAsync),
+ fallback: h('div', 'fallback')
+ })
  }
+ }
 
- expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
- expect('Uncaught error in async setup').toHaveBeenWarned()
- })
+ expect(await renderToString(createApp(Comp))).toBe(`<!---->`)
+ expect('Uncaught error in async setup').toHaveBeenWarned()
+ expect('missing template').toHaveBeenWarned()
+ })
 
- test('2 components', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
- fallback: h('div', 'fallback')
- })
- }
+ test('2 components', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ 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(await renderToString(createApp(Comp))).toBe(
+ `<div><div>async</div><div>async</div></div>`
+ )
+ })
 
- test('resolving component + rejecting component', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
- fallback: h('div', 'fallback')
- })
- }
+ test('resolving component + rejecting component', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
+ fallback: h('div', 'fallback')
+ })
  }
+ }
 
- expect(await renderToString(createApp(Comp))).toBe(`<div>fallback</div>`)
- expect('Uncaught error in async setup').toHaveBeenWarned()
- })
+ expect(await renderToString(createApp(Comp))).toBe(
+ `<div><div>async</div><!----></div>`
+ )
+ expect('Uncaught error in async setup').toHaveBeenWarned()
+ expect('missing template or render function').toHaveBeenWarned()
+ })
 
- test('failing suspense in passing suspense', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h('div', [
- h(ResolvingAsync),
- h(Suspense, null, {
- default: h('div', [h(RejectingAsync)]),
- fallback: h('div', 'fallback 2')
- })
- ]),
- fallback: h('div', 'fallback 1')
- })
- }
+ test('failing suspense in passing suspense', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ default: h('div', [
+ h(ResolvingAsync),
+ h(Suspense, null, {
+ default: h('div', [h(RejectingAsync)]),
+ fallback: h('div', 'fallback 2')
+ })
+ ]),
+ fallback: h('div', 'fallback 1')
+ })
  }
+ }
 
- expect(await renderToString(createApp(Comp))).toBe(
- `<div><div>async</div><div>fallback 2</div></div>`
- )
- expect('Uncaught error in async setup').toHaveBeenWarned()
- })
+ expect(await renderToString(createApp(Comp))).toBe(
+ `<div><div>async</div><div><!----></div></div>`
+ )
+ expect('Uncaught error in async setup').toHaveBeenWarned()
+ expect('missing template').toHaveBeenWarned()
+ })
 
- test('passing suspense in failing suspense', async () => {
- const Comp = {
- render() {
- return h(Suspense, null, {
- default: h('div', [
- h(RejectingAsync),
- h(Suspense, null, {
- default: h('div', [h(ResolvingAsync)]),
- fallback: h('div', 'fallback 2')
- })
- ]),
- fallback: h('div', 'fallback 1')
- })
- }
+ test('passing suspense in failing suspense', async () => {
+ const Comp = {
+ render() {
+ return h(Suspense, null, {
+ default: h('div', [
+ h(RejectingAsync),
+ h(Suspense, null, {
+ default: h('div', [h(ResolvingAsync)]),
+ fallback: h('div', 'fallback 2')
+ })
+ ]),
+ fallback: h('div', 'fallback 1')
+ })
  }
+ }
 
-  expect(await renderToString(createApp(Comp))).toBe(
-  `<div>fallback 1</div>`
-  )
-  expect('Uncaught error in async setup').toHaveBeenWarned()
- })
+ expect(await renderToString(createApp(Comp))).toBe(
+ `<div><!----><div><div>async</div></div></div>`
+ )
+ expect('Uncaught error in async setup').toHaveBeenWarned()
+ expect('missing template').toHaveBeenWarned()
  })
 })

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

@@ -1,30 +1,14 @@
-import { PushFn, ResolvedSSRBuffer, createBuffer } from '../renderToString'
+import { PushFn } from '../renderToString'
 
-type ContentRenderFn = (push: PushFn) => void
-
-export async function ssrRenderSuspense({
- default: renderContent,
- fallback: renderFallback
-}: Record<string, ContentRenderFn | undefined>): Promise<ResolvedSSRBuffer> {
- try {
- if (renderContent) {
- const { push, getBuffer } = createBuffer()
- push(`<!--[-->`)
- renderContent(push)
- push(`<!--]-->`)
- return await getBuffer()
- } else {
- return []
- }
- } catch {
- if (renderFallback) {
- const { push, getBuffer } = createBuffer()
- push(`<!--[-->`)
- renderFallback(push)
- push(`<!--]-->`)
- return getBuffer()
- } else {
- return []
- }
+export async function ssrRenderSuspense(
+ push: PushFn,
+ { default: renderContent }: Record<string, (() => void) | undefined>
+) {
+ if (renderContent) {
+ push(`<!--[-->`)
+ renderContent()
+ push(`<!--]-->`)
+ } else {
+ push(`<!---->`)
  }
 }