refactor: extract BatchFontStore into new FetchFontsByIds feature

The byId font fetch was a verb-oriented capability with a single
consumer driven by a feature need (materializing comparison picks).
That shape belongs at the feature layer, not on the entity.

Move:
- entities/Font/model/store/batchFontStore -> features/FetchFontsByIds/model/store/fontsByIdsStore
- Class BatchFontStore -> FontsByIdsStore

entities/Font retains the transport primitives (fetchFontsByIds,
seedFontCache) and the keyspace (fontKeys); the feature wraps them in
the reactive store. comparisonStore now imports FontsByIdsStore from
the new feature. The proxy API is imported via direct path so vi.spyOn
on the source module still observes the call.
This commit is contained in:
Ilia Mashkov
2026-05-24 19:41:40 +03:00
parent df59dfda02
commit 07d044f4d6
8 changed files with 37 additions and 42 deletions
@@ -7,14 +7,13 @@
*
* Features:
* - Persistent font selection (survives page refresh)
* - Font loading state tracking via BatchFontStore + TanStack Query
* - Font loading state tracking via FontsByIdsStore + TanStack Query
* - Sample text management
* - Typography controls (size, weight, line height, spacing)
* - Slider position for character-by-character morphing
*/
import {
BatchFontStore,
type FontLoadRequestConfig,
type UnifiedFont,
appliedFontsManager,
@@ -22,6 +21,7 @@ import {
getFontUrl,
} from '$entities/Font';
import { typographySettingsStore } from '$features/AdjustTypography/model';
import { FontsByIdsStore } from '$features/FetchFontsByIds';
import { createPersistentStore } from '$shared/lib';
import { untrack } from 'svelte';
import { getPretextFontString } from '../../lib';
@@ -51,7 +51,7 @@ const storage = createPersistentStore<ComparisonState>('glyphdiff:comparison', {
/**
* Store for managing font comparison state.
*
* Uses BatchFontStore (TanStack Query) to fetch fonts by ID, replacing
* Uses FontsByIdsStore (TanStack Query) to fetch fonts by ID, replacing
* the previous hand-rolled async fetch approach. Three reactive effects
* handle: (1) syncing batch results into fontA/fontB, (2) triggering the
* CSS Font Loading API, and (3) falling back to default fonts when
@@ -85,17 +85,17 @@ export class ComparisonStore {
/**
* TanStack Query-backed store for efficient batch font retrieval
*/
#batchStore: BatchFontStore;
#fontsByIdsStore: FontsByIdsStore;
constructor() {
// Synchronously seed the batch store with any IDs already in storage
const { fontAId, fontBId } = storage.value;
this.#batchStore = new BatchFontStore(fontAId && fontBId ? [fontAId, fontBId] : []);
this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
$effect.root(() => {
// Effect 1: Sync batch results → fontA / fontB
$effect(() => {
const fonts = this.#batchStore.fonts;
const fonts = this.#fontsByIdsStore.fonts;
if (fonts.length === 0) {
return;
}
@@ -157,7 +157,7 @@ export class ComparisonStore {
const id1 = fonts[0].id;
const id2 = fonts[fonts.length - 1].id;
storage.value = { fontAId: id1, fontBId: id2 };
this.#batchStore.setIds([id1, id2]);
this.#fontsByIdsStore.setIds([id1, id2]);
});
}
});
@@ -316,7 +316,7 @@ export class ComparisonStore {
* True if any font is currently being fetched or loaded (reactive)
*/
get isLoading() {
return this.#batchStore.isLoading || !this.#fontsReady;
return this.#fontsByIdsStore.isLoading || !this.#fontsReady;
}
/**
@@ -325,7 +325,7 @@ export class ComparisonStore {
resetAll() {
this.#fontA = undefined;
this.#fontB = undefined;
this.#batchStore.setIds([]);
this.#fontsByIdsStore.setIds([]);
storage.clear();
typographySettingsStore.reset();
}
@@ -1,7 +1,7 @@
/**
* Unit tests for ComparisonStore (TanStack Query refactor)
*
* Uses the real BatchFontStore so Svelte $state reactivity works correctly.
* Uses the real FontsByIdsStore so Svelte $state reactivity works correctly.
* Controls network behaviour via vi.spyOn on the proxyFonts API layer.
*/
@@ -53,12 +53,8 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
vi.mock('$entities/Font', async importOriginal => {
const actual = await importOriginal<typeof import('$entities/Font')>();
const { BatchFontStore } = await import(
'$entities/Font/model/store/batchFontStore/batchFontStore.svelte'
);
return {
...actual,
BatchFontStore,
fontStore: { fonts: [] },
appliedFontsManager: {
touch: vi.fn(),
@@ -129,7 +125,7 @@ describe('ComparisonStore', () => {
});
});
describe('Restoration from Storage (via BatchFontStore)', () => {
describe('Restoration from Storage (via FontsByIdsStore)', () => {
it('should restore fontA and fontB from stored IDs', async () => {
mockStorage._value.fontAId = mockFontA.id;
mockStorage._value.fontBId = mockFontB.id;