wip: refactor compat check utils

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

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({

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,
+    MODE: 3
-    COMPONENT_FUNCTIONAL: false,
-    WATCH_ARRAY: false,
-    INSTANCE_ATTRS_CLASS_STYLE: false
   })
 }

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 { checkCompatEnabled, softAssertCompatEnabled } from './compatConfig'
-import { DeprecationTypes, warnDeprecation } from './deprecations'
+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)
   }
 

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 {
-import { DeprecationTypes, warnDeprecation } from './deprecations'
+  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
     },

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 { checkCompatEnabled } from './compat/compatConfig'
-import { DeprecationTypes, warnDeprecation } from './compat/deprecations'
+import { DeprecationTypes } from './compat/deprecations'
 import { compatH } from './compat/renderFn'
 
 export type Data = Record<string, unknown>
@@ -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)

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
 }
 

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
         )