@@ -13,31 +13,31 @@ both with other plugins and the app itself.
13
13
14
14
Backstage provides two primary methods for plugins to communicate across their
15
15
boundaries in client-side code. The first one being the
16
- [ createPlugin] ( ../reference/core-plugin-api.createplugin.md ) API along with the
16
+ [ ` createPlugin ` ] ( ../reference/core-plugin-api.createplugin.md ) API along with the
17
17
extensions that it can provide, and the second one being Utility APIs. While the
18
- [ createPlugin] ( ../reference/core-plugin-api.createplugin.md ) API is focused on
18
+ [ ` createPlugin ` ] ( ../reference/core-plugin-api.createplugin.md ) API is focused on
19
19
the initialization plugins and the app, the Utility APIs provide ways for
20
20
plugins to communicate during their entire life cycle.
21
21
22
22
## Consuming APIs
23
23
24
- Each Utility API is tied to an [ ApiRef] ( ../reference/core-plugin-api.apiref.md )
24
+ Each Utility API is tied to an [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md )
25
25
instance, which is a global singleton object without any additional state or
26
26
functionality, its only purpose is to reference Utility APIs.
27
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) s are created using
28
- [ createApiRef] ( ../reference/core-plugin-api.createapiref.md ) , which is exported
29
- by [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) . There are also
27
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) s are created using
28
+ [ ` createApiRef ` ] ( ../reference/core-plugin-api.createapiref.md ) , which is exported
29
+ by [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) . There are also
30
30
many predefined Utility APIs in
31
- [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) , and they're all
31
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) , and they're all
32
32
exported with a name of the pattern ` *ApiRef ` , for example
33
- [ errorApiRef] ( ../reference/core-plugin-api.errorapiref.md ) .
33
+ [ ` errorApiRef ` ] ( ../reference/core-plugin-api.errorapiref.md ) .
34
34
35
35
To access one of the Utility APIs inside a React component, use the
36
- [ useApi] ( ../reference/core-plugin-api.useapi.md ) hook exported by
37
- [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) , or the
38
- [ withApis] ( ../reference/core-plugin-api.withapis.md ) HOC if you prefer class
36
+ [ ` useApi ` ] ( ../reference/core-plugin-api.useapi.md ) hook exported by
37
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) , or the
38
+ [ ` withApis ` ] ( ../reference/core-plugin-api.withapis.md ) HOC if you prefer class
39
39
components. For example, the
40
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) can be accessed like this:
40
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) can be accessed like this:
41
41
42
42
``` tsx
43
43
import React from ' react' ;
@@ -56,30 +56,30 @@ export const MyComponent = () => {
56
56
```
57
57
58
58
Note that there is no explicit type given for
59
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) . This is because the
60
- [ errorApiRef] ( ../reference/core-plugin-api.errorapiref.md ) has the type
61
- embedded, and [ useApi] ( ../reference/core-plugin-api.useapi.md ) is able to infer
59
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) . This is because the
60
+ [ ` errorApiRef ` ] ( ../reference/core-plugin-api.errorapiref.md ) has the type
61
+ embedded, and [ ` useApi ` ] ( ../reference/core-plugin-api.useapi.md ) is able to infer
62
62
the type.
63
63
64
64
Also note that consuming Utility APIs is not limited to plugins, it can be done
65
65
from any component inside Backstage, including the ones in
66
- [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) . The only
66
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) . The only
67
67
requirement is that they are beneath the ` AppProvider ` in the react tree.
68
68
69
69
## Supplying APIs
70
70
71
71
### API Factories
72
72
73
73
APIs are registered in the form of
74
- [ ApiFactories ] ( ../reference/core-plugin-api.apifactory.md ) , which encapsulate
74
+ [ ` ApiFactory ` ] ( ../reference/core-plugin-api.apifactory.md ) instances , which encapsulate
75
75
the process of instantiating an API. It is a collection of three things: the
76
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) of the API to instantiate, a
76
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) of the API to instantiate, a
77
77
list of all required dependencies, and a factory function that returns a new API
78
78
instance.
79
79
80
80
For example, this is the default
81
- [ ApiFactory] ( ../reference/core-plugin-api.apifactory.md ) for the
82
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) :
81
+ [ ` ApiFactory ` ] ( ../reference/core-plugin-api.apifactory.md ) for the
82
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) :
83
83
84
84
``` ts
85
85
createApiFactory ({
@@ -93,25 +93,25 @@ createApiFactory({
93
93
});
94
94
```
95
95
96
- In this example the [ errorApiRef] ( ../reference/core-plugin-api.errorapiref.md )
96
+ In this example the [ ` errorApiRef ` ] ( ../reference/core-plugin-api.errorapiref.md )
97
97
is our API, which encapsulates the
98
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) type. The
99
- [ alertApiRef] ( ../reference/core-plugin-api.alertapiref.md ) is our single
98
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) type. The
99
+ [ ` alertApiRef ` ] ( ../reference/core-plugin-api.alertapiref.md ) is our single
100
100
dependency, which we give the name ` alertApi ` , and is then passed on to the
101
101
factory function, which returns an implementation of the
102
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) .
102
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) .
103
103
104
- The [ createApiFactory] ( ../reference/core-plugin-api.createapifactory.md )
104
+ The [ ` createApiFactory ` ] ( ../reference/core-plugin-api.createapifactory.md )
105
105
function is a thin wrapper that enables TypeScript type inference. You may
106
106
notice that there are no type annotations in the above example, and that is
107
107
because we're able to infer all types from the
108
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) s. TypeScript will make sure
108
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) s. TypeScript will make sure
109
109
that the return value of the ` factory ` function matches the type embedded in
110
- ` api ` 's [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) , in this case the
111
- [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) . It will also match the
110
+ ` api ` 's [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) , in this case the
111
+ [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) . It will also match the
112
112
types between the ` deps ` and the parameters of the ` factory ` function, again
113
113
using the type embedded within the
114
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) s.
114
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) s.
115
115
116
116
## Registering API Factories
117
117
@@ -123,27 +123,27 @@ app, and the app itself.
123
123
124
124
Starting with the Backstage core library, it provides implementations for all of
125
125
the core APIs. The core APIs are the ones exported by
126
- [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) , such as the
127
- [ errorApiRef] ( ../reference/core-plugin-api.errorapiref.md ) and
128
- [ configApiRef] ( ../reference/core-plugin-api.configapiref.md ) .
126
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) , such as the
127
+ [ ` errorApiRef ` ] ( ../reference/core-plugin-api.errorapiref.md ) and
128
+ [ ` configApiRef ` ] ( ../reference/core-plugin-api.configapiref.md ) .
129
129
130
130
The core APIs are loaded for any app created with
131
- [ createApp] ( ../reference/app-defaults.createapp.md ) from
132
- [ @backstage/core-plugin-api ] ( ../reference/app-defaults.md ) , which means that
131
+ [ ` createApp ` ] ( ../reference/app-defaults.createapp.md ) from
132
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/app-defaults.md ) , which means that
133
133
there is no step that needs to be taken to include these APIs in an app.
134
134
135
135
### Plugin APIs
136
136
137
137
In addition to the core APIs, plugins can define and export their own APIs.
138
138
While doing so they should usually also provide default implementations of their
139
139
own APIs, for example, the ` catalog ` plugin exports ` catalogApiRef ` , and also
140
- supplies a default [ ApiFactory] ( ../reference/core-plugin-api.apifactory.md ) of
140
+ supplies a default [ ` ApiFactory ` ] ( ../reference/core-plugin-api.apifactory.md ) of
141
141
that API using the ` CatalogClient ` . There is one restriction to plugin-provided
142
142
API Factories: plugins may not supply factories for core APIs, trying to do so
143
143
will cause the app to refuse to start.
144
144
145
145
Plugins supply their APIs through the ` apis ` option of
146
- [ createPlugin] ( ../reference/core-plugin-api.createplugin.md ) , for example:
146
+ [ ` createPlugin ` ] ( ../reference/core-plugin-api.createplugin.md ) , for example:
147
147
148
148
``` ts
149
149
export const techdocsPlugin = createPlugin ({
@@ -168,7 +168,7 @@ Lastly, the app itself is the final point where APIs can be added, and what has
168
168
the final say in what APIs will be loaded at runtime. The app may override the
169
169
factories for any of the core or plugin APIs, with the exception of the config,
170
170
app theme, and identity APIs. These are static APIs that are tied into the
171
- [ createApp] ( ../reference/app-defaults.createapp.md ) implementation, and
171
+ [ ` createApp ` ] ( ../reference/app-defaults.createapp.md ) implementation, and
172
172
therefore not possible to override.
173
173
174
174
Overriding APIs is useful for apps that want to switch out behavior to tailor it
@@ -231,19 +231,19 @@ const app = createApp({
231
231
```
232
232
233
233
Note that the above line will cause an error if ` IgnoreErrorApi ` does not fully
234
- implement the [ ErrorApi] ( ../reference/core-plugin-api.errorapi.md ) , as it is
234
+ implement the [ ` ErrorApi ` ] ( ../reference/core-plugin-api.errorapi.md ) , as it is
235
235
checked by the type embedded in the
236
- [ errorApiRef] ( ../reference/core-plugin-api.errorapiref.md ) at compile time.
236
+ [ ` errorApiRef ` ] ( ../reference/core-plugin-api.errorapiref.md ) at compile time.
237
237
238
238
## Defining custom Utility APIs
239
239
240
240
Plugins are free to define their own Utility APIs. Simply define the TypeScript
241
241
interface for the API, and create an
242
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) using
243
- [ createApiRef] ( ../reference/core-plugin-api.createapiref.md ) exported from
244
- [ @backstage/core-plugin-api ] ( ../reference/core-plugin-api.md ) . Also be sure to
242
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) using
243
+ [ ` createApiRef ` ] ( ../reference/core-plugin-api.createapiref.md ) exported from
244
+ [ ` @backstage/core-plugin-api ` ] ( ../reference/core-plugin-api.md ) . Also be sure to
245
245
provide at least one implementation of the API, and to declare a default factory
246
- for the API in [ createPlugin] ( ../reference/core-plugin-api.createplugin.md ) .
246
+ for the API in [ ` createPlugin ` ] ( ../reference/core-plugin-api.createplugin.md ) .
247
247
248
248
Custom Utility APIs can be either public or private, which is up to the plugin
249
249
to choose. Private APIs do not expose an external API surface, and it's
@@ -255,16 +255,16 @@ backwards compatibility of public APIs, as you may otherwise break apps that are
255
255
using your plugin.
256
256
257
257
To make an API public, simply export the
258
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) of the API, and any associated
258
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) of the API, and any associated
259
259
types. To make an API private, just avoid exporting the
260
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) , but still be sure to supply a
261
- default factory to [ createPlugin] ( ../reference/core-plugin-api.createplugin.md ) .
260
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) , but still be sure to supply a
261
+ default factory to [ ` createPlugin ` ] ( ../reference/core-plugin-api.createplugin.md ) .
262
262
263
263
Private APIs are useful for plugins that want to depend on other APIs outside of
264
264
React components, but not have to expose an entire API surface to maintain. When
265
265
using private APIs, it is fine to use the ` typeof ` of an implementing class as
266
266
the type parameter passed to
267
- [ createApiRef] ( ../reference/core-plugin-api.createapiref.md ) , while public APIs
267
+ [ ` createApiRef ` ] ( ../reference/core-plugin-api.createapiref.md ) , while public APIs
268
268
should always define a separate TypeScript interface type.
269
269
270
270
Plugins may depend on APIs from other plugins, both in React components and as
@@ -273,13 +273,13 @@ dependencies between plugins.
273
273
274
274
## Architecture
275
275
276
- The [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) instances mentioned above
276
+ The [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) instances mentioned above
277
277
provide a point of indirection between consumers and producers of Utility APIs.
278
278
It allows for plugins and components to depend on APIs in a type-safe way,
279
279
without having a direct reference to a concrete implementation of the APIs. The
280
280
Apps are also given a lot of flexibility in what implementations to provide. As
281
281
long as they adhere to the contract established by an
282
- [ ApiRef] ( ../reference/core-plugin-api.apiref.md ) , they are free to choose any
282
+ [ ` ApiRef ` ] ( ../reference/core-plugin-api.apiref.md ) , they are free to choose any
283
283
implementation they want.
284
284
285
285
The figure below shows the relationship between
@@ -304,16 +304,16 @@ The indirection provided by Utility APIs also makes it straightforward to test
304
304
components that depend on APIs, and to provide a standard common development
305
305
environment for plugins. A proper test wrapper with mocked API implementations
306
306
is not yet ready, but it will be provided as a part of
307
- [ @backstage/test-utils ] ( ../reference/test-utils.md ) . It will provide mocked
307
+ [ ` @backstage/test-utils ` ] ( ../reference/test-utils.md ) . It will provide mocked
308
308
variants of APIs, with additional methods for asserting a component's
309
309
interaction with the API.
310
310
311
311
The common development environment for plugins is included in
312
- [ @backstage/dev-utils ] ( ../reference/dev-utils.md ) , where the exported
313
- [ createDevApp] ( ../reference/dev-utils.createdevapp.md ) function creates an
312
+ [ ` @backstage/dev-utils ` ] ( ../reference/dev-utils.md ) , where the exported
313
+ [ ` createDevApp ` ] ( ../reference/dev-utils.createdevapp.md ) function creates an
314
314
application with implementations for all core APIs already present. Contrary to
315
315
the method for wiring up Utility API implementations in an app created with
316
- [ createApp] ( ../reference/app-defaults.createapp.md ) ,
317
- [ createDevApp] ( ../reference/dev-utils.createdevapp.md ) uses automatic dependency
316
+ [ ` createApp ` ] ( ../reference/app-defaults.createapp.md ) ,
317
+ [ ` createDevApp ` ] ( ../reference/dev-utils.createdevapp.md ) uses automatic dependency
318
318
injection. This is to make it possible to replace any API implementation, and
319
319
having that be reflected in dependents of that API.
0 commit comments