feat(compiler): warn invalid children for transition and keep-alive

packages/compiler-dom/src/errors.ts

@@ -30,6 +30,7 @@ export const enum DOMErrorCodes {
   X_V_MODEL_ON_FILE_INPUT_ELEMENT,
   X_V_MODEL_UNNECESSARY_VALUE,
   X_V_SHOW_NO_EXPRESSION,
+  X_TRANSITION_INVALID_CHILDREN,
   __EXTEND_POINT__
 }
 
@@ -42,5 +43,6 @@ export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot used on file inputs since they are read-only. Use a v-on:change listener instead.`,
   [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
-  [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`
+  [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`,
+  [DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN]: `<Transition> expects exactly one child element or component.`
 }

packages/compiler-dom/src/index.ts

@@ -17,6 +17,7 @@ import { transformModel } from './transforms/vModel'
 import { transformOn } from './transforms/vOn'
 import { transformShow } from './transforms/vShow'
 import { TRANSITION, TRANSITION_GROUP } from './runtimeHelpers'
+import { warnTransitionChildren } from './transforms/warnTransitionChildren'
 
 export const parserOptions = __BROWSER__
   ? parserOptionsMinimal
@@ -37,7 +38,11 @@ export function compile(
   return baseCompile(template, {
     ...parserOptions,
     ...options,
-    nodeTransforms: [transformStyle, ...(options.nodeTransforms || [])],
+    nodeTransforms: [
+      transformStyle,
+      ...(__DEV__ ? [warnTransitionChildren] : []),
+      ...(options.nodeTransforms || [])
+    ],
     directiveTransforms: {
       cloak: noopDirectiveTransform,
       html: transformVHtml,

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

@@ -0,0 +1,24 @@
+import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-core'
+import { TRANSITION } from '../runtimeHelpers'
+import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+
+export const warnTransitionChildren: NodeTransform = (node, context) => {
+  if (
+    node.type === NodeTypes.ELEMENT &&
+    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: ''
+        })
+      )
+    }
+  }
+}