diff --git a/.changeset/good-balloons-fix.md b/.changeset/good-balloons-fix.md new file mode 100644 index 0000000000..be3d8e5785 --- /dev/null +++ b/.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. diff --git a/packages/frontend-plugin-api/api-report.md b/packages/frontend-plugin-api/api-report.md index a36c5e1046..a6ca3f3aff 100644 --- a/packages/frontend-plugin-api/api-report.md +++ b/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; +} + // @public (undocumented) export interface ExtensionBoundaryProps { // (undocumented) @@ -1840,7 +1849,7 @@ export const PageBlueprint: ExtensionBlueprint< loader: () => Promise; routeRef?: RouteRef | undefined; }, - | ConfigurableExtensionDataRef + | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef | ConfigurableExtensionDataRef< RouteRef, diff --git a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx index b224ea491e..bdfb0141c8 100644 --- a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx +++ b/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( - - - , - ); + yield coreExtensionData.reactElement(ExtensionBoundary.lazy(node, loader)); if (routeRef) { yield coreExtensionData.routeRef(routeRef); diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx index b6269484b0..176dfd4c3c 100644 --- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx +++ b/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) { ); } + +/** @public */ +export namespace ExtensionBoundary { + export function lazy( + appNode: AppNode, + lazyElement: () => Promise, + ): JSX.Element { + const ExtensionComponent = reactLazy(() => + lazyElement().then(element => ({ default: () => element })), + ); + return ( + + + + ); + } +}