diff --git a/packages/core-plugin-api/src/extensions/extensions.tsx b/packages/core-plugin-api/src/extensions/extensions.tsx index 73b927afc8..db39d2088c 100644 --- a/packages/core-plugin-api/src/extensions/extensions.tsx +++ b/packages/core-plugin-api/src/extensions/extensions.tsx @@ -37,6 +37,7 @@ export function createRoutableExtension< >(options: { component: () => Promise; mountPoint: RouteRef; + name?: string; }): Extension { const { component, mountPoint } = options; return createReactExtension({ @@ -62,6 +63,7 @@ export function createRoutableExtension< }; const componentName = + options.name || (InnerComponent as { displayName?: string }).displayName || InnerComponent.name || 'LazyComponent'; @@ -84,6 +86,7 @@ export function createRoutableExtension< data: { 'core.mountPoint': mountPoint, }, + name: options.name, }); } @@ -91,10 +94,10 @@ export function createRoutableExtension< // ComponentType inserts children as an optional prop whether the inner component accepts it or not, // making it impossible to make the usage of children type safe. export function createComponentExtension< - T extends (props: any) => JSX.Element | null, ->(options: { component: ComponentLoader }): Extension { - const { component } = options; - return createReactExtension({ component }); + T extends (props: any) => JSX.Element | null +>(options: { component: ComponentLoader; name?: string }): Extension { + const { component, name } = options; + return createReactExtension({ component, name }); } // We do not use ComponentType as the return type, since it doesn't let us convey the children prop. @@ -105,6 +108,7 @@ export function createReactExtension< >(options: { component: ComponentLoader; data?: Record; + name?: string; }): Extension { const { data = {} } = options; @@ -118,6 +122,7 @@ export function createReactExtension< Component = options.component.sync; } const componentName = + options.name || (Component as { displayName?: string }).displayName || Component.name || 'Component';