frontend-plugin-api: renamed createComponentExtension component -> loader

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

.changeset/wet-fans-care.md

@@ -0,0 +1,6 @@
+---
+'@backstage/frontend-plugin-api': patch
+'@backstage/frontend-app-api': patch
+---
+
+Renamed the `component` option of `createComponentExtension` to `loader`.

packages/app-next/src/examples/notFoundErrorPageExtension.tsx

@@ -52,5 +52,5 @@ export function CustomNotFoundErrorPage() {
 
 export default createComponentExtension({
   ref: coreComponentRefs.notFoundErrorPage,
-  component: { sync: () => CustomNotFoundErrorPage },
+  loader: { sync: () => CustomNotFoundErrorPage },
 });

packages/frontend-app-api/src/extensions/components.tsx

@@ -29,17 +29,17 @@ import { components as defaultComponents } from '../../../app-defaults/src/defau
 
 export const DefaultProgressComponent = createComponentExtension({
   ref: coreComponentRefs.progress,
-  component: { sync: () => defaultComponents.Progress },
+  loader: { sync: () => defaultComponents.Progress },
 });
 
 export const DefaultNotFoundErrorPageComponent = createComponentExtension({
   ref: coreComponentRefs.notFoundErrorPage,
-  component: { sync: () => defaultComponents.NotFoundErrorPage },
+  loader: { sync: () => defaultComponents.NotFoundErrorPage },
 });
 
 export const DefaultErrorBoundaryComponent = createComponentExtension({
   ref: coreComponentRefs.errorBoundaryFallback,
-  component: {
+  loader: {
     sync: () => props => {
       const { plugin, error, resetError } = props;
       const title = `Error in ${plugin?.id}`;

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

@@ -401,7 +401,7 @@ export function createComponentExtension<
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
-  component:
+  loader:
     | {
         lazy: (values: {
           config: TConfig;

packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx

@@ -36,7 +36,7 @@ export function createComponentExtension<
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
-  component:
+  loader:
     | {
         lazy: (values: {
           config: TConfig;
@@ -64,13 +64,13 @@ export function createComponentExtension<
     factory({ config, inputs, node }) {
       let ExtensionComponent: ComponentType<TProps>;
 
-      if ('sync' in options.component) {
-        ExtensionComponent = options.component.sync({ config, inputs });
+      if ('sync' in options.loader) {
+        ExtensionComponent = options.loader.sync({ config, inputs });
       } else {
-        const lazyLoader = options.component.lazy;
+        const lazyLoader = options.loader.lazy;
         ExtensionComponent = lazy(() =>
-          lazyLoader({ config, inputs }).then(component => ({
-            default: component,
+          lazyLoader({ config, inputs }).then(Component => ({
+            default: Component,
           })),
         ) as unknown as ComponentType<TProps>;
       }