@servicetitan/docs-uikit 33.1.1 → 34.0.1

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.
@@ -3,6 +3,14 @@ title: BREAKING CHANGES
3
3
  sidebar_position: 0
4
4
  ---
5
5
 
6
+ ## v34.0.0
7
+
8
+ ### [@servicetitan/startup](./startup/)
9
+
10
+ - Upgraded Vitest from v3 to v4. For a complete list of breaking changes, see the [Migration Guide](https://vitest.dev/guide/migration.html).
11
+ - Upgraded Prettier from 3.6.x to 3.7.x which includes formatting changes. Run `npx startup lint --fix` to fix new lint errors.
12
+ - Changed startup to disallow running `mfe-publish` from a global installation because building and publishing with different versions could lead to unexpected runtime errors.
13
+
6
14
  ## v33.0.0
7
15
 
8
16
  ### [@servicetitan/startup](./startup/)
@@ -43,20 +43,20 @@ Contains enum and types useful to create an object with files hierarchy configur
43
43
 
44
44
  Enum with all supported naming conventions.
45
45
 
46
- - DashDelimitedLowercase - `dash-delimited-lowercase`
47
- - CamelCase - `camelCase`
46
+ - DashDelimitedLowercase - `dash-delimited-lowercase`
47
+ - CamelCase - `camelCase`
48
48
 
49
49
  ### Folder
50
50
 
51
51
  The type for configuration any folder except the root folder.
52
52
 
53
- - `name` - name of the folder the configuration is for, supports `glob` syntax
54
- - `namingConvention?` - naming convention for all nested files and folders, subfolders inherits the value of this property
55
- - `children?` - configurations of allowed subfolders, an empty array by default
56
- - `allowedFiles?` - list of files that can be placed in this folder is used to check the full filename with an extension, doesn't support path before filename; all files are allowed by default, supports `glob` syntax
57
- - `allowedExtensions?` - list of files extensions that can be placed in this folder is used to check only the part that starts after the first dot; by default is equal to the value from a parent folder configuration or an empty array for the root folder, supports `glob` syntax
58
- - `overrideExtensions?` - if `false` parent extensions are getting concatenated with current ones, `true` by default but take effect only if `allowedExtensions` is defined
59
- - `ignore?` - if `true` then all content will be considered valid
53
+ - `name` - name of the folder the configuration is for, supports `glob` syntax
54
+ - `namingConvention?` - naming convention for all nested files and folders, subfolders inherits the value of this property
55
+ - `children?` - configurations of allowed subfolders, an empty array by default
56
+ - `allowedFiles?` - list of files that can be placed in this folder is used to check the full filename with an extension, doesn't support path before filename; all files are allowed by default, supports `glob` syntax
57
+ - `allowedExtensions?` - list of files extensions that can be placed in this folder is used to check only the part that starts after the first dot; by default is equal to the value from a parent folder configuration or an empty array for the root folder, supports `glob` syntax
58
+ - `overrideExtensions?` - if `false` parent extensions are getting concatenated with current ones, `true` by default but take effect only if `allowedExtensions` is defined
59
+ - `ignore?` - if `true` then all content will be considered valid
60
60
 
61
61
  ### RootFolder
62
62
 
@@ -8,9 +8,9 @@ title: React-Knockout Bridge
8
8
 
9
9
  ## When to use?
10
10
 
11
- - When you already have a `Knockout` component that you want to show from `React`.
12
- - When you have `React` component you want to show from Knockout.
13
- - For new components we suggest to build it in `React` from scratch.
11
+ - When you already have a `Knockout` component that you want to show from `React`.
12
+ - When you have `React` component you want to show from Knockout.
13
+ - For new components we suggest to build it in `React` from scratch.
14
14
 
15
15
  ## KnockoutComponent
16
16
 
@@ -39,7 +39,7 @@ and automatically [provides a store](#use-flags-in-mobx-store) that allows flag
39
39
  | `clientSideID` | `string` | The client-side ID that authorizes the client to connect to a particular LaunchDarkly project. The [getValueForEnvironment](./web-components/get-value-for-environment) helper provides a convenient way to map Monolith environments to the corresponding client-side ID. |
40
40
  | `projectName` | `string` | The name of the LaunchDarkly project, for logs and error messages. |
41
41
  | `context` | `object` | (Optional) Context for targeting rules. Defaults to anonymous user. Use LaunchDarkly's [`identify`](https://docs.launchdarkly.com/sdk/features/identify) method to change the context after initialization. |
42
- | `waitForInitialization` | `boolean` | (Optional) Whether or not to wait until flags values are available before rendering children. Defaults to `true` |
42
+ | `waitForInitialization` | `boolean` | (Optional) Whether or not to wait until flags values are available before rendering children. Defaults to `true`. |
43
43
 
44
44
  :::caution
45
45
  When a `context` is provided, only the initial value takes affect. Subsequent calls with the same client-side ID reuse the client that was created with the initial context.
@@ -127,7 +127,7 @@ Simply wrap the host with `LDServiceProvider` to ensure that it and embedded MFE
127
127
 
128
128
  ```tsx
129
129
  import { FC, StrictMode } from 'react';
130
- import { LogService } from '@servicetitan/launchdarkly-service';
130
+ import { LDServiceProvider } from '@servicetitan/launchdarkly-service';
131
131
 
132
132
  export const HostApp: FC = () => {
133
133
  return(
@@ -140,6 +140,35 @@ export const HostApp: FC = () => {
140
140
  };
141
141
  ```
142
142
 
143
+ #### Props
144
+
145
+ | Name | Type | Description |
146
+ | :------------ | :-------------- | :--------------------------------------------------------------------- |
147
+ | `application` | `LDApplication` | (Optional) Application and version details to provide to LaunchDarkly. |
148
+
149
+ #### LDApplication
150
+
151
+ ```tsx
152
+ export interface LDApplication {
153
+ id?: string;
154
+ version?: string;
155
+ }
156
+ ```
157
+
158
+ Use `application` to make the application id and version available for flag evaluations in LaunchDarkly. Every LaunchDarkly client created by [LDProvider](#ldprovider) (within the host and within MFEs) will automatically pass through the application metadata to LaunchDarkly.
159
+
160
+ :::caution
161
+ `LDServiceProvider` should not be used in MFEs. If an MFE does use `LDServiceProvider`, the host's `application` overrides the MFE's.
162
+ :::
163
+
164
+ #### Example
165
+
166
+ ```tsx
167
+ <LDServiceProvider application={{ id: 'app', version: '71' }}>
168
+ {...}
169
+ </LDServiceProvider>
170
+ ```
171
+
143
172
  ### LDService
144
173
 
145
174
  The `LDService` interface enables [headless bundles](./microfrontends/developing/headless-bundle) to create and reuse client connections for LaunchDarkly projects.
@@ -147,11 +176,13 @@ The `LDService` interface enables [headless bundles](./microfrontends/developing
147
176
  ```ts
148
177
  export interface LDService {
149
178
  getClient: (config: ClientConfig) => LDClient;
179
+ application?: LDApplication;
150
180
  }
151
181
 
152
182
  export interface ClientConfig {
153
183
  clientSideID: string;
154
184
  context?: LDContext;
185
+ options?: LDOptions;
155
186
  }
156
187
  ```
157
188
 
@@ -159,10 +190,15 @@ export interface ClientConfig {
159
190
 
160
191
  Returns an `LDClient` instance configured with the following parameters.
161
192
 
162
- | Name | Type | Description |
163
- | :------------- | :------- | :------------------------------------------------------------------ |
164
- | `clientSideID` | `string` | The LaunchDarkly client-side ID. |
165
- | `context` | `object` | (Optional) Context for targeting rules. Defaults to anonymous user. |
193
+ | Name | Type | Description |
194
+ | :------------- | :---------- | :------------------------------------------------------------------ |
195
+ | `clientSideID` | `string` | The LaunchDarkly client-side ID. |
196
+ | `context` | `object` | (Optional) Context for targeting rules. Defaults to anonymous user. |
197
+ | `options` | `LDOptions` | (Optional) LaunchDarkly initialization options. |
198
+
199
+ #### application
200
+
201
+ Optional [LDApplication](#ldapplication) that was passed to [LDServiceProvider](#ldserviceprovider).
166
202
 
167
203
  ### FeatureFlagStore
168
204
 
@@ -8,10 +8,10 @@ title: React IoC
8
8
 
9
9
  ## Features
10
10
 
11
- - Supports hierarchical Dependency Injection
12
- - Easy API that supports Singleton and Transient patterns
13
- - Support for decorator and JSX based injection
14
- - Automatic cleaning of injected properties on unmounting of React components
11
+ - Supports hierarchical Dependency Injection
12
+ - Easy API that supports Singleton and Transient patterns
13
+ - Support for decorator and JSX based injection
14
+ - Automatic cleaning of injected properties on unmounting of React components
15
15
 
16
16
  ## Examples
17
17
 
@@ -20,6 +20,7 @@ Build packages for production to the `dist/bundle` folders. It bundles them in p
20
20
  The `build` command executes these steps:
21
21
 
22
22
  1. Activate Kendo UI license.
23
+ 1. Run package **precompile** scripts, if any.
23
24
  1. Compile Typescript.
24
25
  1. Generate TypeScript definitions from CSS, LESS, and SASS modules, and copy assets and style files to the output folder.
25
26
  1. Run type check via [TypeScript project references](https://www.typescriptlang.org/docs/handbook/project-references.html).
@@ -29,6 +30,12 @@ The `build` command executes these steps:
29
30
  `startup` doesn't support dependencies between the Webpack bundles.
30
31
  :::
31
32
 
33
+ ### Precompile Script
34
+
35
+ ✨ New in **v34.0.0** ✨
36
+
37
+ The `build` command runs the `precompile` script defined in each package's `package.json` before compiling TypeScript. This allows packages to execute custom setup tasks during the build process. If a package doesn't define a `precompile` script, this step is skipped.
38
+
32
39
  ## Package Setup
33
40
 
34
41
  Because `startup` compiles and builds in separate steps, packages must export compiled Javascript instead of the TypeScript source files. E.g.,
@@ -73,7 +80,7 @@ function MyImage() {
73
80
  }
74
81
  ```
75
82
 
76
- ### Importing SVGs as React components
83
+ ### Importing SVGs as React Components
77
84
 
78
85
  By default `startup` imports SVGs from `@servicetitan/anvil2` as React components. E.g.,
79
86
 
@@ -97,7 +104,7 @@ export function CheckButton() {
97
104
  }
98
105
  ```
99
106
 
100
- ### Importing Anvil 2 SVGs as assets
107
+ ### Importing Anvil 2 SVGs as Assets
101
108
 
102
109
  By default `startup` imports SVGs from `@servicetitan/anvil2` as React components.
103
110
  To import an Anvil 2 SVG as an asset, append `?asset` to the import statement. E.g.,
@@ -112,7 +119,7 @@ function CheckImage() {
112
119
 
113
120
  ## Configuration
114
121
 
115
- ### Library packages
122
+ ### Library Packages
116
123
 
117
124
  Set `cli.webpack` to `false` to disable Webpack for non-application packages, such as component and utility libraries.
118
125
 
@@ -158,7 +165,7 @@ Use `tsconfig.build.json` that extends from `tsconfig.json` to exclude tests, st
158
165
  Project references must be duplicated in `tsconfig.build.json` because [references are not inherited](https://github.com/microsoft/TypeScript/issues/27098).
159
166
  :::
160
167
 
161
- ### TypeScript compilation (SWC)
168
+ ### TypeScript Compilation (SWC)
162
169
 
163
170
  :::info
164
171
  `Startup` only maps a subset of TypeScript settings from `tsconfig.json` to SWC options. See [cliOptions](https://github.com/search?q=repo%3Aservicetitan%2Fuikit+%22cliOptions%3A%22+-path%3A**%2F*.test.ts&type=code) and [swcOptions](https://github.com/search?q=repo%3Aservicetitan%2Fuikit+%22swcOptions%3A%22+-path%3A**%2F*.test.ts&type=code) for the details.
@@ -182,7 +189,7 @@ Use `cli.swc-compile-package` to set or override SWC options. E.g.,
182
189
  }
183
190
  ```
184
191
 
185
- ### TypeScript compilation (TSC)
192
+ ### TypeScript Compilation (TSC)
186
193
 
187
194
  :::caution
188
195
  Compilation via TSC is deprecated.
@@ -5,8 +5,8 @@ title: clean
5
5
  Resets project workspace to a fresh state by clearing build caches and removing untracked files.
6
6
 
7
7
  It runs tools like `nx reset` and `jest --clearCache` to clear project and test
8
- caches, and then uses `git clean -fdX` to delete all untracked files and
9
- directories (such as build outputs and temporary files).
8
+ caches, clears the npm and npx caches, and then uses `git clean -fdX` to delete
9
+ all files ignored by Git (such as build outputs and temporary files).
10
10
 
11
11
  ```sh
12
12
  npx --yes @servicetitan/startup clean
@@ -4,179 +4,8 @@ title: install
4
4
 
5
5
  :::danger
6
6
  The `startup install` command is deprecated; please instead use [@servicetitan/install](../install).
7
+ :::
7
8
 
8
9
  As `@servicetitan/startup` grew more features, it became too large for simple bootstrapping. The
9
10
  dedicated `@servicetitan/install` package performs a single task and runs quickly. And because it
10
11
  has no runtime dependencies, also eliminates risks from third-party changes.
11
- :::
12
-
13
- import Tabs from '@theme/Tabs';
14
- import TabItem from '@theme/TabItem';
15
-
16
- Installs project dependencies.
17
-
18
- Use this command instead of plain `npm install` to guarantee that all packages are installed correctly and any necessary post-install steps are performed.
19
-
20
- ```sh
21
- npx --yes @servicetitan/startup install
22
- ```
23
-
24
- See [package.json in the example project](https://github.com/search?q=repo%3Aservicetitan%2Ffrontend-example+path%3A**%2Fpackage.json+%22startup+install%22&type=code) for how to use `install` in an npm script.
25
-
26
- ## Options
27
-
28
- | Option | Description |
29
- | :----------- | :----------------------------------------------------------------------- |
30
- | `--no-token` | Only install dependencies. Don't configure the npm authentication token. |
31
- | `--token` | Only configure the npm authentication token. Don't install dependencies. |
32
-
33
- ## Configuring NPM Token in Development
34
-
35
- In development environments, `startup install` automatically configures an npm authentication token that grants access to private ServiceTitan packages. It securely retrieves the token and updates your npm configuration so you can install dependencies without any further setup.
36
-
37
- :::tip
38
- If your project is using `startup` v31 or earlier, or isn't using `startup` at all, run this command to manually configure the npm authentication token.
39
-
40
- ```
41
- npx --yes @servicetitan/startup@latest install --token
42
- ```
43
-
44
- :::
45
-
46
- :::caution
47
- `startup install` detects if it is running in development by checking for standard environment variables set by CI systems (e.g.,`CI` and `TEAMCITY_VERSION`). If none of these variables are set, it assumes it is running on a developer machine.
48
- If it mistakes a CI environment for a developer machine, add a `CI` environment variable (with any value) to the workflow, or [use `--no-token`](#how-to-use---no-token) to disable configuring the npm token.
49
- :::
50
-
51
- ## Configuring NPM Token in CI
52
-
53
- In CI environments such as Teamcity and Github, use the `ST_NPM_READONLY_TOKEN` organization secret to grant access to private ServiceTitan packages. You can do this in two ways:
54
-
55
- ### Option 1: Inject into .npmrc (Recommended)
56
-
57
- The recommended method is to use `npm config set --location=project` to manually inject the organization secret into the project's `.npmrc`. For example,
58
-
59
- <Tabs
60
- defaultValue="github"
61
- values={[{ label: "Github Action", value: "github"}, {label: "Dockerfile", value: "docker"}]}>
62
-
63
- <TabItem value="github">
64
-
65
- ```yml
66
- - run: npm config set --location=project "//registry.npmjs.org/:_authToken"="${{ secrets.ST_NPM_READONLY_TOKEN }}"
67
- - run: npm run build
68
- ```
69
-
70
- Alternatively, in Github actions using `action/setup-node`, you can use `registry-url` and `env.NODE_AUTH_TOKEN` to have it configure the project level `.npmrc`. For example,
71
-
72
- ```yml
73
- - uses: actions/setup-node@v4
74
- registry-url: https://registry.npmjs.org
75
- env:
76
- NODE_AUTH_TOKEN: ${{ secrets.ST_NPM_READONLY_TOKEN }}
77
- ```
78
-
79
- </TabItem>
80
- <TabItem value="docker">
81
-
82
- ```dockerfile
83
- ARG NPM_READONLY_TOKEN
84
-
85
- RUN npm config set --location=project "//registry.npmjs.org/:_authToken=$NPM_READONLY_TOKEN"
86
- RUN npm run build
87
- ```
88
-
89
- </TabItem>
90
- </Tabs>
91
-
92
- ### Option 2: Use environment variable
93
-
94
- :::caution
95
- Using an environment variable is not recommended because it requires [extra steps](#how-to-configure-with-legacy-startup) to rotate the token in projects using `startup` v31 or earlier.
96
- :::
97
-
98
- To use an environment variable to configure the npm token, modify `.npmrc` to get the token from an environment variable,
99
-
100
- ```npmrc title=".npmrc"
101
- //registry.npmjs.org/:_authToken=${NPM_READONLY_TOKEN}
102
- ```
103
-
104
- Then, in the CI action, set that environment variable to the organization secret. For example,
105
-
106
- <Tabs
107
- defaultValue="github"
108
- values={[{ label: "Github Action", value: "github"}, {label: "Dockerfile", value: "docker"}]}>
109
-
110
- <TabItem value="github">
111
-
112
- ```yml
113
- - run: npm run build
114
- env:
115
- NPM_READONLY_TOKEN: ${{ secrets.ST_NPM_READONLY_TOKEN }}
116
- ```
117
-
118
- </TabItem>
119
- <TabItem value="docker">
120
-
121
- ```dockerfile
122
- ARG NPM_READONLY_TOKEN
123
-
124
- ENV NPM_READONLY_TOKEN=${NPM_READONLY_TOKEN}
125
-
126
- RUN npm run build
127
- ```
128
-
129
- </TabItem></Tabs>
130
-
131
- ## How to Configure Development Environment When Not Using Startup v32 or Later {#how-to-configure-with-legacy-startup}
132
-
133
- :::note
134
- These instructions are only for projects using [Option 2](#option-2-use-environment-variable) with `startup` v31 or earlier (or that are not using `startup` at all);
135
- `startup` v32 automatically detects and provides environment variables to `npm install`.
136
- :::
137
-
138
- If your project is [using an environment variable](#option-2-use-environment-variable), and it isn't using `startup` v32 or later, then developers must also defined the same environment variable manually. And they must repeat these steps each time the token is rotated,
139
-
140
- 1. Run `npx --yes @servicetitan/startup@latest install --token` to add the token to your per-user configuration.
141
- 2. Run `npm config get userconfig` to get the location of your per-user configuration file.
142
- 3. Find the token in the configuration file, on the line that starts `//registry.npmjs.org/:_authToken=`
143
- 4. Create a local environment variable with the token. Use the same variable name as in project's `.npmrc`.
144
-
145
- :::tip
146
- On MacOS you can accomplish steps 2 and 3 with this single command:
147
-
148
- ```sh
149
- grep registry.npmjs.org < $(npm config get userconfig)
150
- ```
151
-
152
- :::
153
-
154
- ## How to Use --no-token
155
-
156
- If startup mistakes your CI environment for a development machine and it isn't practical to add a `CI` environment variable to the workflow, use `--no-token` to instruct `startup install` not to attempt to configure the npm token.
157
-
158
- Create a `build:ci` script and accompanying pre script that runs `bootstrap` with `-- --no-token`:
159
-
160
- ```json title="package.json"
161
- "scripts": {
162
- "prebuild:ci": "npm run bootstrap -- --no-token",
163
- "build:ci": "startup build"
164
- },
165
- ```
166
-
167
- Then, call `build:ci` instead of `build` in the CI workflow:
168
-
169
- ```sh
170
- npm run build:ci
171
- ```
172
-
173
- :::note
174
- This assumes you're using this recommended `bootstrap` script:
175
-
176
- ```json
177
- "scripts": {
178
- "bootstrap": "npx --yes @servicetitan/startup install",
179
- }
180
- ```
181
-
182
- :::
@@ -0,0 +1,150 @@
1
+ ---
2
+ title: mfe-check
3
+ ---
4
+
5
+ import Tabs from '@theme/Tabs';
6
+ import TabItem from '@theme/TabItem';
7
+
8
+ Checks MFE/host dependency compatibility.
9
+
10
+ Use `mfe-check` to verify that an MFE's shared dependencies are compatible with the host application. This determines whether the MFE can use a "light" or "full" bundle (see [Sharing Dependencies](../microfrontends/sharing-dependencies)).
11
+
12
+ :::caution
13
+ The host must be configured to [expose shared dependencies](../microfrontends/hosting#configuration) else `mfe-check` exits with an error.
14
+ :::
15
+
16
+ ## Options
17
+
18
+ | Option | Description |
19
+ | :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
20
+ | `--metadata` | Path to MFE's `metadata.json` file, can be generated with the [`mfe-generate-metadata`](./mfe-generate-metadata) command (required). |
21
+ | `--host-package-json` | Path to host `package.json` file (required). Can be specified multiple times. |
22
+ | `--json` | Output results as JSON instead of human-readable format. Default: `false`. |
23
+
24
+ ## Usage
25
+
26
+ <Tabs>
27
+ <TabItem value="basic" label="Basic" default>
28
+
29
+ Run the `mfe-check` command to check compatibility with an MFE:
30
+
31
+ ```sh
32
+ npx startup mfe-check \
33
+ --metadata path/to/mfe/metadata.json \
34
+ --host-package-json path/to/host/package.json
35
+ ```
36
+
37
+ </TabItem>
38
+ <TabItem value="monorepo" label="Monorepo">
39
+
40
+ For monorepos with dependencies split across multiple `package.json` files, specify each one:
41
+
42
+ ```sh
43
+ npx startup mfe-check \
44
+ --metadata path/to/mfe/metadata.json \
45
+ --host-package-json path/to/host/app/package.json \
46
+ --host-package-json path/to/host/root/package.json
47
+ ```
48
+
49
+ :::caution
50
+ The first `--host-package-json` must be the host package's own `package.json`. This is the file from which the command reads the [`expose-shared-dependencies`](../microfrontends/hosting#configuration) (and [`shared-dependencies`](../microfrontends/sharing-dependencies)) configuration. Dependencies are merged from all specified files, with the first file's versions taking precedence.
51
+ :::
52
+
53
+ </TabItem>
54
+
55
+ </Tabs>
56
+
57
+ When the MFE and host have compatible dependencies, `mfe-check` exits with a zero status code. If they are incompatible, or there is an unexpected error, it exits with a non-zero status code.
58
+
59
+ ## Output
60
+
61
+ <Tabs>
62
+ <TabItem value="compatible" label="Compatible" default>
63
+
64
+ When all shared dependencies match, the light bundle of the MFE can be loaded:
65
+
66
+ ```
67
+ Checking @servicetitan/my-mfe...
68
+ Compatible: light bundle can be used
69
+ ```
70
+
71
+ </TabItem>
72
+ <TabItem value="mismatch" label="Version mismatch">
73
+
74
+ When dependency versions don't match, it lists the mismatched dependencies:
75
+
76
+ ```
77
+ Checking @servicetitan/my-mfe...
78
+ Dependency mismatch found:
79
+ react: host=18.2.0, package=^17.0.0
80
+ mobx: host=missing, package=^6.0.0
81
+ Result: full bundle required
82
+ ```
83
+
84
+ </TabItem>
85
+ <TabItem value="shared-dependencies-not-exposed" label="Shared dependencies not exposed">
86
+
87
+ When the host does not expose dependencies, it reports the error:
88
+
89
+ ```
90
+ Checking @servicetitan/my-mfe...
91
+ expose-shared-dependencies is not enabled in host package.json
92
+ Result: full bundle required
93
+ ```
94
+
95
+ </TabItem>
96
+ </Tabs>
97
+
98
+ ### JSON Output
99
+
100
+ <Tabs>
101
+ <TabItem value="json-compatible" label="Compatible" default>
102
+
103
+ ```json
104
+ {
105
+ "name": "@servicetitan/my-mfe",
106
+ "compatible": true,
107
+ "bundleType": "light",
108
+ "isSharedDependenciesEnabled": true,
109
+ "isHostMfe": false
110
+ }
111
+ ```
112
+
113
+ </TabItem>
114
+ <TabItem value="json-mismatch" label="Version Mismatch">
115
+
116
+ ```json
117
+ {
118
+ "name": "@servicetitan/my-mfe",
119
+ "compatible": false,
120
+ "bundleType": "full",
121
+ "isSharedDependenciesEnabled": true,
122
+ "isHostMfe": false,
123
+ "mismatches": {
124
+ "react": { "host": "18.2.0", "package": "^17.0.0" },
125
+ "mobx": { "host": "missing", "package": "^6.0.0" }
126
+ }
127
+ }
128
+ ```
129
+
130
+ </TabItem>
131
+ <TabItem value="shared-dependencies-not-exposed" label="Shared dependencies not exposed">
132
+
133
+ ```json
134
+ {
135
+ "name": "@servicetitan/my-mfe",
136
+ "compatible": false,
137
+ "bundleType": "full",
138
+ "isSharedDependenciesEnabled": false,
139
+ "isHostMfe": false
140
+ }
141
+ ```
142
+
143
+ </TabItem>
144
+ </Tabs>
145
+
146
+ ## See Also
147
+
148
+ - [`mfe-generate-metadata`](./mfe-generate-metadata) - Generate MFE metadata for compatibility checking
149
+ - [Sharing Dependencies](../microfrontends/sharing-dependencies) - Learn about shared dependencies
150
+ - [Frontend Example](https://github.com/servicetitan/frontend-example/blob/master/.github/workflows/mfe-check-shared-dependencies-trigger.yml) - Example workflow that automates compatibility check
@@ -0,0 +1,26 @@
1
+ ---
2
+ title: mfe-generate-metadata
3
+ ---
4
+
5
+ Generates MFE metadata for compatibility checking.
6
+
7
+ Use `mfe-generate-metadata` to produce a `metadata.json` file containing information about the MFE's shared dependencies, bundled versions, and entrypoints. This metadata is used by the [`mfe-check`](./mfe-check) command to check compatibility between an MFE and a host application.
8
+
9
+ :::note
10
+ This command must be run from within an MFE directory.
11
+ :::
12
+
13
+ ```sh
14
+ npx startup mfe-generate-metadata --output metadata.json
15
+ ```
16
+
17
+ ## Options
18
+
19
+ | Option | Description |
20
+ | :--------- | :----------------------------------------------------------------- |
21
+ | `--output` | Output file path. If not specified, metadata is written to stdout. |
22
+
23
+ ## See Also
24
+
25
+ - [`mfe-check`](./mfe-check) - Check MFE/host dependency compatibility
26
+ - [Sharing Dependencies](../microfrontends/sharing-dependencies) - Learn about shared dependencies
@@ -2,7 +2,7 @@
2
2
  title: mfe-publish
3
3
  ---
4
4
 
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.
5
+ This is an umbrella command for publishing, unpublishing (cleaning up), and rolling back 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
 
@@ -29,6 +29,17 @@ Do not use the `@latest` tag for production deployments because it could be assi
29
29
  | `--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. |
30
30
  | `--dry` | Log what the command would do without actually unpublishing anything. |
31
31
 
32
+ ## Rollback options
33
+
34
+ ✨ New in **v34.0.0** ✨
35
+
36
+ | Option | Description |
37
+ | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38
+ | `--rollback` | Instructs `mfe-publish` to rollback a tagged version to its previous version instead of publishing. |
39
+ | `--tag <string>` | **Required when using `--rollback`**. The tag to rollback to its previous version. The command will look for a rollback version with the suffix `-rollback-1`. |
40
+ | `--scope <string>` | Specify one or more packages to rollback. Can be used multiple times: `--scope pkg1 --scope pkg2`. |
41
+ | `--dry` | Log what the command would do without actually performing the rollback. |
42
+
32
43
  ## Branch configs
33
44
 
34
45
  ✨ New in **v28.1.1** ✨
@@ -556,6 +556,46 @@ To manually hoist packages to the root `node_modules`:
556
556
 
557
557
  ---
558
558
 
559
+ ### require-tsconfig-references
560
+
561
+ Ensures that TypeScript project references are configured for all local workspace dependencies.
562
+
563
+ When a package depends on another package in the workspace, the `tsconfig.json` (and any config that extends it, such as `tsconfig.build.json`) should include a reference to that dependency's tsconfig. This enables incremental builds and ensures proper type checking across package boundaries.
564
+
565
+ #### ✅ Autofix
566
+
567
+ This rule supports autofix.
568
+ It adds missing references to both the main tsconfig and any extended configs. For example, given:
569
+
570
+ ```json title="packages/my-package/package.json"
571
+ {
572
+ "dependencies": {
573
+ "common": "1.0.0"
574
+ }
575
+ }
576
+ ```
577
+
578
+ And,
579
+
580
+ ```json title="packages/my-package/tsconfig.json"
581
+ {
582
+ "compilerOptions": { ... }
583
+ }
584
+ ```
585
+
586
+ It updates the tsconfig to:
587
+
588
+ ```json title="packages/my-package/tsconfig.json"
589
+ {
590
+ "compilerOptions": { ... },
591
+ "references": [
592
+ { "path": "../common/tsconfig.json" }
593
+ ]
594
+ }
595
+ ```
596
+
597
+ ---
598
+
559
599
  ### require-servicetitan-scope
560
600
 
561
601
  Checks that public packages are scoped to the `@servicetitan` namespace.
@@ -22,7 +22,7 @@ npx -yes http-server packages/application/dist/bundle
22
22
  | `--code-coverage` | Add [instrumentation](https://github.com/JS-DevTools/coverage-istanbul-loader) to bundled code in order to collect code coverage |
23
23
  | `--use-tsc` | Use TSC for TypeScript compilation |
24
24
 
25
- ## Start steps
25
+ ## Start Steps
26
26
 
27
27
  The `start` command executes the same steps as the `build` command, then watches for changes and automatically reruns each step as needed.
28
28
 
@@ -29,6 +29,8 @@ Updating build tooling is typically a daunting and time-consuming task. When new
29
29
  - [install](./install) install project dependencies
30
30
  - [kendo-ui-license](./kendo-ui-license) install KendoReact license key
31
31
  - [lint](./lint) run eslint and stylelint
32
+ - [mfe-check](./mfe-check) check MFE/host dependency compatibility
33
+ - [mfe-generate-metadata](./mfe-generate-metadata) generate MFE metadata for compatibility checking
32
34
  - [mfe-list](./mfe-list) list published MFE packages
33
35
  - [mfe-publish](./mfe-publish) publish or unpublish MFE packages
34
36
  - [review](./review) check project for configuration errors
@@ -2,7 +2,7 @@
2
2
  title: useMFEDataContext
3
3
  ---
4
4
 
5
- If data is provided to an MFE via `<Loader>`, the data can be accessed within the MFE using the `useMFEDataContext` hook. You must provide the type of the data you expect to receive.
5
+ If data is provided to an MFE via `<Loader>`, the data can be accessed within the MFE using the `useMFEDataContext` hook. You must provide the type of the data you expect to receive.
6
6
 
7
7
  ```tsx
8
8
  import { useMFEDataContext } from '@servicetitan/web-components';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@servicetitan/docs-uikit",
3
- "version": "33.1.1",
4
- "description": "",
3
+ "version": "34.0.1",
4
+ "description": "Documentation content for Uikit packages published at docs.st.dev",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/servicetitan/uikit.git",
@@ -16,5 +16,5 @@
16
16
  "cli": {
17
17
  "webpack": false
18
18
  },
19
- "gitHead": "36ff4078b07d6c86bdf968b7f8b3c0adbe03fd4c"
19
+ "gitHead": "e42375d199bbc11b2f0b8881c26a8f0229446256"
20
20
  }