2020-01-31 01:20:23 +08:00
|
|
|
import {
|
|
|
|
createApp,
|
|
|
|
h,
|
|
|
|
createCommentVNode,
|
|
|
|
withScopeId,
|
|
|
|
resolveComponent,
|
2020-02-16 00:11:55 +08:00
|
|
|
ComponentOptions,
|
|
|
|
ref,
|
|
|
|
defineComponent
|
2020-01-31 01:20:23 +08:00
|
|
|
} from 'vue'
|
2020-03-11 05:13:27 +08:00
|
|
|
import { escapeHtml, mockError } from '@vue/shared'
|
2020-03-11 03:23:14 +08:00
|
|
|
import { renderToString, renderComponent } from '../src/renderToString'
|
2020-02-07 01:07:25 +08:00
|
|
|
import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-03-11 05:13:27 +08:00
|
|
|
mockError()
|
2020-02-11 03:37:35 +08:00
|
|
|
|
2020-01-28 06:23:42 +08:00
|
|
|
describe('ssr: renderToString', () => {
|
2020-01-31 01:20:23 +08:00
|
|
|
test('should apply app context', async () => {
|
|
|
|
const app = createApp({
|
|
|
|
render() {
|
|
|
|
const Foo = resolveComponent('foo') as ComponentOptions
|
|
|
|
return h(Foo)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
app.component('foo', {
|
|
|
|
render: () => h('div', 'foo')
|
|
|
|
})
|
|
|
|
const html = await renderToString(app)
|
|
|
|
expect(html).toBe(`<div>foo</div>`)
|
|
|
|
})
|
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
describe('components', () => {
|
|
|
|
test('vnode components', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
data() {
|
|
|
|
return { msg: 'hello' }
|
|
|
|
},
|
|
|
|
render(this: any) {
|
|
|
|
return h('div', this.msg)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>hello</div>`)
|
|
|
|
})
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-02-16 00:11:55 +08:00
|
|
|
test('option components returning render from setup', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
setup() {
|
|
|
|
const msg = ref('hello')
|
|
|
|
return () => h('div', msg.value)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>hello</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('setup components returning render from setup', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp(
|
|
|
|
defineComponent((props: {}) => {
|
|
|
|
const msg = ref('hello')
|
|
|
|
return () => h('div', msg.value)
|
|
|
|
})
|
|
|
|
)
|
|
|
|
)
|
|
|
|
).toBe(`<div>hello</div>`)
|
|
|
|
})
|
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
test('optimized components', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
data() {
|
|
|
|
return { msg: 'hello' }
|
|
|
|
},
|
|
|
|
ssrRender(ctx, push) {
|
|
|
|
push(`<div>${ctx.msg}</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>hello</div>`)
|
|
|
|
})
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-02-11 03:37:35 +08:00
|
|
|
describe('template components', () => {
|
|
|
|
test('render', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
data() {
|
|
|
|
return { msg: 'hello' }
|
|
|
|
},
|
|
|
|
template: `<div>{{ msg }}</div>`
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>hello</div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('handle compiler errors', async () => {
|
|
|
|
await renderToString(createApp({ template: `<` }))
|
|
|
|
|
|
|
|
expect(
|
2020-03-11 05:13:27 +08:00
|
|
|
'Template compilation error: Unexpected EOF in tag.\n' +
|
2020-02-11 03:37:35 +08:00
|
|
|
'1 | <\n' +
|
|
|
|
' | ^'
|
|
|
|
).toHaveBeenWarned()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
test('nested vnode components', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
render(this: any) {
|
|
|
|
return h('div', this.msg)
|
|
|
|
}
|
|
|
|
}
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
render() {
|
|
|
|
return h('div', ['parent', h(Child, { msg: 'hello' })])
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>parent<div>hello</div></div>`)
|
|
|
|
})
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
test('nested optimized components', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
ssrRender(ctx: any, push: any) {
|
|
|
|
push(`<div>${ctx.msg}</div>`)
|
|
|
|
}
|
|
|
|
}
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(renderComponent(Child, { msg: 'hello' }, null, parent))
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>parent<div>hello</div></div>`)
|
|
|
|
})
|
|
|
|
|
2020-02-11 03:37:35 +08:00
|
|
|
test('nested template components', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
template: `<div>{{ msg }}</div>`
|
|
|
|
}
|
|
|
|
const app = createApp({
|
|
|
|
template: `<div>parent<Child msg="hello" /></div>`
|
|
|
|
})
|
|
|
|
app.component('Child', Child)
|
|
|
|
|
|
|
|
expect(await renderToString(app)).toBe(
|
|
|
|
`<div>parent<div>hello</div></div>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('mixing optimized / vnode / template components', async () => {
|
2020-01-30 05:46:18 +08:00
|
|
|
const OptimizedChild = {
|
|
|
|
props: ['msg'],
|
|
|
|
ssrRender(ctx: any, push: any) {
|
|
|
|
push(`<div>${ctx.msg}</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const VNodeChild = {
|
|
|
|
props: ['msg'],
|
|
|
|
render(this: any) {
|
|
|
|
return h('div', this.msg)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-11 03:37:35 +08:00
|
|
|
const TemplateChild = {
|
|
|
|
props: ['msg'],
|
|
|
|
template: `<div>{{ msg }}</div>`
|
|
|
|
}
|
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(
|
|
|
|
renderComponent(OptimizedChild, { msg: 'opt' }, null, parent)
|
|
|
|
)
|
|
|
|
push(renderComponent(VNodeChild, { msg: 'vnode' }, null, parent))
|
2020-02-11 03:37:35 +08:00
|
|
|
push(
|
|
|
|
renderComponent(
|
|
|
|
TemplateChild,
|
|
|
|
{ msg: 'template' },
|
|
|
|
null,
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
2020-01-30 05:46:18 +08:00
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2020-02-11 03:37:35 +08:00
|
|
|
).toBe(
|
|
|
|
`<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`
|
|
|
|
)
|
2020-01-30 05:46:18 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('nested components with optimized slots', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
ssrRender(ctx: any, push: any, parent: any) {
|
|
|
|
push(`<div class="child">`)
|
2020-02-07 01:07:25 +08:00
|
|
|
ssrRenderSlot(
|
2020-02-06 10:04:40 +08:00
|
|
|
ctx.$slots,
|
|
|
|
'default',
|
|
|
|
{ msg: 'from slot' },
|
|
|
|
() => {
|
|
|
|
push(`fallback`)
|
|
|
|
},
|
|
|
|
push,
|
|
|
|
parent
|
|
|
|
)
|
2020-01-30 05:46:18 +08:00
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(
|
|
|
|
renderComponent(
|
|
|
|
Child,
|
|
|
|
{ msg: 'hello' },
|
|
|
|
{
|
|
|
|
// optimized slot using string push
|
2020-02-02 13:05:27 +08:00
|
|
|
default: ({ msg }: any, push: any, p: any) => {
|
2020-01-30 05:46:18 +08:00
|
|
|
push(`<span>${msg}</span>`)
|
|
|
|
},
|
2020-02-02 13:05:27 +08:00
|
|
|
// important to avoid slots being normalized
|
2020-02-13 02:45:35 +08:00
|
|
|
_: 1 as any
|
2020-01-30 05:46:18 +08:00
|
|
|
},
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(
|
|
|
|
`<div>parent<div class="child">` +
|
2020-02-27 05:32:06 +08:00
|
|
|
`<span>from slot</span>` +
|
2020-01-30 05:46:18 +08:00
|
|
|
`</div></div>`
|
|
|
|
)
|
2020-02-06 10:04:40 +08:00
|
|
|
|
|
|
|
// test fallback
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(renderComponent(Child, { msg: 'hello' }, null, parent))
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
2020-02-27 05:32:06 +08:00
|
|
|
).toBe(`<div>parent<div class="child">fallback</div></div>`)
|
2020-01-30 05:46:18 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('nested components with vnode slots', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
ssrRender(ctx: any, push: any, parent: any) {
|
|
|
|
push(`<div class="child">`)
|
2020-02-07 01:07:25 +08:00
|
|
|
ssrRenderSlot(
|
2020-02-06 10:04:40 +08:00
|
|
|
ctx.$slots,
|
|
|
|
'default',
|
|
|
|
{ msg: 'from slot' },
|
|
|
|
null,
|
|
|
|
push,
|
|
|
|
parent
|
|
|
|
)
|
2020-01-30 05:46:18 +08:00
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(
|
|
|
|
renderComponent(
|
|
|
|
Child,
|
|
|
|
{ msg: 'hello' },
|
|
|
|
{
|
|
|
|
// bailed slots returning raw vnodes
|
|
|
|
default: ({ msg }: any) => {
|
|
|
|
return h('span', msg)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(
|
|
|
|
`<div>parent<div class="child">` +
|
2020-02-27 05:32:06 +08:00
|
|
|
`<span>from slot</span>` +
|
2020-01-30 05:46:18 +08:00
|
|
|
`</div></div>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-02-11 03:37:35 +08:00
|
|
|
test('nested components with template slots', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
template: `<div class="child"><slot msg="from slot"></slot></div>`
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = createApp({
|
|
|
|
template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
|
|
|
|
})
|
|
|
|
app.component('Child', Child)
|
|
|
|
|
|
|
|
expect(await renderToString(app)).toBe(
|
|
|
|
`<div>parent<div class="child">` +
|
2020-02-27 05:32:06 +08:00
|
|
|
`<span>from slot</span>` +
|
2020-02-11 03:37:35 +08:00
|
|
|
`</div></div>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('nested render fn components with template slots', async () => {
|
|
|
|
const Child = {
|
|
|
|
props: ['msg'],
|
|
|
|
render(this: any) {
|
|
|
|
return h(
|
|
|
|
'div',
|
|
|
|
{
|
|
|
|
class: 'child'
|
|
|
|
},
|
|
|
|
this.$slots.default({ msg: 'from slot' })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = createApp({
|
|
|
|
template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
|
|
|
|
})
|
|
|
|
app.component('Child', Child)
|
|
|
|
|
|
|
|
expect(await renderToString(app)).toBe(
|
|
|
|
`<div>parent<div class="child">` +
|
|
|
|
`<span>from slot</span>` +
|
|
|
|
`</div></div>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2020-01-30 05:46:18 +08:00
|
|
|
test('async components', async () => {
|
|
|
|
const Child = {
|
|
|
|
// should wait for resovled render context from setup()
|
|
|
|
async setup() {
|
|
|
|
return {
|
|
|
|
msg: 'hello'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
ssrRender(ctx: any, push: any) {
|
|
|
|
push(`<div>${ctx.msg}</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(renderComponent(Child, null, null, parent))
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>parent<div>hello</div></div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('parallel async components', async () => {
|
|
|
|
const OptimizedChild = {
|
|
|
|
props: ['msg'],
|
|
|
|
async setup(props: any) {
|
|
|
|
return {
|
|
|
|
localMsg: props.msg + '!'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
ssrRender(ctx: any, push: any) {
|
|
|
|
push(`<div>${ctx.localMsg}</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const VNodeChild = {
|
|
|
|
props: ['msg'],
|
|
|
|
async setup(props: any) {
|
|
|
|
return {
|
|
|
|
localMsg: props.msg + '!'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
render(this: any) {
|
|
|
|
return h('div', this.localMsg)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
createApp({
|
|
|
|
ssrRender(_ctx, push, parent) {
|
|
|
|
push(`<div>parent`)
|
|
|
|
push(
|
|
|
|
renderComponent(OptimizedChild, { msg: 'opt' }, null, parent)
|
|
|
|
)
|
|
|
|
push(renderComponent(VNodeChild, { msg: 'vnode' }, null, parent))
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
).toBe(`<div>parent<div>opt!</div><div>vnode!</div></div>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
})
|
2020-01-28 06:23:42 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
describe('vnode element', () => {
|
|
|
|
test('props', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello')
|
|
|
|
)
|
|
|
|
).toBe(`<div id="foo&" class="bar baz">hello</div>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
test('text children', async () => {
|
|
|
|
expect(await renderToString(h('div', 'hello'))).toBe(`<div>hello</div>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
test('array children', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
h('div', [
|
|
|
|
'foo',
|
|
|
|
h('span', 'bar'),
|
|
|
|
[h('span', 'baz')],
|
|
|
|
createCommentVNode('qux')
|
|
|
|
])
|
|
|
|
)
|
2020-02-27 05:32:06 +08:00
|
|
|
).toBe(`<div>foo<span>bar</span><span>baz</span><!--qux--></div>`)
|
2020-01-30 06:36:06 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('void elements', async () => {
|
|
|
|
expect(await renderToString(h('input'))).toBe(`<input>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
test('innerHTML', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
h(
|
|
|
|
'div',
|
|
|
|
{
|
|
|
|
innerHTML: `<span>hello</span>`
|
|
|
|
},
|
|
|
|
'ignored'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
).toBe(`<div><span>hello</span></div>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
test('textContent', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
h(
|
|
|
|
'div',
|
|
|
|
{
|
|
|
|
textContent: `<span>hello</span>`
|
|
|
|
},
|
|
|
|
'ignored'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
).toBe(`<div>${escapeHtml(`<span>hello</span>`)}</div>`)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
test('textarea value', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
h(
|
|
|
|
'textarea',
|
|
|
|
{
|
|
|
|
value: `<span>hello</span>`
|
|
|
|
},
|
|
|
|
'ignored'
|
|
|
|
)
|
|
|
|
)
|
|
|
|
).toBe(`<textarea>${escapeHtml(`<span>hello</span>`)}</textarea>`)
|
|
|
|
})
|
|
|
|
})
|
2020-01-30 05:46:18 +08:00
|
|
|
|
2020-01-30 06:36:06 +08:00
|
|
|
describe('scopeId', () => {
|
2020-01-30 10:13:34 +08:00
|
|
|
// note: here we are only testing scopeId handling for vdom serialization.
|
|
|
|
// compiled srr render functions will include scopeId directly in strings.
|
|
|
|
const withId = withScopeId('data-v-test')
|
|
|
|
const withChildId = withScopeId('data-v-child')
|
|
|
|
|
|
|
|
test('basic', async () => {
|
|
|
|
expect(
|
|
|
|
await renderToString(
|
|
|
|
withId(() => {
|
|
|
|
return h('div')
|
|
|
|
})()
|
|
|
|
)
|
|
|
|
).toBe(`<div data-v-test></div>`)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('with slots', async () => {
|
|
|
|
const Child = {
|
|
|
|
__scopeId: 'data-v-child',
|
|
|
|
render: withChildId(function(this: any) {
|
|
|
|
return h('div', this.$slots.default())
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
const Parent = {
|
|
|
|
__scopeId: 'data-v-test',
|
|
|
|
render: withId(() => {
|
|
|
|
return h(Child, null, {
|
|
|
|
default: withId(() => h('span', 'slot'))
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(await renderToString(h(Parent))).toBe(
|
2020-02-21 21:44:13 +08:00
|
|
|
`<div data-v-test data-v-child><span data-v-test data-v-child-s>slot</span></div>`
|
2020-01-30 10:13:34 +08:00
|
|
|
)
|
|
|
|
})
|
2020-01-29 07:48:27 +08:00
|
|
|
})
|
2020-01-28 06:23:42 +08:00
|
|
|
})
|