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

63
packages/compiler-ssr/__tests__/ssrVIf.spec.ts
View File

@@ -3,10 +3,11 @@ import { compile } from '../src'
describe('ssr: v-if', () => {
test('basic', () => {
expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else {
_push(\`<!---->\`)
}
@@ -17,10 +18,11 @@ describe('ssr: v-if', () => {
test('with nested content', () => {
expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div>hello<span>ok</span></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
} else {
_push(\`<!---->\`)
}
@@ -31,12 +33,13 @@ describe('ssr: v-if', () => {
test('v-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else/>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else {
_push(\`<span></span>\`)
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
}
}"
`)
@@ -45,12 +48,13 @@ describe('ssr: v-if', () => {
test('v-if + v-else-if', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span></span>\`)
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<!---->\`)
}
@@ -61,14 +65,15 @@ describe('ssr: v-if', () => {
test('v-if + v-else-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span></span>\`)
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<p></p>\`)
_push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
}
}"
`)
@@ -78,7 +83,7 @@ describe('ssr: v-if', () => {
expect(compile(`<template v-if="foo">hello</template>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<!--[-->hello<!--]-->\`)
} else {
@@ -92,10 +97,11 @@ describe('ssr: v-if', () => {
// single element should not wrap with fragment
expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
.toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div>hi</div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
} else {
_push(\`<!---->\`)
}
@@ -108,7 +114,7 @@ describe('ssr: v-if', () => {
compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`).code
).toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
} else {
@@ -124,7 +130,7 @@ describe('ssr: v-if', () => {
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent) {
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<!--[-->\`)
_ssrRenderList(_ctx.list, (i) => {
@@ -144,12 +150,13 @@ describe('ssr: v-if', () => {
`<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
).code
).toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<!--[--><div>hi</div><div>ho</div><!--]-->\`)
} else {
_push(\`<div></div>\`)
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
}
}"
`)