theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: improve VNode creation performance with compiler hints (#3334)

Browse Source
This commit is contained in:
HcySunYang 2021-06-23 07:15:20 +08:00 committed by Evan You
parent 31abdc8ada
commit ceff89905b
42 changed files with 1130 additions and 685 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,12 +48,12 @@ exports[`compiler: codegen Element (callExpression + objectExpression + Template
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return _createVNode(\\"div\\", { return _createElementVNode(\\"div\\", {
id: \\"foo\\", id: \\"foo\\",
[prop]: bar, [prop]: bar,
[foo + bar]: bar [foo + bar]: bar
}, [ }, [
_createVNode(\\"p\\", { \\"some-key\\": \\"foo\\" }) _createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
], 16) ], 16)
} }
}" }"
@ -98,7 +98,7 @@ exports[`compiler: codegen forNode 1`] = `
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(), 1)) return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1))
} }
}" }"
`; `;
@ -107,7 +107,7 @@ exports[`compiler: codegen forNode with constant expression 1`] = `
" "
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
return (_openBlock(), _createBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */)) return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */))
} }
}" }"
`; `;

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

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

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

@ -1,16 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = ` exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\" "import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\") const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
_pushScopeId(\\"test\\") _pushScopeId(\\"test\\")
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
_popScopeId() _popScopeId()
export const render = /*#__PURE__*/_withId((_ctx, _cache) => { export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1, _hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */), _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2 _hoisted_2
@ -19,7 +19,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`; `;
exports[`scopeId compiler support should wrap default slot 1`] = ` exports[`scopeId compiler support should wrap default slot 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\") const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => { export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@ -27,7 +27,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
return (_openBlock(), _createBlock(_component_Child, null, { return (_openBlock(), _createBlock(_component_Child, null, {
default: _withId(() => [ default: _withId(() => [
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -35,7 +35,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`; `;
exports[`scopeId compiler support should wrap dynamic slots 1`] = ` exports[`scopeId compiler support should wrap dynamic slots 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\") const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => { export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@ -46,7 +46,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
? { ? {
name: \\"foo\\", name: \\"foo\\",
fn: _withId(() => [ fn: _withId(() => [
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
]) ])
} }
: undefined, : undefined,
@ -54,7 +54,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
return { return {
name: i, name: i,
fn: _withId(() => [ fn: _withId(() => [
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
]) ])
} }
}) })
@ -63,7 +63,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`; `;
exports[`scopeId compiler support should wrap named slots 1`] = ` exports[`scopeId compiler support should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\") const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId((_ctx, _cache) => { export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
@ -74,7 +74,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */) _createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]), ]),
bar: _withId(() => [ bar: _withId(() => [
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))

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

@ -31,7 +31,8 @@ import {
RESOLVE_COMPONENT, RESOLVE_COMPONENT,
CREATE_COMMENT, CREATE_COMMENT,
FRAGMENT, FRAGMENT,
RENDER_LIST RENDER_LIST,
CREATE_ELEMENT_VNODE
} from '../src/runtimeHelpers' } from '../src/runtimeHelpers'
import { createElementWithCodegen, genFlagText } from './testUtils' import { createElementWithCodegen, genFlagText } from './testUtils'
import { PatchFlags } from '@vue/shared' import { PatchFlags } from '@vue/shared'
@ -395,12 +396,12 @@ describe('compiler: codegen', () => {
}) })
) )
expect(code).toMatch(` expect(code).toMatch(`
return _${helperNameMap[CREATE_VNODE]}("div", { return _${helperNameMap[CREATE_ELEMENT_VNODE]}("div", {
id: "foo", id: "foo",
[prop]: bar, [prop]: bar,
[foo + bar]: bar [foo + bar]: bar
}, [ }, [
_${helperNameMap[CREATE_VNODE]}("p", { "some-key": "foo" }) _${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
], ${PatchFlags.FULL_PROPS})`) ], ${PatchFlags.FULL_PROPS})`)
expect(code).toMatchSnapshot() expect(code).toMatchSnapshot()
}) })
@ -658,11 +659,11 @@ describe('compiler: codegen', () => {
test('tag only', () => { test('tag only', () => {
expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(` expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
"return _createVNode(\\"div\\") "return _createElementVNode(\\"div\\")
" "
`) `)
expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(` expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
"return _createVNode(_Fragment) "return _createElementVNode(_Fragment)
" "
`) `)
}) })
@ -670,7 +671,7 @@ describe('compiler: codegen', () => {
test('with props', () => { test('with props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps))) expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", { foo: \\"bar\\" }) "return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
" "
`) `)
}) })
@ -678,7 +679,7 @@ describe('compiler: codegen', () => {
test('with children, no props', () => { test('with children, no props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren))) expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", null, children) "return _createElementVNode(\\"div\\", null, children)
" "
`) `)
}) })
@ -686,7 +687,7 @@ describe('compiler: codegen', () => {
test('with children + props', () => { test('with children + props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren))) expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", { foo: \\"bar\\" }, children) "return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
" "
`) `)
}) })
@ -694,7 +695,7 @@ describe('compiler: codegen', () => {
test('with patchFlag and no children/props', () => { test('with patchFlag and no children/props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1'))) expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
.toMatchInlineSnapshot(` .toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", null, null, 1) "return _createElementVNode(\\"div\\", null, null, 1)
" "
`) `)
}) })
@ -714,7 +715,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return (_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)) "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
" "
`) `)
}) })
@ -735,7 +736,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return (_openBlock(true), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)) "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
" "
`) `)
}) })
@ -754,7 +755,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return _withDirectives(_createVNode(\\"div\\", { foo: \\"bar\\" }, children), [ "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
[foo, bar] [foo, bar]
]) ])
" "
@ -776,7 +777,7 @@ describe('compiler: codegen', () => {
) )
) )
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"return _withDirectives((_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)), [ "return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
[foo, bar] [foo, bar]
]) ])
" "

4
packages/compiler-core/__tests__/scopeId.spec.ts
View File

@ -73,10 +73,10 @@ describe('scopeId compiler support', () => {
expect(code).toMatch( expect(code).toMatch(
[ [
`_pushScopeId("test")`, `_pushScopeId("test")`,
`const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "hello", ${genFlagText( `const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
PatchFlags.HOISTED PatchFlags.HOISTED
)})`, )})`,
`const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "world", ${genFlagText( `const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
PatchFlags.HOISTED PatchFlags.HOISTED
)})`, )})`,
`_popScopeId()` `_popScopeId()`

20
packages/compiler-core/__tests__/testUtils.ts
View File

@ -6,7 +6,13 @@ import {
ElementTypes, ElementTypes,
VNodeCall VNodeCall
} from '../src' } from '../src'
import { isString, PatchFlags, PatchFlagNames, isArray } from '@vue/shared' import {
isString,
PatchFlags,
PatchFlagNames,
isArray,
ShapeFlags
} from '@vue/shared'
const leadingBracketRE = /^\[/ const leadingBracketRE = /^\[/
const bracketsRE = /^\[|\]$/g const bracketsRE = /^\[|\]$/g
@ -63,19 +69,25 @@ export function createElementWithCodegen(
directives: undefined, directives: undefined,
isBlock: false, isBlock: false,
disableTracking: false, disableTracking: false,
isComponent: false,
shapeFlag: ShapeFlags.ELEMENT + ``,
loc: locStub loc: locStub
} }
} }
} }
export function genFlagText(flag: PatchFlags | PatchFlags[]) { type Flags = PatchFlags | ShapeFlags
export function genFlagText(
flag: Flags | Flags[],
names: { [k: number]: string } = PatchFlagNames
) {
if (isArray(flag)) { if (isArray(flag)) {
let f = 0 let f = 0
flag.forEach(ff => { flag.forEach(ff => {
f |= ff f |= ff
}) })
return `${f} /* ${flag.map(f => PatchFlagNames[f]).join(', ')} */` return `${f} /* ${flag.map(f => names[f]).join(', ')} */`
} else { } else {
return `${flag} /* ${PatchFlagNames[flag]} */` return `${flag} /* ${names[flag]} */`
} }
} }

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

@ -2,15 +2,15 @@
exports[`compiler: hoistStatic transform hoist element with static key 1`] = ` exports[`compiler: hoistStatic transform hoist element with static key 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -19,18 +19,18 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist nested static tree 1`] = ` exports[`compiler: hoistStatic transform hoist nested static tree 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"p\\", null, [ const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
/*#__PURE__*/_createVNode(\\"span\\"), /*#__PURE__*/_createElementVNode(\\"span\\"),
/*#__PURE__*/_createVNode(\\"span\\") /*#__PURE__*/_createElementVNode(\\"span\\")
], -1 /* HOISTED */) ], -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -39,17 +39,17 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist nested static tree with comments 1`] = ` exports[`compiler: hoistStatic transform hoist nested static tree with comments 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, [ const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
/*#__PURE__*/_createCommentVNode(\\"comment\\") /*#__PURE__*/_createCommentVNode(\\"comment\\")
], -1 /* HOISTED */) ], -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createCommentVNode: _createCommentVNode, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -58,16 +58,16 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist siblings with common non-hoistable parent 1`] = ` exports[`compiler: hoistStatic transform hoist siblings with common non-hoistable parent 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1, _hoisted_1,
_hoisted_2 _hoisted_2
])) ]))
@ -77,15 +77,15 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist simple element 1`] = ` exports[`compiler: hoistStatic transform hoist simple element 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -94,18 +94,18 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist static props for elements with directives 1`] = ` exports[`compiler: hoistStatic transform hoist static props for elements with directives 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: \\"foo\\" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveDirective: _resolveDirective, createElementVNode: _createElementVNode, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective(\\"foo\\")
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_withDirectives(_createVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [ _withDirectives(_createElementVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
[_directive_foo] [_directive_foo]
]) ])
])) ]))
@ -115,16 +115,16 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist static props for elements with dynamic text children 1`] = ` exports[`compiler: hoistStatic transform hoist static props for elements with dynamic text children 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: \\"foo\\" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */) _createElementVNode(\\"div\\", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
])) ]))
} }
}" }"
@ -132,18 +132,18 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = ` exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: \\"foo\\" }
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"div\\", _hoisted_1, [ _createElementVNode(\\"div\\", _hoisted_1, [
_createVNode(_component_Comp) _createVNode(_component_Comp)
]) ])
])) ]))
@ -153,16 +153,18 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform prefixIdentifiers hoist class with static object value 1`] = ` exports[`compiler: hoistStatic transform prefixIdentifiers hoist class with static object value 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { class: { foo: true } } const _hoisted_1 = {
class: /*#__PURE__*/_normalizeClass({ foo: true })
}
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */) _createElementVNode(\\"span\\", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
])) ]))
} }
}" }"
@ -170,15 +172,15 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static interpolation 1`] = ` exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static interpolation 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"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 */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -187,15 +189,15 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static prop value 1`] = ` exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static tree with static prop value 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1 _hoisted_1
])) ]))
} }
@ -203,12 +205,12 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers 1`] = ` exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers 1`] = `
"import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"div\\", null, [ _createElementVNode(\\"div\\", null, [
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.foo && _ctx.foo(...args))) onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.foo && _ctx.foo(...args)))
}) })
]) ])
@ -221,12 +223,12 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createBlock(\\"p\\", null, [ return (_openBlock(), _createElementBlock(\\"p\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */) _createElementVNode(\\"span\\", null, _toDisplayString(o + 'foo'), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
@ -258,12 +260,12 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (o) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (o) => {
return (_openBlock(), _createBlock(\\"p\\", null, [ return (_openBlock(), _createElementBlock(\\"p\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */) _createElementVNode(\\"span\\", null, _toDisplayString(o), 1 /* TEXT */)
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
])) ]))
@ -276,11 +278,11 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist keye
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item })) return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
])) ]))
} }
@ -292,11 +294,11 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(_component_Comp) _createVNode(_component_Comp)
])) ]))
} }
@ -308,10 +310,10 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic k
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(), _createBlock(\\"div\\", { key: foo })) (_openBlock(), _createElementBlock(\\"div\\", { key: foo }))
])) ]))
} }
}" }"
@ -322,10 +324,10 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic p
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]) _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"])
])) ]))
} }
}" }"
@ -336,10 +338,10 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic r
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */) _createElementVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
])) ]))
} }
}" }"
@ -350,27 +352,27 @@ exports[`compiler: hoistStatic transform should NOT hoist root node 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\")) return (_openBlock(), _createElementBlock(\\"div\\"))
} }
}" }"
`; `;
exports[`compiler: hoistStatic transform should hoist v-for children if static 1`] = ` exports[`compiler: hoistStatic transform should hoist v-for children if static 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode } = _Vue const { createElementVNode: _createElementVNode } = _Vue
const _hoisted_1 = { id: \\"foo\\" } const _hoisted_1 = { id: \\"foo\\" }
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => { (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [ return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
_hoisted_2 _hoisted_2
])) ]))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
@ -381,21 +383,21 @@ return function render(_ctx, _cache) {
exports[`compiler: hoistStatic transform should hoist v-if props/children if static 1`] = ` exports[`compiler: hoistStatic transform should hoist v-if props/children if static 1`] = `
"const _Vue = Vue "const _Vue = Vue
const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
const _hoisted_1 = { const _hoisted_1 = {
key: 0, key: 0,
id: \\"foo\\" id: \\"foo\\"
} }
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"span\\", null, null, -1 /* HOISTED */) const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
ok ok
? (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [ ? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
_hoisted_2 _hoisted_2
])) ]))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)

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

@ -2,14 +2,14 @@
exports[`compiler: expression transform bindingMetadata inline mode 1`] = ` exports[`compiler: expression transform bindingMetadata inline mode 1`] = `
"(_ctx, _cache) => { "(_ctx, _cache) => {
return (_openBlock(), _createBlock(\\"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), 1 /* TEXT */))
}" }"
`; `;
exports[`compiler: expression transform bindingMetadata non-inline mode 1`] = ` exports[`compiler: expression transform bindingMetadata non-inline mode 1`] = `
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) { return function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock(\\"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), 1 /* TEXT */))
}" }"
`; `;

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

@ -5,10 +5,10 @@ exports[`compiler: transform text <template v-for> 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createTextVNode: _createTextVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createTextVNode: _createTextVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createTextVNode(\\"foo\\") _createTextVNode(\\"foo\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
@ -33,12 +33,12 @@ exports[`compiler: transform text consecutive text between elements 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\"), _createElementVNode(\\"div\\"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */), _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -49,14 +49,14 @@ exports[`compiler: transform text consecutive text mixed with elements 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\"), _createElementVNode(\\"div\\"),
_createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */), _createTextVNode(_toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz), 1 /* TEXT */),
_createVNode(\\"div\\"), _createElementVNode(\\"div\\"),
_createTextVNode(\\"hello\\"), _createTextVNode(\\"hello\\"),
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -67,11 +67,11 @@ exports[`compiler: transform text element with custom directives and only one te
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective(\\"foo\\")
return _withDirectives((_openBlock(), _createBlock(\\"p\\", null, [ return _withDirectives((_openBlock(), _createElementBlock(\\"p\\", null, [
_createTextVNode(_toDisplayString(foo), 1 /* TEXT */) _createTextVNode(_toDisplayString(foo), 1 /* TEXT */)
], 512 /* NEED_PATCH */)), [ ], 512 /* NEED_PATCH */)), [
[_directive_foo] [_directive_foo]
@ -97,12 +97,12 @@ exports[`compiler: transform text text between elements (static) 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\"), _createElementVNode(\\"div\\"),
_createTextVNode(\\"hello\\"), _createTextVNode(\\"hello\\"),
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"

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

@ -5,10 +5,10 @@ exports[`compiler: v-for codegen basic v-for 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createElementBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -19,12 +19,12 @@ exports[`compiler: v-for codegen keyed template v-for 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, { key: item }, [ return (_openBlock(), _createElementBlock(_Fragment, { key: item }, [
\\"hello\\", \\"hello\\",
_createVNode(\\"span\\") _createElementVNode(\\"span\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
} }
@ -36,10 +36,10 @@ exports[`compiler: v-for codegen keyed v-for 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item })) return (_openBlock(), _createElementBlock(\\"span\\", { key: item }))
}), 128 /* KEYED_FRAGMENT */)) }), 128 /* KEYED_FRAGMENT */))
} }
}" }"
@ -50,10 +50,10 @@ exports[`compiler: v-for codegen skipped key 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createElementBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -64,10 +64,10 @@ exports[`compiler: v-for codegen skipped value & key 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createElementBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -78,10 +78,10 @@ exports[`compiler: v-for codegen skipped value 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createElementBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"
@ -92,12 +92,12 @@ exports[`compiler: v-for codegen template v-for 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
\\"hello\\", \\"hello\\",
_createVNode(\\"span\\") _createElementVNode(\\"span\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
@ -109,10 +109,10 @@ exports[`compiler: v-for codegen template v-for key injection with single child
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { return (_openBlock(), _createElementBlock(\\"span\\", {
key: item.id, key: item.id,
id: item.id id: item.id
}, null, 8 /* PROPS */, [\\"id\\"])) }, null, 8 /* PROPS */, [\\"id\\"]))
@ -126,9 +126,9 @@ exports[`compiler: v-for codegen template v-for w/ <slot/> 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\") return _renderSlot($slots, \\"default\\")
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
@ -140,9 +140,9 @@ exports[`compiler: v-for codegen v-for on <slot/> 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, renderSlot: _renderSlot } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\") return _renderSlot($slots, \\"default\\")
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
@ -154,12 +154,12 @@ exports[`compiler: v-for codegen v-for on element with custom directive 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, resolveDirective: _resolveDirective, withDirectives: _withDirectives } = _Vue
const _directive_foo = _resolveDirective(\\"foo\\") const _directive_foo = _resolveDirective(\\"foo\\")
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [ return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
[_directive_foo] [_directive_foo]
]) ])
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
@ -172,10 +172,10 @@ exports[`compiler: v-for codegen v-for with constant expression 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createElementVNode: _createElementVNode } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, _renderList(10, (item) => { return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
return _createVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */) return _createElementVNode(\\"p\\", null, _toDisplayString(item), 1 /* TEXT */)
}), 64 /* STABLE_FRAGMENT */)) }), 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -186,11 +186,11 @@ exports[`compiler: v-for codegen v-if + v-for 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(true), _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"div\\")) return (_openBlock(), _createElementBlock(\\"div\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
} }
@ -202,11 +202,11 @@ exports[`compiler: v-for codegen v-if + v-for on <template> 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(true), _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */)) return (_openBlock(), _createElementBlock(_Fragment, null, [], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
} }
@ -218,10 +218,10 @@ exports[`compiler: v-for codegen value + key + index 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => { return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createElementBlock(\\"span\\"))
}), 256 /* UNKEYED_FRAGMENT */)) }), 256 /* UNKEYED_FRAGMENT */))
} }
}" }"

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

@ -5,10 +5,10 @@ exports[`compiler: v-if codegen basic v-if 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
} }
}" }"
@ -19,17 +19,17 @@ exports[`compiler: v-if codegen increasing key: v-if + v-else-if + v-else 1`] =
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
ok ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: (_openBlock(), _createBlock(\\"p\\", { key: 1 })), : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 })),
another another
? (_openBlock(), _createBlock(\\"div\\", { key: 2 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }))
: orNot : orNot
? (_openBlock(), _createBlock(\\"p\\", { key: 3 })) ? (_openBlock(), _createElementBlock(\\"p\\", { key: 3 }))
: (_openBlock(), _createBlock(\\"p\\", { key: 4 })) : (_openBlock(), _createElementBlock(\\"p\\", { key: 4 }))
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"
@ -40,14 +40,14 @@ exports[`compiler: v-if codegen multiple v-if that are sibling nodes should have
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
ok ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: _createCommentVNode(\\"v-if\\", true), : _createCommentVNode(\\"v-if\\", true),
orNot orNot
? (_openBlock(), _createBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
@ -59,13 +59,13 @@ exports[`compiler: v-if codegen template v-if 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { createElementVNode: _createElementVNode, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [ ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
_createVNode(\\"div\\"), _createElementVNode(\\"div\\"),
\\"hello\\", \\"hello\\",
_createVNode(\\"p\\") _createElementVNode(\\"p\\")
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
} }
@ -91,11 +91,11 @@ exports[`compiler: v-if codegen v-if + v-else 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: (_openBlock(), _createBlock(\\"p\\", { key: 1 })) : (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
} }
}" }"
`; `;
@ -105,13 +105,13 @@ exports[`compiler: v-if codegen v-if + v-else-if + v-else 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
return ok return ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: orNot : orNot
? (_openBlock(), _createBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
} }
}" }"
`; `;
@ -121,12 +121,12 @@ exports[`compiler: v-if codegen v-if + v-else-if 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
return ok return ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }))
: orNot : orNot
? (_openBlock(), _createBlock(\\"p\\", { key: 1 })) ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
: _createCommentVNode(\\"v-if\\", true) : _createCommentVNode(\\"v-if\\", true)
} }
}" }"

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

@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform v-model compound expression (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model compound expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: _ctx.model[_ctx.index], modelValue: _ctx.model[_ctx.index],
\\"onUpdate:modelValue\\": $event => (_ctx.model[_ctx.index] = $event) \\"onUpdate:modelValue\\": $event => (_ctx.model[_ctx.index] = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@ -16,9 +16,9 @@ exports[`compiler: transform v-model compound expression 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: model[index], modelValue: model[index],
\\"onUpdate:modelValue\\": $event => (model[index] = $event) \\"onUpdate:modelValue\\": $event => (model[index] = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@ -31,9 +31,9 @@ exports[`compiler: transform v-model simple expression (with multilines) 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: modelValue:
model model
. .
@ -50,10 +50,10 @@ foo
`; `;
exports[`compiler: transform v-model simple expression (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model simple expression (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: _ctx.model, modelValue: _ctx.model,
\\"onUpdate:modelValue\\": $event => (_ctx.model = $event) \\"onUpdate:modelValue\\": $event => (_ctx.model = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@ -65,9 +65,9 @@ exports[`compiler: transform v-model simple expression 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: model, modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])) }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
@ -80,9 +80,9 @@ exports[`compiler: transform v-model with argument 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", {
value: model, value: model,
\\"onUpdate:value\\": $event => (model = $event) \\"onUpdate:value\\": $event => (model = $event)
}, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"])) }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
@ -91,13 +91,13 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform v-model with dynamic argument (with prefixIdentifiers) 1`] = ` exports[`compiler: transform v-model with dynamic argument (with prefixIdentifiers) 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { normalizeProps as _normalizeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
[_ctx.value]: _ctx.model, [_ctx.value]: _ctx.model,
[\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event) [\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
}, null, 16 /* FULL_PROPS */)) }), null, 16 /* FULL_PROPS */))
}" }"
`; `;
@ -106,12 +106,12 @@ exports[`compiler: transform v-model with dynamic argument 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock } = _Vue const { normalizeProps: _normalizeProps, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"input\\", { return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
[value]: model, [value]: model,
[\\"onUpdate:\\" + value]: $event => (model = $event) [\\"onUpdate:\\" + value]: $event => (model = $event)
}, null, 16 /* FULL_PROPS */)) }), null, 16 /* FULL_PROPS */))
} }
}" }"
`; `;

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

@ -5,11 +5,11 @@ exports[`compiler: v-once transform as root node 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, createVNode: _createVNode } = _Vue const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode } = _Vue
return _cache[1] || ( return _cache[1] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[1] = _createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[1] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_setBlockTracking(1), _setBlockTracking(1),
_cache[1] _cache[1]
) )
@ -22,11 +22,11 @@ exports[`compiler: v-once transform on component 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_cache[1] || ( _cache[1] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[1] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[1] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
@ -43,12 +43,12 @@ exports[`compiler: v-once transform on nested plain element 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_cache[1] || ( _cache[1] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[1] = _createVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]), _cache[1] = _createElementVNode(\\"div\\", { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_setBlockTracking(1), _setBlockTracking(1),
_cache[1] _cache[1]
) )
@ -62,9 +62,9 @@ exports[`compiler: v-once transform on slot outlet 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_cache[1] || ( _cache[1] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[1] = _renderSlot($slots, \\"default\\"), _cache[1] = _renderSlot($slots, \\"default\\"),
@ -81,12 +81,12 @@ exports[`compiler: v-once transform with hoistStatic: true 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { setBlockTracking: _setBlockTracking, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createElementBlock(\\"div\\", null, [
_cache[1] || ( _cache[1] || (
_setBlockTracking(-1), _setBlockTracking(-1),
_cache[1] = _createVNode(\\"div\\"), _cache[1] = _createElementVNode(\\"div\\"),
_setBlockTracking(1), _setBlockTracking(1),
_cache[1] _cache[1]
) )

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

@ -15,14 +15,14 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform component slots implicit default slot 1`] = ` exports[`compiler: transform component slots implicit default slot 1`] = `
"const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, { return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [ default: _withCtx(() => [
_createVNode(\\"div\\") _createElementVNode(\\"div\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -118,7 +118,7 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -126,7 +126,7 @@ return function render(_ctx, _cache) {
one: _withCtx(() => [\\"foo\\"]), one: _withCtx(() => [\\"foo\\"]),
default: _withCtx(() => [ default: _withCtx(() => [
\\"bar\\", \\"bar\\",
_createVNode(\\"span\\") _createElementVNode(\\"span\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))
@ -211,7 +211,7 @@ return function render(_ctx, _cache) {
`; `;
exports[`compiler: transform component slots with whitespace: 'preserve' implicit default slot 1`] = ` exports[`compiler: transform component slots with whitespace: 'preserve' implicit default slot 1`] = `
"const { createVNode: _createVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue "const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
@ -220,7 +220,7 @@ return function render(_ctx, _cache) {
header: _withCtx(() => [\\" Header \\"]), header: _withCtx(() => [\\" Header \\"]),
default: _withCtx(() => [ default: _withCtx(() => [
\\" \\", \\" \\",
_createVNode(\\"p\\") _createElementVNode(\\"p\\")
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
})) }))

19
packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
View File

@ -10,7 +10,12 @@ import {
ForNode, ForNode,
ConstantTypes ConstantTypes
} from '../../src' } from '../../src'
import { FRAGMENT, RENDER_LIST, CREATE_TEXT } from '../../src/runtimeHelpers' import {
FRAGMENT,
RENDER_LIST,
CREATE_TEXT,
NORMALIZE_CLASS
} from '../../src/runtimeHelpers'
import { transformElement } from '../../src/transforms/transformElement' import { transformElement } from '../../src/transforms/transformElement'
import { transformExpression } from '../../src/transforms/transformExpression' import { transformExpression } from '../../src/transforms/transformExpression'
import { transformIf } from '../../src/transforms/vIf' import { transformIf } from '../../src/transforms/vIf'
@ -510,9 +515,15 @@ describe('compiler: hoistStatic transform', () => {
constType: ConstantTypes.CAN_STRINGIFY constType: ConstantTypes.CAN_STRINGIFY
}, },
value: { value: {
content: `{ foo: true }`, type: NodeTypes.JS_CALL_EXPRESSION,
isStatic: false, callee: NORMALIZE_CLASS,
constType: ConstantTypes.CAN_STRINGIFY arguments: [
{
content: `{ foo: true }`,
isStatic: false,
constType: ConstantTypes.CAN_STRINGIFY
}
]
} }
} }
] ]

82
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -17,7 +17,11 @@ import {
RESOLVE_DYNAMIC_COMPONENT, RESOLVE_DYNAMIC_COMPONENT,
SUSPENSE, SUSPENSE,
KEEP_ALIVE, KEEP_ALIVE,
BASE_TRANSITION BASE_TRANSITION,
NORMALIZE_CLASS,
NORMALIZE_STYLE,
NORMALIZE_PROPS,
GUARD_REACTIVE_PROPS
} from '../../src/runtimeHelpers' } from '../../src/runtimeHelpers'
import { import {
NodeTypes, NodeTypes,
@ -159,11 +163,25 @@ describe('compiler: element transform', () => {
const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`) const { root, node } = parseWithElementTransform(`<div v-bind="obj" />`)
// single v-bind doesn't need mergeProps // single v-bind doesn't need mergeProps
expect(root.helpers).not.toContain(MERGE_PROPS) expect(root.helpers).not.toContain(MERGE_PROPS)
expect(root.helpers).toContain(NORMALIZE_PROPS)
expect(root.helpers).toContain(GUARD_REACTIVE_PROPS)
// should directly use `obj` in props position // should directly use `obj` in props position
expect(node.props).toMatchObject({ expect(node.props).toMatchObject({
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
content: `obj` callee: NORMALIZE_PROPS,
arguments: [
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: GUARD_REACTIVE_PROPS,
arguments: [
{
type: NodeTypes.SIMPLE_EXPRESSION,
content: `obj`
}
]
}
]
}) })
}) })
@ -655,7 +673,7 @@ describe('compiler: element transform', () => {
}) })
test(`props merging: style`, () => { test(`props merging: style`, () => {
const { node } = parseWithElementTransform( const { node, root } = parseWithElementTransform(
`<div style="color: green" :style="{ color: 'red' }" />`, `<div style="color: green" :style="{ color: 'red' }" />`,
{ {
nodeTransforms: [transformStyle, transformElement], nodeTransforms: [transformStyle, transformElement],
@ -664,6 +682,7 @@ describe('compiler: element transform', () => {
} }
} }
) )
expect(root.helpers).toContain(NORMALIZE_STYLE)
expect(node.props).toMatchObject({ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION, type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [ properties: [
@ -675,17 +694,23 @@ describe('compiler: element transform', () => {
isStatic: true isStatic: true
}, },
value: { value: {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
elements: [ callee: NORMALIZE_STYLE,
arguments: [
{ {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
content: `{"color":"green"}`, elements: [
isStatic: false {
}, type: NodeTypes.SIMPLE_EXPRESSION,
{ content: `{"color":"green"}`,
type: NodeTypes.SIMPLE_EXPRESSION, isStatic: false
content: `{ color: 'red' }`, },
isStatic: false {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ color: 'red' }`,
isStatic: false
}
]
} }
] ]
} }
@ -695,7 +720,7 @@ describe('compiler: element transform', () => {
}) })
test(`props merging: class`, () => { test(`props merging: class`, () => {
const { node } = parseWithElementTransform( const { node, root } = parseWithElementTransform(
`<div class="foo" :class="{ bar: isBar }" />`, `<div class="foo" :class="{ bar: isBar }" />`,
{ {
directiveTransforms: { directiveTransforms: {
@ -703,6 +728,7 @@ describe('compiler: element transform', () => {
} }
} }
) )
expect(root.helpers).toContain(NORMALIZE_CLASS)
expect(node.props).toMatchObject({ expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION, type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [ properties: [
@ -714,17 +740,23 @@ describe('compiler: element transform', () => {
isStatic: true isStatic: true
}, },
value: { value: {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
elements: [ callee: NORMALIZE_CLASS,
arguments: [
{ {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
content: `foo`, elements: [
isStatic: true {
}, type: NodeTypes.SIMPLE_EXPRESSION,
{ content: `foo`,
type: NodeTypes.SIMPLE_EXPRESSION, isStatic: true
content: `{ bar: isBar }`, },
isStatic: false {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar: isBar }`,
isStatic: false
}
]
} }
] ]
} }

72
packages/compiler-core/__tests__/transforms/vBind.spec.ts
View File

@ -5,11 +5,17 @@ import {
ObjectExpression, ObjectExpression,
CompilerOptions, CompilerOptions,
ErrorCodes, ErrorCodes,
VNodeCall VNodeCall,
NodeTypes,
CallExpression
} from '../../src' } from '../../src'
import { transformBind } from '../../src/transforms/vBind' import { transformBind } from '../../src/transforms/vBind'
import { transformElement } from '../../src/transforms/transformElement' import { transformElement } from '../../src/transforms/transformElement'
import { CAMELIZE, helperNameMap } from '../../src/runtimeHelpers' import {
CAMELIZE,
helperNameMap,
NORMALIZE_PROPS
} from '../../src/runtimeHelpers'
import { transformExpression } from '../../src/transforms/transformExpression' import { transformExpression } from '../../src/transforms/transformExpression'
function parseWithVBind( function parseWithVBind(
@ -68,16 +74,27 @@ describe('compiler: transform v-bind', () => {
test('dynamic arg', () => { test('dynamic arg', () => {
const node = parseWithVBind(`<div v-bind:[id]="id"/>`) const node = parseWithVBind(`<div v-bind:[id]="id"/>`)
const props = (node.codegenNode as VNodeCall).props as ObjectExpression const props = (node.codegenNode as VNodeCall).props as CallExpression
expect(props.properties[0]).toMatchObject({ expect(props).toMatchObject({
key: { type: NodeTypes.JS_CALL_EXPRESSION,
content: `id || ""`, callee: NORMALIZE_PROPS,
isStatic: false arguments: [
}, {
value: { type: NodeTypes.JS_OBJECT_EXPRESSION,
content: `id`, properties: [
isStatic: false {
} key: {
content: `id || ""`,
isStatic: false
},
value: {
content: `id`,
isStatic: false
}
}
]
}
]
}) })
}) })
@ -127,16 +144,27 @@ describe('compiler: transform v-bind', () => {
test('.camel modifier w/ dynamic arg', () => { test('.camel modifier w/ dynamic arg', () => {
const node = parseWithVBind(`<div v-bind:[foo].camel="id"/>`) const node = parseWithVBind(`<div v-bind:[foo].camel="id"/>`)
const props = (node.codegenNode as VNodeCall).props as ObjectExpression const props = (node.codegenNode as VNodeCall).props as CallExpression
expect(props.properties[0]).toMatchObject({ expect(props).toMatchObject({
key: { type: NodeTypes.JS_CALL_EXPRESSION,
content: `_${helperNameMap[CAMELIZE]}(foo || "")`, callee: NORMALIZE_PROPS,
isStatic: false arguments: [
}, {
value: { type: NodeTypes.JS_OBJECT_EXPRESSION,
content: `id`, properties: [
isStatic: false {
} key: {
content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
isStatic: false
},
value: {
content: `id`,
isStatic: false
}
}
]
}
]
}) })
}) })

11
packages/compiler-core/__tests__/transforms/vIf.spec.ts
View File

@ -22,6 +22,7 @@ import {
CREATE_COMMENT, CREATE_COMMENT,
FRAGMENT, FRAGMENT,
MERGE_PROPS, MERGE_PROPS,
NORMALIZE_PROPS,
RENDER_SLOT RENDER_SLOT
} from '../../src/runtimeHelpers' } from '../../src/runtimeHelpers'
import { createObjectMatcher } from '../testUtils' import { createObjectMatcher } from '../testUtils'
@ -556,8 +557,14 @@ describe('compiler: v-if', () => {
const branch1 = codegenNode.consequent as VNodeCall const branch1 = codegenNode.consequent as VNodeCall
expect(branch1.props).toMatchObject({ expect(branch1.props).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS, callee: NORMALIZE_PROPS,
arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }] arguments: [
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: MERGE_PROPS,
arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
}
]
}) })
}) })

156
packages/compiler-core/__tests__/transforms/vModel.spec.ts
View File

@ -9,7 +9,8 @@ import {
PlainElementNode, PlainElementNode,
ComponentNode, ComponentNode,
NodeTypes, NodeTypes,
VNodeCall VNodeCall,
NORMALIZE_PROPS
} from '../../src' } from '../../src'
import { ErrorCodes } from '../../src/errors' import { ErrorCodes } from '../../src/errors'
import { transformModel } from '../../src/transforms/vModel' import { transformModel } from '../../src/transforms/vModel'
@ -17,6 +18,7 @@ import { transformElement } from '../../src/transforms/transformElement'
import { transformExpression } from '../../src/transforms/transformExpression' import { transformExpression } from '../../src/transforms/transformExpression'
import { transformFor } from '../../src/transforms/vFor' import { transformFor } from '../../src/transforms/vFor'
import { trackSlotScopes } from '../../src/transforms/vSlot' import { trackSlotScopes } from '../../src/transforms/vSlot'
import { CallExpression } from '@babel/types'
function parseWithVModel(template: string, options: CompilerOptions = {}) { function parseWithVModel(template: string, options: CompilerOptions = {}) {
const ast = parse(template) const ast = parse(template)
@ -288,40 +290,50 @@ describe('compiler: transform v-model', () => {
test('with dynamic argument', () => { test('with dynamic argument', () => {
const root = parseWithVModel('<input v-model:[value]="model" />') const root = parseWithVModel('<input v-model:[value]="model" />')
const node = root.children[0] as ElementNode const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression) const props = ((node.codegenNode as VNodeCall)
.properties .props as unknown) as CallExpression
expect(props[0]).toMatchObject({ expect(props).toMatchObject({
key: { type: NodeTypes.JS_CALL_EXPRESSION,
content: 'value', callee: NORMALIZE_PROPS,
isStatic: false arguments: [
}, {
value: { type: NodeTypes.JS_OBJECT_EXPRESSION,
content: 'model', properties: [
isStatic: false {
} key: {
}) content: 'value',
isStatic: false
expect(props[1]).toMatchObject({ },
key: { value: {
children: [ content: 'model',
'"onUpdate:" + ', isStatic: false
{ }
content: 'value', },
isStatic: false {
} key: {
] children: [
}, '"onUpdate:" + ',
value: { {
children: [ content: 'value',
'$event => (', isStatic: false
{ }
content: 'model', ]
isStatic: false },
}, value: {
' = $event)' children: [
] '$event => (',
} {
content: 'model',
isStatic: false
},
' = $event)'
]
}
}
]
}
]
}) })
expect(generate(root).code).toMatchSnapshot() expect(generate(root).code).toMatchSnapshot()
@ -332,40 +344,50 @@ describe('compiler: transform v-model', () => {
prefixIdentifiers: true prefixIdentifiers: true
}) })
const node = root.children[0] as ElementNode const node = root.children[0] as ElementNode
const props = ((node.codegenNode as VNodeCall).props as ObjectExpression) const props = ((node.codegenNode as VNodeCall)
.properties .props as unknown) as CallExpression
expect(props[0]).toMatchObject({ expect(props).toMatchObject({
key: { type: NodeTypes.JS_CALL_EXPRESSION,
content: '_ctx.value', callee: NORMALIZE_PROPS,
isStatic: false arguments: [
}, {
value: { type: NodeTypes.JS_OBJECT_EXPRESSION,
content: '_ctx.model', properties: [
isStatic: false {
} key: {
}) content: '_ctx.value',
isStatic: false
expect(props[1]).toMatchObject({ },
key: { value: {
children: [ content: '_ctx.model',
'"onUpdate:" + ', isStatic: false
{ }
content: '_ctx.value', },
isStatic: false {
} key: {
] children: [
}, '"onUpdate:" + ',
value: { {
children: [ content: '_ctx.value',
'$event => (', isStatic: false
{ }
content: '_ctx.model', ]
isStatic: false },
}, value: {
' = $event)' children: [
] '$event => (',
} {
content: '_ctx.model',
isStatic: false
},
' = $event)'
]
}
}
]
}
]
}) })
expect(generate(root, { mode: 'module' }).code).toMatchSnapshot() expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()

10
packages/compiler-core/src/ast.ts
View File

@ -5,13 +5,12 @@ import {
CREATE_SLOTS, CREATE_SLOTS,
RENDER_LIST, RENDER_LIST,
OPEN_BLOCK, OPEN_BLOCK,
CREATE_BLOCK,
FRAGMENT, FRAGMENT,
CREATE_VNODE,
WITH_DIRECTIVES WITH_DIRECTIVES
} from './runtimeHelpers' } from './runtimeHelpers'
import { PropsExpression } from './transforms/transformElement' import { PropsExpression } from './transforms/transformElement'
import { ImportItem, TransformContext } from './transform' import { ImportItem, TransformContext } from './transform'
import { getVNodeBlockHelper, getVNodeHelper } from './utils'
// Vue template is a platform-agnostic superset of HTML (syntax only). // Vue template is a platform-agnostic superset of HTML (syntax only).
// More namespaces like SVG and MathML are declared by platform specific // More namespaces like SVG and MathML are declared by platform specific
@ -293,6 +292,7 @@ export interface VNodeCall extends Node {
directives: DirectiveArguments | undefined directives: DirectiveArguments | undefined
isBlock: boolean isBlock: boolean
disableTracking: boolean disableTracking: boolean
isComponent: boolean
} }
// JS Node Types --------------------------------------------------------------- // JS Node Types ---------------------------------------------------------------
@ -560,14 +560,15 @@ export function createVNodeCall(
directives?: VNodeCall['directives'], directives?: VNodeCall['directives'],
isBlock: VNodeCall['isBlock'] = false, isBlock: VNodeCall['isBlock'] = false,
disableTracking: VNodeCall['disableTracking'] = false, disableTracking: VNodeCall['disableTracking'] = false,
isComponent: VNodeCall['isComponent'] = false,
loc = locStub loc = locStub
): VNodeCall { ): VNodeCall {
if (context) { if (context) {
if (isBlock) { if (isBlock) {
context.helper(OPEN_BLOCK) context.helper(OPEN_BLOCK)
context.helper(CREATE_BLOCK) context.helper(getVNodeBlockHelper(context.inSSR, isComponent))
} else { } else {
context.helper(CREATE_VNODE) context.helper(getVNodeHelper(context.inSSR, isComponent))
} }
if (directives) { if (directives) {
context.helper(WITH_DIRECTIVES) context.helper(WITH_DIRECTIVES)
@ -584,6 +585,7 @@ export function createVNodeCall(
directives, directives,
isBlock, isBlock,
disableTracking, disableTracking,
isComponent,
loc loc
} }
} }

18
packages/compiler-core/src/codegen.ts
View File

@ -30,6 +30,8 @@ import { SourceMapGenerator, RawSourceMap } from 'source-map'
import { import {
advancePositionWithMutation, advancePositionWithMutation,
assert, assert,
getVNodeBlockHelper,
getVNodeHelper,
isSimpleIdentifier, isSimpleIdentifier,
toValidAssetId toValidAssetId
} from './utils' } from './utils'
@ -47,7 +49,7 @@ import {
POP_SCOPE_ID, POP_SCOPE_ID,
WITH_SCOPE_ID, WITH_SCOPE_ID,
WITH_DIRECTIVES, WITH_DIRECTIVES,
CREATE_BLOCK, CREATE_ELEMENT_VNODE,
OPEN_BLOCK, OPEN_BLOCK,
CREATE_STATIC, CREATE_STATIC,
WITH_CTX, WITH_CTX,
@ -96,7 +98,8 @@ function createCodegenContext(
runtimeGlobalName = `Vue`, runtimeGlobalName = `Vue`,
runtimeModuleName = `vue`, runtimeModuleName = `vue`,
ssr = false, ssr = false,
isTS = false isTS = false,
inSSR = false
}: CodegenOptions }: CodegenOptions
): CodegenContext { ): CodegenContext {
const context: CodegenContext = { const context: CodegenContext = {
@ -110,6 +113,7 @@ function createCodegenContext(
runtimeModuleName, runtimeModuleName,
ssr, ssr,
isTS, isTS,
inSSR,
source: ast.loc.source, source: ast.loc.source,
code: ``, code: ``,
column: 1, column: 1,
@ -218,7 +222,6 @@ export function generate(
} else { } else {
genFunctionPreamble(ast, preambleContext) genFunctionPreamble(ast, preambleContext)
} }
// enter render function // enter render function
const functionName = ssr ? `ssrRender` : `render` const functionName = ssr ? `ssrRender` : `render`
const args = ssr ? ['_ctx', '_push', '_parent', '_attrs'] : ['_ctx', '_cache'] const args = ssr ? ['_ctx', '_push', '_parent', '_attrs'] : ['_ctx', '_cache']
@ -355,6 +358,7 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
if (ast.hoists.length) { if (ast.hoists.length) {
const staticHelpers = [ const staticHelpers = [
CREATE_VNODE, CREATE_VNODE,
CREATE_ELEMENT_VNODE,
CREATE_COMMENT, CREATE_COMMENT,
CREATE_TEXT, CREATE_TEXT,
CREATE_STATIC CREATE_STATIC
@ -754,7 +758,8 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
dynamicProps, dynamicProps,
directives, directives,
isBlock, isBlock,
disableTracking disableTracking,
isComponent
} = node } = node
if (directives) { if (directives) {
push(helper(WITH_DIRECTIVES) + `(`) push(helper(WITH_DIRECTIVES) + `(`)
@ -765,7 +770,10 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
if (pure) { if (pure) {
push(PURE_ANNOTATION) push(PURE_ANNOTATION)
} }
push(helper(isBlock ? CREATE_BLOCK : CREATE_VNODE) + `(`, node) const callHelper: symbol = isBlock
? getVNodeBlockHelper(context.inSSR, isComponent)
: getVNodeHelper(context.inSSR, isComponent)
push(helper(callHelper) + `(`, node)
genNodeList( genNodeList(
genNullableArgs([tag, props, children, patchFlag, dynamicProps]), genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
context context

16
packages/compiler-core/src/options.ts
View File

@ -122,11 +122,25 @@ interface SharedTransformCodegenOptions {
*/ */
prefixIdentifiers?: boolean prefixIdentifiers?: boolean
/** /**
* Generate SSR-optimized render functions instead. * Control whether generate SSR-optimized render functions instead.
* The resulting function must be attached to the component via the * The resulting function must be attached to the component via the
* `ssrRender` option instead of `render`. * `ssrRender` option instead of `render`.
*
* When compiler generates code for SSR's fallback branch, we need to set it to false:
* - context.ssr = false
*
* see `subTransform` in `ssrTransformCompoent.ts`
*/ */
ssr?: boolean ssr?: boolean
/**
* Indicates whether the compiler generates code for SSR,
* it is always true when generating code for SSR,
* regardless of whether we are generating code for SSR's fallback branch,
* this means that when the compiler generates code for SSR's fallback branch:
* - context.ssr = false
* - context.inSSR = true
*/
inSSR?: boolean
/** /**
* Optional binding metadata analyzed from script - used to optimize * Optional binding metadata analyzed from script - used to optimize
* binding access when `prefixIdentifiers` is enabled. * binding access when `prefixIdentifiers` is enabled.

12
packages/compiler-core/src/runtimeHelpers.ts
View File

@ -5,7 +5,9 @@ export const KEEP_ALIVE = Symbol(__DEV__ ? `KeepAlive` : ``)
export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``) export const BASE_TRANSITION = Symbol(__DEV__ ? `BaseTransition` : ``)
export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``) export const OPEN_BLOCK = Symbol(__DEV__ ? `openBlock` : ``)
export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``) export const CREATE_BLOCK = Symbol(__DEV__ ? `createBlock` : ``)
export const CREATE_ELEMENT_BLOCK = Symbol(__DEV__ ? `createElementBlock` : ``)
export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``) export const CREATE_VNODE = Symbol(__DEV__ ? `createVNode` : ``)
export const CREATE_ELEMENT_VNODE = Symbol(__DEV__ ? `createElementVNode` : ``)
export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``) export const CREATE_COMMENT = Symbol(__DEV__ ? `createCommentVNode` : ``)
export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``) export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``) export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``)
@ -21,6 +23,10 @@ export const RENDER_SLOT = Symbol(__DEV__ ? `renderSlot` : ``)
export const CREATE_SLOTS = Symbol(__DEV__ ? `createSlots` : ``) export const CREATE_SLOTS = Symbol(__DEV__ ? `createSlots` : ``)
export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``) export const TO_DISPLAY_STRING = Symbol(__DEV__ ? `toDisplayString` : ``)
export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``) export const MERGE_PROPS = Symbol(__DEV__ ? `mergeProps` : ``)
export const NORMALIZE_CLASS = Symbol(__DEV__ ? `normalizeClass` : ``)
export const NORMALIZE_STYLE = Symbol(__DEV__ ? `normalizeStyle` : ``)
export const NORMALIZE_PROPS = Symbol(__DEV__ ? `normalizeProps` : ``)
export const GUARD_REACTIVE_PROPS = Symbol(__DEV__ ? `guardReactiveProps` : ``)
export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``) export const TO_HANDLERS = Symbol(__DEV__ ? `toHandlers` : ``)
export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``) export const CAMELIZE = Symbol(__DEV__ ? `camelize` : ``)
export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``) export const CAPITALIZE = Symbol(__DEV__ ? `capitalize` : ``)
@ -44,7 +50,9 @@ export const helperNameMap: any = {
[BASE_TRANSITION]: `BaseTransition`, [BASE_TRANSITION]: `BaseTransition`,
[OPEN_BLOCK]: `openBlock`, [OPEN_BLOCK]: `openBlock`,
[CREATE_BLOCK]: `createBlock`, [CREATE_BLOCK]: `createBlock`,
[CREATE_ELEMENT_BLOCK]: `createElementBlock`,
[CREATE_VNODE]: `createVNode`, [CREATE_VNODE]: `createVNode`,
[CREATE_ELEMENT_VNODE]: `createElementVNode`,
[CREATE_COMMENT]: `createCommentVNode`, [CREATE_COMMENT]: `createCommentVNode`,
[CREATE_TEXT]: `createTextVNode`, [CREATE_TEXT]: `createTextVNode`,
[CREATE_STATIC]: `createStaticVNode`, [CREATE_STATIC]: `createStaticVNode`,
@ -58,6 +66,10 @@ export const helperNameMap: any = {
[CREATE_SLOTS]: `createSlots`, [CREATE_SLOTS]: `createSlots`,
[TO_DISPLAY_STRING]: `toDisplayString`, [TO_DISPLAY_STRING]: `toDisplayString`,
[MERGE_PROPS]: `mergeProps`, [MERGE_PROPS]: `mergeProps`,
[NORMALIZE_CLASS]: `normalizeClass`,
[NORMALIZE_STYLE]: `normalizeStyle`,
[NORMALIZE_PROPS]: `normalizeProps`,
[GUARD_REACTIVE_PROPS]: `guardReactiveProps`,
[TO_HANDLERS]: `toHandlers`, [TO_HANDLERS]: `toHandlers`,
[CAMELIZE]: `camelize`, [CAMELIZE]: `camelize`,
[CAPITALIZE]: `capitalize`, [CAPITALIZE]: `capitalize`,

16
packages/compiler-core/src/transform.ts
View File

@ -33,12 +33,10 @@ import {
TO_DISPLAY_STRING, TO_DISPLAY_STRING,
FRAGMENT, FRAGMENT,
helperNameMap, helperNameMap,
CREATE_BLOCK,
CREATE_COMMENT, CREATE_COMMENT,
OPEN_BLOCK, OPEN_BLOCK
CREATE_VNODE
} from './runtimeHelpers' } from './runtimeHelpers'
import { isVSlot } from './utils' import { getVNodeBlockHelper, getVNodeHelper, isVSlot } from './utils'
import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic' import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
import { CompilerCompatOptions } from './compat/compatConfig' import { CompilerCompatOptions } from './compat/compatConfig'
@ -139,6 +137,7 @@ export function createTransformContext(
scopeId = null, scopeId = null,
slotted = true, slotted = true,
ssr = false, ssr = false,
inSSR = false,
ssrCssVars = ``, ssrCssVars = ``,
bindingMetadata = EMPTY_OBJ, bindingMetadata = EMPTY_OBJ,
inline = false, inline = false,
@ -164,6 +163,7 @@ export function createTransformContext(
scopeId, scopeId,
slotted, slotted,
ssr, ssr,
inSSR,
ssrCssVars, ssrCssVars,
bindingMetadata, bindingMetadata,
inline, inline,
@ -346,10 +346,10 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
const codegenNode = child.codegenNode const codegenNode = child.codegenNode
if (codegenNode.type === NodeTypes.VNODE_CALL) { if (codegenNode.type === NodeTypes.VNODE_CALL) {
if (!codegenNode.isBlock) { if (!codegenNode.isBlock) {
removeHelper(CREATE_VNODE)
codegenNode.isBlock = true codegenNode.isBlock = true
removeHelper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
helper(OPEN_BLOCK) helper(OPEN_BLOCK)
helper(CREATE_BLOCK) helper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent))
} }
} }
root.codegenNode = codegenNode root.codegenNode = codegenNode
@ -380,7 +380,9 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``), patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
undefined, undefined,
undefined, undefined,
true true,
undefined,
false /* isComponent */
) )
} else { } else {
// no children = noop. codegen will return null. // no children = noop. codegen will return null.

53
packages/compiler-core/src/transforms/hoistStatic.ts
View File

@ -9,12 +9,20 @@ import {
ComponentNode, ComponentNode,
TemplateNode, TemplateNode,
VNodeCall, VNodeCall,
ParentNode ParentNode,
JSChildNode,
CallExpression
} from '../ast' } from '../ast'
import { TransformContext } from '../transform' import { TransformContext } from '../transform'
import { PatchFlags, isString, isSymbol } from '@vue/shared' import { PatchFlags, isString, isSymbol } from '@vue/shared'
import { isSlotOutlet } from '../utils' import { getVNodeBlockHelper, getVNodeHelper, isSlotOutlet } from '../utils'
import { CREATE_BLOCK, CREATE_VNODE, OPEN_BLOCK } from '../runtimeHelpers' import {
OPEN_BLOCK,
GUARD_REACTIVE_PROPS,
NORMALIZE_CLASS,
NORMALIZE_PROPS,
NORMALIZE_STYLE
} from '../runtimeHelpers'
export function hoistStatic(root: RootNode, context: TransformContext) { export function hoistStatic(root: RootNode, context: TransformContext) {
walk( walk(
@ -213,9 +221,11 @@ export function getConstantType(
// nested updates. // nested updates.
if (codegenNode.isBlock) { if (codegenNode.isBlock) {
context.removeHelper(OPEN_BLOCK) context.removeHelper(OPEN_BLOCK)
context.removeHelper(CREATE_BLOCK) context.removeHelper(
getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
)
codegenNode.isBlock = false codegenNode.isBlock = false
context.helper(CREATE_VNODE) context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
} }
constantCache.set(node, returnType) constantCache.set(node, returnType)
@ -260,6 +270,33 @@ export function getConstantType(
} }
} }
const allowHoistedHelperSet = new Set([
NORMALIZE_CLASS,
NORMALIZE_STYLE,
NORMALIZE_PROPS,
GUARD_REACTIVE_PROPS
])
function getConstantTypeOfHelperCall(
value: CallExpression,
context: TransformContext
): ConstantTypes {
if (
value.type === NodeTypes.JS_CALL_EXPRESSION &&
!isString(value.callee) &&
allowHoistedHelperSet.has(value.callee)
) {
const arg = value.arguments[0] as JSChildNode
if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
return getConstantType(arg, context)
} else if (arg.type === NodeTypes.JS_CALL_EXPRESSION) {
// in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(exp))`
return getConstantTypeOfHelperCall(arg, context)
}
}
return ConstantTypes.NOT_CONSTANT
}
function getGeneratedPropsConstantType( function getGeneratedPropsConstantType(
node: PlainElementNode, node: PlainElementNode,
context: TransformContext context: TransformContext
@ -278,6 +315,12 @@ function getGeneratedPropsConstantType(
returnType = keyType returnType = keyType
} }
if (value.type !== NodeTypes.SIMPLE_EXPRESSION) { if (value.type !== NodeTypes.SIMPLE_EXPRESSION) {
// some helper calls can be hoisted,
// such as the `normalizeProps` generated by the compiler for pre-normalize class,
// in this case we need to respect the ConstanType of the helper's argments
if (value.type === NodeTypes.JS_CALL_EXPRESSION) {
return getConstantTypeOfHelperCall(value, context)
}
return ConstantTypes.NOT_CONSTANT return ConstantTypes.NOT_CONSTANT
} }
const valueType = getConstantType(value, context) const valueType = getConstantType(value, context)

91
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -37,11 +37,15 @@ import {
RESOLVE_COMPONENT, RESOLVE_COMPONENT,
RESOLVE_DYNAMIC_COMPONENT, RESOLVE_DYNAMIC_COMPONENT,
MERGE_PROPS, MERGE_PROPS,
NORMALIZE_CLASS,
NORMALIZE_STYLE,
NORMALIZE_PROPS,
TO_HANDLERS, TO_HANDLERS,
TELEPORT, TELEPORT,
KEEP_ALIVE, KEEP_ALIVE,
SUSPENSE, SUSPENSE,
UNREF UNREF,
GUARD_REACTIVE_PROPS
} from '../runtimeHelpers' } from '../runtimeHelpers'
import { import {
getInnerRange, getInnerRange,
@ -226,6 +230,7 @@ export const transformElement: NodeTransform = (node, context) => {
vnodeDirectives, vnodeDirectives,
!!shouldUseBlock, !!shouldUseBlock,
false /* disableTracking */, false /* disableTracking */,
isComponent,
node.loc node.loc
) )
} }
@ -418,15 +423,25 @@ export function buildProps(
// skip if the prop is a cached handler or has constant value // skip if the prop is a cached handler or has constant value
return return
} }
if (name === 'ref') { if (name === 'ref') {
hasRef = true hasRef = true
} else if (name === 'class' && !isComponent) { } else if (name === 'class') {
hasClassBinding = true hasClassBinding = true
} else if (name === 'style' && !isComponent) { } else if (name === 'style') {
hasStyleBinding = true hasStyleBinding = true
} else if (name !== 'key' && !dynamicPropNames.includes(name)) { } else if (name !== 'key' && !dynamicPropNames.includes(name)) {
dynamicPropNames.push(name) dynamicPropNames.push(name)
} }
// treat the dynamic class and style binding of the component as dynamic props
if (
isComponent &&
(name === 'class' || name === 'style') &&
!dynamicPropNames.includes(name)
) {
dynamicPropNames.push(name)
}
} else { } else {
hasDynamicKeys = true hasDynamicKeys = true
} }
@ -657,10 +672,10 @@ export function buildProps(
if (hasDynamicKeys) { if (hasDynamicKeys) {
patchFlag |= PatchFlags.FULL_PROPS patchFlag |= PatchFlags.FULL_PROPS
} else { } else {
if (hasClassBinding) { if (hasClassBinding && !isComponent) {
patchFlag |= PatchFlags.CLASS patchFlag |= PatchFlags.CLASS
} }
if (hasStyleBinding) { if (hasStyleBinding && !isComponent) {
patchFlag |= PatchFlags.STYLE patchFlag |= PatchFlags.STYLE
} }
if (dynamicPropNames.length) { if (dynamicPropNames.length) {
@ -677,6 +692,72 @@ export function buildProps(
patchFlag |= PatchFlags.NEED_PATCH patchFlag |= PatchFlags.NEED_PATCH
} }
// pre-normalize props, SSR is skipped for now
if (!context.inSSR && propsExpression) {
switch (propsExpression.type) {
case NodeTypes.JS_OBJECT_EXPRESSION:
// means that there is no v-bind,
// but still need to deal with dynamic key binding
let classKeyIndex = -1
let styleKeyIndex = -1
let dynamicKeyIndex = -1
for (let i = 0; i < propsExpression.properties.length; i++) {
const p = propsExpression.properties[i]
if (p.key.type !== NodeTypes.SIMPLE_EXPRESSION) continue
if (!isStaticExp(p.key)) dynamicKeyIndex = i
if (isStaticExp(p.key) && p.key.content === 'class') classKeyIndex = i
if (isStaticExp(p.key) && p.key.content === 'style') styleKeyIndex = i
}
const classProp = propsExpression.properties[classKeyIndex]
const styleProp = propsExpression.properties[styleKeyIndex]
// no dynamic key
if (dynamicKeyIndex === -1) {
if (classProp && !isStaticExp(classProp.value)) {
classProp.value = createCallExpression(
context.helper(NORMALIZE_CLASS),
[classProp.value]
)
}
if (
styleProp &&
!isStaticExp(styleProp.value) &&
// the static style is compiled into an object,
// so use `hasStyleBinding` to ensure that it is a dynamic style binding
hasStyleBinding
) {
styleProp.value = createCallExpression(
context.helper(NORMALIZE_STYLE),
[styleProp.value]
)
}
} else {
// dynamic key binding, wrap with `normalizeProps`
propsExpression = createCallExpression(
context.helper(NORMALIZE_PROPS),
[propsExpression]
)
}
break
case NodeTypes.JS_CALL_EXPRESSION:
// mergeProps call, do nothing
break
default:
// single v-bind
propsExpression = createCallExpression(
context.helper(NORMALIZE_PROPS),
[
createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [
propsExpression
])
]
)
break
}
}
return { return {
props: propsExpression, props: propsExpression,
directives: runtimeDirectives, directives: runtimeDirectives,

30
packages/compiler-core/src/transforms/vFor.ts
View File

@ -32,15 +32,11 @@ import {
findProp, findProp,
isTemplateNode, isTemplateNode,
isSlotOutlet, isSlotOutlet,
injectProp injectProp,
getVNodeBlockHelper,
getVNodeHelper
} from '../utils' } from '../utils'
import { import { RENDER_LIST, OPEN_BLOCK, FRAGMENT } from '../runtimeHelpers'
RENDER_LIST,
OPEN_BLOCK,
CREATE_BLOCK,
FRAGMENT,
CREATE_VNODE
} from '../runtimeHelpers'
import { processExpression } from './transformExpression' import { processExpression } from './transformExpression'
import { validateBrowserExpression } from '../validateExpression' import { validateBrowserExpression } from '../validateExpression'
import { PatchFlags, PatchFlagNames } from '@vue/shared' import { PatchFlags, PatchFlagNames } from '@vue/shared'
@ -85,6 +81,7 @@ export const transformFor = createStructuralDirectiveTransform(
: keyProp : keyProp
? PatchFlags.KEYED_FRAGMENT ? PatchFlags.KEYED_FRAGMENT
: PatchFlags.UNKEYED_FRAGMENT : PatchFlags.UNKEYED_FRAGMENT
forNode.codegenNode = createVNodeCall( forNode.codegenNode = createVNodeCall(
context, context,
helper(FRAGMENT), helper(FRAGMENT),
@ -96,6 +93,7 @@ export const transformFor = createStructuralDirectiveTransform(
undefined, undefined,
true /* isBlock */, true /* isBlock */,
!isStableFragment /* disableTracking */, !isStableFragment /* disableTracking */,
false /* isComponent */,
node.loc node.loc
) as ForCodegenNode ) as ForCodegenNode
@ -156,7 +154,9 @@ export const transformFor = createStructuralDirectiveTransform(
: ``), : ``),
undefined, undefined,
undefined, undefined,
true true,
undefined,
false /* isComponent */
) )
} else { } else {
// Normal element v-for. Directly use the child's codegenNode // Normal element v-for. Directly use the child's codegenNode
@ -170,18 +170,22 @@ export const transformFor = createStructuralDirectiveTransform(
if (childBlock.isBlock) { if (childBlock.isBlock) {
// switch from block to vnode // switch from block to vnode
removeHelper(OPEN_BLOCK) removeHelper(OPEN_BLOCK)
removeHelper(CREATE_BLOCK) removeHelper(
getVNodeBlockHelper(context.inSSR, childBlock.isComponent)
)
} else { } else {
// switch from vnode to block // switch from vnode to block
removeHelper(CREATE_VNODE) removeHelper(
getVNodeHelper(context.inSSR, childBlock.isComponent)
)
} }
} }
childBlock.isBlock = !isStableFragment childBlock.isBlock = !isStableFragment
if (childBlock.isBlock) { if (childBlock.isBlock) {
helper(OPEN_BLOCK) helper(OPEN_BLOCK)
helper(CREATE_BLOCK) helper(getVNodeBlockHelper(context.inSSR, childBlock.isComponent))
} else { } else {
helper(CREATE_VNODE) helper(getVNodeHelper(context.inSSR, childBlock.isComponent))
} }
} }

20
packages/compiler-core/src/transforms/vIf.ts
View File

@ -27,14 +27,15 @@ import {
import { createCompilerError, ErrorCodes } from '../errors' import { createCompilerError, ErrorCodes } from '../errors'
import { processExpression } from './transformExpression' import { processExpression } from './transformExpression'
import { validateBrowserExpression } from '../validateExpression' import { validateBrowserExpression } from '../validateExpression'
import { FRAGMENT, CREATE_COMMENT, OPEN_BLOCK } from '../runtimeHelpers'
import { import {
CREATE_BLOCK, injectProp,
FRAGMENT, findDir,
CREATE_COMMENT, findProp,
OPEN_BLOCK, isBuiltInType,
CREATE_VNODE getVNodeHelper,
} from '../runtimeHelpers' getVNodeBlockHelper
import { injectProp, findDir, findProp, isBuiltInType } from '../utils' } from '../utils'
import { PatchFlags, PatchFlagNames } from '@vue/shared' import { PatchFlags, PatchFlagNames } from '@vue/shared'
export const transformIf = createStructuralDirectiveTransform( export const transformIf = createStructuralDirectiveTransform(
@ -278,6 +279,7 @@ function createChildrenCodegenNode(
undefined, undefined,
true, true,
false, false,
false /* isComponent */,
branch.loc branch.loc
) )
} }
@ -286,10 +288,10 @@ function createChildrenCodegenNode(
.codegenNode as BlockCodegenNode .codegenNode as BlockCodegenNode
// Change createVNode to createBlock. // Change createVNode to createBlock.
if (vnodeCall.type === NodeTypes.VNODE_CALL && !vnodeCall.isBlock) { if (vnodeCall.type === NodeTypes.VNODE_CALL && !vnodeCall.isBlock) {
removeHelper(CREATE_VNODE) removeHelper(getVNodeHelper(context.inSSR, vnodeCall.isComponent))
vnodeCall.isBlock = true vnodeCall.isBlock = true
helper(OPEN_BLOCK) helper(OPEN_BLOCK)
helper(CREATE_BLOCK) helper(getVNodeBlockHelper(context.inSSR, vnodeCall.isComponent))
} }
// inject branch key // inject branch key
injectProp(vnodeCall, keyProperty, context) injectProp(vnodeCall, keyProperty, context)

81
packages/compiler-core/src/utils.ts
View File

@ -30,9 +30,16 @@ import {
SUSPENSE, SUSPENSE,
KEEP_ALIVE, KEEP_ALIVE,
BASE_TRANSITION, BASE_TRANSITION,
TO_HANDLERS TO_HANDLERS,
NORMALIZE_PROPS,
GUARD_REACTIVE_PROPS,
CREATE_BLOCK,
CREATE_ELEMENT_BLOCK,
CREATE_VNODE,
CREATE_ELEMENT_VNODE
} from './runtimeHelpers' } from './runtimeHelpers'
import { isString, isObject, hyphenate, extend } from '@vue/shared' import { isString, isObject, hyphenate, extend } from '@vue/shared'
import { PropsExpression } from './transforms/transformElement'
export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode => export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
@ -291,14 +298,66 @@ export function isSlotOutlet(
return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
} }
export function getVNodeHelper(ssr: boolean, isComponent: boolean) {
return ssr || isComponent ? CREATE_VNODE : CREATE_ELEMENT_VNODE
}
export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
return ssr || isComponent ? CREATE_BLOCK : CREATE_ELEMENT_BLOCK
}
const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
function getUnnormalizedProps(
props: PropsExpression | '{}',
callPath: CallExpression[] = []
): [PropsExpression | '{}', CallExpression[]] {
if (
props &&
!isString(props) &&
props.type === NodeTypes.JS_CALL_EXPRESSION
) {
const callee = props.callee
if (!isString(callee) && propsHelperSet.has(callee)) {
return getUnnormalizedProps(
props.arguments[0] as PropsExpression,
callPath.concat(props)
)
}
}
return [props, callPath]
}
export function injectProp( export function injectProp(
node: VNodeCall | RenderSlotCall, node: VNodeCall | RenderSlotCall,
prop: Property, prop: Property,
context: TransformContext context: TransformContext
) { ) {
let propsWithInjection: ObjectExpression | CallExpression | undefined let propsWithInjection: ObjectExpression | CallExpression | undefined
const props = const originalProps =
node.type === NodeTypes.VNODE_CALL ? node.props : node.arguments[2] node.type === NodeTypes.VNODE_CALL ? node.props : node.arguments[2]
/**
* 1. mergeProps(...)
* 2. toHandlers(...)
* 3. normalizeProps(...)
* 4. normalizeProps(guardReactiveProps(...))
*
* we need to get the real props before normalization
*/
let props = originalProps
let callPath: CallExpression[] = []
let parentCall: CallExpression | undefined
if (
props &&
!isString(props) &&
props.type === NodeTypes.JS_CALL_EXPRESSION
) {
const ret = getUnnormalizedProps(props)
props = ret[0]
callPath = ret[1]
parentCall = callPath[callPath.length - 1]
}
if (props == null || isString(props)) { if (props == null || isString(props)) {
propsWithInjection = createObjectExpression([prop]) propsWithInjection = createObjectExpression([prop])
} else if (props.type === NodeTypes.JS_CALL_EXPRESSION) { } else if (props.type === NodeTypes.JS_CALL_EXPRESSION) {
@ -341,11 +400,25 @@ export function injectProp(
createObjectExpression([prop]), createObjectExpression([prop]),
props props
]) ])
// in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(props))`,
// it will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
// the `guardReactiveProps` will no longer be needed
if (parentCall && parentCall.callee === GUARD_REACTIVE_PROPS) {
parentCall = callPath[callPath.length - 2]
}
} }
if (node.type === NodeTypes.VNODE_CALL) { if (node.type === NodeTypes.VNODE_CALL) {
node.props = propsWithInjection if (parentCall) {
parentCall.arguments[0] = propsWithInjection
} else {
node.props = propsWithInjection
}
} else { } else {
node.arguments[2] = propsWithInjection if (parentCall) {
parentCall.arguments[0] = propsWithInjection
} else {
node.arguments[2] = propsWithInjection
}
} }
} }

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

@ -5,16 +5,18 @@ exports[`compile should contain standard transforms 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { toDisplayString: _toDisplayString, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, normalizeStyle: _normalizeStyle, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
textContent: _toDisplayString(text) textContent: _toDisplayString(text)
}, null, 8 /* PROPS */, [\\"textContent\\"]), }, null, 8 /* PROPS */, [\\"textContent\\"]),
_createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]), _createElementVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
_createVNode(\\"div\\", null, \\"test\\"), _createElementVNode(\\"div\\", null, \\"test\\"),
_createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"), _createElementVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
_createVNode(\\"div\\", { style: {color: 'green'} }, null, 4 /* STYLE */) _createElementVNode(\\"div\\", {
style: _normalizeStyle({color: 'green'})
}, null, 4 /* STYLE */)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
}" }"

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

@ -5,9 +5,9 @@ exports[`compiler: transform v-model errors should allow usage on custom element
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"my-input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model] [_vModelText, model]
@ -21,9 +21,9 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [ }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelDynamic, model] [_vModelDynamic, model]
@ -37,11 +37,11 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 2`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_bind = _resolveDirective(\\"bind\\") const _directive_bind = _resolveDirective(\\"bind\\")
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_directive_bind, val, key], [_directive_bind, val, key],
@ -56,9 +56,9 @@ exports[`compiler: transform v-model modifiers .lazy 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[ [
@ -77,9 +77,9 @@ exports[`compiler: transform v-model modifiers .number 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[ [
@ -98,9 +98,9 @@ exports[`compiler: transform v-model modifiers .trim 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[ [
@ -119,9 +119,9 @@ exports[`compiler: transform v-model simple expression 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model] [_vModelText, model]
@ -135,9 +135,9 @@ exports[`compiler: transform v-model simple expression for input (checkbox) 1`]
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelCheckbox: _vModelCheckbox, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"checkbox\\", type: \\"checkbox\\",
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@ -152,11 +152,11 @@ exports[`compiler: transform v-model simple expression for input (dynamic type)
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const _directive_bind = _resolveDirective(\\"bind\\") const _directive_bind = _resolveDirective(\\"bind\\")
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_directive_bind, foo, \\"type\\"], [_directive_bind, foo, \\"type\\"],
@ -171,9 +171,9 @@ exports[`compiler: transform v-model simple expression for input (radio) 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelRadio: _vModelRadio, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"radio\\", type: \\"radio\\",
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@ -188,9 +188,9 @@ exports[`compiler: transform v-model simple expression for input (text) 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"input\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"text\\", type: \\"text\\",
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
@ -205,9 +205,9 @@ exports[`compiler: transform v-model simple expression for select 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"select\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelSelect, model] [_vModelSelect, model]
@ -221,9 +221,9 @@ exports[`compiler: transform v-model simple expression for textarea 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", { return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
\\"onUpdate:modelValue\\": $event => (model = $event) \\"onUpdate:modelValue\\": $event => (model = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model] [_vModelText, model]

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

@ -5,9 +5,9 @@ exports[`compiler: v-show transform simple expression 1`] = `
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { vShow: _vShow, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [ return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
[_vShow, a] [_vShow, a]
]) ])
} }

14
packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
View File

@ -5,20 +5,20 @@ exports[`the v-if/else-if/else branchs in Transition should ignore comments 1`]
return function render(_ctx, _cache) { return function render(_ctx, _cache) {
with (_ctx) { with (_ctx) {
const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createVNode: _createVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx } = _Vue const { openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx, createBlock: _createBlock } = _Vue
return (_openBlock(), _createBlock(_Transition, null, { return (_openBlock(), _createBlock(_Transition, null, {
default: _withCtx(() => [ default: _withCtx(() => [
a a
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"hey\\")) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"hey\\"))
: b : b
? (_openBlock(), _createBlock(\\"div\\", { key: 1 }, \\"hey\\")) ? (_openBlock(), _createElementBlock(\\"div\\", { key: 1 }, \\"hey\\"))
: (_openBlock(), _createBlock(\\"div\\", { key: 2 }, [ : (_openBlock(), _createElementBlock(\\"div\\", { key: 2 }, [
c c
? (_openBlock(), _createBlock(\\"p\\", { key: 0 })) ? (_openBlock(), _createElementBlock(\\"p\\", { key: 0 }))
: (_openBlock(), _createBlock(_Fragment, { key: 1 }, [ : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode(\\" this should not be ignored \\"), _createCommentVNode(\\" this should not be ignored \\"),
_createVNode(\\"p\\") _createElementVNode(\\"p\\")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)) ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
])) ]))
]), ]),

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

@ -268,7 +268,7 @@ return { ref }
`; `;
exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import { ref } from 'vue' import { ref } from 'vue'
import Foo, { bar } from './Foo.vue' import Foo, { bar } from './Foo.vue'
@ -284,14 +284,14 @@ export default {
function fn() {} function fn() {}
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(Foo, null, { _createVNode(Foo, null, {
default: _withCtx(() => [ default: _withCtx(() => [
_createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */) _createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */)
]), ]),
_: 1 /* STABLE */ _: 1 /* STABLE */
}), }),
_createVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */) _createElementVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
} }
@ -300,7 +300,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode referencing scope components and directives 1`] = `
"import { unref as _unref, createVNode as _createVNode, withDirectives as _withDirectives, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { unref as _unref, createElementVNode as _createElementVNode, withDirectives as _withDirectives, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import ChildComp from './Child.vue' import ChildComp from './Child.vue'
import SomeOtherComp from './Other.vue' import SomeOtherComp from './Other.vue'
@ -311,8 +311,8 @@ export default {
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [ _withDirectives(_createElementVNode(\\"div\\", null, null, 512 /* NEED_PATCH */), [
[_unref(vMyDir)] [_unref(vMyDir)]
]), ]),
_createVNode(ChildComp), _createVNode(ChildComp),
@ -325,7 +325,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode should not wrap render fn with withId when having scoped styles 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode should not wrap render fn with withId when having scoped styles 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\" "import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxxx\\") const _withId = /*#__PURE__*/_withScopeId(\\"data-v-xxxxxxxx\\")
@ -335,7 +335,7 @@ export default {
const msg = 1 const msg = 1
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(\\"h1\\", null, _toDisplayString(msg))) return (_openBlock(), _createElementBlock(\\"h1\\", null, _toDisplayString(msg)))
} }
} }
@ -343,9 +343,9 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode should work 1`] = `
"import { toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */) const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"static\\", -1 /* HOISTED */)
import { ref } from 'vue' import { ref } from 'vue'
@ -355,8 +355,8 @@ export default {
const count = ref(0) const count = ref(0)
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */), _createElementVNode(\\"div\\", null, _toDisplayString(count.value), 1 /* TEXT */),
_hoisted_1 _hoisted_1
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
} }
@ -399,7 +399,7 @@ return (_ctx, _push, _parent, _attrs) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode template assignment expression codegen 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode template assignment expression codegen 1`] = `
"import { createVNode as _createVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import { ref } from 'vue' import { ref } from 'vue'
@ -412,20 +412,20 @@ export default {
let v = ref(1) let v = ref(1)
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[1] || (_cache[1] = $event => (count.value = 1)) onClick: _cache[1] || (_cache[1] = $event => (count.value = 1))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[2] || (_cache[2] = $event => (maybe.value = count.value)) onClick: _cache[2] || (_cache[2] = $event => (maybe.value = count.value))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value)) onClick: _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = count.value : lett = count.value))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value += 1 : v += 1)) onClick: _cache[4] || (_cache[4] = $event => (_isRef(v) ? v.value += 1 : v += 1))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[5] || (_cache[5] = $event => (_isRef(v) ? v.value -= 1 : v -= 1)) onClick: _cache[5] || (_cache[5] = $event => (_isRef(v) ? v.value -= 1 : v -= 1))
}) })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
@ -436,7 +436,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode template destructure assignment codegen 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode template destructure assignment codegen 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import { ref } from 'vue' import { ref } from 'vue'
@ -449,14 +449,14 @@ export default {
let lett = 1 let lett = 1
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[1] || (_cache[1] = $event => (({ count: count.value } = val))) onClick: _cache[1] || (_cache[1] = $event => (({ count: count.value } = val)))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[2] || (_cache[2] = $event => ([maybe.value] = val)) onClick: _cache[2] || (_cache[2] = $event => ([maybe.value] = val))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[3] || (_cache[3] = $event => (({ lett: lett } = val))) onClick: _cache[3] || (_cache[3] = $event => (({ lett: lett } = val)))
}) })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
@ -467,7 +467,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode template update expression codegen 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode template update expression codegen 1`] = `
"import { createVNode as _createVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import { ref } from 'vue' import { ref } from 'vue'
@ -479,23 +479,23 @@ export default {
let lett = 1 let lett = 1
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[1] || (_cache[1] = $event => (count.value++)) onClick: _cache[1] || (_cache[1] = $event => (count.value++))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[2] || (_cache[2] = $event => (--count.value)) onClick: _cache[2] || (_cache[2] = $event => (--count.value))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[3] || (_cache[3] = $event => (maybe.value++)) onClick: _cache[3] || (_cache[3] = $event => (maybe.value++))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[4] || (_cache[4] = $event => (--maybe.value)) onClick: _cache[4] || (_cache[4] = $event => (--maybe.value))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? lett.value++ : lett++)) onClick: _cache[5] || (_cache[5] = $event => (_isRef(lett) ? lett.value++ : lett++))
}), }),
_createVNode(\\"div\\", { _createElementVNode(\\"div\\", {
onClick: _cache[6] || (_cache[6] = $event => (_isRef(lett) ? --lett.value : --lett)) onClick: _cache[6] || (_cache[6] = $event => (_isRef(lett) ? --lett.value : --lett))
}) })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
@ -506,7 +506,7 @@ return (_ctx, _cache) => {
`; `;
exports[`SFC compile <script setup> inlineTemplate mode v-model codegen 1`] = ` exports[`SFC compile <script setup> inlineTemplate mode v-model codegen 1`] = `
"import { vModelText as _vModelText, createVNode as _createVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, unref as _unref, isRef as _isRef, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import { ref } from 'vue' import { ref } from 'vue'
@ -518,18 +518,18 @@ export default {
let lett = 1 let lett = 1
return (_ctx, _cache) => { return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createVNode(\\"input\\", { _withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (count.value = $event)) \\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (count.value = $event))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, count.value] [_vModelText, count.value]
]), ]),
_withDirectives(_createVNode(\\"input\\", { _withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(maybe) ? maybe.value = $event : null)) \\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(maybe) ? maybe.value = $event : null))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(maybe)] [_vModelText, _unref(maybe)]
]), ]),
_withDirectives(_createVNode(\\"input\\", { _withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = $event : lett = $event)) \\"onUpdate:modelValue\\": _cache[3] || (_cache[3] = $event => (_isRef(lett) ? lett.value = $event : lett = $event))
}, null, 512 /* NEED_PATCH */), [ }, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(lett)] [_vModelText, _unref(lett)]

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

@ -2,7 +2,7 @@
exports[`source map 1`] = ` exports[`source map 1`] = `
Object { Object {
"mappings": ";;;wBACE,aAA8B;IAAzB,aAAmB,4BAAbA,WAAM", "mappings": ";;;wBACE,oBAA8B;IAAzB,oBAAmB,4BAAbA,WAAM",
"names": Array [ "names": Array [
"render", "render",
], ],

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

@ -1,102 +1,102 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler sfc: transform asset url should allow for full base URLs, with paths 1`] = ` exports[`compiler sfc: transform asset url should allow for full base URLs, with paths 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" })) return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/src/logo.png\\" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url should allow for full base URLs, without paths 1`] = ` exports[`compiler sfc: transform asset url should allow for full base URLs, without paths 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" })) return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost:3000/logo.png\\" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url should allow for full base URLs, without port 1`] = ` exports[`compiler sfc: transform asset url should allow for full base URLs, without port 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" })) return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"http://localhost/logo.png\\" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url should allow for full base URLs, without protocol 1`] = ` exports[`compiler sfc: transform asset url should allow for full base URLs, without protocol 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"img\\", { src: \\"//localhost/logo.png\\" })) return (_openBlock(), _createElementBlock(\\"img\\", { src: \\"//localhost/logo.png\\" }))
}" }"
`; `;
exports[`compiler sfc: transform asset url support uri fragment 1`] = ` exports[`compiler sfc: transform asset url support uri fragment 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from '@svg/file.svg' import _imports_0 from '@svg/file.svg'
const _hoisted_1 = _imports_0 + '#fragment' const _hoisted_1 = _imports_0 + '#fragment'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"use\\", { href: _hoisted_1 })) return (_openBlock(), _createElementBlock(\\"use\\", { href: _hoisted_1 }))
}" }"
`; `;
exports[`compiler sfc: transform asset url support uri is empty 1`] = ` exports[`compiler sfc: transform asset url support uri is empty 1`] = `
"import { openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"use\\", { href: '' })) return (_openBlock(), _createElementBlock(\\"use\\", { href: '' }))
}" }"
`; `;
exports[`compiler sfc: transform asset url transform assetUrls 1`] = ` exports[`compiler sfc: transform asset url transform assetUrls 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
import _imports_1 from 'fixtures/logo.png' import _imports_1 from 'fixtures/logo.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { src: _imports_0 }), _createElementVNode(\\"img\\", { src: _imports_0 }),
_createVNode(\\"img\\", { src: _imports_1 }), _createElementVNode(\\"img\\", { src: _imports_1 }),
_createVNode(\\"img\\", { src: _imports_1 }), _createElementVNode(\\"img\\", { src: _imports_1 }),
_createVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }), _createElementVNode(\\"img\\", { src: \\"http://example.com/fixtures/logo.png\\" }),
_createVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }), _createElementVNode(\\"img\\", { src: \\"/fixtures/logo.png\\" }),
_createVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" }) _createElementVNode(\\"img\\", { src: \\"data:image/png;base64,i\\" })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;
exports[`compiler sfc: transform asset url with explicit base 1`] = ` exports[`compiler sfc: transform asset url with explicit base 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from 'bar.png' import _imports_0 from 'bar.png'
import _imports_1 from '@theme/bar.png' import _imports_1 from '@theme/bar.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { src: \\"/foo/bar.png\\" }), _createElementVNode(\\"img\\", { src: \\"/foo/bar.png\\" }),
_createVNode(\\"img\\", { src: \\"bar.png\\" }), _createElementVNode(\\"img\\", { src: \\"bar.png\\" }),
_createVNode(\\"img\\", { src: _imports_0 }), _createElementVNode(\\"img\\", { src: _imports_0 }),
_createVNode(\\"img\\", { src: _imports_1 }) _createElementVNode(\\"img\\", { src: _imports_1 })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;
exports[`compiler sfc: transform asset url with includeAbsolute: true 1`] = ` exports[`compiler sfc: transform asset url with includeAbsolute: true 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from './bar.png' import _imports_0 from './bar.png'
import _imports_1 from '/bar.png' import _imports_1 from '/bar.png'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { src: _imports_0 }), _createElementVNode(\\"img\\", { src: _imports_0 }),
_createVNode(\\"img\\", { src: _imports_1 }), _createElementVNode(\\"img\\", { src: _imports_1 }),
_createVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" }) _createElementVNode(\\"img\\", { src: \\"https://foo.bar/baz.png\\" })
], 64 /* STABLE_FRAGMENT */)) ], 64 /* STABLE_FRAGMENT */))
}" }"
`; `;

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

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler sfc: transform srcset transform srcset 1`] = ` exports[`compiler sfc: transform srcset transform srcset 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
@ -15,52 +15,52 @@ const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x' const _hoisted_8 = \\"/logo.png\\" + ', ' + _imports_0 + ' 2x'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"\\" srcset: \\"\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_1 srcset: _hoisted_1
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_2 srcset: _hoisted_2
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_3 srcset: _hoisted_3
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_4 srcset: _hoisted_4
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_5 srcset: _hoisted_5
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_6 srcset: _hoisted_6
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_7 srcset: _hoisted_7
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: \\"/logo.png, /logo.png 2x\\" srcset: \\"/logo.png, /logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\", src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: _hoisted_8 srcset: _hoisted_8
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\", src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
}) })
@ -69,55 +69,55 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = ` exports[`compiler sfc: transform srcset transform srcset w/ base 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"\\" srcset: \\"\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png\\" srcset: \\"/foo/logo.png\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\" srcset: \\"/foo/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x\\" srcset: \\"/foo/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x\\" srcset: \\"/foo/logo.png, /foo/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png\\" srcset: \\"/foo/logo.png 2x, /foo/logo.png\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\" srcset: \\"/foo/logo.png 2x, /foo/logo.png 3x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\" srcset: \\"/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: \\"/logo.png, /logo.png 2x\\" srcset: \\"/logo.png, /logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\", src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: \\"/logo.png, /foo/logo.png 2x\\" srcset: \\"/logo.png, /foo/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\", src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
}) })
@ -126,7 +126,7 @@ export function render(_ctx, _cache) {
`; `;
exports[`compiler sfc: transform srcset transform srcset w/ includeAbsolute: true 1`] = ` exports[`compiler sfc: transform srcset transform srcset w/ includeAbsolute: true 1`] = `
"import { createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\" "import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
import _imports_0 from './logo.png' import _imports_0 from './logo.png'
import _imports_1 from '/logo.png' import _imports_1 from '/logo.png'
@ -142,52 +142,52 @@ const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x' const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
export function render(_ctx, _cache) { export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createElementBlock(_Fragment, null, [
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: \\"\\" srcset: \\"\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_1 srcset: _hoisted_1
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_2 srcset: _hoisted_2
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_3 srcset: _hoisted_3
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_4 srcset: _hoisted_4
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_5 srcset: _hoisted_5
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_6 srcset: _hoisted_6
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"./logo.png\\", src: \\"./logo.png\\",
srcset: _hoisted_7 srcset: _hoisted_7
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: _hoisted_8 srcset: _hoisted_8
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"https://example.com/logo.png\\", src: \\"https://example.com/logo.png\\",
srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\" srcset: \\"https://example.com/logo.png, https://example.com/logo.png 2x\\"
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"/logo.png\\", src: \\"/logo.png\\",
srcset: _hoisted_9 srcset: _hoisted_9
}), }),
_createVNode(\\"img\\", { _createElementVNode(\\"img\\", {
src: \\"data:image/png;base64,i\\", src: \\"data:image/png;base64,i\\",
srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\" srcset: \\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"
}) })

1
packages/compiler-ssr/src/index.ts
View File

@ -35,6 +35,7 @@ export function compile(
// apply DOM-specific parsing options // apply DOM-specific parsing options
...parserOptions, ...parserOptions,
ssr: true, ssr: true,
inSSR: true,
scopeId: options.mode === 'function' ? null : options.scopeId, scopeId: options.mode === 'function' ? null : options.scopeId,
// always prefix since compiler-ssr doesn't have size concern // always prefix since compiler-ssr doesn't have size concern
prefixIdentifiers: true, prefixIdentifiers: true,

1
packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
View File

@ -241,6 +241,7 @@ function createVNodeSlotBranch(
): ReturnStatement { ): ReturnStatement {
// apply a sub-transform using vnode-based transforms. // apply a sub-transform using vnode-based transforms.
const rawOptions = rawOptionsMap.get(parentContext.root)! const rawOptions = rawOptionsMap.get(parentContext.root)!
const subOptions = { const subOptions = {
...rawOptions, ...rawOptions,
// overwrite with vnode-based transforms // overwrite with vnode-based transforms

10
packages/runtime-core/src/index.ts
View File

@ -262,13 +262,19 @@ export {
setBlockTracking, setBlockTracking,
createTextVNode, createTextVNode,
createCommentVNode, createCommentVNode,
createStaticVNode createStaticVNode,
createElementVNode,
createElementBlock,
guardReactiveProps
} from './vnode' } from './vnode'
export { export {
toDisplayString, toDisplayString,
camelize, camelize,
capitalize, capitalize,
toHandlerKey toHandlerKey,
normalizeProps,
normalizeClass,
normalizeStyle
} from '@vue/shared' } from '@vue/shared'
// For test-utils // For test-utils

227
packages/runtime-core/src/vnode.ts
View File

@ -243,6 +243,44 @@ export function setBlockTracking(value: number) {
isBlockTreeEnabled += value isBlockTreeEnabled += value
} }
function setupBlock(vnode: VNode) {
// save current block children on the block vnode
vnode.dynamicChildren =
isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
// close block
closeBlock()
// a block is always going to be patched, so track it as a child of its
// parent block
if (isBlockTreeEnabled > 0 && currentBlock) {
currentBlock.push(vnode)
}
return vnode
}
/**
* @private
*/
export function createElementBlock(
type: string,
props?: Record<string, any> | null,
children?: any,
patchFlag?: number,
dynamicProps?: string[],
shapeFlag?: number
) {
return setupBlock(
createBaseVNode(
type,
props,
children,
patchFlag,
dynamicProps,
shapeFlag,
true /* isBlock */
)
)
}
/** /**
* Create a block root vnode. Takes the same exact arguments as `createVNode`. * Create a block root vnode. Takes the same exact arguments as `createVNode`.
* A block root keeps track of dynamic nodes within the block in the * A block root keeps track of dynamic nodes within the block in the
@ -257,25 +295,16 @@ export function createBlock(
patchFlag?: number, patchFlag?: number,
dynamicProps?: string[] dynamicProps?: string[]
): VNode { ): VNode {
const vnode = createVNode( return setupBlock(
type, createVNode(
props, type,
children, props,
patchFlag, children,
dynamicProps, patchFlag,
true /* isBlock: prevent a block from tracking itself */ dynamicProps,
true /* isBlock: prevent a block from tracking itself */
)
) )
// save current block children on the block vnode
vnode.dynamicChildren =
isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
// close block
closeBlock()
// a block is always going to be patched, so track it as a child of its
// parent block
if (isBlockTreeEnabled > 0 && currentBlock) {
currentBlock.push(vnode)
}
return vnode
} }
export function isVNode(value: any): value is VNode { export function isVNode(value: any): value is VNode {
@ -334,6 +363,93 @@ const normalizeRef = ({ ref }: VNodeProps): VNodeNormalizedRefAtom | null => {
: null) as any : null) as any
} }
function createBaseVNode(
type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
props: (Data & VNodeProps) | null = null,
children: unknown = null,
patchFlag = 0,
dynamicProps: string[] | null = null,
shapeFlag = ShapeFlags.ELEMENT,
isBlockNode = false,
needFullChildrenNormalization = false
) {
const vnode = {
__v_isVNode: true,
__v_skip: true,
type,
props,
key: props && normalizeKey(props),
ref: props && normalizeRef(props),
scopeId: currentScopeId,
slotScopeIds: null,
children,
component: null,
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetAnchor: null,
staticCount: 0,
shapeFlag,
patchFlag,
dynamicProps,
dynamicChildren: null,
appContext: null
} as VNode
if (needFullChildrenNormalization) {
normalizeChildren(vnode, children)
// normalize suspense children
if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
;(type as typeof SuspenseImpl).normalize(vnode)
}
} else if (children) {
// compiled element vnode - if children is passed, only possible types are
// string or Array.
vnode.shapeFlag |= isString(children)
? ShapeFlags.TEXT_CHILDREN
: ShapeFlags.ARRAY_CHILDREN
}
// validate key
if (__DEV__ && vnode.key !== vnode.key) {
warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type)
}
// track vnode for block tree
if (
isBlockTreeEnabled > 0 &&
// avoid a block node from tracking itself
!isBlockNode &&
// has current parent block
currentBlock &&
// presence of a patch flag indicates this node needs patching on updates.
// component nodes also should always be patched, because even if the
// component doesn't need to update, it needs to persist the instance on to
// the next vnode so that it can be properly unmounted later.
(vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
// the EVENTS flag is only for hydration and if it is the only flag, the
// vnode should not be considered dynamic due to handler caching.
vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
) {
currentBlock.push(vnode)
}
if (__COMPAT__) {
convertLegacyVModelProps(vnode)
convertLegacyRefInFor(vnode)
defineLegacyVNodeProperties(vnode)
}
return vnode
}
export { createBaseVNode as createElementVNode }
export const createVNode = (__DEV__ export const createVNode = (__DEV__
? createVNodeWithArgsTransform ? createVNodeWithArgsTransform
: _createVNode) as typeof _createVNode : _createVNode) as typeof _createVNode
@ -377,9 +493,7 @@ function _createVNode(
// class & style normalization. // class & style normalization.
if (props) { if (props) {
// for reactive or proxy objects, we need to clone it to enable mutation. // for reactive or proxy objects, we need to clone it to enable mutation.
if (isProxy(props) || InternalObjectKey in props) { props = guardReactiveProps(props)!
props = extend({}, props)
}
let { class: klass, style } = props let { class: klass, style } = props
if (klass && !isString(klass)) { if (klass && !isString(klass)) {
props.class = normalizeClass(klass) props.class = normalizeClass(klass)
@ -419,70 +533,23 @@ function _createVNode(
) )
} }
const vnode: VNode = { return createBaseVNode(
__v_isVNode: true,
__v_skip: true,
type, type,
props, props,
key: props && normalizeKey(props), children,
ref: props && normalizeRef(props),
scopeId: currentScopeId,
slotScopeIds: null,
children: null,
component: null,
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetAnchor: null,
shapeFlag,
patchFlag, patchFlag,
dynamicProps, dynamicProps,
dynamicChildren: null, shapeFlag,
appContext: null isBlockNode,
} true
)
}
// validate key export function guardReactiveProps(props: (Data & VNodeProps) | null) {
if (__DEV__ && vnode.key !== vnode.key) { if (!props) return null
warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type) return isProxy(props) || InternalObjectKey in props
} ? extend({}, props)
: props
normalizeChildren(vnode, children)
// normalize suspense children
if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
;(type as typeof SuspenseImpl).normalize(vnode)
}
if (
isBlockTreeEnabled > 0 &&
// avoid a block node from tracking itself
!isBlockNode &&
// has current parent block
currentBlock &&
// presence of a patch flag indicates this node needs patching on updates.
// component nodes also should always be patched, because even if the
// component doesn't need to update, it needs to persist the instance on to
// the next vnode so that it can be properly unmounted later.
(patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
// the EVENTS flag is only for hydration and if it is the only flag, the
// vnode should not be considered dynamic due to handler caching.
patchFlag !== PatchFlags.HYDRATE_EVENTS
) {
currentBlock.push(vnode)
}
if (__COMPAT__) {
convertLegacyVModelProps(vnode)
convertLegacyRefInFor(vnode)
defineLegacyVNodeProperties(vnode)
}
return vnode
} }
export function cloneVNode<T, U>( export function cloneVNode<T, U>(

12
packages/shared/src/normalizeProp.ts
View File

@ -76,3 +76,15 @@ export function normalizeClass(value: unknown): string {
} }
return res.trim() return res.trim()
} }
export function normalizeProps(props: Record<string, any> | null) {
if (!props) return null
let { class: klass, style } = props
if (klass && !isString(klass)) {
props.class = normalizeClass(klass)
}
if (style) {
props.style = normalizeStyle(style)
}
return props
}