mirrors
/
vue3-core
mirror of https://mirror.osredm.com/root/vue3-core.git
2
0
Fork 0
Code Issues 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', () => {
test('basic', () => {
expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _mergeProps({
id: "a",
id: \\"a\\",
prop: _ctx.b
}, _attrs), null, _parent))
}"
@ -20,11 +20,11 @@ describe('ssr: components', () => {
// event listeners should still be passed
test('event listeners', () => {
expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
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))
}"
@ -34,33 +34,33 @@ describe('ssr: components', () => {
test('dynamic component', () => {
expect(compile(`<component is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}"
`)
expect(compile(`<component :is="foo" prop="b" />`).code)
.toMatchInlineSnapshot(`
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
"const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
}"
`)
})
describe('slots', () => {
test('implicit default slot', () => {
expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -68,8 +68,8 @@ describe('ssr: components', () => {
_push(\`hello<div\${_scopeId}></div>\`)
} else {
return [
_createTextVNode("hello"),
_createVNode("div")
_createTextVNode(\\"hello\\"),
_createVNode(\\"div\\")
]
}
}),
@ -82,26 +82,26 @@ describe('ssr: components', () => {
test('explicit default slot', () => {
expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
.toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) {
_push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
} else {
return [
_createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
]
}
}),
_: 1 /* STABLE */
}, _parent))
}"
`)
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) {
_push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
} else {
return [
_createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
]
}
}),
_: 1 /* STABLE */
}, _parent))
}"
`)
})
test('empty attribute should not produce syntax error', () => {
@ -116,11 +116,11 @@ describe('ssr: components', () => {
<template v-slot:named>bar</template>
</foo>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -128,7 +128,7 @@ describe('ssr: components', () => {
_push(\`foo\`)
} else {
return [
_createTextVNode("foo")
_createTextVNode(\\"foo\\")
]
}
}),
@ -137,7 +137,7 @@ describe('ssr: components', () => {
_push(\`bar\`)
} else {
return [
_createTextVNode("bar")
_createTextVNode(\\"bar\\")
]
}
}),
@ -153,26 +153,26 @@ describe('ssr: components', () => {
<template v-slot:named v-if="ok">foo</template>
</foo>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
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 */ }, [
(_ctx.ok)
? {
name: "named",
name: \\"named\\",
fn: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`foo\`)
} else {
return [
_createTextVNode("foo")
_createTextVNode(\\"foo\\")
]
}
}),
key: "0"
key: \\"0\\"
}
: undefined
]), _parent))
@ -186,11 +186,11 @@ describe('ssr: components', () => {
<template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
</foo>`).code
).toMatchInlineSnapshot(`
"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 { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
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 */ }, [
_renderList(_ctx.names, (key) => {
@ -227,11 +227,11 @@ describe('ssr: components', () => {
</template>
</foo>`).code
).toMatchInlineSnapshot(`
"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 { 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\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@ -248,12 +248,12 @@ describe('ssr: components', () => {
} else {
return [
(_ctx.ok)
? (_openBlock(), _createBlock("div", { key: 0 }, [
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock("span"))
return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
: _createCommentVNode("v-if", true)
: _createCommentVNode(\\"v-if\\", true)
]
}
}),
@ -271,12 +271,12 @@ describe('ssr: components', () => {
} else {
return [
ok
? (_openBlock(), _createBlock("div", { key: 0 }, [
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
return (_openBlock(), _createBlock("span"))
return (_openBlock(), _createBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
: _createCommentVNode("v-if", true)
: _createCommentVNode(\\"v-if\\", true)
]
}
}),
@ -290,26 +290,26 @@ describe('ssr: components', () => {
test('transition', () => {
expect(compile(`<transition><div/></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
}"
`)
})
test('keep-alive', () => {
expect(compile(`<keep-alive><foo/></keep-alive>`).code)
.toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
}"
`)
_push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
}"
`)
})
// #5352
@ -318,11 +318,11 @@ describe('ssr: components', () => {
compile(`<foo><transition><div v-if="false"/></transition></foo>`)
.code
).toMatchInlineSnapshot(`
"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 { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -338,8 +338,8 @@ describe('ssr: components', () => {
_createVNode(_Transition, null, {
default: _withCtx(() => [
false
? (_openBlock(), _createBlock("div", { key: 0 }))
: _createCommentVNode("v-if", true)
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true)
]),
_: 1 /* STABLE */
})
@ -357,14 +357,14 @@ describe('ssr: components', () => {
describe('custom directive', () => {
test('basic', () => {
expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue")
const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _directive_xxx = _resolveDirective("xxx")
const _component_foo = _resolveComponent(\\"foo\\")
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', () => {
expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
.toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
_push(\`<textarea\${
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea")
}>\${
_ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback")
}</textarea>\`)
}"
`)
_push(\`<textarea\${
_ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
}>\${
_ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
}</textarea>\`)
}"
`)
})
test('multiple _ssrInterpolate at parent and child import dependency once', () => {
expect(
compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
).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) {
let _temp0
@ -85,9 +85,9 @@ describe('ssr: element', () => {
}>\${
_ssrInterpolate(_ctx.hello)
}<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>\`)
}"
`)
@ -99,11 +99,11 @@ describe('ssr: element', () => {
isCustomElement: () => true
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
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', () => {
expect(
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', () => {
@ -131,93 +131,93 @@ describe('ssr: element', () => {
test('v-bind:class', () => {
expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div id="foo" class="\${
_ssrRenderClass(_ctx.bar)
}"></div>\`"
`)
"\`<div id=\\"foo\\" class=\\"\${
_ssrRenderClass(_ctx.bar)
}\\"></div>\`"
`)
})
test('static class + v-bind:class', () => {
expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div class="\${
_ssrRenderClass([_ctx.bar, "foo"])
}"></div>\`"
`)
"\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, \\"foo\\"])
}\\"></div>\`"
`)
})
test('v-bind:class + static class', () => {
expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
.toMatchInlineSnapshot(`
"\`<div class="\${
_ssrRenderClass([_ctx.bar, "foo"])
}"></div>\`"
`)
"\`<div class=\\"\${
_ssrRenderClass([_ctx.bar, \\"foo\\"])
}\\"></div>\`"
`)
})
test('v-bind:style', () => {
expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div id="foo" style="\${
_ssrRenderStyle(_ctx.bar)
}"></div>\`"
`)
"\`<div id=\\"foo\\" style=\\"\${
_ssrRenderStyle(_ctx.bar)
}\\"></div>\`"
`)
})
test('static style + v-bind:style', () => {
expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div style="\${
_ssrRenderStyle([{"color":"red"}, _ctx.bar])
}"></div>\`"
`)
"\`<div style=\\"\${
_ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
}\\"></div>\`"
`)
})
test('v-bind:arg (boolean)', () => {
expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
.toMatchInlineSnapshot(`
"\`<input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : ""
}>\`"
`)
"\`<input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
}>\`"
`)
})
test('v-bind:arg (non-boolean)', () => {
expect(getCompiledString(`<div :id="id" class="bar"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttr("id", _ctx.id)
} class="bar"></div>\`"
`)
"\`<div\${
_ssrRenderAttr(\\"id\\", _ctx.id)
} class=\\"bar\\"></div>\`"
`)
})
test('v-bind:[arg]', () => {
expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value })
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
}></div>\`"
`)
expect(getCompiledString(`<div class="foo" v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs({
class: "foo",
[_ctx.key || ""]: _ctx.value
})
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs({
class: \\"foo\\",
[_ctx.key || \\"\\"]: _ctx.value
})
}></div>\`"
`)
expect(getCompiledString(`<div :id="id" v-bind:[key]="value"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs({
id: _ctx.id,
[_ctx.key || ""]: _ctx.value
})
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs({
id: _ctx.id,
[_ctx.key || \\"\\"]: _ctx.value
})
}></div>\`"
`)
})
test('v-bind="obj"', () => {
@ -230,10 +230,10 @@ describe('ssr: element', () => {
expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
}></div>\`"
`)
expect(getCompiledString(`<div :id="id" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
@ -245,20 +245,20 @@ describe('ssr: element', () => {
// dynamic key + v-bind="object"
expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
}></div>\`"
`)
// should merge class and :class
expect(getCompiledString(`<div class="a" :class="b" v-bind="obj"></div>`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
class: ["a", _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_mergeProps({
class: [\\"a\\", _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
// should merge style and :style
expect(
@ -268,7 +268,7 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
style: [{"color":"red"}, _ctx.b]
style: [{\\"color\\":\\"red\\"}, _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
@ -277,10 +277,10 @@ describe('ssr: element', () => {
test('should ignore v-on', () => {
expect(
getCompiledString(`<div id="foo" @click="bar"/>`)
).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
expect(
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"/>`))
.toMatchInlineSnapshot(`
"\`<div\${
@ -292,7 +292,7 @@ describe('ssr: element', () => {
test('custom dir', () => {
expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
_ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
}></div>\`"
`)
})
@ -300,10 +300,10 @@ describe('ssr: element', () => {
test('custom dir with normal attrs', () => {
expect(getCompiledString(`<div class="foo" v-xxx />`))
.toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
"\`<div\${
_ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
})
test('custom dir with v-bind', () => {
@ -333,8 +333,8 @@ describe('ssr: element', () => {
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, {
class: "foo",
title: "bar"
class: \\"foo\\",
title: \\"bar\\"
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)

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

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: attrs fallthrough', () => {
test('basic', () => {
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) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
test('with comments', () => {
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) {
_push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@ -40,12 +40,12 @@ describe('ssr: attrs fallthrough', () => {
test('fallthrough component content (root with comments)', () => {
expect(compile(`<!--root--><transition><div/></transition>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
}"
`)
})
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 }`
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -24,7 +24,7 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -43,11 +43,11 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@ -63,8 +63,8 @@ describe('ssr: inject <style vars>', () => {
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -95,8 +95,8 @@ describe('ssr: inject <style vars>', () => {
}
).code
).toMatchInlineSnapshot(`
"const { withCtx: _withCtx } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
"const { withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _cssVars = { style: { color: _ctx.color }}
@ -122,7 +122,7 @@ describe('ssr: inject <style vars>', () => {
expect(result.code).toMatchInlineSnapshot(`
"(_ctx, _push, _parent, _attrs) => {
const _cssVars = { style: { "--hash": (_unref(dynamic)) }}
const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
_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', () => {
expect(compile(`<teleport :to="target"><div/></teleport>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, false, _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, false, _parent)
}"
`)
})
test('disabled prop handling', () => {
expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, true, _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {
_push(\`<div></div>\`)
}, _ctx.target, true, _parent)
}"
`)
expect(
compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
"const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderTeleport(_push, (_push) => {

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

@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
"import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@ -26,11 +26,11 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
_push(\`foo\`)
} else {
return [
_createTextVNode("foo")
_createTextVNode(\\"foo\\")
]
}
}),
@ -55,11 +55,11 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else {
return [
_createVNode("span", null, "hello")
_createVNode(\\"span\\", null, \\"hello\\")
]
}
}),
@ -84,12 +84,12 @@ describe('ssr: scopeId', () => {
mode: 'module'
}).code
).toMatchInlineSnapshot(`
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_bar = _resolveComponent("bar")
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else {
return [
_createVNode("span")
_createVNode(\\"span\\")
]
}
}),
@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
}, _parent, _scopeId))
} else {
return [
_createVNode("span", null, "hello"),
_createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, {
default: _withCtx(() => [
_createVNode("span")
_createVNode(\\"span\\")
]),
_: 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>', () => {
test('basic', () => {
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) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
}"
`)
})
test('with name', () => {
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) {
_ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
}"
`)
})
test('with dynamic name', () => {
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) {
_ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@ -35,28 +35,28 @@ describe('ssr: <slot>', () => {
test('with props', () => {
expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, "foo", {
p: 1,
bar: "2"
}, null, _push, _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"foo\\", {
p: 1,
bar: \\"2\\"
}, null, _push, _parent)
}"
`)
})
test('with fallback', () => {
expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
.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) {
_ssrRenderSlot(_ctx.$slots, "default", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
}, _push, _parent)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
_push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
}, _push, _parent)
}"
`)
})
test('with scopeId', async () => {
@ -65,10 +65,10 @@ describe('ssr: <slot>', () => {
scopeId: 'hello'
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
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
}).code
).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
"const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
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'
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_Comp = _resolveComponent("Comp")
const _component_Comp = _resolveComponent(\\"Comp\\")
_push(_ssrRenderComponent(_component_Comp, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
} else {
return [
_renderSlot(_ctx.$slots, "default")
_renderSlot(_ctx.$slots, \\"default\\")
]
}
}),
@ -120,10 +120,10 @@ describe('ssr: <slot>', () => {
const { code } = compile(`<transition><slot/></transition>`)
expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
expect(code).toMatchInlineSnapshot(`
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
"const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
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', () => {
test('implicit default', () => {
expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_ssrRenderSuspense(_push, {
default: () => {
@ -30,11 +30,11 @@ describe('ssr compile: suspense', () => {
</template>
</suspense>`).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
"const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent("foo")
const _component_foo = _resolveComponent(\\"foo\\")
_ssrRenderSuspense(_push, {
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', () => {
expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
`"\`\\\`\\\${foo}\\\`\`"`
'"`\\\\`\\\\${foo}\\\\``"'
)
})
@ -17,7 +17,7 @@ describe('ssr: text', () => {
// snapshot -> inline snapshot goes through two escapes
// so that makes a total of 3 * 2 * 2 = 12 back slashes
expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
`"\`\\\\\\$foo\`"`
'"`\\\\\\\\\\\\$foo`"'
)
})
@ -43,7 +43,7 @@ describe('ssr: text', () => {
test('interpolation', () => {
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) {
_push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@ -56,7 +56,7 @@ describe('ssr: text', () => {
compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
.code
).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) {
_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>`)
.code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -26,7 +26,7 @@ describe('transition-group', () => {
`<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
).code
).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) {
_push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@ -44,7 +44,7 @@ describe('transition-group', () => {
`<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
).code
).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) {
_push(\`<\${
@ -70,7 +70,7 @@ describe('transition-group', () => {
</transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
@ -97,13 +97,13 @@ describe('transition-group', () => {
</transition-group>`
).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul\${_ssrRenderAttrs(_mergeProps({
class: "red",
id: "ok"
class: \\"red\\",
id: \\"ok\\"
}, _attrs))}></ul>\`)
}"
`)

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

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

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

@ -3,7 +3,7 @@ import { compile } from '../src'
describe('ssr: v-if', () => {
test('basic', () => {
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) {
if (_ctx.foo) {
@ -18,65 +18,65 @@ describe('ssr: v-if', () => {
test('with nested content', () => {
expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
})
test('v-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
}
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
}
}"
`)
})
test('v-if + v-else-if', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
})
test('v-if + v-else-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
}
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
} else if (_ctx.bar) {
_push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
} else {
_push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
}
}"
`)
})
test('<template v-if> (text)', () => {
@ -97,16 +97,16 @@ describe('ssr: v-if', () => {
// single element should not wrap with fragment
expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
.toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
if (_ctx.foo) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
} else {
_push(\`<!---->\`)
}
}"
`)
})
test('<template v-if> (multiple element)', () => {
@ -128,7 +128,7 @@ describe('ssr: v-if', () => {
expect(
compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
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/>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
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)', () => {
expect(compileWithWrapper(`<input v-model="bar">`).code)
.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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr("value", _ctx.bar)
}></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`)
}"
`)
expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
.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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="email"\${
_ssrRenderAttr("value", _ctx.bar)
}></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"email\\"\${
_ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`)
}"
`)
})
test('<input type="radio">', () => {
expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="radio" value="foo"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
}><input type=\\"radio\\" value=\\"foo\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@ -52,32 +52,32 @@ describe('ssr: v-model', () => {
test('<input type="checkbox">', () => {
expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
.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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar)) ? " checked" : ""
}></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
expect(
compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
.code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="checkbox" value="foo"\${
}><input type=\\"checkbox\\" value=\\"foo\\"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, "foo")
: _ctx.bar)) ? " checked" : ""
? _ssrLooseContain(_ctx.bar, \\"foo\\")
: _ctx.bar)) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@ -87,13 +87,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
).code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
}><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@ -103,13 +103,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
).code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
}><input type=\\"checkbox\\"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
}></div>\`)
}"
`)
@ -118,64 +118,64 @@ describe('ssr: v-model', () => {
test('<textarea>', () => {
expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
.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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><textarea>\${
_ssrInterpolate(_ctx.foo)
}</textarea></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><textarea>\${
_ssrInterpolate(_ctx.foo)
}</textarea></div>\`)
}"
`)
})
test('<input :type="x">', () => {
expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
.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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr("type", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
}></div>\`)
}"
`)
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr(\\"type\\", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
}></div>\`)
}"
`)
expect(
compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr("type", _ctx.x)
_ssrRenderAttr(\\"type\\", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
} value="bar"></div>\`)
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
} value=\\"bar\\"></div>\`)
}"
`)
expect(
compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
).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) {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttr("type", _ctx.x)
_ssrRenderAttr(\\"type\\", _ctx.x)
}\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
}\${
_ssrRenderAttr("value", _ctx.bar)
_ssrRenderAttr(\\"value\\", _ctx.bar)
}></div>\`)
}"
`)
@ -184,26 +184,26 @@ describe('ssr: v-model', () => {
test('<input v-bind="obj">', () => {
expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
.toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`)
}"
`)
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><input\${
_ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`)
}"
`)
expect(
compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
.code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
"const { mergeProps: _mergeProps } = require(\\"vue\\")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0
@ -211,7 +211,7 @@ describe('ssr: v-model', () => {
_push(\`<div\${
_ssrRenderAttrs(_attrs)
}><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>\`)
}"
`)

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

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