@servicetitan/docs-uikit 24.1.2 → 24.2.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/docs/error-boundary.mdx +5 -4
- package/docs/web-components.mdx +35 -23
- package/package.json +2 -2
package/docs/error-boundary.mdx
CHANGED
|
@@ -38,7 +38,8 @@ React Component. It tries to catch and log errors from children.
|
|
|
38
38
|
|
|
39
39
|
#### Props
|
|
40
40
|
|
|
41
|
-
| Name
|
|
42
|
-
|
|
|
43
|
-
| `moduleName`
|
|
44
|
-
| `fallback`
|
|
41
|
+
| Name | Type | Description | Required |
|
|
42
|
+
| :------------- | :------------------------------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------- |
|
|
43
|
+
| `moduleName` | `string` | Used for log categorization | Yes |
|
|
44
|
+
| `fallback` | `React.ComponentType<{onRefresh?:() => void}>` | Component to render when error is caught | No, `ErrorBoundary` renders "Something went wrong..." text by default |
|
|
45
|
+
| `getErrorData` | `(error: Error) => Parameters<Log['error']>[0]['data'];` | Function that returns custom data for log entry | No |
|
package/docs/web-components.mdx
CHANGED
|
@@ -7,28 +7,25 @@ import { VersionHistory, Changes } from '@site/src/components/version-history';
|
|
|
7
7
|
|
|
8
8
|
<VersionHistory>
|
|
9
9
|
<Changes forVersion="v22.21.1">
|
|
10
|
-
Fixed a bug where the `Loader` component would error if an MFE's metadata.json contains a
|
|
10
|
+
Fixed a bug where the `Loader` component would error if an MFE's metadata.json contains a
|
|
11
|
+
dependency of `web-components` with a version that is a semver range.
|
|
11
12
|
</Changes>
|
|
12
13
|
<Changes forVersion="v22.21.0">
|
|
13
14
|
<Admonition type="warning" title="Deprecated">
|
|
14
|
-
This version contains a critical bug that was introduced in v22.21.0 and fixed in
|
|
15
|
+
This version contains a critical bug that was introduced in v22.21.0 and fixed in
|
|
16
|
+
v22.21.1. Update to v22.21.1 or later as soon as possible.
|
|
15
17
|
</Admonition>
|
|
16
18
|
Provided a more guaranteed check for an MFE's ability to re-render when passed MFE data changes.
|
|
17
19
|
Added context for MFEMetadata, which includes the shadowDom and portalShadowDom.
|
|
18
20
|
</Changes>
|
|
19
|
-
<Changes forVersion="v22.16.0">
|
|
20
|
-
Fixed Loader memory leaks.
|
|
21
|
-
</Changes>
|
|
21
|
+
<Changes forVersion="v22.16.0">Fixed Loader memory leaks.</Changes>
|
|
22
22
|
<Changes forVersion="v22.12.0">
|
|
23
|
-
Support updating props passed to MFE via Loader.
|
|
24
|
-
Added context for accessing MFEData.
|
|
23
|
+
Support updating props passed to MFE via Loader. Added context for accessing MFEData.
|
|
25
24
|
</Changes>
|
|
26
25
|
<Changes forVersion="v22.7.0">
|
|
27
26
|
Fixed disposing MFE when parent element has moved in DOM.
|
|
28
27
|
</Changes>
|
|
29
|
-
<Changes forVersion="v22.1.0">
|
|
30
|
-
Added EventBus support for sending payload with events.
|
|
31
|
-
</Changes>
|
|
28
|
+
<Changes forVersion="v22.1.0">Added EventBus support for sending payload with events.</Changes>
|
|
32
29
|
</VersionHistory>
|
|
33
30
|
|
|
34
31
|
`@servicetitan/web-components` is used to build, register, and load Microfrontends (MFEs) into host applications.
|
|
@@ -58,26 +55,41 @@ export const Foo: React.FC = () => {
|
|
|
58
55
|
|
|
59
56
|
#### Props
|
|
60
57
|
|
|
61
|
-
| Name
|
|
62
|
-
|
|
|
63
|
-
| `src`
|
|
64
|
-
| `fallbackSrc`
|
|
65
|
-
| `data`
|
|
66
|
-
| `basename`
|
|
67
|
-
| `loadingFallback`
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
58
|
+
| Name | Description |
|
|
59
|
+
| :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
60
|
+
| `src` | path to an MFE root folder |
|
|
61
|
+
| `fallbackSrc` | optional alternative path to an MFE root folder (if request for src returns error) |
|
|
62
|
+
| `data` | additional data passed to an MFE as an object, where values are serializable, and preferably memoized ([see below](#passing-data-from-host-to-mfe)) |
|
|
63
|
+
| `basename` | prefix for all MFE URLs, you should inject it by the `BASENAME_TOKEN` and pass to the appropriate router property |
|
|
64
|
+
| `loadingFallback` | optional JSX element to render when the MFE is loading |
|
|
65
|
+
| `loadingFallbackDelayed` | controls whether to render the loading fallback immediately, or after a short delay [(see below)](#fallback-delay) |
|
|
66
|
+
| `errorFallback` | optional JSX element to render when the MFE fails to load |
|
|
67
|
+
| `className` | additional CSS classes for the MFE web component element |
|
|
68
|
+
| `cache` | optional cache strategy for the MFE [(see below)](#cache) |
|
|
69
|
+
|
|
70
|
+
#### Loading fallback delay {#fallback-delay}
|
|
71
|
+
|
|
72
|
+
To prevent the loading fallback from flickering on then off when an MFE loads quickly, `Loader` does not render the fallback immediately. It waits a moment (currently 200ms) then renders the fallback only if the MFE hasn't finished loading. Set `loadingFallbackDelayed` to `false` to always render the fallback, regardless how quickly the MFE loads.
|
|
73
|
+
|
|
74
|
+
#### Cache strategy {#cache-strategy}
|
|
75
|
+
|
|
76
|
+
When an MFE is loaded, `Loader` fetches the version and bundle data from the `src` (or `fallbackSrc`) endpoint and stores the information in a cache. Then, if the MFE is unloaded and subsequently reloaded, it reuses the cached information. Use `cache` to control whether or how long `Loader` caches an MFE's data:
|
|
77
|
+
|
|
78
|
+
- `true`: cache the data for the standard interval (currently 15 minutes). This is the default value.
|
|
79
|
+
- `false`: do not cache the data; (re)fetch it every time the MFE is loaded
|
|
80
|
+
- `-1`: cache the data indefinitely (i.e., for the duration of the user's session)
|
|
81
|
+
- _<number>_: cache the data for the specified _<number>_ of milliseconds
|
|
70
82
|
|
|
71
83
|
#### Passing data from Host to MFE
|
|
72
84
|
|
|
73
|
-
|
|
85
|
+
Use `data` to pass data from your host application to the MFE. The data should be an object where keys are strings and the values are any serializable data.
|
|
74
86
|
|
|
75
|
-
|
|
87
|
+
To avoid performance issues with re-rendering and re-serializing the value, we recommend memoizing the `data` object passed to `<Loader>`.
|
|
76
88
|
|
|
77
|
-
|
|
89
|
+
**Reminder:** Don't casually share data between the host and MFEs. When possible, MFEs should load the data they need instead of relying on the host to pass it.
|
|
78
90
|
|
|
79
91
|
:::note
|
|
80
|
-
Before version v22.12.0 of `@servicetitan/web-components` package, the `data` prop only supported data of type `Record<string string>`
|
|
92
|
+
Before version v22.12.0 of `@servicetitan/web-components` package, the `data` prop only supported data of type `Record<string, string>`
|
|
81
93
|
:::
|
|
82
94
|
|
|
83
95
|
```tsx title="Host Application"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/docs-uikit",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.2.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -16,5 +16,5 @@
|
|
|
16
16
|
"cli": {
|
|
17
17
|
"webpack": false
|
|
18
18
|
},
|
|
19
|
-
"gitHead": "
|
|
19
|
+
"gitHead": "13848340f521a17e1e251fde0d031022910ca7ab"
|
|
20
20
|
}
|