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

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

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

@@ -3,16 +3,15 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-/// <reference types="react" />
-
 import { BackstagePlugin } from '@backstage/frontend-plugin-api';
 import { ConfigApi } from '@backstage/core-plugin-api';
+import { JSX as JSX_2 } from 'react';
 
 // @public (undocumented)
 export function createApp(options: {
   plugins: BackstagePlugin[];
   config?: ConfigApi;
 }): {
-  createRoot(): JSX.Element;
+  createRoot(): JSX_2.Element;
 };
 ```

packages/frontend-app-api/package.json

@@ -24,8 +24,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@types/react": "^16.13.1 || ^17.0.0"
+    "@testing-library/jest-dom": "^5.10.1"
   },
   "configSchema": "config.d.ts",
   "files": [
@@ -41,6 +40,7 @@
     "@backstage/plugin-graphiql": "workspace:^",
     "@backstage/types": "workspace:^",
     "@material-ui/core": "^4.12.4",
+    "@types/react": "^16.13.1 || ^17.0.0",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {

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

@@ -27,17 +27,17 @@ export const CoreLayout = createExtension({
   inputs: {
     nav: {
       extensionData: {
-        component: coreExtensionData.reactComponent,
+        element: coreExtensionData.reactElement,
       },
     },
     content: {
       extensionData: {
-        component: coreExtensionData.reactComponent,
+        element: coreExtensionData.reactElement,
       },
     },
   },
   output: {
-    component: coreExtensionData.reactComponent,
+    element: coreExtensionData.reactElement,
   },
   factory({ bind, inputs }) {
     // TODO: Support this as part of the core system
@@ -46,21 +46,18 @@ export const CoreLayout = createExtension({
         `Extension 'core.layout' did not receive exactly one 'nav' input, got ${inputs.nav.length}`,
       );
     }
-    const Nav = inputs.nav[0].component;
-
     if (inputs.content.length !== 1) {
       throw Error(
         `Extension 'core.layout' did not receive exactly one 'content' input, got ${inputs.content.length}`,
       );
     }
-    const Content = inputs.content[0].component;
 
     bind({
       // TODO: set base path using the logic from AppRouter
-      component: () => (
+      element: (
         <SidebarPage>
-          <Nav />
-          <Content />
+          {inputs.nav[0].element}
+          {inputs.content[0].element}
         </SidebarPage>
       ),
     });

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

@@ -67,12 +67,12 @@ export const CoreNav = createExtension({
   at: 'core.layout/nav',
   inputs: {},
   output: {
-    component: coreExtensionData.reactComponent,
+    element: coreExtensionData.reactElement,
   },
   factory({ bind }) {
     bind({
       // TODO: set base path using the logic from AppRouter
-      component: () => (
+      element: (
         <Sidebar>
           <SidebarLogo />
           <SidebarDivider />

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

@@ -29,26 +29,26 @@ export const CoreRoutes = createExtension({
       extensionData: {
         path: coreExtensionData.routePath,
         ref: coreExtensionData.routeRef,
-        component: coreExtensionData.reactComponent,
+        element: coreExtensionData.reactElement,
       },
     },
   },
   output: {
-    component: coreExtensionData.reactComponent,
+    element: coreExtensionData.reactElement,
   },
   factory({ bind, inputs }) {
     const Routes = () => {
       const element = useRoutes(
         inputs.routes.map(route => ({
           path: route.path,
-          element: <route.component />,
+          element: route.element,
         })),
       );
 
       return element;
     };
     bind({
-      component: () => <Routes />,
+      element: <Routes />,
     });
   },
 });

packages/frontend-app-api/src/wiring/createApp.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { JSX } from 'react';
 import { ConfigReader } from '@backstage/config';
 import {
   BackstagePlugin,
@@ -173,20 +173,16 @@ export function createApp(options: {
 
   return {
     createRoot() {
-      const rootComponents = rootInstances
-        .map(e => e.getData(coreExtensionData.reactComponent))
-        .filter((x): x is React.ComponentType => !!x);
+      const rootElements = rootInstances
+        .map(e => e.getData(coreExtensionData.reactElement))
+        .filter((x): x is JSX.Element => !!x);
       return (
         <ApiProvider apis={apiHolder}>
           <AppContextProvider appContext={appContext}>
             <AppThemeProvider>
               <RoutingProvider routePaths={routePaths}>
                 {/* TODO: set base path using the logic from AppRouter */}
-                <BrowserRouter>
-                  {rootComponents.map((Component, i) => (
-                    <Component key={i} />
-                  ))}
-                </BrowserRouter>
+                <BrowserRouter>{rootElements}</BrowserRouter>
               </RoutingProvider>
             </AppThemeProvider>
           </AppContextProvider>