root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 5 Packages Projects Releases Wiki Activity

wip(vitest-migration): compiler-ssr tests passing

This commit is contained in:
Evan You 2023-01-26 16:50:19 +08:00
parent 0cd2213e6b
commit dca4224c2c
14 changed files with 468 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
packages/compiler-ssr/__tests__/ssrComponent.spec.ts
View File

@ -3,14 +3,14 @@ import { compile } from '../src'
describe('ssr: components', () => { describe('ssr: components', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(` expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue") "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _mergeProps({ _push(_ssrRenderComponent(_component_foo, _mergeProps({
id: "a", id: \\"a\\",
prop: _ctx.b prop: _ctx.b
}, _attrs), null, _parent)) }, _attrs), null, _parent))
}" }"
@ -20,11 +20,11 @@ describe('ssr: components', () => {
// event listeners should still be passed // event listeners should still be passed
test('event listeners', () => { test('event listeners', () => {
expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(` expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue") "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent)) _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
}" }"
@ -34,33 +34,33 @@ describe('ssr: components', () => {
test('dynamic component', () => { test('dynamic component', () => {
expect(compile(`<component is="foo" prop="b" />`).code) expect(compile(`<component is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue") "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer") const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent) _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}" }"
`) `)
expect(compile(`<component :is="foo" prop="b" />`).code) expect(compile(`<component :is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue") "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer") const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent) _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}" }"
`) `)
}) })
describe('slots', () => { describe('slots', () => {
test('implicit default slot', () => { test('implicit default slot', () => {
expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(` expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -68,8 +68,8 @@ describe('ssr: components', () => {
_push(\`hello<div\${_scopeId}></div>\`) _push(\`hello<div\${_scopeId}></div>\`)
} else { } else {
return [ return [
_createTextVNode("hello"), _createTextVNode(\\"hello\\"),
_createVNode("div") _createVNode(\\"div\\")
] ]
} }
}), }),
@ -82,26 +82,26 @@ describe('ssr: components', () => {
test('explicit default slot', () => { test('explicit default slot', () => {
expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code) expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx(({ msg }, _push, _parent, _scopeId) => { default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`) _push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
} else { } else {
return [ return [
_createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
] ]
} }
}), }),
_: 1 /* STABLE */ _: 1 /* STABLE */
}, _parent)) }, _parent))
}" }"
`) `)
}) })
test('empty attribute should not produce syntax error', () => { test('empty attribute should not produce syntax error', () => {
@ -116,11 +116,11 @@ describe('ssr: components', () => {
<template v-slot:named>bar</template> <template v-slot:named>bar</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -128,7 +128,7 @@ describe('ssr: components', () => {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
return [ return [
_createTextVNode("foo") _createTextVNode(\\"foo\\")
] ]
} }
}), }),
@ -137,7 +137,7 @@ describe('ssr: components', () => {
_push(\`bar\`) _push(\`bar\`)
} else { } else {
return [ return [
_createTextVNode("bar") _createTextVNode(\\"bar\\")
] ]
} }
}), }),
@ -153,26 +153,26 @@ describe('ssr: components', () => {
<template v-slot:named v-if="ok">foo</template> <template v-slot:named v-if="ok">foo</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [ _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok) (_ctx.ok)
? { ? {
name: "named", name: \\"named\\",
fn: _withCtx((_, _push, _parent, _scopeId) => { fn: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
return [ return [
_createTextVNode("foo") _createTextVNode(\\"foo\\")
] ]
} }
}), }),
key: "0" key: \\"0\\"
} }
: undefined : undefined
]), _parent)) ]), _parent))
@ -186,11 +186,11 @@ describe('ssr: components', () => {
<template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template> <template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [ _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(_ctx.names, (key) => { _renderList(_ctx.names, (key) => {
@ -227,11 +227,11 @@ describe('ssr: components', () => {
</template> </template>
</foo>`).code </foo>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
foo: _withCtx(({ list }, _push, _parent, _scopeId) => { foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@ -248,12 +248,12 @@ describe('ssr: components', () => {
} else { } else {
return [ return [
(_ctx.ok) (_ctx.ok)
? (_openBlock(), _createBlock("div", { key: 0 }, [ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => { (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock("span")) return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
: _createCommentVNode("v-if", true) : _createCommentVNode(\\"v-if\\", true)
] ]
} }
}), }),
@ -271,12 +271,12 @@ describe('ssr: components', () => {
} else { } else {
return [ return [
ok ok
? (_openBlock(), _createBlock("div", { key: 0 }, [ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => { (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
return (_openBlock(), _createBlock("span")) return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
: _createCommentVNode("v-if", true) : _createCommentVNode(\\"v-if\\", true)
] ]
} }
}), }),
@ -290,26 +290,26 @@ describe('ssr: components', () => {
test('transition', () => { test('transition', () => {
expect(compile(`<transition><div/></transition>`).code) expect(compile(`<transition><div/></transition>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
}" }"
`) `)
}) })
test('keep-alive', () => { test('keep-alive', () => {
expect(compile(`<keep-alive><foo/></keep-alive>`).code) expect(compile(`<keep-alive><foo/></keep-alive>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require("vue") "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, null, _parent)) _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
}" }"
`) `)
}) })
// #5352 // #5352
@ -318,11 +318,11 @@ describe('ssr: components', () => {
compile(`<foo><transition><div v-if="false"/></transition></foo>`) compile(`<foo><transition><div v-if="false"/></transition></foo>`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -338,8 +338,8 @@ describe('ssr: components', () => {
_createVNode(_Transition, null, { _createVNode(_Transition, null, {
default: _withCtx(() => [ default: _withCtx(() => [
false false
? (_openBlock(), _createBlock("div", { key: 0 })) ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
: _createCommentVNode("v-if", true) : _createCommentVNode(\\"v-if\\", true)
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
}) })
@ -357,14 +357,14 @@ describe('ssr: components', () => {
describe('custom directive', () => { describe('custom directive', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(` expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue") "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
const _directive_xxx = _resolveDirective("xxx") const _directive_xxx = _resolveDirective(\\"xxx\\")
_push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })), null, _parent)) _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
}" }"
`) `)
}) })

176
packages/compiler-ssr/__tests__/ssrElement.spec.ts
View File

@ -56,26 +56,26 @@ describe('ssr: element', () => {
test('<textarea> with dynamic v-bind', () => { test('<textarea> with dynamic v-bind', () => {
expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code) expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
_push(\`<textarea\${ _push(\`<textarea\${
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea") _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
}>\${ }>\${
_ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback") _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
}</textarea>\`) }</textarea>\`)
}" }"
`) `)
}) })
test('multiple _ssrInterpolate at parent and child import dependency once', () => { test('multiple _ssrInterpolate at parent and child import dependency once', () => {
expect( expect(
compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
@ -85,9 +85,9 @@ describe('ssr: element', () => {
}>\${ }>\${
_ssrInterpolate(_ctx.hello) _ssrInterpolate(_ctx.hello)
}<textarea\${ }<textarea\${
_ssrRenderAttrs(_temp0 = _ctx.a, "textarea") _ssrRenderAttrs(_temp0 = _ctx.a, \\"textarea\\")
}>\${ }>\${
_ssrInterpolate(("value" in _temp0) ? _temp0.value : "") _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"\\")
}</textarea></div>\`) }</textarea></div>\`)
}" }"
`) `)
@ -99,11 +99,11 @@ describe('ssr: element', () => {
isCustomElement: () => true isCustomElement: () => true
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), "my-foo")}></my-foo>\`) _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
}" }"
`) `)
}) })
@ -113,7 +113,7 @@ describe('ssr: element', () => {
test('static attrs', () => { test('static attrs', () => {
expect( expect(
getCompiledString(`<div id="foo" class="bar"></div>`) getCompiledString(`<div id="foo" class="bar"></div>`)
).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`) ).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
}) })
test('ignore static key/ref', () => { test('ignore static key/ref', () => {
@ -131,93 +131,93 @@ describe('ssr: element', () => {
test('v-bind:class', () => { test('v-bind:class', () => {
expect(getCompiledString(`<div id="foo" :class="bar"></div>`)) expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div id="foo" class="\${ "\`<div id=\\"foo\\" class=\\"\${
_ssrRenderClass(_ctx.bar) _ssrRenderClass(_ctx.bar)
}"></div>\`" }\\"></div>\`"
`) `)
}) })
test('static class + v-bind:class', () => { test('static class + v-bind:class', () => {
expect(getCompiledString(`<div class="foo" :class="bar"></div>`)) expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div class="\${ "\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, "foo"]) _ssrRenderClass([_ctx.bar, \\"foo\\"])
}"></div>\`" }\\"></div>\`"
`) `)
}) })
test('v-bind:class + static class', () => { test('v-bind:class + static class', () => {
expect(getCompiledString(`<div :class="bar" class="foo"></div>`)) expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div class="\${ "\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, "foo"]) _ssrRenderClass([_ctx.bar, \\"foo\\"])
}"></div>\`" }\\"></div>\`"
`) `)
}) })
test('v-bind:style', () => { test('v-bind:style', () => {
expect(getCompiledString(`<div id="foo" :style="bar"></div>`)) expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div id="foo" style="\${ "\`<div id=\\"foo\\" style=\\"\${
_ssrRenderStyle(_ctx.bar) _ssrRenderStyle(_ctx.bar)
}"></div>\`" }\\"></div>\`"
`) `)
}) })
test('static style + v-bind:style', () => { test('static style + v-bind:style', () => {
expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`)) expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div style="\${ "\`<div style=\\"\${
_ssrRenderStyle([{"color":"red"}, _ctx.bar]) _ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
}"></div>\`" }\\"></div>\`"
`) `)
}) })
test('v-bind:arg (boolean)', () => { test('v-bind:arg (boolean)', () => {
expect(getCompiledString(`<input type="checkbox" :checked="checked">`)) expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<input type="checkbox"\${ "\`<input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : "" (_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
}>\`" }>\`"
`) `)
}) })
test('v-bind:arg (non-boolean)', () => { test('v-bind:arg (non-boolean)', () => {
expect(getCompiledString(`<div :id="id" class="bar"></div>`)) expect(getCompiledString(`<div :id="id" class="bar"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttr("id", _ctx.id) _ssrRenderAttr(\\"id\\", _ctx.id)
} class="bar"></div>\`" } class=\\"bar\\"></div>\`"
`) `)
}) })
test('v-bind:[arg]', () => { test('v-bind:[arg]', () => {
expect(getCompiledString(`<div v-bind:[key]="value"></div>`)) expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value }) _ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
}></div>\`" }></div>\`"
`) `)
expect(getCompiledString(`<div class="foo" v-bind:[key]="value"></div>`)) expect(getCompiledString(`<div class="foo" v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs({ _ssrRenderAttrs({
class: "foo", class: \\"foo\\",
[_ctx.key || ""]: _ctx.value [_ctx.key || \\"\\"]: _ctx.value
}) })
}></div>\`" }></div>\`"
`) `)
expect(getCompiledString(`<div :id="id" v-bind:[key]="value"></div>`)) expect(getCompiledString(`<div :id="id" v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs({ _ssrRenderAttrs({
id: _ctx.id, id: _ctx.id,
[_ctx.key || ""]: _ctx.value [_ctx.key || \\"\\"]: _ctx.value
}) })
}></div>\`" }></div>\`"
`) `)
}) })
test('v-bind="obj"', () => { test('v-bind="obj"', () => {
@ -230,10 +230,10 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`)) expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj)) _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
}></div>\`" }></div>\`"
`) `)
expect(getCompiledString(`<div :id="id" v-bind="obj"></div>`)) expect(getCompiledString(`<div :id="id" v-bind="obj"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
@ -245,20 +245,20 @@ describe('ssr: element', () => {
// dynamic key + v-bind="object" // dynamic key + v-bind="object"
expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`)) expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj)) _ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
}></div>\`" }></div>\`"
`) `)
// should merge class and :class // should merge class and :class
expect(getCompiledString(`<div class="a" :class="b" v-bind="obj"></div>`)) expect(getCompiledString(`<div class="a" :class="b" v-bind="obj"></div>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps({ _ssrRenderAttrs(_mergeProps({
class: ["a", _ctx.b] class: [\\"a\\", _ctx.b]
}, _ctx.obj)) }, _ctx.obj))
}></div>\`" }></div>\`"
`) `)
// should merge style and :style // should merge style and :style
expect( expect(
@ -268,7 +268,7 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps({ _ssrRenderAttrs(_mergeProps({
style: [{"color":"red"}, _ctx.b] style: [{\\"color\\":\\"red\\"}, _ctx.b]
}, _ctx.obj)) }, _ctx.obj))
}></div>\`" }></div>\`"
`) `)
@ -277,10 +277,10 @@ describe('ssr: element', () => {
test('should ignore v-on', () => { test('should ignore v-on', () => {
expect( expect(
getCompiledString(`<div id="foo" @click="bar"/>`) getCompiledString(`<div id="foo" @click="bar"/>`)
).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`) ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
expect( expect(
getCompiledString(`<div id="foo" v-on="bar"/>`) getCompiledString(`<div id="foo" v-on="bar"/>`)
).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`) ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`)) expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
@ -292,7 +292,7 @@ describe('ssr: element', () => {
test('custom dir', () => { test('custom dir', () => {
expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(` expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })) _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
}></div>\`" }></div>\`"
`) `)
}) })
@ -300,10 +300,10 @@ describe('ssr: element', () => {
test('custom dir with normal attrs', () => { test('custom dir with normal attrs', () => {
expect(getCompiledString(`<div class="foo" v-xxx />`)) expect(getCompiledString(`<div class="foo" v-xxx />`))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx))) _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`" }></div>\`"
`) `)
}) })
test('custom dir with v-bind', () => { test('custom dir with v-bind', () => {
@ -333,8 +333,8 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"\`<div\${ "\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, { _ssrRenderAttrs(_mergeProps(_ctx.x, {
class: "foo", class: \\"foo\\",
title: "bar" title: \\"bar\\"
}, _ssrGetDirectiveProps(_ctx, _directive_xxx))) }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`" }></div>\`"
`) `)

14
packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: attrs fallthrough', () => { describe('ssr: attrs fallthrough', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<div/>`).code).toMatchInlineSnapshot(` expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
test('with comments', () => { test('with comments', () => {
expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(` expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`) _push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@ -40,12 +40,12 @@ describe('ssr: attrs fallthrough', () => {
test('fallthrough component content (root with comments)', () => { test('fallthrough component content (root with comments)', () => {
expect(compile(`<!--root--><transition><div/></transition>`).code) expect(compile(`<!--root--><transition><div/></transition>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`) _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
}" }"
`) `)
}) })
test('should not inject to fallthrough component content if not root', () => { test('should not inject to fallthrough component content if not root', () => {

22
packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
View File

@ -8,8 +8,8 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }` ssrCssVars: `{ color }`
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }} const _cssVars = { style: { color: _ctx.color }}
@ -24,7 +24,7 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }` ssrCssVars: `{ color }`
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }} const _cssVars = { style: { color: _ctx.color }}
@ -43,11 +43,11 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }` ssrCssVars: `{ color }`
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require("vue") "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
const _cssVars = { style: { color: _ctx.color }} const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`) _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@ -63,8 +63,8 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }` ssrCssVars: `{ color }`
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }} const _cssVars = { style: { color: _ctx.color }}
@ -95,8 +95,8 @@ describe('ssr: inject <style vars>', () => {
} }
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { withCtx: _withCtx } = require("vue") "const { withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }} const _cssVars = { style: { color: _ctx.color }}
@ -122,7 +122,7 @@ describe('ssr: inject <style vars>', () => {
expect(result.code).toMatchInlineSnapshot(` expect(result.code).toMatchInlineSnapshot(`
"(_ctx, _push, _parent, _attrs) => { "(_ctx, _push, _parent, _attrs) => {
const _cssVars = { style: { "--hash": (_unref(dynamic)) }} const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`) _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
}" }"
`) `)

30
packages/compiler-ssr/__tests__/ssrPortal.spec.ts
View File

@ -4,32 +4,32 @@ describe('ssr compile: teleport', () => {
test('should work', () => { test('should work', () => {
expect(compile(`<teleport :to="target"><div/></teleport>`).code) expect(compile(`<teleport :to="target"><div/></teleport>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer") "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => { _ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`) _push(\`<div></div>\`)
}, _ctx.target, false, _parent) }, _ctx.target, false, _parent)
}" }"
`) `)
}) })
test('disabled prop handling', () => { test('disabled prop handling', () => {
expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code) expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer") "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => { _ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`) _push(\`<div></div>\`)
}, _ctx.target, true, _parent) }, _ctx.target, true, _parent)
}" }"
`) `)
expect( expect(
compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer") "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => { _ssrRenderTeleport(_push, (_push) => {

32
packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
View File

@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
mode: 'module' mode: 'module'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer" "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@ -26,11 +26,11 @@ describe('ssr: scopeId', () => {
mode: 'module' mode: 'module'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
_push(\`foo\`) _push(\`foo\`)
} else { } else {
return [ return [
_createTextVNode("foo") _createTextVNode(\\"foo\\")
] ]
} }
}), }),
@ -55,11 +55,11 @@ describe('ssr: scopeId', () => {
mode: 'module' mode: 'module'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`) _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else { } else {
return [ return [
_createVNode("span", null, "hello") _createVNode(\\"span\\", null, \\"hello\\")
] ]
} }
}), }),
@ -84,12 +84,12 @@ describe('ssr: scopeId', () => {
mode: 'module' mode: 'module'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer" import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent("bar") const _component_bar = _resolveComponent(\\"bar\\")
_push(_ssrRenderComponent(_component_foo, _attrs, { _push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`) _push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else { } else {
return [ return [
_createVNode("span") _createVNode(\\"span\\")
] ]
} }
}), }),
@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
}, _parent, _scopeId)) }, _parent, _scopeId))
} else { } else {
return [ return [
_createVNode("span", null, "hello"), _createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, { _createVNode(_component_bar, null, {
default: _withCtx(() => [ default: _withCtx(() => [
_createVNode("span") _createVNode(\\"span\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
}) })

62
packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
View File

@ -4,27 +4,27 @@ import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
describe('ssr: <slot>', () => { describe('ssr: <slot>', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<slot/>`).code).toMatchInlineSnapshot(` expect(compile(`<slot/>`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
}" }"
`) `)
}) })
test('with name', () => { test('with name', () => {
expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(` expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
}" }"
`) `)
}) })
test('with dynamic name', () => { test('with dynamic name', () => {
expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(` expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@ -35,28 +35,28 @@ describe('ssr: <slot>', () => {
test('with props', () => { test('with props', () => {
expect(compile(`<slot name="foo" :p="1" bar="2" />`).code) expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "foo", { _ssrRenderSlot(_ctx.$slots, \\"foo\\", {
p: 1, p: 1,
bar: "2" bar: \\"2\\"
}, null, _push, _parent) }, null, _push, _parent)
}" }"
`) `)
}) })
test('with fallback', () => { test('with fallback', () => {
expect(compile(`<slot>some {{ fallback }} content</slot>`).code) expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "default", {}, () => { _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`) _push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
}, _push, _parent) }, _push, _parent)
}" }"
`) `)
}) })
test('with scopeId', async () => { test('with scopeId', async () => {
@ -65,10 +65,10 @@ describe('ssr: <slot>', () => {
scopeId: 'hello' scopeId: 'hello'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s") _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
}" }"
`) `)
}) })
@ -80,10 +80,10 @@ describe('ssr: <slot>', () => {
slotted: false slotted: false
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer") "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
}" }"
`) `)
}) })
@ -94,19 +94,19 @@ describe('ssr: <slot>', () => {
scopeId: 'hello' scopeId: 'hello'
}).code }).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer") const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent("Comp") const _component_Comp = _resolveComponent(\\"Comp\\")
_push(_ssrRenderComponent(_component_Comp, _attrs, { _push(_ssrRenderComponent(_component_Comp, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) { if (_push) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId) _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
} else { } else {
return [ return [
_renderSlot(_ctx.$slots, "default") _renderSlot(_ctx.$slots, \\"default\\")
] ]
} }
}), }),
@ -120,10 +120,10 @@ describe('ssr: <slot>', () => {
const { code } = compile(`<transition><slot/></transition>`) const { code } = compile(`<transition><slot/></transition>`)
expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER]) expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
expect(code).toMatchInlineSnapshot(` expect(code).toMatchInlineSnapshot(`
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer") "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true) _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
}" }"
`) `)
}) })

12
packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
View File

@ -3,11 +3,11 @@ import { compile } from '../src'
describe('ssr compile: suspense', () => { describe('ssr compile: suspense', () => {
test('implicit default', () => { test('implicit default', () => {
expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(` expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_ssrRenderSuspense(_push, { _ssrRenderSuspense(_push, {
default: () => { default: () => {
@ -30,11 +30,11 @@ describe('ssr compile: suspense', () => {
</template> </template>
</suspense>`).code </suspense>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue") "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer") const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo") const _component_foo = _resolveComponent(\\"foo\\")
_ssrRenderSuspense(_push, { _ssrRenderSuspense(_push, {
default: () => { default: () => {

8
packages/compiler-ssr/__tests__/ssrText.spec.ts
View File

@ -8,7 +8,7 @@ describe('ssr: text', () => {
test('static text with template string special chars', () => { test('static text with template string special chars', () => {
expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot( expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
`"\`\\\`\\\${foo}\\\`\`"` '"`\\\\`\\\\${foo}\\\\``"'
) )
}) })
@ -17,7 +17,7 @@ describe('ssr: text', () => {
// snapshot -> inline snapshot goes through two escapes // snapshot -> inline snapshot goes through two escapes
// so that makes a total of 3 * 2 * 2 = 12 back slashes // so that makes a total of 3 * 2 * 2 = 12 back slashes
expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot( expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
`"\`\\\\\\$foo\`"` '"`\\\\\\\\\\\\$foo`"'
) )
}) })
@ -43,7 +43,7 @@ describe('ssr: text', () => {
test('interpolation', () => { test('interpolation', () => {
expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(` expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`) _push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@ -56,7 +56,7 @@ describe('ssr: text', () => {
compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`) compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${

16
packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
View File

@ -8,7 +8,7 @@ describe('transition-group', () => {
compile(`<transition-group><div v-for="i in list"/></transition-group>`) compile(`<transition-group><div v-for="i in list"/></transition-group>`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -26,7 +26,7 @@ describe('transition-group', () => {
`<transition-group tag="ul"><div v-for="i in list"/></transition-group>` `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`) _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@ -44,7 +44,7 @@ describe('transition-group', () => {
`<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>` `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<\${ _push(\`<\${
@ -70,7 +70,7 @@ describe('transition-group', () => {
</transition-group>` </transition-group>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -97,13 +97,13 @@ describe('transition-group', () => {
</transition-group>` </transition-group>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_mergeProps({ _push(\`<ul\${_ssrRenderAttrs(_mergeProps({
class: "red", class: \\"red\\",
id: "ok" id: \\"ok\\"
}, _attrs))}></ul>\`) }, _attrs))}></ul>\`)
}" }"
`) `)

46
packages/compiler-ssr/__tests__/ssrVFor.spec.ts
View File

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-for', () => { describe('ssr: v-for', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(` expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -18,16 +18,16 @@ describe('ssr: v-for', () => {
test('nested content', () => { test('nested content', () => {
expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code) expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
_ssrRenderList(_ctx.list, (i) => { _ssrRenderList(_ctx.list, (i) => {
_push(\`<div>foo<span>bar</span></div>\`) _push(\`<div>foo<span>bar</span></div>\`)
}) })
_push(\`<!--]-->\`) _push(\`<!--]-->\`)
}" }"
`) `)
}) })
test('nested v-for', () => { test('nested v-for', () => {
@ -38,7 +38,7 @@ describe('ssr: v-for', () => {
`</div>` `</div>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -61,16 +61,16 @@ describe('ssr: v-for', () => {
test('template v-for (text)', () => { test('template v-for (text)', () => {
expect(compile(`<template v-for="i in list">{{ i }}</template>`).code) expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
_ssrRenderList(_ctx.list, (i) => { _ssrRenderList(_ctx.list, (i) => {
_push(\`<!--[-->\${_ssrInterpolate(i)}<!--]-->\`) _push(\`<!--[-->\${_ssrInterpolate(i)}<!--]-->\`)
}) })
_push(\`<!--]-->\`) _push(\`<!--]-->\`)
}" }"
`) `)
}) })
test('template v-for (single element)', () => { test('template v-for (single element)', () => {
@ -78,7 +78,7 @@ describe('ssr: v-for', () => {
compile(`<template v-for="i in list"><span>{{ i }}</span></template>`) compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -96,7 +96,7 @@ describe('ssr: v-for', () => {
`<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>` `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)
@ -120,7 +120,7 @@ describe('ssr: v-for', () => {
expect(code).not.toMatch(`_ctx.foo`) expect(code).not.toMatch(`_ctx.foo`)
expect(code).not.toMatch(`_ctx.index`) expect(code).not.toMatch(`_ctx.index`)
expect(code).toMatchInlineSnapshot(` expect(code).toMatchInlineSnapshot(`
"const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`) _push(\`<!--[-->\`)

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

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-if', () => { describe('ssr: v-if', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(` expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
@ -18,65 +18,65 @@ describe('ssr: v-if', () => {
test('with nested content', () => { test('with nested content', () => {
expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code) expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
} else { } else {
_push(\`<!---->\`) _push(\`<!---->\`)
} }
}" }"
`) `)
}) })
test('v-if + v-else', () => { test('v-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else/>`).code) expect(compile(`<div v-if="foo"/><span v-else/>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else { } else {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`) _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} }
}" }"
`) `)
}) })
test('v-if + v-else-if', () => { test('v-if + v-else-if', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code) expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) { } else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`) _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else { } else {
_push(\`<!---->\`) _push(\`<!---->\`)
} }
}" }"
`) `)
}) })
test('v-if + v-else-if + v-else', () => { test('v-if + v-else-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code) expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) { } else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`) _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else { } else {
_push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`) _push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
} }
}" }"
`) `)
}) })
test('<template v-if> (text)', () => { test('<template v-if> (text)', () => {
@ -97,16 +97,16 @@ describe('ssr: v-if', () => {
// single element should not wrap with fragment // single element should not wrap with fragment
expect(compile(`<template v-if="foo"><div>hi</div></template>`).code) expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
} else { } else {
_push(\`<!---->\`) _push(\`<!---->\`)
} }
}" }"
`) `)
}) })
test('<template v-if> (multiple element)', () => { test('<template v-if> (multiple element)', () => {
@ -128,7 +128,7 @@ describe('ssr: v-if', () => {
expect( expect(
compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer") "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {
@ -150,7 +150,7 @@ describe('ssr: v-if', () => {
`<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>` `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) { if (_ctx.foo) {

166
packages/compiler-ssr/__tests__/ssrVModel.spec.ts
View File

@ -8,42 +8,42 @@ describe('ssr: v-model', () => {
test('<input> (text types)', () => { test('<input> (text types)', () => {
expect(compileWithWrapper(`<input v-model="bar">`).code) expect(compileWithWrapper(`<input v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr("value", _ctx.bar) _ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
expect(compileWithWrapper(`<input type="email" v-model="bar">`).code) expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="email"\${ }><input type=\\"email\\"\${
_ssrRenderAttr("value", _ctx.bar) _ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
}) })
test('<input type="radio">', () => { test('<input type="radio">', () => {
expect( expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="radio" value="foo"\${ }><input type=\\"radio\\" value=\\"foo\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : "" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`) }></div>\`)
}" }"
`) `)
@ -52,32 +52,32 @@ describe('ssr: v-model', () => {
test('<input type="checkbox">', () => { test('<input type="checkbox">', () => {
expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code) expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="checkbox"\${ }><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null) ? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar)) ? " checked" : "" : _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`) }></div>\`)
}" }"
`) `)
expect( expect(
compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`) compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="checkbox" value="foo"\${ }><input type=\\"checkbox\\" value=\\"foo\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, "foo") ? _ssrLooseContain(_ctx.bar, \\"foo\\")
: _ctx.bar)) ? " checked" : "" : _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`) }></div>\`)
}" }"
`) `)
@ -87,13 +87,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">` `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="checkbox"\${ }><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : "" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
}></div>\`) }></div>\`)
}" }"
`) `)
@ -103,13 +103,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">` `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type="checkbox"\${ }><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : "" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`) }></div>\`)
}" }"
`) `)
@ -118,64 +118,64 @@ describe('ssr: v-model', () => {
test('<textarea>', () => { test('<textarea>', () => {
expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code) expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><textarea>\${ }><textarea>\${
_ssrInterpolate(_ctx.foo) _ssrInterpolate(_ctx.foo)
}</textarea></div>\`) }</textarea></div>\`)
}" }"
`) `)
}) })
test('<input :type="x">', () => { test('<input :type="x">', () => {
expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code) expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr("type", _ctx.x) _ssrRenderAttr(\\"type\\", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, null) _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
}></div>\`) }></div>\`)
}" }"
`) `)
expect( expect(
compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr("type", _ctx.x) _ssrRenderAttr(\\"type\\", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar") _ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
} value="bar"></div>\`) } value=\\"bar\\"></div>\`)
}" }"
`) `)
expect( expect(
compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr("type", _ctx.x) _ssrRenderAttr(\\"type\\", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar) _ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
}\${ }\${
_ssrRenderAttr("value", _ctx.bar) _ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
@ -184,26 +184,26 @@ describe('ssr: v-model', () => {
test('<input v-bind="obj">', () => { test('<input v-bind="obj">', () => {
expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code) expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo)))) _ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`) }></div>\`)
}" }"
`) `)
expect( expect(
compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`) compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue") "const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer") const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
@ -211,7 +211,7 @@ describe('ssr: v-model', () => {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo)))) _ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`) }></div>\`)
}" }"
`) `)

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

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