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

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

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

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