Ilia Mashkov
728380498b
Both names were vague or overloaded: - fontStore / FontStore -> fontCatalogStore / FontCatalogStore Three font-related stores live in this slice; the new name names the paginated catalog specifically. - appliedFontsManager / AppliedFontsManager -> fontLifecycleManager / FontLifecycleManager "Applied" collided with the filter-side appliedFilterStore (different meaning). The class actually orchestrates a load-use-evict lifecycle with FontBufferCache + FontEvictionPolicy + FontLoadQueue collaborators, so "Manager" is justified. Companion types file moved alongside (appliedFonts.ts -> fontLifecycle.ts). Directories, file basenames, factory (createFontStore -> createFontCatalogStore), and the AppliedFontsManagerDeps interface all renamed. All consumers (ComparisonView, SampleList, FontList, FontApplicator, FontVirtualList, FilterAndSortFonts bindings, createFontRowSizeResolver, mocks) updated.
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 { cn } from '$shared/lib';
|
|
import type { Snippet } from 'svelte';
|
|
import {
|
|
DEFAULT_FONT_WEIGHT,
|
|
type UnifiedFont,
|
|
fontLifecycleManager,
|
|
} 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(
|
|
fontLifecycleManager.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={cn(className)}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
{/if}
|