2021-03-06 00:10:06 +08:00
|
|
|
import { createApp, mergeProps, withCtx } from 'vue'
|
2020-06-27 12:25:07 +08:00
|
|
|
import { renderToString } from '../src/renderToString'
|
|
|
|
import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
|
|
|
|
|
2021-03-06 00:10:06 +08:00
|
|
|
describe('ssr: scopedId runtime behavior', () => {
|
|
|
|
test('id on component root', async () => {
|
2020-06-27 12:25:07 +08:00
|
|
|
const Child = {
|
|
|
|
ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
|
|
|
|
push(`<div${ssrRenderAttrs(attrs)}></div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Comp = {
|
2021-03-06 00:10:06 +08:00
|
|
|
__scopeId: 'parent',
|
|
|
|
ssrRender: (ctx: any, push: any, parent: any) => {
|
2020-06-27 12:25:07 +08:00
|
|
|
push(ssrRenderComponent(Child), null, null, parent)
|
2021-03-06 00:10:06 +08:00
|
|
|
}
|
2020-06-27 12:25:07 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const result = await renderToString(createApp(Comp))
|
|
|
|
expect(result).toBe(`<div parent></div>`)
|
|
|
|
})
|
|
|
|
|
2021-03-06 00:10:06 +08:00
|
|
|
test('id and :slotted on component root', async () => {
|
2020-06-27 12:25:07 +08:00
|
|
|
const Child = {
|
2021-03-06 00:10:06 +08:00
|
|
|
// <div></div>
|
2020-06-27 12:25:07 +08:00
|
|
|
ssrRender: (_: any, push: any, _parent: any, attrs: any) => {
|
|
|
|
push(`<div${ssrRenderAttrs(attrs)} child></div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Wrapper = {
|
|
|
|
__scopeId: 'wrapper',
|
|
|
|
ssrRender: (ctx: any, push: any, parent: any) => {
|
2021-03-06 00:10:06 +08:00
|
|
|
// <slot/>
|
|
|
|
ssrRenderSlot(
|
|
|
|
ctx.$slots,
|
|
|
|
'default',
|
|
|
|
{},
|
|
|
|
null,
|
|
|
|
push,
|
|
|
|
parent,
|
|
|
|
'wrapper-s'
|
|
|
|
)
|
2020-06-27 12:25:07 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Comp = {
|
2021-03-06 00:10:06 +08:00
|
|
|
__scopeId: 'parent',
|
|
|
|
ssrRender: (_: any, push: any, parent: any) => {
|
|
|
|
// <Wrapper><Child/></Wrapper>
|
2020-06-27 12:25:07 +08:00
|
|
|
push(
|
|
|
|
ssrRenderComponent(
|
|
|
|
Wrapper,
|
|
|
|
null,
|
|
|
|
{
|
2021-03-06 00:10:06 +08:00
|
|
|
default: withCtx(
|
|
|
|
(_: any, push: any, parent: any, scopeId: string) => {
|
|
|
|
push(ssrRenderComponent(Child, null, null, parent, scopeId))
|
|
|
|
}
|
|
|
|
),
|
2020-06-27 12:25:07 +08:00
|
|
|
_: 1
|
|
|
|
} as any,
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
2021-03-06 00:10:06 +08:00
|
|
|
}
|
2020-06-27 12:25:07 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
const result = await renderToString(createApp(Comp))
|
|
|
|
expect(result).toBe(`<!--[--><div parent wrapper-s child></div><!--]-->`)
|
|
|
|
})
|
2021-03-06 00:10:06 +08:00
|
|
|
|
|
|
|
// #2892
|
|
|
|
test(':slotted on forwarded slots', async () => {
|
|
|
|
const Wrapper = {
|
|
|
|
__scopeId: 'wrapper',
|
|
|
|
ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
|
|
|
|
// <div class="wrapper"><slot/></div>
|
|
|
|
push(
|
|
|
|
`<div${ssrRenderAttrs(
|
|
|
|
mergeProps({ class: 'wrapper' }, attrs)
|
|
|
|
)} wrapper>`
|
|
|
|
)
|
|
|
|
ssrRenderSlot(
|
|
|
|
ctx.$slots,
|
|
|
|
'default',
|
|
|
|
{},
|
|
|
|
null,
|
|
|
|
push,
|
|
|
|
parent,
|
|
|
|
'wrapper-s'
|
|
|
|
)
|
|
|
|
push(`</div>`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Slotted = {
|
|
|
|
__scopeId: 'slotted',
|
|
|
|
ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
|
|
|
|
// <Wrapper><slot/></Wrapper>
|
|
|
|
push(
|
|
|
|
ssrRenderComponent(
|
|
|
|
Wrapper,
|
|
|
|
attrs,
|
|
|
|
{
|
|
|
|
default: withCtx(
|
|
|
|
(_: any, push: any, parent: any, scopeId: string) => {
|
|
|
|
ssrRenderSlot(
|
|
|
|
ctx.$slots,
|
|
|
|
'default',
|
|
|
|
{},
|
|
|
|
null,
|
|
|
|
push,
|
|
|
|
parent,
|
|
|
|
'slotted-s' + scopeId
|
|
|
|
)
|
|
|
|
}
|
|
|
|
),
|
|
|
|
_: 1
|
|
|
|
} as any,
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const Root = {
|
|
|
|
__scopeId: 'root',
|
|
|
|
// <Slotted><div></div></Slotted>
|
|
|
|
ssrRender: (_: any, push: any, parent: any, attrs: any) => {
|
|
|
|
push(
|
|
|
|
ssrRenderComponent(
|
|
|
|
Slotted,
|
|
|
|
attrs,
|
|
|
|
{
|
|
|
|
default: withCtx(
|
|
|
|
(_: any, push: any, parent: any, scopeId: string) => {
|
|
|
|
push(`<div root${scopeId}></div>`)
|
|
|
|
}
|
|
|
|
),
|
|
|
|
_: 1
|
|
|
|
} as any,
|
|
|
|
parent
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const result = await renderToString(createApp(Root))
|
|
|
|
expect(result).toBe(
|
|
|
|
`<div class="wrapper" root slotted wrapper>` +
|
|
|
|
`<!--[--><!--[--><div root slotted-s wrapper-s></div><!--]--><!--]-->` +
|
|
|
|
`</div>`
|
|
|
|
)
|
|
|
|
})
|
2020-06-27 12:25:07 +08:00
|
|
|
})
|