diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index 384b6612a31..e9089fed6a6 100644 --- 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 + !( + 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 index 00000000000..224352b2aba --- /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 8083ce72afd..3cccdfffc88 100644 --- 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(` + +
hey
+ +
hey
+ +
+

+ +

+

+
+ `).code + ).toMatchSnapshot() +})