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

Merge pull request #26011 from backstage/rugvip/frontend-plugin

Browse Source 
frontend-plugin-api: renamed createPlugin to createFrontendPlugin
This commit is contained in:
Patrik Oldsberg
2024-08-14 16:38:14 +02:00
committed by GitHub
parent f90cdd6483 9b356dcaac
commit 1d40a3316f
38 changed files with 154 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/frontend-system/architecture/15-plugins.md
+5 -5
View File
@@ -25,7 +25,7 @@ How to create a simple plugin
-->
```ts
export const myPlugin = createPlugin({
export const myPlugin = createFrontendPlugin({
id: 'my-plugin',
});
```
@@ -48,7 +48,7 @@ link to relevant docs
<!--
- Example of how this option is used in `createPlugin`
- Example of how this option is used in `createFrontendPlugin`
link to relevant docs
@@ -58,7 +58,7 @@ link to relevant docs
<!--
- Example of how this option is used in `createPlugin`
- Example of how this option is used in `createFrontendPlugin`
link to relevant docs
@@ -68,7 +68,7 @@ link to relevant docs
<!--
- Example of how this option is used in `createPlugin`
- Example of how this option is used in `createFrontendPlugin`
link to relevant docs
@@ -78,7 +78,7 @@ link to relevant docs
<!--
- Example of how this option is used in `createPlugin`
- Example of how this option is used in `createFrontendPlugin`
link to relevant docs
docs/frontend-system/architecture/36-routes.md
+6 -6
View File
@@ -42,7 +42,7 @@ The code snippet in the previous section does not indicate which plugin the rout
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createPlugin,
createFrontendPlugin,
createPageExtension,
} from '@backstage/frontend-plugin-api';
import { indexRouteRef } from './routes';
@@ -55,7 +55,7 @@ const catalogIndexPage = createPageExtension({
loader: () => import('./components').then(m => <m.IndexPage />),
});
export default createPlugin({
export default createFrontendPlugin({
id: 'catalog',
// highlight-start
routes: {
@@ -196,7 +196,7 @@ Now the only thing left is to provide the page and external route via a plugin:
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createPlugin,
createFrontendPlugin,
createPageExtension,
useRouteRef,
} from '@backstage/frontend-plugin-api';
@@ -208,7 +208,7 @@ const catalogIndexPage = createPageExtension({
loader: () => import('./components').then(m => <m.IndexPage />),
});
export default createPlugin({
export default createFrontendPlugin({
id: 'catalog',
routes: {
index: indexRouteRef,
@@ -404,7 +404,7 @@ Finally, see how a plugin can provide subroutes:
```tsx title="plugins/catalog/src/plugin.tsx"
import React from 'react';
import {
createPlugin,
createFrontendPlugin,
createPageExtension,
} from '@backstage/frontend-plugin-api';
import { indexRouteRef, detailsSubRouteRef } from './routes';
@@ -415,7 +415,7 @@ const catalogIndexPage = createPageExtension({
loader: () => import('./components').then(m => <m.IndexPage />),
});
export default createPlugin({
export default createFrontendPlugin({
id: 'catalog',
routes: {
index: indexRouteRef,
docs/frontend-system/architecture/50-naming-patterns.md
+2 -2
View File
@@ -23,7 +23,7 @@ Example:
```ts
// This declaration is only for internal usage in tests. This could also be a direct default export.
export const userSettingsPlugin = createPlugin({
export const userSettingsPlugin = createFrontendPlugin({
id: 'user-settings',
...
})
@@ -67,7 +67,7 @@ const catalogSearchResultListItem = SearchResultListItemBlueprint.make({
});
// Note that the extensions themselves are not exported, only the plugin instance
export const catalogPlugin = createPlugin({
export const catalogPlugin = createFrontendPlugin({
id: 'catalog',
extensions: [catalogEntityPage, catalogSearchResultListItem /* ... */],
});
docs/frontend-system/building-apps/08-migrating.md
+1 -1
View File
@@ -207,7 +207,7 @@ createApp({
Can be converted to the following plugin configuration:
```tsx
createPlugin({
createFrontendPlugin({
id: 'tech-radar',
// ...
featureFlags: [{ name: 'tech-radar' }],
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 */
docs/frontend-system/utility-apis/02-creating.md
+2 -2
View File
@@ -47,7 +47,7 @@ The plugin itself now wants to provide this API and its default implementation,
import {
createApiExtension,
createApiFactory,
createPlugin,
createFrontendPlugin,
storageApiRef,
StorageApi,
} from '@backstage/frontend-plugin-api';
@@ -76,7 +76,7 @@ const exampleWorkApi = createApiExtension({
* The Example plugin.
* @public
*/
export default createPlugin({
export default createFrontendPlugin({
id: 'example',
extensions: [exampleWorkApi],
});