@servicetitan/docs-uikit 32.0.1 → 32.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.
@@ -2,52 +2,7 @@
2
2
  title: HeadlessLoader
3
3
  ---
4
4
 
5
- The headless bundle is a tiny bundle that allows a host to preload configuration or setup information without having to load the entire MFE. The headless bundle does not utilize React, and cannot use any modules that require React.
6
-
7
- ## Generating headless bundle
8
-
9
- To generate a headless bundle, create a file named `headless.ts` in the root directory of the MFE's source folder. When this file is present, startup generates a `headless` bundle alongside the `light` and `full` bundles. Only what is imported in `headless.ts` will be included in the bundle.
10
-
11
- `headless.ts` should contain exported functions named `connectedCallback` and/or `disconnectedCallback`.
12
-
13
- ### `connectedCallback`
14
-
15
- `connectedCallback` will be called when the bundle is loaded in the host. It should be typed as `HeadlessCallback<T>`.
16
-
17
- ```ts title="src/headless.ts"
18
- import type { HeadlessCallback } from '@servicetitan/web-components';
19
- export const connectedCallback: HeadlessCallback<ExampleData> = ({ mfeData, eventBus }) => {
20
- doSomethingWithMfeData(mfeData);
21
- eventBus?.emit('example-module:status', { status: 'connected', timestamp: Date.now() });
22
- };
23
- ```
24
-
25
-
26
- ### `disconnectedCallback`
27
-
28
- `disconnectedCallback` will be called when the headless MFE is unmounted. It should be typed as `HeadlessCallback<T>`.
29
-
30
- ```ts title="src/headless.ts"
31
- import type { HeadlessCallback } from '@servicetitan/web-components';
32
- export const disconnectedCallback: HeadlessCallback = ({ eventBus }) => {
33
- eventBus?.emit('example-module:status', { status: 'disconnected', timestamp: Date.now() });
34
- };
35
- ```
36
-
37
- ### `HeadlessCallback`
38
-
39
- The `HeadlessCallback<TMfeData = any, TEventBus extends EventBus = EventBus>` type is a function that receives an object with the below properties:
40
-
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
-
48
- ## HeadlessLoader
49
-
50
- Use the `HeadlessLoader` component to load this bundle from within a host application.
5
+ Use `HeadlessLoader` to load a [headless bundle](../microfrontends/developing/headless-bundle) in a host application.
51
6
 
52
7
  ```tsx
53
8
  import { HeadlessLoader } from '@servicetitan/web-components';
@@ -57,7 +12,7 @@ export const Foo = () => {
57
12
  };
58
13
  ```
59
14
 
60
- ### Props {#headless-loader-props}
15
+ ## Props {#headless-loader-props}
61
16
 
62
17
  | Name | Description |
63
18
  | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -7,7 +7,7 @@ import TabItem from '@theme/TabItem';
7
7
 
8
8
  ## Loader
9
9
 
10
- The `Loader` component is used to load an MFE into a host application. See [Microfrontends (MFEs)](/docs/frontend/micro-frontends) for more information about how MFEs are injected.
10
+ Use `Loader` to load an MFE into a host application.
11
11
 
12
12
  ### Usage
13
13
 
@@ -31,7 +31,7 @@ export const Foo = () => {
31
31
  | `loadingFallbackDelayed` | controls whether to render the loading fallback immediately, or after a short delay [(see below)](#fallback-delay) |
32
32
  | `errorFallback` | optional ReactNode to render when the MFE fails to load |
33
33
  | `className` | additional CSS classes for the MFE web component element |
34
- | `cache` | optional cache strategy for the MFE [(see below)](#cache-strategy). Defaults to `-1`. |
34
+ | `cache` | optional cache strategy for the MFE [(see below)](#cache-strategy). Defaults to `-1`. |
35
35
 
36
36
  ### Loading fallback delay {#fallback-delay}
37
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/docs-uikit",
3
- "version": "32.0.1",
3
+ "version": "32.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": "2b74dd72d39c2023151699d1cf7a6e6130d64279"
19
+ "gitHead": "76a83fea33e04809b97c72720751878b1e3002d7"
20
20
  }
@@ -1,205 +0,0 @@
1
- ---
2
- title: test
3
- ---
4
-
5
- Runs your project's tests.
6
-
7
- - Supports both Jest and Vitest.
8
- - Automatically selects the test runner based on your workspace configuration or the `--runner` option.
9
- - Handles runner-specific arguments and passes them through to the underlying test tool.
10
-
11
- ## Usage
12
-
13
- Run all tests with Jest (default):
14
-
15
- ```sh
16
- npx startup test
17
- ```
18
-
19
- Run all tests with Vitest:
20
-
21
- ```sh
22
- npx startup test --runner vitest
23
- ```
24
-
25
- :::tip
26
- Use the double-dash (--) separator to pass arguments to an `npm` script.
27
- This separator indicates that any arguments following it should be passed directly to the script being executed, rather than being interpreted by `npm` itself.
28
- For example, given the standard `startup test` script:
29
-
30
- ```json
31
- {
32
- "test": "npx startup test"
33
- }
34
- ```
35
-
36
- Running,
37
-
38
- ```sh
39
- npm run test -- --runner vitest
40
- ```
41
-
42
- Executes,
43
-
44
- ```sh
45
- npx startup test --runner vitest
46
- ```
47
-
48
- :::
49
-
50
- ## Running Specific Tests
51
-
52
- To run specific tests, pass their file names or paths as additional arguments.
53
- This works just like running Jest and Vitest directly, simply specify the file(s) you want to test:
54
-
55
- ### Examples
56
-
57
- Run a specific test with Jest (default):
58
-
59
- ```sh
60
- npx startup test app.test.tsx
61
- ```
62
-
63
- Run a specific test with Vitest:
64
-
65
- ```sh
66
- npx startup test --runner vitest app.test.tsx
67
- ```
68
-
69
- ## Using Jest
70
-
71
- The `startup test` command uses the Jest test runner by default.
72
-
73
- ### Configuration
74
-
75
- The Jest runner provides a default, built-in configuration optimized for ServiceTitan workspaces.
76
-
77
- You can override the defaults by specifying [Jest options](https://jestjs.io/docs/configuration) in your workspace `package.json` under the `"cli.jest"` key (the `"cli.test"` key also works, for backward compatibility). You can also use a standard Jest config file (such as `jest.config.js`) to override defaults.
78
-
79
- Any options passed directly via the command line (e.g., `npx startup test --coverage`) take the highest precedence.
80
-
81
- :::caution
82
- If your project includes a standard Jest config file and also specifies Jest options in the workspace `package.json`, ensure that the configurations are mutually exclusive.
83
- To avoid confusing or unexpected behavior, do not specify the same setting in both locations.
84
- :::
85
-
86
- ### Examples
87
-
88
- Use the workspace `package.json` to set up code that runs before each test file is executed:
89
-
90
- ```json title="package.json"
91
- {
92
- "cli": {
93
- "jest": {
94
- "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
95
- }
96
- }
97
- }
98
- ```
99
-
100
- :::note
101
- For backward compatibility, you may also use the `ci.test` key:
102
- :::
103
-
104
- ---
105
-
106
- Use `jest.config.js` to increase Jest's `testTimeout` on Windows:
107
-
108
- ```js title="jest.config.js"
109
- module.exports = {
110
- testTimeout: process.platform === 'win32' ? 60 * 1000 : undefined, // increase timeout on Windows
111
- };
112
- ```
113
-
114
- ---
115
-
116
- Use the command line to collect test coverage:
117
-
118
- ```sh
119
- npx startup test --coverage
120
- ```
121
-
122
- Use the command line to enable Jest's watch mode:
123
-
124
- ```sh
125
- npx startup test --watch
126
- ```
127
-
128
- ## Using Vitest
129
-
130
- ✨ New in **v31.6.0** ✨
131
-
132
- You can change the default test runner to `vitest` in your workspace's `package.json`:
133
-
134
- ```json title="package.json"
135
- {
136
- "cli": {
137
- "testRunner": "vitest"
138
- }
139
- }
140
- ```
141
-
142
- Or override it per invocation with the `--runner` option.
143
-
144
- ### Configuration
145
-
146
- The Vitest runner uses a layered configuration approach to provide sensible defaults while allowing full customization.
147
-
148
- - Uses the default, built-in configuration as a base.
149
- - Applies workspace overrides from `package.json`.
150
- - Applies overrides from your Vitest config file.
151
- - Applies command line options last.
152
-
153
- 1. **Default Configuration:**
154
- The runner starts with a built-in default configuration optimized for ServiceTitan workspaces. This includes sensible coverage settings, the environment (`jsdom`), file exclusions, and more.
155
-
156
- 2. **Workspace Configuration:**
157
- You can override defaults by specifying [Vitest options](https://vitest.dev/config) in your workspace `package.json` under the `"cli.vitest"` key.
158
-
159
- 3. **Vitest Config File:**
160
- If your project includes a standard Vitest config file (such as `vitest.config.ts` or `vite.config.ts`), its settings will override both the defaults and workspace configuration.
161
-
162
- 4. **Command Line Arguments:**
163
- Any options passed directly via the command line (e.g., `npx startup test --runner vitest --coverage`) take highest precedence and override all previous configuration layers.
164
-
165
- ### Examples
166
-
167
- Use workspace `package.json` to make `vitest` APIs available [globally](https://vitest.dev/config/#globals) like Jest:
168
-
169
- ```json title="package.json"
170
- {
171
- "cli": {
172
- "vitest": {
173
- "globals": true
174
- }
175
- }
176
- }
177
- ```
178
-
179
- ---
180
-
181
- Use Vitest config file to disable watch mode:
182
-
183
- ```ts title="vitest.config.mts"
184
- import { defineConfig } from 'vitest/config';
185
-
186
- export default defineConfig({
187
- test: {
188
- watch: false,
189
- },
190
- });
191
- ```
192
-
193
- ---
194
-
195
- Use the command line to disable watch mode:
196
-
197
- ```sh
198
- npx startup test --runner vitest --run
199
- ```
200
-
201
- Use the command line to collect code coverage:
202
-
203
- ```sh
204
- npx startup test --runner vitest --coverage
205
- ```