fix(transition): warn only when there is more than one rendered child (#903)

packages/compiler-dom/src/transforms/warnTransitionChildren.ts

@@ -1,4 +1,10 @@
-import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-core'
+import {
+  NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  ComponentNode,
+  IfBranchNode
+} from '@vue/compiler-core'
 import { TRANSITION } from '../runtimeHelpers'
 import { createDOMCompilerError, DOMErrorCodes } from '../errors'
 
@@ -8,17 +14,30 @@ export const warnTransitionChildren: NodeTransform = (node, context) => {
     node.tagType === ElementTypes.COMPONENT
   ) {
     const component = context.isBuiltInComponent(node.tag)
-    if (
-      component === TRANSITION &&
-      (node.children.length > 1 || node.children[0].type === NodeTypes.FOR)
-    ) {
-      context.onError(
-        createDOMCompilerError(DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN, {
-          start: node.children[0].loc.start,
-          end: node.children[node.children.length - 1].loc.end,
-          source: ''
-        })
-      )
+    if (component === TRANSITION) {
+      return () => {
+        if (node.children.length && hasMultipleChildren(node)) {
+          context.onError(
+            createDOMCompilerError(
+              DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN,
+              {
+                start: node.children[0].loc.start,
+                end: node.children[node.children.length - 1].loc.end,
+                source: ''
+              }
+            )
+          )
+        }
+      }
     }
   }
 }
+
+function hasMultipleChildren(node: ComponentNode | IfBranchNode): boolean {
+  const child = node.children[0]
+  return (
+    node.children.length !== 1 ||
+    child.type === NodeTypes.FOR ||
+    (child.type === NodeTypes.IF && child.branches.some(hasMultipleChildren))
+  )
+}