wip: transition group root compat

packages/runtime-core/src/compat/deprecations.ts

@@ -32,7 +32,10 @@ export const enum DeprecationTypes {
   V_ON_KEYCODE_MODIFIER = 'V_ON_KEYCODE_MODIFIER',
   PROPS_DEFAULT_THIS = 'PROPS_DEFAULT_THIS',
   CUSTOM_DIR = 'CUSTOM_DIR',
-  WATCH_ARRAY = 'WATCH_ARRAY'
+  WATCH_ARRAY = 'WATCH_ARRAY',
+
+  TRANSITION_CLASSES = 'TRANSITION_CLASSES',
+  TRANSITION_GROUP_ROOT = 'TRANSITION_GROUP_ROOT'
 }
 
 type DeprecationData = {
@@ -213,11 +216,28 @@ const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     message:
       `"watch" option or vm.$watch on an array value will no longer ` +
       `trigger on array mutation unless the "deep" option is specified. ` +
-      `If current usage is intended, you can suppress this warning with:` +
+      `If current usage is intended, you can disable the compat behavior and ` +
+      `suppress this warning with:` +
       `\n\n  configureCompat({ ${
         DeprecationTypes.WATCH_ARRAY
-      }: { mode: 3 }})\n`,
+      }: { enabled: false }})\n`,
     link: `https://v3.vuejs.org/guide/migration/watch.html`
+  },
+
+  [DeprecationTypes.TRANSITION_CLASSES]: {
+    message: `` // this feature cannot be runtime-detected
+  },
+
+  [DeprecationTypes.TRANSITION_GROUP_ROOT]: {
+    message:
+      `<TransitionGroup> no longer renders a root <span> element by ` +
+      `default if no "tag" prop is specified. If you do not rely on the span ` +
+      `for styling, you can disable the compat behavior and suppress this ` +
+      `warning with:` +
+      `\n\n  configureCompat({ ${
+        DeprecationTypes.TRANSITION_GROUP_ROOT
+      }: { enabled: false }})\n`,
+    link: `https://v3.vuejs.org/guide/migration/transition-group.html`
   }
 }
 
@@ -250,7 +270,7 @@ export function warnDeprecation(key: DeprecationTypes, ...args: any[]) {
   hasWarned[dupKey] = true
   const { message, link } = deprecationData[key]
   warn(
-    `(DEPRECATION ${key}) ${
+    `(deprecation ${key}) ${
       typeof message === 'function' ? message(...args) : message
     }${link ? `\n  Details: ${link}` : ``}`
   )

packages/runtime-core/src/index.ts

@@ -288,12 +288,13 @@ export { LegacyConfig } from './compat/globalConfig'
 
 import { warnDeprecation } from './compat/deprecations'
 import { createCompatVue } from './compat/global'
-import { isCompatEnabled } from './compat/compatConfig'
+import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig'
 
 const _compatUtils = {
   warnDeprecation,
   createCompatVue,
-  isCompatEnabled
+  isCompatEnabled,
+  softAssertCompatEnabled
 }
 
 export const compatUtils = (__COMPAT__

packages/runtime-dom/src/components/Transition.ts

@@ -3,7 +3,9 @@ import {
   BaseTransitionProps,
   h,
   warn,
-  FunctionalComponent
+  FunctionalComponent,
+  compatUtils,
+  DeprecationTypes
 } from '@vue/runtime-core'
 import { isObject, toNumber, extend } from '@vue/shared'
 
@@ -99,10 +101,13 @@ export function resolveTransitionProps(
   } = rawProps
 
   // legacy transition class compat
+  const legacyClassEnabled =
+    __COMPAT__ &&
+    compatUtils.isCompatEnabled(DeprecationTypes.TRANSITION_CLASSES)
   let legacyEnterFromClass: string
   let legacyAppearFromClass: string
   let legacyLeaveFromClass: string
-  if (__COMPAT__) {
+  if (__COMPAT__ && legacyClassEnabled) {
     const toLegacyClass = (cls: string) => cls.replace(/-from$/, '')
     if (!rawProps.enterFromClass) {
       legacyEnterFromClass = toLegacyClass(enterFromClass)
@@ -148,7 +153,7 @@ export function resolveTransitionProps(
       hook && hook(el, resolve)
       nextFrame(() => {
         removeTransitionClass(el, isAppear ? appearFromClass : enterFromClass)
-        if (__COMPAT__) {
+        if (__COMPAT__ && legacyClassEnabled) {
           removeTransitionClass(
             el,
             isAppear ? legacyAppearFromClass : legacyEnterFromClass
@@ -166,7 +171,7 @@ export function resolveTransitionProps(
     onBeforeEnter(el) {
       onBeforeEnter && onBeforeEnter(el)
       addTransitionClass(el, enterFromClass)
-      if (__COMPAT__) {
+      if (__COMPAT__ && legacyClassEnabled) {
         addTransitionClass(el, legacyEnterFromClass)
       }
       addTransitionClass(el, enterActiveClass)
@@ -174,7 +179,7 @@ export function resolveTransitionProps(
     onBeforeAppear(el) {
       onBeforeAppear && onBeforeAppear(el)
       addTransitionClass(el, appearFromClass)
-      if (__COMPAT__) {
+      if (__COMPAT__ && legacyClassEnabled) {
         addTransitionClass(el, legacyAppearFromClass)
       }
       addTransitionClass(el, appearActiveClass)
@@ -184,7 +189,7 @@ export function resolveTransitionProps(
     onLeave(el, done) {
       const resolve = () => finishLeave(el, done)
       addTransitionClass(el, leaveFromClass)
-      if (__COMPAT__) {
+      if (__COMPAT__ && legacyClassEnabled) {
         addTransitionClass(el, legacyLeaveFromClass)
       }
       // force reflow so *-leave-from classes immediately take effect (#2593)
@@ -192,7 +197,7 @@ export function resolveTransitionProps(
       addTransitionClass(el, leaveActiveClass)
       nextFrame(() => {
         removeTransitionClass(el, leaveFromClass)
-        if (__COMPAT__) {
+        if (__COMPAT__ && legacyClassEnabled) {
           removeTransitionClass(el, legacyLeaveFromClass)
         }
         addTransitionClass(el, leaveToClass)

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -20,7 +20,9 @@ import {
   createVNode,
   onUpdated,
   SetupContext,
-  toRaw
+  toRaw,
+  compatUtils,
+  DeprecationTypes
 } from '@vue/runtime-core'
 import { extend } from '@vue/shared'
 
@@ -99,7 +101,18 @@ const TransitionGroupImpl = {
     return () => {
       const rawProps = toRaw(props)
       const cssTransitionProps = resolveTransitionProps(rawProps)
-      const tag = rawProps.tag || Fragment
+      let tag = rawProps.tag || Fragment
+
+      if (
+        __COMPAT__ &&
+        !rawProps.tag &&
+        compatUtils.softAssertCompatEnabled(
+          DeprecationTypes.TRANSITION_GROUP_ROOT
+        )
+      ) {
+        tag = 'span'
+      }
+
       prevChildren = children
       children = slots.default ? getTransitionRawChildren(slots.default()) : []