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
This commit is contained in:
alex 2024-04-22 11:32:22 +01:00 committed by GitHub
parent 4507ce6378
commit cce794e04b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 68 additions and 0 deletions

View file

@ -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

View file

@ -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;

View file

@ -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)",

View file

@ -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 {

View file

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