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

fix(ssr): handle fallthrough attrs in ssr compile output

Browse Source
This commit is contained in:
Evan You
2020-06-26 14:23:50 -04:00
parent 30584bcc61
commit d5dbd27193
21 changed files with 776 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
packages/compiler-ssr/__tests__/ssrVShow.spec.ts
View File

@@ -1,78 +1,118 @@
import { compile } from '../src'
describe('ssr: v-show', () => {
test('basic', () => {
expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
function compileWithWrapper(src: string) {
return compile(`<div>${src}</div>`)
}
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div style=\\"\${_ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })}\\"></div>\`)
describe('ssr: v-show', () => {
test('basic as root', () => {
expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps({
style: (_ctx.foo) ? null : { display: \\"none\\" }
}, _attrs))}></div>\`)
}"
`)
})
test('basic', () => {
expect(compileWithWrapper(`<div v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
_ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })
}\\"></div></div>\`)
}"
`)
})
test('with static style', () => {
expect(compile(`<div style="color:red" v-show="foo"/>`).code)
expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div style=\\"\${_ssrRenderStyle([
{\\"color\\":\\"red\\"},
(_ctx.foo) ? null : { display: \\"none\\" }
])}\\"></div>\`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
_ssrRenderStyle([
{\\"color\\":\\"red\\"},
(_ctx.foo) ? null : { display: \\"none\\" }
])
}\\"></div></div>\`)
}"
`)
})
test('with dynamic style', () => {
expect(compile(`<div :style="{ color: 'red' }" v-show="foo"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
expect(
compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div style=\\"\${_ssrRenderStyle([
{ color: 'red' },
(_ctx.foo) ? null : { display: \\"none\\" }
])}\\"></div>\`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
_ssrRenderStyle([
{ color: 'red' },
(_ctx.foo) ? null : { display: \\"none\\" }
])
}\\"></div></div>\`)
}"
`)
})
test('with static + dynamic style', () => {
expect(
compile(`<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`)
.code
compileWithWrapper(
`<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
"const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div style=\\"\${_ssrRenderStyle([
{\\"color\\":\\"red\\"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
])}\\"></div>\`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div style=\\"\${
_ssrRenderStyle([
{\\"color\\":\\"red\\"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
])
}\\"></div></div>\`)
}"
`)
})
test('with v-bind', () => {
expect(
compile(
compileWithWrapper(
`<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_ctx.baz, {
style: [
{\\"color\\":\\"red\\"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
]
}))}></div>\`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><div\${
_ssrRenderAttrs(_mergeProps(_ctx.baz, {
style: [
{\\"color\\":\\"red\\"},
{ fontSize: 14 },
(_ctx.foo) ? null : { display: \\"none\\" }
]
}))
}></div></div>\`)
}"
`)
})