@servicetitan/docs-uikit 32.6.0 → 32.7.0

package/docs/log-service.mdx

@@ -64,7 +64,7 @@ export interface LogError extends LogEntry {
 
 ### LogService
 
-Use `LogService` to provide a `Log` instance in standalone applications, or to copy an MFEs events to a private endpoint.
+Use `LogService` to provide a `Log` instance in standalone applications, or to copy an MFE's events to a private endpoint.
 
 #### Props
 

package/docs/microfrontends/hosting.mdx

@@ -24,7 +24,7 @@ Set `cli.webpack.expose-shared-dependencies` to `true` in the application's `pac
 
 ### Design system
 
-If the host uses `@servicetitan/design-system` remove all imports of design system styles form the code; `startup` handles that automatically. Alternatively, to customize the design system styles, move the imports to a file named `design-system.css` in the root directory of the application's source folder (the `rootDir` in `tsconfig.json`). E.g.,
+If the host uses `@servicetitan/design-system` remove all imports of design system styles from the code; `startup` handles that automatically. Alternatively, to customize the design system styles, move the imports to a file named `design-system.css` in the root directory of the application's source folder (the `rootDir` in `tsconfig.json`). E.g.,
 
 ```css title="design-system.css"
 @import '@servicetitan/tokens/dist/tokens.css';

package/docs/microfrontends/publishing.mdx

@@ -81,7 +81,7 @@ When a tag is switched to a new version, it could take ServiceTitan's infrastruc
 ### Common workflows
 
 - **Canary testing**: publish MFE as `0.0.0-develop.{hash}` and tag as **dev** for early testing.
-- **Staging promotion**: point **next** to the version used to use in pre-production environments.
+- **Staging promotion**: point **next** to the version to use in pre-production environments.
 - **Production promotion**: point **prod** to the release that passed staging.
 - **Rollback**: repoint a tag to the previous good version to revert consumers.
 

package/docs/microfrontends/sharing-dependencies.mdx

@@ -9,7 +9,7 @@ When `startup` builds an MFE, it creates two bundles, named **full** and **light
 
 At runtime, the host loads the **light** bundle when its shared dependencies are compatible with the MFE's, else it loads the **full** bundle.
 
-To be compatible, the host's version of a dependency must satisfy the MFE's [semver](https://semver.org) range. To allow the widest compatibility MFEs should use `^` instead of `~` for shared dependencies. For example, a host using `react` `18.3.1` will consider itself compatible with an MFEs that depends on `^18.2.0`, and incompatible with an MFE that depends on `~18.2.0`.
+To be compatible, the host's version of a dependency must satisfy the MFE's [semver](https://semver.org) range. To allow the widest compatibility MFEs should use `^` instead of `~` for shared dependencies. For example, a host using `react` `18.3.1` will consider itself compatible with an MFE that depends on `^18.2.0`, and incompatible with an MFE that depends on `~18.2.0`.
 
 By default, MFEs and hosts share the following dependencies (see [here](https://github.com/search?q=repo%3Aservicetitan%2Fuikit+getDefaultSharedDependencies&type=code) for the most up-to-date list):
 

package/docs/startup/build.mdx

@@ -258,10 +258,10 @@ For MFEs the approach is slightly different, see [Customizing Webpack for MFEs](
 
 `createWebpackConfig` takes an object with two fields, `configuration` and `plugins`.
 
-| Field           | Description                                                                                                                                                                                        |
-| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `configuration` | Merged with the defaults to produce the final webpack configuration. For production builds, **configuration.mode** must be set to "production". For development builds, set it to "development".   |
-| `plugins`       | `HtmlWebpackPlugin` and `MiniCssExtractPlugin` subkeys are merged with the default configurations for the corresponding plugins. (Note, `MiniCssExtractPlugin` only applies to production builds.) |
+| Field           | Description                                                                                                                                                                                      |
+| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `configuration` | Merged with the defaults to produce the final webpack configuration. For production builds, **configuration.mode** must be set to "production". For development builds, set it to "development". |
+| `plugins`       | `HtmlWebpackPlugin` and `MiniCssExtractPlugin` subkeys are merged with the default configurations for the corresponding plugins.                                                                 |
 
 For example,
 

package/docs/startup/test/test.mdx

@@ -66,6 +66,52 @@ Run a specific test with Vitest:
 npx startup test --runner vitest app.test.tsx
 ```
 
+## SVG Transformation
+
+✨ New in **v32.7.0** ✨
+
+Startup automatically mocks SVG imports, allowing you to include SVGs in tests without additional configuration. It applies the same [SVG transformations](../build#svg-transformation) as the [build](../build) command.
+
+- Imports from `@servicetitan/anvil2` become React components
+- Imports from elsewhere become strings
+- `?component` and `?asset` params override the default behavior
+
+### Component SVGs
+
+Component SVGs render with `href` set to the asset's path and `id` set to the asset's filename. For example,
+
+```tsx
+import ExpandMore from '@servicetitan/anvil2/icons/material/round/expand_more.svg';
+
+export const MyIcon = () => <ExpandMore className="expand-more-icon" />;
+```
+
+Renders,
+
+```html
+<svg
+    class="expand-more-icon"
+    href="@servicetitan/anvil2/dist/assets/icons/material/round/expand_more.svg"
+    id="expand_more.svg"
+/>
+```
+
+### Asset SVGs
+
+Asset SVGs render as the asset's path. For example,
+
+```tsx
+import ExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg?asset';
+
+export const MyIcon = () => <img src={ExpandMore} />;
+```
+
+Renders,
+
+```html
+<img src="@servicetitan/anvil2/assets/icons/material/round/expand_more.svg" />
+```
+
 ## Configuration
 
 - [Jest](./jest)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-uikit",
-    "version": "32.6.0",
+    "version": "32.7.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "c771c468d179a828a75b0316bb9b01f311d13591"
+    "gitHead": "673fb6b56865da309c09f91b4ebf30aaf815a562"
 }