diff --git a/docs/frontend-system/architecture/02-app.md b/docs/frontend-system/architecture/02-app.md index 6fa8242061..08fc63b480 100644 --- a/docs/frontend-system/architecture/02-app.md +++ b/docs/frontend-system/architecture/02-app.md @@ -42,3 +42,7 @@ It is possible to explicitly install features when creating the app, although ty Each node in this tree is an extension with a parent node, children. The colored shapes represent extension data inputs and output, where each color is one unique type of data. You can see that there are both extensions that output data that is ignored by the parent, as well as extensions that accept inputs but do not have any children. There are a couple of different tools at your disposal when creating and extension that lets you define different requirements for your inputs and output, which we will cover in greater details in the [Extensions](./03-extensions.md) section. A common type of data that is shared between extensions is React elements and components. These can in turn be rendered by each other in their own React components, which ends up forming a parallel tree of React components that is similar in shape to that of the app extension tree. At the top of the app extension tree is a built-in root extension that among other things outputs a React element. This element also ends up being the root of the parallel React tree, and is rendered by the React element returned by `app.createRoot()`. + +## Feature Discovery + +TODO diff --git a/docs/frontend-system/architecture/03-extensions.md b/docs/frontend-system/architecture/03-extensions.md index 9f12bc2d1b..086b8fa815 100644 --- a/docs/frontend-system/architecture/03-extensions.md +++ b/docs/frontend-system/architecture/03-extensions.md @@ -50,7 +50,32 @@ The extension factory is the implementation of the extension itself. It is a fun ## Creating an Extensions -TODO +Extensions are created using the `createExtension` function from `@backstage/frontend-plugin-api`. At minimum you need to provide an ID, attachment point, output definition, and a factory function. The following example shows the creation of a minimal extension: + +```tsx +const extension = createExtension({ + id: 'my-extension', + // This is the attachment point, `id` is the ID of the parent extension, + // while `input` is the name of the input to attach to. + attachTo: { id: 'my-parent', input: 'content' }, + // The output map defines the outputs of the extension. The object keys + // are only used internally to map the outputs of the factory and do + // not need to match the keys of the input. + output: { + element: coreExtensionData.reactElement, + }, + // This factory is called to instantiate the extensions and produce its output. + factory({ bind }) { + bind({ + element: