frontend-plugin-api: add ExtensionBoundary.lazyComponent

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/tall-falcons-juggle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-plugin-api': patch
+---
+
+Added a new `ExtensionBoundary.lazyComponent` helper in addition to the existing `ExtensionBoundary.lazy` helper.

packages/frontend-plugin-api/report.api.md

@@ -964,8 +964,13 @@ export namespace ExtensionBoundary {
   // (undocumented)
   export function lazy(
     appNode: AppNode,
-    lazyElement: () => Promise<JSX.Element>,
+    loader: () => Promise<JSX.Element>,
   ): JSX.Element;
+  // (undocumented)
+  export function lazyComponent<TProps extends {}>(
+    appNode: AppNode,
+    loader: () => Promise<(props: TProps) => JSX.Element>,
+  ): (props: TProps) => JSX.Element;
 }
 
 // @public (undocumented)

packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx

@@ -96,10 +96,10 @@ export function ExtensionBoundary(props: ExtensionBoundaryProps) {
 export namespace ExtensionBoundary {
   export function lazy(
     appNode: AppNode,
-    lazyElement: () => Promise<JSX.Element>,
+    loader: () => Promise<JSX.Element>,
   ): JSX.Element {
     const ExtensionComponent = reactLazy(() =>
-      lazyElement().then(element => ({ default: () => element })),
+      loader().then(element => ({ default: () => element })),
     );
     return (
       <ExtensionBoundary node={appNode}>
@@ -107,4 +107,19 @@ export namespace ExtensionBoundary {
       </ExtensionBoundary>
     );
   }
+
+  export function lazyComponent<TProps extends {}>(
+    appNode: AppNode,
+    loader: () => Promise<(props: TProps) => JSX.Element>,
+  ): (props: TProps) => JSX.Element {
+    const ExtensionComponent = reactLazy(() =>
+      loader().then(Component => ({ default: Component })),
+    ) as unknown as React.ComponentType<TProps>;
+
+    return (props: TProps) => (
+      <ExtensionBoundary node={appNode}>
+        <ExtensionComponent {...props} />
+      </ExtensionBoundary>
+    );
+  }
 }

plugins/catalog-react/src/alpha/blueprints/EntityCardLauyoutBlueprint.tsx

@@ -24,7 +24,7 @@ import {
   entityFilterFunctionDataRef,
   defaultEntityCardAreas,
 } from './extensionData';
-import React, { lazy as reactLazy, ComponentProps } from 'react';
+import React from 'react';
 
 /** @alpha */
 export interface EntityCardLayoutProps {
@@ -82,18 +82,8 @@ export const EntityCardLayoutBlueprint = createExtensionBlueprint({
       yield entityFilterFunctionDataRef(defaultFilter);
     }
 
-    const ExtensionComponent = reactLazy(() =>
-      loader().then(component => ({ default: component })),
-    );
-
     yield entityCardLayoutComponentDataRef(
-      (props: ComponentProps<typeof ExtensionComponent>) => {
-        return (
-          <ExtensionBoundary node={node}>
-            <ExtensionComponent {...props} />
-          </ExtensionBoundary>
-        );
-      },
+      ExtensionBoundary.lazyComponent(node, loader),
     );
   },
 });