",
"start": {
@@ -7092,7 +7092,7 @@ exports[`compiler: parse > valid html 1`] = `
"line": 1,
"offset": 33,
},
- "source": ":class=\\"{ some: condition }\\"",
+ "source": ":class="{ some: condition }"",
"start": {
"column": 6,
"line": 1,
@@ -7121,8 +7121,8 @@ exports[`compiler: parse > valid html 1`] = `
"line": 4,
"offset": 123,
},
- "source": "
-
+ "source": "
",
"start": {
diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index b8cbf4a8773..445d3fd13ed 100644
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -1,14 +1,14 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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 _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */))
-const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */))
+const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)
+const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))
+const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))
export function render(_ctx, _cache) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
_hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2
@@ -17,14 +17,14 @@ export function render(_ctx, _cache) {
`;
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) {
- const _component_Child = _resolveComponent(\\"Child\\")
+ const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, {
default: _withCtx(() => [
- _createElementVNode(\\"div\\")
+ _createElementVNode("div")
]),
_: 1 /* STABLE */
}))
@@ -32,26 +32,26 @@ export function render(_ctx, _cache) {
`;
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) {
- const _component_Child = _resolveComponent(\\"Child\\")
+ const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
- name: \\"foo\\",
+ name: "foo",
fn: _withCtx(() => [
- _createElementVNode(\\"div\\")
+ _createElementVNode("div")
]),
- key: \\"0\\"
+ key: "0"
}
: undefined,
_renderList(_ctx.list, (i) => {
return {
name: i,
fn: _withCtx(() => [
- _createElementVNode(\\"div\\")
+ _createElementVNode("div")
])
}
})
@@ -60,17 +60,17 @@ export function render(_ctx, _cache) {
`;
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) {
- const _component_Child = _resolveComponent(\\"Child\\")
+ const _component_Child = _resolveComponent("Child")
return (_openBlock(), _createBlock(_component_Child, null, {
foo: _withCtx(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]),
bar: _withCtx(() => [
- _createElementVNode(\\"div\\")
+ _createElementVNode("div")
]),
_: 1 /* STABLE */
}))
diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts
index 802df84b35b..cfb4162e073 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -631,7 +631,7 @@ describe('compiler: codegen', () => {
test('tag only', () => {
expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
- "return _createElementVNode(\\"div\\")
+ "return _createElementVNode("div")
"
`)
expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@@ -643,7 +643,7 @@ describe('compiler: codegen', () => {
test('with props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
.toMatchInlineSnapshot(`
- "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
+ "return _createElementVNode("div", { foo: "bar" })
"
`)
})
@@ -651,7 +651,7 @@ describe('compiler: codegen', () => {
test('with children, no props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
.toMatchInlineSnapshot(`
- "return _createElementVNode(\\"div\\", null, children)
+ "return _createElementVNode("div", null, children)
"
`)
})
@@ -659,7 +659,7 @@ describe('compiler: codegen', () => {
test('with children + props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
.toMatchInlineSnapshot(`
- "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
+ "return _createElementVNode("div", { foo: "bar" }, children)
"
`)
})
@@ -667,7 +667,7 @@ describe('compiler: codegen', () => {
test('with patchFlag and no children/props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
.toMatchInlineSnapshot(`
- "return _createElementVNode(\\"div\\", null, null, 1)
+ "return _createElementVNode("div", null, null, 1)
"
`)
})
@@ -687,7 +687,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
- "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+ "return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
"
`)
})
@@ -708,7 +708,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
- "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+ "return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
"
`)
})
@@ -727,7 +727,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
- "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+ "return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
[foo, bar]
])
"
@@ -749,7 +749,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
- "return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
+ "return _withDirectives((_openBlock(), _createElementBlock("div", { foo: "bar" }, children)), [
[foo, bar]
])
"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index e67694a9bf9..ef3e2b8f4d6 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
"const _Vue = 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 = [
_hoisted_1
]
@@ -13,7 +13,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
- /*#__PURE__*/_createElementVNode(\\"span\\"),
- /*#__PURE__*/_createElementVNode(\\"span\\")
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, [
+ /*#__PURE__*/_createElementVNode("span"),
+ /*#__PURE__*/_createElementVNode("span")
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
@@ -34,7 +34,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
- /*#__PURE__*/_createCommentVNode(\\"comment\\")
+const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
+ /*#__PURE__*/_createCommentVNode("comment")
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
@@ -54,7 +54,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", 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_3 = [
_hoisted_1,
_hoisted_2
@@ -74,7 +74,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { 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 = [
_hoisted_1
]
@@ -92,7 +92,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
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, [
- _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
+ return (_openBlock(), _createElementBlock("div", null, [
+ _withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
[_directive_foo]
])
]))
@@ -122,14 +122,14 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
+ return (_openBlock(), _createElementBlock("div", null, [
+ _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 { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = { id: \\"foo\\" }
+const _hoisted_1 = { id: "foo" }
return function render(_ctx, _cache) {
with (_ctx) {
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, [
- _createElementVNode(\\"div\\", _hoisted_1, [
+ return (_openBlock(), _createElementBlock("div", null, [
+ _createElementVNode("div", _hoisted_1, [
_createVNode(_component_Comp)
])
]))
@@ -168,8 +168,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
+ return (_openBlock(), _createElementBlock("div", null, [
+ _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 { 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 = [
_hoisted_1
]
@@ -188,7 +188,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { 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 = [
_hoisted_1
]
@@ -206,7 +206,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { 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 = [
_hoisted_1
]
@@ -224,10 +224,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
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, [
- _withDirectives((_openBlock(), _createElementBlock(\\"svg\\", null, _hoisted_2)), [
+ return (_openBlock(), _createElementBlock("div", null, [
+ _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
[_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`] = `
-"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) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"div\\", null, [
- _createElementVNode(\\"div\\", {
+ return (_openBlock(), _createElementBlock("div", null, [
+ _createElementVNode("div", null, [
+ _createElementVNode("div", {
class: _normalizeClass({}),
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`] = `
-"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) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"div\\", null, [
- _createElementVNode(\\"div\\", {
+ return (_openBlock(), _createElementBlock("div", null, [
+ _createElementVNode("div", null, [
+ _createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.foo && _ctx.foo(...args)))
})
])
@@ -271,10 +271,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
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) => {
- return (_openBlock(), _createElementBlock(\\"p\\", null, [
- _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
+ return (_openBlock(), _createElementBlock("p", null, [
+ _createElementVNode("span", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
]))
@@ -289,7 +289,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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, {
default: _withCtx(({ foo }) => [
@@ -308,10 +308,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
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) => {
- return (_openBlock(), _createElementBlock(\\"p\\", null, [
- _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
+ return (_openBlock(), _createElementBlock("p", null, [
+ _createElementVNode("span", null, _toDisplayString(o), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
]))
@@ -326,9 +326,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
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) => {
- return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+ return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */))
]))
}
@@ -342,9 +342,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
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)
]))
}
@@ -358,8 +358,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
+ return (_openBlock(), _createElementBlock("div", null, [
+ (_openBlock(), _createElementBlock("div", { key: foo }))
]))
}
}"
@@ -369,14 +369,14 @@ exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = [\\"id\\"]
+const _hoisted_1 = ["id"]
return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
+ return (_openBlock(), _createElementBlock("div", null, [
+ _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
]))
}
}"
@@ -389,8 +389,8 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
+ return (_openBlock(), _createElementBlock("div", null, [
+ _createElementVNode("div", { ref: foo }, null, 512 /* NEED_PATCH */)
]))
}
}"
@@ -403,7 +403,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 { createElementVNode: _createElementVNode } = _Vue
-const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_1 = { id: "foo" }
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
const _hoisted_3 = [
_hoisted_2
]
@@ -422,9 +422,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
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) => {
- return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
+ return (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
@@ -437,9 +437,9 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
const _hoisted_1 = {
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 = [
_hoisted_2
]
@@ -448,10 +448,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
ok
- ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
- : _createCommentVNode(\\"v-if\\", true)
+ ? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
+ : _createCommentVNode("v-if", true)
]))
}
}"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
index c72e0229832..0bc427b979f 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformExpressions.spec.ts.snap
@@ -2,7 +2,7 @@
exports[`compiler: expression transform > bindingMetadata > inline mode 1`] = `
"(_ctx, _cache) => {
- return (_openBlock(), _createElementBlock(\\"div\\", null, _toDisplayString(__props.props) + \\" \\" + _toDisplayString(_unref(setup)) + \\" \\" + _toDisplayString(setupConst) + \\" \\" + _toDisplayString(_ctx.data) + \\" \\" + _toDisplayString(_ctx.options), 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,6 +10,48 @@ exports[`compiler: expression transform > bindingMetadata > non-inline mode 1`]
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
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), 1 /* TEXT */))
+ return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for loop 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+ return (_openBlock(), _createElementBlock("div", {
+ onClick: () => {
+ for (let i = 0; i < _ctx.list.length; i++) {
+ _ctx.log(i)
+ }
+ }
+ }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...in 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+ return (_openBlock(), _createElementBlock("div", {
+ onClick: () => {
+ for (const x in _ctx.list) {
+ _ctx.log(x)
+ }
+ }
+ }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...of 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+ return (_openBlock(), _createElementBlock("div", {
+ onClick: () => {
+ for (const x of _ctx.list) {
+ _ctx.log(x)
+ }
+ }
+ }, null, 8 /* PROPS */, ["onClick"]))
}"
`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 8e716acb83e..7fb49ea7887 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
- _createTextVNode(\\"foo\\")
+ _createTextVNode("foo")
], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
@@ -23,7 +23,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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
return (_openBlock(), _createElementBlock(_Fragment, null, [
- _createElementVNode(\\"div\\"),
- _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
- _createElementVNode(\\"div\\")
+ _createElementVNode("div"),
+ _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+ _createElementVNode("div")
], 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
return (_openBlock(), _createElementBlock(_Fragment, null, [
- _createElementVNode(\\"div\\"),
- _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
- _createElementVNode(\\"div\\"),
- _createTextVNode(\\"hello\\"),
- _createElementVNode(\\"div\\")
+ _createElementVNode("div"),
+ _createTextVNode(_toDisplayString(foo) + " bar " + _toDisplayString(baz), 1 /* TEXT */),
+ _createElementVNode("div"),
+ _createTextVNode("hello"),
+ _createElementVNode("div")
], 64 /* STABLE_FRAGMENT */))
}
}"
@@ -69,9 +69,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 */)
])), [
[_directive_foo]
@@ -100,9 +100,9 @@ return function render(_ctx, _cache) {
const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
- _createElementVNode(\\"div\\"),
- _createTextVNode(\\"hello\\"),
- _createElementVNode(\\"div\\")
+ _createElementVNode("div"),
+ _createTextVNode("hello"),
+ _createElementVNode("div")
], 64 /* STABLE_FRAGMENT */))
}
}"
@@ -112,6 +112,6 @@ exports[`compiler: transform text > with prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString } = Vue
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)
}"
`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 2c38177f11a..3da778eb675 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
- return (_openBlock(), _createElementBlock(\\"span\\"))
+ return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -23,8 +23,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
- \\"hello\\",
- _createElementVNode(\\"span\\")
+ "hello",
+ _createElementVNode("span")
], 64 /* STABLE_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */))
}
@@ -39,7 +39,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
- return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
+ return (_openBlock(), _createElementBlock("span", { key: item }))
}), 128 /* KEYED_FRAGMENT */))
}
}"
@@ -53,7 +53,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
- return (_openBlock(), _createElementBlock(\\"span\\"))
+ return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -67,7 +67,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
- return (_openBlock(), _createElementBlock(\\"span\\"))
+ return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -81,7 +81,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
- return (_openBlock(), _createElementBlock(\\"span\\"))
+ return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -96,8 +96,8 @@ return function render(_ctx, _cache) {
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
- \\"hello\\",
- _createElementVNode(\\"span\\")
+ "hello",
+ _createElementVNode("span")
], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
@@ -112,10 +112,10 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
- return (_openBlock(), _createElementBlock(\\"span\\", {
+ return (_openBlock(), _createElementBlock("span", {
key: item.id,
id: item.id
- }, null, 8 /* PROPS */, [\\"id\\"]))
+ }, null, 8 /* PROPS */, ["id"]))
}), 128 /* KEYED_FRAGMENT */))
}
}"
@@ -129,7 +129,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
- return _renderSlot($slots, \\"default\\")
+ return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -143,7 +143,7 @@ return function render(_ctx, _cache) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
- return _renderSlot($slots, \\"default\\")
+ return _renderSlot($slots, "default")
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
@@ -156,10 +156,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
+ return _withDirectives((_openBlock(), _createElementBlock("div", null, null, 512 /* NEED_PATCH */)), [
[_directive_foo]
])
}), 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
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 */))
}
}"
@@ -190,9 +190,9 @@ return function render(_ctx, _cache) {
return ok
? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
- return (_openBlock(), _createElementBlock(\\"div\\"))
+ return (_openBlock(), _createElementBlock("div"))
}), 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) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_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
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
- return (_openBlock(), _createElementBlock(\\"span\\"))
+ return (_openBlock(), _createElementBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 4da71c3ea5b..65ee73c46f4 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -8,8 +8,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
- : _createCommentVNode(\\"v-if\\", true)
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+ : _createCommentVNode("v-if", true)
}
}"
`;
@@ -23,13 +23,13 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
- : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+ : (_openBlock(), _createElementBlock("p", { key: 1 })),
another
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
+ ? (_openBlock(), _createElementBlock("div", { key: 2 }))
: orNot
- ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
- : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
+ ? (_openBlock(), _createElementBlock("p", { key: 3 }))
+ : (_openBlock(), _createElementBlock("p", { key: 4 }))
], 64 /* STABLE_FRAGMENT */))
}
}"
@@ -44,11 +44,11 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
- : _createCommentVNode(\\"v-if\\", true),
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+ : _createCommentVNode("v-if", true),
orNot
- ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
- : _createCommentVNode(\\"v-if\\", true)
+ ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+ : _createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
}
}"
@@ -63,11 +63,11 @@ return function render(_ctx, _cache) {
return ok
? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
- _createElementVNode(\\"div\\"),
- \\"hello\\",
- _createElementVNode(\\"p\\")
+ _createElementVNode("div"),
+ "hello",
+ _createElementVNode("p")
], 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
return ok
- ? _renderSlot($slots, \\"default\\", { key: 0 })
- : _createCommentVNode(\\"v-if\\", true)
+ ? _renderSlot($slots, "default", { key: 0 })
+ : _createCommentVNode("v-if", true)
}
}"
`;
@@ -94,8 +94,8 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
- : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
+ : (_openBlock(), _createElementBlock("p", { key: 1 }))
}
}"
`;
@@ -108,10 +108,10 @@ return function render(_ctx, _cache) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot
- ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
- : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
+ ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+ : (_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
return ok
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }))
: orNot
- ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
- : _createCommentVNode(\\"v-if\\", true)
+ ? (_openBlock(), _createElementBlock("p", { key: 1 }))
+ : _createCommentVNode("v-if", true)
}
}"
`;
@@ -140,8 +140,8 @@ return function render(_ctx, _cache) {
const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
return ok
- ? _renderSlot($slots, \\"default\\", { key: 0 })
- : _createCommentVNode(\\"v-if\\", true)
+ ? _renderSlot($slots, "default", { key: 0 })
+ : _createCommentVNode("v-if", true)
}
}"
`;
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
index 844cd27870b..220bc177418 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vMemo.spec.ts.snap
@@ -1,44 +1,44 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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) {
- 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)
]))
}"
`;
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) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
- _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\")), _cache, 0)
+ return (_openBlock(), _createElementBlock("div", null, [
+ _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div")), _cache, 0)
]))
}"
`;
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) {
- 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`] = `
-"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) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z])
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
return _item
}, _cache, 0), 128 /* KEYED_FRAGMENT */))
@@ -47,15 +47,15 @@ export function render(_ctx, _cache) {
`;
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) {
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, ({ x, y }, __, ___, _cached) => {
const _memo = ([x, y === _ctx.z])
if (_cached && _cached.key === x && _isMemoSame(_cached, _memo)) return _cached
- const _item = (_openBlock(), _createElementBlock(\\"div\\", { key: x }, [
- _createElementVNode(\\"span\\", null, \\"foobar\\")
+ const _item = (_openBlock(), _createElementBlock("div", { key: x }, [
+ _createElementVNode("span", null, "foobar")
]))
_item.memo = _memo
return _item
@@ -65,16 +65,16 @@ export function render(_ctx, _cache) {
`;
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) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
(_ctx.ok)
- ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, [
- _createElementVNode(\\"span\\", null, \\"foo\\"),
- _createTextVNode(\\"bar\\")
+ ? _withMemo([_ctx.x], () => (_openBlock(), _createElementBlock("div", { key: 0 }, [
+ _createElementVNode("span", null, "foo"),
+ _createTextVNode("bar")
])), _cache, 0)
: _withMemo([_ctx.x], () => (_openBlock(), _createBlock(_component_Comp, { key: 1 })), _cache, 1)
]))
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index e59df2d5458..17c4e80b160 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -1,13 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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) {
- return (_openBlock(), _createElementBlock(\\"input\\", {
+ return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model[_ctx.index],
- \\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+ "onUpdate:modelValue": $event => ((_ctx.model[_ctx.index]) = $event)
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}"
`;
@@ -18,10 +18,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"input\\", {
+ return (_openBlock(), _createElementBlock("input", {
modelValue: model[index],
- \\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+ "onUpdate:modelValue": $event => ((model[index]) = $event)
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
@@ -33,30 +33,30 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"input\\", {
+ return (_openBlock(), _createElementBlock("input", {
modelValue:
model
.
foo
,
- \\"onUpdate:modelValue\\": $event => ((
+ "onUpdate:modelValue": $event => ((
model
.
foo
) = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
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) {
- return (_openBlock(), _createElementBlock(\\"input\\", {
+ return (_openBlock(), _createElementBlock("input", {
modelValue: _ctx.model,
- \\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+ "onUpdate:modelValue": $event => ((_ctx.model) = $event)
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}"
`;
@@ -67,10 +67,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"input\\", {
+ return (_openBlock(), _createElementBlock("input", {
modelValue: model,
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))
}
}"
`;
@@ -82,21 +82,21 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"input\\", {
- \\"foo-value\\": model,
- \\"onUpdate:fooValue\\": $event => ((model) = $event)
- }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"foo-value\\", \\"onUpdate:fooValue\\"]))
+ return (_openBlock(), _createElementBlock("input", {
+ "foo-value": model,
+ "onUpdate:fooValue": $event => ((model) = $event)
+ }, null, 40 /* PROPS, NEED_HYDRATION */, ["foo-value", "onUpdate:fooValue"]))
}
}"
`;
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) {
- return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+ return (_openBlock(), _createElementBlock("input", _normalizeProps({
[_ctx.value]: _ctx.model,
- [\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
+ ["onUpdate:" + _ctx.value]: $event => ((_ctx.model) = $event)
}), null, 16 /* FULL_PROPS */))
}"
`;
@@ -108,9 +108,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
+ return (_openBlock(), _createElementBlock("input", _normalizeProps({
[value]: model,
- [\\"onUpdate:\\" + value]: $event => ((model) = $event)
+ ["onUpdate:" + value]: $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */))
}
}"
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 1246c47fc64..1c1203552db 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return _cache[0] || (
_setBlockTracking(-1),
- _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+ _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1),
_cache[0]
)
@@ -24,12 +24,12 @@ return function render(_ctx, _cache) {
with (_ctx) {
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] || (
_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),
_cache[0]
)
@@ -45,10 +45,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
- _cache[0] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
+ _cache[0] = _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, ["id"]),
_setBlockTracking(1),
_cache[0]
)
@@ -64,10 +64,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
- _cache[0] = _renderSlot($slots, \\"default\\"),
+ _cache[0] = _renderSlot($slots, "default"),
_setBlockTracking(1),
_cache[0]
)
@@ -83,10 +83,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return (_openBlock(), _createElementBlock(\\"div\\", null, [
+ return (_openBlock(), _createElementBlock("div", null, [
_cache[0] || (
_setBlockTracking(-1),
- _cache[0] = _createElementVNode(\\"div\\"),
+ _cache[0] = _createElementVNode("div"),
_setBlockTracking(1),
_cache[0]
)
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index 0c8e061f9ef..0d9c0e743de 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
[_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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [
- _createElementVNode(\\"div\\")
+ _createElementVNode("div")
]),
_: 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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
_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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
- name: \\"one\\",
+ name: "one",
fn: _withCtx((props) => [_toDisplayString(props)]),
- key: \\"0\\"
+ key: "0"
}
: undefined
]), 1024 /* DYNAMIC_SLOTS */))
@@ -71,25 +71,25 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 */ }, [
ok
? {
- name: \\"one\\",
- fn: _withCtx(() => [\\"foo\\"]),
- key: \\"0\\"
+ name: "one",
+ fn: _withCtx(() => ["foo"]),
+ key: "0"
}
: orNot
? {
- name: \\"two\\",
- fn: _withCtx((props) => [\\"bar\\"]),
- key: \\"1\\"
+ name: "two",
+ fn: _withCtx((props) => ["bar"]),
+ key: "1"
}
: {
- name: \\"one\\",
- fn: _withCtx(() => [\\"baz\\"]),
- key: \\"2\\"
+ name: "one",
+ fn: _withCtx(() => ["baz"]),
+ key: "2"
}
]), 1024 /* DYNAMIC_SLOTS */))
}
@@ -103,14 +103,14 @@ return function render(_ctx, _cache) {
with (_ctx) {
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 */ }, [
ok
? {
- name: \\"one\\",
- fn: _withCtx(() => [\\"hello\\"]),
- key: \\"0\\"
+ name: "one",
+ fn: _withCtx(() => ["hello"]),
+ key: "0"
}
: undefined
]), 1024 /* DYNAMIC_SLOTS */))
@@ -125,13 +125,13 @@ return function render(_ctx, _cache) {
with (_ctx) {
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, {
- one: _withCtx(() => [\\"foo\\"]),
+ one: _withCtx(() => ["foo"]),
default: _withCtx(() => [
- \\"bar\\",
- _createElementVNode(\\"span\\")
+ "bar",
+ _createElementVNode("span")
]),
_: 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
return function render(_ctx, _cache) {
- const _component_Inner = _resolveComponent(\\"Inner\\")
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Inner = _resolveComponent("Inner")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [
@@ -152,7 +152,7 @@ return function render(_ctx, _cache) {
default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */),
- \\" \\",
+ " ",
_toDisplayString(foo),
_toDisplayString(_ctx.bar),
_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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
[_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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
- header: _withCtx(() => [\\" Header \\"]),
+ header: _withCtx(() => [" Header "]),
default: _withCtx(() => [
- \\" \\",
- _createElementVNode(\\"p\\")
+ " ",
+ _createElementVNode("p")
]),
_: 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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
- header: _withCtx(() => [\\" Header \\"]),
- default: _withCtx(() => [\\" Default \\"]),
+ header: _withCtx(() => [" Header "]),
+ default: _withCtx(() => [" Default "]),
_: 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
return function render(_ctx, _cache) {
- const _component_Comp = _resolveComponent(\\"Comp\\")
+ const _component_Comp = _resolveComponent("Comp")
return (_openBlock(), _createBlock(_component_Comp, null, {
- header: _withCtx(() => [\\" Header \\"]),
- footer: _withCtx(() => [\\" Footer \\"]),
+ header: _withCtx(() => [" Header "]),
+ footer: _withCtx(() => [" Footer "]),
_: 1 /* STABLE */
}))
}"
diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
index eec5a76d363..49ad7ad8982 100644
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
@@ -593,5 +593,17 @@ describe('compiler: hoistStatic transform', () => {
expect(root.hoists.length).toBe(2)
expect(generate(root).code).toMatchSnapshot()
})
+
+ test('clone hoisted array children in HMR mode', () => {
+ const root = transformWithHoist(`
`, {
+ hmr: true
+ })
+ expect(root.hoists.length).toBe(2)
+ expect(root.codegenNode).toMatchObject({
+ children: {
+ content: '[..._hoisted_2]'
+ }
+ })
+ })
})
})
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index a1ae013a830..678d01cbc7d 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -152,6 +152,28 @@ describe('compiler: element transform', () => {
expect(node.tag).toBe(`Foo.Example`)
})
+ test('resolve namespaced component from props bindings (inline)', () => {
+ const { root, node } = parseWithElementTransform(`
`, {
+ inline: true,
+ bindingMetadata: {
+ Foo: BindingTypes.PROPS
+ }
+ })
+ expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+ expect(node.tag).toBe(`_unref(__props["Foo"]).Example`)
+ })
+
+ test('resolve namespaced component from props bindings (non-inline)', () => {
+ const { root, node } = parseWithElementTransform(`
`, {
+ inline: false,
+ bindingMetadata: {
+ Foo: BindingTypes.PROPS
+ }
+ })
+ expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
+ expect(node.tag).toBe('_unref($props["Foo"]).Example')
+ })
+
test('do not resolve component from non-script-setup bindings', () => {
const bindingMetadata = {
Example: BindingTypes.SETUP_MAYBE_REF
@@ -1089,7 +1111,7 @@ describe('compiler: element transform', () => {
})
})
- test('HYDRATE_EVENTS', () => {
+ test('NEED_HYDRATION for v-on', () => {
// ignore click events (has dedicated fast path)
const { node } = parseWithElementTransform(`
`, {
directiveTransforms: {
@@ -1108,12 +1130,24 @@ describe('compiler: element transform', () => {
}
)
expect(node2.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+ genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
+ )
+ })
+
+ test('NEED_HYDRATION for v-bind.prop', () => {
+ const { node } = parseWithBind(`
`)
+ expect(node.patchFlag).toBe(
+ genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
+ )
+
+ const { node: node2 } = parseWithBind(`
`)
+ expect(node2.patchFlag).toBe(
+ genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
// #5870
- test('HYDRATE_EVENTS on dynamic component', () => {
+ test('NEED_HYDRATION on dynamic component', () => {
const { node } = parseWithElementTransform(
`
`,
{
@@ -1123,9 +1157,23 @@ describe('compiler: element transform', () => {
}
)
expect(node.patchFlag).toBe(
- genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+ genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION])
)
})
+
+ test('should not have PROPS patchflag for constant v-on handlers', () => {
+ const { node } = parseWithElementTransform(`
`, {
+ prefixIdentifiers: true,
+ bindingMetadata: {
+ foo: BindingTypes.SETUP_CONST
+ },
+ directiveTransforms: {
+ on: transformOn
+ }
+ })
+ // should only have hydration flag
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+ })
})
describe('dynamic component', () => {
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index 686794c23ab..16229113656 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -506,7 +506,8 @@ describe('compiler: expression transform', () => {
data: BindingTypes.DATA,
options: BindingTypes.OPTIONS,
reactive: BindingTypes.SETUP_REACTIVE_CONST,
- literal: BindingTypes.LITERAL_CONST
+ literal: BindingTypes.LITERAL_CONST,
+ isNaN: BindingTypes.SETUP_REF
}
function compileWithBindingMetadata(
@@ -522,19 +523,56 @@ describe('compiler: expression transform', () => {
test('non-inline mode', () => {
const { code } = compileWithBindingMetadata(
- `
{{ props }} {{ setup }} {{ data }} {{ options }}
`
+ `
{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }}
`
)
expect(code).toMatch(`$props.props`)
expect(code).toMatch(`$setup.setup`)
+ expect(code).toMatch(`$setup.isNaN`)
expect(code).toMatch(`$data.data`)
expect(code).toMatch(`$options.options`)
expect(code).toMatch(`_ctx, _cache, $props, $setup, $data, $options`)
expect(code).toMatchSnapshot()
})
+ test('should not prefix temp variable of for...in', () => {
+ const { code } = compileWithBindingMetadata(
+ `
`
+ )
+ expect(code).not.toMatch(`_ctx.x`)
+ expect(code).toMatchSnapshot()
+ })
+
+ test('should not prefix temp variable of for...of', () => {
+ const { code } = compileWithBindingMetadata(
+ `
`
+ )
+ expect(code).not.toMatch(`_ctx.x`)
+ expect(code).toMatchSnapshot()
+ })
+
+ test('should not prefix temp variable of for loop', () => {
+ const { code } = compileWithBindingMetadata(
+ `
`
+ )
+ expect(code).not.toMatch(`_ctx.i`)
+ expect(code).toMatchSnapshot()
+ })
+
test('inline mode', () => {
const { code } = compileWithBindingMetadata(
- `
{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }}
`,
+ `
{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }} {{ isNaN }}
`,
{ inline: true }
)
expect(code).toMatch(`__props.props`)
@@ -542,6 +580,7 @@ describe('compiler: expression transform', () => {
expect(code).toMatch(`_toDisplayString(setupConst)`)
expect(code).toMatch(`_ctx.data`)
expect(code).toMatch(`_ctx.options`)
+ expect(code).toMatch(`isNaN.value`)
expect(code).toMatchSnapshot()
})
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
index 1c7646e5e28..60a9378ebbd 100644
--- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -674,8 +674,8 @@ describe('compiler: v-for', () => {
patchFlag: !disableTracking
? genFlagText(PatchFlags.STABLE_FRAGMENT)
: keyed
- ? genFlagText(PatchFlags.KEYED_FRAGMENT)
- : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+ ? genFlagText(PatchFlags.KEYED_FRAGMENT)
+ : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
children: {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: RENDER_LIST,
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index a3682fe6304..483e46fd69b 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-core",
- "version": "3.3.4",
+ "version": "3.3.11",
"description": "@vue/compiler-core",
"main": "index.js",
"module": "dist/compiler-core.esm-bundler.js",
@@ -32,12 +32,12 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
"dependencies": {
- "@babel/parser": "^7.22.16",
- "@vue/shared": "3.3.4",
+ "@babel/parser": "^7.23.5",
+ "@vue/shared": "workspace:*",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
},
"devDependencies": {
- "@babel/types": "^7.22.19"
+ "@babel/types": "^7.23.5"
}
}
diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts
index b52ce28990a..1f1e3896a1e 100644
--- a/packages/compiler-core/src/babelUtils.ts
+++ b/packages/compiler-core/src/babelUtils.ts
@@ -165,6 +165,19 @@ export function walkBlockDeclarations(
) {
if (stmt.declare || !stmt.id) continue
onIdent(stmt.id)
+ } else if (
+ stmt.type === 'ForOfStatement' ||
+ stmt.type === 'ForInStatement' ||
+ stmt.type === 'ForStatement'
+ ) {
+ const variable = stmt.type === 'ForStatement' ? stmt.init : stmt.left
+ if (variable && variable.type === 'VariableDeclaration') {
+ for (const decl of variable.declarations) {
+ for (const id of extractIdentifiers(decl.id)) {
+ onIdent(id)
+ }
+ }
+ }
}
}
}
diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index 2b88ab0cfbd..ceae499822f 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -448,8 +448,8 @@ function genAssets(
__COMPAT__ && type === 'filter'
? RESOLVE_FILTER
: type === 'component'
- ? RESOLVE_COMPONENT
- : RESOLVE_DIRECTIVE
+ ? RESOLVE_COMPONENT
+ : RESOLVE_DIRECTIVE
)
for (let i = 0; i < assets.length; i++) {
let id = assets[i]
diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index 95e3718964a..01cb560cc89 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -41,8 +41,8 @@ export function getBaseTransformPreset(
transformExpression
]
: __BROWSER__ && __DEV__
- ? [transformExpression]
- : []),
+ ? [transformExpression]
+ : []),
transformSlotOutlet,
transformElement,
trackSlotScopes,
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 65bbcb36dd6..abfba98e35c 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -256,6 +256,12 @@ export interface TransformOptions
* needed to render inline CSS variables on component root
*/
ssrCssVars?: string
+ /**
+ * Whether to compile the template assuming it needs to handle HMR.
+ * Some edge cases may need to generate different code for HMR to work
+ * correctly, e.g. #6938, #7138
+ */
+ hmr?: boolean
}
export interface CodegenOptions extends SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
index b72ad028b4b..c237239db9e 100644
--- a/packages/compiler-core/src/parse.ts
+++ b/packages/compiler-core/src/parse.ts
@@ -811,8 +811,8 @@ function parseAttribute(
(isPropShorthand || startsWith(name, ':')
? 'bind'
: startsWith(name, '@')
- ? 'on'
- : 'slot')
+ ? 'on'
+ : 'slot')
let arg: ExpressionNode | undefined
if (match[2]) {
@@ -1063,7 +1063,7 @@ function parseTextData(
) {
return rawText
} else {
- // DATA or RCDATA containing "&"". Entity decoding required.
+ // DATA or RCDATA containing "&". Entity decoding is required.
return context.options.decodeEntities(
rawText,
mode === TextModes.ATTRIBUTE_VALUE
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4d9e8c6ed49..2053e26ce92 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -117,7 +117,7 @@ export interface TransformContext
removeIdentifiers(exp: ExpressionNode | string): void
hoist(exp: string | JSChildNode | ArrayExpression): SimpleExpressionNode
cache
(exp: T, isVNode?: boolean): CacheExpression | T
- constantCache: Map
+ constantCache: WeakMap
// 2.x Compat only
filters?: Set
@@ -129,6 +129,7 @@ export function createTransformContext(
filename = '',
prefixIdentifiers = false,
hoistStatic = false,
+ hmr = false,
cacheHandlers = false,
nodeTransforms = [],
directiveTransforms = {},
@@ -155,6 +156,7 @@ export function createTransformContext(
selfName: nameMatch && capitalize(camelize(nameMatch[1])),
prefixIdentifiers,
hoistStatic,
+ hmr,
cacheHandlers,
nodeTransforms,
directiveTransforms,
@@ -181,7 +183,7 @@ export function createTransformContext(
directives: new Set(),
hoists: [],
imports: [],
- constantCache: new Map(),
+ constantCache: new WeakMap(),
temps: 0,
cached: 0,
identifiers: Object.create(null),
@@ -236,8 +238,8 @@ export function createTransformContext(
const removalIndex = node
? list.indexOf(node)
: context.currentNode
- ? context.childIndex
- : -1
+ ? context.childIndex
+ : -1
/* istanbul ignore if */
if (__DEV__ && removalIndex < 0) {
throw new Error(`node being removed is not a child of current parent`)
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 5526163c6f9..fd443496ca7 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -140,9 +140,16 @@ function walk(
node.codegenNode.type === NodeTypes.VNODE_CALL &&
isArray(node.codegenNode.children)
) {
- node.codegenNode.children = context.hoist(
+ const hoisted = context.hoist(
createArrayExpression(node.codegenNode.children)
)
+ // #6978, #7138, #7114
+ // a hoisted children array inside v-for can caused HMR errors since
+ // it might be mutated when mounting the v-for list
+ if (context.hmr) {
+ hoisted.content = `[...${hoisted.content}]`
+ }
+ node.codegenNode.children = hoisted
}
}
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 253b6be5efa..ccede37777d 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -19,7 +19,8 @@ import {
TemplateTextChildNode,
DirectiveArguments,
createVNodeCall,
- ConstantTypes
+ ConstantTypes,
+ JSChildNode
} from '../ast'
import {
PatchFlags,
@@ -385,6 +386,13 @@ function resolveSetupReference(name: string, context: TransformContext) {
`${context.helperString(UNREF)}(${fromMaybeRef})`
: `$setup[${JSON.stringify(fromMaybeRef)}]`
}
+
+ const fromProps = checkType(BindingTypes.PROPS)
+ if (fromProps) {
+ return `${context.helperString(UNREF)}(${
+ context.inline ? '__props' : '$props'
+ }[${JSON.stringify(fromProps)}])`
+ }
}
export type PropsExpression = ObjectExpression | CallExpression | ExpressionNode
@@ -452,6 +460,12 @@ export function buildProps(
hasVnodeHook = true
}
+ if (isEventHandler && value.type === NodeTypes.JS_CALL_EXPRESSION) {
+ // handler wrapped with internal helper e.g. withModifiers(fn)
+ // extract the actual expression
+ value = value.arguments[0] as JSChildNode
+ }
+
if (
value.type === NodeTypes.JS_CACHE_EXPRESSION ||
((value.type === NodeTypes.SIMPLE_EXPRESSION ||
@@ -550,7 +564,7 @@ export function buildProps(
)
} else {
// directives
- const { name, arg, exp, loc } = prop
+ const { name, arg, exp, loc, modifiers } = prop
const isVBind = name === 'bind'
const isVOn = name === 'on'
@@ -678,6 +692,11 @@ export function buildProps(
continue
}
+ // force hydration for v-bind with .prop modifier
+ if (isVBind && modifiers.includes('prop')) {
+ patchFlag |= PatchFlags.NEED_HYDRATION
+ }
+
const directiveTransform = context.directiveTransforms[name]
if (directiveTransform) {
// has built-in directive transform.
@@ -743,12 +762,12 @@ export function buildProps(
patchFlag |= PatchFlags.PROPS
}
if (hasHydrationEventBinding) {
- patchFlag |= PatchFlags.HYDRATE_EVENTS
+ patchFlag |= PatchFlags.NEED_HYDRATION
}
}
if (
!shouldUseBlock &&
- (patchFlag === 0 || patchFlag === PatchFlags.HYDRATE_EVENTS) &&
+ (patchFlag === 0 || patchFlag === PatchFlags.NEED_HYDRATION) &&
(hasRef || hasVnodeHook || runtimeDirectives.length > 0)
) {
patchFlag |= PatchFlags.NEED_PATCH
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index eab6b237f13..52d1fb42a13 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -227,10 +227,15 @@ export function processExpression(
const isScopeVarReference = context.identifiers[rawExp]
const isAllowedGlobal = isGloballyAllowed(rawExp)
const isLiteral = isLiteralWhitelisted(rawExp)
- if (!asParams && !isScopeVarReference && !isAllowedGlobal && !isLiteral) {
+ if (
+ !asParams &&
+ !isScopeVarReference &&
+ !isLiteral &&
+ (!isAllowedGlobal || bindingMetadata[rawExp])
+ ) {
// const bindings exposed from setup can be skipped for patching but
// cannot be hoisted to module scope
- if (isConst(bindingMetadata[node.content])) {
+ if (isConst(bindingMetadata[rawExp])) {
node.constType = ConstantTypes.CAN_SKIP_PATCH
}
node.content = rewriteIdentifier(rawExp)
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index a44532c0d58..3f725b71b2b 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -37,7 +37,8 @@ import {
isTemplateNode,
isSlotOutlet,
injectProp,
- findDir
+ findDir,
+ forAliasRE
} from '../utils'
import {
RENDER_LIST,
@@ -94,8 +95,8 @@ export const transformFor = createStructuralDirectiveTransform(
const fragmentFlag = isStableFragment
? PatchFlags.STABLE_FRAGMENT
: keyProp
- ? PatchFlags.KEYED_FRAGMENT
- : PatchFlags.UNKEYED_FRAGMENT
+ ? PatchFlags.KEYED_FRAGMENT
+ : PatchFlags.UNKEYED_FRAGMENT
forNode.codegenNode = createVNodeCall(
context,
@@ -140,10 +141,10 @@ export const transformFor = createStructuralDirectiveTransform(
const slotOutlet = isSlotOutlet(node)
? node
: isTemplate &&
- node.children.length === 1 &&
- isSlotOutlet(node.children[0])
- ? (node.children[0] as SlotOutletNode) // api-extractor somehow fails to infer this
- : null
+ node.children.length === 1 &&
+ isSlotOutlet(node.children[0])
+ ? (node.children[0] as SlotOutletNode) // api-extractor somehow fails to infer this
+ : null
if (slotOutlet) {
// or
@@ -308,7 +309,6 @@ export function processFor(
}
}
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
// This regex doesn't cover the case if key or index aliases have destructuring,
// but those do not make sense in the first place, so this works in practice.
const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index c4416dd45f7..156a8461abc 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -100,11 +100,12 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
export type SlotFnBuilder = (
slotProps: ExpressionNode | undefined,
+ vForExp: ExpressionNode | undefined,
slotChildren: TemplateChildNode[],
loc: SourceLocation
) => FunctionExpression
-const buildClientSlotFn: SlotFnBuilder = (props, children, loc) =>
+const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
createFunctionExpression(
props,
children,
@@ -149,7 +150,7 @@ export function buildSlots(
slotsProperties.push(
createObjectProperty(
arg || createSimpleExpression('default', true),
- buildSlotFn(exp, children, loc)
+ buildSlotFn(exp, undefined, children, loc)
)
)
}
@@ -201,11 +202,17 @@ export function buildSlots(
hasDynamicSlots = true
}
- const slotFunction = buildSlotFn(slotProps, slotChildren, slotLoc)
+ const vFor = findDir(slotElement, 'for')
+ const slotFunction = buildSlotFn(
+ slotProps,
+ vFor?.exp,
+ slotChildren,
+ slotLoc
+ )
+
// check if this slot is conditional (v-if/v-for)
let vIf: DirectiveNode | undefined
let vElse: DirectiveNode | undefined
- let vFor: DirectiveNode | undefined
if ((vIf = findDir(slotElement, 'if'))) {
hasDynamicSlots = true
dynamicSlots.push(
@@ -257,7 +264,7 @@ export function buildSlots(
createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc)
)
}
- } else if ((vFor = findDir(slotElement, 'for'))) {
+ } else if (vFor) {
hasDynamicSlots = true
const parseResult =
vFor.parseResult ||
@@ -306,7 +313,7 @@ export function buildSlots(
props: ExpressionNode | undefined,
children: TemplateChildNode[]
) => {
- const fn = buildSlotFn(props, children, loc)
+ const fn = buildSlotFn(props, undefined, children, loc)
if (__COMPAT__ && context.compatConfig) {
fn.isNonScopedSlot = true
}
@@ -342,8 +349,8 @@ export function buildSlots(
const slotFlag = hasDynamicSlots
? SlotFlags.DYNAMIC
: hasForwardedSlots(node.children)
- ? SlotFlags.FORWARDED
- : SlotFlags.STABLE
+ ? SlotFlags.FORWARDED
+ : SlotFlags.STABLE
let slots = createObjectExpression(
slotsProperties.concat(
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index bd2882b09e2..baffe5086f6 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -519,3 +519,5 @@ export function getMemoedVNodeCall(node: BlockCodegenNode | MemoExpression) {
return node
}
}
+
+export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
diff --git a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
index 17f974ee1aa..6d49307a19e 100644
--- a/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap
@@ -8,13 +8,13 @@ return function render(_ctx, _cache) {
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createElementBlock(_Fragment, null, [
- _createElementVNode(\\"div\\", {
+ _createElementVNode("div", {
textContent: _toDisplayString(text)
- }, null, 8 /* PROPS */, [\\"textContent\\"]),
- _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
- _createElementVNode(\\"div\\", null, \\"test\\"),
- _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
- _createElementVNode(\\"div\\", {
+ }, null, 8 /* PROPS */, ["textContent"]),
+ _createElementVNode("div", { innerHTML: html }, null, 8 /* PROPS */, ["innerHTML"]),
+ _createElementVNode("div", null, "test"),
+ _createElementVNode("div", { style: {"color":"red"} }, "red"),
+ _createElementVNode("div", {
style: _normalizeStyle({color: 'green'})
}, null, 4 /* STYLE */)
], 64 /* STABLE_FRAGMENT */))
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
index 0e842e96e68..aa08c1366a6 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/Transition.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
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(() => [
- _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
+ _withDirectives(_createElementVNode("div", null, null, 512 /* NEED_PATCH */), [
[_vShow, ok]
])
]),
@@ -29,15 +29,15 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Transition, null, {
default: _withCtx(() => [
a
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
+ ? (_openBlock(), _createElementBlock("div", { key: 0 }, "hey"))
: b
- ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
- : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
+ ? (_openBlock(), _createElementBlock("div", { key: 1 }, "hey"))
+ : (_openBlock(), _createElementBlock("div", { key: 2 }, [
c
- ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
+ ? (_openBlock(), _createElementBlock("p", { key: 0 }))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
- _createCommentVNode(\\" this should not be ignored \\"),
- _createElementVNode(\\"p\\")
+ _createCommentVNode(" this should not be ignored "),
+ _createElementVNode("p")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
]))
]),
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
index b671d3252e5..33fb37a58f9 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap
@@ -3,40 +3,40 @@
exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
-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(\\"img\\", { src: _imports_0_ })
+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("img", { src: _imports_0_ })
], -1 /* HOISTED */)
const _hoisted_2 = [
_hoisted_1
]
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`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"foofoofoofoofoo![](\\\\\\"\\")
\\", 1)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("foofoofoofoofoo![](\\"")
", 1)
const _hoisted_2 = [
_hoisted_1
]
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`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"show-it
12
\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("show-it
12
", 2)
return function render(_ctx, _cache) {
return _hoisted_1
@@ -46,7 +46,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"<span>show-it </span>
12
\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<span>show-it </span>
12
", 2)
return function render(_ctx, _cache) {
return _hoisted_1
@@ -56,7 +56,7 @@ return function render(_ctx, _cache) {
exports[`stringify static html > stringify v-text with escape 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode(\\"text1
12
\\", 2)
+const _hoisted_1 = /*#__PURE__*/_createStaticVNode("text1
12
", 2)
return function render(_ctx, _cache) {
return _hoisted_1
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index d2c9aaa785f..5b610745e41 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -7,9 +7,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("my-input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@@ -23,9 +23,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", _mergeProps(obj, {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }), null, 16 /* FULL_PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@@ -39,9 +39,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@@ -55,9 +55,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@@ -76,9 +76,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@@ -97,9 +97,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[
_vModelText,
model,
@@ -118,9 +118,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@@ -134,10 +134,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- type: \\"checkbox\\",
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ type: "checkbox",
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelCheckbox, model]
])
}
@@ -151,9 +151,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelDynamic: _vModelDynamic, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelDynamic, model]
])
}
@@ -167,10 +167,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- type: \\"radio\\",
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ type: "radio",
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelRadio, model]
])
}
@@ -184,10 +184,10 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
- type: \\"text\\",
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("input", {
+ type: "text",
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
@@ -201,9 +201,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("select", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelSelect, model]
])
}
@@ -217,9 +217,9 @@ return function render(_ctx, _cache) {
with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
- return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
- \\"onUpdate:modelValue\\": $event => ((model) = $event)
- }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
+ return _withDirectives((_openBlock(), _createElementBlock("textarea", {
+ "onUpdate:modelValue": $event => ((model) = $event)
+ }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [
[_vModelText, model]
])
}
diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
index bd9926e5ba7..b0ed8d8d6bd 100644
--- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -7,7 +7,7 @@ return function render(_ctx, _cache) {
with (_ctx) {
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]
])
}
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 85efeafb8c9..90eb25c72ef 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -20,10 +20,7 @@ describe('stringify static html', () => {
}
function repeat(code: string, n: number): string {
- return new Array(n)
- .fill(0)
- .map(() => code)
- .join('')
+ return code.repeat(n)
}
test('should bail on non-eligible static trees', () => {
diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index dce8f09b02c..a67ca5d691f 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -137,6 +137,27 @@ describe('compiler: transform v-model', () => {
})
)
})
+
+ test('should error on dynamic value binding alongside v-model', () => {
+ const onError = vi.fn()
+ transformWithModel(``, {
+ onError
+ })
+ expect(onError).toHaveBeenCalledWith(
+ expect.objectContaining({
+ code: DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE
+ })
+ )
+ })
+
+ // #3596
+ test('should NOT error on static value binding alongside v-model', () => {
+ const onError = vi.fn()
+ transformWithModel(``, {
+ onError
+ })
+ expect(onError).not.toHaveBeenCalled()
+ })
})
describe('modifiers', () => {
diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
index efc7fee374f..42b4cd79888 100644
--- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
@@ -7,7 +7,8 @@ import {
NodeTypes,
ObjectExpression,
transform,
- VNodeCall
+ VNodeCall,
+ BindingTypes
} from '@vue/compiler-core'
import { transformOn } from '../../src/transforms/vOn'
import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
@@ -25,12 +26,11 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
},
...options
})
+ const node = (ast.children[0] as ElementNode).codegenNode as VNodeCall
return {
root: ast,
- props: (
- ((ast.children[0] as ElementNode).codegenNode as VNodeCall)
- .props as ObjectExpression
- ).properties
+ node,
+ props: (node.props as ObjectExpression).properties
}
}
@@ -272,7 +272,7 @@ describe('compiler-dom: transform v-on', () => {
// should not treat cached handler as dynamicProp, so it should have no
// dynamicProps flags and only the hydration flag
expect((root as any).children[0].codegenNode.patchFlag).toBe(
- genFlagText(PatchFlags.HYDRATE_EVENTS)
+ genFlagText(PatchFlags.NEED_HYDRATION)
)
expect(prop).toMatchObject({
key: {
@@ -288,4 +288,18 @@ describe('compiler-dom: transform v-on', () => {
}
})
})
+
+ test('should not have PROPS patchFlag for constant v-on handlers with modifiers', () => {
+ const { node } = parseWithVOn(``, {
+ prefixIdentifiers: true,
+ bindingMetadata: {
+ foo: BindingTypes.SETUP_CONST
+ },
+ directiveTransforms: {
+ on: transformOn
+ }
+ })
+ // should only have hydration flag
+ expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_HYDRATION))
+ })
})
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index d21043af9e6..7210a566530 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
{
"name": "@vue/compiler-dom",
- "version": "3.3.4",
+ "version": "3.3.11",
"description": "@vue/compiler-dom",
"main": "index.js",
"module": "dist/compiler-dom.esm-bundler.js",
@@ -37,7 +37,7 @@
},
"homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
"dependencies": {
- "@vue/shared": "3.3.4",
- "@vue/compiler-core": "3.3.4"
+ "@vue/shared": "workspace:*",
+ "@vue/compiler-core": "workspace:*"
}
}
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 0b47cb435b0..67042b2d7f3 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -153,8 +153,8 @@ const isStringifiableAttr = (name: string, ns: DOMNamespaces) => {
(ns === DOMNamespaces.HTML
? isKnownHtmlAttr(name)
: ns === DOMNamespaces.SVG
- ? isKnownSvgAttr(name)
- : false) || dataAriaRE.test(name)
+ ? isKnownSvgAttr(name)
+ : false) || dataAriaRE.test(name)
)
}
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index 5dff390d3d8..bc1f6fcd27b 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -4,7 +4,9 @@ import {
ElementTypes,
findProp,
NodeTypes,
- hasDynamicKeyVBind
+ hasDynamicKeyVBind,
+ findDir,
+ isStaticArgOf
} from '@vue/compiler-core'
import { createDOMCompilerError, DOMErrorCodes } from '../errors'
import {
@@ -32,8 +34,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
}
function checkDuplicatedValue() {
- const value = findProp(node, 'value')
- if (value) {
+ const value = findDir(node, 'bind')
+ if (value && isStaticArgOf(value.arg, 'value')) {
context.onError(
createDOMCompilerError(
DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
diff --git a/packages/compiler-dom/src/transforms/vOn.ts b/packages/compiler-dom/src/transforms/vOn.ts
index 660003b4839..e84bbd917e6 100644
--- a/packages/compiler-dom/src/transforms/vOn.ts
+++ b/packages/compiler-dom/src/transforms/vOn.ts
@@ -96,14 +96,14 @@ const transformClick = (key: ExpressionNode, event: string) => {
return isStaticClick
? createSimpleExpression(event, true)
: key.type !== NodeTypes.SIMPLE_EXPRESSION
- ? createCompoundExpression([
- `(`,
- key,
- `) === "onClick" ? "${event}" : (`,
- key,
- `)`
- ])
- : key
+ ? createCompoundExpression([
+ `(`,
+ key,
+ `) === "onClick" ? "${event}" : (`,
+ key,
+ `)`
+ ])
+ : key
}
export const transformOn: DirectiveTransform = (dir, node, context) => {
diff --git a/packages/compiler-sfc/README.md b/packages/compiler-sfc/README.md
index c76618e4a4d..4f8ff3ac8b3 100644
--- a/packages/compiler-sfc/README.md
+++ b/packages/compiler-sfc/README.md
@@ -4,7 +4,7 @@
**Note: as of 3.2.13+, this package is included as a dependency of the main `vue` package and can be accessed as `vue/compiler-sfc`. This means you no longer need to explicitly install this package and ensure its version match that of `vue`'s. Just use the main `vue/compiler-sfc` deep import instead.**
-This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader), [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) and [vite](https://github.com/vitejs/vite).
+This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader) and [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
## API
@@ -77,4 +77,4 @@ export default script
Options needed for these APIs can be passed via the query string.
-For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue/tree/next) or [vue-loader](https://github.com/vuejs/vue-loader/tree/next).
+For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) or [vue-loader](https://github.com/vuejs/vue-loader/tree/next).
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 949c9946d9f..f44fcadb9c0 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -46,7 +46,7 @@ return { a }
exports[`SFC compile
+
`)
expect(content).toMatch(
`return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
- `get bar() { return bar } }`
+ `get bar() { return bar }, get baz() { return baz } }`
)
assertCode(content)
})
@@ -777,6 +778,7 @@ describe('SFC compile
{{ count }}
@@ -784,6 +786,7 @@ describe('SFC compile
+ `)
+ assertCode(content)
+ expect(content).toMatch(`emits: ["bar", "foo"]`)
+ })
+
test('w/ type (exported interface)', () => {
const { content } = compile(`
`,
{ defineModel: true }
@@ -16,18 +17,22 @@ describe('defineModel()', () => {
expect(content).toMatch('props: {')
expect(content).toMatch('"modelValue": { required: true },')
expect(content).toMatch('"count": {},')
- expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+ expect(content).toMatch('"toString": { type: Function },')
+ expect(content).toMatch(
+ 'emits: ["update:modelValue", "update:count", "update:toString"],'
+ )
expect(content).toMatch(
`const modelValue = _useModel(__props, "modelValue")`
)
expect(content).toMatch(`const c = _useModel(__props, "count")`)
- expect(content).toMatch(`return { modelValue, c }`)
+ expect(content).toMatch(`return { modelValue, c, toString }`)
expect(content).not.toMatch('defineModel')
expect(bindings).toStrictEqual({
modelValue: BindingTypes.SETUP_REF,
count: BindingTypes.PROPS,
- c: BindingTypes.SETUP_REF
+ c: BindingTypes.SETUP_REF,
+ toString: BindingTypes.SETUP_REF
})
})
@@ -43,7 +48,7 @@ describe('defineModel()', () => {
{ defineModel: true }
)
assertCode(content)
- expect(content).toMatch(`props: _mergeModels({ foo: String }`)
+ expect(content).toMatch(`props: /*#__PURE__*/_mergeModels({ foo: String }`)
expect(content).toMatch(`"modelValue": { default: 0 }`)
expect(content).toMatch(`const count = _useModel(__props, "modelValue")`)
expect(content).not.toMatch('defineModel')
@@ -65,7 +70,7 @@ describe('defineModel()', () => {
{ defineModel: true }
)
assertCode(content)
- expect(content).toMatch(`props: _mergeModels(['foo', 'bar'], {
+ expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
"count": {},
})`)
expect(content).toMatch(`const count = _useModel(__props, "count")`)
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
index 43f54b0aa1e..7d46c4d2187 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
@@ -97,6 +97,7 @@ const props = defineProps({ foo: String })
alias: Alias
method(): void
symbol: symbol
+ error: Error
extract: Extract<1 | 2 | boolean, 2>
exclude: Exclude<1 | 2 | boolean, 2>
uppercase: Uppercase<'foo'>
@@ -143,6 +144,7 @@ const props = defineProps({ foo: String })
expect(content).toMatch(`alias: { type: Array, required: true }`)
expect(content).toMatch(`method: { type: Function, required: true }`)
expect(content).toMatch(`symbol: { type: Symbol, required: true }`)
+ expect(content).toMatch(`error: { type: Error, required: true }`)
expect(content).toMatch(
`objectOrFn: { type: [Function, Object], required: true },`
)
@@ -198,6 +200,7 @@ const props = defineProps({ foo: String })
alias: BindingTypes.PROPS,
method: BindingTypes.PROPS,
symbol: BindingTypes.PROPS,
+ error: BindingTypes.PROPS,
objectOrFn: BindingTypes.PROPS,
extract: BindingTypes.PROPS,
exclude: BindingTypes.PROPS,
@@ -608,4 +611,134 @@ const props = defineProps({ foo: String })
}).toThrow(`cannot accept both type and non-type arguments`)
})
})
+
+ test('should escape names w/ special symbols', () => {
+ const { content, bindings } = compile(`
+ `)
+ assertCode(content)
+ expect(content).toMatch(`"spa ce": { type: null, required: true }`)
+ expect(content).toMatch(
+ `"exclamation!mark": { type: null, required: true }`
+ )
+ expect(content).toMatch(`"double\\"quote": { type: null, required: true }`)
+ expect(content).toMatch(`"hash#tag": { type: null, required: true }`)
+ expect(content).toMatch(`"dollar$sign": { type: null, required: true }`)
+ expect(content).toMatch(`"percentage%sign": { type: null, required: true }`)
+ expect(content).toMatch(`"amper&sand": { type: null, required: true }`)
+ expect(content).toMatch(`"single'quote": { type: null, required: true }`)
+ expect(content).toMatch(`"round(brack)ets": { type: null, required: true }`)
+ expect(content).toMatch(`"aste*risk": { type: null, required: true }`)
+ expect(content).toMatch(`"pl+us": { type: null, required: true }`)
+ expect(content).toMatch(`"com,ma": { type: null, required: true }`)
+ expect(content).toMatch(`"do.t": { type: null, required: true }`)
+ expect(content).toMatch(`"sla/sh": { type: null, required: true }`)
+ expect(content).toMatch(`"co:lon": { type: null, required: true }`)
+ expect(content).toMatch(`"semi;colon": { type: null, required: true }`)
+ expect(content).toMatch(`"angleets": { type: null, required: true }`)
+ expect(content).toMatch(`"equal=sign": { type: null, required: true }`)
+ expect(content).toMatch(`"question?mark": { type: null, required: true }`)
+ expect(content).toMatch(`"at@sign": { type: null, required: true }`)
+ expect(content).toMatch(
+ `"square[brack]ets": { type: null, required: true }`
+ )
+ expect(content).toMatch(`"back\\\\slash": { type: null, required: true }`)
+ expect(content).toMatch(`"ca^ret": { type: null, required: true }`)
+ expect(content).toMatch(`"back\`tick": { type: null, required: true }`)
+ expect(content).toMatch(`"curly{bra}ces": { type: null, required: true }`)
+ expect(content).toMatch(`"pi|pe": { type: null, required: true }`)
+ expect(content).toMatch(`"til~de": { type: null, required: true }`)
+ expect(content).toMatch(`"da-sh": { type: null, required: true }`)
+ expect(bindings).toStrictEqual({
+ 'spa ce': BindingTypes.PROPS,
+ 'exclamation!mark': BindingTypes.PROPS,
+ 'double"quote': BindingTypes.PROPS,
+ 'hash#tag': BindingTypes.PROPS,
+ dollar$sign: BindingTypes.PROPS,
+ 'percentage%sign': BindingTypes.PROPS,
+ 'amper&sand': BindingTypes.PROPS,
+ "single'quote": BindingTypes.PROPS,
+ 'round(brack)ets': BindingTypes.PROPS,
+ 'aste*risk': BindingTypes.PROPS,
+ 'pl+us': BindingTypes.PROPS,
+ 'com,ma': BindingTypes.PROPS,
+ 'do.t': BindingTypes.PROPS,
+ 'sla/sh': BindingTypes.PROPS,
+ 'co:lon': BindingTypes.PROPS,
+ 'semi;colon': BindingTypes.PROPS,
+ 'angleets': BindingTypes.PROPS,
+ 'equal=sign': BindingTypes.PROPS,
+ 'question?mark': BindingTypes.PROPS,
+ 'at@sign': BindingTypes.PROPS,
+ 'square[brack]ets': BindingTypes.PROPS,
+ 'back\\slash': BindingTypes.PROPS,
+ 'ca^ret': BindingTypes.PROPS,
+ 'back`tick': BindingTypes.PROPS,
+ 'curly{bra}ces': BindingTypes.PROPS,
+ 'pi|pe': BindingTypes.PROPS,
+ 'til~de': BindingTypes.PROPS,
+ 'da-sh': BindingTypes.PROPS
+ })
+ })
+
+ // #8989
+ test('custom element retains the props type & production mode', () => {
+ const { content } = compile(
+ ``,
+ { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+ { filename: 'app.ce.vue' }
+ )
+
+ expect(content).toMatch(`foo: {type: Number}`)
+ assertCode(content)
+ })
+
+ test('custom element retains the props type & default value & production mode', () => {
+ const { content } = compile(
+ ``,
+ { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+ { filename: 'app.ce.vue' }
+ )
+ expect(content).toMatch(`foo: { default: 5.5, type: Number }`)
+ assertCode(content)
+ })
})
diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
index a41f3131bef..89cc31340af 100644
--- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
@@ -78,7 +78,8 @@ describe('sfc reactive props destructure', () => {
// literals can be used as-is, non-literals are always returned from a
// function
// functions need to be marked with a skip marker
- expect(content).toMatch(`props: _mergeDefaults(['foo', 'bar', 'baz'], {
+ expect(content)
+ .toMatch(`props: /*#__PURE__*/_mergeDefaults(['foo', 'bar', 'baz'], {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true
@@ -98,7 +99,7 @@ describe('sfc reactive props destructure', () => {
// safely infer whether runtime type is Function (e.g. if the runtime decl
// is imported, or spreads another object)
expect(content)
- .toMatch(`props: _mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
+ .toMatch(`props: /*#__PURE__*/_mergeDefaults({ foo: Number, bar: Object, func: Function, ext: null }, {
foo: 1,
bar: () => ({}),
func: () => {}, __skip_func: true,
@@ -122,7 +123,7 @@ describe('sfc reactive props destructure', () => {
})
expect(content).toMatch(`
- props: _mergeDefaults(['foo', 'foo:bar'], {
+ props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
foo: 1,
"foo:bar": 'foo-bar'
}),`)
diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index 607654a952b..b67423e0a89 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -1,3 +1,4 @@
+import { normalize } from 'node:path'
import { Identifier } from '@babel/types'
import { SFCScriptCompileOptions, parse } from '../../src'
import { ScriptCompileContext } from '../../src/script/context'
@@ -454,6 +455,88 @@ describe('resolveType', () => {
})
})
+ describe('generics', () => {
+ test('generic with type literal', () => {
+ expect(
+ resolve(`
+ type Props = T
+ defineProps>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic used in intersection', () => {
+ expect(
+ resolve(`
+ type Foo = { foo: string; }
+ type Bar = { bar: number; }
+ type Props = T & U & { baz: boolean }
+ defineProps>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String'],
+ bar: ['Number'],
+ baz: ['Boolean']
+ })
+ })
+
+ test('generic type /w generic type alias', () => {
+ expect(
+ resolve(`
+ type Aliased = Readonly>
+ type Props = Aliased
+ type Foo = { foo: string; }
+ defineProps>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic type /w aliased type literal', () => {
+ expect(
+ resolve(`
+ type Aliased = { foo: T }
+ defineProps>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic type /w interface', () => {
+ expect(
+ resolve(`
+ interface Props {
+ foo: T
+ }
+ type Foo = string
+ defineProps>()
+ `).props
+ ).toStrictEqual({
+ foo: ['String']
+ })
+ })
+
+ test('generic from external-file', () => {
+ const files = {
+ '/foo.ts': 'export type P = { foo: T }'
+ }
+ const { props } = resolve(
+ `
+ import { P } from './foo'
+ defineProps>()
+ `,
+ files
+ )
+ expect(props).toStrictEqual({
+ foo: ['String']
+ })
+ })
+ })
+
describe('external type imports', () => {
test('relative ts', () => {
const files = {
@@ -478,6 +561,36 @@ describe('resolveType', () => {
expect(deps && [...deps]).toStrictEqual(Object.keys(files))
})
+ test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
+ const files = {
+ 'C:\\Test\\FolderA\\foo.ts': 'export type P = { foo: number }',
+ 'C:\\Test\\FolderA\\bar.d.ts':
+ 'type X = { bar: string }; export { X as Y };' +
+ // verify that we can parse syntax that is only valid in d.ts
+ 'export const baz: boolean',
+ 'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }'
+ }
+ const { props, deps } = resolve(
+ `
+ import { P } from './foo'
+ import { Y as PP } from './bar'
+ import { Z as PPP } from '../FolderB/buz'
+ defineProps()
+ `,
+ files,
+ {},
+ 'C:\\Test\\FolderA\\Test.vue'
+ )
+ expect(props).toStrictEqual({
+ foo: ['Number'],
+ bar: ['String'],
+ buz: ['String']
+ })
+ expect(deps && [...deps].map(normalize)).toStrictEqual(
+ Object.keys(files).map(normalize)
+ )
+ })
+
// #8244
test('utility type in external file', () => {
const files = {
@@ -898,19 +1011,20 @@ describe('resolveType', () => {
function resolve(
code: string,
files: Record = {},
- options?: Partial
+ options?: Partial,
+ sourceFileName: string = '/Test.vue'
) {
const { descriptor } = parse(``, {
- filename: '/Test.vue'
+ filename: sourceFileName
})
const ctx = new ScriptCompileContext(descriptor, {
id: 'test',
fs: {
fileExists(file) {
- return !!files[file]
+ return !!(files[file] ?? files[normalize(file)])
},
readFile(file) {
- return files[file]
+ return files[file] ?? files[normalize(file)]
}
},
...options
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index b33dabfd2ce..624cbaa043f 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -85,6 +85,16 @@ describe('SFC scoped CSS', () => {
".baz .qux[data-v-test] .foo .bar { color: red;
}"
`)
+ expect(compileScoped(`:is(.foo :deep(.bar)) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":is(.foo[data-v-test] .bar) { color: red;
+ }"
+ `)
+ expect(compileScoped(`:where(.foo :deep(.bar)) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":where(.foo[data-v-test] .bar) { color: red;
+ }"
+ `)
})
test('::v-slotted', () => {
@@ -134,6 +144,23 @@ describe('SFC scoped CSS', () => {
`)
})
+ test(':is() and :where() with multiple selectors', () => {
+ expect(compileScoped(`:is(.foo) { color: red; }`)).toMatchInlineSnapshot(`
+ ":is(.foo[data-v-test]) { color: red;
+ }"
+ `)
+ expect(compileScoped(`:where(.foo, .bar) { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":where(.foo[data-v-test], .bar[data-v-test]) { color: red;
+ }"
+ `)
+ expect(compileScoped(`:is(.foo, .bar) div { color: red; }`))
+ .toMatchInlineSnapshot(`
+ ":is(.foo, .bar) div[data-v-test] { color: red;
+ }"
+ `)
+ })
+
test('media query', () => {
expect(compileScoped(`@media print { .foo { color: red }}`))
.toMatchInlineSnapshot(`
diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index b471b67c9ca..9026a7e9055 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -60,6 +60,33 @@ body
expect(result.errors.length).toBe(0)
})
+test('preprocess pug with indents and blank lines', () => {
+ const template = parse(
+ `
+
+ body
+ h1 The next line contains four spaces.
+
+ div.container
+ p The next line is empty.
+ p This is the last line.
+
+`,
+ { filename: 'example.vue', sourceMap: true }
+ ).descriptor.template as SFCTemplateBlock
+
+ const result = compile({
+ filename: 'example.vue',
+ source: template.content,
+ preprocessLang: template.lang
+ })
+
+ expect(result.errors.length).toBe(0)
+ expect(result.source).toBe(
+ 'The next line contains four spaces.
This is the last line.
'
+ )
+})
+
test('warn missing preprocessor', () => {
const template = parse(`hi\n`, {
filename: 'example.vue',
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 5b01d73d772..d57ad079d24 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -90,7 +90,7 @@ describe('CSS vars injection', () => {
expect(code).toMatchInlineSnapshot(`
".foo {
color: var(--test-color);
- font-size: var(--test-font\\\\.size);
+ font-size: var(--test-font\\.size);
font-weight: var(--test-_φ);
font-size: var(--test-1-字号);
@@ -272,5 +272,73 @@ describe('CSS vars injection', () => {
`export default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCssVars(_ctx => ({\n "xxxxxxxx-background": (_unref(background))\n}))`
)
})
+
+ describe('skip codegen in SSR', () => {
+ test('script setup, inline', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ inlineTemplate: true,
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+
+ // #6926
+ test('script, non-inline', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ inlineTemplate: false,
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+
+ test('normal script', () => {
+ const { content } = compileSFCScript(
+ `\n` +
+ ``,
+ {
+ templateOptions: {
+ ssr: true
+ }
+ }
+ )
+ expect(content).not.toMatch(`_useCssVars`)
+ })
+ })
})
})
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index c7a17ab1739..ae362da02fe 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -34,6 +34,26 @@ describe('compiler:sfc', () => {
})
})
+ test('template block with lang + indent', () => {
+ // Padding determines how many blank lines will there be before the style block
+ const padding = Math.round(Math.random() * 10)
+ const template = parse(
+ `${'\n'.repeat(padding)}
+ h1 foo
+ div bar
+ span baz
+\n`
+ ).descriptor.template!
+
+ expect(template.map).not.toBeUndefined()
+
+ const consumer = new SourceMapConsumer(template.map!)
+ consumer.eachMapping(mapping => {
+ expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+ expect(mapping.originalColumn - mapping.generatedColumn).toBe(2)
+ })
+ })
+
test('custom block', () => {
const padding = Math.round(Math.random() * 10)
const custom = parse(
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
index f267e73ede0..44c13e47ea2 100644
--- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
@@ -166,4 +166,34 @@ describe('compiler sfc: transform asset url', () => {
expect(code).toMatch(`_createStaticVNode`)
expect(code).toMatchSnapshot()
})
+
+ test('transform with stringify with space in absolute filename', () => {
+ const { code } = compileWithAssetUrls(
+ `
\`)
} else {
return [
- _createTextVNode(\\"hello\\"),
- _createVNode(\\"div\\")
+ _createTextVNode("hello"),
+ _createVNode("div")
]
}
}),
@@ -82,11 +82,11 @@ describe('ssr: components', () => {
test('explicit default slot', () => {
expect(compile(`
`).code)
.toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
+ const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
@@ -116,11 +116,11 @@ describe('ssr: components', () => {
`).code
).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
+ const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -128,7 +128,7 @@ describe('ssr: components', () => {
_push(\`foo\`)
} else {
return [
- _createTextVNode(\\"foo\\")
+ _createTextVNode("foo")
]
}
}),
@@ -137,7 +137,7 @@ describe('ssr: components', () => {
_push(\`bar\`)
} else {
return [
- _createTextVNode(\\"bar\\")
+ _createTextVNode("bar")
]
}
}),
@@ -153,26 +153,26 @@ describe('ssr: components', () => {
`).code
).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
+ const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
- name: \\"named\\",
+ name: "named",
fn: _withCtx((_, _push, _parent, _scopeId) => {
if (_push) {
_push(\`foo\`)
} else {
return [
- _createTextVNode(\\"foo\\")
+ _createTextVNode("foo")
]
}
}),
- key: \\"0\\"
+ key: "0"
}
: undefined
]), _parent))
@@ -181,27 +181,30 @@ describe('ssr: components', () => {
})
test('v-for slot', () => {
- expect(
- compile(`
`).code
- ).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
+ const { code } = compile(`
`)
+ expect(code).not.toMatch(`_ctx.msg`)
+ expect(code).not.toMatch(`_ctx.key`)
+ expect(code).not.toMatch(`_ctx.index`)
+ expect(code).toMatch(`_ctx.bar`)
+ expect(code).toMatchInlineSnapshot(`
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
+ const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
- _renderList(_ctx.names, (key) => {
+ _renderList(_ctx.names, (key, index) => {
return {
name: key,
fn: _withCtx(({ msg }, _push, _parent, _scopeId) => {
if (_push) {
- _push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`)
+ _push(\`\${_ssrInterpolate(msg + key + index + _ctx.bar)}\`)
} else {
return [
- _createTextVNode(_toDisplayString(msg + _ctx.key + _ctx.bar), 1 /* TEXT */)
+ _createTextVNode(_toDisplayString(msg + key + index + _ctx.bar), 1 /* TEXT */)
]
}
})
@@ -227,11 +230,11 @@ describe('ssr: components', () => {
`).code
).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
+ const _component_foo = _resolveComponent("foo")
_push(_ssrRenderComponent(_component_foo, _attrs, {
foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@@ -248,12 +251,12 @@ describe('ssr: components', () => {
} else {
return [
(_ctx.ok)
- ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+ ? (_openBlock(), _createBlock("div", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
- return (_openBlock(), _createBlock(\\"span\\"))
+ return (_openBlock(), _createBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
- : _createCommentVNode(\\"v-if\\", true)
+ : _createCommentVNode("v-if", true)
]
}
}),
@@ -271,12 +274,12 @@ describe('ssr: components', () => {
} else {
return [
ok
- ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
+ ? (_openBlock(), _createBlock("div", { key: 0 }, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
- return (_openBlock(), _createBlock(\\"span\\"))
+ return (_openBlock(), _createBlock("span"))
}), 256 /* UNKEYED_FRAGMENT */))
]))
- : _createCommentVNode(\\"v-if\\", true)
+ : _createCommentVNode("v-if", true)
]
}
}),
@@ -291,12 +294,12 @@ describe('ssr: components', () => {
const { code } = compile(`
`).code).toMatchInlineSnapshot(`
- "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
- const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+ "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require("vue")
+ const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _component_foo = _resolveComponent(\\"foo\\")
- const _component_bar = _resolveComponent(\\"bar\\")
+ const _component_foo = _resolveComponent("foo")
+ const _component_bar = _resolveComponent("bar")
_push(_ssrRenderComponent(_component_foo, _attrs, {
default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -318,7 +321,7 @@ describe('ssr: components', () => {
test('transition', () => {
expect(compile(`
`).code)
.toMatchInlineSnapshot(`
- "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+ "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`
+ 