feat: Vue 3 Migration Build support (#5973), close #5765

closes #5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.

Author: garretmh

components/_util/ActionButton.tsx

@@ -26,6 +26,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ActionButton',
   props: actionButtonProps,
   setup(props, { slots }) {

components/_util/BaseInput.tsx

@@ -2,6 +2,7 @@ import { defineComponent, ref, withDirectives } from 'vue';
 import antInput from './antInputDirective';
 import PropTypes from './vue-types';
 const BaseInput = defineComponent({
+  compatConfig: { MODE: 3 },
   props: {
     value: PropTypes.string.def(''),
   },

components/_util/Portal.tsx

@@ -11,6 +11,7 @@ import {
 import { useInjectPortal } from '../vc-trigger/context';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: {

components/_util/PortalWrapper.tsx

@@ -49,6 +49,7 @@ const getParent = (getContainer: GetContainer) => {
 export type GetContainer = string | HTMLElement | (() => HTMLElement);
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PortalWrapper',
   inheritAttrs: false,
   props: {

components/_util/__mocks__/Portal.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: ['getContainer'],

components/_util/transButton.tsx

@@ -15,6 +15,7 @@ const inlineStyle = {
 };
 
 const TransButton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TransButton',
   inheritAttrs: false,
   props: {

components/_util/wave.tsx

@@ -21,6 +21,7 @@ function isNotGrey(color: string) {
   return true;
 }
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Wave',
   props: {
     insertExtraNode: Boolean,

components/affix/index.tsx

@@ -72,6 +72,7 @@ export type AffixExpose = {
 
 export type AffixInstance = ComponentPublicInstance<AffixProps, AffixExpose>;
 const Affix = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAffix',
   props: affixProps(),
   setup(props, { slots, emit, expose }) {

components/alert/index.tsx

@@ -63,6 +63,7 @@ export const alertProps = () => ({
 export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;
 
 const Alert = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAlert',
   inheritAttrs: false,
   props: alertProps(),

components/anchor/Anchor.tsx

@@ -73,6 +73,7 @@ export interface AnchorState {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchor',
   inheritAttrs: false,
   props: anchorProps(),

components/anchor/AnchorLink.tsx

@@ -16,6 +16,7 @@ export const anchorLinkProps = () => ({
 export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchorLink',
   props: initDefaultProps(anchorLinkProps(), { href: '#' }),
   slots: ['title'],

components/auto-complete/index.tsx

@@ -39,6 +39,7 @@ export const AutoCompleteOption = Option;
 export const AutoCompleteOptGroup = OptGroup;
 
 const AutoComplete = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: autoCompleteProps(),

components/avatar/Avatar.tsx

@@ -37,6 +37,7 @@ export const avatarProps = () => ({
 export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const Avatar = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatar',
   inheritAttrs: false,
   props: avatarProps(),

components/avatar/Group.tsx

@@ -27,6 +27,7 @@ export const groupProps = () => ({
 export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
 
 const Group = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatarGroup',
   inheritAttrs: false,
   props: groupProps(),

components/back-top/index.tsx

@@ -32,6 +32,7 @@ export const backTopProps = () => ({
 export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
 
 const BackTop = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABackTop',
   inheritAttrs: false,
   props: backTopProps(),

components/badge/Badge.tsx

@@ -34,6 +34,7 @@ export const badgeProps = () => ({
 export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadge',
   Ribbon,
   inheritAttrs: false,

components/badge/Ribbon.tsx

@@ -16,6 +16,7 @@ export const ribbonProps = () => ({
 export type RibbonProps = Partial<ExtractPropTypes<ReturnType<typeof ribbonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadgeRibbon',
   inheritAttrs: false,
   props: ribbonProps(),

components/badge/ScrollNumber.tsx

@@ -18,6 +18,7 @@ const scrollNumberProps = {
 export type ScrollNumberProps = Partial<ExtractPropTypes<typeof scrollNumberProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ScrollNumber',
   inheritAttrs: false,
   props: scrollNumberProps,

components/badge/SingleNumber.tsx

@@ -45,6 +45,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SingleNumber',
   props: {
     prefixCls: String,

components/breadcrumb/Breadcrumb.tsx

@@ -52,6 +52,7 @@ function defaultItemRender(opt: {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumb',
   props: breadcrumbProps(),
   slots: ['separator', 'itemRender'],

components/breadcrumb/BreadcrumbItem.tsx

@@ -17,6 +17,7 @@ export const breadcrumbItemProps = () => ({
 
 export type BreadcrumbItemProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbItemProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbItem',
   inheritAttrs: false,
   __ANT_BREADCRUMB_ITEM: true,

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -11,6 +11,7 @@ export type BreadcrumbSeparatorProps = Partial<
 >;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,

components/button/LoadingIcon.tsx

@@ -25,6 +25,7 @@ const resetStyle = (node: HTMLSpanElement) => {
   }
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'LoadingIcon',
   props: {
     prefixCls: String,

components/button/button-group.tsx

@@ -16,6 +16,7 @@ export const buttonGroupProps = () => ({
 export type ButtonGroupProps = Partial<ExtractPropTypes<ReturnType<typeof buttonGroupProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButtonGroup',
   props: buttonGroupProps(),
   setup(props, { slots }) {

components/button/button.tsx

@@ -29,6 +29,7 @@ function isUnborderedButtonType(type: ButtonType | undefined) {
 }
 export { buttonProps };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,

components/card/Card.tsx

@@ -49,6 +49,7 @@ export const cardProps = () => ({
 export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
 
 const Card = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACard',
   props: cardProps(),
   slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],

components/card/Grid.tsx

@@ -8,6 +8,7 @@ export const cardGridProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardGridProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardGrid',
   __ANT_CARD_GRID: true,
   props: cardGridProps(),

components/card/Meta.tsx

@@ -12,6 +12,7 @@ export const cardMetaProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardMeta',
   props: cardMetaProps(),
   slots: ['title', 'description', 'avatar'],

components/carousel/index.tsx

@@ -70,6 +70,7 @@ export const carouselProps = () => ({
 });
 export type CarouselProps = Partial<ExtractPropTypes<ReturnType<typeof carouselProps>>>;
 const Carousel = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACarousel',
   inheritAttrs: false,
   props: carouselProps(),

components/cascader/index.tsx

@@ -112,6 +112,7 @@ export interface CascaderRef {
 }
 
 const Cascader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACascader',
   inheritAttrs: false,
   props: initDefaultProps(cascaderProps(), {

components/checkbox/Checkbox.tsx

@@ -12,6 +12,7 @@ import type { CheckboxChangeEvent, CheckboxProps } from './interface';
 import { CheckboxGroupContextKey, checkboxProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckbox',
   inheritAttrs: false,
   __ANT_CHECKBOX: true,

components/checkbox/Group.tsx

@@ -6,6 +6,7 @@ import type { CheckboxOptionType } from './interface';
 import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckboxGroup',
   props: checkboxGroupProps(),
   // emits: ['change', 'update:value'],

components/collapse/Collapse.tsx

@@ -31,6 +31,7 @@ function getActiveKeysArray(activeKey: Key | Key[]) {
 export { collapseProps };
 export type CollapseProps = Partial<ExtractPropTypes<ReturnType<typeof collapseProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapse',
   inheritAttrs: false,
   props: initDefaultProps(collapseProps(), {

components/collapse/CollapsePanel.tsx

@@ -11,6 +11,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 export { collapsePanelProps };
 export type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapsePanel',
   inheritAttrs: false,
   props: initDefaultProps(collapsePanelProps(), {

components/collapse/PanelContent.tsx

@@ -3,6 +3,7 @@ import { collapsePanelProps } from './commonProps';
 import classNames from '../_util/classNames';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PanelContent',
   props: collapsePanelProps(),
   setup(props, { slots }) {

components/comment/index.tsx

@@ -22,6 +22,7 @@ export const commentProps = () => ({
 export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>;
 
 const Comment = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AComment',
   props: commentProps(),
   slots: ['actions', 'author', 'avatar', 'content', 'datetime'],

components/config-provider/index.tsx

@@ -105,6 +105,7 @@ export const globalConfig = () => ({
 });
 
 const ConfigProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AConfigProvider',
   inheritAttrs: false,
   props: configProviderProps(),

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -24,6 +24,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
   extraProps: ExtraProps,
 ) {
   const RangePicker = defineComponent({
+    compatConfig: { MODE: 3 },
     name: 'ARangePicker',
     inheritAttrs: false,
     props: {

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -28,6 +28,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
       ...extraProps,
     };
     return defineComponent({
+      compatConfig: { MODE: 3 },
       name: displayName,
       inheritAttrs: false,
       props: comProps,

components/descriptions/index.tsx

@@ -46,6 +46,7 @@ export type DescriptionsItemProp = Partial<
 >;
 
 export const DescriptionsItem = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptionsItem',
   props: descriptionsItemProp(),
   slots: ['label'],
@@ -157,6 +158,7 @@ export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
   Symbol('descriptionsContext');
 
 const Descriptions = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptions',
   props: descriptionsProps(),
   slots: ['title', 'extra'],

components/divider/index.tsx

@@ -27,6 +27,7 @@ export const dividerProps = () => ({
 export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
 
 const Divider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADivider',
   props: dividerProps(),
   setup(props, { slots }) {

components/drawer/index.tsx

@@ -90,6 +90,7 @@ export const drawerProps = () => ({
 export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>;
 
 const Drawer = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADrawer',
   inheritAttrs: false,
   props: initDefaultProps(drawerProps(), {

components/dropdown/dropdown-button.tsx

@@ -12,6 +12,7 @@ const ButtonGroup = Button.Group;
 export type DropdownButtonProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownButtonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdownButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,

components/dropdown/dropdown.tsx

@@ -15,6 +15,7 @@ import getPlacements from '../tooltip/placements';
 export type DropdownProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownProps>>>;
 
 const Dropdown = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdown',
   inheritAttrs: false,
   props: initDefaultProps(dropdownProps(), {

components/form/ErrorList.tsx

@@ -14,6 +14,7 @@ export interface ErrorListProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ErrorList',
   props: ['errors', 'help', 'onDomErrorVisibleChange', 'helpStatus', 'warnings'],
   setup(props) {

components/form/Form.tsx

@@ -99,6 +99,7 @@ function isEqualName(name1: NamePath, name2: NamePath) {
 }
 
 const Form = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AForm',
   inheritAttrs: false,
   props: initDefaultProps(formProps(), {

components/form/FormItem.tsx

@@ -122,6 +122,7 @@ let indexGuid = 0;
 const defaultItemNamePrefixCls = 'form_item';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItem',
   inheritAttrs: false,
   __ANT_NEW_FORM_ITEM: true,

components/form/FormItemContext.ts

@@ -94,6 +94,7 @@ export const useInjectFormItemContext = () => {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItemRest',
   setup(_, { slots }) {
     provide(InternalContextKey, defaultInternalContext);

components/form/FormItemInput.tsx

@@ -34,6 +34,7 @@ const iconMap: { [key: string]: any } = {
   validating: LoadingOutlined,
 };
 const FormItemInput = defineComponent({
+  compatConfig: { MODE: 3 },
   slots: ['help', 'extra', 'errors'],
   inheritAttrs: false,
   props: [