perf: ⚡️ field.component -> field.componentType and import optz

docs/components/pro/pro-enum.mdx

@@ -30,7 +30,7 @@ export type ProEnumItem = {
 
 - `enum` 属性支持 `ProEnum` 实例， 而这， 是一个支持远程加载的枚举, 并在组件 init 钩子中进行自动加并注入的 field.dataSource 属性， 也就是 enum 原来对应的属性值
 
-- 劫持 `readPretty` 形态下的 field.component, 优化枚举值的展示
+- 劫持 `readPretty` 形态下的 field.componentType, 优化枚举值的展示
 
 ### 针对 Suggestion/Cascader 这种
 

package.json

@@ -13,12 +13,6 @@
   "main": "./dist/lib",
   "module": "./dist/esm",
   "types": "./dist/esm/index.d.ts",
-  "sideEffects": [
-    "dist",
-    "src/*.ts",
-    "*.less",
-    "**/*/style.js"
-  ],
   "scripts": {
     "dev": "rspress dev",
     "v4": "bun scripts/switch.ts antd doc",
@@ -68,7 +62,5 @@
     "rimraf": "^5.0.5",
     "rspress": "latest"
   },
-  "files": [
-    "dist"
-  ]
-}
+  "files": ["dist"]
+}

rsbuild.config.ts

@@ -1,4 +1,3 @@
-import path from "path";
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
 
@@ -7,6 +6,7 @@ export default defineConfig({
   source: {
     alias: {
       src: "./src",
+      "@pro.formily/antd": "./src",
     },
   },
 });

rspress.config.ts

@@ -1,6 +1,5 @@
-import fs from "fs";
-import path from "path";
 import { pluginPreview } from "@rspress/plugin-preview";
+import path from "path";
 import { defineConfig } from "rspress/config";
 import RsBuildConfig from "./rsbuild.config";
 import { pluginFixCss } from "./scripts/fixcss";

scripts/switch.ts

@@ -16,11 +16,14 @@ const byRoot = (x: string) => {
   return path.resolve(__dirname, `../${x}`);
 };
 
-const configs = ["tsconfig.json", "package.json", "rspress.config.ts"].map(
-  (item) => {
-    return byRoot(item);
-  },
-);
+const configs = [
+  "tsconfig.json",
+  "package.json",
+  "rspress.config.ts",
+  "rsbuild.config.ts",
+].map((item) => {
+  return byRoot(item);
+});
 
 const docs = (() => {
   const list: string[] = [];

src/cascader-plus/index.tsx

@@ -1,8 +1,8 @@
 import { connect, mapProps, observer } from "@formily/react";
 import React, { useEffect, useRef, useState } from "react";
 import { Cascader as BaseCascader } from "../adaptor";
+import { ProEnumItem, buildTree } from "../pro-enum/pro-enum";
 import { isLabelInValue, prettyEnum, useUpdate } from "../shared";
-import { buildTree, ProEnumItem } from "../pro-enum/pro-enum";
 
 const fullWithStyle = {
   width: "100%",

src/index.ts

@@ -1,8 +1,8 @@
+export * from "./cascader-plus";
 export * from "./pro-array-table";
-export * from "./query-list";
+export * from "./pro-enum";
 export * from "./query-form";
+export * from "./query-list";
 export * from "./query-table";
-export * from "./shared";
-export * from "./cascader-plus";
 export * from "./shadow-form";
-export * from "./pro-enum";
+export * from "./shared";

src/pro-array-table/features/pro-settings.tsx

@@ -14,7 +14,6 @@ import {
   ColumnHeightOutlined,
   ConfigProvider,
   Popover,
-  Row,
   SettingOutlined,
   Slider,
   Space,

src/pro-array-table/index.ts

@@ -1,4 +1,4 @@
-export { ProArrayTable } from "./pro";
+export { ArrayTableDelegateContext } from "./features/delegate";
 export { RowSelectionPro } from "./mixin.pro";
+export { ProArrayTable } from "./pro";
 export type { ProArrayTableProps } from "./types";
-export { ArrayTableDelegateContext } from "./features/delegate";

src/pro-array-table/mixin.base.tsx

@@ -2,6 +2,7 @@ import { ISchema, ReactFC, useField } from "@formily/react";
 import { clone, isUndef, isValid } from "@formily/shared";
 import cls from "classnames";
 import React, { Fragment, useContext } from "react";
+import { omit } from "../__builtins__";
 import {
   BUTTON_TYPE,
   Button,
@@ -15,7 +16,6 @@ import {
 import { ArrayBase, IArrayBaseContext, usePrefixCls } from "../adaptor/adaptor";
 import { TablePaginationContext } from "./features/pagination";
 import type { ColumnProps, IProArrayTableBaseMixins } from "./types";
-import { omit } from "../__builtins__";
 
 export const Column: ReactFC<ColumnProps<any>> = () => {
   return <Fragment />;

src/pro-array-table/pro.tsx

@@ -1,4 +1,4 @@
-import { ArrayField, JSXComponent } from "@formily/core";
+import { ArrayField } from "@formily/core";
 import {
   ReactFC,
   RecursionField,

src/pro-enum/pretty.tsx

@@ -1,7 +1,7 @@
-import type { Value, ProEnumItem } from "./pro-enum";
-import { Badge, Space, Tag } from "../adaptor/index";
-import { mapProps, connect } from "@formily/react";
+import { connect, mapProps } from "@formily/react";
 import { useMemo } from "react";
+import { Badge, Space, Tag } from "../adaptor/index";
+import type { ProEnumItem, Value } from "./pro-enum";
 export const EnumReadPretty: React.FC<{
   /**
    * 对应枚举值

src/pro-enum/pro-enum.ts

@@ -1,7 +1,12 @@
-import { Field, isDataField, onFieldInit, onFieldReact } from "@formily/core";
+import {
+  GeneralField,
+  isDataField,
+  onFieldInit,
+  onFieldReact,
+} from "@formily/core";
+import { isLabelInValue } from "../shared";
 import { BUILTIN_COLOR, fillColors } from "./color";
 import { ProEnumPretty } from "./pretty";
-import { isLabelInValue } from "../shared";
 
 const safeStringify = (x: any) => {
   try {
@@ -212,22 +217,21 @@ export class ProEnum {
 const PRO_ENUM_KEY = "__pro_enum__";
 const PRO_ENUM_HIJACK_KEY = "__pro_enum_hijack_info__";
 
-const hijackField = (field: any, props: any) => {
+const hijackField = (field: GeneralField, props: any) => {
   field.data = field.data ?? {};
-  field.data[PRO_ENUM_HIJACK_KEY] = field.data?.[PRO_ENUM_HIJACK_KEY] ?? [];
-  field.data[PRO_ENUM_HIJACK_KEY][0] = field.component[0];
-  field.data[PRO_ENUM_HIJACK_KEY][1] = field.component[1];
-  const oprops = field.component[1];
-
-  field.setComponent(ProEnumPretty, {
-    ...props,
-    ...oprops,
-  });
+  field.data[PRO_ENUM_HIJACK_KEY] = field.data?.[PRO_ENUM_HIJACK_KEY] ?? {};
+  field.data[PRO_ENUM_HIJACK_KEY].componentType = field.componentType;
+  field.data[PRO_ENUM_HIJACK_KEY].componentProps = field.componentProps;
+
+  field.componentType = ProEnumPretty;
+  field.componentProps = props;
 };
 
 const restoreHijack = (field: any) => {
-  const [ocomp, oprops] = field.data[PRO_ENUM_HIJACK_KEY];
-  field.setComponent(ocomp, oprops);
+  const origin = field.data[PRO_ENUM_HIJACK_KEY];
+  // why not field.setComponet, @see https://github.com/alibaba/formily/blob/formily_next/packages/core/src/models/BaseField.ts#L250
+  field.componentType = origin.componentType;
+  field.componentProps = origin.componentProps;
 };
 
 const setProEnum = (field: any, inst: ProEnum) => {
@@ -250,15 +254,6 @@ const getProEnum = (field: any) => {
   };
 };
 
-const isCcomponentSame = (
-  origin: Field["component"],
-  comp: string | React.FunctionComponent<any> | Field["component"],
-) => {
-  const ocomp = Array.isArray(origin) ? origin[0] : origin;
-  const dcomp = Array.isArray(comp) ? comp[0] : comp;
-  return ocomp === dcomp;
-};
-
 export const useProEnumEffects = (opts?: {
   // 劫持 read pretty
   pretty: boolean;
@@ -312,13 +307,13 @@ export const useProEnumEffects = (opts?: {
     const origin = field.data?.[PRO_ENUM_HIJACK_KEY];
 
     if (readPretty) {
-      if (!isCcomponentSame(field.component, ProEnumPretty)) {
+      if (field.componentType !== ProEnumPretty) {
         hijackField(field, {
           _type: props?.showType,
           _strict: props?.strict,
         });
       }
-    } else if (origin && !isCcomponentSame(origin, field.component)) {
+    } else if (origin && origin.componentType !== field.componentType) {
       restoreHijack(field);
     }
   });

src/shadow-form/index.tsx

@@ -1,7 +1,7 @@
+export { ShadowModal } from "./modal";
+export { ShadowPopconfirm } from "./popconfirm";
 export {
-  useShadowForm,
   ShadowForm,
+  useShadowForm,
 } from "./shadow-form";
-export { ShadowPopconfirm } from "./popconfirm";
-export { ShadowModal } from "./modal";
 export type { ShadowFormWrappedProps } from "./shadow-form";

src/shadow-form/shadow-form.tsx

@@ -6,7 +6,6 @@ import {
   SchemaOptionsContext,
   createSchemaField,
   useField,
-  useFieldSchema,
 } from "@formily/react";
 import React, { useContext, useMemo } from "react";
 import ReactIs from "react-is";
@@ -49,8 +48,8 @@ export const useShadowForm = (options: IShadowFormOptions) => {
 
 const role = (field: GeneralField, self: any) => {
   const components = useContext(SchemaComponentsContext);
-  const decorator = components[(field.decorator as any)?.[0]];
-  const component = components[(field.component as any)?.[0]];
+  const decorator = components[field.decoratorType];
+  const component = components[field.componentType];
   const isDecorator = decorator === self;
   const isComponent = component === self;
   return isDecorator ? "decorator" : isComponent ? "component" : null;

src/shared/index.ts

@@ -1,5 +1,5 @@
+export * from "./prettyEnum";
 export * from "./useGrid";
 export * from "./useRecord";
-export * from "./withLayoutGrid";
-export * from "./prettyEnum";
 export * from "./useUpdate";
+export * from "./withLayoutGrid";