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))
}"
// 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))
}"
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) => {
_push(\`hello<div\${_scopeId}></div>\`)
} else {
return [
- _createTextVNode("hello"),
- _createVNode("div")
+ _createTextVNode(\\"hello\\"),
+ _createVNode(\\"div\\")
]
}
}),
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', () => {
<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) => {
_push(\`foo\`)
} else {
return [
- _createTextVNode("foo")
+ _createTextVNode(\\"foo\\")
]
}
}),
_push(\`bar\`)
} else {
return [
- _createTextVNode("bar")
+ _createTextVNode(\\"bar\\")
]
}
}),
<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))
<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) => {
</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) => {
} 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)
]
}
}),
} 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)
]
}
}),
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
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) => {
_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 */
})
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))
}"
`)
})
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")
-
- 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>\`)
- }"
- `)
+ "const { mergeProps: _mergeProps } = require(\\"vue\\")
+ const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+
+ 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>\`)
+ }"
+ `)
})
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
}>\${
_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>\`)
}"
`)
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>\`)
}"
`)
})
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', () => {
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"', () => {
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(`
// 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(
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps({
- style: [{"color":"red"}, _ctx.b]
+ style: [{\\"color\\":\\"red\\"}, _ctx.b]
}, _ctx.obj))
}></div>\`"
`)
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\${
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>\`"
`)
})
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', () => {
).toMatchInlineSnapshot(`
"\`<div\${
_ssrRenderAttrs(_mergeProps(_ctx.x, {
- class: "foo",
- title: "bar"
+ class: \\"foo\\",
+ title: \\"bar\\"
}, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
}></div>\`"
`)
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>\`)
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><!--]-->\`)
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', () => {
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 }}
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 }}
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>\`)
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 }}
}
).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 }}
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>\`)
}"
`)
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) => {
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>\`)
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) => {
_push(\`foo\`)
} else {
return [
- _createTextVNode("foo")
+ _createTextVNode(\\"foo\\")
]
}
}),
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) => {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
} else {
return [
- _createVNode("span", null, "hello")
+ _createVNode(\\"span\\", null, \\"hello\\")
]
}
}),
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) => {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
} else {
return [
- _createVNode("span")
+ _createVNode(\\"span\\")
]
}
}),
}, _parent, _scopeId))
} else {
return [
- _createVNode("span", null, "hello"),
+ _createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, {
default: _withCtx(() => [
- _createVNode("span")
+ _createVNode(\\"span\\")
]),
_: 1 /* STABLE */
})
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)
test('with props', () => {
expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
.toMatchInlineSnapshot(`
- "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)
- }"
- `)
+ "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)
+ }"
+ `)
})
test('with fallback', () => {
expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
.toMatchInlineSnapshot(`
- "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)
- }"
- `)
+ "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)
+ }"
+ `)
})
test('with scopeId', async () => {
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\\")
}"
`)
})
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)
}"
`)
})
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\\")
]
}
}),
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)
}"
`)
})
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: () => {
</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: () => {
test('static text with template string special chars', () => {
expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
- `"\`\\\`\\\${foo}\\\`\`"`
+ '"`\\\\`\\\\${foo}\\\\``"'
)
})
// 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`"'
)
})
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\`)
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\${
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(\`<!--[-->\`)
`<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)}>\`)
`<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(\`<\${
</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(\`<!--[-->\`)
</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>\`)
}"
`)
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(\`<!--[-->\`)
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', () => {
`</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(\`<!--[-->\`)
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)', () => {
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(\`<!--[-->\`)
`<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(\`<!--[-->\`)
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(\`<!--[-->\`)
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) {
test('with nested content', () => {
expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
.toMatchInlineSnapshot(`
- "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(\`<!---->\`)
- }
- }"
- `)
+ "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(\`<!---->\`)
+ }
+ }"
+ `)
})
test('v-if + v-else', () => {
expect(compile(`<div v-if="foo"/><span v-else/>`).code)
.toMatchInlineSnapshot(`
- "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>\`)
- }
- }"
- `)
+ "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>\`)
+ }
+ }"
+ `)
})
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")
-
- 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(\`<!---->\`)
- }
- }"
- `)
+ "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(\`<!---->\`)
+ }
+ }"
+ `)
})
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")
-
- 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>\`)
- }
- }"
- `)
+ "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>\`)
+ }
+ }"
+ `)
})
test('<template v-if> (text)', () => {
// 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")
-
- return function ssrRender(_ctx, _push, _parent, _attrs) {
- if (_ctx.foo) {
- _push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
- } else {
- _push(\`<!---->\`)
- }
- }"
- `)
+ "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(\`<!---->\`)
+ }
+ }"
+ `)
})
test('<template v-if> (multiple element)', () => {
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) {
`<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) {
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")
-
- return function ssrRender(_ctx, _push, _parent, _attrs) {
- _push(\`<div\${
- _ssrRenderAttrs(_attrs)
- }><input type="email"\${
- _ssrRenderAttr("value", _ctx.bar)
- }></div>\`)
- }"
- `)
+ "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>\`)
+ }"
+ `)
})
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>\`)
}"
`)
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")
-
- 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>\`)
- }"
- `)
+ "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>\`)
+ }"
+ `)
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>\`)
}"
`)
`<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>\`)
}"
`)
`<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>\`)
}"
`)
test('<textarea>', () => {
expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
.toMatchInlineSnapshot(`
- "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>\`)
- }"
- `)
+ "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>\`)
+ }"
+ `)
})
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")
-
- return function ssrRender(_ctx, _push, _parent, _attrs) {
- _push(\`<div\${
- _ssrRenderAttrs(_attrs)
- }><input\${
- _ssrRenderAttr("type", _ctx.x)
- }\${
- _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
- }></div>\`)
- }"
- `)
+ "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>\`)
+ }"
+ `)
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>\`)
}"
`)
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
_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>\`)
}"
`)
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>\`)
}"
`)
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>\`)
}"
`)
})
`<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>\`)
}"
`)
})
`<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\${
}><div\${
_ssrRenderAttrs(_mergeProps(_ctx.baz, {
style: [
- {"color":"red"},
+ {\\"color\\":\\"red\\"},
{ fontSize: 14 },
- (_ctx.foo) ? null : { display: "none" }
+ (_ctx.foo) ? null : { display: \\"none\\" }
]
}))
}></div></div>\`)