paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

frontend-plugin-api: renamed createPlugin to createFrontendPlugin

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2024-08-14 16:01:25 +02:00
parent 634a1202cd
commit 9b356dcaac
38 changed files with 154 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/frontend-system/building-plugins/01-index.md
+7 -7
View File
@@ -24,14 +24,14 @@ The created plugin will currently be templated for use in the legacy frontend sy
## The plugin instance
The starting point of a frontend plugin is the `createPlugin` function, which accepts a single options object as its only parameter. It is imported from `@backstage/frontend-plugin-api`, which is where you will find most of the common APIs for building plugins.
The starting point of a frontend plugin is the `createFrontendPlugin` function, which accepts a single options object as its only parameter. It is imported from `@backstage/frontend-plugin-api`, which is where you will find most of the common APIs for building plugins.
This is how to create a minimal plugin:
```tsx title="in src/plugin.ts"
import { createPlugin } from '@backstage/frontend-plugin-api';
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
export const examplePlugin = createPlugin({
export const examplePlugin = createFrontendPlugin({
id: 'example',
extensions: [],
});
@@ -63,7 +63,7 @@ export const rootRouteRef = createRouteRef();
```tsx title="in src/plugin.ts"
import {
createPlugin,
createFrontendPlugin,
createPageExtension,
createNavItemExtension,
} from '@backstage/frontend-plugin-api';
@@ -92,7 +92,7 @@ const exampleNavItem = createNavItemExtension({
});
// The same plugin as above, now with the extensions added
export const examplePlugin = createPlugin({
export const examplePlugin = createFrontendPlugin({
id: 'example',
extensions: [examplePage, exampleNavItem],
// We can also make routes available to other plugins.
@@ -168,7 +168,7 @@ const exampleApi = createApiExtension({
/* Omitted definitions for examplePage, exampleNavItem, and rootRouteRef. */
export const examplePlugin = createPlugin({
export const examplePlugin = createFrontendPlugin({
id: 'example',
extensions: [
// highlight-add-next-line
@@ -202,7 +202,7 @@ const exampleEntityContent = createEntityContentExtension({
)),
});
export const examplePlugin = createPlugin({
export const examplePlugin = createFrontendPlugin({
id: 'example',
extensions: [
// highlight-add-next-line
docs/frontend-system/building-plugins/05-migrating.md
+10 -10
View File
@@ -15,9 +15,9 @@ The main concept is that routes, components, apis are now extensions. You can us
In the legacy frontend system a plugin was defined in its own `plugin.ts` file as following:
```ts title="my-plugin/src/plugin.ts"
import { createPlugin } from '@backstage/core-plugin-api';
import { createFrontendPlugin } from '@backstage/core-plugin-api';
export const myPlugin = createPlugin({
export const myPlugin = createFrontendPlugin({
id: 'my-plugin',
apis: [],
routes: {
@@ -29,13 +29,13 @@ In the legacy frontend system a plugin was defined in its own `plugin.ts` file a
});
```
In order to migrate the actual definition of the plugin you need to recreate the plugin using the new `createPlugin` utility exported by `@backstage/frontend-plugin-api`.
The new `createPlugin` function doesn't accept apis anymore as apis are now extensions.
In order to migrate the actual definition of the plugin you need to recreate the plugin using the new `createFrontendPlugin` utility exported by `@backstage/frontend-plugin-api`.
The new `createFrontendPlugin` function doesn't accept apis anymore as apis are now extensions.
```ts title="my-plugin/src/alpha.ts"
import { createPlugin } from '@backstage/frontend-plugin-api';
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
export default createPlugin({
export default createFrontendPlugin({
id: 'my-plugin',
// bind all the extensions to the plugin
/* highlight-next-line */
@@ -118,9 +118,9 @@ const fooPage = createPageExtension({
then add the `fooPage` extension to the plugin:
```ts title="my-plugin/src/alpha.ts"
import { createPlugin } from '@backstage/frontend-plugin-api';
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
export default createPlugin({
export default createFrontendPlugin({
id: 'my-plugin',
// bind all the extensions to the plugin
/* highlight-remove-next-line */
@@ -207,9 +207,9 @@ const exampleWorkApi = createApiExtension({
Finally, let's add the `exampleWorkApi` extension to the plugin:
```ts title="my-plugin/src/alpha.ts"
import { createPlugin } from '@backstage/frontend-plugin-api';
import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
export default createPlugin({
export default createFrontendPlugin({
id: 'my-plugin',
// bind all the extensions to the plugin
/* highlight-remove-next-line */