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

fix(compiler): update v-if directive to use Comment instead of Empty (#208)

Browse Source
This commit is contained in:
Illya Klymov 2019-10-11 18:04:56 +03:00 committed by Evan You
parent 35d31a2ba2
commit 584ac88b54
9 changed files with 76 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,7 +67,7 @@ exports[`compiler: codegen comment 1`] = `
"
return function render() {
with (this) {
return _createVNode(_Comment, 0, \\"foo\\")
return _createVNode(_Comment, null, \\"foo\\")
}
}"
`;

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

@ -5,7 +5,7 @@ exports[`compiler: integration tests function mode 1`] = `
return function render() {
with (this) {
const { toString: _toString, openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
const { toString: _toString, openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment, Fragment: _Fragment, renderList: _renderList } = _Vue
return (_openBlock(), _createBlock(\\"div\\", {
id: \\"foo\\",
@ -26,7 +26,7 @@ return function render() {
`;
exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
"const { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } = Vue
"const { toString, openBlock, createVNode, createBlock, Comment, Fragment, renderList } = Vue
return function render() {
const _ctx = this
@ -48,7 +48,7 @@ return function render() {
`;
exports[`compiler: integration tests module mode 1`] = `
"import { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } from \\"vue\\"
"import { toString, openBlock, createVNode, createBlock, Comment, Fragment, renderList } from \\"vue\\"
export default function render() {
const _ctx = this

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

@ -179,7 +179,7 @@ describe('compiler: codegen', () => {
expect(code).toMatch(
`return _${helperNameMap[CREATE_VNODE]}(_${
helperNameMap[COMMENT]
}, 0, "foo")`
}, null, "foo")`
)
expect(code).toMatchSnapshot()
})

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

@ -37,6 +37,26 @@ return function render() {
}"
`;
exports[`compiler: hoistStatic transform hoist nested static tree with comments 1`] = `
"const _Vue = Vue
const _createVNode = Vue.createVNode
const _Comment = Vue.Comment
const _hoisted_1 = _createVNode(\\"div\\", null, [
_createVNode(_Comment, null, \\"comment\\")
])
return function render() {
with (this) {
const { createVNode: _createVNode, Comment: _Comment, createBlock: _createBlock, openBlock: _openBlock } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
_hoisted_1
]))
}
}"
`;
exports[`compiler: hoistStatic transform hoist siblings with common non-hoistable parent 1`] = `
"const _Vue = Vue
const _createVNode = Vue.createVNode
@ -213,6 +233,7 @@ return function render() {
exports[`compiler: hoistStatic transform should hoist v-if props/children if static 1`] = `
"const _Vue = Vue
const _createVNode = Vue.createVNode
const _Comment = Vue.Comment
const _hoisted_1 = {
key: 0,
@ -222,14 +243,14 @@ const _hoisted_2 = _createVNode(\\"span\\")
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), _createBlock(\\"div\\", null, [
(_openBlock(), ok
? _createBlock(\\"div\\", _hoisted_1, [
_hoisted_2
])
: _createBlock(_Empty))
: _createBlock(_Comment))
]))
}
}"

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

@ -155,13 +155,13 @@ exports[`compiler: v-for codegen v-if + v-for 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, renderList: _renderList, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, Empty: _Empty } = _Vue
const { openBlock: _openBlock, renderList: _renderList, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"div\\"))
}), 128 /* UNKEYED_FRAGMENT */)
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;

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

@ -5,11 +5,11 @@ exports[`compiler: v-if codegen basic v-if 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _createBlock(\\"div\\", { key: 0 })
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;
@ -19,7 +19,7 @@ exports[`compiler: v-if codegen template v-if 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _createBlock(_Fragment, { key: 0 }, [
@ -27,7 +27,7 @@ return function render() {
\\"hello\\",
_createVNode(\\"p\\")
])
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;
@ -37,11 +37,11 @@ exports[`compiler: v-if codegen template v-if w/ single <slot/> child 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, renderSlot: _renderSlot, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, renderSlot: _renderSlot, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _renderSlot($slots, \\"default\\", { key: 0 })
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;
@ -51,7 +51,7 @@ exports[`compiler: v-if codegen v-if + v-else 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _createBlock(\\"div\\", { key: 0 })
@ -65,7 +65,7 @@ exports[`compiler: v-if codegen v-if + v-else-if + v-else 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment, Fragment: _Fragment } = _Vue
return (_openBlock(), ok
? _createBlock(\\"div\\", { key: 0 })
@ -81,13 +81,13 @@ exports[`compiler: v-if codegen v-if + v-else-if 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _createBlock(\\"div\\", { key: 0 })
: orNot
? _createBlock(\\"p\\", { key: 1 })
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;
@ -97,11 +97,11 @@ exports[`compiler: v-if codegen v-if on <slot/> 1`] = `
return function render() {
with (this) {
const { openBlock: _openBlock, renderSlot: _renderSlot, createBlock: _createBlock, Empty: _Empty } = _Vue
const { openBlock: _openBlock, renderSlot: _renderSlot, createBlock: _createBlock, Comment: _Comment } = _Vue
return (_openBlock(), ok
? _renderSlot($slots, \\"default\\", { key: 0 })
: _createBlock(_Empty))
: _createBlock(_Comment))
}
}"
`;

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

@ -116,6 +116,33 @@ describe('compiler: hoistStatic transform', () => {
expect(generate(root).code).toMatchSnapshot()
})
test('hoist nested static tree with comments', () => {
const { root, args } = transformWithHoist(
`<div><div><!--comment--></div></div>`
)
expect(root.hoists).toMatchObject([
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: CREATE_VNODE,
arguments: [
`"div"`,
`null`,
[{ type: NodeTypes.COMMENT, content: `comment` }]
]
}
])
expect(args[2]).toMatchObject([
{
type: NodeTypes.ELEMENT,
codegenNode: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`
}
}
])
expect(generate(root).code).toMatchSnapshot()
})
test('hoist siblings with common non-hoistable parent', () => {
const { root, args } = transformWithHoist(`<div><span/><div/></div>`)
expect(root.hoists).toMatchObject([

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

@ -19,7 +19,7 @@ import { CompilerOptions, generate } from '../../src'
import {
OPEN_BLOCK,
CREATE_BLOCK,
EMPTY,
COMMENT,
FRAGMENT,
MERGE_PROPS,
APPLY_DIRECTIVES,
@ -322,7 +322,7 @@ describe('compiler: v-if', () => {
])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as CallExpression
expect(branch2.arguments).toMatchObject([EMPTY])
expect(branch2.arguments).toMatchObject([COMMENT])
expect(generate(root).code).toMatchSnapshot()
})
@ -345,7 +345,7 @@ describe('compiler: v-if', () => {
])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as CallExpression
expect(branch2.arguments).toMatchObject([EMPTY])
expect(branch2.arguments).toMatchObject([COMMENT])
expect(generate(root).code).toMatchSnapshot()
})

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

@ -211,6 +211,9 @@ export function generate(
// to provide the helper here.
if (ast.hoists.length) {
push(`const _${helperNameMap[CREATE_VNODE]} = Vue.createVNode\n`)
if (ast.helpers.includes(COMMENT)) {
push(`const _${helperNameMap[COMMENT]} = Vue.Comment\n`)
}
}
}
}
@ -484,7 +487,7 @@ function genComment(node: CommentNode, context: CodegenContext) {
if (__DEV__) {
const { push, helper } = context
push(
`${helper(CREATE_VNODE)}(${helper(COMMENT)}, 0, ${JSON.stringify(
`${helper(CREATE_VNODE)}(${helper(COMMENT)}, null, ${JSON.stringify(
node.content
)})`,
node