chore: smaller renames and code review
Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
@@ -8,8 +8,8 @@ This allows the creation of extension with the following pattern:
|
||||
|
||||
```tsx
|
||||
// create the extension kind
|
||||
const TestExtensionKind = createExtensionKind({
|
||||
kind: 'test-extension',
|
||||
const EntityCardBlueprint = createExtensionBlueprint({
|
||||
kind: 'entity-card',
|
||||
attachTo: { id: 'test', input: 'default' },
|
||||
output: {
|
||||
element: coreExtensionData.reactElement,
|
||||
@@ -22,7 +22,7 @@ const TestExtensionKind = createExtensionKind({
|
||||
});
|
||||
|
||||
// create an instance of the extension kind with props
|
||||
const testExtension = TestExtensionKind.create({
|
||||
const testExtension = EntityCardBlueprint.make({
|
||||
name: 'foo',
|
||||
params: {
|
||||
text: 'Hello World',
|
||||
|
||||
@@ -38,33 +38,31 @@ Note that while we use this naming pattern for the plugin instance this is only
|
||||
|
||||
| Description | Pattern | Examples |
|
||||
| ----------- | ------------------------------- | ------------------------------------------------------------------- |
|
||||
| Creator | `create<Kind>Extension` | `createPageExtension`, `createEntityCardExtension` |
|
||||
| Blueprint | `<Kind>Blueprint` | `PageBlueprint`, `EntityCardBlueprint` |
|
||||
| ID | `[<kind>:]<namespace>[/<name>]` | `'core.nav'`, `'page:user-settings'`, `'entity-card:catalog/about'` |
|
||||
| Symbol | `<namespace>[<Name>][<Kind>]` | `coreNav`, `userSettingsPage`, `catalogAboutEntityCard` |
|
||||
|
||||
When you create a new extension you never provide the ID directly. Instead, you indirectly or directly provide the kind, namespace, and name parts that make up the ID. The kind is always provided by the extension creator function used to create the extension, the only exception is if you use `createExtension` directly. Any extension that is provided by a plugin will by default have its namespace set to the plugin ID, so you generally only need to provide an explicit namespace if you want to override an existing extension. The name is also optional, and primarily used to distinguish between multiple extensions of the same kind and namespace. If a plugin doesn't need to distinguish between different extensions of the same kind, the name can be omitted.
|
||||
When you create a new extension you never provide the ID directly. Instead, you indirectly or directly provide the kind, namespace, and name parts that make up the ID. The kind is always provided by the blueprint creator, the only exception is if you use `createExtension` directly. Any extension that is provided by a plugin will by default have its namespace set to the plugin ID, so you generally only need to provide an explicit namespace if you want to override an existing extension. The name is also optional, and primarily used to distinguish between multiple extensions of the same kind and namespace. If a plugin doesn't need to distinguish between different extensions of the same kind, the name can be omitted.
|
||||
|
||||
Example:
|
||||
|
||||
```ts
|
||||
// This is an extension creator that is used to create an extension of the 'page' kind.
|
||||
export function createPageExtension(options) {
|
||||
return createExtension({
|
||||
kind: 'page', // Kinds are kebab-case
|
||||
// ...options
|
||||
});
|
||||
}
|
||||
// This is an extension blueprint that is used to create an extension of the 'page' kind.
|
||||
export const PageBlueprint = createExtensionBlueprint({
|
||||
kind: 'page',
|
||||
// ...
|
||||
});
|
||||
|
||||
// The namespace is inferred from the plugin ID, in this case 'catalog'
|
||||
// The final ID for this extension will be 'page:catalog/entity'
|
||||
const catalogEntityPage = createPageExtension({
|
||||
const catalogEntityPage = PageBlueprint.make({
|
||||
name: 'entity',
|
||||
// ...
|
||||
});
|
||||
|
||||
// The name is omitted, because the catalog plugin only provides a single extension of this kind
|
||||
// The final ID for this extension will be 'search-result-list-item:catalog'
|
||||
const catalogSearchResultListItem = createSearchResultListItemExtension({
|
||||
const catalogSearchResultListItem = SearchResultListItemBlueprint.make({
|
||||
// ...
|
||||
});
|
||||
|
||||
|
||||
+15
-15
@@ -16,27 +16,27 @@
|
||||
|
||||
import React from 'react';
|
||||
import { coreExtensionData } from './coreExtensionData';
|
||||
import { createExtensionKind } from './createExtensionKind';
|
||||
import { createExtensionBlueprint } from './createExtensionBlueprint';
|
||||
import { createExtensionTester } from '@backstage/frontend-test-utils';
|
||||
|
||||
describe('createExtensionKind', () => {
|
||||
it('should allow creation of extension kinds', () => {
|
||||
const TestExtension = createExtensionKind({
|
||||
describe('createExtensionBlueprint', () => {
|
||||
it('should allow creation of extension blueprints', () => {
|
||||
const TestExtensionBlueprint = createExtensionBlueprint({
|
||||
kind: 'test-extension',
|
||||
attachTo: { id: 'test', input: 'default' },
|
||||
output: {
|
||||
element: coreExtensionData.reactElement,
|
||||
},
|
||||
factory(_, options: { text: string }) {
|
||||
factory(_, params: { text: string }) {
|
||||
return {
|
||||
element: <h1>{options.text}</h1>,
|
||||
element: <h1>{params.text}</h1>,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const extension = TestExtension.new({
|
||||
const extension = TestExtensionBlueprint.make({
|
||||
name: 'my-extension',
|
||||
options: {
|
||||
params: {
|
||||
text: 'Hello, world!',
|
||||
},
|
||||
});
|
||||
@@ -72,27 +72,27 @@ describe('createExtensionKind', () => {
|
||||
});
|
||||
|
||||
it('should allow overriding of the default factory', () => {
|
||||
const TestExtension = createExtensionKind({
|
||||
const TestExtensionBlueprint = createExtensionBlueprint({
|
||||
kind: 'test-extension',
|
||||
attachTo: { id: 'test', input: 'default' },
|
||||
output: {
|
||||
element: coreExtensionData.reactElement,
|
||||
},
|
||||
factory(_, options: { text: string }) {
|
||||
factory(_, params: { text: string }) {
|
||||
return {
|
||||
element: <h1>{options.text}</h1>,
|
||||
element: <h1>{params.text}</h1>,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
const extension = TestExtension.new({
|
||||
const extension = TestExtensionBlueprint.make({
|
||||
name: 'my-extension',
|
||||
options: {
|
||||
params: {
|
||||
text: 'Hello, world!',
|
||||
},
|
||||
factory(_, options: { text: string }) {
|
||||
factory(_, params: { text: string }) {
|
||||
return {
|
||||
element: <h2>{options.text}</h2>,
|
||||
element: <h2>{params.text}</h2>,
|
||||
};
|
||||
},
|
||||
});
|
||||
+12
-10
@@ -29,7 +29,7 @@ import {
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export interface CreateExtensionKindOptions<
|
||||
export interface CreateExtensionBlueprintOptions<
|
||||
TParams,
|
||||
TInputs extends AnyExtensionInputMap,
|
||||
TOutput extends AnyExtensionDataMap,
|
||||
@@ -55,13 +55,13 @@ export interface CreateExtensionKindOptions<
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
export interface ExtensionKind<
|
||||
export interface ExtensionBlueprint<
|
||||
TParams,
|
||||
TInputs extends AnyExtensionInputMap,
|
||||
TOutput extends AnyExtensionDataMap,
|
||||
TConfig,
|
||||
> {
|
||||
create(args: {
|
||||
make(args: {
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
attachTo?: { id: string; input: string };
|
||||
@@ -77,6 +77,7 @@ export interface ExtensionKind<
|
||||
inputs: Expand<ResolvedExtensionInputs<TInputs>>;
|
||||
orignalFactory(
|
||||
context?: {
|
||||
node?: AppNode;
|
||||
config?: TConfig;
|
||||
inputs?: Expand<ResolvedExtensionInputs<TInputs>>;
|
||||
},
|
||||
@@ -91,14 +92,14 @@ export interface ExtensionKind<
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
class ExtensionKindImpl<
|
||||
class ExtensionBlueprintImpl<
|
||||
TParams,
|
||||
TInputs extends AnyExtensionInputMap,
|
||||
TOutput extends AnyExtensionDataMap,
|
||||
TConfig,
|
||||
> {
|
||||
constructor(
|
||||
private readonly options: CreateExtensionKindOptions<
|
||||
private readonly options: CreateExtensionBlueprintOptions<
|
||||
TParams,
|
||||
TInputs,
|
||||
TOutput,
|
||||
@@ -106,7 +107,7 @@ class ExtensionKindImpl<
|
||||
>,
|
||||
) {}
|
||||
|
||||
public create(args: {
|
||||
public make(args: {
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
attachTo?: { id: string; input: string };
|
||||
@@ -122,6 +123,7 @@ class ExtensionKindImpl<
|
||||
inputs: Expand<ResolvedExtensionInputs<TInputs>>;
|
||||
orignalFactory(
|
||||
context?: {
|
||||
node?: AppNode;
|
||||
config?: TConfig;
|
||||
inputs?: Expand<ResolvedExtensionInputs<TInputs>>;
|
||||
},
|
||||
@@ -186,13 +188,13 @@ class ExtensionKindImpl<
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export function createExtensionKind<
|
||||
export function createExtensionBlueprint<
|
||||
TParams,
|
||||
TInputs extends AnyExtensionInputMap,
|
||||
TOutput extends AnyExtensionDataMap,
|
||||
TConfig,
|
||||
>(
|
||||
options: CreateExtensionKindOptions<TParams, TInputs, TOutput, TConfig>,
|
||||
): ExtensionKind<TParams, TInputs, TOutput, TConfig> {
|
||||
return new ExtensionKindImpl(options);
|
||||
options: CreateExtensionBlueprintOptions<TParams, TInputs, TOutput, TConfig>,
|
||||
): ExtensionBlueprint<TParams, TInputs, TOutput, TConfig> {
|
||||
return new ExtensionBlueprintImpl(options);
|
||||
}
|
||||
@@ -49,7 +49,7 @@ export {
|
||||
type FrontendFeature,
|
||||
} from './types';
|
||||
export {
|
||||
type CreateExtensionKindOptions as ExtensionKindOptions,
|
||||
ExtensionKind,
|
||||
createExtensionKind,
|
||||
} from './createExtensionKind';
|
||||
type CreateExtensionBlueprintOptions,
|
||||
type ExtensionBlueprint,
|
||||
createExtensionBlueprint,
|
||||
} from './createExtensionBlueprint';
|
||||
|
||||
Reference in New Issue
Block a user