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

packages/compiler-dom/__tests__/transforms/warnTransitionChildren.spec.ts

@@ -0,0 +1,140 @@
+import { compile } from '../../src'
+
+describe('compiler warnings', () => {
+  describe('Transition', () => {
+    function checkWarning(
+      template: string,
+      shouldWarn: boolean,
+      message = `<Transition> expects exactly one child element or component.`
+    ) {
+      const spy = jest.fn()
+      compile(template.trim(), {
+        hoistStatic: true,
+        transformHoist: null,
+        onError: err => {
+          spy(err.message)
+        }
+      })
+
+      if (shouldWarn) expect(spy).toHaveBeenCalledWith(message)
+      else expect(spy).not.toHaveBeenCalled()
+    }
+
+    test('warns if multiple children', () => {
+      checkWarning(
+        `
+      <transition>
+        <div>hey</div>
+        <div>hey</div>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('warns with v-for', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-for="i in items">hey</div>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('warns with multiple v-if + v-for', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-if="a" v-for="i in items">hey</div>
+        <div v-else v-for="i in items">hey</div>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('warns with template v-if', () => {
+      checkWarning(
+        `
+      <transition>
+        <template v-if="ok"></template>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('warns with multiple templates', () => {
+      checkWarning(
+        `
+      <transition>
+        <template v-if="a"></template>
+        <template v-else></template>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('warns if multiple children with v-if', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-if="one">hey</div>
+        <div v-if="other">hey</div>
+      </transition>
+      `,
+        true
+      )
+    })
+
+    test('does not warn with regular element', () => {
+      checkWarning(
+        `
+      <transition>
+        <div>hey</div>
+      </transition>
+      `,
+        false
+      )
+    })
+
+    test('does not warn with one single v-if', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-if="a">hey</div>
+      </transition>
+      `,
+        false
+      )
+    })
+
+    test('does not warn with v-if v-else-if v-else', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-if="a">hey</div>
+        <div v-else-if="b">hey</div>
+        <div v-else>hey</div>
+      </transition>
+      `,
+        false
+      )
+    })
+
+    test('does not warn with v-if v-else', () => {
+      checkWarning(
+        `
+      <transition>
+        <div v-if="a">hey</div>
+        <div v-else>hey</div>
+      </transition>
+      `,
+        false
+      )
+    })
+  })
+})

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))
+  )
+}