From 814b1e2d486f8acad5f82ea022f10983f1053707 Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Sat, 17 Apr 2021 17:06:14 +0800
Subject: [PATCH 1/2] fix(compiler-dom): comments in the v-if branchs should be
 ignored when used in Transition

---
 packages/compiler-core/src/transform.ts       |  4 ++-
 packages/compiler-core/src/transforms/vIf.ts  |  9 +++++-
 .../warnTransitionChildren.spec.ts.snap       | 29 +++++++++++++++++++
 .../transforms/warnTransitionChildren.spec.ts | 18 ++++++++++++
 .../src/transforms/warnTransitionChildren.ts  |  2 ++
 5 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 packages/compiler-dom/__tests__/transforms/__snapshots__/warnTransitionChildren.spec.ts.snap

diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 9dd5b8be4da..ae242b61043 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -99,6 +99,7 @@ export interface TransformContext
     vSlot: number
     vPre: number
     vOnce: number
+    transition: number
   }
   parent: ParentNode | null
   childIndex: number
@@ -176,7 +177,8 @@ export function createTransformContext(
       vFor: 0,
       vSlot: 0,
       vPre: 0,
-      vOnce: 0
+      vOnce: 0,
+      transition: 0
     },
     parent: null,
     currentNode: root,
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 384b6612a31..7124eb64718 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -146,7 +146,14 @@ 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 && !context.scopes.transition) ||
+          !(
+            context.parent &&
+            context.parent.type === NodeTypes.ELEMENT &&
+            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(`
+    <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()
+})
diff --git a/packages/compiler-dom/src/transforms/warnTransitionChildren.ts b/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
index c4347879fad..8f07594580e 100644
--- a/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
+++ b/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
@@ -15,7 +15,9 @@ export const warnTransitionChildren: NodeTransform = (node, context) => {
   ) {
     const component = context.isBuiltInComponent(node.tag)
     if (component === TRANSITION) {
+      context.scopes.transition++
       return () => {
+        context.scopes.transition--
         if (node.children.length && hasMultipleChildren(node)) {
           context.onError(
             createDOMCompilerError(

From 8185136ae1cb40ba89bd3f897a72a621252243de Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 24 May 2021 17:06:58 -0400
Subject: [PATCH 2/2] refactor: simplify

---
 packages/compiler-core/src/transform.ts                   | 4 +---
 packages/compiler-core/src/transforms/vIf.ts              | 8 +++++---
 .../compiler-dom/src/transforms/warnTransitionChildren.ts | 2 --
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index ae242b61043..9dd5b8be4da 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -99,7 +99,6 @@ export interface TransformContext
     vSlot: number
     vPre: number
     vOnce: number
-    transition: number
   }
   parent: ParentNode | null
   childIndex: number
@@ -177,8 +176,7 @@ export function createTransformContext(
       vFor: 0,
       vSlot: 0,
       vPre: 0,
-      vOnce: 0,
-      transition: 0
+      vOnce: 0
     },
     parent: null,
     currentNode: root,
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 7124eb64718..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(
@@ -147,11 +147,13 @@ export function processIf(
         context.removeNode()
         const branch = createIfBranch(node, dir)
         if (
-          (__DEV__ && comments.length && !context.scopes.transition) ||
+          __DEV__ &&
+          comments.length &&
+          // #3619 ignore comments if the v-if is direct child of <transition>
           !(
             context.parent &&
             context.parent.type === NodeTypes.ELEMENT &&
-            context.parent.tag === 'transition'
+            isBuiltInType(context.parent.tag, 'transition')
           )
         ) {
           branch.children = [...comments, ...branch.children]
diff --git a/packages/compiler-dom/src/transforms/warnTransitionChildren.ts b/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
index 8f07594580e..c4347879fad 100644
--- a/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
+++ b/packages/compiler-dom/src/transforms/warnTransitionChildren.ts
@@ -15,9 +15,7 @@ export const warnTransitionChildren: NodeTransform = (node, context) => {
   ) {
     const component = context.isBuiltInComponent(node.tag)
     if (component === TRANSITION) {
-      context.scopes.transition++
       return () => {
-        context.scopes.transition--
         if (node.children.length && hasMultipleChildren(node)) {
           context.onError(
             createDOMCompilerError(