fix(compiler): generate correct fragment children when it contains single text node or slot outlet

packages/compiler-core/src/transforms/transformElement.ts

@@ -87,8 +87,26 @@ export const transformElement: NodeTransform = (node, context) => {
             patchFlag |= PatchFlags.DYNAMIC_SLOTS
           }
         } else {
-          // only v-for fragments will have keyed/unkeyed flags
-          args.push(node.children)
+          if (node.children.length === 1) {
+            const child = node.children[0]
+            const type = child.type
+            // pass directly if the only child is one of:
+            // - text (plain / interpolation / expression)
+            // - <slot> outlet (already an array)
+            if (
+              type === NodeTypes.TEXT ||
+              type === NodeTypes.INTERPOLATION ||
+              type === NodeTypes.COMPOUND_EXPRESSION ||
+              (type === NodeTypes.ELEMENT &&
+                (child as ElementNode).tagType === ElementTypes.SLOT)
+            ) {
+              args.push(child)
+            } else {
+              args.push(node.children)
+            }
+          } else {
+            args.push(node.children)
+          }
         }
       }
       // patchFlag & dynamicPropNames

packages/compiler-core/src/transforms/vFor.ts

@@ -14,7 +14,9 @@ import {
   ElementTypes,
   ObjectExpression,
   createObjectExpression,
-  createObjectProperty
+  createObjectProperty,
+  TemplateChildNode,
+  CallExpression
 } from '../ast'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { getInnerRange, findProp } from '../utils'
@@ -120,12 +122,23 @@ export const transformFor = createStructuralDirectiveTransform(
                 )
               ])
             }
+            let childBlockChildren: TemplateChildNode[] | CallExpression =
+              node.children
+            if (childBlockChildren.length === 1) {
+              const child = childBlockChildren[0]
+              if (
+                child.type === NodeTypes.ELEMENT &&
+                child.tagType === ElementTypes.SLOT
+              ) {
+                childBlockChildren = child.codegenNode!
+              }
+            }
             childBlock = createSequenceExpression([
               createCallExpression(helper(OPEN_BLOCK)),
               createCallExpression(helper(CREATE_BLOCK), [
                 helper(FRAGMENT),
                 childBlockProps,
-                node.children
+                childBlockChildren
               ])
             ])
           } else {

packages/compiler-core/src/transforms/vIf.ts

@@ -164,19 +164,30 @@ function createChildrenCodegenNode(
   const { children } = branch
   const child = children[0]
   const needFragmentWrapper =
-    children.length > 1 || child.type !== NodeTypes.ELEMENT
+    children.length !== 1 ||
+    child.type !== NodeTypes.ELEMENT ||
+    child.tagType === ElementTypes.SLOT
   if (needFragmentWrapper) {
     const blockArgs: CallExpression['arguments'] = [
       helper(FRAGMENT),
       keyExp,
       children
     ]
-    // optimize away nested fragments when child is a ForNode
-    if (children.length === 1 && child.type === NodeTypes.FOR) {
-      const forBlockExp = child.codegenNode
-      // directly use the for block's children and patchFlag
-      blockArgs[2] = forBlockExp.arguments[2]
-      blockArgs[3] = forBlockExp.arguments[3]
+    if (children.length === 1) {
+      // optimize away nested fragments when child is a ForNode
+      if (child.type === NodeTypes.FOR) {
+        const forBlockArgs = child.codegenNode.arguments
+        // directly use the for block's children and patchFlag
+        blockArgs[2] = forBlockArgs[2]
+        blockArgs[3] = forBlockArgs[3]
+      } else if (
+        child.type === NodeTypes.ELEMENT &&
+        child.tagType === ElementTypes.SLOT
+      ) {
+        // <template v-if="..."><slot/></template>
+        // since slot always returns array, use it directly as the fragment children.
+        blockArgs[2] = child.codegenNode!
+      }
     }
     return createCallExpression(helper(CREATE_BLOCK), blockArgs)
   } else {