Expose `usePreloadAssets` (#3545)

Expose `usePreloadAssets` and make sure the exploded/sublibraries
examples uses it. Before this change, fonts weren't loaded correctly for
the exploded example.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `bugfix` — Bug fix

apps/examples/src/examples/exploded/ExplodedExample.tsx

@@ -1,6 +1,8 @@
 import {
 	ContextMenu,
 	DefaultContextMenuContent,
+	ErrorScreen,
+	LoadingScreen,
 	TldrawEditor,
 	TldrawHandles,
 	TldrawScribble,
@@ -10,7 +12,9 @@ import {
 	defaultShapeTools,
 	defaultShapeUtils,
 	defaultTools,
+	usePreloadAssets,
 } from 'tldraw'
+import { defaultEditorAssetUrls } from 'tldraw/src/lib/utils/static-assets/assetUrls'
 import 'tldraw/tldraw.css'
 
 // There's a guide at the bottom of this file!
@@ -26,6 +30,16 @@ const defaultComponents = {
 
 //[2]
 export default function ExplodedExample() {
+	const assetLoading = usePreloadAssets(defaultEditorAssetUrls)
+
+	if (assetLoading.error) {
+		return <ErrorScreen>Could not load assets.</ErrorScreen>
+	}
+
+	if (!assetLoading.done) {
+		return <LoadingScreen>Loading assets...</LoadingScreen>
+	}
+
 	return (
 		<div className="tldraw__editor">
 			<TldrawEditor

packages/tldraw/api-report.md

@@ -2545,6 +2545,12 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): reado
 // @public (undocumented)
 export function useNativeClipboardEvents(): void;
 
+// @public (undocumented)
+export function usePreloadAssets(assetUrls: TLEditorAssetUrls): {
+    done: boolean;
+    error: boolean;
+};
+
 // @public (undocumented)
 export function useReadonly(): boolean;
 

packages/tldraw/api/api.json

@@ -27982,6 +27982,52 @@
           "parameters": [],
           "name": "useNativeClipboardEvents"
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "tldraw!usePreloadAssets:function(1)",
+          "docComment": "/**\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function usePreloadAssets(assetUrls: "
+            },
+            {
+              "kind": "Reference",
+              "text": "TLEditorAssetUrls",
+              "canonicalReference": "tldraw!~TLEditorAssetUrls:type"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    done: boolean;\n    error: boolean;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts",
+          "returnTypeTokenRange": {
+            "startIndex": 3,
+            "endIndex": 4
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "assetUrls",
+              "parameterTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isOptional": false
+            }
+          ],
+          "name": "usePreloadAssets"
+        },
         {
           "kind": "Function",
           "canonicalReference": "tldraw!useReadonly:function(1)",

packages/tldraw/src/index.ts

@@ -87,6 +87,7 @@ export { useExportAs } from './lib/ui/hooks/useExportAs'
 export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
 export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
 export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
+export { usePreloadAssets } from './lib/ui/hooks/usePreloadAssets'
 export { useReadonly } from './lib/ui/hooks/useReadonly'
 export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
 export {

packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts

@@ -56,6 +56,7 @@ function getTypefaces(assetUrls: TLEditorAssetUrls) {
 	}
 }
 
+/** @public */
 export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
 	const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])