From 5fb348af523fb91f52f325e72f849413cff461c1 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Wed, 13 Sep 2023 12:07:46 +0200 Subject: [PATCH] frontend-plugin-api: refactor coreExtensionData.reactComponent -> .reactElement Signed-off-by: Patrik Oldsberg --- packages/app-next-example-plugin/src/plugin.tsx | 2 +- packages/app-next/src/examples/pagesPlugin.tsx | 4 ++-- packages/frontend-app-api/api-report.md | 5 ++--- packages/frontend-app-api/package.json | 4 ++-- .../src/extensions/CoreLayout.tsx | 15 ++++++--------- .../frontend-app-api/src/extensions/CoreNav.tsx | 4 ++-- .../src/extensions/CoreRoutes.tsx | 8 ++++---- .../frontend-app-api/src/wiring/createApp.tsx | 14 +++++--------- packages/frontend-plugin-api/api-report.md | 6 +++--- .../src/extensions/createPageExtension.test.tsx | 16 ++++++++-------- .../src/extensions/createPageExtension.tsx | 8 ++++---- .../src/wiring/coreExtensionData.ts | 4 ++-- .../src/wiring/createPlugin.test.ts | 9 ++++----- plugins/graphiql/src/alpha.tsx | 2 +- 14 files changed, 46 insertions(+), 55 deletions(-) diff --git a/packages/app-next-example-plugin/src/plugin.tsx b/packages/app-next-example-plugin/src/plugin.tsx index 5b5adeab2f..a3c95e900c 100644 --- a/packages/app-next-example-plugin/src/plugin.tsx +++ b/packages/app-next-example-plugin/src/plugin.tsx @@ -23,7 +23,7 @@ import { export const ExamplePage = createPageExtension({ id: 'example.page', defaultPath: '/example', - component: () => import('./Component').then(m => ), + loader: () => import('./Component').then(m => ), }); /** @public */ diff --git a/packages/app-next/src/examples/pagesPlugin.tsx b/packages/app-next/src/examples/pagesPlugin.tsx index 6616c88c4b..c805442305 100644 --- a/packages/app-next/src/examples/pagesPlugin.tsx +++ b/packages/app-next/src/examples/pagesPlugin.tsx @@ -36,7 +36,7 @@ const IndexPage = createPageExtension({ id: 'index', defaultPath: '/', routeRef: indexRouteRef, - component: async () => { + loader: async () => { const Component = () => { const page1Link = useRouteRef(page1RouteRef); return ( @@ -59,7 +59,7 @@ const Page1 = createPageExtension({ id: 'page1', defaultPath: '/page1', routeRef: page1RouteRef, - component: async () => { + loader: async () => { const Component = () => { const indexLink = useRouteRef(indexRouteRef); // const page2Link = useRouteRef(page2RouteRef); diff --git a/packages/frontend-app-api/api-report.md b/packages/frontend-app-api/api-report.md index e16e4d4d97..5c003e8129 100644 --- a/packages/frontend-app-api/api-report.md +++ b/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 -/// - 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; }; ``` diff --git a/packages/frontend-app-api/package.json b/packages/frontend-app-api/package.json index 9e33a0a34a..9a4c8a44da 100644 --- a/packages/frontend-app-api/package.json +++ b/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": { diff --git a/packages/frontend-app-api/src/extensions/CoreLayout.tsx b/packages/frontend-app-api/src/extensions/CoreLayout.tsx index 845bc8cf5b..29680bf23c 100644 --- a/packages/frontend-app-api/src/extensions/CoreLayout.tsx +++ b/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: ( -