@backstage/plugin-techdocs-react 1.1.3-next.2 → 1.1.4-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/index.d.ts +137 -170
- package/package.json +10 -10
- package/alpha/package.json +0 -6
- package/dist/index.alpha.d.ts +0 -363
- package/dist/index.beta.d.ts +0 -363
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @backstage/plugin-techdocs-react
|
|
2
2
|
|
|
3
|
+
## 1.1.4-next.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 928a12a9b3: Internal refactor of `/alpha` exports.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @backstage/core-plugin-api@1.4.1-next.0
|
|
10
|
+
- @backstage/catalog-model@1.2.1-next.0
|
|
11
|
+
- @backstage/config@1.0.6
|
|
12
|
+
- @backstage/core-components@0.12.5-next.0
|
|
13
|
+
- @backstage/version-bridge@1.0.3
|
|
14
|
+
|
|
15
|
+
## 1.1.3
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
- @backstage/core-components@0.12.4
|
|
21
|
+
- @backstage/catalog-model@1.2.0
|
|
22
|
+
- @backstage/core-plugin-api@1.4.0
|
|
23
|
+
- @backstage/config@1.0.6
|
|
24
|
+
- @backstage/version-bridge@1.0.3
|
|
25
|
+
|
|
3
26
|
## 1.1.3-next.2
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,64 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { ApiRef } from '@backstage/core-plugin-api';
|
|
1
|
+
import React, { ComponentType, Dispatch, SetStateAction, ReactNode, PropsWithChildren } from 'react';
|
|
2
|
+
import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
|
|
3
|
+
import { Extension } from '@backstage/core-plugin-api';
|
|
4
|
+
import { Entity, CompoundEntityRef } from '@backstage/catalog-model';
|
|
8
5
|
import { AsyncState } from 'react-use/lib/useAsync';
|
|
9
|
-
import { ComponentType } from 'react';
|
|
10
|
-
import { CompoundEntityRef } from '@backstage/catalog-model';
|
|
11
6
|
import { Config } from '@backstage/config';
|
|
12
|
-
import { Dispatch } from 'react';
|
|
13
|
-
import { Entity } from '@backstage/catalog-model';
|
|
14
|
-
import { Extension } from '@backstage/core-plugin-api';
|
|
15
|
-
import { PropsWithChildren } from 'react';
|
|
16
|
-
import { default as React_2 } from 'react';
|
|
17
|
-
import { ReactNode } from 'react';
|
|
18
|
-
import { SetStateAction } from 'react';
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Create a TechDocs addon overload signature without props.
|
|
22
|
-
* @public
|
|
23
|
-
*/
|
|
24
|
-
export declare function createTechDocsAddonExtension(options: TechDocsAddonOptions): Extension<() => JSX.Element | null>;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Create a TechDocs addon overload signature with props.
|
|
28
|
-
* @public
|
|
29
|
-
*/
|
|
30
|
-
export declare function createTechDocsAddonExtension<TComponentProps>(options: TechDocsAddonOptions<TComponentProps>): Extension<(props: TComponentProps) => JSX.Element | null>;
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Name for the event dispatched when ShadowRoot styles are loaded.
|
|
34
|
-
* @public
|
|
35
|
-
*/
|
|
36
|
-
export declare const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
|
|
37
7
|
|
|
38
8
|
/**
|
|
39
|
-
*
|
|
9
|
+
* Metadata for TechDocs page
|
|
40
10
|
*
|
|
41
11
|
* @public
|
|
42
12
|
*/
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
* @public
|
|
48
|
-
*/
|
|
49
|
-
export declare const TECHDOCS_ADDONS_KEY = "techdocs.addons.addon.v1";
|
|
50
|
-
|
|
13
|
+
declare type TechDocsMetadata = {
|
|
14
|
+
site_name: string;
|
|
15
|
+
site_description: string;
|
|
16
|
+
};
|
|
51
17
|
/**
|
|
52
|
-
*
|
|
18
|
+
* Metadata for TechDocs Entity
|
|
19
|
+
*
|
|
53
20
|
* @public
|
|
54
21
|
*/
|
|
55
|
-
|
|
56
|
-
|
|
22
|
+
declare type TechDocsEntityMetadata = Entity & {
|
|
23
|
+
locationMetadata?: {
|
|
24
|
+
type: string;
|
|
25
|
+
target: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
57
28
|
/**
|
|
58
29
|
* Locations for which TechDocs addons may be declared and rendered.
|
|
59
30
|
* @public
|
|
60
31
|
*/
|
|
61
|
-
|
|
32
|
+
declare const TechDocsAddonLocations: Readonly<{
|
|
62
33
|
/**
|
|
63
34
|
* These addons fill up the header from the right, on the same line as the
|
|
64
35
|
* title.
|
|
@@ -88,90 +59,96 @@ export declare const TechDocsAddonLocations: Readonly<{
|
|
|
88
59
|
*/
|
|
89
60
|
readonly Content: "Content";
|
|
90
61
|
}>;
|
|
91
|
-
|
|
92
62
|
/**
|
|
93
63
|
* Options for creating a TechDocs addon.
|
|
94
64
|
* @public
|
|
95
65
|
*/
|
|
96
|
-
|
|
66
|
+
declare type TechDocsAddonOptions<TAddonProps = {}> = {
|
|
97
67
|
name: string;
|
|
98
68
|
location: keyof typeof TechDocsAddonLocations;
|
|
99
69
|
component: ComponentType<TAddonProps>;
|
|
100
70
|
};
|
|
101
71
|
|
|
72
|
+
/**
|
|
73
|
+
* Key for each addon.
|
|
74
|
+
* @public
|
|
75
|
+
*/
|
|
76
|
+
declare const TECHDOCS_ADDONS_KEY = "techdocs.addons.addon.v1";
|
|
77
|
+
/**
|
|
78
|
+
* Marks the `<TechDocsAddons>` registry component.
|
|
79
|
+
* @public
|
|
80
|
+
*/
|
|
81
|
+
declare const TECHDOCS_ADDONS_WRAPPER_KEY = "techdocs.addons.wrapper.v1";
|
|
102
82
|
/**
|
|
103
83
|
* TechDocs Addon registry.
|
|
104
84
|
* @public
|
|
105
85
|
*/
|
|
106
|
-
|
|
86
|
+
declare const TechDocsAddons: React.ComponentType<React.PropsWithChildren<{}>>;
|
|
87
|
+
/**
|
|
88
|
+
* Create a TechDocs addon overload signature without props.
|
|
89
|
+
* @public
|
|
90
|
+
*/
|
|
91
|
+
declare function createTechDocsAddonExtension(options: TechDocsAddonOptions): Extension<() => JSX.Element | null>;
|
|
92
|
+
/**
|
|
93
|
+
* Create a TechDocs addon overload signature with props.
|
|
94
|
+
* @public
|
|
95
|
+
*/
|
|
96
|
+
declare function createTechDocsAddonExtension<TComponentProps>(options: TechDocsAddonOptions<TComponentProps>): Extension<(props: TComponentProps) => JSX.Element | null>;
|
|
97
|
+
/**
|
|
98
|
+
* hook to use addons in components
|
|
99
|
+
* @public
|
|
100
|
+
*/
|
|
101
|
+
declare const useTechDocsAddons: () => {
|
|
102
|
+
renderComponentByName: (name: string) => JSX.Element | null;
|
|
103
|
+
renderComponentsByLocation: (location: keyof typeof TechDocsAddonLocations) => (JSX.Element | null)[] | null;
|
|
104
|
+
};
|
|
107
105
|
|
|
108
106
|
/**
|
|
109
107
|
* API to talk to techdocs-backend.
|
|
110
108
|
*
|
|
111
109
|
* @public
|
|
112
110
|
*/
|
|
113
|
-
|
|
111
|
+
interface TechDocsApi {
|
|
114
112
|
getApiOrigin(): Promise<string>;
|
|
115
113
|
getTechDocsMetadata(entityId: CompoundEntityRef): Promise<TechDocsMetadata>;
|
|
116
114
|
getEntityMetadata(entityId: CompoundEntityRef): Promise<TechDocsEntityMetadata>;
|
|
117
115
|
}
|
|
118
|
-
|
|
119
116
|
/**
|
|
120
117
|
* Utility API reference for the {@link TechDocsApi}.
|
|
121
118
|
*
|
|
122
119
|
* @public
|
|
123
120
|
*/
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Metadata for TechDocs Entity
|
|
128
|
-
*
|
|
129
|
-
* @public
|
|
130
|
-
*/
|
|
131
|
-
export declare type TechDocsEntityMetadata = Entity & {
|
|
132
|
-
locationMetadata?: {
|
|
133
|
-
type: string;
|
|
134
|
-
target: string;
|
|
135
|
-
};
|
|
136
|
-
};
|
|
137
|
-
|
|
121
|
+
declare const techdocsApiRef: _backstage_core_plugin_api.ApiRef<TechDocsApi>;
|
|
138
122
|
/**
|
|
139
|
-
*
|
|
123
|
+
* The outcome of a docs sync operation.
|
|
140
124
|
*
|
|
141
125
|
* @public
|
|
142
126
|
*/
|
|
143
|
-
|
|
144
|
-
site_name: string;
|
|
145
|
-
site_description: string;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* A context to store the reader page state
|
|
150
|
-
* @public
|
|
151
|
-
*/
|
|
152
|
-
export declare const TechDocsReaderPageProvider: React_2.MemoExoticComponent<({ entityRef, children }: TechDocsReaderPageProviderProps) => JSX.Element>;
|
|
153
|
-
|
|
127
|
+
declare type SyncResult = 'cached' | 'updated';
|
|
154
128
|
/**
|
|
155
|
-
*
|
|
129
|
+
* API which talks to TechDocs storage to fetch files to render.
|
|
156
130
|
*
|
|
157
131
|
* @public
|
|
158
132
|
*/
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
133
|
+
interface TechDocsStorageApi {
|
|
134
|
+
getApiOrigin(): Promise<string>;
|
|
135
|
+
getStorageUrl(): Promise<string>;
|
|
136
|
+
getBuilder(): Promise<string>;
|
|
137
|
+
getEntityDocs(entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
138
|
+
syncEntityDocs(entityId: CompoundEntityRef, logHandler?: (line: string) => void): Promise<SyncResult>;
|
|
139
|
+
getBaseUrl(oldBaseUrl: string, entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
140
|
+
}
|
|
164
141
|
/**
|
|
165
|
-
*
|
|
142
|
+
* Utility API reference for the {@link TechDocsStorageApi}.
|
|
166
143
|
*
|
|
167
144
|
* @public
|
|
168
145
|
*/
|
|
169
|
-
|
|
146
|
+
declare const techdocsStorageApiRef: _backstage_core_plugin_api.ApiRef<TechDocsStorageApi>;
|
|
170
147
|
|
|
171
148
|
/**
|
|
172
149
|
* @public type for the value of the TechDocsReaderPageContext
|
|
173
150
|
*/
|
|
174
|
-
|
|
151
|
+
declare type TechDocsReaderPageValue = {
|
|
175
152
|
metadata: AsyncState<TechDocsMetadata>;
|
|
176
153
|
entityRef: CompoundEntityRef;
|
|
177
154
|
entityMetadata: AsyncState<TechDocsEntityMetadata>;
|
|
@@ -186,36 +163,63 @@ export declare type TechDocsReaderPageValue = {
|
|
|
186
163
|
*/
|
|
187
164
|
onReady?: () => void;
|
|
188
165
|
};
|
|
189
|
-
|
|
190
166
|
/**
|
|
191
|
-
*
|
|
167
|
+
* render function for {@link TechDocsReaderPageProvider}
|
|
192
168
|
*
|
|
193
|
-
* @
|
|
194
|
-
|
|
195
|
-
|
|
169
|
+
* @public
|
|
170
|
+
*/
|
|
171
|
+
declare type TechDocsReaderPageProviderRenderFunction = (value: TechDocsReaderPageValue) => JSX.Element;
|
|
172
|
+
/**
|
|
173
|
+
* Props for {@link TechDocsReaderPageProvider}
|
|
174
|
+
*
|
|
175
|
+
* @public
|
|
176
|
+
*/
|
|
177
|
+
declare type TechDocsReaderPageProviderProps = {
|
|
178
|
+
entityRef: CompoundEntityRef;
|
|
179
|
+
children: TechDocsReaderPageProviderRenderFunction | ReactNode;
|
|
180
|
+
};
|
|
181
|
+
/**
|
|
182
|
+
* A context to store the reader page state
|
|
183
|
+
* @public
|
|
184
|
+
*/
|
|
185
|
+
declare const TechDocsReaderPageProvider: React.MemoExoticComponent<({ entityRef, children }: TechDocsReaderPageProviderProps) => JSX.Element>;
|
|
186
|
+
/**
|
|
187
|
+
* Hook used to get access to shared state between reader page components.
|
|
188
|
+
* @public
|
|
189
|
+
*/
|
|
190
|
+
declare const useTechDocsReaderPage: () => TechDocsReaderPageValue;
|
|
191
|
+
|
|
192
|
+
/**
|
|
193
|
+
* Name for the event dispatched when ShadowRoot styles are loaded.
|
|
194
|
+
* @public
|
|
195
|
+
*/
|
|
196
|
+
declare const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
|
|
197
|
+
/**
|
|
198
|
+
* Returns the style's loading state.
|
|
196
199
|
*
|
|
197
200
|
* @example
|
|
198
|
-
* Here
|
|
199
|
-
|
|
201
|
+
* Here's an example that updates the sidebar position only after styles are calculated:
|
|
202
|
+
* ```jsx
|
|
200
203
|
* import {
|
|
201
204
|
* TechDocsShadowDom,
|
|
202
|
-
*
|
|
205
|
+
* useShadowDomStylesLoading,
|
|
203
206
|
* } from '@backstage/plugin-techdocs-react';
|
|
204
207
|
*
|
|
205
|
-
* export const TechDocsReaderPageContent = (
|
|
208
|
+
* export const TechDocsReaderPageContent = () => {
|
|
206
209
|
* // ...
|
|
207
210
|
* const dom = useTechDocsReaderDom(entity);
|
|
211
|
+
* const isStyleLoading = useShadowDomStylesLoading(dom);
|
|
208
212
|
*
|
|
209
|
-
*
|
|
210
|
-
*
|
|
211
|
-
* // ...
|
|
212
|
-
* };
|
|
213
|
-
* dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
214
|
-
* return () => {
|
|
215
|
-
* dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
216
|
-
* };
|
|
213
|
+
* const updateSidebarPosition = useCallback(() => {
|
|
214
|
+
* //...
|
|
217
215
|
* }, [dom]);
|
|
218
216
|
*
|
|
217
|
+
* useEffect(() => {
|
|
218
|
+
* if (!isStyleLoading) {
|
|
219
|
+
* updateSidebarPosition();
|
|
220
|
+
* }
|
|
221
|
+
* }, [isStyleLoading, updateSidebarPosition]);
|
|
222
|
+
*
|
|
219
223
|
* const handleDomAppend = useCallback(
|
|
220
224
|
* (newShadowRoot: ShadowRoot) => {
|
|
221
225
|
* setShadowRoot(newShadowRoot);
|
|
@@ -227,11 +231,11 @@ export declare type TechDocsReaderPageValue = {
|
|
|
227
231
|
* };
|
|
228
232
|
* ```
|
|
229
233
|
*
|
|
230
|
-
* @param
|
|
234
|
+
* @param element - which is the ShadowRoot tree.
|
|
235
|
+
* @returns a boolean value, true if styles are being loaded.
|
|
231
236
|
* @public
|
|
232
237
|
*/
|
|
233
|
-
|
|
234
|
-
|
|
238
|
+
declare const useShadowDomStylesLoading: (element: Element | null) => boolean;
|
|
235
239
|
/**
|
|
236
240
|
* Props for {@link TechDocsShadowDom}.
|
|
237
241
|
*
|
|
@@ -242,7 +246,7 @@ export declare const TechDocsShadowDom: ({ element, onAppend, children, }: TechD
|
|
|
242
246
|
*
|
|
243
247
|
* @public
|
|
244
248
|
*/
|
|
245
|
-
|
|
249
|
+
declare type TechDocsShadowDomProps = PropsWithChildren<{
|
|
246
250
|
/**
|
|
247
251
|
* Element tree that is appended to ShadowRoot.
|
|
248
252
|
*/
|
|
@@ -252,60 +256,34 @@ export declare type TechDocsShadowDomProps = PropsWithChildren<{
|
|
|
252
256
|
*/
|
|
253
257
|
onAppend?: (shadowRoot: ShadowRoot) => void;
|
|
254
258
|
}>;
|
|
255
|
-
|
|
256
259
|
/**
|
|
257
|
-
*
|
|
258
|
-
*
|
|
259
|
-
* @public
|
|
260
|
-
*/
|
|
261
|
-
export declare interface TechDocsStorageApi {
|
|
262
|
-
getApiOrigin(): Promise<string>;
|
|
263
|
-
getStorageUrl(): Promise<string>;
|
|
264
|
-
getBuilder(): Promise<string>;
|
|
265
|
-
getEntityDocs(entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
266
|
-
syncEntityDocs(entityId: CompoundEntityRef, logHandler?: (line: string) => void): Promise<SyncResult>;
|
|
267
|
-
getBaseUrl(oldBaseUrl: string, entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Utility API reference for the {@link TechDocsStorageApi}.
|
|
272
|
-
*
|
|
273
|
-
* @public
|
|
274
|
-
*/
|
|
275
|
-
export declare const techdocsStorageApiRef: ApiRef<TechDocsStorageApi>;
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Lower-case entity triplets by default, but allow override.
|
|
260
|
+
* Renders a tree of elements in a Shadow DOM.
|
|
279
261
|
*
|
|
280
|
-
* @
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Returns the style's loading state.
|
|
262
|
+
* @remarks
|
|
263
|
+
* Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times,
|
|
264
|
+
* so if you want to know when Shadow DOM styles are computed, you can listen for the "TECH_DOCS_SHADOW_DOM_STYLE_LOAD" event dispatched by the element tree.
|
|
286
265
|
*
|
|
287
266
|
* @example
|
|
288
|
-
* Here
|
|
289
|
-
|
|
267
|
+
* Here is an example using this component and also listening for styles loaded event:
|
|
268
|
+
*```jsx
|
|
290
269
|
* import {
|
|
291
270
|
* TechDocsShadowDom,
|
|
292
|
-
*
|
|
271
|
+
* SHADOW_DOM_STYLE_LOAD_EVENT,
|
|
293
272
|
* } from '@backstage/plugin-techdocs-react';
|
|
294
273
|
*
|
|
295
|
-
* export const TechDocsReaderPageContent = () => {
|
|
274
|
+
* export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {
|
|
296
275
|
* // ...
|
|
297
276
|
* const dom = useTechDocsReaderDom(entity);
|
|
298
|
-
* const isStyleLoading = useShadowDomStylesLoading(dom);
|
|
299
|
-
*
|
|
300
|
-
* const updateSidebarPosition = useCallback(() => {
|
|
301
|
-
* //...
|
|
302
|
-
* }, [dom]);
|
|
303
277
|
*
|
|
304
278
|
* useEffect(() => {
|
|
305
|
-
*
|
|
306
|
-
*
|
|
307
|
-
* }
|
|
308
|
-
*
|
|
279
|
+
* const updateSidebarPosition = () => {
|
|
280
|
+
* // ...
|
|
281
|
+
* };
|
|
282
|
+
* dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
283
|
+
* return () => {
|
|
284
|
+
* dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
285
|
+
* };
|
|
286
|
+
* }, [dom]);
|
|
309
287
|
*
|
|
310
288
|
* const handleDomAppend = useCallback(
|
|
311
289
|
* (newShadowRoot: ShadowRoot) => {
|
|
@@ -318,46 +296,35 @@ export declare function toLowercaseEntityRefMaybe(entityRef: CompoundEntityRef,
|
|
|
318
296
|
* };
|
|
319
297
|
* ```
|
|
320
298
|
*
|
|
321
|
-
* @param
|
|
322
|
-
* @returns a boolean value, true if styles are being loaded.
|
|
299
|
+
* @param props - see {@link TechDocsShadowDomProps}.
|
|
323
300
|
* @public
|
|
324
301
|
*/
|
|
325
|
-
|
|
302
|
+
declare const TechDocsShadowDom: ({ element, onAppend, children, }: TechDocsShadowDomProps) => JSX.Element;
|
|
326
303
|
|
|
327
304
|
/**
|
|
328
305
|
* Hook for use within TechDocs addons that provides access to the underlying
|
|
329
306
|
* shadow root of the current page, allowing the DOM within to be mutated.
|
|
330
307
|
* @public
|
|
331
308
|
*/
|
|
332
|
-
|
|
333
|
-
|
|
309
|
+
declare const useShadowRoot: () => ShadowRoot | undefined;
|
|
334
310
|
/**
|
|
335
311
|
* Convenience hook for use within TechDocs addons that provides access to
|
|
336
312
|
* elements that match a given selector within the shadow root.
|
|
337
313
|
*
|
|
338
314
|
* @public
|
|
339
315
|
*/
|
|
340
|
-
|
|
341
|
-
|
|
316
|
+
declare const useShadowRootElements: <TReturnedElement extends HTMLElement = HTMLElement>(selectors: string[]) => TReturnedElement[];
|
|
342
317
|
/**
|
|
343
318
|
* Hook for retrieving a selection within the ShadowRoot.
|
|
344
319
|
* @public
|
|
345
320
|
*/
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* hook to use addons in components
|
|
350
|
-
* @public
|
|
351
|
-
*/
|
|
352
|
-
export declare const useTechDocsAddons: () => {
|
|
353
|
-
renderComponentByName: (name: string) => JSX.Element | null;
|
|
354
|
-
renderComponentsByLocation: (location: keyof typeof TechDocsAddonLocations) => (JSX.Element | null)[] | null;
|
|
355
|
-
};
|
|
321
|
+
declare const useShadowRootSelection: (waitMillis?: number) => Selection | null;
|
|
356
322
|
|
|
357
323
|
/**
|
|
358
|
-
*
|
|
324
|
+
* Lower-case entity triplets by default, but allow override.
|
|
325
|
+
*
|
|
359
326
|
* @public
|
|
360
327
|
*/
|
|
361
|
-
|
|
328
|
+
declare function toLowercaseEntityRefMaybe(entityRef: CompoundEntityRef, config: Config): CompoundEntityRef;
|
|
362
329
|
|
|
363
|
-
export { }
|
|
330
|
+
export { SHADOW_DOM_STYLE_LOAD_EVENT, SyncResult, TECHDOCS_ADDONS_KEY, TECHDOCS_ADDONS_WRAPPER_KEY, TechDocsAddonLocations, TechDocsAddonOptions, TechDocsAddons, TechDocsApi, TechDocsEntityMetadata, TechDocsMetadata, TechDocsReaderPageProvider, TechDocsReaderPageProviderProps, TechDocsReaderPageProviderRenderFunction, TechDocsReaderPageValue, TechDocsShadowDom, TechDocsShadowDomProps, TechDocsStorageApi, createTechDocsAddonExtension, techdocsApiRef, techdocsStorageApiRef, toLowercaseEntityRefMaybe, useShadowDomStylesLoading, useShadowRoot, useShadowRootElements, useShadowRootSelection, useTechDocsAddons, useTechDocsReaderPage };
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/plugin-techdocs-react",
|
|
3
3
|
"description": "Shared frontend utilities for TechDocs and Addons",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.4-next.0",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
|
-
"alphaTypes": "dist/index.alpha.d.ts",
|
|
8
7
|
"main": "dist/index.esm.js",
|
|
9
8
|
"types": "dist/index.d.ts"
|
|
10
9
|
},
|
|
@@ -25,7 +24,7 @@
|
|
|
25
24
|
"main": "dist/index.esm.js",
|
|
26
25
|
"types": "dist/index.d.ts",
|
|
27
26
|
"scripts": {
|
|
28
|
-
"build": "backstage-cli package build
|
|
27
|
+
"build": "backstage-cli package build",
|
|
29
28
|
"lint": "backstage-cli package lint",
|
|
30
29
|
"test": "backstage-cli package test",
|
|
31
30
|
"prepack": "backstage-cli package prepack",
|
|
@@ -34,10 +33,10 @@
|
|
|
34
33
|
"start": "backstage-cli package start"
|
|
35
34
|
},
|
|
36
35
|
"dependencies": {
|
|
37
|
-
"@backstage/catalog-model": "^1.2.
|
|
36
|
+
"@backstage/catalog-model": "^1.2.1-next.0",
|
|
38
37
|
"@backstage/config": "^1.0.6",
|
|
39
|
-
"@backstage/core-components": "^0.12.
|
|
40
|
-
"@backstage/core-plugin-api": "^1.
|
|
38
|
+
"@backstage/core-components": "^0.12.5-next.0",
|
|
39
|
+
"@backstage/core-plugin-api": "^1.4.1-next.0",
|
|
41
40
|
"@backstage/version-bridge": "^1.0.3",
|
|
42
41
|
"@material-ui/core": "^4.12.2",
|
|
43
42
|
"@material-ui/lab": "4.0.0-alpha.57",
|
|
@@ -53,9 +52,9 @@
|
|
|
53
52
|
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
|
|
54
53
|
},
|
|
55
54
|
"devDependencies": {
|
|
56
|
-
"@backstage/cli": "^0.22.
|
|
57
|
-
"@backstage/test-utils": "^1.2.
|
|
58
|
-
"@backstage/theme": "^0.2.
|
|
55
|
+
"@backstage/cli": "^0.22.4-next.0",
|
|
56
|
+
"@backstage/test-utils": "^1.2.6-next.0",
|
|
57
|
+
"@backstage/theme": "^0.2.17",
|
|
59
58
|
"@testing-library/jest-dom": "^5.10.1",
|
|
60
59
|
"@testing-library/react": "^12.1.3",
|
|
61
60
|
"@testing-library/react-hooks": "^8.0.0"
|
|
@@ -63,5 +62,6 @@
|
|
|
63
62
|
"files": [
|
|
64
63
|
"alpha",
|
|
65
64
|
"dist"
|
|
66
|
-
]
|
|
65
|
+
],
|
|
66
|
+
"module": "./dist/index.esm.js"
|
|
67
67
|
}
|
package/alpha/package.json
DELETED
package/dist/index.alpha.d.ts
DELETED
|
@@ -1,363 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Package encapsulating utilities to be shared by frontend TechDocs plugins.
|
|
3
|
-
*
|
|
4
|
-
* @packageDocumentation
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { ApiRef } from '@backstage/core-plugin-api';
|
|
8
|
-
import { AsyncState } from 'react-use/lib/useAsync';
|
|
9
|
-
import { ComponentType } from 'react';
|
|
10
|
-
import { CompoundEntityRef } from '@backstage/catalog-model';
|
|
11
|
-
import { Config } from '@backstage/config';
|
|
12
|
-
import { Dispatch } from 'react';
|
|
13
|
-
import { Entity } from '@backstage/catalog-model';
|
|
14
|
-
import { Extension } from '@backstage/core-plugin-api';
|
|
15
|
-
import { PropsWithChildren } from 'react';
|
|
16
|
-
import { default as React_2 } from 'react';
|
|
17
|
-
import { ReactNode } from 'react';
|
|
18
|
-
import { SetStateAction } from 'react';
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Create a TechDocs addon overload signature without props.
|
|
22
|
-
* @public
|
|
23
|
-
*/
|
|
24
|
-
export declare function createTechDocsAddonExtension(options: TechDocsAddonOptions): Extension<() => JSX.Element | null>;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Create a TechDocs addon overload signature with props.
|
|
28
|
-
* @public
|
|
29
|
-
*/
|
|
30
|
-
export declare function createTechDocsAddonExtension<TComponentProps>(options: TechDocsAddonOptions<TComponentProps>): Extension<(props: TComponentProps) => JSX.Element | null>;
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Name for the event dispatched when ShadowRoot styles are loaded.
|
|
34
|
-
* @public
|
|
35
|
-
*/
|
|
36
|
-
export declare const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* The outcome of a docs sync operation.
|
|
40
|
-
*
|
|
41
|
-
* @public
|
|
42
|
-
*/
|
|
43
|
-
export declare type SyncResult = 'cached' | 'updated';
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Key for each addon.
|
|
47
|
-
* @public
|
|
48
|
-
*/
|
|
49
|
-
export declare const TECHDOCS_ADDONS_KEY = "techdocs.addons.addon.v1";
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Marks the `<TechDocsAddons>` registry component.
|
|
53
|
-
* @public
|
|
54
|
-
*/
|
|
55
|
-
export declare const TECHDOCS_ADDONS_WRAPPER_KEY = "techdocs.addons.wrapper.v1";
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Locations for which TechDocs addons may be declared and rendered.
|
|
59
|
-
* @public
|
|
60
|
-
*/
|
|
61
|
-
export declare const TechDocsAddonLocations: Readonly<{
|
|
62
|
-
/**
|
|
63
|
-
* These addons fill up the header from the right, on the same line as the
|
|
64
|
-
* title.
|
|
65
|
-
*/
|
|
66
|
-
readonly Header: "Header";
|
|
67
|
-
/**
|
|
68
|
-
* These addons appear below the header and above all content; tooling addons
|
|
69
|
-
* can be inserted for convenience.
|
|
70
|
-
*/
|
|
71
|
-
readonly Subheader: "Subheader";
|
|
72
|
-
/**
|
|
73
|
-
* These addons are items added to the settings menu list and are designed to make
|
|
74
|
-
* the reader experience customizable, for example accessibility options
|
|
75
|
-
*/
|
|
76
|
-
readonly Settings: "Settings";
|
|
77
|
-
/**
|
|
78
|
-
* These addons appear left of the content and above the navigation.
|
|
79
|
-
*/
|
|
80
|
-
readonly PrimarySidebar: "PrimarySidebar";
|
|
81
|
-
/**
|
|
82
|
-
* These addons appear right of the content and above the table of contents.
|
|
83
|
-
*/
|
|
84
|
-
readonly SecondarySidebar: "SecondarySidebar";
|
|
85
|
-
/**
|
|
86
|
-
* A virtual location which allows mutation of all content within the shadow
|
|
87
|
-
* root by transforming DOM nodes. These addons should return null on render.
|
|
88
|
-
*/
|
|
89
|
-
readonly Content: "Content";
|
|
90
|
-
}>;
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Options for creating a TechDocs addon.
|
|
94
|
-
* @public
|
|
95
|
-
*/
|
|
96
|
-
export declare type TechDocsAddonOptions<TAddonProps = {}> = {
|
|
97
|
-
name: string;
|
|
98
|
-
location: keyof typeof TechDocsAddonLocations;
|
|
99
|
-
component: ComponentType<TAddonProps>;
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* TechDocs Addon registry.
|
|
104
|
-
* @public
|
|
105
|
-
*/
|
|
106
|
-
export declare const TechDocsAddons: React_2.ComponentType<React_2.PropsWithChildren<{}>>;
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* API to talk to techdocs-backend.
|
|
110
|
-
*
|
|
111
|
-
* @public
|
|
112
|
-
*/
|
|
113
|
-
export declare interface TechDocsApi {
|
|
114
|
-
getApiOrigin(): Promise<string>;
|
|
115
|
-
getTechDocsMetadata(entityId: CompoundEntityRef): Promise<TechDocsMetadata>;
|
|
116
|
-
getEntityMetadata(entityId: CompoundEntityRef): Promise<TechDocsEntityMetadata>;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Utility API reference for the {@link TechDocsApi}.
|
|
121
|
-
*
|
|
122
|
-
* @public
|
|
123
|
-
*/
|
|
124
|
-
export declare const techdocsApiRef: ApiRef<TechDocsApi>;
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Metadata for TechDocs Entity
|
|
128
|
-
*
|
|
129
|
-
* @public
|
|
130
|
-
*/
|
|
131
|
-
export declare type TechDocsEntityMetadata = Entity & {
|
|
132
|
-
locationMetadata?: {
|
|
133
|
-
type: string;
|
|
134
|
-
target: string;
|
|
135
|
-
};
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Metadata for TechDocs page
|
|
140
|
-
*
|
|
141
|
-
* @public
|
|
142
|
-
*/
|
|
143
|
-
export declare type TechDocsMetadata = {
|
|
144
|
-
site_name: string;
|
|
145
|
-
site_description: string;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* A context to store the reader page state
|
|
150
|
-
* @public
|
|
151
|
-
*/
|
|
152
|
-
export declare const TechDocsReaderPageProvider: React_2.MemoExoticComponent<({ entityRef, children }: TechDocsReaderPageProviderProps) => JSX.Element>;
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Props for {@link TechDocsReaderPageProvider}
|
|
156
|
-
*
|
|
157
|
-
* @public
|
|
158
|
-
*/
|
|
159
|
-
export declare type TechDocsReaderPageProviderProps = {
|
|
160
|
-
entityRef: CompoundEntityRef;
|
|
161
|
-
children: TechDocsReaderPageProviderRenderFunction | ReactNode;
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* render function for {@link TechDocsReaderPageProvider}
|
|
166
|
-
*
|
|
167
|
-
* @public
|
|
168
|
-
*/
|
|
169
|
-
export declare type TechDocsReaderPageProviderRenderFunction = (value: TechDocsReaderPageValue) => JSX.Element;
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* @public type for the value of the TechDocsReaderPageContext
|
|
173
|
-
*/
|
|
174
|
-
export declare type TechDocsReaderPageValue = {
|
|
175
|
-
metadata: AsyncState<TechDocsMetadata>;
|
|
176
|
-
entityRef: CompoundEntityRef;
|
|
177
|
-
entityMetadata: AsyncState<TechDocsEntityMetadata>;
|
|
178
|
-
shadowRoot?: ShadowRoot;
|
|
179
|
-
setShadowRoot: Dispatch<SetStateAction<ShadowRoot | undefined>>;
|
|
180
|
-
title: string;
|
|
181
|
-
setTitle: Dispatch<SetStateAction<string>>;
|
|
182
|
-
subtitle: string;
|
|
183
|
-
setSubtitle: Dispatch<SetStateAction<string>>;
|
|
184
|
-
/**
|
|
185
|
-
* @deprecated property can be passed down directly to the `TechDocsReaderPageContent` instead.
|
|
186
|
-
*/
|
|
187
|
-
onReady?: () => void;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Renders a tree of elements in a Shadow DOM.
|
|
192
|
-
*
|
|
193
|
-
* @remarks
|
|
194
|
-
* Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times,
|
|
195
|
-
* so if you want to know when Shadow DOM styles are computed, you can listen for the "TECH_DOCS_SHADOW_DOM_STYLE_LOAD" event dispatched by the element tree.
|
|
196
|
-
*
|
|
197
|
-
* @example
|
|
198
|
-
* Here is an example using this component and also listening for styles loaded event:
|
|
199
|
-
*```jsx
|
|
200
|
-
* import {
|
|
201
|
-
* TechDocsShadowDom,
|
|
202
|
-
* SHADOW_DOM_STYLE_LOAD_EVENT,
|
|
203
|
-
* } from '@backstage/plugin-techdocs-react';
|
|
204
|
-
*
|
|
205
|
-
* export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {
|
|
206
|
-
* // ...
|
|
207
|
-
* const dom = useTechDocsReaderDom(entity);
|
|
208
|
-
*
|
|
209
|
-
* useEffect(() => {
|
|
210
|
-
* const updateSidebarPosition = () => {
|
|
211
|
-
* // ...
|
|
212
|
-
* };
|
|
213
|
-
* dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
214
|
-
* return () => {
|
|
215
|
-
* dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
216
|
-
* };
|
|
217
|
-
* }, [dom]);
|
|
218
|
-
*
|
|
219
|
-
* const handleDomAppend = useCallback(
|
|
220
|
-
* (newShadowRoot: ShadowRoot) => {
|
|
221
|
-
* setShadowRoot(newShadowRoot);
|
|
222
|
-
* },
|
|
223
|
-
* [setShadowRoot],
|
|
224
|
-
* );
|
|
225
|
-
*
|
|
226
|
-
* return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
|
|
227
|
-
* };
|
|
228
|
-
* ```
|
|
229
|
-
*
|
|
230
|
-
* @param props - see {@link TechDocsShadowDomProps}.
|
|
231
|
-
* @public
|
|
232
|
-
*/
|
|
233
|
-
export declare const TechDocsShadowDom: ({ element, onAppend, children, }: TechDocsShadowDomProps) => JSX.Element;
|
|
234
|
-
|
|
235
|
-
/**
|
|
236
|
-
* Props for {@link TechDocsShadowDom}.
|
|
237
|
-
*
|
|
238
|
-
* @remarks
|
|
239
|
-
* If you want to use portals to render Material UI components in the Shadow DOM,
|
|
240
|
-
* you must render these portals as children because this component wraps its children in a Material UI StylesProvider
|
|
241
|
-
* to ensure that Material UI styles are applied.
|
|
242
|
-
*
|
|
243
|
-
* @public
|
|
244
|
-
*/
|
|
245
|
-
export declare type TechDocsShadowDomProps = PropsWithChildren<{
|
|
246
|
-
/**
|
|
247
|
-
* Element tree that is appended to ShadowRoot.
|
|
248
|
-
*/
|
|
249
|
-
element: Element;
|
|
250
|
-
/**
|
|
251
|
-
* Callback called when the element tree is appended in ShadowRoot.
|
|
252
|
-
*/
|
|
253
|
-
onAppend?: (shadowRoot: ShadowRoot) => void;
|
|
254
|
-
}>;
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* API which talks to TechDocs storage to fetch files to render.
|
|
258
|
-
*
|
|
259
|
-
* @public
|
|
260
|
-
*/
|
|
261
|
-
export declare interface TechDocsStorageApi {
|
|
262
|
-
getApiOrigin(): Promise<string>;
|
|
263
|
-
getStorageUrl(): Promise<string>;
|
|
264
|
-
getBuilder(): Promise<string>;
|
|
265
|
-
getEntityDocs(entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
266
|
-
syncEntityDocs(entityId: CompoundEntityRef, logHandler?: (line: string) => void): Promise<SyncResult>;
|
|
267
|
-
getBaseUrl(oldBaseUrl: string, entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Utility API reference for the {@link TechDocsStorageApi}.
|
|
272
|
-
*
|
|
273
|
-
* @public
|
|
274
|
-
*/
|
|
275
|
-
export declare const techdocsStorageApiRef: ApiRef<TechDocsStorageApi>;
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Lower-case entity triplets by default, but allow override.
|
|
279
|
-
*
|
|
280
|
-
* @public
|
|
281
|
-
*/
|
|
282
|
-
export declare function toLowercaseEntityRefMaybe(entityRef: CompoundEntityRef, config: Config): CompoundEntityRef;
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Returns the style's loading state.
|
|
286
|
-
*
|
|
287
|
-
* @example
|
|
288
|
-
* Here's an example that updates the sidebar position only after styles are calculated:
|
|
289
|
-
* ```jsx
|
|
290
|
-
* import {
|
|
291
|
-
* TechDocsShadowDom,
|
|
292
|
-
* useShadowDomStylesLoading,
|
|
293
|
-
* } from '@backstage/plugin-techdocs-react';
|
|
294
|
-
*
|
|
295
|
-
* export const TechDocsReaderPageContent = () => {
|
|
296
|
-
* // ...
|
|
297
|
-
* const dom = useTechDocsReaderDom(entity);
|
|
298
|
-
* const isStyleLoading = useShadowDomStylesLoading(dom);
|
|
299
|
-
*
|
|
300
|
-
* const updateSidebarPosition = useCallback(() => {
|
|
301
|
-
* //...
|
|
302
|
-
* }, [dom]);
|
|
303
|
-
*
|
|
304
|
-
* useEffect(() => {
|
|
305
|
-
* if (!isStyleLoading) {
|
|
306
|
-
* updateSidebarPosition();
|
|
307
|
-
* }
|
|
308
|
-
* }, [isStyleLoading, updateSidebarPosition]);
|
|
309
|
-
*
|
|
310
|
-
* const handleDomAppend = useCallback(
|
|
311
|
-
* (newShadowRoot: ShadowRoot) => {
|
|
312
|
-
* setShadowRoot(newShadowRoot);
|
|
313
|
-
* },
|
|
314
|
-
* [setShadowRoot],
|
|
315
|
-
* );
|
|
316
|
-
*
|
|
317
|
-
* return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
|
|
318
|
-
* };
|
|
319
|
-
* ```
|
|
320
|
-
*
|
|
321
|
-
* @param element - which is the ShadowRoot tree.
|
|
322
|
-
* @returns a boolean value, true if styles are being loaded.
|
|
323
|
-
* @public
|
|
324
|
-
*/
|
|
325
|
-
export declare const useShadowDomStylesLoading: (element: Element | null) => boolean;
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* Hook for use within TechDocs addons that provides access to the underlying
|
|
329
|
-
* shadow root of the current page, allowing the DOM within to be mutated.
|
|
330
|
-
* @public
|
|
331
|
-
*/
|
|
332
|
-
export declare const useShadowRoot: () => ShadowRoot | undefined;
|
|
333
|
-
|
|
334
|
-
/**
|
|
335
|
-
* Convenience hook for use within TechDocs addons that provides access to
|
|
336
|
-
* elements that match a given selector within the shadow root.
|
|
337
|
-
*
|
|
338
|
-
* @public
|
|
339
|
-
*/
|
|
340
|
-
export declare const useShadowRootElements: <TReturnedElement extends HTMLElement = HTMLElement>(selectors: string[]) => TReturnedElement[];
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Hook for retrieving a selection within the ShadowRoot.
|
|
344
|
-
* @public
|
|
345
|
-
*/
|
|
346
|
-
export declare const useShadowRootSelection: (waitMillis?: number) => Selection | null;
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* hook to use addons in components
|
|
350
|
-
* @public
|
|
351
|
-
*/
|
|
352
|
-
export declare const useTechDocsAddons: () => {
|
|
353
|
-
renderComponentByName: (name: string) => JSX.Element | null;
|
|
354
|
-
renderComponentsByLocation: (location: keyof typeof TechDocsAddonLocations) => (JSX.Element | null)[] | null;
|
|
355
|
-
};
|
|
356
|
-
|
|
357
|
-
/**
|
|
358
|
-
* Hook used to get access to shared state between reader page components.
|
|
359
|
-
* @public
|
|
360
|
-
*/
|
|
361
|
-
export declare const useTechDocsReaderPage: () => TechDocsReaderPageValue;
|
|
362
|
-
|
|
363
|
-
export { }
|
package/dist/index.beta.d.ts
DELETED
|
@@ -1,363 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Package encapsulating utilities to be shared by frontend TechDocs plugins.
|
|
3
|
-
*
|
|
4
|
-
* @packageDocumentation
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { ApiRef } from '@backstage/core-plugin-api';
|
|
8
|
-
import { AsyncState } from 'react-use/lib/useAsync';
|
|
9
|
-
import { ComponentType } from 'react';
|
|
10
|
-
import { CompoundEntityRef } from '@backstage/catalog-model';
|
|
11
|
-
import { Config } from '@backstage/config';
|
|
12
|
-
import { Dispatch } from 'react';
|
|
13
|
-
import { Entity } from '@backstage/catalog-model';
|
|
14
|
-
import { Extension } from '@backstage/core-plugin-api';
|
|
15
|
-
import { PropsWithChildren } from 'react';
|
|
16
|
-
import { default as React_2 } from 'react';
|
|
17
|
-
import { ReactNode } from 'react';
|
|
18
|
-
import { SetStateAction } from 'react';
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Create a TechDocs addon overload signature without props.
|
|
22
|
-
* @public
|
|
23
|
-
*/
|
|
24
|
-
export declare function createTechDocsAddonExtension(options: TechDocsAddonOptions): Extension<() => JSX.Element | null>;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Create a TechDocs addon overload signature with props.
|
|
28
|
-
* @public
|
|
29
|
-
*/
|
|
30
|
-
export declare function createTechDocsAddonExtension<TComponentProps>(options: TechDocsAddonOptions<TComponentProps>): Extension<(props: TComponentProps) => JSX.Element | null>;
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Name for the event dispatched when ShadowRoot styles are loaded.
|
|
34
|
-
* @public
|
|
35
|
-
*/
|
|
36
|
-
export declare const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* The outcome of a docs sync operation.
|
|
40
|
-
*
|
|
41
|
-
* @public
|
|
42
|
-
*/
|
|
43
|
-
export declare type SyncResult = 'cached' | 'updated';
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Key for each addon.
|
|
47
|
-
* @public
|
|
48
|
-
*/
|
|
49
|
-
export declare const TECHDOCS_ADDONS_KEY = "techdocs.addons.addon.v1";
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Marks the `<TechDocsAddons>` registry component.
|
|
53
|
-
* @public
|
|
54
|
-
*/
|
|
55
|
-
export declare const TECHDOCS_ADDONS_WRAPPER_KEY = "techdocs.addons.wrapper.v1";
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Locations for which TechDocs addons may be declared and rendered.
|
|
59
|
-
* @public
|
|
60
|
-
*/
|
|
61
|
-
export declare const TechDocsAddonLocations: Readonly<{
|
|
62
|
-
/**
|
|
63
|
-
* These addons fill up the header from the right, on the same line as the
|
|
64
|
-
* title.
|
|
65
|
-
*/
|
|
66
|
-
readonly Header: "Header";
|
|
67
|
-
/**
|
|
68
|
-
* These addons appear below the header and above all content; tooling addons
|
|
69
|
-
* can be inserted for convenience.
|
|
70
|
-
*/
|
|
71
|
-
readonly Subheader: "Subheader";
|
|
72
|
-
/**
|
|
73
|
-
* These addons are items added to the settings menu list and are designed to make
|
|
74
|
-
* the reader experience customizable, for example accessibility options
|
|
75
|
-
*/
|
|
76
|
-
readonly Settings: "Settings";
|
|
77
|
-
/**
|
|
78
|
-
* These addons appear left of the content and above the navigation.
|
|
79
|
-
*/
|
|
80
|
-
readonly PrimarySidebar: "PrimarySidebar";
|
|
81
|
-
/**
|
|
82
|
-
* These addons appear right of the content and above the table of contents.
|
|
83
|
-
*/
|
|
84
|
-
readonly SecondarySidebar: "SecondarySidebar";
|
|
85
|
-
/**
|
|
86
|
-
* A virtual location which allows mutation of all content within the shadow
|
|
87
|
-
* root by transforming DOM nodes. These addons should return null on render.
|
|
88
|
-
*/
|
|
89
|
-
readonly Content: "Content";
|
|
90
|
-
}>;
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Options for creating a TechDocs addon.
|
|
94
|
-
* @public
|
|
95
|
-
*/
|
|
96
|
-
export declare type TechDocsAddonOptions<TAddonProps = {}> = {
|
|
97
|
-
name: string;
|
|
98
|
-
location: keyof typeof TechDocsAddonLocations;
|
|
99
|
-
component: ComponentType<TAddonProps>;
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* TechDocs Addon registry.
|
|
104
|
-
* @public
|
|
105
|
-
*/
|
|
106
|
-
export declare const TechDocsAddons: React_2.ComponentType<React_2.PropsWithChildren<{}>>;
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* API to talk to techdocs-backend.
|
|
110
|
-
*
|
|
111
|
-
* @public
|
|
112
|
-
*/
|
|
113
|
-
export declare interface TechDocsApi {
|
|
114
|
-
getApiOrigin(): Promise<string>;
|
|
115
|
-
getTechDocsMetadata(entityId: CompoundEntityRef): Promise<TechDocsMetadata>;
|
|
116
|
-
getEntityMetadata(entityId: CompoundEntityRef): Promise<TechDocsEntityMetadata>;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Utility API reference for the {@link TechDocsApi}.
|
|
121
|
-
*
|
|
122
|
-
* @public
|
|
123
|
-
*/
|
|
124
|
-
export declare const techdocsApiRef: ApiRef<TechDocsApi>;
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Metadata for TechDocs Entity
|
|
128
|
-
*
|
|
129
|
-
* @public
|
|
130
|
-
*/
|
|
131
|
-
export declare type TechDocsEntityMetadata = Entity & {
|
|
132
|
-
locationMetadata?: {
|
|
133
|
-
type: string;
|
|
134
|
-
target: string;
|
|
135
|
-
};
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Metadata for TechDocs page
|
|
140
|
-
*
|
|
141
|
-
* @public
|
|
142
|
-
*/
|
|
143
|
-
export declare type TechDocsMetadata = {
|
|
144
|
-
site_name: string;
|
|
145
|
-
site_description: string;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* A context to store the reader page state
|
|
150
|
-
* @public
|
|
151
|
-
*/
|
|
152
|
-
export declare const TechDocsReaderPageProvider: React_2.MemoExoticComponent<({ entityRef, children }: TechDocsReaderPageProviderProps) => JSX.Element>;
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Props for {@link TechDocsReaderPageProvider}
|
|
156
|
-
*
|
|
157
|
-
* @public
|
|
158
|
-
*/
|
|
159
|
-
export declare type TechDocsReaderPageProviderProps = {
|
|
160
|
-
entityRef: CompoundEntityRef;
|
|
161
|
-
children: TechDocsReaderPageProviderRenderFunction | ReactNode;
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* render function for {@link TechDocsReaderPageProvider}
|
|
166
|
-
*
|
|
167
|
-
* @public
|
|
168
|
-
*/
|
|
169
|
-
export declare type TechDocsReaderPageProviderRenderFunction = (value: TechDocsReaderPageValue) => JSX.Element;
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* @public type for the value of the TechDocsReaderPageContext
|
|
173
|
-
*/
|
|
174
|
-
export declare type TechDocsReaderPageValue = {
|
|
175
|
-
metadata: AsyncState<TechDocsMetadata>;
|
|
176
|
-
entityRef: CompoundEntityRef;
|
|
177
|
-
entityMetadata: AsyncState<TechDocsEntityMetadata>;
|
|
178
|
-
shadowRoot?: ShadowRoot;
|
|
179
|
-
setShadowRoot: Dispatch<SetStateAction<ShadowRoot | undefined>>;
|
|
180
|
-
title: string;
|
|
181
|
-
setTitle: Dispatch<SetStateAction<string>>;
|
|
182
|
-
subtitle: string;
|
|
183
|
-
setSubtitle: Dispatch<SetStateAction<string>>;
|
|
184
|
-
/**
|
|
185
|
-
* @deprecated property can be passed down directly to the `TechDocsReaderPageContent` instead.
|
|
186
|
-
*/
|
|
187
|
-
onReady?: () => void;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Renders a tree of elements in a Shadow DOM.
|
|
192
|
-
*
|
|
193
|
-
* @remarks
|
|
194
|
-
* Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times,
|
|
195
|
-
* so if you want to know when Shadow DOM styles are computed, you can listen for the "TECH_DOCS_SHADOW_DOM_STYLE_LOAD" event dispatched by the element tree.
|
|
196
|
-
*
|
|
197
|
-
* @example
|
|
198
|
-
* Here is an example using this component and also listening for styles loaded event:
|
|
199
|
-
*```jsx
|
|
200
|
-
* import {
|
|
201
|
-
* TechDocsShadowDom,
|
|
202
|
-
* SHADOW_DOM_STYLE_LOAD_EVENT,
|
|
203
|
-
* } from '@backstage/plugin-techdocs-react';
|
|
204
|
-
*
|
|
205
|
-
* export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {
|
|
206
|
-
* // ...
|
|
207
|
-
* const dom = useTechDocsReaderDom(entity);
|
|
208
|
-
*
|
|
209
|
-
* useEffect(() => {
|
|
210
|
-
* const updateSidebarPosition = () => {
|
|
211
|
-
* // ...
|
|
212
|
-
* };
|
|
213
|
-
* dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
214
|
-
* return () => {
|
|
215
|
-
* dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);
|
|
216
|
-
* };
|
|
217
|
-
* }, [dom]);
|
|
218
|
-
*
|
|
219
|
-
* const handleDomAppend = useCallback(
|
|
220
|
-
* (newShadowRoot: ShadowRoot) => {
|
|
221
|
-
* setShadowRoot(newShadowRoot);
|
|
222
|
-
* },
|
|
223
|
-
* [setShadowRoot],
|
|
224
|
-
* );
|
|
225
|
-
*
|
|
226
|
-
* return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
|
|
227
|
-
* };
|
|
228
|
-
* ```
|
|
229
|
-
*
|
|
230
|
-
* @param props - see {@link TechDocsShadowDomProps}.
|
|
231
|
-
* @public
|
|
232
|
-
*/
|
|
233
|
-
export declare const TechDocsShadowDom: ({ element, onAppend, children, }: TechDocsShadowDomProps) => JSX.Element;
|
|
234
|
-
|
|
235
|
-
/**
|
|
236
|
-
* Props for {@link TechDocsShadowDom}.
|
|
237
|
-
*
|
|
238
|
-
* @remarks
|
|
239
|
-
* If you want to use portals to render Material UI components in the Shadow DOM,
|
|
240
|
-
* you must render these portals as children because this component wraps its children in a Material UI StylesProvider
|
|
241
|
-
* to ensure that Material UI styles are applied.
|
|
242
|
-
*
|
|
243
|
-
* @public
|
|
244
|
-
*/
|
|
245
|
-
export declare type TechDocsShadowDomProps = PropsWithChildren<{
|
|
246
|
-
/**
|
|
247
|
-
* Element tree that is appended to ShadowRoot.
|
|
248
|
-
*/
|
|
249
|
-
element: Element;
|
|
250
|
-
/**
|
|
251
|
-
* Callback called when the element tree is appended in ShadowRoot.
|
|
252
|
-
*/
|
|
253
|
-
onAppend?: (shadowRoot: ShadowRoot) => void;
|
|
254
|
-
}>;
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* API which talks to TechDocs storage to fetch files to render.
|
|
258
|
-
*
|
|
259
|
-
* @public
|
|
260
|
-
*/
|
|
261
|
-
export declare interface TechDocsStorageApi {
|
|
262
|
-
getApiOrigin(): Promise<string>;
|
|
263
|
-
getStorageUrl(): Promise<string>;
|
|
264
|
-
getBuilder(): Promise<string>;
|
|
265
|
-
getEntityDocs(entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
266
|
-
syncEntityDocs(entityId: CompoundEntityRef, logHandler?: (line: string) => void): Promise<SyncResult>;
|
|
267
|
-
getBaseUrl(oldBaseUrl: string, entityId: CompoundEntityRef, path: string): Promise<string>;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Utility API reference for the {@link TechDocsStorageApi}.
|
|
272
|
-
*
|
|
273
|
-
* @public
|
|
274
|
-
*/
|
|
275
|
-
export declare const techdocsStorageApiRef: ApiRef<TechDocsStorageApi>;
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Lower-case entity triplets by default, but allow override.
|
|
279
|
-
*
|
|
280
|
-
* @public
|
|
281
|
-
*/
|
|
282
|
-
export declare function toLowercaseEntityRefMaybe(entityRef: CompoundEntityRef, config: Config): CompoundEntityRef;
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Returns the style's loading state.
|
|
286
|
-
*
|
|
287
|
-
* @example
|
|
288
|
-
* Here's an example that updates the sidebar position only after styles are calculated:
|
|
289
|
-
* ```jsx
|
|
290
|
-
* import {
|
|
291
|
-
* TechDocsShadowDom,
|
|
292
|
-
* useShadowDomStylesLoading,
|
|
293
|
-
* } from '@backstage/plugin-techdocs-react';
|
|
294
|
-
*
|
|
295
|
-
* export const TechDocsReaderPageContent = () => {
|
|
296
|
-
* // ...
|
|
297
|
-
* const dom = useTechDocsReaderDom(entity);
|
|
298
|
-
* const isStyleLoading = useShadowDomStylesLoading(dom);
|
|
299
|
-
*
|
|
300
|
-
* const updateSidebarPosition = useCallback(() => {
|
|
301
|
-
* //...
|
|
302
|
-
* }, [dom]);
|
|
303
|
-
*
|
|
304
|
-
* useEffect(() => {
|
|
305
|
-
* if (!isStyleLoading) {
|
|
306
|
-
* updateSidebarPosition();
|
|
307
|
-
* }
|
|
308
|
-
* }, [isStyleLoading, updateSidebarPosition]);
|
|
309
|
-
*
|
|
310
|
-
* const handleDomAppend = useCallback(
|
|
311
|
-
* (newShadowRoot: ShadowRoot) => {
|
|
312
|
-
* setShadowRoot(newShadowRoot);
|
|
313
|
-
* },
|
|
314
|
-
* [setShadowRoot],
|
|
315
|
-
* );
|
|
316
|
-
*
|
|
317
|
-
* return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;
|
|
318
|
-
* };
|
|
319
|
-
* ```
|
|
320
|
-
*
|
|
321
|
-
* @param element - which is the ShadowRoot tree.
|
|
322
|
-
* @returns a boolean value, true if styles are being loaded.
|
|
323
|
-
* @public
|
|
324
|
-
*/
|
|
325
|
-
export declare const useShadowDomStylesLoading: (element: Element | null) => boolean;
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* Hook for use within TechDocs addons that provides access to the underlying
|
|
329
|
-
* shadow root of the current page, allowing the DOM within to be mutated.
|
|
330
|
-
* @public
|
|
331
|
-
*/
|
|
332
|
-
export declare const useShadowRoot: () => ShadowRoot | undefined;
|
|
333
|
-
|
|
334
|
-
/**
|
|
335
|
-
* Convenience hook for use within TechDocs addons that provides access to
|
|
336
|
-
* elements that match a given selector within the shadow root.
|
|
337
|
-
*
|
|
338
|
-
* @public
|
|
339
|
-
*/
|
|
340
|
-
export declare const useShadowRootElements: <TReturnedElement extends HTMLElement = HTMLElement>(selectors: string[]) => TReturnedElement[];
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Hook for retrieving a selection within the ShadowRoot.
|
|
344
|
-
* @public
|
|
345
|
-
*/
|
|
346
|
-
export declare const useShadowRootSelection: (waitMillis?: number) => Selection | null;
|
|
347
|
-
|
|
348
|
-
/**
|
|
349
|
-
* hook to use addons in components
|
|
350
|
-
* @public
|
|
351
|
-
*/
|
|
352
|
-
export declare const useTechDocsAddons: () => {
|
|
353
|
-
renderComponentByName: (name: string) => JSX.Element | null;
|
|
354
|
-
renderComponentsByLocation: (location: keyof typeof TechDocsAddonLocations) => (JSX.Element | null)[] | null;
|
|
355
|
-
};
|
|
356
|
-
|
|
357
|
-
/**
|
|
358
|
-
* Hook used to get access to shared state between reader page components.
|
|
359
|
-
* @public
|
|
360
|
-
*/
|
|
361
|
-
export declare const useTechDocsReaderPage: () => TechDocsReaderPageValue;
|
|
362
|
-
|
|
363
|
-
export { }
|