frontend-plugin-api: refactor coreExtensionData.reactComponent -> .reactElement

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

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

@@ -7,8 +7,8 @@
 
 import { AnyApiFactory } from '@backstage/core-plugin-api';
 import { AnyApiRef } from '@backstage/core-plugin-api';
-import { ComponentType } from 'react';
 import { JsonObject } from '@backstage/types';
+import { JSX as JSX_2 } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
@@ -49,7 +49,7 @@ export interface ConfigurableExtensionDataRef<
 
 // @public (undocumented)
 export const coreExtensionData: {
-  reactComponent: ConfigurableExtensionDataRef<ComponentType<{}>, {}>;
+  reactElement: ConfigurableExtensionDataRef<JSX_2.Element, {}>;
   routePath: ConfigurableExtensionDataRef<string, {}>;
   apiFactory: ConfigurableExtensionDataRef<AnyApiFactory, {}>;
   routeRef: ConfigurableExtensionDataRef<RouteRef<any>, {}>;
@@ -158,7 +158,7 @@ export function createPageExtension<
     disabled?: boolean;
     inputs?: TInputs;
     routeRef?: RouteRef;
-    component: (props: {
+    loader: (options: {
       config: TConfig;
       inputs: ExtensionDataInputValues<TInputs>;
     }) => Promise<JSX.Element>;

packages/frontend-plugin-api/src/extensions/createPageExtension.test.tsx

@@ -30,7 +30,7 @@ describe('createPageExtension', () => {
       createPageExtension({
         id: 'test',
         configSchema,
-        component: async () => <div />,
+        loader: async () => <div />,
       }),
     ).toEqual({
       $$type: '@backstage/Extension',
@@ -40,7 +40,7 @@ describe('createPageExtension', () => {
       disabled: false,
       inputs: {},
       output: {
-        component: expect.anything(),
+        element: expect.anything(),
         path: expect.anything(),
         routeRef: expect.anything(),
       },
@@ -55,10 +55,10 @@ describe('createPageExtension', () => {
         configSchema,
         inputs: {
           first: {
-            extensionData: { component: coreExtensionData.reactComponent },
+            extensionData: { element: coreExtensionData.reactElement },
           },
         },
-        component: async () => <div />,
+        loader: async () => <div />,
       }),
     ).toEqual({
       $$type: '@backstage/Extension',
@@ -68,11 +68,11 @@ describe('createPageExtension', () => {
       disabled: true,
       inputs: {
         first: {
-          extensionData: { component: coreExtensionData.reactComponent },
+          extensionData: { element: coreExtensionData.reactElement },
         },
       },
       output: {
-        component: expect.anything(),
+        element: expect.anything(),
         path: expect.anything(),
         routeRef: expect.anything(),
       },
@@ -83,7 +83,7 @@ describe('createPageExtension', () => {
       createPageExtension({
         id: 'test',
         defaultPath: '/here',
-        component: async () => <div />,
+        loader: async () => <div />,
       }),
     ).toEqual({
       $$type: '@backstage/Extension',
@@ -93,7 +93,7 @@ describe('createPageExtension', () => {
       disabled: false,
       inputs: {},
       output: {
-        component: expect.anything(),
+        element: expect.anything(),
         path: expect.anything(),
         routeRef: expect.anything(),
       },

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

@@ -48,7 +48,7 @@ export function createPageExtension<
     disabled?: boolean;
     inputs?: TInputs;
     routeRef?: RouteRef;
-    component: (props: {
+    loader: (options: {
       config: TConfig;
       inputs: ExtensionDataInputValues<TInputs>;
     }) => Promise<JSX.Element>;
@@ -66,7 +66,7 @@ export function createPageExtension<
     at: options.at ?? 'core.routes/routes',
     disabled: options.disabled,
     output: {
-      component: coreExtensionData.reactComponent,
+      element: coreExtensionData.reactElement,
       path: coreExtensionData.routePath,
       routeRef: coreExtensionData.routeRef.optional(),
     },
@@ -75,13 +75,13 @@ export function createPageExtension<
     factory({ bind, config, inputs, source }) {
       const LazyComponent = React.lazy(() =>
         options
-          .component({ config, inputs })
+          .loader({ config, inputs })
           .then(element => ({ default: () => element })),
       );
 
       bind({
         path: config.path,
-        component: () => (
+        element: (
           <ExtensionBoundary source={source}>
             <React.Suspense fallback="...">
               <LazyComponent />

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -15,12 +15,12 @@
  */
 
 import { AnyApiFactory, RouteRef } from '@backstage/core-plugin-api';
-import { ComponentType } from 'react';
+import { JSX } from 'react';
 import { createExtensionDataRef } from './createExtensionDataRef';
 
 /** @public */
 export const coreExtensionData = {
-  reactComponent: createExtensionDataRef<ComponentType>('core.reactComponent'),
+  reactElement: createExtensionDataRef<JSX.Element>('core.reactElement'),
   routePath: createExtensionDataRef<string>('core.routing.path'),
   apiFactory: createExtensionDataRef<AnyApiFactory>('core.api.factory'),
   routeRef: createExtensionDataRef<RouteRef>('core.routing.ref'),

packages/frontend-plugin-api/src/wiring/createPlugin.test.ts

@@ -95,14 +95,13 @@ const outputExtension = createExtension({
     },
   },
   output: {
-    component: coreExtensionData.reactComponent,
+    element: coreExtensionData.reactElement,
   },
   factory({ bind, inputs }) {
     bind({
-      component: () =>
-        React.createElement('span', {}, [
-          `Names: ${inputs.names.map(n => n.name).join(', ')}`,
-        ]),
+      element: React.createElement('span', {}, [
+        `Names: ${inputs.names.map(n => n.name).join(', ')}`,
+      ]),
     });
   },
 });