From 4bf7ba19bf6b1a6c242090d512c91e1bf8c7c8cc Mon Sep 17 00:00:00 2001
From: HcySunYang <HcySunYang@outlook.com>
Date: Fri, 26 Mar 2021 03:43:44 +0800
Subject: [PATCH] fix(compiler-core): detect v-if branch root with comment as
 dev fragment (#2785)

fix #2780
---
 .../__snapshots__/compile.spec.ts.snap          |  6 +++---
 .../transforms/__snapshots__/vIf.spec.ts.snap   |  2 +-
 packages/compiler-core/src/transforms/vIf.ts    | 17 +++++++++++++----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
index 0534a5eb4d3..2b3c0c939d8 100644
--- a/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
@@ -16,7 +16,7 @@ return function render(_ctx, _cache) {
         ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
         : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
             _createTextVNode(\\"no\\")
-          ], 64 /* STABLE_FRAGMENT */)),
+          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
       (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createBlock(\\"div\\", null, [
           _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -40,7 +40,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 64 /* STABLE_FRAGMENT */)),
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
     (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createBlock(\\"div\\", null, [
         _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -63,7 +63,7 @@ export function render(_ctx, _cache) {
       ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 64 /* STABLE_FRAGMENT */)),
+        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
     (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createBlock(\\"div\\", null, [
         _createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index ec8bf762621..3bb58a86baa 100644
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -111,7 +111,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
       : orNot
         ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
+        : (_openBlock(), _createBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
   }
 }"
 `;
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index a9ea7acfb47..4c4d2fa666f 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -246,15 +246,24 @@ function createChildrenCodegenNode(
       injectProp(vnodeCall, keyProperty, context)
       return vnodeCall
     } else {
+      let patchFlag = PatchFlags.STABLE_FRAGMENT
+      let patchFlagText = PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
+      // check if the fragment actually contains a single valid child with
+      // the rest being comments
+      if (
+        __DEV__ &&
+        children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
+      ) {
+        patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT
+        patchFlagText += `, ${PatchFlagNames[PatchFlags.DEV_ROOT_FRAGMENT]}`
+      }
+
       return createVNodeCall(
         context,
         helper(FRAGMENT),
         createObjectExpression([keyProperty]),
         children,
-        PatchFlags.STABLE_FRAGMENT +
-          (__DEV__
-            ? ` /* ${PatchFlagNames[PatchFlags.STABLE_FRAGMENT]} */`
-            : ``),
+        patchFlag + (__DEV__ ? ` /* ${patchFlagText} */` : ``),
         undefined,
         undefined,
         true,