From cce794e04be380e6839ecfaad29730786172d423 Mon Sep 17 00:00:00 2001
From: alex <alex@dytry.ch>
Date: Mon, 22 Apr 2024 11:32:22 +0100
Subject: [PATCH] Expose `usePreloadAssets` (#3545)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../src/examples/exploded/ExplodedExample.tsx | 14 ++++++
 packages/tldraw/api-report.md                 |  6 +++
 packages/tldraw/api/api.json                  | 46 +++++++++++++++++++
 packages/tldraw/src/index.ts                  |  1 +
 .../src/lib/ui/hooks/usePreloadAssets.ts      |  1 +
 5 files changed, 68 insertions(+)

diff --git a/apps/examples/src/examples/exploded/ExplodedExample.tsx b/apps/examples/src/examples/exploded/ExplodedExample.tsx
index f53dce67c..5f9d0e09b 100644
--- a/apps/examples/src/examples/exploded/ExplodedExample.tsx
+++ b/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
diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md
index d5bc01f14..d48e31f58 100644
--- a/packages/tldraw/api-report.md
+++ b/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;
 
diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json
index a68690d00..1210a98fc 100644
--- a/packages/tldraw/api/api.json
+++ b/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)",
diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts
index cc2a98d15..6f37098e5 100644
--- a/packages/tldraw/src/index.ts
+++ b/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 {
diff --git a/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts b/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts
index 7aa1f23e3..0adc2f9ba 100644
--- a/packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts
+++ b/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])