Ilia Mashkov
69 lines
1.4 KiB
Svelte
69 lines
1.4 KiB
Svelte
<!--
|
|
Component: FontApplicator
|
|
Applies a font to its children once the font file is loaded.
|
|
Shows the skeleton snippet while loading; falls back to system font if no skeleton is provided.
|
|
-->
|
|
<script lang="ts">
|
|
import clsx from 'clsx';
|
|
import type { Snippet } from 'svelte';
|
|
import {
|
|
DEFAULT_FONT_WEIGHT,
|
|
type UnifiedFont,
|
|
appliedFontsManager,
|
|
} from '../../model';
|
|
|
|
interface Props {
|
|
/**
|
|
* Font to apply
|
|
*/
|
|
font: UnifiedFont;
|
|
/**
|
|
* Font weight
|
|
* @default 400
|
|
*/
|
|
weight?: number;
|
|
/**
|
|
* CSS classes
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children?: Snippet;
|
|
/**
|
|
* Shown while the font file is loading.
|
|
* When omitted, children render in system font until ready.
|
|
*/
|
|
skeleton?: Snippet;
|
|
}
|
|
|
|
let {
|
|
font,
|
|
weight = DEFAULT_FONT_WEIGHT,
|
|
className,
|
|
children,
|
|
skeleton,
|
|
}: Props = $props();
|
|
|
|
const status = $derived(
|
|
appliedFontsManager.getFontStatus(
|
|
font.id,
|
|
weight,
|
|
font.features?.isVariable,
|
|
),
|
|
);
|
|
|
|
const shouldReveal = $derived(status === 'loaded' || status === 'error');
|
|
</script>
|
|
|
|
{#if !shouldReveal && skeleton}
|
|
{@render skeleton()}
|
|
{:else}
|
|
<div
|
|
style:font-family={shouldReveal ? `'${font.name}'` : 'system-ui, -apple-system, sans-serif'}
|
|
class={clsx(className)}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
{/if}
|