fix(compiler-core): template v-if should never be treated as dev root…

… fragment close #5189
vuejs · May 11, 2022 · 51f3d38 · 51f3d38
1 parent b7025d2
commit 51f3d38
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 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(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
         : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
             _createTextVNode(\\"no\\")
-          ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
+          ], 64 /* STABLE_FRAGMENT */)),
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
         return (_openBlock(), _createElementBlock(\\"div\\", null, [
           _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -40,7 +40,7 @@ return function render(_ctx, _cache) {
       ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
+        ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createElementBlock(\\"div\\", null, [
         _createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
@@ -63,7 +63,7 @@ export function render(_ctx, _cache) {
       ? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
       : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
           _createTextVNode(\\"no\\")
-        ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
+        ], 64 /* STABLE_FRAGMENT */)),
     (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
       return (_openBlock(), _createElementBlock(\\"div\\", null, [
         _createElementVNode(\\"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(), _createElementBlock(\\"div\\", { key: 0 }))
       : orNot
         ? (_openBlock(), _createElementBlock(\\"p\\", { key: 1 }))
-        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
+        : (_openBlock(), _createElementBlock(_Fragment, { key: 2 }, [\\"fine\\"], 64 /* STABLE_FRAGMENT */))
   }
 }"
 `;

diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
@@ -259,6 +259,7 @@ export interface IfBranchNode extends Node {
   condition: ExpressionNode | undefined // else
   children: TemplateChildNode[]
   userKey?: AttributeNode | DirectiveNode
+  isTemplateIf?: boolean
 }
 
 export interface ForNode extends Node {

diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
@@ -209,15 +209,14 @@ export function processIf(
 }
 
 function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
+  const isTemplateIf = node.tagType === ElementTypes.TEMPLATE
   return {
     type: NodeTypes.IF_BRANCH,
     loc: node.loc,
     condition: dir.name === 'else' ? undefined : dir.exp,
-    children:
-      node.tagType === ElementTypes.TEMPLATE && !findDir(node, 'for')
-        ? node.children
-        : [node],
-    userKey: findProp(node, `key`)
+    children: isTemplateIf && !findDir(node, 'for') ? node.children : [node],
+    userKey: findProp(node, `key`),
+    isTemplateIf
   }
 }
 
@@ -274,6 +273,7 @@ function createChildrenCodegenNode(
       // the rest being comments
       if (
         __DEV__ &&
+        !branch.isTemplateIf &&
         children.filter(c => c.type !== NodeTypes.COMMENT).length === 1
       ) {
         patchFlag |= PatchFlags.DEV_ROOT_FRAGMENT