theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ssr): compiler-ssr support for Suspense

Browse Source
This commit is contained in:
Evan You
2020-03-10 16:52:08 -04:00
parent 47ead3b33a
commit 80c625dce3
10 changed files with 404 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
packages/server-renderer/__tests__/ssrSuspense.spec.ts
View File

@@ -1,5 +1,7 @@
import { createApp, h, Suspense } from 'vue'
import { renderToString } from '../src/renderToString'
import { ssrRenderSuspense } from '../src/helpers/ssrRenderSuspense'
import { ssrRenderComponent } from '../src'
describe('SSR Suspense', () => {
let logError: jest.SpyInstance
@@ -24,103 +26,163 @@ describe('SSR Suspense', () => {
}
}
test('render', 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(logError).not.toHaveBeenCalled()
})
test('fallback', 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(logError).toHaveBeenCalled()
})
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(logError).not.toHaveBeenCalled()
})
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(logError).toHaveBeenCalled()
})
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')
describe('compiled', () => {
test('basic', async () => {
const app = createApp({
ssrRender(_ctx, _push) {
_push(
ssrRenderSuspense({
default: _push => {
_push('<div>async</div>')
}
})
]),
fallback: h('div', 'fallback 1')
})
}
}
)
}
})
expect(await renderToString(createApp(Comp))).toBe(
`<div><div>async</div><div>fallback 2</div></div>`
)
expect(logError).toHaveBeenCalled()
expect(await renderToString(app)).toBe(`<div>async</div>`)
expect(logError).not.toHaveBeenCalled()
})
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>`)
expect(logError).not.toHaveBeenCalled()
})
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(logError).toHaveBeenCalled()
})
})
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')
})
describe('vnode', () => {
test('content', async () => {
const Comp = {
render() {
return h(Suspense, null, {
default: h(ResolvingAsync),
fallback: h('div', 'fallback')
})
}
}
}
expect(await renderToString(createApp(Comp))).toBe(`<div>fallback 1</div>`)
expect(logError).toHaveBeenCalled()
expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
expect(logError).not.toHaveBeenCalled()
})
test('fallback', 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(logError).toHaveBeenCalled()
})
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(logError).not.toHaveBeenCalled()
})
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(logError).toHaveBeenCalled()
})
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(logError).toHaveBeenCalled()
})
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(logError).toHaveBeenCalled()
})
})
})