fix(compiler-dom): comments in the v-if branchs should be ignored whe…

…n used in Transition (#3622) fix #3619
vuejs · May 24, 2021 · 7c74feb · 7c74feb
1 parent 3ef1fcc
commit 7c74feb
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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()
+})