From 584ac88b54b8053cf2c9adc13e4b1a5cadb36302 Mon Sep 17 00:00:00 2001 From: Illya Klymov Date: Fri, 11 Oct 2019 18:04:56 +0300 Subject: [PATCH] fix(compiler): update v-if directive to use Comment instead of Empty (#208) --- .../__snapshots__/codegen.spec.ts.snap | 2 +- .../__snapshots__/compile.spec.ts.snap | 6 ++--- .../compiler-core/__tests__/codegen.spec.ts | 2 +- .../__snapshots__/hoistStatic.spec.ts.snap | 25 +++++++++++++++-- .../__snapshots__/vFor.spec.ts.snap | 4 +-- .../transforms/__snapshots__/vIf.spec.ts.snap | 24 ++++++++--------- .../__tests__/transforms/hoistStatic.spec.ts | 27 +++++++++++++++++++ .../__tests__/transforms/vIf.spec.ts | 6 ++--- packages/compiler-core/src/codegen.ts | 5 +++- 9 files changed, 76 insertions(+), 25 deletions(-) diff --git a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap index 412311cb..c4ebbc91 100644 --- a/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap +++ b/packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap @@ -67,7 +67,7 @@ exports[`compiler: codegen comment 1`] = ` " return function render() { with (this) { - return _createVNode(_Comment, 0, \\"foo\\") + return _createVNode(_Comment, null, \\"foo\\") } }" `; diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap index 5975fc39..5ff93c23 100644 --- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap +++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap @@ -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 diff --git a/packages/compiler-core/__tests__/codegen.spec.ts b/packages/compiler-core/__tests__/codegen.spec.ts index d2eace42..e582f98a 100644 --- a/packages/compiler-core/__tests__/codegen.spec.ts +++ b/packages/compiler-core/__tests__/codegen.spec.ts @@ -179,7 +179,7 @@ describe('compiler: codegen', () => { expect(code).toMatch( `return _${helperNameMap[CREATE_VNODE]}(_${ helperNameMap[COMMENT] - }, 0, "foo")` + }, null, "foo")` ) expect(code).toMatchSnapshot() }) diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap index 1a10ec98..bebf5aad 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap @@ -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)) ])) } }" diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap index 454a5f43..534bf9f6 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap @@ -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)) } }" `; diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap index f2959952..fdb9a82d 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap @@ -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 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 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)) } }" `; diff --git a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts index 05cb7bdd..60ae861b 100644 --- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts +++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts @@ -116,6 +116,33 @@ describe('compiler: hoistStatic transform', () => { expect(generate(root).code).toMatchSnapshot() }) + test('hoist nested static tree with comments', () => { + const { root, args } = transformWithHoist( + `
` + ) + 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(`
`) expect(root.hoists).toMatchObject([ diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts index 2052a7bd..73f14084 100644 --- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts @@ -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() }) diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts index 28c28034..62ec7a9a 100644 --- a/packages/compiler-core/src/codegen.ts +++ b/packages/compiler-core/src/codegen.ts @@ -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