chore: fixing ref names and changesets
Signed-off-by: benjdlambert <ben@blam.sh>
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/plugin-app': patch
|
||||
---
|
||||
|
||||
Default implementations of core components are now provided by this package.
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
'@backstage/plugin-app': minor
|
||||
---
|
||||
|
||||
**BREAKING**: The `componentsApi` implementation has been removed from the plugin and replaced with the new `SwappableComponentsApi` instead.
|
||||
|
||||
If you were overriding the `componentsApi` implementation, you can now use the new `SwappableComponentsApi` instead.
|
||||
|
||||
```ts
|
||||
// old
|
||||
appPlugin.getExtension('api:app/components').override(...)
|
||||
|
||||
// new
|
||||
appPlugin.getExtension('api:app/swappable-components').override(...)
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
'@backstage/frontend-plugin-api': minor
|
||||
---
|
||||
|
||||
**BREAKING**: The component system has been overhauled to use `SwappableComponent` instead of `ComponentRef`. Several APIs have been removed and replaced:
|
||||
|
||||
- Removed: `createComponentRef`, `createComponentExtension`, `ComponentRef`, `ComponentsApi`, `componentsApiRef`, `useComponentRef`, `coreComponentRefs`
|
||||
- Added: `createSwappableComponent`, `SwappableComponentBlueprint`, `SwappableComponentRef`, `SwappableComponentsApi`, `swappableComponentsApiRef`
|
||||
|
||||
**Migration for creating swappable components:**
|
||||
|
||||
```tsx
|
||||
// OLD: Using createComponentRef and createComponentExtension
|
||||
import {
|
||||
createComponentRef,
|
||||
createComponentExtension,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
|
||||
const myComponentRef = createComponentRef<{ title: string }>({
|
||||
id: 'my-plugin.my-component',
|
||||
});
|
||||
|
||||
const myComponentExtension = createComponentExtension({
|
||||
ref: myComponentRef,
|
||||
loader: {
|
||||
lazy: () => import('./MyComponent').then(m => m.MyComponent),
|
||||
},
|
||||
});
|
||||
|
||||
// NEW: Using createSwappableComponent and SwappableComponentBlueprint
|
||||
import {
|
||||
createSwappableComponent,
|
||||
SwappableComponentBlueprint,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
|
||||
const MySwappableComponent = createSwappableComponent({
|
||||
id: 'my-plugin.my-component',
|
||||
loader: () => import('./MyComponent').then(m => m.MyComponent),
|
||||
});
|
||||
|
||||
const myComponentExtension = SwappableComponentBlueprint.make({
|
||||
name: 'my-component',
|
||||
params: {
|
||||
component: MySwappableComponent,
|
||||
loader: () => import('./MyComponent').then(m => m.MyComponent),
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**Migration for using components:**
|
||||
|
||||
```tsx
|
||||
// OLD: Using ComponentsApi and useComponentRef
|
||||
import {
|
||||
useComponentRef,
|
||||
componentsApiRef,
|
||||
useApi,
|
||||
coreComponentRefs,
|
||||
} from '@backstage/frontend-plugin-api';
|
||||
|
||||
const MyComponent = useComponentRef(myComponentRef);
|
||||
const ProgressComponent = useComponentRef(coreComponentRefs.progress);
|
||||
|
||||
|
||||
// NEW: Direct component usage
|
||||
import { Progress } from '@backstage/frontend-plugin-api';
|
||||
|
||||
// Use directly as React Component
|
||||
<Progress />
|
||||
<MySwappableComponent title="Hello World" />
|
||||
```
|
||||
|
||||
**Migration for core component references:**
|
||||
|
||||
```tsx
|
||||
// OLD: Core component refs
|
||||
import { coreComponentRefs } from '@backstage/frontend-plugin-api';
|
||||
|
||||
coreComponentRefs.progress
|
||||
coreComponentRefs.notFoundErrorPage
|
||||
coreComponentRefs.errorBoundaryFallback
|
||||
|
||||
// NEW: Direct swappable component imports
|
||||
import { Progress, NotFoundErrorPage, ErrorDisplay } from '@backstage/frontend-plugin-api';
|
||||
|
||||
// Use directly as React components
|
||||
<Progress />
|
||||
<NotFoundErrorPage />
|
||||
<ErrorDisplay plugin={plugin} error={error} resetError={resetError} />
|
||||
```
|
||||
|
||||
**BREAKING**: The `errorBoundaryFallback` component and `CoreErrorBoundaryFallbackProps` type have been replaced with `ErrorDisplay` swappable component and `CoreErrorDisplayProps` respectively.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/core-compat-api': patch
|
||||
---
|
||||
|
||||
This is primarily an internal change that ensures legacy plugins continue to work with the new component system without requiring immediate migration.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/frontend-app-api': patch
|
||||
---
|
||||
|
||||
Added a default implementation of the `SwappableComponentsApi` and removing the legacy `ComponentsApi` implementation
|
||||
@@ -1862,7 +1862,7 @@ export const SwappableComponentBlueprint: ExtensionBlueprint<{
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>;
|
||||
inputs: {};
|
||||
@@ -1876,7 +1876,7 @@ export const SwappableComponentBlueprint: ExtensionBlueprint<{
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>;
|
||||
};
|
||||
|
||||
@@ -597,7 +597,7 @@ const appPlugin: FrontendPlugin<
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>,
|
||||
{
|
||||
@@ -740,7 +740,7 @@ const appPlugin: FrontendPlugin<
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>;
|
||||
inputs: {};
|
||||
@@ -796,7 +796,7 @@ const appPlugin: FrontendPlugin<
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>;
|
||||
inputs: {};
|
||||
@@ -852,7 +852,7 @@ const appPlugin: FrontendPlugin<
|
||||
| (() => (props: {}) => JSX.Element | null)
|
||||
| (() => Promise<(props: {}) => JSX.Element | null>);
|
||||
},
|
||||
'core.component.component',
|
||||
'core.swappableComponent',
|
||||
{}
|
||||
>;
|
||||
inputs: {};
|
||||
|
||||
Reference in New Issue
Block a user