feat: upgrade formily (#1880)

* feat: upgrade formily

* fix: upgrade @formily/json-schema

* fix: optimizing performance

* fix: performance code

* refactor: `React.memo` and `observer` component add `displayName` property

* fix: add cache to Schema.compile

* feat: 优化代码

* fix: 修复卡顿最终的问题

* Update SchemaComponentProvider.tsx

* feat: 再次优化代码

* feat: optimized code

---------

Co-authored-by: dream2023 <1098626505@qq.com>

docs/en-US/development/client/index.md

@@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```

docs/en-US/development/client/ui-schema-designer/demo1.tsx

@@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
+const ArrayTable = observer(
+  (props: any) => {
     const { rowKey } = props;
     const field = useField<ArrayField>();
     const schema = useFieldSchema();
@@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
     });
 
     return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/en-US/development/client/ui-schema-designer/designable.md

@@ -180,11 +180,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -240,7 +240,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -289,7 +289,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (

docs/en-US/development/client/ui-schema-designer/extending-schema-components.md

@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -310,7 +310,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -367,7 +367,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -432,7 +432,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/en-US/development/client/ui-schema-designer/insert-adjacent.md

@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (

docs/en-US/welcome/release/v08-changelog.md

@@ -182,6 +182,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 

docs/tr-TR/development/client/ui-schema-designer/demo1.tsx

@@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
+const ArrayTable = observer(
+  (props: any) => {
     const { rowKey } = props;
     const field = useField<ArrayField>();
     const schema = useFieldSchema();
@@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
     });
 
     return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/tr-TR/development/client/ui-schema-designer/designable.md

@@ -183,11 +183,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -243,7 +243,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -292,7 +292,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (

docs/tr-TR/development/client/ui-schema-designer/extending-schema-components.md

@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/tr-TR/development/client/ui-schema-designer/insert-adjacent.md

@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (

docs/zh-CN/development/client/index.md

@@ -42,6 +42,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```

docs/zh-CN/development/client/ui-schema-designer/demo1.tsx

@@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
+const ArrayTable = observer(
+  (props: any) => {
     const { rowKey } = props;
     const field = useField<ArrayField>();
     const schema = useFieldSchema();
@@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
     });
 
     return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/zh-CN/development/client/ui-schema-designer/designable.md

@@ -183,11 +183,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello' });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (
@@ -243,7 +243,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -292,7 +292,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (

docs/zh-CN/development/client/ui-schema-designer/extending-schema-components.md

@@ -103,7 +103,7 @@ const SingleText = connect(Input);
 const UsedObserver = observer((props) => {
   const form = useForm();
   return <div>UsedObserver: {form.values.t1}</div>
-});
+}, { displayName: 'UsedObserver' });
 
 const NotUsedObserver = (props) => {
   const form = useForm();
@@ -312,7 +312,7 @@ const ArrayList = observer((props) => {
       </ul>
     </>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -369,7 +369,7 @@ const ArrayList = observer((props) => {
       })}
     </ul>
   );
-});
+}, { displayName: 'ArrayList' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>
@@ -434,7 +434,7 @@ const ArrayTable = observer((props: any) => {
   });
 
   return <Table rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+}, { displayName: 'ArrayTable' });
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

docs/zh-CN/development/client/ui-schema-designer/insert-adjacent.md

@@ -116,11 +116,11 @@ const Hello = observer((props) => {
       <div style={{ margin: 50 }}>{props.children}</div>
     </div>
   );
-});
+}, { displayName: 'Hello'  });
 
 const Page = observer((props) => {
   return <div>{props.children}</div>;
-});
+}, { displayName: 'Page' });
 
 export default () => {
   return (

docs/zh-CN/welcome/release/v08-changelog.md

@@ -176,6 +176,7 @@ const HelloProvider = React.memo((props) => {
   }
   return <>{props.children}</>
 });
+HelloProvider.displayName = 'HelloProvider'
 
 app.use(HelloProvider);
 ```

packages/core/cli/templates/plugin/src/client/index.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
-export default React.memo((props) => {
+const CommonMemo = React.memo((props) => {
   return <>{props.children}</>;
 });
+CommonMemo.displayName = 'CommonMemo';
+
+export default CommonMemo;

packages/core/client/intro.md

@@ -374,7 +374,7 @@ const Action: any = observer((props: any) => {
       <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />
     </VisibleContext.Provider>
   );
-});
+}, { displayName: 'Action' });
 
 Action.Drawer = observer((props: any) => {
   const [visible, setVisible] = useContext(VisibleContext);
@@ -411,13 +411,13 @@ Action.Drawer = observer((props: any) => {
       )}
     </>
   );
-});
+}, { displayName: 'Action.Drawer' });
 
 Action.Drawer.Footer = observer((props: any) => {
   const field = useField();
   const schema = useFieldSchema();
   return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+}, { displayName: 'Action.Drawer.Footer' });
 
 const schema: ISchema = {
   type: 'object',
@@ -500,7 +500,7 @@ const Hello = observer(({ name }) => {
       >更新</Button>
     </div>
   )
-});
+}, { displayName: 'Hello' });
 
 const RouteSchemaComponent = (props) => {
   const route = useRoute();
@@ -678,7 +678,7 @@ const useDragEnd = () => {
 
 const Page = observer((props) => {
   return <DndContext onDragEnd={useDragEnd()}>{props.children}</DndContext>;
-});
+}, { displayName: 'Page' });
 
 function Draggable(props) {
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
@@ -727,7 +727,7 @@ const Block = observer((props) => {
       </div>
     </Droppable>
   );
-});
+}, { displayName: 'Block' });
 
 export default function App() {
   return (

packages/core/client/package.json

@@ -10,9 +10,9 @@
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
     "@emotion/css": "^11.7.1",
-    "@formily/antd": "2.0.20",
-    "@formily/core": "2.0.20",
-    "@formily/react": "2.0.20",
+    "@formily/antd": "2.2.24",
+    "@formily/core": "2.2.24",
+    "@formily/react": "2.2.24",
     "@nocobase/evaluators": "0.9.4-alpha.2",
     "@nocobase/sdk": "0.9.4-alpha.2",
     "@nocobase/utils": "0.9.4-alpha.2",

packages/core/client/src/application/Application.tsx

@@ -61,6 +61,8 @@ const App = React.memo((props: any) => {
   return <C />;
 });
 
+App.displayName = 'App';
+
 export class Application {
   providers = [];
   mainComponent = null;

packages/core/client/src/application/demos/demo1/Hello.tsx

@@ -3,7 +3,8 @@ import { useDesignable } from '@nocobase/client';
 import { Button } from 'antd';
 import { observer } from '@formily/react';
 
-export const Hello: React.FC<any> = observer(({ name }) => {
+export const Hello: React.FC<any> = observer(
+  ({ name }) => {
     const { patch, remove } = useDesignable();
     return (
       <div>
@@ -17,4 +18,6 @@ export const Hello: React.FC<any> = observer(({ name }) => {
         </Button>
       </div>
     );
-});
+  },
+  { displayName: 'Hello' },
+);

packages/core/client/src/collection-manager/Configuration/CollectionFieldsTable.tsx

@@ -31,7 +31,8 @@ const useDef = (options, props) => {
   }
 };
 
-export const CollectionFieldsTable: React.FC<TableVoidProps> = observer((props) => {
+export const CollectionFieldsTable: React.FC<TableVoidProps> = observer(
+  (props) => {
     const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
     const field = useField<Field>();
     const fieldSchema = useFieldSchema();
@@ -63,4 +64,6 @@ export const CollectionFieldsTable: React.FC<TableVoidProps> = observer((props)
         </FormContext.Provider>
       </AsyncDataProvider>
     );
-});
+  },
+  { displayName: 'CollectionFieldsTable' },
+);

packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx

@@ -79,7 +79,8 @@ interface CategorizeDataItem {
   data: Array<any>;
 }
 
-export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
+export const CollectionFieldsTableArray: React.FC<any> = observer(
+  (props) => {
     const sortKeyArr: Array<CategorizeKey> = ['primaryAndForeignKey', 'relation', 'basic', 'systemInfo'];
     const field = useField<ArrayField>();
     const { name } = useRecord();
@@ -277,4 +278,6 @@ export const CollectionFieldsTableArray: React.FC<any> = observer((props) => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'CollectionFieldsTableArray' },
+);

packages/core/client/src/collection-manager/Configuration/ConfigurationTabs.tsx

@@ -50,7 +50,8 @@ function Droppable(props) {
   );
 }
 
-const TabTitle = observer(({ item }: { item: any }) => {
+const TabTitle = observer(
+  ({ item }: { item: any }) => {
     return (
       <Droppable id={item.id.toString()} data={item}>
         <div>
@@ -60,7 +61,9 @@ const TabTitle = observer(({ item }: { item: any }) => {
         </div>
       </Droppable>
     );
-});
+  },
+  { displayName: 'TabTitle' },
+);
 
 const TabBar = ({ item }) => {
   const compile = useCompile();
@@ -71,7 +74,8 @@ const TabBar = ({ item }) => {
     </span>
   );
 };
-const DndProvider = observer((props) => {
+const DndProvider = observer(
+  (props) => {
     const [activeTab, setActiveId] = useState(null);
     const { refresh } = useContext(CollectionCategroriesContext);
     const { refresh: refreshCM } = useResourceActionContext();
@@ -109,7 +113,9 @@ const DndProvider = observer((props) => {
         </DragOverlay>
       </DndContext>
     );
-});
+  },
+  { displayName: 'DndProvider' },
+);
 export const ConfigurationTabs = () => {
   const { data, refresh } = useContext(CollectionCategroriesContext);
   const { refresh: refreshCM, run, defaultRequest, setState } = useResourceActionContext();

packages/core/client/src/collection-manager/Configuration/components/CollectionCategory.tsx

@@ -3,7 +3,8 @@ import { Tag } from 'antd';
 import React from 'react';
 import { useCompile } from '../../../schema-component';
 
-export const CollectionCategory = observer((props: any) => {
+export const CollectionCategory = observer(
+  (props: any) => {
     const { value } = props;
     const compile = useCompile();
     return (
@@ -13,4 +14,6 @@ export const CollectionCategory = observer((props: any) => {
         })}
       </>
     );
-});
+  },
+  { displayName: 'CollectionCategory' },
+);

packages/core/client/src/collection-manager/Configuration/components/CollectionFieldInterface.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const CollectionFieldInterface = observer((props: any) => {
+export const CollectionFieldInterface = observer(
+  (props: any) => {
     const { value } = props;
     const { getInterface } = useCollectionManager();
     const compile = useCompile();
@@ -13,4 +14,6 @@ export const CollectionFieldInterface = observer((props: any) => {
     if (!schema) return null;
 
     return <Tag>{compile(schema.title)}</Tag>;
-});
+  },
+  { displayName: 'CollectionFieldInterface' },
+);

packages/core/client/src/collection-manager/Configuration/components/CollectionTemplate.tsx

@@ -4,11 +4,14 @@ import React from 'react';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const CollectionTemplate = observer((props: any) => {
+export const CollectionTemplate = observer(
+  (props: any) => {
     const { value } = props;
     const { getTemplate } = useCollectionManager();
     const compile = useCompile();
     const schema = getTemplate(value);
 
     return <Tag>{compile(schema?.title || '{{t("General collection")}}')}</Tag>;
-});
+  },
+  { displayName: 'CollectionTemplate' },
+);

packages/core/client/src/collection-manager/Configuration/components/FieldSummary.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const FieldSummary = observer((props: any) => {
+export const FieldSummary = observer(
+  (props: any) => {
     const { schemaKey } = props;
     const { getInterface } = useCollectionManager();
     const compile = useCompile();
@@ -38,4 +39,6 @@ export const FieldSummary = observer((props: any) => {
         ) : null}
       </div>
     );
-});
+  },
+  { displayName: 'FieldSummary' },
+);

packages/core/client/src/collection-manager/Configuration/components/TemplateSummay.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const TemplateSummay = observer((props: any) => {
+export const TemplateSummay = observer(
+  (props: any) => {
     const { schemaKey } = props;
     const { getTemplate } = useCollectionManager();
     const compile = useCompile();
@@ -38,4 +39,6 @@ export const TemplateSummay = observer((props: any) => {
         ) : null}
       </div>
     );
-});
+  },
+  { displayName: 'TemplateSummay' },
+);

packages/core/client/src/collection-manager/Configuration/components/index.tsx

@@ -6,7 +6,8 @@ import { useRecord } from '../../../record-provider';
 import { useCompile } from '../../../schema-component';
 import { useCollectionManager } from '../../hooks';
 
-export const SourceForeignKey = observer(() => {
+export const SourceForeignKey = observer(
+  () => {
     const record = useRecord();
     const { getCollection } = useCollectionManager();
     const collection = record?.collectionName ? getCollection(record.collectionName) : record;
@@ -31,9 +32,12 @@ export const SourceForeignKey = observer(() => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'SourceForeignKey' },
+);
 
-export const ThroughForeignKey = observer(() => {
+export const ThroughForeignKey = observer(
+  () => {
     const field = useField<Field>();
     const form = useForm();
     const { getCollectionFields } = useCollectionManager();
@@ -55,9 +59,12 @@ export const ThroughForeignKey = observer(() => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'ThroughForeignKey' },
+);
 
-export const TargetForeignKey = observer(() => {
+export const TargetForeignKey = observer(
+  () => {
     const field = useField<Field>();
     const form = useForm();
     const { getCollectionFields } = useCollectionManager();
@@ -79,9 +86,12 @@ export const TargetForeignKey = observer(() => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'TargetForeignKey' },
+);
 
-export const SourceCollection = observer(() => {
+export const SourceCollection = observer(
+  () => {
     const record = useRecord();
     const { getCollection } = useCollectionManager();
     const collection = record?.collectionName ? getCollection(record.collectionName) : record;
@@ -95,20 +105,28 @@ export const SourceCollection = observer(() => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'SourceCollection' },
+);
 
-export const SourceKey = observer(() => {
+export const SourceKey = observer(
+  () => {
     return (
       <div>
         <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
       </div>
     );
-});
+  },
+  { displayName: 'SourceKey' },
+);
 
-export const TargetKey = observer(() => {
+export const TargetKey = observer(
+  () => {
     return (
       <div>
         <Select disabled value={'id'} options={[{ value: 'id', label: 'ID' }]} />
       </div>
     );
-});
+  },
+  { displayName: 'TargetKey' },
+);

packages/core/client/src/collection-manager/sub-table.tsx

@@ -166,7 +166,8 @@ export const ds = {
   useDestroyAction,
 };
 
-export const SubFieldDataSourceProvider = observer((props) => {
+export const SubFieldDataSourceProvider = observer(
+  (props) => {
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [dataSource, setDataSource] = useState([]);
     const record = useRecord();
@@ -218,9 +219,12 @@ export const SubFieldDataSourceProvider = observer((props) => {
         </DataSourceContext.Provider>
       </CollectionProvider>
     );
-});
+  },
+  { displayName: 'SubFieldDataSourceProvider' },
+);
 
-export const DataSourceProvider = observer((props: any) => {
+export const DataSourceProvider = observer(
+  (props: any) => {
     const { rowKey, collection, association } = props;
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [dataSource, setDataSource] = useState([]);
@@ -269,4 +273,6 @@ export const DataSourceProvider = observer((props: any) => {
         </DataSourceContext.Provider>
       </CollectionProvider>
     );
-});
+  },
+  { displayName: 'DataSourceProvider' },
+);

packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx

@@ -217,3 +217,4 @@ function areEqual(prevProps, nextProps) {
 }
 
 export const PreviewFields = React.memo(PreviewCom, areEqual);
+PreviewFields.displayName = 'PreviewFields';

packages/core/client/src/schema-component/antd/action/Action.Container.tsx

@@ -6,7 +6,8 @@ import { ActionModal } from './Action.Modal';
 import { ActionPage } from './Action.Page';
 import { ComposedActionDrawer } from './types';
 
-export const ActionContainer: ComposedActionDrawer = observer((props: any) => {
+export const ActionContainer: ComposedActionDrawer = observer(
+  (props: any) => {
     const { openMode } = useActionContext();
     if (openMode === 'drawer') {
       return <ActionDrawer footerNodeName={'Action.Container.Footer'} {...props} />;
@@ -15,12 +16,17 @@ export const ActionContainer: ComposedActionDrawer = observer((props: any) => {
       return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
     }
     return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
-});
+  },
+  { displayName: 'ActionContainer' },
+);
 
-ActionContainer.Footer = observer(() => {
+ActionContainer.Footer = observer(
+  () => {
     const field = useField();
     const schema = useFieldSchema();
     return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+  },
+  { displayName: 'ActionContainer.Footer' },
+);
 
 export default ActionContainer;

packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx

@@ -14,7 +14,8 @@ const openSizeWidthMap = new Map<OpenSize, string>([
   ['middle', '50%'],
   ['large', '70%'],
 ]);
-export const ActionDrawer: ComposedActionDrawer = observer((props) => {
+export const ActionDrawer: ComposedActionDrawer = observer(
+  (props) => {
     const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
     const { t } = useTranslation();
     const { visible, setVisible, openSize = 'middle' } = useActionContext();
@@ -113,12 +114,17 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
         )}
       </>
     );
-});
+  },
+  { displayName: 'ActionDrawer' },
+);
 
-ActionDrawer.Footer = observer(() => {
+ActionDrawer.Footer = observer(
+  () => {
     const field = useField();
     const schema = useFieldSchema();
     return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+  },
+  { displayName: 'ActionDrawer.Footer' },
+);
 
 export default ActionDrawer;

packages/core/client/src/schema-component/antd/action/Action.Link.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 import Action from './Action';
 import { ComposedAction } from './types';
 
-export const ActionLink: ComposedAction = observer((props: any) => {
+export const ActionLink: ComposedAction = observer(
+  (props: any) => {
     return <Action {...props} component={'a'} className={'nb-action-link'} />;
-});
+  },
+  { displayName: 'ActionLink' },
+);

packages/core/client/src/schema-component/antd/action/Action.Modal.tsx

@@ -12,7 +12,8 @@ const openSizeWidthMap = new Map<OpenSize, string>([
   ['middle', '60%'],
   ['large', '80%'],
 ]);
-export const ActionModal: ComposedActionDrawer<ModalProps> = observer((props) => {
+export const ActionModal: ComposedActionDrawer<ModalProps> = observer(
+  (props) => {
     const { footerNodeName = 'Action.Modal.Footer', width, ...others } = props;
     const { visible, setVisible, openSize = 'large' } = useActionContext();
     const actualWidth = width ?? openSizeWidthMap.get(openSize);
@@ -104,12 +105,17 @@ export const ActionModal: ComposedActionDrawer<ModalProps> = observer((props) =>
         )}
       </>
     );
-});
+  },
+  { displayName: 'ActionModal' },
+);
 
-ActionModal.Footer = observer(() => {
+ActionModal.Footer = observer(
+  () => {
     const field = useField();
     const schema = useFieldSchema();
     return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+  },
+  { displayName: 'ActionModal.Footer' },
+);
 
 export default ActionModal;

packages/core/client/src/schema-component/antd/action/Action.Page.tsx

@@ -10,7 +10,8 @@ const useScope = (key: string) => {
   return scope[key];
 };
 
-export const ActionPage: ComposedActionDrawer = observer((props: any) => {
+export const ActionPage: ComposedActionDrawer = observer(
+  (props: any) => {
     const { footerNodeName = 'Action.Page.Footer', ...others } = props;
     const { containerRefKey, visible, setVisible } = useActionContext();
     const containerRef = useScope(containerRefKey);
@@ -63,12 +64,17 @@ export const ActionPage: ComposedActionDrawer = observer((props: any) => {
           )}
       </>
     );
-});
+  },
+  { displayName: 'ActionPage' },
+);
 
-ActionPage.Footer = observer(() => {
+ActionPage.Footer = observer(
+  () => {
     const field = useField();
     const schema = useFieldSchema();
     return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
-});
+  },
+  { displayName: 'ActionPage.Footer' },
+);
 
 export default ActionPage;

packages/core/client/src/schema-component/antd/action/Action.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
 import { Button, Modal, Popover } from 'antd';
 import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useActionContext } from '../..';
 import { useDesignable } from '../../';
 import { Icon } from '../../../icon';
@@ -64,7 +64,8 @@ export const actionDesignerCss = css`
   }
 `;
 
-export const Action: ComposedAction = observer((props: any) => {
+export const Action: ComposedAction = observer(
+  (props: any) => {
     const {
       popover,
       confirm,
@@ -94,6 +95,16 @@ export const Action: ComposedAction = observer((props: any) => {
     const linkageRules = fieldSchema?.['x-linkage-rules'] || [];
     const { designable } = useDesignable();
     const tarComponent = useComponent(component) || component;
+    const renderTitle = useMemo(() => {
+      if (title) {
+        return title;
+      }
+      if (fieldSchema.title) {
+        return compile(fieldSchema.title);
+      }
+      return null;
+    }, [compile, fieldSchema.title, title]);
+
     useEffect(() => {
       field.linkageProperty = {};
       linkageRules
@@ -140,7 +151,7 @@ export const Action: ComposedAction = observer((props: any) => {
           component={tarComponent || Button}
           className={classnames(className, actionDesignerCss)}
         >
-        {title || compile(fieldSchema.title)}
+          {renderTitle}
           <Designer {...designerProps} />
         </SortableItem>
       );
@@ -165,9 +176,12 @@ export const Action: ComposedAction = observer((props: any) => {
         {!popover && props.children}
       </ActionContext.Provider>
     );
-});
+  },
+  { displayName: 'Action' },
+);
 
-Action.Popover = observer((props) => {
+Action.Popover = observer(
+  (props) => {
     const { button, visible, setVisible } = useActionContext();
     return (
       <Popover
@@ -182,9 +196,12 @@ Action.Popover = observer((props) => {
         {button}
       </Popover>
     );
-});
+  },
+  { displayName: 'Action.Popover' },
+);
 
-Action.Popover.Footer = observer((props) => {
+Action.Popover.Footer = observer(
+  (props) => {
     return (
       <div
         className={css`
@@ -196,7 +213,9 @@ Action.Popover.Footer = observer((props) => {
         {props.children}
       </div>
     );
-});
+  },
+  { displayName: 'Action.Popover.Footer' },
+);
 
 Action.Link = ActionLink;
 Action.Designer = ActionDesigner;

packages/core/client/src/schema-component/antd/action/ActionBar.tsx

@@ -6,7 +6,8 @@ import { useSchemaInitializer } from '../../../schema-initializer';
 import { DndContext } from '../../common';
 import { useDesignable, useProps } from '../../hooks';
 
-export const ActionBar = observer((props: any) => {
+export const ActionBar = observer(
+  (props: any) => {
     const { layout = 'tow-columns', style, spaceProps, ...others } = useProps(props);
     const fieldSchema = useFieldSchema();
     const { InitializerComponent } = useSchemaInitializer(fieldSchema['x-initializer']);
@@ -81,4 +82,6 @@ export const ActionBar = observer((props: any) => {
         <InitializerComponent />
       </div>
     );
-});
+  },
+  { displayName: 'ActionBar' },
+);

packages/core/client/src/schema-component/antd/action/demos/demo3.tsx

@@ -18,7 +18,8 @@ const useCloseAction = () => {
   };
 };
 
-const Editable = observer((props) => {
+const Editable = observer(
+  (props) => {
     const field = useField<Field>();
     const schema = useFieldSchema();
     return (
@@ -41,7 +42,9 @@ const Editable = observer((props) => {
         {props.children}
       </div>
     );
-});
+  },
+  { displayName: 'Editable' },
+);
 
 const schema: ISchema = {
   type: 'object',

packages/core/client/src/schema-component/antd/action/demos/demo5.tsx

@@ -71,7 +71,8 @@ function TypeSelect(props) {
   );
 }
 
-const EditOptions = observer((props) => {
+const EditOptions = observer(
+  (props) => {
     const record = ArrayTable.useRecord();
     const field = useField<Field>();
     console.log(record.type);
@@ -116,7 +117,9 @@ const EditOptions = observer((props) => {
         </a>
       </div>
     );
-});
+  },
+  { displayName: 'EditOptions' },
+);
 
 const SchemaField = createSchemaField({
   components: {

packages/core/client/src/schema-component/antd/association-field/AssociationFieldProvider.tsx

@@ -4,7 +4,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useCollectionManager } from '../../../collection-manager';
 import { AssociationFieldContext } from './context';
 
-export const AssociationFieldProvider = observer((props) => {
+export const AssociationFieldProvider = observer(
+  (props) => {
     const field = useField<Field>();
     const { getCollectionJoinField, getCollection } = useCollectionManager();
     const fieldSchema = useFieldSchema();
@@ -63,4 +64,6 @@ export const AssociationFieldProvider = observer((props) => {
         {props.children}
       </AssociationFieldContext.Provider>
     ) : null;
-});
+  },
+  { displayName: 'AssociationFieldProvider' },
+);

packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx

@@ -11,7 +11,8 @@ export type AssociationSelectProps<P = any> = RemoteSelectProps<P> & {
   multiple?: boolean;
 };
 
-const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
+const InternalAssociationSelect = observer(
+  (props: AssociationSelectProps) => {
     const { fieldNames, objectValue = true } = props;
     const field: any = useField();
     const fieldSchema = useFieldSchema();
@@ -45,7 +46,9 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
         </Input.Group>
       </div>
     );
-});
+  },
+  { displayName: 'InternalAssociationSelect' },
+);
 
 interface AssociationSelectInterface {
   (props: any): React.ReactElement;

packages/core/client/src/schema-component/antd/association-field/Editable.tsx

@@ -12,7 +12,8 @@ import { InternalSubTable } from './InternalSubTable';
 import { CreateRecordAction } from './components/CreateRecordAction';
 import { useAssociationFieldContext } from './hooks';
 
-const EditableAssociationField = observer((props: any) => {
+const EditableAssociationField = observer(
+  (props: any) => {
     const { multiple } = props;
     const field: Field = useField();
     const form = useForm();
@@ -50,12 +51,17 @@ const EditableAssociationField = observer((props: any) => {
         {currentMode === 'FileManager' && <InternalFileManager {...props} />}
       </SchemaComponentOptions>
     );
-});
+  },
+  { displayName: 'EditableAssociationField' },
+);
 
-export const Editable = observer((props) => {
+export const Editable = observer(
+  (props) => {
     return (
       <AssociationFieldProvider>
         <EditableAssociationField {...props} />
       </AssociationFieldProvider>
     );
-});
+  },
+  { displayName: 'Editable' },
+);

packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx

@@ -60,7 +60,8 @@ const useTableSelectorProps = () => {
   };
 };
 
-export const InternalPicker = observer((props: any) => {
+export const InternalPicker = observer(
+  (props: any) => {
     const { value, multiple, onChange, quickUpload, selectFile, ...others } = props;
     const field: any = useField();
     const fieldNames = useFieldNames(props);
@@ -102,7 +103,9 @@ export const InternalPicker = observer((props: any) => {
 
     const getValue = () => {
       if (multiple == null) return null;
-    return Array.isArray(value) ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value]) : value?.[fieldNames.value];
+      return Array.isArray(value)
+        ? value.filter(Boolean)?.map((v) => v?.[fieldNames.value])
+        : value?.[fieldNames.value];
     };
     const getFilter = () => {
       const targetKey = collectionField?.targetKey || 'id';
@@ -172,7 +175,9 @@ export const InternalPicker = observer((props: any) => {
             </RecordProvider>
           )}
         </Input.Group>
-      <ActionContext.Provider value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}>
+        <ActionContext.Provider
+          value={{ openMode: 'drawer', visible: visibleSelector, setVisible: setVisibleSelector }}
+        >
           <RecordPickerProvider {...pickerProps}>
             <CollectionProvider name={collectionField?.target}>
               <FormProvider>
@@ -194,4 +199,6 @@ export const InternalPicker = observer((props: any) => {
         </ActionContext.Provider>
       </>
     );
-});
+  },
+  { displayName: 'InternalPicker' },
+);

packages/core/client/src/schema-component/antd/association-field/InternalViewer.tsx

@@ -22,7 +22,8 @@ const toValue = (value, placeholder) => {
   }
   return value;
 };
-export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
+export const ReadPrettyInternalViewer: React.FC = observer(
+  (props: any) => {
     const fieldSchema = useFieldSchema();
     const recordCtx = useRecord();
     const { enableLink } = fieldSchema['x-component-props'];
@@ -112,4 +113,6 @@ export const ReadPrettyInternalViewer: React.FC = observer((props: any) => {
         </BlockAssociationContext.Provider>
       </div>
     );
-});
+  },
+  { displayName: 'ReadPrettyInternalViewer' },
+);

packages/core/client/src/schema-component/antd/association-field/Nester.tsx

@@ -25,7 +25,8 @@ const ToOneNester = (props) => {
   return <Card bordered={true}>{props.children}</Card>;
 };
 
-const ToManyNester = observer((props) => {
+const ToManyNester = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
     const { t } = useTranslation();
@@ -113,4 +114,6 @@ const ToManyNester = observer((props) => {
         )}
       </>
     );
-});
+  },
+  { displayName: 'ToManyNester' },
+);

packages/core/client/src/schema-component/antd/association-field/ReadPretty.tsx

@@ -7,7 +7,8 @@ import { InternalSubTable } from './InternalSubTable';
 import { FileManageReadPretty } from './FileManager';
 import { useAssociationFieldContext } from './hooks';
 
-const ReadPrettyAssociationField = observer((props: any) => {
+const ReadPrettyAssociationField = observer(
+  (props: any) => {
     const { currentMode } = useAssociationFieldContext();
 
     return (
@@ -18,12 +19,17 @@ const ReadPrettyAssociationField = observer((props: any) => {
         {currentMode === 'FileManager' && <FileManageReadPretty {...props} />}
       </>
     );
-});
+  },
+  { displayName: 'ReadPrettyAssociationField' },
+);
 
-export const ReadPretty = observer((props) => {
+export const ReadPretty = observer(
+  (props) => {
     return (
       <AssociationFieldProvider>
         <ReadPrettyAssociationField {...props} />
       </AssociationFieldProvider>
     );
-});
+  },
+  { displayName: 'ReadPretty' },
+);

packages/core/client/src/schema-component/antd/association-field/SubTable.tsx

@@ -5,7 +5,8 @@ import React from 'react';
 import { Table } from '../table-v2/Table';
 import { useAssociationFieldContext } from './hooks';
 
-export const SubTable: any = observer((props) => {
+export const SubTable: any = observer(
+  (props) => {
     const { field } = useAssociationFieldContext<ArrayField>();
     return (
       <div>
@@ -25,4 +26,6 @@ export const SubTable: any = observer((props) => {
         )}
       </div>
     );
-});
+  },
+  { displayName: 'SubTable' },
+);

packages/core/client/src/schema-component/antd/association-field/components/CreateRecordAction.tsx

@@ -6,7 +6,8 @@ import { ActionContext, useActionContext } from '../../action';
 import { useAssociationFieldContext, useInsertSchema } from '../hooks';
 import schema from '../schema';
 
-export const CreateRecordAction = observer((props) => {
+export const CreateRecordAction = observer(
+  (props) => {
     const field: any = useField();
     const fieldSchema = useFieldSchema();
     const ctx = useActionContext();
@@ -36,4 +37,6 @@ export const CreateRecordAction = observer((props) => {
         </ActionContext.Provider>
       </CollectionProvider>
     );
-});
+  },
+  { displayName: 'CreateRecordAction' },
+);

packages/core/client/src/schema-component/antd/association-select/ReadPretty.tsx

@@ -4,8 +4,11 @@ import { useFieldTitle } from '../../hooks';
 import { RemoteSelect } from '../remote-select';
 import useServiceOptions from './useServiceOptions';
 
-export const ReadPretty = observer((props: any) => {
+export const ReadPretty = observer(
+  (props: any) => {
     const service = useServiceOptions(props);
     useFieldTitle();
     return <RemoteSelect.ReadPretty {...props} service={service}></RemoteSelect.ReadPretty>;
-});
+  },
+  { displayName: 'ReadPretty' },
+);

packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx

@@ -3,7 +3,8 @@ import { uid } from '@formily/shared';
 import { BlockItem, DndContext, DragHandler, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import React from 'react';
 
-const Block = observer((props) => {
+const Block = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     return (
       <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
@@ -11,7 +12,9 @@ const Block = observer((props) => {
         <DragHandler />
       </div>
     );
-});
+  },
+  { displayName: 'Block' },
+);
 
 export default function App() {
   return (

packages/core/client/src/schema-component/antd/calendar/Calendar.tsx

@@ -190,7 +190,8 @@ const CalendarRecordViewer = (props) => {
   );
 };
 
-export const Calendar: any = observer((props: any) => {
+export const Calendar: any = observer(
+  (props: any) => {
     const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
     const [date, setDate] = useState<Date>(new Date());
     const [view, setView] = useState<(typeof Weeks)[number]>('month');
@@ -257,4 +258,6 @@ export const Calendar: any = observer((props: any) => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'Calendar' },
+);

packages/core/client/src/schema-component/antd/calendar/DeleteEvent.tsx

@@ -11,7 +11,8 @@ import { DeleteEventContext } from './Calendar';
 import { formatDate } from './utils';
 const { Text } = Typography;
 
-export const DeleteEvent = observer(() => {
+export const DeleteEvent = observer(
+  () => {
     const { visible, setVisible } = useActionContext();
     const { exclude = [], cron, ...record } = useRecord();
     const { close } = useContext(DeleteEventContext);
@@ -66,6 +67,8 @@ export const DeleteEvent = observer(() => {
       </Modal>,
       document.body,
     );
-});
+  },
+  { displayName: 'DeleteEvent' },
+);
 
 export default DeleteEvent;

packages/core/client/src/schema-component/antd/calendar/Event.tsx

@@ -1,6 +1,9 @@
 import { observer } from '@formily/react';
 import React from 'react';
 
-export const Event = observer((props) => {
+export const Event = observer(
+  (props) => {
     return <>{props.children}</>;
-});
+  },
+  { displayName: 'Event' },
+);

packages/core/client/src/schema-component/antd/calendar/Nav.tsx

@@ -6,7 +6,8 @@ import { navigate } from 'react-big-calendar/lib/utils/constants';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const Nav = observer((props) => {
+export const Nav = observer(
+  (props) => {
     const { DesignableBar } = useDesignable();
     const { onNavigate } = useContext(CalendarToolbarContext);
     return (
@@ -16,4 +17,6 @@ export const Nav = observer((props) => {
         <DesignableBar />
       </div>
     );
-});
+  },
+  { displayName: 'Nav' },
+);

packages/core/client/src/schema-component/antd/calendar/Title.tsx

@@ -4,7 +4,8 @@ import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 import { getLunarDay } from './utils';
 
-export const Title = observer(() => {
+export const Title = observer(
+  () => {
     const { DesignableBar } = useDesignable();
     const { date, view, label, showLunar } = useContext(CalendarToolbarContext);
 
@@ -22,4 +23,6 @@ export const Title = observer(() => {
         <DesignableBar />
       </div>
     );
-});
+  },
+  { displayName: 'Title' },
+);

packages/core/client/src/schema-component/antd/calendar/Today.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const Today = observer((props) => {
+export const Today = observer(
+  (props) => {
     const { DesignableBar } = useDesignable();
     const { onNavigate } = useContext(CalendarToolbarContext);
     const { t } = useTranslation();
@@ -20,4 +21,6 @@ export const Today = observer((props) => {
         <DesignableBar />
       </Button>
     );
-});
+  },
+  { displayName: 'Today' },
+);

packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx

@@ -4,7 +4,8 @@ import React, { useContext } from 'react';
 import { useDesignable } from '../../hooks';
 import { CalendarToolbarContext } from './context';
 
-export const ViewSelect = observer((props) => {
+export const ViewSelect = observer(
+  (props) => {
     const { DesignableBar } = useDesignable();
     const {
       views,
@@ -22,4 +23,6 @@ export const ViewSelect = observer((props) => {
         <DesignableBar />
       </div>
     );
-});
+  },
+  { displayName: 'ViewSelect' },
+);

packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx

@@ -58,6 +58,6 @@ export const CollectionSelect = connect(
           ))}
         </div>
       );
-    }),
+    }, { displayName: 'CollectionSelectObserver' }),
   ),
 );

packages/core/client/src/schema-component/antd/filter/Filter.tsx

@@ -15,7 +15,8 @@ const useDef = (options) => {
   return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
 };
 
-export const Filter: any = observer((props: any) => {
+export const Filter: any = observer(
+  (props: any) => {
     const { useDataSource = useDef } = props;
     const { options, dynamicComponent, className } = useProps(props);
     const field = useField<ObjectFieldModel>();
@@ -43,7 +44,9 @@ export const Filter: any = observer((props: any) => {
         </DatePickerProvider>
       </div>
     );
-});
+  },
+  { displayName: 'Filter' },
+);
 
 Filter.SaveDefaultValue = SaveDefaultValue;
 

packages/core/client/src/schema-component/antd/filter/FilterAction.tsx

@@ -11,7 +11,8 @@ import { Action } from '../action';
 
 export const FilterActionContext = createContext<any>(null);
 
-export const FilterAction = observer((props: any) => {
+export const FilterAction = observer(
+  (props: any) => {
     const { t } = useTranslation();
     const field = useField<Field>();
     const [visible, setVisible] = useState(false);
@@ -87,7 +88,9 @@ export const FilterAction = observer((props: any) => {
         </Popover>
       </FilterActionContext.Provider>
     );
-});
+  },
+  { displayName: 'FilterAction' },
+);
 
 const SaveConditions = () => {
   const { fieldSchema, field, designable, dn } = useContext(FilterActionContext);

packages/core/client/src/schema-component/antd/filter/FilterItem.tsx

@@ -9,7 +9,8 @@ import { RemoveConditionContext } from './context';
 import { DynamicComponent } from './DynamicComponent';
 import { useValues } from './useValues';
 
-export const FilterItem = observer((props: any) => {
+export const FilterItem = observer(
+  (props: any) => {
     const { t } = useTranslation();
     const compile = useCompile();
     const remove = useContext(RemoveConditionContext);
@@ -61,4 +62,6 @@ export const FilterItem = observer((props: any) => {
         </Space>
       </div>
     );
-});
+  },
+  { displayName: 'FilterItem' },
+);

packages/core/client/src/schema-component/antd/filter/FilterItems.tsx

@@ -5,7 +5,8 @@ import { RemoveConditionContext } from './context';
 import { FilterGroup } from './FilterGroup';
 import { FilterItem } from './FilterItem';
 
-export const FilterItems = observer((props) => {
+export const FilterItems = observer(
+  (props) => {
     const field = useField<ArrayFieldModel>();
     return (
       <div>
@@ -18,4 +19,6 @@ export const FilterItems = observer((props) => {
         })}
       </div>
     );
-});
+  },
+  { displayName: 'FilterItems' },
+);

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -53,7 +53,8 @@ const divWrap = (schema: ISchema) => {
   };
 };
 
-export const FormItem: any = observer((props: any) => {
+export const FormItem: any = observer(
+  (props: any) => {
     useEnsureOperatorsValid();
 
     const field = useField<Field>();
@@ -107,7 +108,9 @@ export const FormItem: any = observer((props: any) => {
         </BlockItem>
       </ACLCollectionFieldProvider>
     );
-});
+  },
+  { displayName: 'FormItem' },
+);
 
 FormItem.Designer = function Designer() {
   const { getCollectionFields, getInterface, getCollectionJoinField, getCollection } = useCollectionManager();

packages/core/client/src/schema-component/antd/form-v2/Form.tsx

@@ -170,7 +170,8 @@ export const Form: React.FC<FormProps> & {
   FilterDesigner?: any;
   ReadPrettyDesigner?: any;
   Templates?: any;
-} = observer((props) => {
+} = observer(
+  (props) => {
     const field = useField<Field>();
     const { form, disabled, ...others } = useProps(props);
     const formDisabled = disabled || field.disabled;
@@ -187,4 +188,6 @@ export const Form: React.FC<FormProps> & {
         </form>
       </ConfigProvider>
     );
-});
+  },
+  { displayName: 'Form' },
+);

packages/core/client/src/schema-component/antd/form-v2/FormField.tsx

@@ -4,7 +4,8 @@ import { useFormBlockContext } from '../../../block-provider';
 import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 
-export const FormField: any = observer((props) => {
+export const FormField: any = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     const { getField } = useCollection();
     const field = useField();
@@ -21,4 +22,6 @@ export const FormField: any = observer((props) => {
       }
     }, []);
     return <div>{props.children}</div>;
-});
+  },
+  { displayName: 'FormField' },
+);

packages/core/client/src/schema-component/antd/form/Form.tsx

@@ -83,7 +83,8 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
 
 const FormBlockContext = createContext<any>(null);
 
-export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) => {
+export const Form: React.FC<FormProps> & { Designer?: any } = observer(
+  (props) => {
     const { request, effects, initialValue, useValues = useDefaultValues, ...others } = props;
     const fieldSchema = useFieldSchema();
     const field = useField();
@@ -110,7 +111,9 @@ export const Form: React.FC<FormProps> & { Designer?: any } = observer((props) =
         </Spin>
       </FormBlockContext.Provider>
     );
-});
+  },
+  { displayName: 'Form' },
+);
 
 Form.Designer = () => {
   const { name, title } = useCollection();

packages/core/client/src/schema-component/antd/form/demos/demo1.tsx

@@ -49,10 +49,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   return (
     <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>

packages/core/client/src/schema-component/antd/form/demos/demo2.tsx

@@ -38,10 +38,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();

packages/core/client/src/schema-component/antd/form/demos/demo3.tsx

@@ -38,10 +38,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();

packages/core/client/src/schema-component/antd/form/demos/demo4.tsx

@@ -54,10 +54,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   return (
     <SchemaComponentProvider scope={{ useCloseAction }} components={{ Output, Form, Action, Input, FormItem }}>

packages/core/client/src/schema-component/antd/form/demos/demo5.tsx

@@ -69,10 +69,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();

packages/core/client/src/schema-component/antd/form/demos/demo6.tsx

@@ -39,10 +39,13 @@ export default observer(() => {
     },
   };
 
-  const Output = observer(() => {
+  const Output = observer(
+    () => {
       const form = useForm();
       return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-  });
+    },
+    { displayName: 'Output' },
+  );
 
   const useSubmit = () => {
     const form = useForm();

packages/core/client/src/schema-component/antd/form/demos/demo7.tsx

@@ -36,10 +36,13 @@ const schema: ISchema = {
   },
 };
 
-const Output = observer(() => {
+const Output = observer(
+  () => {
     const form = useForm();
     return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
-});
+  },
+  { displayName: 'Output' },
+);
 
 const useSubmit = () => {
   const form = useForm();

packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx

@@ -127,7 +127,8 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
   return <div className={cls(['g2plot', className])} ref={containerRef} />;
 });
 
-export const G2Plot: any = observer((props: any) => {
+export const G2Plot: any = observer(
+  (props: any) => {
     const { plot, config } = props;
     const field = useField<Field>();
     const { t } = useTranslation();
@@ -171,7 +172,9 @@ export const G2Plot: any = observer((props: any) => {
         />
       </div>
     );
-});
+  },
+  { displayName: 'G2Plot' },
+);
 
 G2Plot.Designer = G2PlotDesigner;
 G2Plot.plots = plots;

packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx

@@ -1,6 +1,9 @@
 import { observer } from '@formily/react';
 import React from 'react';
 
-export const Event = observer((props) => {
+export const Event = observer(
+  (props) => {
     return <>{props.children}</>;
-});
+  },
+  { displayName: 'Event' },
+);

packages/core/client/src/schema-component/antd/grid/Block.tsx

@@ -2,7 +2,8 @@ import { observer, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { DragHandler } from '../../';
 
-export const Block = observer((props) => {
+export const Block = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     return (
       <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
@@ -10,4 +11,6 @@ export const Block = observer((props) => {
         <DragHandler />
       </div>
     );
-});
+  },
+  { displayName: 'Block' },
+);

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -330,7 +330,8 @@ export const useGridRowContext = () => {
   return useContext(GridRowContext);
 };
 
-export const Grid: any = observer((props: any) => {
+export const Grid: any = observer(
+  (props: any) => {
     const gridRef = useRef(null);
     const field = useField();
     const fieldSchema = useFieldSchema();
@@ -344,7 +345,9 @@ export const Grid: any = observer((props: any) => {
     }, [gridRef.current]);
 
     return (
-    <GridContext.Provider value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}>
+      <GridContext.Provider
+        value={{ ref: gridRef, fieldSchema, renderSchemaInitializer: render, InitializerComponent }}
+      >
         <div className={'nb-grid'} style={{ position: 'relative' }} ref={gridRef}>
           <DndWrapper dndContext={props.dndContext}>
             <RowDivider
@@ -381,9 +384,12 @@ export const Grid: any = observer((props: any) => {
         </div>
       </GridContext.Provider>
     );
-});
+  },
+  { displayName: 'Grid' },
+);
 
-Grid.Row = observer(() => {
+Grid.Row = observer(
+  () => {
     const field = useField();
     const fieldSchema = useFieldSchema();
     const addr = field.address.toString();
@@ -436,9 +442,12 @@ Grid.Row = observer(() => {
         </div>
       </GridRowContext.Provider>
     );
-});
+  },
+  { displayName: 'Grid.Row' },
+);
 
-Grid.Col = observer((props: any) => {
+Grid.Col = observer(
+  (props: any) => {
     const { cols = [] } = useContext(GridRowContext);
     const schema = useFieldSchema();
     const field = useField();
@@ -467,4 +476,6 @@ Grid.Col = observer((props: any) => {
         </div>
       </GridColContext.Provider>
     );
-});
+  },
+  { displayName: 'Grid.Col' },
+);

packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx

@@ -2,7 +2,8 @@ import { observer, useFieldSchema } from '@formily/react';
 import { BlockItem, DragHandler, Grid, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import React from 'react';
 
-const Block = observer((props) => {
+const Block = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     return (
       <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
@@ -10,7 +11,9 @@ const Block = observer((props) => {
         <DragHandler />
       </div>
     );
-});
+  },
+  { displayName: 'Block' },
+);
 
 const schema = {
   _isJSONSchemaObject: true,

packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx

@@ -10,7 +10,8 @@ import { RecordProvider } from '../../../record-provider';
 import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
 import { KanbanCardContext } from './context';
 
-export const KanbanCard: any = observer((props: any) => {
+export const KanbanCard: any = observer(
+  (props: any) => {
     const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
       useContext(KanbanCardContext);
     const fieldSchema = useFieldSchema();
@@ -104,4 +105,6 @@ export const KanbanCard: any = observer((props: any) => {
         )}
       </SchemaComponentOptions>
     );
-});
+  },
+  { displayName: 'KanbanCard' },
+);

packages/core/client/src/schema-component/antd/kanban/Kanban.CardViewer.tsx

@@ -1,5 +1,8 @@
 import { observer } from '@formily/react';
 
-export const KanbanCardViewer: any = observer((props: any) => {
+export const KanbanCardViewer: any = observer(
+  (props: any) => {
     return props.children;
-});
+  },
+  { displayName: 'KanbanCardViewer' },
+);

packages/core/client/src/schema-component/antd/kanban/Kanban.tsx

@@ -55,7 +55,8 @@ export const toColumns = (groupField: any, dataSource: Array<any> = []) => {
   return Object.values(columns);
 };
 
-export const Kanban: any = observer((props: any) => {
+export const Kanban: any = observer(
+  (props: any) => {
     const { groupField, onCardDragEnd, ...restProps } = useProps(props);
     const field = useField<ArrayField>();
     const fieldSchema = useFieldSchema();
@@ -154,4 +155,6 @@ export const Kanban: any = observer((props: any) => {
         </Board>
       </Spin>
     );
-});
+  },
+  { displayName: 'Kanban' },
+);

packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx

@@ -41,7 +41,8 @@ const MarkdownEditor = (props: any) => {
   );
 };
 
-export const MarkdownVoid: any = observer((props: any) => {
+export const MarkdownVoid: any = observer(
+  (props: any) => {
     const { content, className } = props;
     const field = useField();
     const schema = useFieldSchema();
@@ -79,6 +80,8 @@ export const MarkdownVoid: any = observer((props: any) => {
     ) : (
       <div className={cls(['nb-markdown', className])} dangerouslySetInnerHTML={{ __html: html }} />
     );
-});
+  },
+  { displayName: 'MarkdownVoid' },
+);
 
 MarkdownVoid.Designer = MarkdownVoidDesigner;

packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx

@@ -23,7 +23,8 @@ const schema = {
   },
 };
 
-const Editable = observer((props: any) => {
+const Editable = observer(
+  (props: any) => {
     const filed = useField<any>();
     if (filed.editable) {
       return props.children;
@@ -40,7 +41,9 @@ const Editable = observer((props: any) => {
         <div>{props.children}</div>
       </div>
     );
-});
+  },
+  { displayName: 'Editable' },
+);
 
 export default () => {
   return (

packages/core/client/src/schema-component/antd/menu/Menu.tsx

@@ -136,7 +136,8 @@ const useSideMenuRef = () => {
 
 const MenuItemDesignerContext = createContext(null);
 
-export const Menu: ComposedMenu = observer((props) => {
+export const Menu: ComposedMenu = observer(
+  (props) => {
     const {
       onSelect,
       mode,
@@ -344,9 +345,12 @@ export const Menu: ComposedMenu = observer((props) => {
         </MenuItemDesignerContext.Provider>
       </DndContext>
     );
-});
+  },
+  { displayName: 'Menu' },
+);
 
-Menu.Item = observer((props) => {
+Menu.Item = observer(
+  (props) => {
     const { icon, ...others } = props;
     const schema = useFieldSchema();
     const field = useField();
@@ -380,9 +384,12 @@ Menu.Item = observer((props) => {
         </SortableItem>
       </AntdMenu.Item>
     );
-});
+  },
+  { displayName: 'MenuItem' },
+);
 
-Menu.URL = observer((props) => {
+Menu.URL = observer(
+  (props) => {
     const { icon, ...others } = props;
     const schema = useFieldSchema();
     const field = useField();
@@ -419,9 +426,12 @@ Menu.URL = observer((props) => {
         </SortableItem>
       </AntdMenu.Item>
     );
-});
+  },
+  { displayName: 'MenuURL' },
+);
 
-Menu.SubMenu = observer((props) => {
+Menu.SubMenu = observer(
+  (props) => {
     const { icon, ...others } = props;
     const schema = useFieldSchema();
     const field = useField();
@@ -451,6 +461,8 @@ Menu.SubMenu = observer((props) => {
         <RecursionField schema={schema} onlyRenderProperties />
       </AntdMenu.SubMenu>
     );
-});
+  },
+  { displayName: 'MenuSubMenu' },
+);
 
 Menu.Designer = MenuDesigner;

packages/core/client/src/schema-component/antd/pagination/index.tsx

@@ -3,7 +3,8 @@ import { Pagination as AntdPagination } from 'antd';
 import React, { KeyboardEventHandler } from 'react';
 import { useProps } from '../../hooks/useProps';
 
-export const Pagination = observer((props: any) => {
+export const Pagination = observer(
+  (props: any) => {
     const { hidden, ...others } = useProps(props);
     if (hidden) {
       return null;
@@ -19,4 +20,6 @@ export const Pagination = observer((props: any) => {
         <AntdPagination {...others} />
       </div>
     );
-});
+  },
+  { displayName: 'Pagination' },
+);

packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -25,7 +25,8 @@ const toValue = (value, placeholder) => {
   return value;
 };
 
-export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
+export const ReadPrettyRecordPicker: React.FC = observer(
+  (props: any) => {
     const { ellipsis } = props;
     const fieldSchema = useFieldSchema();
     const recordCtx = useRecord();
@@ -119,4 +120,6 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
         </BlockAssociationContext.Provider>
       </div>
     ) : null;
-});
+  },
+  { displayName: 'ReadPrettyRecordPicker' },
+);

packages/core/client/src/schema-component/antd/remote-select/ReadPretty.tsx

@@ -6,7 +6,8 @@ import { useRequest } from '../../../api-client';
 import { useRecord } from '../../../record-provider';
 import { useActionContext } from '../action';
 
-export const ReadPretty = observer((props: any) => {
+export const ReadPretty = observer(
+  (props: any) => {
     const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
     const field = useField<any>();
     const fieldSchema = useFieldSchema();
@@ -36,4 +37,6 @@ export const ReadPretty = observer((props: any) => {
     );
 
     return <Select.ReadPretty {...props} options={data?.data}></Select.ReadPretty>;
-});
+  },
+  { displayName: 'ReadPretty' },
+);

packages/core/client/src/schema-component/antd/select/ReadPretty.tsx

@@ -12,7 +12,8 @@ type Composed = {
   Object?: React.FC<any>;
 };
 
-export const ReadPretty = observer((props: any) => {
+export const ReadPretty = observer(
+  (props: any) => {
     const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
     const field = useField<any>();
     const compile = useCompile();
@@ -37,4 +38,6 @@ export const ReadPretty = observer((props: any) => {
         </EllipsisWithTooltip>
       </div>
     );
-});
+  },
+  { displayName: 'ReadPretty' },
+);

packages/core/client/src/schema-component/antd/table-v2/Table.Column.ActionBar.tsx

@@ -42,7 +42,8 @@ export const designerCss = css`
   }
 `;
 
-export const TableColumnActionBar = observer((props) => {
+export const TableColumnActionBar = observer(
+  (props) => {
     const Designer = useDesigner();
     return (
       <SortableItem className={designerCss}>
@@ -50,4 +51,6 @@ export const TableColumnActionBar = observer((props) => {
         {props.children}
       </SortableItem>
     );
-});
+  },
+  { displayName: 'TableColumnActionBar' },
+);

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -163,7 +163,8 @@ const useValidator = (validator: (value: any) => string) => {
   }, []);
 };
 
-export const Table: any = observer((props: any) => {
+export const Table: any = observer(
+  (props: any) => {
     const { pagination: pagination1, useProps, onChange, ...others1 } = props;
     const { pagination: pagination2, onClickRow, ...others2 } = useProps?.() || {};
     const {
@@ -498,4 +499,6 @@ export const Table: any = observer((props: any) => {
         )}
       </div>
     );
-});
+  },
+  { displayName: 'Table' },
+);

packages/core/client/src/schema-component/antd/table-v2/TableField.tsx

@@ -6,7 +6,8 @@ import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 import { ActionBar } from '../action';
 
-export const TableField: any = observer((props) => {
+export const TableField: any = observer(
+  (props) => {
     const fieldSchema = useFieldSchema();
     const { getField } = useCollection();
     const field = useField<Field>();
@@ -26,9 +27,12 @@ export const TableField: any = observer((props) => {
       field.decoratorProps.asterisk = fieldSchema.required;
     }, [fieldSchema.required]);
     return <div>{props.children}</div>;
-});
+  },
+  { displayName: 'TableField' },
+);
 
-TableField.ActionBar = observer((props) => {
+TableField.ActionBar = observer(
+  (props) => {
     const form = useForm();
     if (form.readPretty) {
       return null;
@@ -38,4 +42,6 @@ TableField.ActionBar = observer((props) => {
         <ActionBar {...props} />
       </div>
     );
-});
+  },
+  { displayName: 'TableField.ActionBar' },
+);

packages/core/client/src/schema-component/antd/table-v2/demos/demo3.tsx

@@ -4,7 +4,8 @@ import { SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 import { Table, TableColumnType } from 'antd';
 import React from 'react';
 
-const ArrayTable = observer((props: any) => {
+const ArrayTable = observer(
+  (props: any) => {
     const { rowKey } = props;
     const field = useField<ArrayField>();
     const schema = useFieldSchema();
@@ -24,7 +25,9 @@ const ArrayTable = observer((props: any) => {
     });
 
     return <Table {...props} rowKey={rowKey} columns={columns} dataSource={field.value} />;
-});
+  },
+  { displayName: 'ArrayTable' },
+);
 
 const Value = connect((props) => {
   return <li>value: {props.value}</li>;

packages/core/client/src/schema-component/antd/table/Table.Array.tsx

@@ -151,7 +151,8 @@ const useDefAction = () => {
   };
 };
 
-export const TableArray: React.FC<any> = observer((props) => {
+export const TableArray: React.FC<any> = observer(
+  (props) => {
     const field = useField<ArrayField>();
     const columns = useTableColumns();
     const {
@@ -287,4 +288,6 @@ export const TableArray: React.FC<any> = observer((props) => {
         </ReactDragListView>
       </div>
     );
-});
+  },
+  { displayName: 'TableArray' },
+);

packages/core/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx

@@ -42,7 +42,8 @@ export const designerCss = css`
   }
 `;
 
-export const TableColumnActionBar = observer((props) => {
+export const TableColumnActionBar = observer(
+  (props) => {
     const Designer = useDesigner();
     return (
       <SortableItem className={designerCss}>
@@ -50,4 +51,6 @@ export const TableColumnActionBar = observer((props) => {
         {props.children}
       </SortableItem>
     );
-});
+  },
+  { displayName: 'TableColumnActionBar' },
+);

packages/core/client/src/schema-component/antd/table/Table.RowSelection.tsx

@@ -9,7 +9,8 @@ type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: bool
 
 const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
 
-export const TableRowSelection = observer((props: Props) => {
+export const TableRowSelection = observer(
+  (props: Props) => {
     const { rowKey = 'id', objectValue } = props;
     const field = useField<Field>();
     const rowSelection: any = {
@@ -25,4 +26,6 @@ export const TableRowSelection = observer((props: Props) => {
       },
     };
     return <TableVoid {...props} rowSelection={rowSelection} />;
-});
+  },
+  { displayName: 'TableRowSelection' },
+);

packages/core/client/src/schema-component/antd/table/Table.Void.tsx

@@ -80,7 +80,8 @@ const useDefSelectedRowKeys = () => {
   return [result?.state?.selectedRowKeys, (selectedRowKeys) => result?.setState?.({ selectedRowKeys })];
 };
 
-export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
+export const TableVoid: React.FC<TableVoidProps> = observer(
+  (props) => {
     const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
     const field = useField<Field>();
     const fieldSchema = useFieldSchema();
@@ -121,4 +122,6 @@ export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
         </FormContext.Provider>
       </AsyncDataProvider>
     );
-});
+  },
+  { displayName: 'TableVoid' },
+);

packages/core/client/src/schema-component/antd/table/demos/demo4.tsx

@@ -184,7 +184,8 @@ const schema: ISchema = {
   },
 };
 
-const DataSourceProvider = observer((props) => {
+const DataSourceProvider = observer(
+  (props) => {
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [dataSource, setDataSource] = useState([]);
     const service = useRequest(
@@ -217,7 +218,9 @@ const DataSourceProvider = observer((props) => {
         {props.children}
       </DataSourceContext.Provider>
     );
-});
+  },
+  { displayName: 'DataSourceProvider' },
+);
 
 export default () => {
   return (

packages/core/client/src/schema-component/antd/tabs/Tabs.tsx

@@ -9,7 +9,8 @@ import { DndContext, SortableItem } from '../../common';
 import { useDesigner } from '../../hooks/useDesigner';
 import { TabsDesigner } from './Tabs.Designer';
 
-export const Tabs: any = observer((props: TabsProps) => {
+export const Tabs: any = observer(
+  (props: TabsProps) => {
     const fieldSchema = useFieldSchema();
     const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
     return (
@@ -30,7 +31,9 @@ export const Tabs: any = observer((props: TabsProps) => {
         </AntdTabs>
       </DndContext>
     );
-});
+  },
+  { displayName: 'Tabs' },
+);
 
 const designerCss = css`
   position: relative;
@@ -79,7 +82,8 @@ const designerCss = css`
   }
 `;
 
-Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
+Tabs.TabPane = observer(
+  (props: TabPaneProps & { icon?: any }) => {
     const Designer = useDesigner();
     const field = useField();
     return (
@@ -88,6 +92,8 @@ Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
         <Designer />
       </SortableItem>
     );
-});
+  },
+  { displayName: 'TabPane' },
+);
 
 Tabs.Designer = TabsDesigner;