fix(compiler-dom): comments in the v-if branchs should be ignored when used in Transi...

fix #3619

diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 384b6612a31128a0e8d9a82e043862ddcad8a6ec..e9089fed6a6dc5b0d4617f0b40726d4d5f0f9422 100644 (file)
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -34,7 +34,7 @@ import {
   OPEN_BLOCK,
   CREATE_VNODE
 } from '../runtimeHelpers'
-import { injectProp, findDir, findProp } from '../utils'
+import { injectProp, findDir, findProp, isBuiltInType } from '../utils'
 import { PatchFlags, PatchFlagNames } from '@vue/shared'
 
 export const transformIf = createStructuralDirectiveTransform(
@@ -146,7 +146,16 @@ export function processIf(
         // move the node to the if node's branches
         context.removeNode()
         const branch = createIfBranch(node, dir)
-        if (__DEV__ && comments.length) {
+        if (
+          __DEV__ &&
+          comments.length &&
+          // #3619 ignore comments if the v-if is direct child of <transition>
+          !(
+            context.parent &&
+            context.parent.type === NodeTypes.ELEMENT &&
+            isBuiltInType(context.parent.tag, 'transition')
+          )
+        ) {
           branch.children = [...comments, ...branch.children]
         }
 

diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
new file mode 100644 (file)
index 0000000..224352b
--- /dev/null
+++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the v-if/else-if/else branchs in Transition should ignore comments 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createVNode: _createVNode, Fragment: _Fragment, Transition: _Transition, withCtx: _withCtx } = _Vue
+
+    return (_openBlock(), _createBlock(_Transition, null, {
+      default: _withCtx(() => [
+        a
+          ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"hey\\"))
+          : b
+            ? (_openBlock(), _createBlock(\\"div\\", { key: 1 }, \\"hey\\"))
+            : (_openBlock(), _createBlock(\\"div\\", { key: 2 }, [
+                c
+                  ? (_openBlock(), _createBlock(\\"p\\", { key: 0 }))
+                  : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
+                      _createCommentVNode(\\" this should not be ignored \\"),
+                      _createVNode(\\"p\\")
+                    ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+              ]))
+      ]),
+      _: 1 /* STABLE */
+    }))
+  }
+}"
+`;

diff --git a/packages/compiler-dom/__tests__/transforms/warnTransitionChildren.spec.ts b/packages/compiler-dom/__tests__/transforms/warnTransitionChildren.spec.ts
index 8083ce72afdce6275fcb6ab208bdedef71f1f131..3cccdfffc889c17b9dc0b8d0e4daf5a790a0d175 100644 (file)
--- a/packages/compiler-dom/__tests__/transforms/warnTransitionChildren.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/warnTransitionChildren.spec.ts
@@ -138,3 +138,21 @@ describe('compiler warnings', () => {
     })
   })
 })
+
+test('the v-if/else-if/else branchs in Transition should ignore comments', () => {
+  expect(
+    compile(`
+    <transition>
+      <div v-if="a">hey</div>
+      <!-- this should be ignored -->
+      <div v-else-if="b">hey</div>
+      <!-- this should be ignored -->
+      <div v-else>
+        <p v-if="c"/>
+        <!-- this should not be ignored -->
+        <p v-else/>
+      </div>
+    </transition>
+    `).code
+  ).toMatchSnapshot()
+})