diff --git a/packages/runtime-core/src/compat/deprecations.ts b/packages/runtime-core/src/compat/deprecations.ts index 20cee5de..ff43c44a 100644 --- a/packages/runtime-core/src/compat/deprecations.ts +++ b/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 = { 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: + ` no longer renders a root 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}` : ``}` ) diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index 9f8a94cc..5131a7ae 100644 --- a/packages/runtime-core/src/index.ts +++ b/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__ diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts index 09949fa6..0d5681cb 100644 --- a/packages/runtime-dom/src/components/Transition.ts +++ b/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) diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 16a6aa39..02fa38f1 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/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()) : []