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

chore: Merge branch 'main' into minor

This commit is contained in:
Evan You 2023-12-05 10:54:20 +08:00
parent c0d396b785 e2f2b75b62
commit a817883c26
51 changed files with 1132 additions and 1138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -32,9 +32,10 @@
"dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve", "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev vue -ipf esm-browser-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
"serve": "serve", "serve": "serve",
"open": "open http://localhost:3000/packages/template-explorer/local.html", "open": "open http://localhost:3000/packages/template-explorer/local.html",
"build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self", "build-sfc-playground": "run-s build-all-cjs build-runtime-esm build-browser-esm build-ssr-esm build-sfc-playground-self",
"build-all-cjs": "node scripts/build.js vue runtime compiler reactivity shared -af cjs", "build-all-cjs": "node scripts/build.js vue runtime compiler reactivity shared -af cjs",
"build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime", "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
"build-browser-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler && node scripts/build.js vue -f esm-browser",
"build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser", "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
"build-sfc-playground-self": "cd packages/sfc-playground && npm run build", "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
"preinstall": "npx only-allow pnpm", "preinstall": "npx only-allow pnpm",
@ -108,6 +109,6 @@
"tsx": "^4.6.2", "tsx": "^4.6.2",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.0.0", "vite": "^5.0.0",
"vitest": "^0.34.6" "vitest": "^1.0.0"
} }
} }

28
packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
View File

@ -48,12 +48,12 @@ exports[`compiler: codegen > Element (callExpression + objectExpression + Templa
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return _createElementVNode(\\"div\\", { return _createElementVNode("div", {
id: \\"foo\\", id: "foo",
[prop]: bar, [prop]: bar,
[foo + bar]: bar [foo + bar]: bar
}, [ }, [
_createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" }) _createElementVNode("p", { "some-key": "foo" })
], 16) ], 16)
} }
}" }"
@ -63,12 +63,12 @@ exports[`compiler: codegen > assets + temps 1`] = `
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const _component_Foo = _resolveComponent(\\"Foo\\") const _component_Foo = _resolveComponent("Foo")
const _component_bar_baz = _resolveComponent(\\"bar-baz\\") const _component_bar_baz = _resolveComponent("bar-baz")
const _component_barbaz = _resolveComponent(\\"barbaz\\") const _component_barbaz = _resolveComponent("barbaz")
const _component_Qux = _resolveComponent(\\"Qux\\", true) const _component_Qux = _resolveComponent("Qux", true)
const _directive_my_dir_0 = _resolveDirective(\\"my_dir_0\\") const _directive_my_dir_0 = _resolveDirective("my_dir_0")
const _directive_my_dir_1 = _resolveDirective(\\"my_dir_1\\") const _directive_my_dir_1 = _resolveDirective("my_dir_1")
let _temp0, _temp1, _temp2 let _temp0, _temp1, _temp2
return null return null
@ -80,7 +80,7 @@ exports[`compiler: codegen > comment 1`] = `
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return _createCommentVNode(\\"foo\\") return _createCommentVNode("foo")
} }
}" }"
`; `;
@ -135,7 +135,7 @@ return function render(_ctx, _cache) {
exports[`compiler: codegen > hoists 1`] = ` exports[`compiler: codegen > hoists 1`] = `
" "
const _hoisted_1 = hello const _hoisted_1 = hello
const _hoisted_2 = { id: \\"foo\\" } const _hoisted_2 = { id: "foo" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
@ -165,7 +165,7 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: codegen > module mode preamble 1`] = ` exports[`compiler: codegen > module mode preamble 1`] = `
"import { createVNode as _createVNode, resolveDirective as _resolveDirective } from \\"vue\\" "import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return null return null
@ -173,7 +173,7 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler: codegen > module mode preamble w/ optimizeImports: true 1`] = ` exports[`compiler: codegen > module mode preamble w/ optimizeImports: true 1`] = `
"import { createVNode, resolveDirective } from \\"vue\\" "import { createVNode, resolveDirective } from "vue"
// Binding optimization for webpack code-split // Binding optimization for webpack code-split
const _createVNode = createVNode, _resolveDirective = resolveDirective const _createVNode = createVNode, _resolveDirective = resolveDirective
@ -187,7 +187,7 @@ exports[`compiler: codegen > static text 1`] = `
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return \\"hello\\" return "hello"
} }
}" }"
`; `;

44
packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
View File

@ -7,19 +7,19 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
id: \\"foo\\", id: "foo",
class: _normalizeClass(bar.baz) class: _normalizeClass(bar.baz)
}, [ }, [
_createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */), _createTextVNode(_toDisplayString(world.burn()) + " ", 1 /* TEXT */),
ok ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\")) ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [ : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\") _createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)), ], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)) ], 2 /* CLASS */))
@ -31,19 +31,19 @@ exports[`compiler: integration tests > function mode w/ prefixIdentifiers: true
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
id: \\"foo\\", id: "foo",
class: _normalizeClass(_ctx.bar.baz) class: _normalizeClass(_ctx.bar.baz)
}, [ }, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */), _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
(_ctx.ok) (_ctx.ok)
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\")) ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [ : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\") _createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)), ], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)) ], 2 /* CLASS */))
@ -51,22 +51,22 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: integration tests > module mode 1`] = ` exports[`compiler: integration tests > module mode 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\" "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
id: \\"foo\\", id: "foo",
class: _normalizeClass(_ctx.bar.baz) class: _normalizeClass(_ctx.bar.baz)
}, [ }, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */), _createTextVNode(_toDisplayString(_ctx.world.burn()) + " ", 1 /* TEXT */),
(_ctx.ok) (_ctx.ok)
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\")) ? (_openBlock(), _createElementBlock("div", { key: 0 }, "yes"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [ : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\") _createTextVNode("no")
], 64 /* STABLE_FRAGMENT */)), ], 64 /* STABLE_FRAGMENT */)),
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */) _createElementVNode("span", null, _toDisplayString(value + index), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)) ], 2 /* CLASS */))

96
packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
View File

@ -98,7 +98,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 1, "line": 1,
"offset": 36, "offset": 36,
}, },
"source": "<div :class=\\"{ some: condition }\\" />", "source": "<div :class="{ some: condition }" />",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -152,7 +152,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 1, "line": 1,
"offset": 33, "offset": 33,
}, },
"source": ":class=\\"{ some: condition }\\"", "source": ":class="{ some: condition }"",
"start": { "start": {
"column": 6, "column": 6,
"line": 1, "line": 1,
@ -179,7 +179,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2, "line": 2,
"offset": 73, "offset": 73,
}, },
"source": "<p v-bind:style=\\"{ color: 'red' }\\"/>", "source": "<p v-bind:style="{ color: 'red' }"/>",
"start": { "start": {
"column": 1, "column": 1,
"line": 2, "line": 2,
@ -233,7 +233,7 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2, "line": 2,
"offset": 71, "offset": 71,
}, },
"source": "v-bind:style=\\"{ color: 'red' }\\"", "source": "v-bind:style="{ color: 'red' }"",
"start": { "start": {
"column": 4, "column": 4,
"line": 2, "line": 2,
@ -263,16 +263,16 @@ exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
"line": 2, "line": 2,
"offset": 73, "offset": 73,
}, },
"source": "<div :class=\\"{ some: condition }\\" /> "source": "<div :class="{ some: condition }" />
<p v-bind:style=\\"{ color: 'red' }\\"/>", <p v-bind:style="{ color: 'red' }"/>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<div :class=\\"{ some: condition }\\" /> "source": "<div :class="{ some: condition }" />
<p v-bind:style=\\"{ color: 'red' }\\"/>", <p v-bind:style="{ color: 'red' }"/>",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -294,7 +294,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 2, "line": 2,
"offset": 73, "offset": 73,
}, },
"source": "<p v-bind:style=\\"{ color: 'red' }\\"/>", "source": "<p v-bind:style="{ color: 'red' }"/>",
"start": { "start": {
"column": 3, "column": 3,
"line": 2, "line": 2,
@ -348,7 +348,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 2, "line": 2,
"offset": 71, "offset": 71,
}, },
"source": "v-bind:style=\\"{ color: 'red' }\\"", "source": "v-bind:style="{ color: 'red' }"",
"start": { "start": {
"column": 6, "column": 6,
"line": 2, "line": 2,
@ -390,8 +390,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 4, "line": 4,
"offset": 123, "offset": 123,
}, },
"source": "<div :class=\\"{ some: condition }\\"> "source": "<div :class="{ some: condition }">
<p v-bind:style=\\"{ color: 'red' }\\"/> <p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it --> <!-- a comment with <html> inside it -->
</div>", </div>",
"start": { "start": {
@ -447,7 +447,7 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 1, "line": 1,
"offset": 33, "offset": 33,
}, },
"source": ":class=\\"{ some: condition }\\"", "source": ":class="{ some: condition }"",
"start": { "start": {
"column": 6, "column": 6,
"line": 1, "line": 1,
@ -477,8 +477,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"line": 4, "line": 4,
"offset": 123, "offset": 123,
}, },
"source": "<div :class=\\"{ some: condition }\\"> "source": "<div :class="{ some: condition }">
<p v-bind:style=\\"{ color: 'red' }\\"/> <p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it --> <!-- a comment with <html> inside it -->
</div>", </div>",
"start": { "start": {
@ -487,8 +487,8 @@ exports[`compiler: parse > Edge Cases > valid html 1`] = `
"offset": 0, "offset": 0,
}, },
}, },
"source": "<div :class=\\"{ some: condition }\\"> "source": "<div :class="{ some: condition }">
<p v-bind:style=\\"{ color: 'red' }\\"/> <p v-bind:style="{ color: 'red' }"/>
<!-- a comment with <html> inside it --> <!-- a comment with <html> inside it -->
</div>", </div>",
"temps": 0, "temps": 0,
@ -656,7 +656,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 33, "offset": 33,
}, },
"source": "<div id=\\"\\" id=\\"\\"></div>", "source": "<div id="" id=""></div>",
"start": { "start": {
"column": 11, "column": 11,
"line": 1, "line": 1,
@ -672,7 +672,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 20, "offset": 20,
}, },
"source": "id=\\"\\"", "source": "id=""",
"start": { "start": {
"column": 16, "column": 16,
"line": 1, "line": 1,
@ -702,7 +702,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 20, "offset": 20,
}, },
"source": "\\"\\"", "source": """",
"start": { "start": {
"column": 19, "column": 19,
"line": 1, "line": 1,
@ -719,7 +719,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 26, "offset": 26,
}, },
"source": "id=\\"\\"", "source": "id=""",
"start": { "start": {
"column": 22, "column": 22,
"line": 1, "line": 1,
@ -749,7 +749,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 26, "offset": 26,
}, },
"source": "\\"\\"", "source": """",
"start": { "start": {
"column": 25, "column": 25,
"line": 1, "line": 1,
@ -772,7 +772,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 44, "offset": 44,
}, },
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>", "source": "<template><div id="" id=""></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -798,14 +798,14 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
"line": 1, "line": 1,
"offset": 44, "offset": 44,
}, },
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>", "source": "<template><div id="" id=""></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div id=\\"\\" id=\\"\\"></div></template>", "source": "<template><div id="" id=""></div></template>",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -1566,7 +1566,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
"line": 1, "line": 1,
"offset": 23, "offset": 23,
}, },
"source": "<template><div id=\\"abc", "source": "<template><div id="abc",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -1592,14 +1592,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
"line": 1, "line": 1,
"offset": 22, "offset": 22,
}, },
"source": "<template><div id=\\"abc", "source": "<template><div id="abc",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div id=\\"abc", "source": "<template><div id="abc",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -1618,7 +1618,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
"line": 1, "line": 1,
"offset": 24, "offset": 24,
}, },
"source": "<template><div id=\\"abc\\"", "source": "<template><div id="abc"",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -1644,14 +1644,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
"line": 1, "line": 1,
"offset": 23, "offset": 23,
}, },
"source": "<template><div id=\\"abc\\"", "source": "<template><div id="abc"",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div id=\\"abc\\"", "source": "<template><div id="abc"",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -1688,7 +1688,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
"line": 1, "line": 1,
"offset": 25, "offset": 25,
}, },
"source": "<template><div id=\\"abc\\"/", "source": "<template><div id="abc"/",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -1714,14 +1714,14 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
"line": 1, "line": 1,
"offset": 24, "offset": 24,
}, },
"source": "<template><div id=\\"abc\\"/", "source": "<template><div id="abc"/",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div id=\\"abc\\"/", "source": "<template><div id="abc"/",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -2459,7 +2459,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1, "line": 1,
"offset": 29, "offset": 29,
}, },
"source": "<div a\\"bc=''></div>", "source": "<div a"bc=''></div>",
"start": { "start": {
"column": 11, "column": 11,
"line": 1, "line": 1,
@ -2475,21 +2475,21 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1, "line": 1,
"offset": 22, "offset": 22,
}, },
"source": "a\\"bc=''", "source": "a"bc=''",
"start": { "start": {
"column": 16, "column": 16,
"line": 1, "line": 1,
"offset": 15, "offset": 15,
}, },
}, },
"name": "a\\"bc", "name": "a"bc",
"nameLoc": { "nameLoc": {
"end": { "end": {
"column": 20, "column": 20,
"line": 1, "line": 1,
"offset": 19, "offset": 19,
}, },
"source": "a\\"bc", "source": "a"bc",
"start": { "start": {
"column": 16, "column": 16,
"line": 1, "line": 1,
@ -2528,7 +2528,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1, "line": 1,
"offset": 40, "offset": 40,
}, },
"source": "<template><div a\\"bc=''></div></template>", "source": "<template><div a"bc=''></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -2554,14 +2554,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
"line": 1, "line": 1,
"offset": 40, "offset": 40,
}, },
"source": "<template><div a\\"bc=''></div></template>", "source": "<template><div a"bc=''></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div a\\"bc=''></div></template>", "source": "<template><div a"bc=''></div></template>",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }
@ -2828,7 +2828,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1, "line": 1,
"offset": 30, "offset": 30,
}, },
"source": "<div foo=bar\\"></div>", "source": "<div foo=bar"></div>",
"start": { "start": {
"column": 11, "column": 11,
"line": 1, "line": 1,
@ -2844,7 +2844,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1, "line": 1,
"offset": 23, "offset": 23,
}, },
"source": "foo=bar\\"", "source": "foo=bar"",
"start": { "start": {
"column": 16, "column": 16,
"line": 1, "line": 1,
@ -2867,14 +2867,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
}, },
"type": 6, "type": 6,
"value": { "value": {
"content": "bar\\"", "content": "bar"",
"loc": { "loc": {
"end": { "end": {
"column": 24, "column": 24,
"line": 1, "line": 1,
"offset": 23, "offset": 23,
}, },
"source": "bar\\"", "source": "bar"",
"start": { "start": {
"column": 20, "column": 20,
"line": 1, "line": 1,
@ -2897,7 +2897,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1, "line": 1,
"offset": 41, "offset": 41,
}, },
"source": "<template><div foo=bar\\"></div></template>", "source": "<template><div foo=bar"></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
@ -2923,14 +2923,14 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
"line": 1, "line": 1,
"offset": 41, "offset": 41,
}, },
"source": "<template><div foo=bar\\"></div></template>", "source": "<template><div foo=bar"></div></template>",
"start": { "start": {
"column": 1, "column": 1,
"line": 1, "line": 1,
"offset": 0, "offset": 0,
}, },
}, },
"source": "<template><div foo=bar\\"></div></template>", "source": "<template><div foo=bar"></div></template>",
"temps": 0, "temps": 0,
"type": 0, "type": 0,
} }

34
packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
View File

@ -1,14 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = ` exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = `
"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\" "import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
const _withScopeId = n => (_pushScopeId(\\"test\\"),n=n(),_popScopeId(),n) const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)
const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)) const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)) const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_hoisted_1, _hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */), _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2 _hoisted_2
@ -17,14 +17,14 @@ export function render(_ctx, _cache) {
`; `;
exports[`scopeId compiler support > should wrap default slot 1`] = ` exports[`scopeId compiler support > should wrap default slot 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\") const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, { return (_openBlock(), _createBlock(_component_Child, null, {
default: _withCtx(() => [ default: _withCtx(() => [
_createElementVNode(\\"div\\") _createElementVNode("div")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -32,26 +32,26 @@ export function render(_ctx, _cache) {
`; `;
exports[`scopeId compiler support > should wrap dynamic slots 1`] = ` exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\") const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [ return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok) (_ctx.ok)
? { ? {
name: \\"foo\\", name: "foo",
fn: _withCtx(() => [ fn: _withCtx(() => [
_createElementVNode(\\"div\\") _createElementVNode("div")
]), ]),
key: \\"0\\" key: "0"
} }
: undefined, : undefined,
_renderList(_ctx.list, (i) => { _renderList(_ctx.list, (i) => {
return { return {
name: i, name: i,
fn: _withCtx(() => [ fn: _withCtx(() => [
_createElementVNode(\\"div\\") _createElementVNode("div")
]) ])
} }
}) })
@ -60,17 +60,17 @@ export function render(_ctx, _cache) {
`; `;
exports[`scopeId compiler support > should wrap named slots 1`] = ` exports[`scopeId compiler support > should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\") const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, { return (_openBlock(), _createBlock(_component_Child, null, {
foo: _withCtx(({ msg }) => [ foo: _withCtx(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]), ]),
bar: _withCtx(() => [ bar: _withCtx(() => [
_createElementVNode(\\"div\\") _createElementVNode("div")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))

18
packages/compiler-core/__tests__/codegen.spec.ts
View File

@ -632,7 +632,7 @@ describe('compiler: codegen', () => {
test('tag only', () => { test('tag only', () => {
expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(` expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\") "return _createElementVNode("div")
" "
`) `)
expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(` expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@ -644,7 +644,7 @@ describe('compiler: codegen', () => {
test('with props', () => { test('with props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps))) expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" }) "return _createElementVNode("div", { foo: "bar" })
" "
`) `)
}) })
@ -652,7 +652,7 @@ describe('compiler: codegen', () => {
test('with children, no props', () => { test('with children, no props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren))) expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", null, children) "return _createElementVNode("div", null, children)
" "
`) `)
}) })
@ -660,7 +660,7 @@ describe('compiler: codegen', () => {
test('with children + props', () => { test('with children + props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren))) expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children) "return _createElementVNode("div", { foo: "bar" }, children)
" "
`) `)
}) })
@ -668,7 +668,7 @@ describe('compiler: codegen', () => {
test('with patchFlag and no children/props', () => { test('with patchFlag and no children/props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1'))) expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createElementVNode(\\"div\\", null, null, 1) "return _createElementVNode("div", null, null, 1)
" "
`) `)
}) })
@ -688,7 +688,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)) "return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
" "
`) `)
}) })
@ -709,7 +709,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)) "return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
" "
`) `)
}) })
@ -728,7 +728,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [ "return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
[foo, bar] [foo, bar]
]) ])
" "
@ -750,7 +750,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [ "return _withDirectives((_openBlock(), _createElementBlock("div", { foo: "bar" }, children)), [
[foo, bar] [foo, bar]
]) ])
" "

142
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View File

@ -4,7 +4,7 @@ exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
@ -13,7 +13,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -22,9 +22,9 @@ exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [ const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, [
/*#__PURE__*/_createElementVNode(\\"span\\"), /*#__PURE__*/_createElementVNode("span"),
/*#__PURE__*/_createElementVNode(\\"span\\") /*#__PURE__*/_createElementVNode("span")
], -1 /* HOISTED */) ], -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
@ -34,7 +34,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -43,8 +43,8 @@ exports[`compiler: hoistStatic transform > hoist nested static tree with comment
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [ const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
/*#__PURE__*/_createCommentVNode(\\"comment\\") /*#__PURE__*/_createCommentVNode("comment")
], -1 /* HOISTED */) ], -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -63,8 +63,8 @@ exports[`compiler: hoistStatic transform > hoist siblings with common non-hoista
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)
const _hoisted_3 = [ const _hoisted_3 = [
_hoisted_1, _hoisted_1,
_hoisted_2 _hoisted_2
@ -74,7 +74,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_3)) return (_openBlock(), _createElementBlock("div", null, _hoisted_3))
} }
}" }"
`; `;
@ -83,7 +83,7 @@ exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
@ -92,7 +92,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -101,16 +101,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective("foo")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [ _withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
[_directive_foo] [_directive_foo]
]) ])
])) ]))
@ -122,14 +122,14 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */) _createElementVNode("div", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
])) ]))
} }
}" }"
@ -139,16 +139,16 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", _hoisted_1, [ _createElementVNode("div", _hoisted_1, [
_createVNode(_component_Comp) _createVNode(_component_Comp)
]) ])
])) ]))
@ -168,8 +168,8 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */) _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
])) ]))
} }
}" }"
@ -179,7 +179,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "foo " + /*#__PURE__*/_toDisplayString(1) + " " + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
@ -188,7 +188,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -197,7 +197,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
@ -206,7 +206,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
} }
}" }"
`; `;
@ -215,7 +215,7 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"path\\", { d: \\"M2,3H5.5L12\\" }, null, -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
@ -224,10 +224,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective("foo")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [ _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
[_directive_foo] [_directive_foo]
]) ])
])) ]))
@ -236,12 +236,12 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = ` exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers + other bindings 1`] = `
"import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", null, [ _createElementVNode("div", null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
class: _normalizeClass({}), class: _normalizeClass({}),
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args))) onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
}) })
@ -251,12 +251,12 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = ` exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist elements with cached handlers 1`] = `
"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", null, [ _createElementVNode("div", null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args))) onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
}) })
]) ])
@ -271,10 +271,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createElementBlock(\\"p\\", null, [ return (_openBlock(), _createElementBlock("p", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */) _createElementVNode("span", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
@ -289,7 +289,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [ default: _withCtx(({ foo }) => [
@ -308,10 +308,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createElementBlock(\\"p\\", null, [ return (_openBlock(), _createElementBlock("p", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */) _createElementVNode("span", null, _toDisplayString(o), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
@ -326,9 +326,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", { key: item })) return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
])) ]))
} }
@ -342,9 +342,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createVNode(_component_Comp) _createVNode(_component_Comp)
])) ]))
} }
@ -358,8 +358,8 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(), _createElementBlock(\\"div\\", { key: foo })) (_openBlock(), _createElementBlock("div", { key: foo }))
])) ]))
} }
}" }"
@ -369,14 +369,14 @@ exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = [\\"id\\"] const _hoisted_1 = ["id"]
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, _hoisted_1) _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
])) ]))
} }
}" }"
@ -389,8 +389,8 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */) _createElementVNode("div", { ref: foo }, null, 512 /* NEED_PATCH */)
])) ]))
} }
}" }"
@ -403,7 +403,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\")) return (_openBlock(), _createElementBlock("div"))
} }
}" }"
`; `;
@ -412,8 +412,8 @@ exports[`compiler: hoistStatic transform > should hoist v-for children if static
"const _Vue = Vue "const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: "foo" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_3 = [ const _hoisted_3 = [
_hoisted_2 _hoisted_2
] ]
@ -422,9 +422,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3)) return (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
} }
@ -437,9 +437,9 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
const _hoisted_1 = { const _hoisted_1 = {
key: 0, key: 0,
id: \\"foo\\" id: "foo"
} }
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_3 = [ const _hoisted_3 = [
_hoisted_2 _hoisted_2
] ]
@ -448,10 +448,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
ok ok
? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3)) ? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
])) ]))
} }
}" }"

16
packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
View File

@ -2,7 +2,7 @@
exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = ` exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
"(_ctx, _cache) => { "(_ctx, _cache) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options) + \\" \\" + _toDisplayString(isNaN.value), 1 /* TEXT */)) return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.props) + " " + _toDisplayString(_unref(setup)) + " " + _toDisplayString(setupConst) + " " + _toDisplayString(_ctx.data) + " " + _toDisplayString(_ctx.options) + " " + _toDisplayString(isNaN.value), 1 /* TEXT */))
}" }"
`; `;
@ -10,7 +10,7 @@ exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`]
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) { return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString($props.props) + \\" \\" + _toDisplayString($setup.setup) + \\" \\" + _toDisplayString($data.data) + \\" \\" + _toDisplayString($options.options) + \\" \\" + _toDisplayString($setup.isNaN), 1 /* TEXT */)) return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
}" }"
`; `;
@ -18,13 +18,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) { return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
onClick: () => { onClick: () => {
for (let i = 0; i < _ctx.list.length; i++) { for (let i = 0; i < _ctx.list.length; i++) {
_ctx.log(i) _ctx.log(i)
} }
} }
}, null, 8 /* PROPS */, [\\"onClick\\"])) }, null, 8 /* PROPS */, ["onClick"]))
}" }"
`; `;
@ -32,13 +32,13 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) { return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
onClick: () => { onClick: () => {
for (const x in _ctx.list) { for (const x in _ctx.list) {
_ctx.log(x) _ctx.log(x)
} }
} }
}, null, 8 /* PROPS */, [\\"onClick\\"])) }, null, 8 /* PROPS */, ["onClick"]))
}" }"
`; `;
@ -46,12 +46,12 @@ exports[`compiler: expression transform > bindingMetadata > should not prefix te
"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) { return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(\\"div\\", { return (_openBlock(), _createElementBlock("div", {
onClick: () => { onClick: () => {
for (const x of _ctx.list) { for (const x of _ctx.list) {
_ctx.log(x) _ctx.log(x)
} }
} }
}, null, 8 /* PROPS */, [\\"onClick\\"])) }, null, 8 /* PROPS */, ["onClick"]))
}" }"
`; `;

32
packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
View File

@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createTextVNode(\\"foo\\") _createTextVNode("foo")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
@ -23,7 +23,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString } = _Vue const { toDisplayString: _toDisplayString } = _Vue
return _toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz) return _toDisplayString(foo) + " bar " + _toDisplayString(baz)
} }
}" }"
`; `;
@ -36,9 +36,9 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"), _createElementVNode("div"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */), _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode(\\"div\\") _createElementVNode("div")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -52,11 +52,11 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"), _createElementVNode("div"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */), _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
_createElementVNode(\\"div\\"), _createElementVNode("div"),
_createTextVNode(\\"hello\\"), _createTextVNode("hello"),
_createElementVNode(\\"div\\") _createElementVNode("div")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -69,9 +69,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective("foo")
return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [ return _withDirectives((_openBlock(), _createElementBlock("p", null, [
_createTextVNode(_toDisplayString(foo), 1 /* TEXT */) _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
])), [ ])), [
[_directive_foo] [_directive_foo]
@ -100,9 +100,9 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\"), _createElementVNode("div"),
_createTextVNode(\\"hello\\"), _createTextVNode("hello"),
_createElementVNode(\\"div\\") _createElementVNode("div")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -112,6 +112,6 @@ exports[`compiler: transform text > with prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString } = Vue "const { toDisplayString: _toDisplayString } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return _toDisplayString(_ctx.foo) + \\" bar \\" + _toDisplayString(_ctx.baz + _ctx.qux) return _toDisplayString(_ctx.foo) + " bar " + _toDisplayString(_ctx.baz + _ctx.qux)
}" }"
`; `;

40
packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\")) return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -23,8 +23,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [ return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
\\"hello\\", "hello",
_createElementVNode(\\"span\\") _createElementVNode("span")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
} }
@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", { key: item })) return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
} }
}" }"
@ -53,7 +53,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createElementBlock(\\"span\\")) return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -67,7 +67,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createElementBlock(\\"span\\")) return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -81,7 +81,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createElementBlock(\\"span\\")) return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -96,8 +96,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
\\"hello\\", "hello",
_createElementVNode(\\"span\\") _createElementVNode("span")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
@ -112,10 +112,10 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(\\"span\\", { return (_openBlock(), _createElementBlock("span", {
key: item.id, key: item.id,
id: item.id id: item.id
}, null, 8 /* PROPS */, [\\"id\\"])) }, null, 8 /* PROPS */, ["id"]))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
} }
}" }"
@ -129,7 +129,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\") return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -143,7 +143,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\") return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -156,10 +156,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective("foo")
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [ return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
[_directive_foo] [_directive_foo]
]) ])
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
@ -175,7 +175,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => { return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */) return _createElementVNode("p", null, _toDisplayString(item), 1 /* TEXT */)
}), 64 /* STABLE_FRAGMENT */)) }), 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -190,9 +190,9 @@ return function render(_ctx, _cache) {
return ok return ok
? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(\\"div\\")) return (_openBlock(), _createElementBlock("div"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -208,7 +208,7 @@ return function render(_ctx, _cache) {
? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */)) return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -221,7 +221,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createElementBlock(\\"span\\")) return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"

54
packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
View File

@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -23,13 +23,13 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
ok ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })), : (_openBlock(), _createElementBlock("p", { key: 1 })),
another another
? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 })) ? (_openBlock(), _createElementBlock("div", { key: 2 }))
: orNot : orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 })) ? (_openBlock(), _createElementBlock("p", { key: 3 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 4 })) : (_openBlock(), _createElementBlock("p", { key: 4 }))
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -44,11 +44,11 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
ok ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true), : _createCommentVNode("v-if", true),
orNot orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock("p", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -63,11 +63,11 @@ return function render(_ctx, _cache) {
return ok return ok
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
_createElementVNode(\\"div\\"), _createElementVNode("div"),
\\"hello\\", "hello",
_createElementVNode(\\"p\\") _createElementVNode("p")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -80,8 +80,8 @@ return function render(_ctx, _cache) {
const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? _renderSlot($slots, \\"default\\", { key: 0 }) ? _renderSlot($slots, "default", { key: 0 })
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -94,8 +94,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })) : (_openBlock(), _createElementBlock("p", { key: 1 }))
} }
}" }"
`; `;
@ -108,10 +108,10 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return ok return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot : orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock("p", { key: 1 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */)) : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, ["fine"], 64 /* STABLE_FRAGMENT */))
} }
}" }"
`; `;
@ -124,10 +124,10 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot : orNot
? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock("p", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;
@ -140,8 +140,8 @@ return function render(_ctx, _cache) {
const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? _renderSlot($slots, \\"default\\", { key: 0 }) ? _renderSlot($slots, "default", { key: 0 })
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode("v-if", true)
} }
}" }"
`; `;

42
packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
View File

@ -1,44 +1,44 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: v-memo transform > on component 1`] = ` exports[`compiler: v-memo transform > on component 1`] = `
"import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { resolveComponent as _resolveComponent, createVNode as _createVNode, withMemo as _withMemo, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_withMemo([_ctx.x], () => _createVNode(_component_Comp), _cache, 0) _withMemo([_ctx.x], () => _createVNode(_component_Comp), _cache, 0)
])) ]))
}" }"
`; `;
exports[`compiler: v-memo transform > on normal element 1`] = ` exports[`compiler: v-memo transform > on normal element 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0) _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
])) ]))
}" }"
`; `;
exports[`compiler: v-memo transform > on root element 1`] = ` exports[`compiler: v-memo transform > on root element 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0) return _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
}" }"
`; `;
exports[`compiler: v-memo transform > on template v-for 1`] = ` exports[`compiler: v-memo transform > on template v-for 1`] = `
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\" "import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z]) const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock(\\"span\\", { key: x }, \\"foobar\\")) const _item = (_openBlock(), _createElementBlock("span", { key: x }, "foobar"))
_item.memo = _memo _item.memo = _memo
return _item return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */)) }, _cache, 0), 128 /* KEYED_FRAGMENT */))
@ -47,15 +47,15 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler: v-memo transform > on v-for 1`] = ` exports[`compiler: v-memo transform > on v-for 1`] = `
"import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from \\"vue\\" "import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, isMemoSame as _isMemoSame, withMemo as _withMemo } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z]) const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
const _item = (_openBlock(), _createElementBlock(\\"div\\", { key: x }, [ const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
_createElementVNode(\\"span\\", null, \\"foobar\\") _createElementVNode("span", null, "foobar")
])) ]))
_item.memo = _memo _item.memo = _memo
return _item return _item
@ -65,16 +65,16 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler: v-memo transform > on v-if 1`] = ` exports[`compiler: v-memo transform > on v-if 1`] = `
"import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withMemo as _withMemo, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
(_ctx.ok) (_ctx.ok)
? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, [ ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div", { key: 0 }, [
_createElementVNode(\\"span\\", null, \\"foo\\"), _createElementVNode("span", null, "foo"),
_createTextVNode(\\"bar\\") _createTextVNode("bar")
])), _cache, 0) ])), _cache, 0)
: _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1) : _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1)
])) ]))

52
packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
View File

@ -1,13 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: transform v-model > compound expression (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model > compound expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model[_ctx.index], modelValue: _ctx.model[_ctx.index],
\\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event) "onUpdate:modelValue": $event => ((_ctx.model[_ctx.index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}" }"
`; `;
@ -18,10 +18,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
modelValue: model[index], modelValue: model[index],
\\"onUpdate:modelValue\\": $event => ((model[index]) = $event) "onUpdate:modelValue": $event => ((model[index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
} }
}" }"
`; `;
@ -33,30 +33,30 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
modelValue: modelValue:
model model
. .
foo foo
, ,
\\"onUpdate:modelValue\\": $event => (( "onUpdate:modelValue": $event => ((
model model
. .
foo foo
) = $event) ) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
} }
}" }"
`; `;
exports[`compiler: transform v-model > simple expression (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model > simple expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model, modelValue: _ctx.model,
\\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event) "onUpdate:modelValue": $event => ((_ctx.model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}" }"
`; `;
@ -67,10 +67,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
modelValue: model, modelValue: model,
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
} }
}" }"
`; `;
@ -82,21 +82,21 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", { return (_openBlock(), _createElementBlock("input", {
\\"foo-value\\": model, "foo-value": model,
\\"onUpdate:fooValue\\": $event => ((model) = $event) "onUpdate:fooValue": $event => ((model) = $event)
}, null, 40 /* PROPS, NEED_HYDRATION */, [\\"foo-value\\", \\"onUpdate:fooValue\\"])) }, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
} }
}" }"
`; `;
exports[`compiler: transform v-model > with dynamic argument (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model > with dynamic argument (with prefixIdentifiers) 1`] = `
"import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({ return (_openBlock(), _createElementBlock("input", _normalizeProps({
[_ctx.value]: _ctx.model, [_ctx.value]: _ctx.model,
[\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event) ["onUpdate:" + _ctx.value]: $event => ((_ctx.model) = $event)
}), null, 16 /* FULL_PROPS */)) }), null, 16 /* FULL_PROPS */))
}" }"
`; `;
@ -108,9 +108,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({ return (_openBlock(), _createElementBlock("input", _normalizeProps({
[value]: model, [value]: model,
[\\"onUpdate:\\" + value]: $event => ((model) = $event) ["onUpdate:" + value]: $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */)) }), null, 16 /* FULL_PROPS */))
} }
}" }"

20
packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View File

@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return _cache[0] || ( return _cache[0] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1), _setBlockTracking(1),
_cache[0] _cache[0]
) )
@ -24,12 +24,12 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || ( _cache[0] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[0] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1), _setBlockTracking(1),
_cache[0] _cache[0]
) )
@ -45,10 +45,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || ( _cache[0] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1), _setBlockTracking(1),
_cache[0] _cache[0]
) )
@ -64,10 +64,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || ( _cache[0] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[0] = _renderSlot($slots, \\"default\\"), _cache[0] = _renderSlot($slots, "default"),
_setBlockTracking(1), _setBlockTracking(1),
_cache[0] _cache[0]
) )
@ -83,10 +83,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || ( _cache[0] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[0] = _createElementVNode(\\"div\\"), _cache[0] = _createElementVNode("div"),
_setBlockTracking(1), _setBlockTracking(1),
_cache[0] _cache[0]
) )

84
packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
View File

@ -4,7 +4,7 @@ exports[`compiler: transform component slots > dynamically named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), [_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -18,11 +18,11 @@ exports[`compiler: transform component slots > implicit default slot 1`] = `
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [ default: _withCtx(() => [
_createElementVNode(\\"div\\") _createElementVNode("div")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -33,7 +33,7 @@ exports[`compiler: transform component slots > named slot with v-for w/ prefixId
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(_ctx.list, (name) => { _renderList(_ctx.list, (name) => {
@ -50,14 +50,14 @@ exports[`compiler: transform component slots > named slot with v-if + prefixIden
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok) (_ctx.ok)
? { ? {
name: \\"one\\", name: "one",
fn: _withCtx((props) => [_toDisplayString(props)]), fn: _withCtx((props) => [_toDisplayString(props)]),
key: \\"0\\" key: "0"
} }
: undefined : undefined
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -71,25 +71,25 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok ok
? { ? {
name: \\"one\\", name: "one",
fn: _withCtx(() => [\\"foo\\"]), fn: _withCtx(() => ["foo"]),
key: \\"0\\" key: "0"
} }
: orNot : orNot
? { ? {
name: \\"two\\", name: "two",
fn: _withCtx((props) => [\\"bar\\"]), fn: _withCtx((props) => ["bar"]),
key: \\"1\\" key: "1"
} }
: { : {
name: \\"one\\", name: "one",
fn: _withCtx(() => [\\"baz\\"]), fn: _withCtx(() => ["baz"]),
key: \\"2\\" key: "2"
} }
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
} }
@ -103,14 +103,14 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok ok
? { ? {
name: \\"one\\", name: "one",
fn: _withCtx(() => [\\"hello\\"]), fn: _withCtx(() => ["hello"]),
key: \\"0\\" key: "0"
} }
: undefined : undefined
]), 1024 /* DYNAMIC_SLOTS */)) ]), 1024 /* DYNAMIC_SLOTS */))
@ -125,13 +125,13 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(() => [\\"foo\\"]), one: _withCtx(() => ["foo"]),
default: _withCtx(() => [ default: _withCtx(() => [
\\"bar\\", "bar",
_createElementVNode(\\"span\\") _createElementVNode("span")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -143,8 +143,8 @@ exports[`compiler: transform component slots > nested slots scoping 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Inner = _resolveComponent(\\"Inner\\") const _component_Inner = _resolveComponent("Inner")
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [ default: _withCtx(({ foo }) => [
@ -152,7 +152,7 @@ return function render(_ctx, _cache) {
default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]), default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
_: 2 /* DYNAMIC */ _: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */), }, 1024 /* DYNAMIC_SLOTS */),
\\" \\", " ",
_toDisplayString(foo), _toDisplayString(foo),
_toDisplayString(_ctx.bar), _toDisplayString(_ctx.bar),
_toDisplayString(_ctx.baz) _toDisplayString(_ctx.baz)
@ -166,7 +166,7 @@ exports[`compiler: transform component slots > on component dynamically named sl
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -179,7 +179,7 @@ exports[`compiler: transform component slots > on component named slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -192,7 +192,7 @@ exports[`compiler: transform component slots > on-component default slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -205,7 +205,7 @@ exports[`compiler: transform component slots > template named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
@ -219,13 +219,13 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > imp
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]), header: _withCtx(() => [" Header "]),
default: _withCtx(() => [ default: _withCtx(() => [
\\" \\", " ",
_createElementVNode(\\"p\\") _createElementVNode("p")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -236,11 +236,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > nam
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]), header: _withCtx(() => [" Header "]),
default: _withCtx(() => [\\" Default \\"]), default: _withCtx(() => [" Default "]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
}" }"
@ -250,11 +250,11 @@ exports[`compiler: transform component slots > with whitespace: 'preserve' > sho
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]), header: _withCtx(() => [" Header "]),
footer: _withCtx(() => [\\" Footer \\"]), footer: _withCtx(() => [" Footer "]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
}" }"

12
packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
View File

@ -8,13 +8,13 @@ return function render(_ctx, _cache) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
textContent: _toDisplayString(text) textContent: _toDisplayString(text)
}, null, 8 /* PROPS */, [\\"textContent\\"]), }, null, 8 /* PROPS */, ["textContent"]),
_createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]), _createElementVNode("div", { innerHTML: html }, null, 8 /* PROPS */, ["innerHTML"]),
_createElementVNode(\\"div\\", null, \\"test\\"), _createElementVNode("div", null, "test"),
_createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"), _createElementVNode("div", { style: {"color":"red"} }, "red"),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
style: _normalizeStyle({color: 'green'}) style: _normalizeStyle({color: 'green'})
}, null, 4 /* STYLE */) }, null, 4 /* STYLE */)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))

16
packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
View File

@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vShow: _vShow, createElementVNode: _createElementVNode, withDirectives: _withDirectives, Transition: _Transition, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vShow: _vShow, createElementVNode: _createElementVNode, withDirectives: _withDirectives, Transition: _Transition, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Transition, { persisted: \\"\\" }, { return (_openBlock(), _createBlock(_Transition, { persisted: "" }, {
default: _withCtx(() => [ default: _withCtx(() => [
_withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [ _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
[_vShow, ok] [_vShow, ok]
]) ])
]), ]),
@ -29,15 +29,15 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Transition, null, { return (_openBlock(), _createBlock(_Transition, null, {
default: _withCtx(() => [ default: _withCtx(() => [
a a
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\")) ? (_openBlock(), _createElementBlock("div", { key: 0 }, "hey"))
: b : b
? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\")) ? (_openBlock(), _createElementBlock("div", { key: 1 }, "hey"))
: (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [ : (_openBlock(), _createElementBlock("div", { key: 2 }, [
c c
? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 })) ? (_openBlock(), _createElementBlock("p", { key: 0 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [ : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(\\" this should not be ignored \\"), _createCommentVNode(" this should not be ignored "),
_createElementVNode(\\"p\\") _createElementVNode("p")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
])) ]))
]), ]),

26
packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
View File

@ -3,40 +3,40 @@
exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = ` exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [ const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"), /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"), /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"), /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"), /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"foo\\" }, \\"foo\\"), /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
/*#__PURE__*/_createElementVNode(\\"img\\", { src: _imports_0_ }) /*#__PURE__*/_createElementVNode("img", { src: _imports_0_ })
], -1 /* HOISTED */) ], -1 /* HOISTED */)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}" }"
`; `;
exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = ` exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<div><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><span class=\\\\\\"foo\\\\\\">foo</span><img src=\\\\\\"\\" + _imports_0_ + \\"\\\\\\"></div>\\", 1) const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)
const _hoisted_2 = [ const _hoisted_2 = [
_hoisted_1 _hoisted_1
] ]
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2)) return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
}" }"
`; `;
exports[`stringify static html > stringify v-html 1`] = ` exports[`stringify static html > stringify v-html 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>\\", 2) const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return _hoisted_1 return _hoisted_1
@ -46,7 +46,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text 1`] = ` exports[`stringify static html > stringify v-text 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2) const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return _hoisted_1 return _hoisted_1
@ -56,7 +56,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text with escape 1`] = ` exports[`stringify static html > stringify v-text with escape 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue "const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<pre data-type=\\\\\\"js\\\\\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>\\", 2) const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
return _hoisted_1 return _hoisted_1

84
packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
View File

@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", { return _withDirectives((_openBlock(), _createElementBlock("my-input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model] [_vModelText, model]
]) ])
} }
@ -23,9 +23,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, { return _withDirectives((_openBlock(), _createElementBlock("input", _mergeProps(obj, {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [ }), null, 16 /* FULL_PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model] [_vModelDynamic, model]
]) ])
} }
@ -39,9 +39,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model] [_vModelDynamic, model]
]) ])
} }
@ -55,9 +55,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[ [
_vModelText, _vModelText,
model, model,
@ -76,9 +76,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[ [
_vModelText, _vModelText,
model, model,
@ -97,9 +97,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[ [
_vModelText, _vModelText,
model, model,
@ -118,9 +118,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model] [_vModelText, model]
]) ])
} }
@ -134,10 +134,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
type: \\"checkbox\\", type: "checkbox",
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelCheckbox, model] [_vModelCheckbox, model]
]) ])
} }
@ -151,9 +151,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model] [_vModelDynamic, model]
]) ])
} }
@ -167,10 +167,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
type: \\"radio\\", type: "radio",
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelRadio, model] [_vModelRadio, model]
]) ])
} }
@ -184,10 +184,10 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock("input", {
type: \\"text\\", type: "text",
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model] [_vModelText, model]
]) ])
} }
@ -201,9 +201,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", { return _withDirectives((_openBlock(), _createElementBlock("select", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelSelect, model] [_vModelSelect, model]
]) ])
} }
@ -217,9 +217,9 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", { return _withDirectives((_openBlock(), _createElementBlock("textarea", {
\\"onUpdate:modelValue\\": $event => ((model) = $event) "onUpdate:modelValue": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model] [_vModelText, model]
]) ])
} }

2
packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
View File

@ -7,7 +7,7 @@ return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [ return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
[_vShow, a] [_vShow, a]
]) ])
} }

90
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
View File

@ -49,7 +49,7 @@ return { a }
exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = ` exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = `
" "
function fn() { function fn() {
return \\"hello, world\\"; return "hello, world";
} }
const __default__ = fn(); const __default__ = fn();
@ -127,7 +127,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
import { x } from './x' import { x } from './x'
const __default__ = { const __default__ = {
name: \\"test\\" name: "test"
} }
@ -880,7 +880,7 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-msg\\": (msg.value) "xxxxxxxx-msg": (msg.value)
})) }))
const msg = ref() const msg = ref()
@ -960,7 +960,7 @@ return { ref }
exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = ` exports[`SFC compile <script setup> > imports > should support module string names syntax 1`] = `
" "
import { \\"😏\\" as foo } from './foo' import { "😏" as foo } from './foo'
export default { export default {
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
@ -974,7 +974,7 @@ return { get foo() { return foo } }
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > avoid unref() when necessary 1`] = `
"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue' import { ref } from 'vue'
import Foo, { bar } from './Foo.vue' import Foo, { bar } from './Foo.vue'
@ -998,8 +998,8 @@ return (_ctx, _cache) => {
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
}), }),
_createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */), _createElementVNode("div", { onClick: fn }, _toDisplayString(count.value) + " " + _toDisplayString(constant) + " " + _toDisplayString(_unref(maybe)) + " " + _toDisplayString(_unref(lett)) + " " + _toDisplayString(_unref(other)), 1 /* TEXT */),
_createTextVNode(\\" \\" + _toDisplayString(tree.foo()), 1 /* TEXT */) _createTextVNode(" " + _toDisplayString(tree.foo()), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
} }
@ -1008,7 +1008,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > referencing scope components and directives 1`] = `
"import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import ChildComp from './Child.vue' import ChildComp from './Child.vue'
import SomeOtherComp from './Other.vue' import SomeOtherComp from './Other.vue'
@ -1020,7 +1020,7 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [ _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
[_unref(vMyDir)] [_unref(vMyDir)]
]), ]),
_createVNode(ChildComp), _createVNode(ChildComp),
@ -1033,9 +1033,9 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)
import { ref } from 'vue' import { ref } from 'vue'
@ -1046,7 +1046,7 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */), _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
_hoisted_1 _hoisted_1
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
@ -1056,7 +1056,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > ssr codegen 1`] = `
"import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from \\"vue/server-renderer\\" "import { ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "vue/server-renderer"
import { ref } from 'vue' import { ref } from 'vue'
@ -1069,8 +1069,8 @@ export default {
return (_ctx, _push, _parent, _attrs) => { return (_ctx, _push, _parent, _attrs) => {
const _cssVars = { style: { const _cssVars = { style: {
\\"--xxxxxxxx-count\\": (count.value), "--xxxxxxxx-count": (count.value),
\\"--xxxxxxxx-style\\\\\\\\.color\\": (style.color) "--xxxxxxxx-style\\\\.color": (style.color)
}} }}
_push(\`<!--[--><div\${ _push(\`<!--[--><div\${
_ssrRenderAttrs(_cssVars) _ssrRenderAttrs(_cssVars)
@ -1086,7 +1086,7 @@ return (_ctx, _push, _parent, _attrs) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > template assignment expression codegen 1`] = `
"import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, isRef as _isRef, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue' import { ref } from 'vue'
@ -1100,28 +1100,28 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (count.value = 1)) onClick: _cache[0] || (_cache[0] = $event => (count.value = 1))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value)) onClick: _cache[1] || (_cache[1] = $event => (maybe.value = count.value))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value)) onClick: _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1)) onClick: _cache[3] || (_cache[3] = $event => (_isRef(v) ? v.value += 1 : v += 1))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1)) onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[5] || (_cache[5] = () => { onClick: _cache[5] || (_cache[5] = () => {
let a = '' + _unref(lett) let a = '' + _unref(lett)
_isRef(v) ? v.value = a : v = a _isRef(v) ? v.value = a : v = a
}) })
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[6] || (_cache[6] = () => { onClick: _cache[6] || (_cache[6] = () => {
// nested scopes // nested scopes
(()=>{ (()=>{
@ -1143,7 +1143,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > template destructure assignment codegen 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue' import { ref } from 'vue'
@ -1157,13 +1157,13 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val))) onClick: _cache[0] || (_cache[0] = $event => (({ count: count.value } = val)))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val)) onClick: _cache[1] || (_cache[1] = $event => ([maybe.value] = val))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val))) onClick: _cache[2] || (_cache[2] = $event => (({ lett: lett } = val)))
}) })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
@ -1174,7 +1174,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > template update expression codegen 1`] = `
"import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue' import { ref } from 'vue'
@ -1187,22 +1187,22 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = $event => (count.value++)) onClick: _cache[0] || (_cache[0] = $event => (count.value++))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[1] || (_cache[1] = $event => (--count.value)) onClick: _cache[1] || (_cache[1] = $event => (--count.value))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[2] || (_cache[2] = $event => (maybe.value++)) onClick: _cache[2] || (_cache[2] = $event => (maybe.value++))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[3] || (_cache[3] = $event => (--maybe.value)) onClick: _cache[3] || (_cache[3] = $event => (--maybe.value))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++)) onClick: _cache[4] || (_cache[4] = $event => (_isRef(lett) ? lett.value++ : lett++))
}), }),
_createElementVNode(\\"div\\", { _createElementVNode("div", {
onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett)) onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? --lett.value : --lett))
}) })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
@ -1213,7 +1213,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = ` exports[`SFC compile <script setup> > inlineTemplate mode > v-model codegen 1`] = `
"import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue' import { ref } from 'vue'
@ -1226,18 +1226,18 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode(\\"input\\", { _withDirectives(_createElementVNode("input", {
\\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event)) "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((count).value = $event))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, count.value] [_vModelText, count.value]
]), ]),
_withDirectives(_createElementVNode(\\"input\\", { _withDirectives(_createElementVNode("input", {
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null)) "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(maybe)] [_vModelText, _unref(maybe)]
]), ]),
_withDirectives(_createElementVNode(\\"input\\", { _withDirectives(_createElementVNode("input", {
\\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event)) "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(lett)] [_vModelText, _unref(lett)]
]) ])
@ -1367,9 +1367,9 @@ return { Foo }
exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = ` exports[`SFC compile <script setup> > with TypeScript > runtime Enum in normal script 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export enum D { D = \\"D\\" } export enum D { D = "D" }
const enum C { C = \\"C\\" } const enum C { C = "C" }
enum B { B = \\"B\\" } enum B { B = "B" }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
@ -1475,7 +1475,7 @@ exports[`SFC genDefaultAs > normal <script> w/ cssVars 1`] = `
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-x\\": (_ctx.x) "xxxxxxxx-x": (_ctx.x)
}))} }))}
const __setup__ = _sfc_.setup const __setup__ = _sfc_.setup
_sfc_.setup = __setup__ _sfc_.setup = __setup__

24
packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
View File

@ -1,10 +1,10 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`dynamic v-on + static v-on should merged 1`] = ` exports[`dynamic v-on + static v-on should merged 1`] = `
"import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { toHandlerKey as _toHandlerKey, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _mergeProps({ return (_openBlock(), _createElementBlock("input", _mergeProps({
onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args))) onBlur: _cache[0] || (_cache[0] = (...args) => (_ctx.onBlur && _ctx.onBlur(...args)))
}, { }, {
[_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args))) [_toHandlerKey(_ctx.validateEvent)]: _cache[1] || (_cache[1] = (...args) => (_ctx.onValidateEvent && _ctx.onValidateEvent(...args)))
@ -13,19 +13,19 @@ export function render(_ctx, _cache) {
`; `;
exports[`should not hoist srcset URLs in SSR mode 1`] = ` exports[`should not hoist srcset URLs in SSR mode 1`] = `
"import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\" "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\" import { ssrRenderAttr as _ssrRenderAttr, ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
import _imports_0 from './img/foo.svg' import _imports_0 from './img/foo.svg'
import _imports_1 from './img/bar.svg' import _imports_1 from './img/bar.svg'
export function ssrRender(_ctx, _push, _parent, _attrs) { export function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_router_link = _resolveComponent(\\"router-link\\") const _component_router_link = _resolveComponent("router-link")
_push(\`<!--[--><picture><source\${ _push(\`<!--[--><picture><source\${
_ssrRenderAttr(\\"srcset\\", _imports_0) _ssrRenderAttr("srcset", _imports_0)
}><img\${ }><img\${
_ssrRenderAttr(\\"src\\", _imports_0) _ssrRenderAttr("src", _imports_0)
}></picture>\`) }></picture>\`)
_push(_ssrRenderComponent(_component_router_link, null, { _push(_ssrRenderComponent(_component_router_link, null, {
default: _withCtx((_, _push, _parent, _scopeId) => { default: _withCtx((_, _push, _parent, _scopeId) => {
@ -33,21 +33,21 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<picture\${ _push(\`<picture\${
_scopeId _scopeId
}><source\${ }><source\${
_ssrRenderAttr(\\"srcset\\", _imports_1) _ssrRenderAttr("srcset", _imports_1)
}\${ }\${
_scopeId _scopeId
}><img\${ }><img\${
_ssrRenderAttr(\\"src\\", _imports_1) _ssrRenderAttr("src", _imports_1)
}\${ }\${
_scopeId _scopeId
}></picture>\`) }></picture>\`)
} else { } else {
return [ return [
_createVNode(\\"picture\\", null, [ _createVNode("picture", null, [
_createVNode(\\"source\\", { _createVNode("source", {
srcset: _imports_1 srcset: _imports_1
}), }),
_createVNode(\\"img\\", { src: _imports_1 }) _createVNode("img", { src: _imports_1 })
]) ])
] ]
} }

32
packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap
View File

@ -5,7 +5,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export 1`] = `
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color) "xxxxxxxx-color": (_ctx.color)
}))} }))}
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -23,7 +23,7 @@ exports[`CSS vars injection > codegen > <script> w/ default export in strings/co
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color) "xxxxxxxx-color": (_ctx.color)
}))} }))}
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -39,7 +39,7 @@ const __default__ = {}
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color) "xxxxxxxx-color": (_ctx.color)
}))} }))}
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -57,7 +57,7 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-width\\": (width) "xxxxxxxx-width": (width)
})) }))
return { color, width } return { color, width }
@ -74,10 +74,10 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-foo\\": (_unref(foo)), "xxxxxxxx-foo": (_unref(foo)),
\\"xxxxxxxx-foo\\\\ \\\\+\\\\ \\\\'px\\\\'\\": (_unref(foo) + 'px'), "xxxxxxxx-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'),
\\"xxxxxxxx-\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\ \\\\/\\\\ 2\\\\ \\\\+\\\\ \\\\'px\\\\'\\": ((_unref(a) + _unref(b)) / 2 + 'px'), "xxxxxxxx-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'),
\\"xxxxxxxx-\\\\(\\\\(a\\\\ \\\\+\\\\ b\\\\)\\\\)\\\\ \\\\/\\\\ \\\\(2\\\\ \\\\*\\\\ a\\\\)\\": (((_unref(a) + _unref(b))) / (2 * _unref(a))) "xxxxxxxx-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a)))
})) }))
let a = 100 let a = 100
@ -98,7 +98,7 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color) "xxxxxxxx-color": (color)
})) }))
return { color } return { color }
@ -116,7 +116,7 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color) "xxxxxxxx-color": (color)
})) }))
@ -132,8 +132,8 @@ const __default__ = {}
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (_ctx.color), "xxxxxxxx-color": (_ctx.color),
\\"xxxxxxxx-font\\\\.size\\": (_ctx.font.size) "xxxxxxxx-font\\.size": (_ctx.font.size)
}))} }))}
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__
@ -156,9 +156,9 @@ export default {
__expose(); __expose();
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-color\\": (color), "xxxxxxxx-color": (color),
\\"xxxxxxxx-size\\": (size.value), "xxxxxxxx-size": (size.value),
\\"xxxxxxxx-foo\\": (__props.foo) "xxxxxxxx-foo": (__props.foo)
})) }))
const size = ref('10px') const size = ref('10px')
@ -183,7 +183,7 @@ exports[`CSS vars injection > w/ normal <script> binding analysis 1`] = `
import { useCssVars as _useCssVars } from 'vue' import { useCssVars as _useCssVars } from 'vue'
const __injectCSSVars__ = () => { const __injectCSSVars__ = () => {
_useCssVars(_ctx => ({ _useCssVars(_ctx => ({
\\"xxxxxxxx-size\\": (_ctx.size) "xxxxxxxx-size": (_ctx.size)
}))} }))}
const __setup__ = __default__.setup const __setup__ = __default__.setup
__default__.setup = __setup__ __default__.setup = __setup__

68
packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap
View File

@ -1,45 +1,45 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = ` exports[`compiler sfc: transform asset url > should allow for full base URLs, with paths 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" })) return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/src/logo.png" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = ` exports[`compiler sfc: transform asset url > should allow for full base URLs, without paths 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" })) return (_openBlock(), _createElementBlock("img", { src: "http://localhost:3000/logo.png" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = ` exports[`compiler sfc: transform asset url > should allow for full base URLs, without port 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" })) return (_openBlock(), _createElementBlock("img", { src: "http://localhost/logo.png" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = ` exports[`compiler sfc: transform asset url > should allow for full base URLs, without protocol 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" })) return (_openBlock(), _createElementBlock("img", { src: "//localhost/logo.png" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url > support uri fragment 1`] = ` exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from '@svg/file.svg' import _imports_0 from '@svg/file.svg'
const _hoisted_1 = _imports_0 + '#fragment' const _hoisted_1 = _imports_0 + '#fragment'
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"use\\", { href: _hoisted_1 }, null, -1 /* HOISTED */) const _hoisted_3 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
@ -50,76 +50,76 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform asset url > support uri is empty 1`] = ` exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
"import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"use\\", { href: '' })) return (_openBlock(), _createElementBlock("use", { href: '' }))
}" }"
`; `;
exports[`compiler sfc: transform asset url > transform assetUrls 1`] = ` exports[`compiler sfc: transform asset url > transform assetUrls 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
import _imports_1 from 'fixtures/logo.png' import _imports_1 from 'fixtures/logo.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: _imports_0 }), _createElementVNode("img", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 }), _createElementVNode("img", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: _imports_1 }), _createElementVNode("img", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }), _createElementVNode("img", { src: "http://example.com/fixtures/logo.png" }),
_createElementVNode(\\"img\\", { src: \\"//example.com/fixtures/logo.png\\" }), _createElementVNode("img", { src: "//example.com/fixtures/logo.png" }),
_createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }), _createElementVNode("img", { src: "/fixtures/logo.png" }),
_createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" }) _createElementVNode("img", { src: "data:image/png;base64,i" })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;
exports[`compiler sfc: transform asset url > transform with stringify 1`] = ` exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './bar.png' import _imports_0 from './bar.png'
import _imports_1 from '/bar.png' import _imports_1 from '/bar.png'
const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\"><img src=\\\\\\"\\" + _imports_1 + \\"\\\\\\"><img src=\\\\\\"https://foo.bar/baz.png\\\\\\"><img src=\\\\\\"//foo.bar/baz.png\\\\\\"><img src=\\\\\\"\\" + _imports_0 + \\"\\\\\\">\\", 5) const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
const _hoisted_6 = [ const _hoisted_6 = [
_hoisted_1 _hoisted_1
] ]
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_6)) return (_openBlock(), _createElementBlock("div", null, _hoisted_6))
}" }"
`; `;
exports[`compiler sfc: transform asset url > with explicit base 1`] = ` exports[`compiler sfc: transform asset url > with explicit base 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from 'bar.png' import _imports_0 from 'bar.png'
import _imports_1 from '@theme/bar.png' import _imports_1 from '@theme/bar.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }), _createElementVNode("img", { src: "/foo/bar.png" }),
_createElementVNode(\\"img\\", { src: \\"bar.png\\" }), _createElementVNode("img", { src: "bar.png" }),
_createElementVNode(\\"img\\", { src: _imports_0 }), _createElementVNode("img", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 }) _createElementVNode("img", { src: _imports_1 })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;
exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = ` exports[`compiler sfc: transform asset url > with includeAbsolute: true 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './bar.png' import _imports_0 from './bar.png'
import _imports_1 from '/bar.png' import _imports_1 from '/bar.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode(\\"img\\", { src: _imports_0 }), _createElementVNode("img", { src: _imports_0 }),
_createElementVNode(\\"img\\", { src: _imports_1 }), _createElementVNode("img", { src: _imports_1 }),
_createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }), _createElementVNode("img", { src: "https://foo.bar/baz.png" }),
_createElementVNode(\\"img\\", { src: \\"//foo.bar/baz.png\\" }) _createElementVNode("img", { src: "//foo.bar/baz.png" })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;

204
packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap
View File

@ -1,14 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = ` exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from '@/logo.png' import _imports_0 from '@/logo.png'
const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x' const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
const _hoisted_2 = _imports_0 + ' 1x, ' + \\"/foo/logo.png\\" + ' 2x' const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_1 }, null, -1 /* HOISTED */) const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { srcset: _hoisted_2 }, null, -1 /* HOISTED */) const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
@ -19,7 +19,7 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset > transform srcset 1`] = ` exports[`compiler sfc: transform srcset > transform srcset 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
@ -30,54 +30,54 @@ const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0 const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x' const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x' const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"\\" srcset: ""
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_1 srcset: _hoisted_1
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_2 srcset: _hoisted_2
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_3 srcset: _hoisted_3
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_4 srcset: _hoisted_4
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_5 srcset: _hoisted_5
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_6 srcset: _hoisted_6
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_7 srcset: _hoisted_7
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: \\"/logo.png, /logo.png 2x\\" srcset: "/logo.png, /logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
src: \\"https://example.com/logo.png\\", src: "https://example.com/logo.png",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: _hoisted_8 srcset: _hoisted_8
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
src: \\"data:image/png;base64,i\\", src: "data:image/png;base64,i",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
@ -99,55 +99,55 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = ` exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_1 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"\\" srcset: ""
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png\\" srcset: "/foo/logo.png"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png 2x\\" srcset: "/foo/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_4 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png 2x\\" srcset: "/foo/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_5 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_5 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png, /foo/logo.png 2x\\" srcset: "/foo/logo.png, /foo/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_6 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_6 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png 2x, /foo/logo.png\\" srcset: "/foo/logo.png 2x, /foo/logo.png"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_7 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_7 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\" srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_8 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_8 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\" srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_9 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: \\"/logo.png, /logo.png 2x\\" srcset: "/logo.png, /logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: \\"https://example.com/logo.png\\", src: "https://example.com/logo.png",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: \\"/logo.png, /foo/logo.png 2x\\" srcset: "/logo.png, /foo/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: \\"data:image/png;base64,i\\", src: "data:image/png;base64,i",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
@ -169,7 +169,7 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = ` exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
import _imports_1 from '/logo.png' import _imports_1 from '/logo.png'
@ -183,53 +183,53 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x' const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x' const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
const _hoisted_10 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: \\"\\" srcset: ""
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_11 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_1 srcset: _hoisted_1
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_12 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_2 srcset: _hoisted_2
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_13 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_3 srcset: _hoisted_3
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_14 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_4 srcset: _hoisted_4
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_15 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_5 srcset: _hoisted_5
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_16 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_6 srcset: _hoisted_6
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_17 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
src: \\"./logo.png\\", src: "./logo.png",
srcset: _hoisted_7 srcset: _hoisted_7
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_18 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: _hoisted_8 srcset: _hoisted_8
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_19 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
src: \\"https://example.com/logo.png\\", src: "https://example.com/logo.png",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_20 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
src: \\"/logo.png\\", src: "/logo.png",
srcset: _hoisted_9 srcset: _hoisted_9
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
const _hoisted_21 = /*#__PURE__*/_createElementVNode(\\"img\\", { const _hoisted_21 = /*#__PURE__*/_createElementVNode("img", {
src: \\"data:image/png;base64,i\\", src: "data:image/png;base64,i",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
}, null, -1 /* HOISTED */) }, null, -1 /* HOISTED */)
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
@ -251,7 +251,7 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = ` exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
import _imports_1 from '/logo.png' import _imports_1 from '/logo.png'
@ -265,12 +265,12 @@ const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x' const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x' const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
const _hoisted_10 = /*#__PURE__*/_createStaticVNode(\\"<img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_1 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_2 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_3 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_4 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_5 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_6 + \\"\\\\\\"><img src=\\\\\\"./logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_7 + \\"\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_8 + \\"\\\\\\"><img src=\\\\\\"https://example.com/logo.png\\\\\\" srcset=\\\\\\"https://example.com/logo.png, https://example.com/logo.png 2x\\\\\\"><img src=\\\\\\"/logo.png\\\\\\" srcset=\\\\\\"\\" + _hoisted_9 + \\"\\\\\\"><img src=\\\\\\"data:image/png;base64,i\\\\\\" srcset=\\\\\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\\\\\">\\", 12) const _hoisted_10 = /*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
const _hoisted_22 = [ const _hoisted_22 = [
_hoisted_10 _hoisted_10
] ]
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_22)) return (_openBlock(), _createElementBlock("div", null, _hoisted_22))
}" }"
`; `;

32
packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
View File

@ -36,7 +36,7 @@ exports[`defineEmits > w/ type (exported interface) 1`] = `
export interface Emits { (e: 'foo' | 'bar'): void } export interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -53,7 +53,7 @@ exports[`defineEmits > w/ type (exported type alias) 1`] = `
export type Emits = { (e: 'foo' | 'bar'): void } export type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -88,7 +88,7 @@ interface Base { (e: 'foo'): void }
interface Emits extends Base { (e: 'bar'): void } interface Emits extends Base { (e: 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"bar\\", \\"foo\\"], emits: ["bar", "foo"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -105,7 +105,7 @@ exports[`defineEmits > w/ type (interface) 1`] = `
interface Emits { (e: 'foo' | 'bar'): void } interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -121,7 +121,7 @@ exports[`defineEmits > w/ type (property syntax string literal) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo:bar\\"], emits: ["foo:bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -137,7 +137,7 @@ exports[`defineEmits > w/ type (property syntax) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -154,7 +154,7 @@ exports[`defineEmits > w/ type (referenced exported function type) 1`] = `
export type Emits = (e: 'foo' | 'bar') => void export type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -171,7 +171,7 @@ exports[`defineEmits > w/ type (referenced function type) 1`] = `
type Emits = (e: 'foo' | 'bar') => void type Emits = (e: 'foo' | 'bar') => void
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -188,7 +188,7 @@ exports[`defineEmits > w/ type (type alias) 1`] = `
type Emits = { (e: 'foo' | 'bar'): void } type Emits = { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -204,7 +204,7 @@ exports[`defineEmits > w/ type (type literal w/ call signatures) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"], emits: ["foo", "bar", "baz"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -218,11 +218,11 @@ return { emit }
exports[`defineEmits > w/ type (type references in union) 1`] = ` exports[`defineEmits > w/ type (type references in union) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
type BaseEmit = \\"change\\" type BaseEmit = "change"
type Emit = \\"some\\" | \\"emit\\" | BaseEmit type Emit = "some" | "emit" | BaseEmit
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"some\\", \\"emit\\", \\"change\\", \\"another\\"], emits: ["some", "emit", "change", "another"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -238,7 +238,7 @@ exports[`defineEmits > w/ type (union) 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\", \\"baz\\"], emits: ["foo", "bar", "baz"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -254,7 +254,7 @@ exports[`defineEmits > w/ type 1`] = `
"import { defineComponent as _defineComponent } from 'vue' "import { defineComponent as _defineComponent } from 'vue'
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();
@ -272,7 +272,7 @@ exports[`defineEmits > w/ type from normal script 1`] = `
export interface Emits { (e: 'foo' | 'bar'): void } export interface Emits { (e: 'foo' | 'bar'): void }
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
emits: [\\"foo\\", \\"bar\\"], emits: ["foo", "bar"],
setup(__props, { expose: __expose, emit: __emit }) { setup(__props, { expose: __expose, emit: __emit }) {
__expose(); __expose();

92
packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
View File

@ -5,17 +5,17 @@ exports[`defineModel() > basic usage 1`] = `
export default { export default {
props: { props: {
\\"modelValue\\": { required: true }, "modelValue": { required: true },
\\"count\\": {}, "count": {},
\\"toString\\": { type: Function }, "toString": { type: Function },
}, },
emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:toString\\"], emits: ["update:modelValue", "update:count", "update:toString"],
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const modelValue = _useModel(__props, \\"modelValue\\") const modelValue = _useModel(__props, "modelValue")
const c = _useModel(__props, \\"count\\") const c = _useModel(__props, "count")
const toString = _useModel(__props, \\"toString\\") const toString = _useModel(__props, "toString")
return { modelValue, c, toString } return { modelValue, c, toString }
} }
@ -28,14 +28,14 @@ exports[`defineModel() > w/ array props 1`] = `
export default { export default {
props: /*#__PURE__*/_mergeModels(['foo', 'bar'], { props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
\\"count\\": {}, "count": {},
}), }),
emits: [\\"update:count\\"], emits: ["update:count"],
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const count = _useModel(__props, \\"count\\") const count = _useModel(__props, "count")
return { count } return { count }
} }
@ -48,15 +48,15 @@ exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
export default { export default {
props: /*#__PURE__*/_mergeModels({ foo: String }, { props: /*#__PURE__*/_mergeModels({ foo: String }, {
\\"modelValue\\": { default: 0 }, "modelValue": { default: 0 },
}), }),
emits: /*#__PURE__*/_mergeModels(['change'], [\\"update:modelValue\\"]), emits: /*#__PURE__*/_mergeModels(['change'], ["update:modelValue"]),
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const count = _useModel(__props, \\"modelValue\\") const count = _useModel(__props, "modelValue")
return { count } return { count }
} }
@ -70,25 +70,25 @@ const local = true
export default { export default {
props: { props: {
\\"modelValue\\": { local: true, default: 1 }, "modelValue": { local: true, default: 1 },
\\"bar\\": { [key]: true }, "bar": { [key]: true },
\\"baz\\": { ...x }, "baz": { ...x },
\\"qux\\": x, "qux": x,
\\"foo2\\": { local: true, ...x }, "foo2": { local: true, ...x },
\\"hoist\\": { local }, "hoist": { local },
}, },
emits: [\\"update:modelValue\\", \\"update:bar\\", \\"update:baz\\", \\"update:qux\\", \\"update:foo2\\", \\"update:hoist\\"], emits: ["update:modelValue", "update:bar", "update:baz", "update:qux", "update:foo2", "update:hoist"],
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const foo = _useModel(__props, \\"modelValue\\", { local: true }) const foo = _useModel(__props, "modelValue", { local: true })
const bar = _useModel(__props, \\"bar\\", { [key]: true }) const bar = _useModel(__props, "bar", { [key]: true })
const baz = _useModel(__props, \\"baz\\", { ...x }) const baz = _useModel(__props, "baz", { ...x })
const qux = _useModel(__props, \\"qux\\", x) const qux = _useModel(__props, "qux", x)
const foo2 = _useModel(__props, \\"foo2\\", { local: true }) const foo2 = _useModel(__props, "foo2", { local: true })
const hoist = _useModel(__props, \\"hoist\\", { local }) const hoist = _useModel(__props, "hoist", { local })
return { foo, bar, baz, qux, foo2, local, hoist } return { foo, bar, baz, qux, foo2, local, hoist }
} }
@ -101,19 +101,19 @@ exports[`defineModel() > w/ types, basic usage 1`] = `
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
props: { props: {
\\"modelValue\\": { type: [Boolean, String] }, "modelValue": { type: [Boolean, String] },
\\"count\\": { type: Number }, "count": { type: Number },
\\"disabled\\": { type: Number, ...{ required: false } }, "disabled": { type: Number, ...{ required: false } },
\\"any\\": { type: Boolean, skipCheck: true }, "any": { type: Boolean, skipCheck: true },
}, },
emits: [\\"update:modelValue\\", \\"update:count\\", \\"update:disabled\\", \\"update:any\\"], emits: ["update:modelValue", "update:count", "update:disabled", "update:any"],
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const modelValue = _useModel(__props, \\"modelValue\\") const modelValue = _useModel(__props, "modelValue")
const count = _useModel(__props, \\"count\\") const count = _useModel(__props, "count")
const disabled = _useModel(__props, \\"disabled\\") const disabled = _useModel(__props, "disabled")
const any = _useModel(__props, \\"any\\") const any = _useModel(__props, "any")
return { modelValue, count, disabled, any } return { modelValue, count, disabled, any }
} }
@ -126,21 +126,21 @@ exports[`defineModel() > w/ types, production mode 1`] = `
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
props: { props: {
\\"modelValue\\": { type: Boolean }, "modelValue": { type: Boolean },
\\"fn\\": {}, "fn": {},
\\"fnWithDefault\\": { type: Function, ...{ default: () => null } }, "fnWithDefault": { type: Function, ...{ default: () => null } },
\\"str\\": {}, "str": {},
\\"optional\\": { required: false }, "optional": { required: false },
}, },
emits: [\\"update:modelValue\\", \\"update:fn\\", \\"update:fnWithDefault\\", \\"update:str\\", \\"update:optional\\"], emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"],
setup(__props, { expose: __expose }) { setup(__props, { expose: __expose }) {
__expose(); __expose();
const modelValue = _useModel(__props, \\"modelValue\\") const modelValue = _useModel(__props, "modelValue")
const fn = _useModel(__props, \\"fn\\") const fn = _useModel(__props, "fn")
const fnWithDefault = _useModel(__props, \\"fnWithDefault\\") const fnWithDefault = _useModel(__props, "fnWithDefault")
const str = _useModel(__props, \\"str\\") const str = _useModel(__props, "str")
const optional = _useModel(__props, \\"optional\\") const optional = _useModel(__props, "optional")
return { modelValue, fn, fnWithDefault, str, optional } return { modelValue, fn, fnWithDefault, str, optional }
} }

58
packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
View File

@ -57,34 +57,34 @@ exports[`defineProps > should escape names w/ special symbols 1`] = `
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
props: { props: {
\\"spa ce\\": { type: null, required: true }, "spa ce": { type: null, required: true },
\\"exclamation!mark\\": { type: null, required: true }, "exclamation!mark": { type: null, required: true },
\\"double\\\\\\"quote\\": { type: null, required: true }, "double\\"quote": { type: null, required: true },
\\"hash#tag\\": { type: null, required: true }, "hash#tag": { type: null, required: true },
\\"dollar$sign\\": { type: null, required: true }, "dollar$sign": { type: null, required: true },
\\"percentage%sign\\": { type: null, required: true }, "percentage%sign": { type: null, required: true },
\\"amper&sand\\": { type: null, required: true }, "amper&sand": { type: null, required: true },
\\"single'quote\\": { type: null, required: true }, "single'quote": { type: null, required: true },
\\"round(brack)ets\\": { type: null, required: true }, "round(brack)ets": { type: null, required: true },
\\"aste*risk\\": { type: null, required: true }, "aste*risk": { type: null, required: true },
\\"pl+us\\": { type: null, required: true }, "pl+us": { type: null, required: true },
\\"com,ma\\": { type: null, required: true }, "com,ma": { type: null, required: true },
\\"do.t\\": { type: null, required: true }, "do.t": { type: null, required: true },
\\"sla/sh\\": { type: null, required: true }, "sla/sh": { type: null, required: true },
\\"co:lon\\": { type: null, required: true }, "co:lon": { type: null, required: true },
\\"semi;colon\\": { type: null, required: true }, "semi;colon": { type: null, required: true },
\\"angle<brack>ets\\": { type: null, required: true }, "angle<brack>ets": { type: null, required: true },
\\"equal=sign\\": { type: null, required: true }, "equal=sign": { type: null, required: true },
\\"question?mark\\": { type: null, required: true }, "question?mark": { type: null, required: true },
\\"at@sign\\": { type: null, required: true }, "at@sign": { type: null, required: true },
\\"square[brack]ets\\": { type: null, required: true }, "square[brack]ets": { type: null, required: true },
\\"back\\\\\\\\slash\\": { type: null, required: true }, "back\\\\slash": { type: null, required: true },
\\"ca^ret\\": { type: null, required: true }, "ca^ret": { type: null, required: true },
\\"back\`tick\\": { type: null, required: true }, "back\`tick": { type: null, required: true },
\\"curly{bra}ces\\": { type: null, required: true }, "curly{bra}ces": { type: null, required: true },
\\"pi|pe\\": { type: null, required: true }, "pi|pe": { type: null, required: true },
\\"til~de\\": { type: null, required: true }, "til~de": { type: null, required: true },
\\"da-sh\\": { type: null, required: true } "da-sh": { type: null, required: true }
}, },
setup(__props: any, { expose: __expose }) { setup(__props: any, { expose: __expose }) {
__expose(); __expose();
@ -400,7 +400,7 @@ exports[`defineProps > withDefaults (static) + normal script 1`] = `
export default /*#__PURE__*/_defineComponent({ export default /*#__PURE__*/_defineComponent({
props: { props: {
a: { type: String, required: false, default: \\"a\\" } a: { type: String, required: false, default: "a" }
}, },
setup(__props: any, { expose: __expose }) { setup(__props: any, { expose: __expose }) {
__expose(); __expose();

24
packages/compiler-sfc/__tests__/compileScript/__snapshots__/definePropsDestructure.spec.ts.snap
View File

@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`sfc reactive props destructure > aliasing 1`] = ` exports[`sfc reactive props destructure > aliasing 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\" "import { toDisplayString as _toDisplayString } from "vue"
export default { export default {
@ -21,7 +21,7 @@ return (_ctx, _cache) => {
`; `;
exports[`sfc reactive props destructure > basic usage 1`] = ` exports[`sfc reactive props destructure > basic usage 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\" "import { toDisplayString as _toDisplayString } from "vue"
export default { export default {
@ -40,7 +40,7 @@ return (_ctx, _cache) => {
`; `;
exports[`sfc reactive props destructure > computed static key 1`] = ` exports[`sfc reactive props destructure > computed static key 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\" "import { toDisplayString as _toDisplayString } from "vue"
export default { export default {
@ -103,7 +103,7 @@ exports[`sfc reactive props destructure > default values w/ runtime declaration
export default { export default {
props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], { props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
foo: 1, foo: 1,
\\"foo:bar\\": 'foo-bar' "foo:bar": 'foo-bar'
}), }),
setup(__props) { setup(__props) {
@ -122,8 +122,8 @@ export default /*#__PURE__*/_defineComponent({
props: { props: {
foo: { type: Number, required: true, default: 1 }, foo: { type: Number, required: true, default: 1 },
bar: { type: Number, required: true, default: 2 }, bar: { type: Number, required: true, default: 2 },
\\"foo:bar\\": { type: String, required: true, default: 'foo-bar' }, "foo:bar": { type: String, required: true, default: 'foo-bar' },
\\"onUpdate:modelValue\\": { type: Function, required: true } "onUpdate:modelValue": { type: Function, required: true }
}, },
setup(__props: any) { setup(__props: any) {
@ -236,7 +236,7 @@ return () => {}
`; `;
exports[`sfc reactive props destructure > multiple variable declarations 1`] = ` exports[`sfc reactive props destructure > multiple variable declarations 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\" "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export default { export default {
@ -246,7 +246,7 @@ export default {
const bar = 'fish', hello = 'world' const bar = 'fish', hello = 'world'
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.foo) + \\" \\" + _toDisplayString(hello) + \\" \\" + _toDisplayString(bar), 1 /* TEXT */)) return (_openBlock(), _createElementBlock("div", null, _toDisplayString(__props.foo) + " " + _toDisplayString(hello) + " " + _toDisplayString(bar), 1 /* TEXT */))
} }
} }
@ -272,7 +272,7 @@ return () => {}
`; `;
exports[`sfc reactive props destructure > non-identifier prop names 1`] = ` exports[`sfc reactive props destructure > non-identifier prop names 1`] = `
"import { toDisplayString as _toDisplayString } from \\"vue\\" "import { toDisplayString as _toDisplayString } from "vue"
export default { export default {
@ -280,10 +280,10 @@ export default {
setup(__props) { setup(__props) {
let x = __props[\\"foo.bar\\"] let x = __props["foo.bar"]
return (_ctx, _cache) => { return (_ctx, _cache) => {
return _toDisplayString(__props[\\"foo.bar\\"]) return _toDisplayString(__props["foo.bar"])
} }
} }
@ -297,7 +297,7 @@ export default {
props: ['foo', 'bar', 'baz'], props: ['foo', 'bar', 'baz'],
setup(__props) { setup(__props) {
const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"]) const rest = _createPropsRestProxy(__props, ["foo","bar"])
return () => {} return () => {}
} }

2
packages/compiler-sfc/__tests__/cssVars.spec.ts
View File

@ -90,7 +90,7 @@ describe('CSS vars injection', () => {
expect(code).toMatchInlineSnapshot(` expect(code).toMatchInlineSnapshot(`
".foo { ".foo {
color: var(--test-color); color: var(--test-color);
font-size: var(--test-font\\\\.size); font-size: var(--test-font\\.size);
font-weight: var(--test-_φ); font-weight: var(--test-_φ);
font-size: var(--test-1-字号); font-size: var(--test-1-字号);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20
packages/compiler-ssr/__tests__/ssrTransition.spec.ts
View File

@ -4,22 +4,22 @@ describe('transition', () => {
test('basic', () => { test('basic', () => {
expect(compile(`<transition><div>foo</div></transition>`).code) expect(compile(`<transition><div>foo</div></transition>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}>foo</div>\`)
}" }"
`) `)
}) })
test('with appear', () => { test('with appear', () => {
expect(compile(`<transition appear><div>foo</div></transition>`).code) expect(compile(`<transition appear><div>foo</div></transition>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`) _push(\`<template><div\${_ssrRenderAttrs(_attrs)}>foo</div></template>\`)
}" }"
`) `)
}) })
}) })

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

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

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

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

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

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

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

@ -8,26 +8,26 @@ describe('ssr: v-model', () => {
test('<input> (text types)', () => { test('<input> (text types)', () => {
expect(compileWithWrapper(`<input v-model="bar">`).code) expect(compileWithWrapper(`<input v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr(\\"value\\", _ctx.bar) _ssrRenderAttr("value", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
expect(compileWithWrapper(`<input type="email" v-model="bar">`).code) expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"email\\"\${ }><input type="email"\${
_ssrRenderAttr(\\"value\\", _ctx.bar) _ssrRenderAttr("value", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
@ -39,15 +39,15 @@ describe('ssr: v-model', () => {
`<select v-model="model"><option value="1"></option></select>` `<select v-model="model"><option value="1"></option></select>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><select><option value=\\"1\\"\${ }><select><option value="1"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"1\\") ? _ssrLooseContain(_ctx.model, "1")
: _ssrLooseEqual(_ctx.model, \\"1\\"))) ? \\" selected\\" : \\"\\" : _ssrLooseEqual(_ctx.model, "1"))) ? " selected" : ""
}></option></select></div>\`) }></option></select></div>\`)
}" }"
`) `)
@ -57,15 +57,15 @@ describe('ssr: v-model', () => {
`<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>` `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><select multiple><option value=\\"1\\" selected></option><option value=\\"2\\"\${ }><select multiple><option value="1" selected></option><option value="2"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"2\\") ? _ssrLooseContain(_ctx.model, "2")
: _ssrLooseEqual(_ctx.model, \\"2\\"))) ? \\" selected\\" : \\"\\" : _ssrLooseEqual(_ctx.model, "2"))) ? " selected" : ""
}></option></select></div>\`) }></option></select></div>\`)
}" }"
`) `)
@ -74,11 +74,11 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<select multiple v-model="model"><slot/></select>`) compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple>\`)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
_push(\`</select></div>\`) _push(\`</select></div>\`)
}" }"
`) `)
@ -91,15 +91,15 @@ describe('ssr: v-model', () => {
</optgroup> </optgroup>
</select>`).code </select>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrLooseContain: _ssrLooseContain, ssrLooseEqual: _ssrLooseEqual, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><select multiple><optgroup label=\\"foo\\"><option value=\\"bar\\"\${ }><select multiple><optgroup label="foo"><option value="bar"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.model)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
? _ssrLooseContain(_ctx.model, \\"bar\\") ? _ssrLooseContain(_ctx.model, "bar")
: _ssrLooseEqual(_ctx.model, \\"bar\\"))) ? \\" selected\\" : \\"\\" : _ssrLooseEqual(_ctx.model, "bar"))) ? " selected" : ""
}>bar</option></optgroup></select></div>\`) }>bar</option></optgroup></select></div>\`)
}" }"
`) `)
@ -112,11 +112,11 @@ describe('ssr: v-model', () => {
</optgroup> </optgroup>
</select>`).code </select>`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderSlot: _ssrRenderSlot, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label=\\"foo\\">\`) _push(\`<div\${_ssrRenderAttrs(_attrs)}><select multiple><optgroup label="foo">\`)
_ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent) _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
_push(\`</optgroup></select></div>\`) _push(\`</optgroup></select></div>\`)
}" }"
`) `)
@ -126,13 +126,13 @@ describe('ssr: v-model', () => {
expect( expect(
compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"radio\\" value=\\"foo\\"\${ }><input type="radio" value="foo"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
}></div>\`) }></div>\`)
}" }"
`) `)
@ -141,15 +141,15 @@ describe('ssr: v-model', () => {
test('<input type="checkbox">', () => { test('<input type="checkbox">', () => {
expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code) expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${ }><input type="checkbox"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, null) ? _ssrLooseContain(_ctx.bar, null)
: _ctx.bar)) ? \\" checked\\" : \\"\\" : _ctx.bar)) ? " checked" : ""
}></div>\`) }></div>\`)
}" }"
`) `)
@ -158,15 +158,15 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`) compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\" value=\\"foo\\"\${ }><input type="checkbox" value="foo"\${
(_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar)) (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
? _ssrLooseContain(_ctx.bar, \\"foo\\") ? _ssrLooseContain(_ctx.bar, "foo")
: _ctx.bar)) ? \\" checked\\" : \\"\\" : _ctx.bar)) ? " checked" : ""
}></div>\`) }></div>\`)
}" }"
`) `)
@ -176,13 +176,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">` `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${ }><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
}></div>\`) }></div>\`)
}" }"
`) `)
@ -192,13 +192,13 @@ describe('ssr: v-model', () => {
`<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">` `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
).code ).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input type=\\"checkbox\\"\${ }><input type="checkbox"\${
(_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\" (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
}></div>\`) }></div>\`)
}" }"
`) `)
@ -207,7 +207,7 @@ describe('ssr: v-model', () => {
test('<textarea>', () => { test('<textarea>', () => {
expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code) expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\") "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
@ -222,13 +222,13 @@ describe('ssr: v-model', () => {
test('<input :type="x">', () => { test('<input :type="x">', () => {
expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code) expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr(\\"type\\", _ctx.x) _ssrRenderAttr("type", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, null) _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
}></div>\`) }></div>\`)
@ -238,33 +238,33 @@ describe('ssr: v-model', () => {
expect( expect(
compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr(\\"type\\", _ctx.x) _ssrRenderAttr("type", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\") _ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
} value=\\"bar\\"></div>\`) } value="bar"></div>\`)
}" }"
`) `)
expect( expect(
compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\") "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttr(\\"type\\", _ctx.x) _ssrRenderAttr("type", _ctx.x)
}\${ }\${
_ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar) _ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
}\${ }\${
_ssrRenderAttr(\\"value\\", _ctx.bar) _ssrRenderAttr("value", _ctx.bar)
}></div>\`) }></div>\`)
}" }"
`) `)
@ -273,8 +273,8 @@ describe('ssr: v-model', () => {
test('<input v-bind="obj">', () => { test('<input v-bind="obj">', () => {
expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code) expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\") "const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\") const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
@ -291,8 +291,8 @@ describe('ssr: v-model', () => {
compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`) compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
.code .code
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\") "const { mergeProps: _mergeProps } = require("vue")
const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\") const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) { return function ssrRender(_ctx, _push, _parent, _attrs) {
let _temp0 let _temp0
@ -300,7 +300,7 @@ describe('ssr: v-model', () => {
_push(\`<div\${ _push(\`<div\${
_ssrRenderAttrs(_attrs) _ssrRenderAttrs(_attrs)
}><input\${ }><input\${
_ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo)))) _ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
}></div>\`) }></div>\`)
}" }"
`) `)

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

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

8
packages/runtime-core/__tests__/hydration.spec.ts
View File

@ -294,7 +294,7 @@ describe('SSR hydration', () => {
const teleportHtml = ctx.teleports!['#teleport2'] const teleportHtml = ctx.teleports!['#teleport2']
expect(teleportHtml).toMatchInlineSnapshot( expect(teleportHtml).toMatchInlineSnapshot(
'"<span>foo</span><span class=\\"foo\\"></span><!--teleport anchor--><span>foo2</span><span class=\\"foo2\\"></span><!--teleport anchor-->"' `"<span>foo</span><span class="foo"></span><!--teleport anchor--><span>foo2</span><span class="foo2"></span><!--teleport anchor-->"`
) )
teleportContainer.innerHTML = teleportHtml teleportContainer.innerHTML = teleportHtml
@ -331,7 +331,7 @@ describe('SSR hydration', () => {
msg.value = 'bar' msg.value = 'bar'
await nextTick() await nextTick()
expect(teleportContainer.innerHTML).toMatchInlineSnapshot( expect(teleportContainer.innerHTML).toMatchInlineSnapshot(
'"<span>bar</span><span class=\\"bar\\"></span><!--teleport anchor--><span>bar2</span><span class=\\"bar2\\"></span><!--teleport anchor-->"' `"<span>bar</span><span class="bar"></span><!--teleport anchor--><span>bar2</span><span class="bar2"></span><!--teleport anchor-->"`
) )
}) })
@ -354,7 +354,7 @@ describe('SSR hydration', () => {
const ctx: SSRContext = {} const ctx: SSRContext = {}
const mainHtml = await renderToString(h(Comp), ctx) const mainHtml = await renderToString(h(Comp), ctx)
expect(mainHtml).toMatchInlineSnapshot( expect(mainHtml).toMatchInlineSnapshot(
'"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class=\\"foo\\"></span><!--teleport end--><div class=\\"foo2\\">bar</div><!--]-->"' `"<!--[--><div>foo</div><!--teleport start--><span>foo</span><span class="foo"></span><!--teleport end--><div class="foo2">bar</div><!--]-->"`
) )
const teleportHtml = ctx.teleports!['#teleport3'] const teleportHtml = ctx.teleports!['#teleport3']
@ -393,7 +393,7 @@ describe('SSR hydration', () => {
msg.value = 'bar' msg.value = 'bar'
await nextTick() await nextTick()
expect(container.innerHTML).toMatchInlineSnapshot( expect(container.innerHTML).toMatchInlineSnapshot(
'"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class=\\"bar\\"></span><!--teleport end--><div class=\\"bar2\\">bar</div><!--]-->"' `"<!--[--><div>foo</div><!--teleport start--><span>bar</span><span class="bar"></span><!--teleport end--><div class="bar2">bar</div><!--]-->"`
) )
}) })

2
packages/sfc-playground/vite.config.ts
View File

@ -48,6 +48,8 @@ function copyVuePlugin(): Plugin {
}) })
} }
copyFile(`../vue/dist/vue.esm-browser.js`)
copyFile(`../vue/dist/vue.esm-browser.prod.js`)
copyFile(`../vue/dist/vue.runtime.esm-browser.js`) copyFile(`../vue/dist/vue.runtime.esm-browser.js`)
copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`) copyFile(`../vue/dist/vue.runtime.esm-browser.prod.js`)
copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`) copyFile(`../server-renderer/dist/server-renderer.esm-browser.js`)

34
packages/shared/__tests__/__snapshots__/codeframe.spec.ts.snap
View File

@ -1,62 +1,62 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`compiler: codeframe > line in middle 1`] = ` exports[`compiler: codeframe > line in middle 1`] = `
"2 | <template key=\\"one\\"></template> "2 | <template key="one"></template>
3 | <ul> 3 | <ul>
4 | <li v-for=\\"foobar\\">hi</li> 4 | <li v-for="foobar">hi</li>
| ^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^
5 | </ul> 5 | </ul>
6 | <template key=\\"two\\"></template>" 6 | <template key="two"></template>"
`; `;
exports[`compiler: codeframe > line near bottom 1`] = ` exports[`compiler: codeframe > line near bottom 1`] = `
"4 | <li v-for=\\"foobar\\">hi</li> "4 | <li v-for="foobar">hi</li>
5 | </ul> 5 | </ul>
6 | <template key=\\"two\\"></template> 6 | <template key="two"></template>
| ^^^^^^^^^ | ^^^^^^^^^
7 | </div>" 7 | </div>"
`; `;
exports[`compiler: codeframe > line near top 1`] = ` exports[`compiler: codeframe > line near top 1`] = `
"1 | <div> "1 | <div>
2 | <template key=\\"one\\"></template> 2 | <template key="one"></template>
| ^^^^^^^^^ | ^^^^^^^^^
3 | <ul> 3 | <ul>
4 | <li v-for=\\"foobar\\">hi</li>" 4 | <li v-for="foobar">hi</li>"
`; `;
exports[`compiler: codeframe > multi-line highlights 1`] = ` exports[`compiler: codeframe > multi-line highlights 1`] = `
"1 | <div attr=\\"some "1 | <div attr="some
| ^^^^^^^^^^ | ^^^^^^^^^^
2 | multiline 2 | multiline
| ^^^^^^^^^^^ | ^^^^^^^^^^^
3 | attr 3 | attr
| ^^^^ | ^^^^
4 | \\"> 4 | ">
| ^" | ^"
`; `;
exports[`compiler: codeframe > newline sequences - unix 1`] = ` exports[`compiler: codeframe > newline sequences - unix 1`] = `
"8 | <input name=\\"email\\" type=\\"text\\"/> "8 | <input name="email" type="text"/>
9 | </div> 9 | </div>
10 | <div id=\\"hook\\"> 10 | <div id="hook">
| ^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^
11 | <label for=\\"password\\">Password</label> 11 | <label for="password">Password</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input name=\\"password\\" type=\\"password\\"/> 12 | <input name="password" type="password"/>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | </div> 13 | </div>
| ^^^^^^^^^^^^" | ^^^^^^^^^^^^"
`; `;
exports[`compiler: codeframe > newline sequences - windows 1`] = ` exports[`compiler: codeframe > newline sequences - windows 1`] = `
"8 | <input name=\\"email\\" type=\\"text\\"/> "8 | <input name="email" type="text"/>
9 | </div> 9 | </div>
10 | <div id=\\"hook\\"> 10 | <div id="hook">
| ^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^
11 | <label for=\\"password\\">Password</label> 11 | <label for="password">Password</label>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | <input name=\\"password\\" type=\\"password\\"/> 12 | <input name="password" type="password"/>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | </div> 13 | </div>
| ^^^^^^^^^^^^" | ^^^^^^^^^^^^"

54
packages/shared/__tests__/toDisplayString.spec.ts
View File

@ -92,7 +92,7 @@ describe('toDisplayString', () => {
expect(toDisplayString(div)).toMatch('[object HTMLDivElement]') expect(toDisplayString(div)).toMatch('[object HTMLDivElement]')
expect(toDisplayString({ div })).toMatchInlineSnapshot(` expect(toDisplayString({ div })).toMatchInlineSnapshot(`
"{ "{
\\"div\\": \\"[object HTMLDivElement]\\" "div": "[object HTMLDivElement]"
}" }"
`) `)
}) })
@ -106,28 +106,28 @@ describe('toDisplayString', () => {
expect(toDisplayString(m)).toMatchInlineSnapshot(` expect(toDisplayString(m)).toMatchInlineSnapshot(`
"{ "{
\\"Map(2)\\": { "Map(2)": {
\\"1 =>\\": \\"foo\\", "1 =>": "foo",
\\"[object Object] =>\\": { "[object Object] =>": {
\\"foo\\": \\"bar\\", "foo": "bar",
\\"qux\\": 2 "qux": 2
} }
} }
}" }"
`) `)
expect(toDisplayString(s)).toMatchInlineSnapshot(` expect(toDisplayString(s)).toMatchInlineSnapshot(`
"{ "{
\\"Set(3)\\": [ "Set(3)": [
1, 1,
{ {
\\"foo\\": \\"bar\\" "foo": "bar"
}, },
{ {
\\"Map(2)\\": { "Map(2)": {
\\"1 =>\\": \\"foo\\", "1 =>": "foo",
\\"[object Object] =>\\": { "[object Object] =>": {
\\"foo\\": \\"bar\\", "foo": "bar",
\\"qux\\": 2 "qux": 2
} }
} }
} }
@ -142,27 +142,27 @@ describe('toDisplayString', () => {
}) })
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"{ "{
\\"m\\": { "m": {
\\"Map(2)\\": { "Map(2)": {
\\"1 =>\\": \\"foo\\", "1 =>": "foo",
\\"[object Object] =>\\": { "[object Object] =>": {
\\"foo\\": \\"bar\\", "foo": "bar",
\\"qux\\": 2 "qux": 2
} }
} }
}, },
\\"s\\": { "s": {
\\"Set(3)\\": [ "Set(3)": [
1, 1,
{ {
\\"foo\\": \\"bar\\" "foo": "bar"
}, },
{ {
\\"Map(2)\\": { "Map(2)": {
\\"1 =>\\": \\"foo\\", "1 =>": "foo",
\\"[object Object] =>\\": { "[object Object] =>": {
\\"foo\\": \\"bar\\", "foo": "bar",
\\"qux\\": 2 "qux": 2
} }
} }
} }

2
packages/vue-compat/__tests__/componentFunctional.spec.ts
View File

@ -52,7 +52,7 @@ describe('COMPONENT_FUNCTIONAL', () => {
expect(vm.$el.querySelector('.inject').textContent).toBe('123') expect(vm.$el.querySelector('.inject').textContent).toBe('123')
expect(vm.$el.querySelector('.slot').textContent).toBe('hello') expect(vm.$el.querySelector('.slot').textContent).toBe('hello')
expect(vm.$el.outerHTML).toMatchInlineSnapshot( expect(vm.$el.outerHTML).toMatchInlineSnapshot(
'"<div id=\\"foo\\" class=\\"foo\\"><div class=\\"inject\\">123</div><div class=\\"slot\\">hello</div></div>"' `"<div id="foo" class="foo"><div class="inject">123</div><div class="slot">hello</div></div>"`
) )
expect( expect(

127
pnpm-lock.yaml
View File

@ -49,7 +49,7 @@ importers:
version: 6.13.0(eslint@8.54.0)(typescript@5.2.2) version: 6.13.0(eslint@8.54.0)(typescript@5.2.2)
'@vitest/coverage-istanbul': '@vitest/coverage-istanbul':
specifier: ^0.34.6 specifier: ^0.34.6
version: 0.34.6(vitest@0.34.6) version: 0.34.6(vitest@1.0.1)
'@vue/consolidate': '@vue/consolidate':
specifier: 0.17.3 specifier: 0.17.3
version: 0.17.3 version: 0.17.3
@ -162,8 +162,8 @@ importers:
specifier: ^5.0.0 specifier: ^5.0.0
version: 5.0.0(@types/node@20.10.3)(terser@5.22.0) version: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
vitest: vitest:
specifier: ^0.34.6 specifier: ^1.0.0
version: 0.34.6(jsdom@22.1.0)(terser@5.22.0) version: 1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0)
packages/compiler-core: packages/compiler-core:
dependencies: dependencies:
@ -1518,16 +1518,6 @@ packages:
resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==} resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
dev: true dev: true
/@types/chai-subset@1.3.4:
resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
dependencies:
'@types/chai': 4.3.9
dev: true
/@types/chai@4.3.9:
resolution: {integrity: sha512-69TtiDzu0bcmKQv3yg1Zx409/Kd7r0b5F1PfpYJfSHzLGtB53547V4u+9iqKYsTu/O2ai6KTb0TInNpvuQ3qmg==}
dev: true
/@types/estree@1.0.3: /@types/estree@1.0.3:
resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==} resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
dev: true dev: true
@ -1710,7 +1700,7 @@ packages:
vue: link:packages/vue vue: link:packages/vue
dev: true dev: true
/@vitest/coverage-istanbul@0.34.6(vitest@0.34.6): /@vitest/coverage-istanbul@0.34.6(vitest@1.0.1):
resolution: {integrity: sha512-5KaBNZPDSk2ybavC3rZ1pWGniw7sJ5usuwVGRUYzJwiBfWvnLpuUer7bjw7qUCRGdKJXrBgb/Dsgif9rkwMX/A==} resolution: {integrity: sha512-5KaBNZPDSk2ybavC3rZ1pWGniw7sJ5usuwVGRUYzJwiBfWvnLpuUer7bjw7qUCRGdKJXrBgb/Dsgif9rkwMX/A==}
peerDependencies: peerDependencies:
vitest: '>=0.32.0 <1' vitest: '>=0.32.0 <1'
@ -1722,43 +1712,43 @@ packages:
istanbul-reports: 3.1.6 istanbul-reports: 3.1.6
picocolors: 1.0.0 picocolors: 1.0.0
test-exclude: 6.0.0 test-exclude: 6.0.0
vitest: 0.34.6(jsdom@22.1.0)(terser@5.22.0) vitest: 1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
/@vitest/expect@0.34.6: /@vitest/expect@1.0.1:
resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==} resolution: {integrity: sha512-3cdrb/eKD/0tygDX75YscuHEHMUJ70u3UoLSq2eqhWks57AyzvsDQbyn53IhZ0tBN7gA8Jj2VhXiOV2lef7thw==}
dependencies: dependencies:
'@vitest/spy': 0.34.6 '@vitest/spy': 1.0.1
'@vitest/utils': 0.34.6 '@vitest/utils': 1.0.1
chai: 4.3.10 chai: 4.3.10
dev: true dev: true
/@vitest/runner@0.34.6: /@vitest/runner@1.0.1:
resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==} resolution: {integrity: sha512-/+z0vhJ0MfRPT3AyTvAK6m57rzlew/ct8B2a4LMv7NhpPaiI2QLGyOBMB3lcioWdJHjRuLi9aYppfOv0B5aRQA==}
dependencies: dependencies:
'@vitest/utils': 0.34.6 '@vitest/utils': 1.0.1
p-limit: 4.0.0 p-limit: 5.0.0
pathe: 1.1.1 pathe: 1.1.1
dev: true dev: true
/@vitest/snapshot@0.34.6: /@vitest/snapshot@1.0.1:
resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==} resolution: {integrity: sha512-wIPtPDGSxEZ+DpNMc94AsybX6LV6uN6sosf5TojyP1m2QbKwiRuLV/5RSsjt1oWViHsTj8mlcwrQQ1zHGO0fMw==}
dependencies: dependencies:
magic-string: 0.30.5 magic-string: 0.30.5
pathe: 1.1.1 pathe: 1.1.1
pretty-format: 29.7.0 pretty-format: 29.7.0
dev: true dev: true
/@vitest/spy@0.34.6: /@vitest/spy@1.0.1:
resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==} resolution: {integrity: sha512-yXwm1uKhBVr/5MhVeSmtNqK+0q2RXIchJt8kokEKdrWLtkPeDgdbZ6SjR1VQGZuNdWL6sSBnLayIyVvcS0qLfA==}
dependencies: dependencies:
tinyspy: 2.2.0 tinyspy: 2.2.0
dev: true dev: true
/@vitest/utils@0.34.6: /@vitest/utils@1.0.1:
resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==} resolution: {integrity: sha512-MGPCHkzXbbAyscrhwGzh8uP1HPrTYLWaj1WTDtWSGrpe2yJWLRN9mF9ooKawr6NMOg9vTBtg2JqWLfuLC7Dknw==}
dependencies: dependencies:
diff-sequences: 29.6.3 diff-sequences: 29.6.3
loupe: 2.3.7 loupe: 2.3.7
@ -1806,8 +1796,8 @@ packages:
acorn: 8.10.0 acorn: 8.10.0
dev: true dev: true
/acorn-walk@8.2.0: /acorn-walk@8.3.0:
resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} resolution: {integrity: sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
dev: true dev: true
@ -4096,9 +4086,12 @@ packages:
engines: {node: '>= 12.13.0'} engines: {node: '>= 12.13.0'}
dev: true dev: true
/local-pkg@0.4.3: /local-pkg@0.5.0:
resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==} resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
engines: {node: '>=14'} engines: {node: '>=14'}
dependencies:
mlly: 1.4.2
pkg-types: 1.0.3
dev: true dev: true
/locate-path@6.0.0: /locate-path@6.0.0:
@ -4491,6 +4484,13 @@ packages:
yocto-queue: 1.0.0 yocto-queue: 1.0.0
dev: true dev: true
/p-limit@5.0.0:
resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
engines: {node: '>=18'}
dependencies:
yocto-queue: 1.0.0
dev: true
/p-locate@5.0.0: /p-locate@5.0.0:
resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
engines: {node: '>=10'} engines: {node: '>=10'}
@ -5499,8 +5499,8 @@ packages:
resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
dev: true dev: true
/std-env@3.4.3: /std-env@3.6.0:
resolution: {integrity: sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==} resolution: {integrity: sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==}
dev: true dev: true
/streamx@2.15.1: /streamx@2.15.1:
@ -5710,8 +5710,8 @@ packages:
resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==} resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
dev: true dev: true
/tinypool@0.7.0: /tinypool@0.8.1:
resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==} resolution: {integrity: sha512-zBTCK0cCgRROxvs9c0CGK838sPkeokNGdQVUUwHAbynHFlmyJYj825f/oRs528HaIJ97lo0pLIlDUzwN+IorWg==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
dev: true dev: true
@ -5971,14 +5971,13 @@ packages:
engines: {node: '>= 0.8'} engines: {node: '>= 0.8'}
dev: true dev: true
/vite-node@0.34.6(@types/node@20.10.3)(terser@5.22.0): /vite-node@1.0.1(@types/node@20.10.3)(terser@5.22.0):
resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==} resolution: {integrity: sha512-Y2Jnz4cr2azsOMMYuVPrQkp3KMnS/0WV8ezZjCy4hU7O5mUHCAVOnFmoEvs1nvix/4mYm74Len8bYRWZJMNP6g==}
engines: {node: '>=v14.18.0'} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
dependencies: dependencies:
cac: 6.7.14 cac: 6.7.14
debug: 4.3.4 debug: 4.3.4
mlly: 1.4.2
pathe: 1.1.1 pathe: 1.1.1
picocolors: 1.0.0 picocolors: 1.0.0
vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0) vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
@ -6030,22 +6029,22 @@ packages:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true dev: true
/vitest@0.34.6(jsdom@22.1.0)(terser@5.22.0): /vitest@1.0.1(@types/node@20.10.3)(jsdom@22.1.0)(terser@5.22.0):
resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==} resolution: {integrity: sha512-MHsOj079S28hDsvdDvyD1pRj4dcS51EC5Vbe0xvOYX+WryP8soiK2dm8oULi+oA/8Xa/h6GoJEMTmcmBy5YM+Q==}
engines: {node: '>=v14.18.0'} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
'@edge-runtime/vm': '*' '@edge-runtime/vm': '*'
'@vitest/browser': '*' '@types/node': ^18.0.0 || >=20.0.0
'@vitest/ui': '*' '@vitest/browser': ^1.0.0
'@vitest/ui': ^1.0.0
happy-dom: '*' happy-dom: '*'
jsdom: '*' jsdom: '*'
playwright: '*'
safaridriver: '*'
webdriverio: '*'
peerDependenciesMeta: peerDependenciesMeta:
'@edge-runtime/vm': '@edge-runtime/vm':
optional: true optional: true
'@types/node':
optional: true
'@vitest/browser': '@vitest/browser':
optional: true optional: true
'@vitest/ui': '@vitest/ui':
@ -6054,37 +6053,29 @@ packages:
optional: true optional: true
jsdom: jsdom:
optional: true optional: true
playwright:
optional: true
safaridriver:
optional: true
webdriverio:
optional: true
dependencies: dependencies:
'@types/chai': 4.3.9
'@types/chai-subset': 1.3.4
'@types/node': 20.10.3 '@types/node': 20.10.3
'@vitest/expect': 0.34.6 '@vitest/expect': 1.0.1
'@vitest/runner': 0.34.6 '@vitest/runner': 1.0.1
'@vitest/snapshot': 0.34.6 '@vitest/snapshot': 1.0.1
'@vitest/spy': 0.34.6 '@vitest/spy': 1.0.1
'@vitest/utils': 0.34.6 '@vitest/utils': 1.0.1
acorn: 8.10.0 acorn-walk: 8.3.0
acorn-walk: 8.2.0
cac: 6.7.14 cac: 6.7.14
chai: 4.3.10 chai: 4.3.10
debug: 4.3.4 debug: 4.3.4
execa: 8.0.1
jsdom: 22.1.0 jsdom: 22.1.0
local-pkg: 0.4.3 local-pkg: 0.5.0
magic-string: 0.30.5 magic-string: 0.30.5
pathe: 1.1.1 pathe: 1.1.1
picocolors: 1.0.0 picocolors: 1.0.0
std-env: 3.4.3 std-env: 3.6.0
strip-literal: 1.3.0 strip-literal: 1.3.0
tinybench: 2.5.1 tinybench: 2.5.1
tinypool: 0.7.0 tinypool: 0.8.1
vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0) vite: 5.0.0(@types/node@20.10.3)(terser@5.22.0)
vite-node: 0.34.6(@types/node@20.10.3)(terser@5.22.0) vite-node: 1.0.1(@types/node@20.10.3)(terser@5.22.0)
why-is-node-running: 2.2.2 why-is-node-running: 2.2.2
transitivePeerDependencies: transitivePeerDependencies:
- less - less