@servicetitan/docs-uikit 32.3.1 → 32.4.0

package/docs/web-components/use-prefetch.mdx

@@ -0,0 +1,61 @@
+---
+title: usePrefetch
+---
+
+Use `usePrefetch` to improve perceived performance by preloading MFE resources just before they're needed.
+It returns a function that prefetches and adds MFE resources to the [Loader cache](./loader#cache-strategy), so subsequent loads are faster.
+
+- Returns a `prefetch` function you can call with an MFE URL
+- Automatically caches resources for subsequent loads
+- Safely handles multiple prefetch calls for the same URL
+- Integrates with the existing Loader caching strategy
+
+:::tip
+You are encouraged to use prefetching broadly, for example to prefetch all significant MFEs and any others that are commonly used.
+:::
+
+## Return Value
+
+| Name       | Description                                                      |
+| :--------- | :--------------------------------------------------------------- |
+| `prefetch` | A function that takes an MFE's URL and prefetches its resources. |
+
+### Prefetch Parameters
+
+The `prefetch` function returned by `usePrefetch` takes the following arguments:
+
+| Name      | Type     | Description                                   |
+| :-------- | :------- | :-------------------------------------------- |
+| `src`     | `string` | The `src` URL passed to [`Loader`](./loader). |
+| `options` | `object` | (Optional) Prefetch options                   |
+
+### Prefetch Options
+
+| Option  | Type                | Default | Description                                                                  |
+| ------- | ------------------- | ------- | ---------------------------------------------------------------------------- |
+| `cache` | `boolean \| number` | `-1`    | (Optional) The [cache strategy](./loader#cache-strategy) passed to `Loader`. |
+
+## Usage
+
+This example demonstrates prefetching resources when the user hovers over a button that displays an MFE.
+
+```tsx
+import { useState } from 'react';
+import { Button, Flex } from '@servicetitan/anvil2';
+import { Loader, usePrefetch } from '@servicetitan/web-components';
+
+export const MFEPage = () => {
+    const mfeUrl = 'http://localhost:8888';
+    const [showMfe, setShowMfe] = useState(false);
+    const { prefetch } = usePrefetch();
+
+    return (
+        <Flex direction="column" gap="4">
+            <Button onMouseEnter={() => prefetch(mfeUrl)} onClick={() => setShowMfe(show => !show)}>
+                {showMfe ? 'Hide MFE' : 'Show MFE'}
+            </Button>
+            {showMfe && <Loader src={mfeUrl} />}
+        </Flex>
+    );
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-uikit",
-    "version": "32.3.1",
+    "version": "32.4.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "a2d0b80586285dbe4c657a4cf44b4c4fe69362c1"
+    "gitHead": "836bcc0dc0859bf1ac0d3c679996e7b753893674"
 }