From a2f441dc0eea2a18b7ab512d660ad3a8bb994dce Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 9 Apr 2021 23:51:50 -0400 Subject: [PATCH] wip: refactor compat check utils --- packages/runtime-core/src/apiWatch.ts | 4 +-- .../src/compat/__tests__/global.spec.ts | 5 ++- .../runtime-core/src/compat/compatConfig.ts | 31 ++++++++++++++++--- packages/runtime-core/src/compat/component.ts | 7 ++--- packages/runtime-core/src/compat/instance.ts | 12 ++++--- packages/runtime-core/src/component.ts | 7 ++--- packages/runtime-core/src/index.ts | 7 ++++- .../src/components/TransitionGroup.ts | 2 +- 8 files changed, 53 insertions(+), 22 deletions(-) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index b739ef26..e98d5478 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -34,7 +34,7 @@ import { import { queuePostRenderEffect } from './renderer' import { warn } from './warning' import { DeprecationTypes } from './compat/deprecations' -import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig' +import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig' export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void @@ -226,7 +226,7 @@ function doWatch( const val = baseGetter() if ( isArray(val) && - softAssertCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance) + checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance) ) { traverse(val) } diff --git a/packages/runtime-core/src/compat/__tests__/global.spec.ts b/packages/runtime-core/src/compat/__tests__/global.spec.ts index 7c153e92..9bd04257 100644 --- a/packages/runtime-core/src/compat/__tests__/global.spec.ts +++ b/packages/runtime-core/src/compat/__tests__/global.spec.ts @@ -1,7 +1,10 @@ import Vue from '@vue/compat' describe('compat: global API', () => { - test('should work', async () => { + beforeEach(() => Vue.configureCompat({ MODE: 2 })) + afterEach(() => Vue.configureCompat({ MODE: 3 })) + + test('should work', () => { const el = document.createElement('div') el.innerHTML = `{{ msg }}` new Vue({ diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts index 06c5c6b4..cc79a539 100644 --- a/packages/runtime-core/src/compat/compatConfig.ts +++ b/packages/runtime-core/src/compat/compatConfig.ts @@ -39,6 +39,9 @@ export function isCompatEnabled( } } +/** + * Use this for features that are completely removed in non-compat build. + */ export function assertCompatEnabled( key: DeprecationTypes, instance: ComponentInternalInstance | null, @@ -51,6 +54,10 @@ export function assertCompatEnabled( } } +/** + * Use this for features where legacy usage is still possible, but will likely + * lead to runtime error if compat is disabled. (warn in all cases) + */ export function softAssertCompatEnabled( key: DeprecationTypes, instance: ComponentInternalInstance | null, @@ -62,12 +69,26 @@ export function softAssertCompatEnabled( return isCompatEnabled(key, instance) } -// disable features that conflict with v3 behavior +/** + * Use this for features with the same syntax but with mutually exclusive + * behavior in 2 vs 3. Only warn if compat is enabled. + * e.g. render function + */ +export function checkCompatEnabled( + key: DeprecationTypes, + instance: ComponentInternalInstance | null, + ...args: any[] +) { + const enabled = isCompatEnabled(key, instance) + if (__DEV__ && enabled) { + warnDeprecation(key, instance, ...args) + } + return enabled +} + +// run tests in v3 mode by default if (__TEST__) { configureCompat({ - COMPONENT_ASYNC: false, - COMPONENT_FUNCTIONAL: false, - WATCH_ARRAY: false, - INSTANCE_ATTRS_CLASS_STYLE: false + MODE: 3 }) } diff --git a/packages/runtime-core/src/compat/component.ts b/packages/runtime-core/src/compat/component.ts index 4812440f..e02dfcd8 100644 --- a/packages/runtime-core/src/compat/component.ts +++ b/packages/runtime-core/src/compat/component.ts @@ -10,8 +10,8 @@ import { import { resolveInjections } from '../componentOptions' import { InternalSlots } from '../componentSlots' import { isVNode } from '../vnode' -import { isCompatEnabled, softAssertCompatEnabled } from './compatConfig' -import { DeprecationTypes, warnDeprecation } from './deprecations' +import { checkCompatEnabled, softAssertCompatEnabled } from './compatConfig' +import { DeprecationTypes } from './deprecations' import { getCompatListeners } from './instanceListeners' import { compatH } from './renderFn' @@ -24,9 +24,8 @@ export function convertLegacyComponent( // use softAssert here. if ( isFunction(comp) && - isCompatEnabled(DeprecationTypes.COMPONENT_ASYNC, instance) + checkCompatEnabled(DeprecationTypes.COMPONENT_ASYNC, instance, comp) ) { - __DEV__ && warnDeprecation(DeprecationTypes.COMPONENT_ASYNC, instance, comp) return convertLegacyAsyncComponent(comp) } diff --git a/packages/runtime-core/src/compat/instance.ts b/packages/runtime-core/src/compat/instance.ts index 38c265a2..1a25801c 100644 --- a/packages/runtime-core/src/compat/instance.ts +++ b/packages/runtime-core/src/compat/instance.ts @@ -1,8 +1,12 @@ import { extend, NOOP } from '@vue/shared' import { PublicPropertiesMap } from '../componentPublicInstance' import { getCompatChildren } from './instanceChildren' -import { assertCompatEnabled, isCompatEnabled } from './compatConfig' -import { DeprecationTypes, warnDeprecation } from './deprecations' +import { + assertCompatEnabled, + checkCompatEnabled, + isCompatEnabled +} from './compatConfig' +import { DeprecationTypes } from './deprecations' import { off, on, once } from './instanceEventEmitter' import { getCompatListeners } from './instanceListeners' import { shallowReadonly } from '@vue/reactivity' @@ -48,7 +52,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) { if (isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, i)) { return new Proxy(i.slots, legacySlotProxyHandlers) } - return i.slots + return __DEV__ ? shallowReadonly(i.slots) : i.slots }, $scopedSlots: i => { @@ -59,7 +63,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) { // overrides existing accessor $attrs: i => { if (__DEV__ && i.type.inheritAttrs === false) { - warnDeprecation(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, i) + checkCompatEnabled(DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE, i) } return __DEV__ ? shallowReadonly(i.attrs) : i.attrs }, diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index a2be7de7..2791fa95 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -54,8 +54,8 @@ import { CompilerOptions } from '@vue/compiler-core' import { markAttrsAccessed } from './componentRenderUtils' import { currentRenderingInstance } from './componentRenderContext' import { startMeasure, endMeasure } from './profiling' -import { isCompatEnabled } from './compat/compatConfig' -import { DeprecationTypes, warnDeprecation } from './compat/deprecations' +import { checkCompatEnabled } from './compat/compatConfig' +import { DeprecationTypes } from './compat/deprecations' import { compatH } from './compat/renderFn' export type Data = Record @@ -687,9 +687,8 @@ export function finishComponentSetup( if ( __COMPAT__ && Component.render && - isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance) + checkCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance) ) { - warnDeprecation(DeprecationTypes.RENDER_FUNCTION, instance) const originalRender = Component.render Component.render = function compatRender() { return originalRender.call(this, compatH) diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index 6d393ec3..9949ca39 100644 --- a/packages/runtime-core/src/index.ts +++ b/packages/runtime-core/src/index.ts @@ -288,12 +288,17 @@ export { LegacyConfig } from './compat/globalConfig' import { warnDeprecation } from './compat/deprecations' import { createCompatVue } from './compat/global' -import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig' +import { + isCompatEnabled, + checkCompatEnabled, + softAssertCompatEnabled +} from './compat/compatConfig' const _compatUtils = { warnDeprecation, createCompatVue, isCompatEnabled, + checkCompatEnabled, softAssertCompatEnabled } diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 50c526ba..f5d443e2 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -106,7 +106,7 @@ const TransitionGroupImpl = { if ( __COMPAT__ && !rawProps.tag && - compatUtils.softAssertCompatEnabled( + compatUtils.checkCompatEnabled( DeprecationTypes.TRANSITION_GROUP_ROOT, instance.parent )