diff --git a/docs/frontend-system/building-plugins/05-migrating.md b/docs/frontend-system/building-plugins/05-migrating.md index 79b259a2e5..9d978869e5 100644 --- a/docs/frontend-system/building-plugins/05-migrating.md +++ b/docs/frontend-system/building-plugins/05-migrating.md @@ -8,7 +8,7 @@ description: How to migrate an existing frontend plugin to the new frontend syst This guide allows you to migrate a frontend plugin and its own components, routes, apis to the new frontend system. -The main concept is that routes, components, apis are now extensions. You can use the appropriate extension creators to migrate all of them to extensions. +The main concept is that routes, components, apis are now extensions. You can use the appropriate [extension blueprints](../architecture/23-extension-blueprints.md) to migrate all of them to extensions. ## Migrating the plugin @@ -77,7 +77,7 @@ The code above binds all the extensions to the plugin. _Important_: Make sure to ## Migrating Pages -Pages that were previously created using the `createRoutableExtension` extension function can be migrated to the new Frontend System using the `createPageExtension` extension creator, exported by `@backstage/frontend-plugin-api`. +Pages that were previously created using the `createRoutableExtension` extension function can be migrated to the new Frontend System using the `PageBlueprint` [extension blueprint](../architecture/23-extension-blueprints.md), exported by `@backstage/frontend-plugin-api`. For example, given the following page: @@ -94,28 +94,30 @@ export const FooPage = fooPlugin.provide( it can be migrated as the following: ```tsx -import { createPageExtension } from '@backstage/frontend-plugin-api'; +import { PageBlueprint } from '@backstage/frontend-plugin-api'; import { compatWrapper, convertLegacyRouteRef, } from '@backstage/core-compat-api'; -const fooPage = createPageExtension({ - defaultPath: '/foo', - // you can reuse the existing routeRef - // by wrapping into the convertLegacyRouteRef. - routeRef: convertLegacyRouteRef(rootRouteRef), - // these inputs usually match the props required by the component. - loader: ({ inputs }) => - import('./components/').then(m => - // The compatWrapper utility allows you to use the existing - // legacy frontend utilities used internally by the components. - compatWrapper(), - ), +const fooPage = PageBlueprint.make({ + params: { + defaultPath: '/foo', + // you can reuse the existing routeRef + // by wrapping into the convertLegacyRouteRef. + routeRef: convertLegacyRouteRef(rootRouteRef), + // these inputs usually match the props required by the component. + loader: ({ inputs }) => + import('./components/').then(m => + // The compatWrapper utility allows you to use the existing + // legacy frontend utilities used internally by the components. + compatWrapper(), + ), + }, }); ``` -then add the `fooPage` extension to the plugin: +Then add the `fooPage` extension to the plugin: ```ts title="my-plugin/src/alpha.ts" import { createFrontendPlugin } from '@backstage/frontend-plugin-api'; @@ -133,7 +135,7 @@ then add the `fooPage` extension to the plugin: ## Migrating Components -The equivalent utility to replace components created with `createComponentExtension` is `createExtension` from `@backstage/frontend-plugin-api`. However, we recommend searching for a more appropriate extension creator first. +The equivalent utility to replace components created with `createComponentExtension` depends on the context within which the component is used, typically indicated by the naming pattern of the export. Many of these can be migrated to one of the [existing blueprints](03-extension-blueprints.md), but in rare cases it may be necessary to use [`createExtension`](../architecture/20-extensions.md#creating-an-extension) directly. ## Migrating APIs @@ -182,7 +184,7 @@ const exampleWorkApi = createApiFactory({ The major changes we'll make are - Change the old `@backstage/core-plugin-api` imports to the new `@backstage/frontend-plugin-api` package as per the top section of this guide -- Wrap the existing API factory in a `createApiExtension` +- Wrap the existing API factory in a `ApiBlueprint` The end result, after simplifying imports and cleaning up a bit, might look like this: @@ -190,17 +192,19 @@ The end result, after simplifying imports and cleaning up a bit, might look like import { storageApiRef, createApiFactory, - createApiExtension, + ApiBlueprint, } from '@backstage/frontend-plugin-api'; import { workApiRef } from '@internal/plugin-example-react'; import { WorkImpl } from './WorkImpl'; -const exampleWorkApi = createApiExtension({ - factory: createApiFactory({ - api: workApiRef, - deps: { storageApi: storageApiRef }, - factory: ({ storageApi }) => new WorkImpl({ storageApi }), - }), +const exampleWorkApi = ApiBlueprint.make({ + params: { + factory: createApiFactory({ + api: workApiRef, + deps: { storageApi: storageApiRef }, + factory: ({ storageApi }) => new WorkImpl({ storageApi }), + }), + }, }); ```