ProComponents 3.0 开发

.fatherrc.base.ts

@@ -7,14 +7,14 @@ export default defineConfig({
     output: 'es',
     extraBabelPlugins: [[require.resolve('./scripts/replaceLib'), {}]],
     platform: 'browser', // 默认构建为 Browser 环境的产物
-    transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
+    transformer: 'esbuild', // 默认使用 babel 以提供更好的兼容性
   },
   // 以下为 cjs 配置项启用时的默认值，有自定义需求时才需配置
   cjs: {
     extraBabelPlugins: [[require.resolve('./scripts/replaceEs'), {}]],
     input: 'src', // 默认编译目录
     output: 'lib',
     platform: 'browser', // 默认构建为 Node.js 环境的产物
-    transformer: 'babel', // 默认使用 esbuild 以获得更快的构建速度
+    transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度
   },
 });

docs/components.en-US.md

@@ -140,7 +140,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    * @name Customize the edit schema
    * @description returns a node that will automatically wrap value and onChange
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/customization-value-type.tsx

@@ -160,7 +160,7 @@ export default () => {
       valueTypeMap={{
         link: {
           render: (text) => <a>{text}</a>,
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <Input placeholder="请输入链接" {...props?.fieldProps} />
           ),
         },
@@ -174,7 +174,7 @@ export default () => {
               </>
             );
           },
-          renderFormItem: (text, props) => (
+          formItemRender: (text, props) => (
             <TagList {...props} {...props?.fieldProps} />
           ),
         },

docs/components/schema.en-US.md

@@ -18,8 +18,8 @@ In the `ProComponents`, we have used the same definition as tables for component
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | Props passed to the rendering component. They are also passed when customizing |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data is consumed by the rendering component defined by valueType |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | Requests network data remotely, usually used for selection-type components |
 | `params` | `Record<string, any>` | Additional parameters passed to `request`. The component does not process them, but changes will trigger a new data request in `request` |
 | `hideInForm` | `boolean` | Hidden in the form |
@@ -76,7 +76,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name Custom edit mode
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/schema.md

@@ -18,8 +18,8 @@ order: 1
 | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | 传给渲染的组件的 props，自定义的时候也会传递 |
 | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | 传递给 Form.Item 的配置 |
 | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 |
-| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` |
-| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
+| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` |
+| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange |
 | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 |
 | `params` | `Record<string, any>` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 |
 | `hideInForm` | `boolean` | 在 Form 中隐藏 |
@@ -76,7 +76,7 @@ export type ProSchema<T = unknown, U = string, Extra = unknown> = {
    *
    * @name 自定义编辑模式
    */
-  renderFormItem?: (
+  formItemRender?: (
     item: ProSchema<T, U, Extra>,
     config: {
       index?: number;

docs/components/valueType.tsx

@@ -6,7 +6,7 @@ const valueEnum = {
   all: { text: '全部', status: 'Default' },
   open: {
     text: '未解决',
-    status: 'Error',
+    status: 'Warning',
   },
   closed: {
     text: '已解决',

docs/playground/pro-form.en-US.md

@@ -15,4 +15,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要
 
 ## FormList
 
-<code src="../../packages/form/src/components/Group/demos/customize.tsx" title="ProForm.List" ></code>
+<code src="../../packages/form/src/components/FormItem/Group/demos/customize.tsx" title="ProForm.List" ></code>

docs/playground/pro-form.md

@@ -16,4 +16,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要
 
 ## FormList
 
-<code src="../../packages/form/src/components/Group/demos/customize.tsx" title="ProForm.List" ></code>
+<code src="../../packages/form/src/components/FormItem/Group/demos/customize.tsx" title="ProForm.List" ></code>

docs/playground/pro-layout.en-US.md

@@ -10,7 +10,3 @@ nav:
 ## Layout 自定义
 
 <code src="../../packages/layout/src/demos/dynamic-settings.tsx"  background="var(--main-bg-color)" title="属性展示"></code>
-
-## 水印自定义
-
-<code src="../../packages/layout/src/components/WaterMark/demos/custom.tsx" background="var(--main-bg-color)"></code>

docs/playground/pro-layout.md

@@ -11,7 +11,3 @@ nav:
 ## Layout 自定义
 
 <code src="../../packages/layout/src/demos/dynamic-settings.tsx"  background="var(--main-bg-color)" iframe="500" title="属性展示"></code>
-
-## 水印自定义
-
-<code src="../../packages/layout/src/components/WaterMark/demos/custom.tsx" background="var(--main-bg-color)" iframe="500"></code>

package.json

@@ -26,7 +26,7 @@
     "start": "npm run version && dumi dev",
     "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'",
     "test": "npm run version && cross-env TZ=UTC vitest --run",
-    "test:coverage": "npm run version && cross-env TZ=UTC TEST_LOG=none vitest  --coverage",
+    "test:coverage": "npm run version && pnpm --filter \"@ant-design/**\" build && cross-env TZ=UTC TEST_LOG=none vitest  --coverage",
     "test:update": "npm run version && cross-env TZ=UTC  vitest -u",
     "tsc": "tsc --noEmit",
     "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json",
@@ -87,7 +87,7 @@
     "@umijs/plugin-analytics": "^0.2.4",
     "@umijs/test": "^3.5.41",
     "@umijs/test-utils": "^3.5.41",
-    "@umijs/utils": "^4.2.13",
+    "@umijs/utils": "^4.3.0",
     "@vitest/coverage-istanbul": "^0.34.6",
     "animated-scroll-to": "^2.3.0",
     "antd": "^5.18.3",
@@ -99,9 +99,9 @@
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.11",
-    "dumi": "^2.3.8",
+    "dumi": "^2.4.0",
     "dumi-theme-antd-style": "0.26.2",
-    "esbuild": "^0.15.18",
+    "esbuild": "^0.21.5",
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-react": "^7.34.3",
@@ -113,6 +113,7 @@
     "father": "^4.4.4",
     "gh-pages": "^5.0.0",
     "glob": "^8.1.0",
+    "happy-dom": "^14.12.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^8.2.6",
     "jest-canvas-mock": "^2.5.2",
@@ -155,20 +156,20 @@
     "stylelint": "^13.13.1",
     "timezone-mock": "^1.3.6",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "umi": "^4.2.13",
+    "typescript": "^5.5.2",
+    "umi": "^4.3.0",
     "umi-request": "^1.4.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vitest": "^1.6.0",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "gitHooks": {
     "pre-commit": "pretty-quick --staged",
     "commit-msg": "fabric verify-commit"
   },
-  "packageManager": "pnpm@8.6.0"
+  "packageManager": "pnpm@9.1.2"
 }

packages/card/package.json

@@ -47,7 +47,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0"
   },
   "publishConfig": {

packages/card/src/components/Card/index.tsx

@@ -5,7 +5,7 @@ import { ConfigProvider, Tabs } from 'antd';
 import useBreakpoint from 'antd/es/grid/hooks/useBreakpoint';
 import classNames from 'classnames';
 import omit from 'omit.js';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
 import React, { useContext } from 'react';
 import type { Breakpoint, CardProps, Gutter } from '../../typing';
 import Actions from '../Actions';

packages/card/src/components/StatisticCard/index.tsx

@@ -9,9 +9,6 @@ import type { StatisticProps } from '../Statistic';
 import Statistic from '../Statistic';
 import { useStyle } from './style';
 
-import 'antd/lib/divider/style';
-import 'antd/lib/statistic/style';
-
 export type StatisticCardProps = {
   /** 图表配置 */
   chart?: React.ReactNode;

packages/card/src/components/TabPane/index.tsx

@@ -1,8 +1,8 @@
 import type { TabPaneProps, TabsProps } from 'antd';
 import { ConfigProvider, Tabs, version } from 'antd';
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
-import { noteOnce } from 'rc-util/lib/warning';
+import toArray from 'rc-util/es/Children/toArray';
+import { noteOnce } from 'rc-util/es/warning';
 import React, { useContext } from 'react';
 import type { ProCardTabPaneProps, ProCardTabsProps } from '../../typing';
 import Card from '../Card';

packages/card/src/index.tsx

@@ -14,8 +14,6 @@ import type { ProCardProps } from './ProCard';
 import ProCard from './ProCard';
 import type { ProCardTabsProps } from './typing';
 
-import 'antd/lib/card/style';
-
 export { CheckCard, ProCard, Statistic, StatisticCard };
 export type {
   CheckCardGroupProps,

packages/card/src/typing.ts

@@ -1,5 +1,5 @@
 import type { TabPaneProps, TabsProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
+import type { LabelTooltipType } from 'antd/es/form/FormItemLabel';
 import type { ReactNode } from 'react';
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';

packages/components/package.json

@@ -35,20 +35,20 @@
     "ie >= 11"
   ],
   "dependencies": {
-    "@ant-design/pro-card": "2.8.5",
-    "@ant-design/pro-descriptions": "2.5.46",
-    "@ant-design/pro-field": "2.15.1",
-    "@ant-design/pro-form": "2.28.1",
-    "@ant-design/pro-layout": "7.19.9",
-    "@ant-design/pro-list": "2.5.62",
-    "@ant-design/pro-provider": "2.14.8",
-    "@ant-design/pro-skeleton": "2.1.13",
-    "@ant-design/pro-table": "3.16.2",
-    "@ant-design/pro-utils": "2.15.15",
+    "@ant-design/pro-card": "workspace:*",
+    "@ant-design/pro-descriptions": "workspace:*",
+    "@ant-design/pro-field": "workspace:*",
+    "@ant-design/pro-form": "workspace:*",
+    "@ant-design/pro-layout": "workspace:*",
+    "@ant-design/pro-list": "workspace:*",
+    "@ant-design/pro-provider": "workspace:*",
+    "@ant-design/pro-skeleton": "workspace:*",
+    "@ant-design/pro-utils": "workspace:*",
+    "@ant-design/pro-table": "workspace:*",
     "@babel/runtime": "^7.16.3"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },

packages/descriptions/package.json

@@ -47,7 +47,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
+    "antd": "^5.11.2",
     "react": ">=17.0.0"
   },
   "publishConfig": {

packages/descriptions/src/demos/customization-value-type.tsx

@@ -102,7 +102,7 @@ export default () => {
         valueTypeMap: {
           link: {
             render: (text) => <a>{text}</a>,
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <Input placeholder="请输入链接" {...props?.fieldProps} />
             ),
           },
@@ -116,7 +116,7 @@ export default () => {
                 </>
               );
             },
-            renderFormItem: (text, props) => (
+            formItemRender: (text, props) => (
               <TagList {...props} {...props?.fieldProps} />
             ),
           },

packages/descriptions/src/demos/editable.tsx

@@ -56,7 +56,7 @@ export default () => {
           title: '状态2',
           key: 'state2',
           dataIndex: 'state2',
-          renderFormItem: () => {
+          formItemRender: () => {
             return <Input placeholder="输入 Success 切换分值" />;
           },
         },