@servicetitan/docs-uikit 31.3.2 → 31.5.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/startup/build.mdx +9 -7
- package/docs/startup/kendo-ui-license.mdx +1 -1
- package/docs/startup/lint.mdx +6 -4
- package/docs/startup/mfe-publish.mdx +41 -13
- package/docs/startup/start.mdx +7 -5
- package/docs/startup/startup.mdx +1 -1
- package/docs/web-components/event-bus.mdx +24 -12
- package/docs/web-components/headless-loader.mdx +12 -12
- package/package.json +2 -2
package/docs/startup/build.mdx
CHANGED
|
@@ -4,14 +4,16 @@ title: build
|
|
|
4
4
|
|
|
5
5
|
Build packages for production to the `dist/bundle` folders. It bundles them in production mode and optimizes the build for the best performance. The builds are minified and the filenames include the hashes. Apps are ready to be deployed.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Options
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
| Option | Description |
|
|
10
|
+
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| `--scope <glob>` | Include only packages with names matching the given glob. |
|
|
12
|
+
| `--ignore <glob>` | Exclude packages with names matching the given glob. |
|
|
13
|
+
| `--cdn-path <url>` | Specify the base path for all the assets within the application. |
|
|
14
|
+
| `--stat` | Generate bundle report with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). Starting `v22.3.0` works for [MFEs](/docs/frontend/micro-frontends) too. |
|
|
15
|
+
| `--code-coverage` | Add [instrumentation](https://github.com/JS-DevTools/coverage-istanbul-loader) to bundled code in order to collect code coverage |
|
|
16
|
+
| `--use-tsc` | Use TSC for TypeScript compilation |
|
|
15
17
|
|
|
16
18
|
## Build Steps
|
|
17
19
|
|
|
@@ -4,7 +4,7 @@ title: kendo-ui-license
|
|
|
4
4
|
|
|
5
5
|
Activates KendoReact components by installing the license key. The license key is only installed if the project depends on `@progress/kendo` components. Otherwise, this command has no effect.
|
|
6
6
|
|
|
7
|
-
**Note:** The [build](
|
|
7
|
+
**Note:** The [build](./build) command automatically detects when a project uses KendoRect components and runs this command.
|
|
8
8
|
|
|
9
9
|
Use it to install the license key separately from a build, or to override the default license key.
|
|
10
10
|
|
package/docs/startup/lint.mdx
CHANGED
|
@@ -17,8 +17,10 @@ npx startup lint -- packages/desktop/app/modules/lead/ packages/desktop/app/modu
|
|
|
17
17
|
npx startup lint -- packages/desktop/app/modules/{lead,inventory}/
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
## Options
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
| Option | Description |
|
|
23
|
+
| :---------------- | :-------------------------------------------------------- |
|
|
24
|
+
| `--scope <glob>` | Include only packages with names matching the given glob. |
|
|
25
|
+
| `--ignore <glob>` | Exclude packages with names matching the given glob. |
|
|
26
|
+
| `--fix` | Fix linting issues. |
|
|
@@ -4,27 +4,28 @@ title: mfe-publish
|
|
|
4
4
|
|
|
5
5
|
This is an umbrella command for both publishing and unpublishing (cleaning up) MFEs. This command allows publishing MFEs in a way that there is no risk of colliding package versions (a common issue with back-merging). See the `--build` option for more details.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Publishing options
|
|
8
8
|
|
|
9
|
-
| Option
|
|
10
|
-
|
|
|
11
|
-
| `--
|
|
12
|
-
| `--
|
|
13
|
-
| `--
|
|
14
|
-
| `--force`
|
|
15
|
-
| `--
|
|
9
|
+
| Option | Description |
|
|
10
|
+
| :---------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `--dry` | Log what the command would do without actually publishing anything. |
|
|
12
|
+
| `--branch <string>` | Optional branch name. The current branch name is used if no value is specified. The branch name is used in constructing the build version in case `--build` is not specified. |
|
|
13
|
+
| `--build <glob>` | Optional build version that normally should not be specified. Defaults to `<branch_name>.<commit_hash>`. For example, if git commit `bdac90f5` is published from branch `next`, the build version is`next.bdac90f5`, and the full version is `0.0.0-next.bdac90f5`. This ensures each release has a unique version with no collisions. |
|
|
14
|
+
| `--force` | Forces publishing the package when no configuration was found for the specified branch (`--branch` or current branch). |
|
|
15
|
+
| `--upload-sourcemaps`, `--no-upload-sourcemaps` | Whether or not to [upload sourcemaps](#sourcemaps) to Datadog. Defaults to uploading sourcemaps. |
|
|
16
|
+
| `--tag <string>` | The [tag](https://docs.npmjs.com/cli/v7/commands/npm-publish#tag) to assign to the published version. Defaults to the tag associated with the branch from the custom [branch config](#branch-configs) or, if there is no custom branch config, from the [default branch config](https://github.com/servicetitan/uikit/blob/master/packages/startup/src/utils/get-branch-configs.ts#L3). For example, by default a package published from the `master` branch is tagged `prod`. Becasue NPM v11 requires pre-release versions to have a tag, if there is no custom or default tag for the branch, the package is tagged "latest". |
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
## Unpublishing options
|
|
18
19
|
|
|
19
20
|
| Option | Descripiton |
|
|
20
21
|
| :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
21
22
|
| `--clean` | Instructs `mfe-publish` to remove old versions instead of publishing. |
|
|
22
|
-
| `--count <number>` | The number of package versions to keep (e.g., if twelve versions are published, `--count 10` removes the two oldest). The default value is 5. |
|
|
23
|
-
| `--branch <name>` | Remove old versions associated with the specified branch. Defaults to the current branch (i.e., `git branch --show-current`) |
|
|
24
23
|
| `--all` | Remove old versions associated with all [recognized branches](#branch-configs). This overrides `--branch`. |
|
|
24
|
+
| `--branch <name>` | Remove old versions associated with the specified branch. Defaults to the current branch (i.e., `git branch --show-current`) |
|
|
25
|
+
| `--count <number>` | The number of package versions to keep (e.g., if twelve versions are published, `--count 10` removes the two oldest). The default value is 5. |
|
|
25
26
|
| `--dry` | Log what the command would do without actually unpublishing anything. |
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
## Branch configs
|
|
28
29
|
|
|
29
30
|
By default `mfe-publish` only publishes from a few [recognized branches](https://github.com/servicetitan/uikit/blob/master/packages/startup/src/utils/get-branch-configs.ts#L3) and you must use `--force` to publish from others.
|
|
30
31
|
|
|
@@ -42,4 +43,31 @@ To customize the recognized branches for an MFE set `cli.web-component.branches`
|
|
|
42
43
|
}
|
|
43
44
|
```
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
### Properties
|
|
47
|
+
|
|
48
|
+
| Name | Type | Description |
|
|
49
|
+
| :----------------- | :-------- | :----------------------------------------------------------- |
|
|
50
|
+
| `publishTag` | `string` | The tag to use when publishing from the branch. |
|
|
51
|
+
| `uploadSourcemaps` | `boolean` | Whether to upload sourcemaps to Datadog. Defaults to `true`. |
|
|
52
|
+
|
|
53
|
+
## Sourcemaps
|
|
54
|
+
|
|
55
|
+
✨ New in **v31.5.0** ✨
|
|
56
|
+
|
|
57
|
+
By default `mfe-publish` uploads sourcemaps to Datadog so you can easily find the source of runtime errors.
|
|
58
|
+
|
|
59
|
+
This requires that ServiceTitan's Datadog API key be provided via the `DATADOG_API_KEY` environment variable,
|
|
60
|
+
which you can get from the Github or TeamCity organization secret. For example, in a Github action:
|
|
61
|
+
|
|
62
|
+
```yml
|
|
63
|
+
- name: Publish MFE
|
|
64
|
+
env:
|
|
65
|
+
DATADOG_API_KEY: ${{ secrets.DATADOG_API_KEY }}
|
|
66
|
+
run: npx startup mfe-publish
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
If `DATADOG_API_KEY` is not provided `mfe-publish` fails with an error. In CI environments, instead of failing it logs a warning and completes successfully.
|
|
70
|
+
|
|
71
|
+
:::tip
|
|
72
|
+
Use `--no-upload-sourcemaps` to prevent `mfe-publish` from attempting to upload sourcemaps, for example, for pre-release versions. See [Publishing options](#publishing-options).
|
|
73
|
+
:::
|
package/docs/startup/start.mdx
CHANGED
|
@@ -4,12 +4,14 @@ title: start
|
|
|
4
4
|
|
|
5
5
|
Runs package in the development mode. Applications will be hosted on sequential free ports starting from 8080. Pages will automatically reload on changes to the code.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Options
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
| Option | Description |
|
|
10
|
+
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `--scope <glob>` | Include only packages with names matching the given glob. |
|
|
12
|
+
| `--ignore <glob>` | Exclude packages with names matching the given glob. |
|
|
13
|
+
| `--code-coverage` | Add [instrumentation](https://github.com/JS-DevTools/coverage-istanbul-loader) to bundled code in order to collect code coverage |
|
|
14
|
+
| `--use-tsc` | Use TSC for TypeScript compilation |
|
|
13
15
|
|
|
14
16
|
## Start steps
|
|
15
17
|
|
package/docs/startup/startup.mdx
CHANGED
|
@@ -279,7 +279,7 @@ Or you can use relative path to a file that exports an object with detailed conf
|
|
|
279
279
|
|
|
280
280
|
###### Web component config options
|
|
281
281
|
|
|
282
|
-
- `cli.web-component.branches` - Set git branch specific configs, used for publishing. See [Branch configs](#branch-configs).
|
|
282
|
+
- `cli.web-component.branches` - Set git branch specific configs, used for publishing. See [Branch configs](./mfe-publish#branch-configs).
|
|
283
283
|
- `cli.web-component.legacyRoot` - Set to opt-out of automatic batching. See [Opting-out of automatic batching](/docs/frontend/react-18#opting-out-of-automatic-batching).
|
|
284
284
|
|
|
285
285
|
See [MFE configuration](/docs/frontend/micro-frontends/#mfe-configuration) for detailed instructions on configuring MFE applications.
|
|
@@ -10,7 +10,7 @@ Use EventBus to exchange messages (aka events) between a host and MFEs, or betwe
|
|
|
10
10
|
### Providing EventBus
|
|
11
11
|
|
|
12
12
|
To use EventBus, provide an instance via `EVENT_BUS_TOKEN`.
|
|
13
|
-
[Loader](
|
|
13
|
+
[Loader](./loader) automatically passes the EventBus through to MFEs.
|
|
14
14
|
For example,
|
|
15
15
|
|
|
16
16
|
```tsx
|
|
@@ -458,32 +458,44 @@ It returns an `EVENT_BUS_TOKEN` that resolves to the specified type of EventBus.
|
|
|
458
458
|
|
|
459
459
|
#### Examples
|
|
460
460
|
|
|
461
|
-
This example declares
|
|
461
|
+
This example declares an `EventBus` that only
|
|
462
462
|
allows **"example:click"** and **"example:input"**, and that requires **"example:input"** to be sent with a string value.
|
|
463
463
|
|
|
464
|
-
|
|
464
|
+
```ts
|
|
465
|
+
import { useDependencies } from '@servicetitan/react-ioc';
|
|
466
|
+
import { EventBus } from '@servicetitan/web-components';
|
|
467
|
+
|
|
468
|
+
export interface CustomEvents {
|
|
469
|
+
'example:click': undefined;
|
|
470
|
+
'example:input': string;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
function Test() {
|
|
474
|
+
// eventBus is typed: emit() and on() allow only keys of CustomEvents and matching data
|
|
475
|
+
const [eventBus] = useDependencies<[EventBus<CustomEvents>]>(EVENT_BUS_TOKEN);
|
|
476
|
+
}
|
|
477
|
+
```
|
|
478
|
+
|
|
479
|
+
`typedEventBusToken` is a convenient shorthand that achieves the same result:
|
|
465
480
|
|
|
466
481
|
```ts
|
|
467
482
|
import { useDependencies } from '@servicetitan/react-ioc';
|
|
468
|
-
import {
|
|
483
|
+
import { typedEventBusToken } from '@servicetitan/web-components';
|
|
469
484
|
|
|
470
|
-
interface CustomEvents {
|
|
485
|
+
export interface CustomEvents {
|
|
471
486
|
'example:click': undefined;
|
|
472
487
|
'example:input': string;
|
|
473
488
|
}
|
|
474
489
|
|
|
475
|
-
const CUSTOM_EVENT_BUS_TOKEN = typedEventBusToken<CustomEvents>();
|
|
490
|
+
export const CUSTOM_EVENT_BUS_TOKEN = typedEventBusToken<CustomEvents>();
|
|
476
491
|
|
|
477
492
|
function Test() {
|
|
478
|
-
// eventBus is not typed: emit() and on() allow any events and data
|
|
479
|
-
const [eventBus] = useDependencies(EVENT_BUS_TOKEN);
|
|
480
|
-
|
|
481
493
|
/**
|
|
482
|
-
*
|
|
494
|
+
* eventBus is typed: emit() and on() allow only keys of CustomEvents and matching data
|
|
483
495
|
* Using CUSTOM_EVENT_BUS_TOKEN is equivalent to:
|
|
484
|
-
* useDependencies(EVENT_BUS_TOKEN
|
|
496
|
+
* useDependencies<[EventBus<CustomEvents>]>(EVENT_BUS_TOKEN)
|
|
485
497
|
*/
|
|
486
|
-
const [
|
|
498
|
+
const [eventBus] = useDependencies(CUSTOM_EVENT_BUS_TOKEN);
|
|
487
499
|
}
|
|
488
500
|
```
|
|
489
501
|
|
|
@@ -34,16 +34,16 @@ export const disconnectedCallback: HeadlessCallback = ({ eventBus }) => {
|
|
|
34
34
|
};
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
### `HeadlessCallback
|
|
37
|
+
### `HeadlessCallback`
|
|
38
38
|
|
|
39
|
-
The `HeadlessCallback<
|
|
39
|
+
The `HeadlessCallback<TMfeData = any, TEventBus extends EventBus = EventBus>` type is a function that receives an object with the below properties:
|
|
40
40
|
|
|
41
|
-
| Parameter | Type
|
|
42
|
-
| ------------ |
|
|
43
|
-
| `ldService` | `LDService`
|
|
44
|
-
| `logService` | `Log`
|
|
45
|
-
| `eventBus` | `
|
|
46
|
-
| `mfeData` | `Serializable<
|
|
41
|
+
| Parameter | Type | Description |
|
|
42
|
+
| ------------ | ------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
43
|
+
| `ldService` | `LDService` | The [LaunchDarkly LDService instance](../launchdarkly-service#ldservice) passed from the Host. |
|
|
44
|
+
| `logService` | `Log` | The [Log instance](../log-service#log) passed from the Host. |
|
|
45
|
+
| `eventBus` | `TEventBus` | The [EventBus instance](./event-bus) passed from the Host, typed as `TEventBus`. |
|
|
46
|
+
| `mfeData` | `Serializable<TMfeData>` | The [data passed from the host into `HeadlessLoader`](#headless-loader-props), typed as `TMfeData`. |
|
|
47
47
|
|
|
48
48
|
## HeadlessLoader
|
|
49
49
|
|
|
@@ -59,9 +59,9 @@ export const Foo = () => {
|
|
|
59
59
|
|
|
60
60
|
### Props {#headless-loader-props}
|
|
61
61
|
|
|
62
|
-
| Name | Description
|
|
63
|
-
| :------------ |
|
|
64
|
-
| `src` | url for the MFE's package
|
|
65
|
-
| `fallbackSrc` | optional alternative url for the MFE's package (if request for src returns error)
|
|
62
|
+
| Name | Description |
|
|
63
|
+
| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
64
|
+
| `src` | url for the MFE's package |
|
|
65
|
+
| `fallbackSrc` | optional alternative url for the MFE's package (if request for src returns error) |
|
|
66
66
|
| `data` | additional data passed to an MFE as an object, where values are serializable, and preferably memoized ([see Loader](./loader#passing-data-from-host-to-mfe)) |
|
|
67
67
|
| `cache` | optional cache strategy for the MFE [(see Loader)](./loader#cache-strategy). Defaults to `-1`. |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/docs-uikit",
|
|
3
|
-
"version": "31.
|
|
3
|
+
"version": "31.5.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": "6fce124ae36f2a36705247f6300ca8354aba6fb2"
|
|
20
20
|
}
|