Allow extensions to explicitly specify a component name.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

packages/core-plugin-api/src/extensions/extensions.tsx

@@ -37,6 +37,7 @@ export function createRoutableExtension<
 >(options: {
   component: () => Promise<T>;
   mountPoint: RouteRef;
+  name?: string;
 }): Extension<T> {
   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<T> }): Extension<T> {
-  const { component } = options;
-  return createReactExtension({ component });
+  T extends (props: any) => JSX.Element | null
+>(options: { component: ComponentLoader<T>; name?: string }): Extension<T> {
+  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<T>;
   data?: Record<string, unknown>;
+  name?: string;
 }): Extension<T> {
   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';