perf: ts type, close #5044

Author: tangjinzhou

components/_util/hooks/useConfigInject.ts

@@ -1,8 +1,9 @@
 import type { RequiredMark } from '../../form/Form';
-import type { ComputedRef, UnwrapRef, VNodeChild } from 'vue';
+import type { ComputedRef, UnwrapRef } from 'vue';
 import { computed, inject } from 'vue';
 import type { ConfigProviderProps, Direction, SizeType } from '../../config-provider';
 import { defaultConfigProvider } from '../../config-provider';
+import type { VueNode } from '../type';
 
 export default (
   name: string,
@@ -20,7 +21,7 @@ export default (
     requiredMark?: RequiredMark;
   }>;
   autoInsertSpaceInButton: ComputedRef<boolean>;
-  renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
+  renderEmpty?: ComputedRef<(componentName?: string) => VueNode>;
   virtual: ComputedRef<boolean>;
   dropdownMatchSelectWidth: ComputedRef<boolean | number>;
   getPopupContainer: ComputedRef<ConfigProviderProps['getPopupContainer']>;

components/_util/type.ts

@@ -1,4 +1,4 @@
-import type { App, PropType, VNodeChild, Plugin, Ref } from 'vue';
+import type { App, PropType, Plugin, Ref, VNode } from 'vue';
 
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
 export const tuple = <T extends string[]>(...args: T) => args;
@@ -29,7 +29,8 @@ export interface PropOptions<T = any, D = T> {
   validator?(value: unknown): boolean;
 }
 
-export type VueNode = VNodeChild | JSX.Element;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 
 export const withInstall = <T>(comp: T) => {
   const c = comp as any;

components/_util/vue-types/index.ts

@@ -26,7 +26,7 @@ PropTypes.extend([
     default: undefined,
   },
   {
-    name: 'VNodeChild',
+    name: 'VueNode',
     getter: true,
     type: null,
   },
@@ -39,5 +39,5 @@ export function withUndefined<T extends { default?: any }>(type: T): T {
 export default PropTypes as VueTypesInterface & {
   readonly looseBool: VueTypeValidableDef<boolean>;
   readonly style: VueTypeValidableDef<CSSProperties>;
-  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+  readonly VueNode: VueTypeValidableDef<VueNode>;
 };

components/alert/index.tsx

@@ -45,19 +45,19 @@ const alertProps = {
   /** Whether Alert can be closed */
   closable: PropTypes.looseBool,
   /** Close text to show */
-  closeText: PropTypes.VNodeChild,
+  closeText: PropTypes.any,
   /** Content of Alert */
-  message: PropTypes.VNodeChild,
+  message: PropTypes.any,
   /** Additional content of Alert */
-  description: PropTypes.VNodeChild,
+  description: PropTypes.any,
   /** Trigger when animation ending of Alert */
   afterClose: PropTypes.func.def(noop),
   /** Whether to show icon */
   showIcon: PropTypes.looseBool,
   prefixCls: PropTypes.string,
   banner: PropTypes.looseBool,
-  icon: PropTypes.VNodeChild,
-  onClose: PropTypes.VNodeChild,
+  icon: PropTypes.any,
+  onClose: PropTypes.any,
 };
 
 export type AlertProps = Partial<ExtractPropTypes<typeof alertProps>>;

components/anchor/AnchorLink.tsx

@@ -9,7 +9,7 @@ import { useInjectAnchor } from './context';
 const anchorLinkProps = {
   prefixCls: PropTypes.string,
   href: PropTypes.string.def('#'),
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   target: PropTypes.string,
 };
 

components/avatar/Avatar.tsx

@@ -23,7 +23,7 @@ export const avatarProps = {
   src: PropTypes.string,
   /** Srcset of image avatar */
   srcset: PropTypes.string,
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
   alt: PropTypes.string,
   gap: PropTypes.number,
   draggable: PropTypes.bool,

components/badge/Badge.tsx

@@ -26,7 +26,7 @@ export const badgeProps = {
   // sync [email protected]
   size: PropTypes.oneOf(tuple('default', 'small')).def('default'),
   color: PropTypes.string,
-  text: PropTypes.VNodeChild,
+  text: PropTypes.any,
   offset: PropTypes.arrayOf(PropTypes.oneOfType([String, Number])),
   numberStyle: PropTypes.style,
   title: PropTypes.string,

components/button/buttonTypes.ts

@@ -36,7 +36,7 @@ const buttonProps = () => ({
   ghost: PropTypes.looseBool,
   block: PropTypes.looseBool,
   danger: PropTypes.looseBool,
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
   href: PropTypes.string,
   target: PropTypes.string,
   title: PropTypes.string,

components/carousel/index.tsx

@@ -20,8 +20,8 @@ export const CarouselProps = {
   // style: PropTypes.React.CSSProperties,
   prefixCls: PropTypes.string,
   accessibility: PropTypes.looseBool,
-  nextArrow: PropTypes.VNodeChild,
-  prevArrow: PropTypes.VNodeChild,
+  nextArrow: PropTypes.any,
+  prevArrow: PropTypes.any,
   pauseOnHover: PropTypes.looseBool,
   // className: PropTypes.string,
   adaptiveHeight: PropTypes.looseBool,

components/cascader/index.tsx

@@ -133,7 +133,7 @@ const cascaderProps = {
     type: [Boolean, Object] as PropType<boolean | ShowSearchType | undefined>,
     default: undefined as PropType<boolean | ShowSearchType | undefined>,
   },
-  notFoundContent: PropTypes.VNodeChild,
+  notFoundContent: PropTypes.any,
   loadData: PropTypes.func,
   /** 次级菜单的展开方式，可选 'click' 和 'hover' */
   expandTrigger: PropTypes.oneOf(tuple('click', 'hover')),
@@ -147,7 +147,7 @@ const cascaderProps = {
   popupVisible: PropTypes.looseBool,
   fieldNames: { type: Object as PropType<FieldNamesType> },
   autofocus: PropTypes.looseBool,
-  suffixIcon: PropTypes.VNodeChild,
+  suffixIcon: PropTypes.any,
   showSearchRender: PropTypes.any,
   onChange: PropTypes.func,
   onPopupVisibleChange: PropTypes.func,

components/comment/index.tsx

@@ -1,22 +1,22 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
-import PropsTypes from '../_util/vue-types';
+import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import type { VueNode } from '../_util/type';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 export const commentProps = {
-  actions: PropsTypes.array,
+  actions: PropTypes.array,
   /** The element to display as the comment author. */
-  author: PropsTypes.VNodeChild,
+  author: PropTypes.any,
   /** The element to display as the comment avatar - generally an antd Avatar */
-  avatar: PropsTypes.VNodeChild,
+  avatar: PropTypes.any,
   /** The main content of the comment */
-  content: PropsTypes.VNodeChild,
+  content: PropTypes.any,
   /** Comment prefix defaults to '.ant-comment' */
-  prefixCls: PropsTypes.string,
+  prefixCls: PropTypes.string,
   /** A datetime element containing the time to be displayed */
-  datetime: PropsTypes.VNodeChild,
+  datetime: PropTypes.any,
 };
 
 export type CommentProps = Partial<ExtractPropTypes<typeof commentProps>>;

components/config-provider/renderEmpty.tsx

@@ -1,7 +1,7 @@
-import type { VNodeChild } from 'vue';
 import { inject } from 'vue';
 import Empty from '../empty';
 import { defaultConfigProvider } from '.';
+import type { VueNode } from '../_util/type';
 
 export interface RenderEmptyProps {
   componentName?: string;
@@ -31,7 +31,7 @@ const RenderEmpty = (props: RenderEmptyProps) => {
   return renderHtml(props.componentName);
 };
 
-function renderEmpty(componentName?: string): VNodeChild | JSX.Element {
+function renderEmpty(componentName?: string): VueNode {
   return <RenderEmpty componentName={componentName} />;
 }
 

components/descriptions/index.tsx

@@ -28,7 +28,7 @@ export const DescriptionsItemProps = {
 
 const descriptionsItemProp = {
   prefixCls: PropTypes.string,
-  label: PropTypes.VNodeChild,
+  label: PropTypes.any,
   labelStyle: PropTypes.style,
   contentStyle: PropTypes.style,
   span: PropTypes.number.def(1),
@@ -125,8 +125,8 @@ const descriptionsProps = {
   prefixCls: PropTypes.string,
   bordered: PropTypes.looseBool,
   size: PropTypes.oneOf(tuple('default', 'middle', 'small')).def('default'),
-  title: PropTypes.VNodeChild,
-  extra: PropTypes.VNodeChild,
+  title: PropTypes.any,
+  extra: PropTypes.any,
   column: {
     type: [Number, Object] as PropType<number | Partial<Record<Breakpoint, number>>>,
     default: (): number | Partial<Record<Breakpoint, number>> => DEFAULT_COLUMN_MAP,

components/drawer/index.tsx

@@ -35,7 +35,7 @@ const defaultPushState: PushState = { distance: 180 };
 const drawerProps = () => ({
   autofocus: PropTypes.looseBool,
   closable: PropTypes.looseBool,
-  closeIcon: PropTypes.VNodeChild,
+  closeIcon: PropTypes.any,
   destroyOnClose: PropTypes.looseBool,
   forceRender: PropTypes.looseBool,
   getContainer: PropTypes.any,
@@ -55,7 +55,7 @@ const drawerProps = () => ({
   headerStyle: PropTypes.object,
   bodyStyle: PropTypes.object,
   contentWrapperStyle: PropTypes.object,
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
   visible: PropTypes.looseBool,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -64,12 +64,12 @@ const drawerProps = () => ({
   push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]),
   placement: PropTypes.oneOf(PlacementTypes),
   keyboard: PropTypes.looseBool,
-  extra: PropTypes.VNodeChild,
-  footer: PropTypes.VNodeChild,
+  extra: PropTypes.any,
+  footer: PropTypes.any,
   footerStyle: PropTypes.object,
   level: PropTypes.any,
   levelMove: PropTypes.any,
-  handle: PropTypes.VNodeChild,
+  handle: PropTypes.any,
   /** @deprecated Use `@afterVisibleChange` instead */
   afterVisibleChange: PropTypes.func,
 });

components/form/FormItem.tsx

@@ -76,9 +76,9 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
 export const formItemProps = {
   htmlFor: PropTypes.string,
   prefixCls: PropTypes.string,
-  label: PropTypes.VNodeChild,
-  help: PropTypes.VNodeChild,
-  extra: PropTypes.VNodeChild,
+  label: PropTypes.any,
+  help: PropTypes.any,
+  extra: PropTypes.any,
   labelCol: { type: Object as PropType<ColProps> },
   wrapperCol: { type: Object as PropType<ColProps> },
   hasFeedback: PropTypes.looseBool.def(false),

components/layout/Sider.tsx

@@ -30,7 +30,7 @@ export const siderProps = {
   defaultCollapsed: PropTypes.looseBool,
   reverseArrow: PropTypes.looseBool,
   zeroWidthTriggerStyle: PropTypes.style,
-  trigger: PropTypes.VNodeChild,
+  trigger: PropTypes.any,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   breakpoint: PropTypes.oneOf(tuple('xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl')),

components/menu/src/ItemGroup.tsx

@@ -6,7 +6,7 @@ import { useInjectMenu } from './hooks/useMenuContext';
 import { useMeasure } from './hooks/useKeyPath';
 
 const menuItemGroupProps = {
-  title: PropTypes.VNodeChild,
+  title: PropTypes.any,
 };
 
 export type MenuItemGroupProps = Partial<ExtractPropTypes<typeof menuItemGroupProps>>;

components/menu/src/MenuItem.tsx

@@ -19,7 +19,7 @@ const menuItemProps = {
   disabled: Boolean,
   danger: Boolean,
   title: { type: [String, Boolean], default: undefined },
-  icon: PropTypes.VNodeChild,
+  icon: PropTypes.any,
 };
 
 export type MenuItemProps = Partial<ExtractPropTypes<typeof menuItemProps>>;

components/menu/src/SubMenu.tsx

@@ -23,8 +23,8 @@ import isValid from '../../_util/isValid';
 let indexGuid = 0;
 
 const subMenuProps = {
-  icon: PropTypes.VNodeChild,
-  title: PropTypes.VNodeChild,
+  icon: PropTypes.any,
+  title: PropTypes.any,
   disabled: Boolean,
   level: Number,
   popupClassName: String,

components/page-header/index.tsx

@@ -14,14 +14,14 @@ import classNames from '../_util/classNames';
 import ResizeObserver from '../vc-resize-observer';
 
 export const pageHeaderProps = {
-  backIcon: PropTypes.VNodeChild,
+  backIcon: PropTypes.any,
   prefixCls: PropTypes.string,
-  title: PropTypes.VNodeChild,
-  subTitle: PropTypes.VNodeChild,
+  title: PropTypes.any,
+  subTitle: PropTypes.any,
   breadcrumb: PropTypes.object,
   tags: PropTypes.any,
-  footer: PropTypes.VNodeChild,
-  extra: PropTypes.VNodeChild,
+  footer: PropTypes.any,
+  extra: PropTypes.any,
   avatar: PropTypes.object,
   ghost: PropTypes.looseBool,
   onBack: PropTypes.func,

components/progress/Steps.tsx

@@ -1,5 +1,6 @@
-import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
+import type { VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
@@ -25,7 +26,7 @@ export default defineComponent({
     const styledSteps = computed(() => {
       const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props;
 
-      const temp: VNodeChild[] = [];
+      const temp: VueNode[] = [];
       for (let i = 0; i < steps; i += 1) {
         const cls = {
           [`${prefixCls}-steps-item`]: true,

components/progress/progress.tsx

@@ -1,4 +1,3 @@
-import type { VNodeChild } from 'vue';
 import { computed, defineComponent } from 'vue';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
@@ -12,6 +11,7 @@ import { getSuccessPercent, validProgress } from './utils';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
 import { progressProps, progressStatuses } from './props';
+import type { VueNode } from '../_util/type';
 
 export default defineComponent({
   name: 'AProgress',
@@ -67,7 +67,7 @@ export default defineComponent({
       const successPercent = getSuccessPercent(props);
       if (!showInfo) return null;
 
-      let text: VNodeChild;
+      let text: VueNode;
       const textFormatter = format || slots?.format || ((val: number) => `${val}%`);
       const isLineType = type === 'line';
       if (
@@ -92,7 +92,7 @@ export default defineComponent({
       const { type, steps, strokeColor } = props;
       const progressInfo = renderProcessInfo();
 
-      let progress: VNodeChild;
+      let progress: VueNode;
       // Render progress shape
       if (type === 'line') {
         progress = steps ? (

components/progress/props.ts

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types';
+import type { VueNode } from '../_util/type';
 import { tuple } from '../_util/type';
-import type { PropType, VNodeChild, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
 
 export const progressStatuses = tuple('normal', 'exception', 'active', 'success');
 export type ProgressStatusesType = typeof progressStatuses[number];
@@ -21,7 +22,7 @@ export const progressProps = () => ({
   prefixCls: PropTypes.string,
   type: PropTypes.oneOf(ProgressType),
   percent: PropTypes.number,
-  format: { type: Function as PropType<(percent?: number, successPercent?: number) => VNodeChild> },
+  format: { type: Function as PropType<(percent?: number, successPercent?: number) => VueNode> },
   status: PropTypes.oneOf(progressStatuses),
   showInfo: PropTypes.looseBool,
   strokeWidth: PropTypes.number,

components/statistic/Statistic.tsx

@@ -19,9 +19,9 @@ export const statisticProps = {
   valueRender: PropTypes.any,
   formatter: PropTypes.any,
   precision: PropTypes.number,
-  prefix: PropTypes.VNodeChild,
-  suffix: PropTypes.VNodeChild,
-  title: PropTypes.VNodeChild,
+  prefix: PropTypes.any,
+  suffix: PropTypes.any,
+  title: PropTypes.any,
   onFinish: PropTypes.func,
   loading: PropTypes.looseBool,
 };