fix: add displayName (#3628)

* fix: context add displayName

* fix: observer add displayName

* fix: memo component add displayName

* fix: forwordRef component add displayName

packages/core/client/src/acl/ACLProvider.tsx

@@ -14,6 +14,7 @@ import { useApp } from '../application';
 import { useDataSourceKey } from '../data-source/data-source/DataSourceProvider';
 
 export const ACLContext = createContext<any>({});
+ACLContext.displayName = 'ACLContext';
 
 // TODO: delete this，replace by `ACLPlugin`
 export const ACLProvider = (props) => {
@@ -90,6 +91,7 @@ export const useACLContext = () => {
 };
 
 export const ACLActionParamsContext = createContext<any>({});
+ACLActionParamsContext.displayName = 'ACLActionParamsContext';
 
 export const useACLRolesCheck = () => {
   const ctx = useContext(ACLContext);

packages/core/client/src/acl/Configuration/ConfigureCenter.tsx

@@ -31,6 +31,7 @@ const getChildrenKeys = (data = [], arr = []) => {
 };
 
 const SettingMenuContext = createContext(null);
+SettingMenuContext.displayName = 'SettingMenuContext';
 
 export const SettingCenterProvider = (props) => {
   const configureItems = useContext(SettingsCenterContext);

packages/core/client/src/acl/Configuration/MenuItemsProvider.tsx

@@ -4,6 +4,7 @@ import { useRequest } from '../../api-client';
 import { useAdminSchemaUid } from '../../hooks';
 
 const MenuItemsContext = createContext(null);
+MenuItemsContext.displayName = 'MenuItemsContext';
 
 export const toItems = (properties = {}) => {
   const items = [];

packages/core/client/src/acl/Configuration/PermisionProvider.tsx

@@ -14,6 +14,7 @@ export const SettingCenterPermissionProvider = (props) => {
 };
 
 export const PermissionContext = createContext<any>(null);
+PermissionContext.displayName = 'PermissionContext';
 
 export const PermissionProvider = (props) => {
   const api = useAPIClient();

packages/core/client/src/acl/Configuration/RoleTable.tsx

@@ -7,6 +7,7 @@ import { PermissionProvider, SettingCenterPermissionProvider } from '../Configur
 import { roleSchema } from './schemas/roles';
 
 const AvailableActionsContext = createContext([]);
+AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 const AvailableActionsProver: React.FC = (props) => {
   const { data, loading } = useRequest<{

packages/core/client/src/acl/Configuration/RolesResourcesActions.tsx

@@ -22,6 +22,7 @@ const toActionMap = (arr: any[]) => {
 };
 
 export const RoleResourceCollectionContext = createContext<any>({});
+RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
 
 export const RolesResourcesActions = connect((props) => {
   const { styles } = useStyles();

packages/core/client/src/acl/Configuration/ScopeSelect.tsx

@@ -4,6 +4,7 @@ import { FormProvider, SchemaComponent } from '../../schema-component';
 import { scopesSchema } from './schemas/scopes';
 
 const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
+RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
 
 const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
   const [keys, setKeys] = useState([]);

packages/core/client/src/antd-config-provider/index.tsx

@@ -7,6 +7,7 @@ import { Plugin } from '../application/Plugin';
 import { loadConstrueLocale } from './loadConstrueLocale';
 
 export const AppLangContext = createContext<any>({});
+AppLangContext.displayName = 'AppLangContext';
 
 export const useAppLangContext = () => {
   return useContext(AppLangContext);

packages/core/client/src/api-client/context.ts

@@ -2,3 +2,4 @@ import { createContext } from 'react';
 import { APIClient } from './APIClient';
 
 export const APIClientContext = createContext<APIClient>(new APIClient());
+APIClientContext.displayName = 'APIClientContext';

packages/core/client/src/appInfo/CurrentAppInfoProvider.tsx

@@ -3,6 +3,7 @@ import { useRequest } from '../api-client';
 import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export const CurrentAppInfoContext = createContext(null);
+CurrentAppInfoContext.displayName = 'CurrentAppInfoContext';
 
 export const useCurrentAppInfo = () => {
   return useContext<{

packages/core/client/src/application/PluginSettingsManager.ts

@@ -45,6 +45,7 @@ export class PluginSettingsManager {
   protected settings: Record<string, PluginSettingOptions> = {};
   protected aclSnippets: string[] = [];
   public app: Application;
+  private cachedList = {};
 
   constructor(_pluginSettings: Record<string, PluginSettingOptions>, app: Application) {
     this.app = app;
@@ -141,11 +142,16 @@ export class PluginSettingsManager {
   }
 
   getList(filterAuth = true): PluginSettingsPageType[] {
-    return Array.from(new Set(Object.values(this.settings).map((item) => item.topLevelName)))
+    const cacheKey = JSON.stringify(filterAuth);
+    if (this.cachedList[cacheKey]) return this.cachedList[cacheKey];
+
+    return (this.cachedList[cacheKey] = Array.from(
+      new Set(Object.values(this.settings).map((item) => item.topLevelName)),
+    )
       .sort((a, b) => a.localeCompare(b)) // sort by name
       .map((name) => this.get(name, filterAuth))
       .filter(Boolean)
-      .sort((a, b) => (a.sort || 0) - (b.sort || 0));
+      .sort((a, b) => (a.sort || 0) - (b.sort || 0)));
   }
 
   getAclSnippets() {

packages/core/client/src/application/components/AppComponent.tsx

@@ -8,7 +8,8 @@ export interface AppComponentProps {
   app: Application;
 }
 
-export const AppComponent: FC<AppComponentProps> = observer((props) => {
+export const AppComponent: FC<AppComponentProps> = observer(
+  (props) => {
     const { app } = props;
     const handleErrors = useCallback((error: Error, info: { componentStack: string }) => {
       console.error(error);
@@ -36,4 +37,6 @@ export const AppComponent: FC<AppComponentProps> = observer((props) => {
         </ApplicationContext.Provider>
       </ErrorBoundary>
     );
-});
+  },
+  { displayName: 'AppComponent' },
+);

packages/core/client/src/application/context.ts

@@ -2,3 +2,4 @@ import { createContext } from 'react';
 import { Application } from './Application';
 
 export const ApplicationContext = createContext<Application>(null);
+ApplicationContext.displayName = 'ApplicationContext';

packages/core/client/src/application/schema-initializer/hoc/index.tsx

@@ -13,7 +13,8 @@ import { SchemaInitializerOptions } from '../types';
 const defaultWrap = (s: ISchema) => s;
 
 export function withInitializer<T>(C: ComponentType<T>) {
-  const WithInitializer = observer((props: SchemaInitializerOptions<T>) => {
+  const WithInitializer = observer(
+    (props: SchemaInitializerOptions<T>) => {
       const { designable, insertAdjacent } = useDesignable();
       const { isInSubTable } = useFlag() || {};
       const {
@@ -118,8 +119,8 @@ export function withInitializer<T>(C: ComponentType<T>) {
           )}
         </SchemaInitializerContext.Provider>
       );
-  });
+    },
-
+    { displayName: `WithInitializer(${C.displayName || C.name})` },
-  WithInitializer.displayName = `WithInitializer(${C.displayName || C.name})`;
+  );
   return WithInitializer;
 }

packages/core/client/src/application/schema-initializer/hooks/index.tsx

@@ -11,7 +11,7 @@ export * from './useAriaAttributeOfMenuItem';
 
 export function useSchemaInitializerMenuItems(items: any[], name?: string, onClick?: (args: any) => void) {
   const getMenuItems = useGetSchemaInitializerMenuItems(onClick);
-  return getMenuItems(items, name);
+  return useMemo(() => getMenuItems(items, name), [getMenuItems, items, name]);
 }
 
 export function useGetSchemaInitializerMenuItems(onClick?: (args: any) => void) {

packages/core/client/src/application/schema-settings/components/SchemaSettingsIcon.tsx

@@ -13,3 +13,4 @@ export const SchemaSettingsIcon: FC<SchemaSettingOptions> = React.memo((props) =
   const style = useMemo(() => ({ cursor: 'pointer', fontSize: 12 }), []);
   return <MenuOutlined role="button" style={style} aria-label={getAriaLabel('schema-settings', name)} />;
 });
+SchemaSettingsIcon.displayName = 'SchemaSettingsIcon';

packages/core/client/src/async-data-provider/index.tsx

@@ -3,6 +3,7 @@ import React, { createContext, useContext } from 'react';
 import { useRequest } from '../api-client';
 
 export const AsyncDataContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
+AsyncDataContext.displayName = 'AsyncDataContext';
 
 export interface AsyncDataProviderProps {
   value?: any;

packages/core/client/src/block-provider/BlockProvider.tsx

@@ -35,7 +35,9 @@ import { useDataBlockSourceId } from './hooks/useDataBlockSourceId';
  * @deprecated
  */
 export const BlockResourceContext = createContext(null);
+BlockResourceContext.displayName = 'BlockResourceContext';
 export const BlockAssociationContext = createContext(null);
+BlockAssociationContext.displayName = 'BlockAssociationContext';
 
 /**
  * @deprecated
@@ -50,6 +52,7 @@ export const BlockRequestContext_deprecated = createContext<{
   __parent?: any;
   updateAssociationValues?: any[];
 }>({});
+BlockRequestContext_deprecated.displayName = 'BlockRequestContext_deprecated';
 
 export const useBlockResource = () => {
   const resource = useDataBlockResource();
@@ -209,6 +212,7 @@ const BlockContext = createContext<{
   /** 用以区分区块的标识 */
   name: string;
 }>(null);
+BlockContext.displayName = 'BlockContext';
 
 export const useBlockContext = () => {
   return useContext(BlockContext);

packages/core/client/src/block-provider/DetailsBlockProvider.tsx

@@ -9,6 +9,7 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { useParsedFilter } from './hooks';
 
 export const DetailsBlockContext = createContext<any>({});
+DetailsBlockContext.displayName = 'DetailsBlockContext';
 
 const InternalDetailsBlockProvider = (props) => {
   const { action, readPretty } = props;

packages/core/client/src/block-provider/FormBlockProvider.tsx

@@ -12,6 +12,7 @@ import { TemplateBlockProvider } from './TemplateBlockProvider';
 import { FormActiveFieldsProvider } from './hooks/useFormActiveFields';
 
 export const FormBlockContext = createContext<any>({});
+FormBlockContext.displayName = 'FormBlockContext';
 
 const InternalFormBlockProvider = (props) => {
   const ctx = useFormBlockContext();

packages/core/client/src/block-provider/FormFieldProvider.tsx

@@ -10,6 +10,7 @@ import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { useFormBlockContext } from './FormBlockProvider';
 
 export const FormFieldContext = createContext<any>({});
+FormFieldContext.displayName = 'FormFieldContext';
 
 const InternalFormFieldProvider = (props) => {
   const { action, readPretty, fieldName } = props;
@@ -75,6 +76,7 @@ const InternalFormFieldProvider = (props) => {
 };
 
 export const WithoutFormFieldResource = createContext(null);
+WithoutFormFieldResource.displayName = 'WithoutFormFieldResource';
 
 export const FormFieldProvider = (props) => {
   return (

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -9,6 +9,8 @@ import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestCont
 import { findFilterTargets, useParsedFilter } from './hooks';
 
 export const TableBlockContext = createContext<any>({});
+TableBlockContext.displayName = 'TableBlockContext';
+
 export function getIdsWithChildren(nodes) {
   const ids = [];
   if (nodes) {

packages/core/client/src/block-provider/TableFieldProvider.tsx

@@ -7,6 +7,7 @@ import { useFormBlockContext } from './FormBlockProvider';
 import { useFormFieldContext } from './FormFieldProvider';
 
 export const TableFieldContext = createContext<any>({});
+TableFieldContext.displayName = 'TableFieldContext';
 
 const InternalTableFieldProvider = (props) => {
   const { params = {}, showIndex, dragSort, fieldName } = props;
@@ -122,6 +123,7 @@ export class TableFieldResource {
 }
 
 export const WithoutTableFieldResource = createContext(null);
+WithoutTableFieldResource.displayName = 'WithoutTableFieldResource';
 
 export const TableFieldProvider = (props) => {
   return (

packages/core/client/src/block-provider/TableSelectorProvider.tsx

@@ -20,7 +20,9 @@ type Params = {
 };
 
 export const TableSelectorContext = createContext<any>({});
+TableSelectorContext.displayName = 'TableSelectorContext';
 const TableSelectorParamsContext = createContext<Params>({}); // 用于传递参数
+TableSelectorParamsContext.displayName = 'TableSelectorParamsContext';
 
 type TableSelectorProviderProps = {
   params: Record<string, any>;

packages/core/client/src/block-provider/TemplateBlockProvider.tsx

@@ -5,6 +5,7 @@ const TemplateBlockContext = createContext<{
   templateFinshed?: boolean;
   onTemplateSuccess?: Function;
 }>({});
+TemplateBlockContext.displayName = 'TemplateBlockContext';
 
 export const useTemplateBlockContext = () => {
   return useContext(TemplateBlockContext);

packages/core/client/src/collection-manager/CollectionHistoryProvider.tsx

@@ -12,6 +12,7 @@ const CollectionHistoryContext = createContext<CollectionHistoryContextValue>({
   historyCollections: [],
   refreshCH: () => undefined,
 });
+CollectionHistoryContext.displayName = 'CollectionHistoryContext';
 
 export const CollectionHistoryProvider: React.FC = (props) => {
   const api = useAPIClient();

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

@@ -51,6 +51,4 @@ const Summary = observer(
   { displayName: 'Summary' },
 );
 
-Summary.displayName = 'Summary';
-
 export default Summary;

packages/core/client/src/collection-manager/ResourceActionProvider.tsx

@@ -8,6 +8,7 @@ import { useAPIClient, useRequest } from '../api-client';
 export const ResourceActionContext = createContext<
   Result<any, any> & { state?: any; setState?: any; dragSort?: boolean; defaultRequest?: any }
 >(null);
+ResourceActionContext.displayName = 'ResourceActionContext';
 
 interface ResourceActionProviderProps {
   type?: 'association' | 'collection';
@@ -18,6 +19,7 @@ interface ResourceActionProviderProps {
 }
 
 const ResourceContext = createContext<any>(null);
+ResourceContext.displayName = 'ResourceContext';
 
 const CollectionResourceActionProvider = (props) => {
   const { collection, request, uid, dragSort } = props;

packages/core/client/src/collection-manager/context.ts

@@ -1,3 +1,4 @@
 import { createContext } from 'react';
 
 export const CollectionCategroriesContext = createContext({ data: [], refresh: () => {} });
+CollectionCategroriesContext.displayName = 'CollectionCategroriesContext';

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

@@ -69,6 +69,7 @@ const collection: CollectionOptions = {
 };
 
 export const DataSourceContext_deprecated = createContext(null);
+DataSourceContext_deprecated.displayName = 'DataSourceContext_deprecated';
 
 const useSelectedRowKeys = () => {
   const ctx = useContext(DataSourceContext_deprecated);

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

@@ -100,7 +100,8 @@ const getDefaultCollectionFields = (presetFields, values) => {
   // 其他
   return defaults;
 };
-export const PresetFields = observer((props: any) => {
+export const PresetFields = observer(
+  (props: any) => {
     const { getInterface } = useCollectionManager_deprecated();
     const form = useForm();
     const compile = useCompile();
@@ -211,4 +212,6 @@ export const PresetFields = observer((props: any) => {
         }}
       />
     );
-});
+  },
+  { displayName: 'PresetFields' },
+);

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

@@ -73,7 +73,8 @@ const useSourceFieldsOptions = () => {
   return data;
 };
 
-export const FieldsConfigure = observer(() => {
+export const FieldsConfigure = observer(
+  () => {
     const { t } = useTranslation();
     const [dataSource, setDataSource] = useState([]);
     const { data: res, error, loading } = useAsyncData();
@@ -291,4 +292,6 @@ export const FieldsConfigure = observer(() => {
         rowKey="name"
       />
     );
-});
+  },
+  { displayName: 'FieldsConfigure' },
+);

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

@@ -4,7 +4,8 @@ import { Table } from 'antd';
 import { Schema, observer, useForm } from '@formily/react';
 import { useTranslation } from 'react-i18next';
 
-export const PreviewTable = observer(() => {
+export const PreviewTable = observer(
+  () => {
     const { data: res, loading, error } = useAsyncData();
     const { data } = res || {};
     const { t } = useTranslation();
@@ -55,4 +56,6 @@ export const PreviewTable = observer(() => {
         rowKey="key"
       />
     );
-});
+  },
+  { displayName: 'PreviewTable' },
+);

packages/core/client/src/data-source/collection/AssociationProvider.tsx

@@ -12,6 +12,7 @@ export interface AssociationProviderProps {
 }
 
 const ParentCollectionContext = createContext<Collection>(null);
+ParentCollectionContext.displayName = 'ParentCollectionContext';
 
 const ParentCollectionProvider = (props) => {
   const collection = useCollection();

packages/core/client/src/document-title/index.tsx

@@ -13,6 +13,7 @@ export const DocumentTitleContext = createContext<DocumentTitleContextProps>({
   title: null,
   setTitle() {},
 });
+DocumentTitleContext.displayName = 'DocumentTitleContext';
 
 export const DocumentTitleProvider: React.FC<{ addonBefore?: string; addonAfter?: string }> = (props) => {
   const { addonBefore, addonAfter } = props;

packages/core/client/src/filter-provider/FilterProvider.tsx

@@ -58,6 +58,7 @@ interface FilterContextValue {
 }
 
 const FilterContext = createContext<FilterContextValue>(null);
+FilterContext.displayName = 'FilterContext';
 
 /**
  * 主要用于记录当前页面中的数据区块的信息，用于在过滤区块中使用

packages/core/client/src/global-theme/AntdAppProvider.tsx

@@ -15,6 +15,7 @@ const AppInner = memo(({ children }: { children: React.ReactNode }) => {
 
   return <>{children}</>;
 });
+AppInner.displayName = 'AppInner';
 
 const AntdAppProvider = ({ children }: { children: React.ReactNode }) => {
   return (

packages/core/client/src/global-theme/index.tsx

@@ -25,6 +25,7 @@ interface GlobalThemeContextProps {
 }
 
 const GlobalThemeContext = createContext<GlobalThemeContextProps>(null);
+GlobalThemeContext.displayName = 'GlobalThemeContext';
 
 export const useGlobalTheme = () => {
   return React.useContext(GlobalThemeContext) || ({ theme: {}, isDarkTheme: false } as GlobalThemeContextProps);

packages/core/client/src/hooks/useMenuItem.tsx

@@ -10,7 +10,9 @@ type Item = MenuProps['items'][0] & {
 };
 
 export const GetMenuItemContext = createContext<{ collectMenuItem?(item: Item): void; onChange?: () => void }>(null);
+GetMenuItemContext.displayName = 'GetMenuItemContext';
 export const GetMenuItemsContext = createContext<{ pushMenuItem?(item: Item): void }>(null);
+GetMenuItemsContext.displayName = 'GetMenuItemsContext';
 
 /**
  * 用于为 SchemaInitializer.Item 组件提供一些方法，比如收集菜单项数据

packages/core/client/src/nocobase-buildin-plugin/index.tsx

@@ -65,7 +65,8 @@ const useErrorProps = (app: Application, error: any) => {
   }
 };
 
-const AppError: FC<{ error: Error; app: Application }> = observer(({ app, error }) => {
+const AppError: FC<{ error: Error; app: Application }> = observer(
+  ({ app, error }) => {
     const props = useErrorProps(app, error);
     return (
       <div>
@@ -88,7 +89,9 @@ const AppError: FC<{ error: Error; app: Application }> = observer(({ app, error
         />
       </div>
     );
-});
+  },
+  { displayName: 'AppError' },
+);
 
 const getProps = (app: Application) => {
   if (app.ws.serverDown) {
@@ -195,7 +198,8 @@ const getProps = (app: Application) => {
   return {};
 };
 
-const AppMaintaining: FC<{ app: Application; error: Error }> = observer(({ app }) => {
+const AppMaintaining: FC<{ app: Application; error: Error }> = observer(
+  ({ app }) => {
     const { icon, status, title, subTitle } = getProps(app);
     return (
       <div>
@@ -218,16 +222,21 @@ const AppMaintaining: FC<{ app: Application; error: Error }> = observer(({ app }
         />
       </div>
     );
-});
+  },
+  { displayName: 'AppMaintaining' },
+);
 
-const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(({ app }) => {
+const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
+  ({ app }) => {
     const { icon, status, title, subTitle } = getProps(app);
     return (
       <Modal open={true} footer={null} closable={false}>
         <Result icon={icon} status={status} title={app.i18n.t(title)} subTitle={app.i18n.t(subTitle)} />
       </Modal>
     );
-});
+  },
+  { displayName: 'AppMaintainingDialog' },
+);
 
 const AppNotFound = () => {
   const navigate = useNavigate();

packages/core/client/src/plugin-manager/context.ts

@@ -1,3 +1,4 @@
 import { createContext } from 'react';
 
 export const PinnedPluginListContext = createContext({ items: {} });
+PinnedPluginListContext.displayName = 'PinnedPluginListContext';

packages/core/client/src/pm/PluginDocument.tsx

@@ -73,3 +73,4 @@ export const PluginDocument: React.FC<PluginDocumentProps> = memo((props) => {
     </div>
   );
 });
+PluginDocument.displayName = 'PluginDocument';

packages/core/client/src/pm/PluginSetting.tsx

@@ -9,6 +9,7 @@ import { ADMIN_SETTINGS_PATH, PluginSettingsPageType, useApp } from '../applicat
 import { useCompile } from '../schema-component';
 
 export const SettingsCenterContext = createContext<any>({});
+SettingsCenterContext.displayName = 'SettingsCenterContext';
 
 function getMenuItems(list: PluginSettingsPageType[]) {
   return list.map((item) => {

packages/core/client/src/record-provider/index.tsx

@@ -4,7 +4,9 @@ import { CollectionRecordProvider } from '../data-source';
 import { useCurrentUserContext } from '../user';
 
 export const RecordContext_deprecated = createContext({});
+RecordContext_deprecated.displayName = 'RecordContext_deprecated';
 export const RecordIndexContext = createContext(null);
+RecordIndexContext.displayName = 'RecordIndexContext';
 
 /**
  * @deprecated use `CollectionRecordProvider` instead

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -54,6 +54,7 @@ const filterByACL = (schema, options) => {
 };
 
 const SchemaIdContext = createContext(null);
+SchemaIdContext.displayName = 'SchemaIdContext';
 const useMenuProps = () => {
   const defaultSelectedUid = useContext(SchemaIdContext);
   return {

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

@@ -4,6 +4,7 @@ import React, { createContext } from 'react';
 import { useActionContext } from './hooks';
 
 export const ActionContext = createContext<ActionContextProps>({});
+ActionContext.displayName = 'ActionContext';
 
 export const ActionContextProvider: React.FC<ActionContextProps & { value?: ActionContextProps }> = (props) => {
   const contextProps = useActionContext();

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

@@ -40,7 +40,8 @@ export const filterAnalyses = (filters): any[] => {
   return results;
 };
 
-const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
+const InternalAssociationSelect = observer(
+  (props: AssociationSelectProps) => {
     const { objectValue = true } = props;
     const field: any = useField();
     const fieldSchema = useFieldSchema();
@@ -149,7 +150,9 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
         </Space.Compact>
       </div>
     );
-});
+  },
+  { displayName: 'AssociationSelect' },
+);
 
 interface AssociationSelectInterface {
   (props: any): React.ReactElement;

packages/core/client/src/schema-component/antd/association-field/context.ts

@@ -10,3 +10,4 @@ export interface AssociationFieldContextProps {
 }
 
 export const AssociationFieldContext = createContext<AssociationFieldContextProps>({});
+AssociationFieldContext.displayName = 'AssociationFieldContext';

packages/core/client/src/schema-component/antd/association-field/hooks.ts

@@ -179,6 +179,7 @@ export const useFieldNames = (props) => {
 };
 
 const SubFormContext = createContext<Record<string, any>>(null);
+SubFormContext.displayName = 'SubFormContext';
 export const SubFormProvider = SubFormContext.Provider;
 
 /**

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

@@ -12,6 +12,7 @@ import { Action } from '../action';
 import { StablePopover } from '../popover';
 
 export const FilterActionContext = createContext<any>(null);
+FilterActionContext.displayName = 'FilterActionContext';
 
 export const FilterAction = observer(
   (props: any) => {

packages/core/client/src/schema-component/antd/filter/context.ts

@@ -12,5 +12,8 @@ export interface FilterContextProps {
 }
 
 export const RemoveConditionContext = createContext(null);
+RemoveConditionContext.displayName = 'RemoveConditionContext';
 export const FilterContext = createContext<FilterContextProps>(null);
+FilterContext.displayName = 'FilterContext';
 export const FilterLogicContext = createContext(null);
+FilterLogicContext.displayName = 'FilterLogicContext';

packages/core/client/src/schema-component/antd/filter/useOperators.ts

@@ -1,5 +1,6 @@
 import { useFieldSchema } from '@formily/react';
 import { useCollection_deprecated, useCollectionManager_deprecated } from '../../../collection-manager';
+import { useMemo } from 'react';
 
 /**
  * 获取当前字段所支持的操作符列表
@@ -7,15 +8,17 @@ import { useCollection_deprecated, useCollectionManager_deprecated } from '../..
  */
 export const useOperatorList = (): any[] => {
   const schema = useFieldSchema();
-  const fieldInterface = schema['x-designer-props']?.interface;
   const { name } = useCollection_deprecated();
   const { getCollectionFields, getInterface } = useCollectionManager_deprecated();
-  const collectionFields = getCollectionFields(name);
 
+  const res = useMemo(() => {
+    const fieldInterface = schema['x-designer-props']?.interface;
+    const collectionFields = getCollectionFields(name);
     if (fieldInterface) {
       return getInterface(fieldInterface)?.filterable?.operators || [];
     }
-
     const field = collectionFields.find((item) => item.name === schema.name);
     return getInterface(field?.interface)?.filterable?.operators || [];
+  }, [schema.name]);
+  return res;
 };

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

@@ -78,9 +78,12 @@ export function FormDialog(title: any, id: any, renderer?: any, theme?: any): IF
       root.unmount();
     },
   };
-  const DialogContent = observer(() => {
+  const DialogContent = observer(
+    () => {
       return <Fragment>{isFn(renderer) ? renderer(env.form) : renderer}</Fragment>;
-  });
+    },
+    { displayName: 'DialogContent' },
+  );
   const renderDialog = (open = true, resolve?: () => any, reject?: () => any) => {
     const { form } = env;
     if (!form) return null;

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

@@ -87,6 +87,7 @@ const useDefaultValues = (opts: any = {}, props: FormProps = {}) => {
 };
 
 const FormBlockContext = createContext<any>(null);
+FormBlockContext.displayName = 'FormBlockContext';
 
 export const Form: React.FC<FormProps> & { Designer?: any } = observer(
   (props) => {

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

@@ -126,6 +126,7 @@ export const G2PlotRenderer = forwardRef(function <O = any>(props: ReactG2PlotPr
 
   return <div className={cls(['g2plot', className])} ref={containerRef} />;
 });
+G2PlotRenderer.displayName = 'G2PlotRenderer';
 
 export const G2Plot: any = observer(
   (props: any) => {
@@ -140,12 +141,14 @@ export const G2Plot: any = observer(
       if (typeof fn === 'function') {
         const result = fn.bind({ api })();
         if (result?.then) {
-          result.then((data) => {
+          result
+            .then((data) => {
               if (Array.isArray(data)) {
                 field.componentProps.config.data = data;
               }
               field.data.loading = false;
-          });
+            })
+            .catch(console.error);
         } else {
           field.data.loading = false;
         }

packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx

@@ -5,6 +5,7 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
 import useStyles from './GridCard.Decorator.style';
 export const GridCardBlockContext = createContext<any>({});
+GridCardBlockContext.displayName = 'GridCardBlockContext';
 
 const InternalGridCardBlockProvider = (props) => {
   const { resource, service } = useBlockRequestContext();

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

@@ -11,8 +11,11 @@ import { useToken } from '../__builtins__';
 import useStyles from './Grid.style';
 
 const GridRowContext = createContext<any>({});
+GridRowContext.displayName = 'GridRowContext';
 const GridColContext = createContext<any>({});
+GridColContext.displayName = 'GridColContext';
 const GridContext = createContext<any>({});
+GridContext.displayName = 'GridContext';
 
 const breakRemoveOnGrid = (s: Schema) => s['x-component'] === 'Grid';
 const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row';

packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx

@@ -77,3 +77,4 @@ export const EllipsisWithTooltip = forwardRef((props: Partial<IEllipsisWithToolt
     </Popover>
   );
 });
+EllipsisWithTooltip.displayName = 'EllipsisWithTooltip';

packages/core/client/src/schema-component/antd/input/Json.tsx

@@ -67,3 +67,4 @@ export const Json = React.forwardRef<typeof Input.TextArea, JSONTextAreaProps>(
     );
   },
 );
+Json.displayName = 'Json';

packages/core/client/src/schema-component/antd/list/List.Decorator.tsx

@@ -7,6 +7,7 @@ import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { BlockProvider, useBlockRequestContext, useParsedFilter } from '../../../block-provider';
 
 export const ListBlockContext = createContext<any>({});
+ListBlockContext.displayName = 'ListBlockContext';
 
 const InternalListBlockProvider = (props) => {
   const { resource, service } = useBlockRequestContext();

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

@@ -350,7 +350,6 @@ const SideMenu = ({
 };
 
 const MenuModeContext = createContext(null);
-
 MenuModeContext.displayName = 'MenuModeContext';
 
 const useSideMenuRef = () => {

packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx

@@ -6,7 +6,8 @@ import React, { useMemo, useRef } from 'react';
 import { useCollectionManager_deprecated } from '../../../collection-manager';
 import { StablePopover } from '../popover';
 
-export const Editable = observer((props) => {
+export const Editable = observer(
+  (props) => {
     const field: any = useField();
     const containerRef = useRef(null);
     const fieldSchema = useFieldSchema();
@@ -65,9 +66,12 @@ export const Editable = observer((props) => {
         </StablePopover>
       </FormItem>
     );
-});
+  },
+  { displayName: 'Editable' },
+);
 
-export const QuickEdit = observer((props) => {
+export const QuickEdit = observer(
+  (props) => {
     const field = useField<Field>();
     const { getCollectionJoinField } = useCollectionManager_deprecated();
     const fieldSchema = useFieldSchema();
@@ -76,4 +80,6 @@ export const QuickEdit = observer((props) => {
       return null;
     }
     return field.editable ? <Editable {...props} /> : <FormItem {...props} style={{ padding: '0 8px' }} />;
-});
+  },
+  { displayName: 'QuickEdit' },
+);

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

@@ -16,6 +16,7 @@ import { useFieldNames } from './useFieldNames';
 import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 export const RecordPickerContext = createContext(null);
+RecordPickerContext.displayName = 'RecordPickerContext';
 
 function flatData(data) {
   const newArr = [];

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

@@ -13,6 +13,7 @@ import {
 import React, { createContext, useContext, useState } from 'react';
 
 const DataSourceContext = createContext(null);
+DataSourceContext.displayName = 'DataSourceContext';
 
 const useSelectedRowKeys = () => {
   const ctx = useContext(DataSourceContext);

packages/core/client/src/schema-component/antd/variable/Variable.tsx

@@ -7,6 +7,7 @@ import { RawTextArea } from './RawTextArea';
 import { TextArea } from './TextArea';
 
 const VariableScopeContext = createContext([]);
+VariableScopeContext.displayName = 'VariableScopeContext';
 
 export function VariableScopeProvider({ scope = [], children }) {
   return <VariableScopeContext.Provider value={scope}>{children}</VariableScopeContext.Provider>;

packages/core/client/src/schema-component/antd/variable/XButton.tsx

@@ -15,3 +15,4 @@ export const XButton = forwardRef((props: ButtonProps, ref: any) => {
     </Button>
   );
 });
+XButton.displayName = 'XButton';

packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx

@@ -2,11 +2,13 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { cx } from '@emotion/css';
 import { Schema, observer, useField, useFieldSchema } from '@formily/react';
-import React, { HTMLAttributes, createContext, useContext } from 'react';
+import React, { HTMLAttributes, createContext, useContext, useMemo } from 'react';
 import { useToken } from '../../antd/__builtins__';
 
 export const DraggableContext = createContext(null);
+DraggableContext.displayName = 'DraggableContext';
 export const SortableContext = createContext(null);
+SortableContext.displayName = 'SortableContext';
 
 export const SortableProvider = (props) => {
   const { id, data, children } = props;
@@ -74,15 +76,17 @@ interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
 export const SortableItem: React.FC<SortableItemProps> = observer(
   (props) => {
     const { schema, id, eid, removeParentsIfNoChildren, ...others } = useSortableItemProps(props);
-    return (
+
-      <SortableProvider
+    const data = useMemo(() => {
-        id={id}
+      return {
-        data={{
         insertAdjacent: 'afterEnd',
         schema: schema,
         removeParentsIfNoChildren: removeParentsIfNoChildren ?? true,
-        }}
+      };
-      >
+    }, [schema, removeParentsIfNoChildren]);
+
+    return (
+      <SortableProvider id={id} data={data}>
         <Sortable id={eid} {...others}>
           {props.children}
         </Sortable>

packages/core/client/src/schema-component/context.ts

@@ -2,3 +2,4 @@ import { createContext } from 'react';
 import { ISchemaComponentContext } from './types';
 
 export const SchemaComponentContext = createContext<ISchemaComponentContext>({});
+SchemaComponentContext.displayName = 'SchemaComponentContext.Provider';

packages/core/client/src/schema-component/core/SchemaComponentOptions.tsx

@@ -1,5 +1,5 @@
 import { ExpressionScope, SchemaComponentsContext, SchemaOptionsContext } from '@formily/react';
-import React, { useContext } from 'react';
+import React, { memo, useContext, useMemo } from 'react';
 import { ISchemaComponentOptionsProps } from '../types';
 
 export const useSchemaOptionsContext = () => {
@@ -7,16 +7,28 @@ export const useSchemaOptionsContext = () => {
   return options || {};
 };
 
-export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = (props) => {
+export const SchemaComponentOptions: React.FC<ISchemaComponentOptionsProps> = memo((props) => {
   const { children } = props;
   const options = useSchemaOptionsContext();
-  const components = { ...options.components, ...props.components };
+  const components = useMemo(() => {
-  const scope = { ...options.scope, ...props.scope };
+    return { ...options.components, ...props.components };
+  }, [options.components, props.components]);
+
+  const scope = useMemo(() => {
+    return { ...options.scope, ...props.scope };
+  }, [options.scope, props.scope]);
+
+  const schemaOptionsContextValue = useMemo(() => {
+    return { scope, components };
+  }, [scope, components]);
+
   return (
-    <SchemaOptionsContext.Provider value={{ scope, components }}>
+    <SchemaOptionsContext.Provider value={schemaOptionsContextValue}>
       <SchemaComponentsContext.Provider value={components}>
         <ExpressionScope value={scope}>{children}</ExpressionScope>
       </SchemaComponentsContext.Provider>
     </SchemaOptionsContext.Provider>
   );
-};
+});
+
+SchemaComponentOptions.displayName = 'SchemaComponentOptions';

packages/core/client/src/schema-component/core/SchemaComponentProvider.tsx

@@ -44,19 +44,23 @@ Schema.registerCompiler(Registry.compile);
 
 export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (props) => {
   const { designable, onDesignableChange, components, children } = props;
-  const [, setUid] = useState(uid());
+  const [uidValue, setUid] = useState(uid());
   const [formId, setFormId] = useState(uid());
   const form = useMemo(() => props.form || createForm(), [formId]);
   const { t } = useTranslation();
-  const scope = { ...props.scope, t, randomString };
+  const scope = useMemo(() => {
+    return { ...props.scope, t, randomString };
+  }, [props.scope, t]);
   const [active, setActive] = useState(designable);
-  return (
+
-    <SchemaComponentContext.Provider
+  const schemaComponentContextValue = useMemo(
-      value={{
+    () => ({
       scope,
       components,
       reset: () => setFormId(uid()),
-        refresh: () => setUid(uid()),
+      refresh: () => {
+        setUid(uid());
+      },
       designable: typeof designable === 'boolean' ? designable : active,
       setDesignable: (value) => {
         if (typeof designable !== 'boolean') {
@@ -64,8 +68,12 @@ export const SchemaComponentProvider: React.FC<ISchemaComponentProvider> = (prop
         }
         onDesignableChange?.(value);
       },
-      }}
+    }),
-    >
+    [uidValue, scope, components, designable, active],
+  );
+
+  return (
+    <SchemaComponentContext.Provider value={schemaComponentContextValue}>
       <FormProvider form={form}>
         <SchemaComponentOptions inherit scope={scope} components={components}>
           {children}

packages/core/client/src/schema-settings/DataTemplates/components/AsDefaultTemplate.tsx

@@ -36,3 +36,4 @@ export const AsDefaultTemplate = React.forwardRef((props: any, ref) => {
     />
   );
 });
+AsDefaultTemplate.displayName = 'AsDefaultTemplate';

packages/core/client/src/schema-settings/DataTemplates/components/DataTemplateTitle.tsx

@@ -276,3 +276,4 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
     />
   );
 });
+(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';

packages/core/client/src/schema-settings/LinkageRules/components/EnableLinkage.tsx

@@ -32,3 +32,4 @@ export const EnableLinkage = React.forwardRef((props: any, ref) => {
     />
   );
 });
+EnableLinkage.displayName = 'EnableLinkage';

packages/core/client/src/schema-settings/LinkageRules/components/LinkageHeader.tsx

@@ -266,3 +266,4 @@ ArrayCollapse.Copy = React.forwardRef((props: any, ref) => {
     />
   );
 });
+(ArrayCollapse as any).Copy.displayName = 'ArrayCollapse.Copy';

packages/core/client/src/schema-settings/LinkageRules/context.ts

@@ -11,5 +11,8 @@ export interface FilterContextProps {
 }
 
 export const RemoveActionContext = createContext(null);
+RemoveActionContext.displayName = 'RemoveActionContext';
 export const FilterContext = createContext<FilterContextProps>(null);
+FilterContext.displayName = 'FilterContext';
 export const LinkageLogicContext = createContext(null);
+LinkageLogicContext.displayName = 'LinkageLogicContext';

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -124,6 +124,7 @@ interface SchemaSettingsContextProps<T = any> {
 }
 
 const SchemaSettingsContext = createContext<SchemaSettingsContextProps>(null);
+SchemaSettingsContext.displayName = 'SchemaSettingsContext';
 
 export function useSchemaSettings<T = any>() {
   return useContext(SchemaSettingsContext) as SchemaSettingsContextProps<T>;

packages/core/client/src/schema-templates/BlockTemplate.tsx

@@ -5,6 +5,7 @@ import { useSchemaTemplateManager } from './SchemaTemplateManagerProvider';
 import { useTemplateBlockContext } from '../block-provider/TemplateBlockProvider';
 
 const BlockTemplateContext = createContext<any>({});
+BlockTemplateContext.displayName = 'BlockTemplateContext';
 
 export const useBlockTemplateContext = () => {
   return useContext(BlockTemplateContext);

packages/core/client/src/schema-templates/SchemaTemplateManagerProvider.tsx

@@ -11,6 +11,7 @@ import { BlockTemplate } from './BlockTemplate';
 import { DEFAULT_DATA_SOURCE_KEY } from '../data-source';
 
 export const SchemaTemplateManagerContext = createContext<any>({});
+SchemaTemplateManagerContext.displayName = 'SchemaTemplateManagerContext';
 
 export const SchemaTemplateManagerProvider: React.FC<any> = (props) => {
   const { templates, refresh } = props;

packages/core/client/src/system-settings/SystemSettingsProvider.tsx

@@ -4,6 +4,7 @@ import { useRequest } from '../api-client';
 import { useAppSpin } from '../application/hooks/useAppSpin';
 
 export const SystemSettingsContext = createContext<Result<any, any>>(null);
+SystemSettingsContext.displayName = 'SystemSettingsContext';
 
 export const useSystemSettings = () => {
   return useContext(SystemSettingsContext);

packages/core/client/src/user/CurrentUser.tsx

@@ -162,6 +162,8 @@ export const SettingsMenu: React.FC<{
 };
 
 export const DropdownVisibleContext = createContext(null);
+DropdownVisibleContext.displayName = 'DropdownVisibleContext';
+
 export const CurrentUser = () => {
   const [visible, setVisible] = useState(false);
   const { token } = useToken();

packages/core/client/src/user/CurrentUserProvider.tsx

@@ -6,6 +6,7 @@ import { useAppSpin } from '../application/hooks/useAppSpin';
 import { useCompile } from '../schema-component';
 
 export const CurrentUserContext = createContext<ReturnTypeOfUseRequest>(null);
+CurrentUserContext.displayName = 'CurrentUserContext';
 
 export const useCurrentUserContext = () => {
   return useContext(CurrentUserContext);

packages/core/client/src/user/CurrentUserSettingsMenuProvider.tsx

@@ -24,6 +24,7 @@ interface OptionsOfAddMenuItem {
 type Item = ItemType & { _options?: OptionsOfAddMenuItem };
 
 const CurrentUserSettingsMenuContext = createContext<{ menuItems: React.MutableRefObject<Item[]> }>(null);
+CurrentUserSettingsMenuContext.displayName = 'CurrentUserSettingsMenuContext';
 
 export const useCurrentUserSettingsMenu = () => {
   const { menuItems } = useContext(CurrentUserSettingsMenuContext) || {};

packages/core/client/src/variables/VariablesProvider.tsx

@@ -16,6 +16,7 @@ import { isVariable } from './utils/isVariable';
 import { uniq } from './utils/uniq';
 
 export const VariablesContext = createContext<VariablesContextType>(null);
+VariablesContext.displayName = 'VariablesContext';
 
 const variableToCollectionName = {};
 

packages/plugins/@nocobase/plugin-acl/src/client/RolesManagerProvider.tsx

@@ -6,3 +6,4 @@ export const RolesManagerContext = createContext<{
 }>({
   role: null,
 } as any);
+RolesManagerContext.displayName = 'RolesManagerContext';

packages/plugins/@nocobase/plugin-acl/src/client/permissions/AvailableActions.tsx

@@ -3,6 +3,7 @@ import { Spin } from 'antd';
 import React, { createContext, useContext } from 'react';
 
 const AvailableActionsContext = createContext([]);
+AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 export const AvailableActionsProvider: React.FC = (props) => {
   const { data, loading } = useRequest<{

packages/plugins/@nocobase/plugin-acl/src/client/permissions/MenuItemsProvider.tsx

@@ -3,6 +3,7 @@ import { Spin } from 'antd';
 import React, { createContext, useContext } from 'react';
 
 const MenuItemsContext = createContext(null);
+MenuItemsContext.displayName = 'MenuItemsContext';
 
 export const toItems = (properties = {}) => {
   const items = [];

packages/plugins/@nocobase/plugin-acl/src/client/permissions/RolesResourcesActions.tsx

@@ -28,6 +28,7 @@ const toActionMap = (arr: any[]) => {
 };
 
 export const RoleResourceCollectionContext = createContext<any>({});
+RoleResourceCollectionContext.displayName = 'RoleResourceCollectionContext';
 
 export const RolesResourcesActions = connect((props) => {
   const { styles } = useStyles();

packages/plugins/@nocobase/plugin-acl/src/client/permissions/ScopeSelect.tsx

@@ -4,6 +4,7 @@ import { FormProvider, SchemaComponent } from '@nocobase/client';
 import { scopesSchema } from '../schemas/scopes';
 
 const RolesResourcesScopesSelectedRowKeysContext = createContext(null);
+RolesResourcesScopesSelectedRowKeysContext.displayName = 'RolesResourcesScopesSelectedRowKeysContext';
 
 const RolesResourcesScopesSelectedRowKeysProvider: React.FC = (props) => {
   const [keys, setKeys] = useState([]);

packages/plugins/@nocobase/plugin-audit-logs/src/client/deplicated/AuditLogs.tsx

@@ -103,6 +103,7 @@ const Value = observer(
 );
 
 const IsAssociationBlock = createContext(null);
+IsAssociationBlock.displayName = 'IsAssociationBlock';
 
 export const AuditLogs: any = () => {
   const isAssoc = useContext(IsAssociationBlock);

packages/plugins/@nocobase/plugin-auth/src/client/authenticator.ts

@@ -12,6 +12,7 @@ export type Authenticator = {
 };
 
 export const AuthenticatorsContext = createContext<Authenticator[]>([]);
+AuthenticatorsContext.displayName = 'AuthenticatorsContext';
 
 export const useAuthenticator = (name: string) => {
   const authenticators = useContext(AuthenticatorsContext);

packages/plugins/@nocobase/plugin-auth/src/client/pages/SignUpPage.tsx

@@ -11,6 +11,7 @@ export const SignupPageContext = createContext<{
     }>;
   };
 }>({});
+SignupPageContext.displayName = 'SignupPageContext';
 
 export const SignupPageProvider: React.FC<{
   authType: string;

packages/plugins/@nocobase/plugin-auth/src/client/settings/Options.tsx

@@ -34,9 +34,12 @@ export const useAdminSettingsForm = (authType: string) => {
   return auth?.components?.AdminSettingsForm;
 };
 
-export const Options = observer(() => {
+export const Options = observer(
+  () => {
     const form = useForm();
     const record = useRecord();
     const Component = useAdminSettingsForm(form.values.authType || record.authType);
     return Component ? <Component /> : null;
-});
+  },
+  { displayName: 'Options' },
+);

packages/plugins/@nocobase/plugin-auth/src/client/settings/authType.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 export const AuthTypeContext = createContext<{
   type: string;
 }>({ type: '' });
+AuthTypeContext.displayName = 'AuthTypeContext';
 
 export const AuthTypesContext = createContext<{
   types: {
@@ -11,6 +12,7 @@ export const AuthTypesContext = createContext<{
     value: string;
   }[];
 }>({ types: [] });
+AuthTypesContext.displayName = 'AuthTypesContext';
 
 export const useAuthTypes = () => {
   const { types } = useContext(AuthTypesContext);

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/context.ts

@@ -2,8 +2,11 @@ import { createContext, useContext } from 'react';
 import type { ToolbarProps } from './types';
 
 export const CalendarToolbarContext = createContext<ToolbarProps>(null);
+CalendarToolbarContext.displayName = 'CalendarToolbarContext';
 export const CalendarContext = createContext(null);
+CalendarContext.displayName = 'CalendarContext';
 export const DeleteEventContext = createContext(null);
+DeleteEventContext.displayName = 'DeleteEventContext';
 
 export const useDeleteEvent = () => {
   return useContext(DeleteEventContext);

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 
 export const CalendarBlockContext = createContext<any>({});
+CalendarBlockContext.displayName = 'CalendarBlockContext';
 
 const InternalCalendarBlockProvider = (props) => {
   const { fieldNames, showLunar } = props;

packages/plugins/@nocobase/plugin-charts/src/client/ChartQueryMetadataProvider.tsx

@@ -7,6 +7,7 @@ export const ChartQueryMetadataContext = createContext({
   refresh: () => {},
   data: [] as any[],
 });
+ChartQueryMetadataContext.displayName = 'ChartQueryMetadataContext';
 
 export const ChartQueryMetadataProvider: React.FC = (props) => {
   const api = useAPIClient();

packages/plugins/@nocobase/plugin-data-source-manager/src/client/DatabaseConnectionProvider.tsx

@@ -3,6 +3,7 @@ import React, { FC, useState, createContext } from 'react';
 import * as hooks from './hooks';
 
 export const DataSourceContext = createContext(null);
+DataSourceContext.displayName = 'DataSourceContext';
 
 export const DatabaseConnectionProvider: FC = (props) => {
   const [dataSource, setDataSource] = useState(null);

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/CollectionFields.tsx

@@ -33,6 +33,7 @@ const RemoteCollectionContext = createContext<{
   refreshRM: Function;
   titleField: string;
 }>({ refreshRM: () => {}, titleField: null, targetCollection: null });
+RemoteCollectionContext.displayName = 'RemoteCollectionContext';
 export const useRemoteCollectionContext = () => {
   return useContext(RemoteCollectionContext);
 };

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx

@@ -4,7 +4,8 @@ import { debounce } from 'lodash';
 import React, { useState, useMemo, useEffect } from 'react';
 import { useRecord } from '@nocobase/client';
 
-export const FieldTitleInput = observer((props: any) => {
+export const FieldTitleInput = observer(
+  (props: any) => {
     const { value, handleFieldChange } = props;
     const record = useRecord();
     const [titleValue, setTitleValue] = useState(value);
@@ -38,4 +39,6 @@ export const FieldTitleInput = observer((props: any) => {
       setTitleValue(value);
     }, [value]);
     return <Input value={titleValue} onChange={handleChange} />;
-});
+  },
+  { displayName: 'FieldTitleInput' },
+);

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/PermissionManager/DataSourceTable.tsx

@@ -11,6 +11,7 @@ import { dataSourceSchema } from './schemas/dataSourceTable';
 import { PermissionProvider } from './PermisionProvider';
 
 const AvailableActionsContext = createContext([]);
+AvailableActionsContext.displayName = 'AvailableActionsContext';
 
 const AvailableActionsProver: React.FC = (props) => {
   const { data, loading } = useRequest<{