introduce ExtensionBoundary.lazy

Signed-off-by: blam <ben@blam.sh>
Co-authored-by: Fredrik Adelöw <freben@gmail.com>

.changeset/good-balloons-fix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-plugin-api': patch
+---
+
+Add an `ExtensionBoundary.lazy` function to create properly wrapped lazy-loading enabled elements, suitable for use with `coreExtensionData.reactElement`. The page blueprint now automatically leverages this.

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

@@ -1362,6 +1362,15 @@ export function ExtensionBoundary(
   props: ExtensionBoundaryProps,
 ): React_2.JSX.Element;
 
+// @public (undocumented)
+export namespace ExtensionBoundary {
+  // (undocumented)
+  export function lazy(
+    appNode: AppNode,
+    lazyElement: () => Promise<JSX.Element>,
+  ): JSX.Element;
+}
+
 // @public (undocumented)
 export interface ExtensionBoundaryProps {
   // (undocumented)
@@ -1840,7 +1849,7 @@ export const PageBlueprint: ExtensionBlueprint<
     loader: () => Promise<JSX.Element>;
     routeRef?: RouteRef<AnyRouteRefParams> | undefined;
   },
-  | ConfigurableExtensionDataRef<React_2.JSX.Element, 'core.reactElement', {}>
+  | ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
   | ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
   | ConfigurableExtensionDataRef<
       RouteRef<AnyRouteRefParams>,

packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { lazy } from 'react';
+
 import { RouteRef } from '../routing';
 import { coreExtensionData, createExtensionBlueprint } from '../wiring';
 import { ExtensionBoundary } from '../components';
@@ -48,16 +48,8 @@ export const PageBlueprint = createExtensionBlueprint({
     },
     { config, node },
   ) {
-    const ExtensionComponent = lazy(() =>
-      loader().then(element => ({ default: () => element })),
-    );
-
     yield coreExtensionData.routePath(config.path ?? defaultPath);
-    yield coreExtensionData.reactElement(
-      <ExtensionBoundary node={node}>
-        <ExtensionComponent />
-      </ExtensionBoundary>,
-    );
+    yield coreExtensionData.reactElement(ExtensionBoundary.lazy(node, loader));
 
     if (routeRef) {
       yield coreExtensionData.routeRef(routeRef);

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

@@ -19,6 +19,7 @@ import React, {
   ReactNode,
   Suspense,
   useEffect,
+  lazy as reactLazy,
 } from 'react';
 import { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -90,3 +91,20 @@ export function ExtensionBoundary(props: ExtensionBoundaryProps) {
     </Suspense>
   );
 }
+
+/** @public */
+export namespace ExtensionBoundary {
+  export function lazy(
+    appNode: AppNode,
+    lazyElement: () => Promise<JSX.Element>,
+  ): JSX.Element {
+    const ExtensionComponent = reactLazy(() =>
+      lazyElement().then(element => ({ default: () => element })),
+    );
+    return (
+      <ExtensionBoundary node={appNode}>
+        <ExtensionComponent />
+      </ExtensionBoundary>
+    );
+  }
+}