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

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\\")
   }
 }"
 `;

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

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()
   })

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))
     ]))
   }
 }"

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))
   }
 }"
 `;

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 <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))
   }
 }"
 `;

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(
+      `<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([

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()
     })
 

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