fix(compiler-core): detect v-if branch root with comment as dev fragm…

…ent (#2785) fix #2780
vuejs · Mar 25, 2021 · 4bf7ba1 · 4bf7ba1
1 parent 3755e60
commit 4bf7ba1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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,