glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(comparison): replace comparisonStore singleton with lazy getComparisonStore

Browse Source 
Mirror the font-catalog change in ComparisonView: expose getComparisonStore()
(plus __resetComparisonStore for tests) instead of an eager comparisonStore
singleton, and consume getFontCatalog() internally. Update the model barrel and
all UI consumers (Sidebar, FontList, Header, Line, SliderArea); Character no
longer needs the store and reads everything from props.

Update both specs to the accessor: comparisonStore.test mocks getFontCatalog
with a writable stub (the real store's fonts is getter-only) and resets the
catalog between cases; Sidebar.svelte.test resolves the store via the accessor.

Also document Character's props.
This commit is contained in:
Ilia Mashkov
2026-06-01 17:25:05 +03:00
parent 10603d18bf
commit 1ad015aed6
10 changed files with 107 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/ComparisonView/ui/Line/Line.svelte
+24 -20
View File
@@ -12,7 +12,7 @@ import {
computeLineRenderModel,
} from '$entities/Font';
import { typographySettingsStore } from '$features/AdjustTypography';
import { comparisonStore } from '../../model';
import { getComparisonStore } from '../../model';
import Character from '../Character/Character.svelte';
interface Props {
@@ -32,6 +32,8 @@ interface Props {
let { line, split, windowSize }: Props = $props();
const comparisonStore = getComparisonStore();
const model = $derived(computeLineRenderModel(line, split, windowSize));
const typography = $derived(typographySettingsStore);
@@ -80,22 +82,24 @@ const strutStyle = $derived(
would show as gaps under `white-space: pre`; children restore their size.
Letter-spacing is px because em would resolve against that zero.
-->
<div
class="relative block w-full text-center whitespace-pre"
style:height="{lineHeightPx}px"
style:line-height="{lineHeightPx}px"
style:font-size="0"
style:letter-spacing="{letterSpacingPx}px"
style:font-weight={typography.weight}
>
<span style={strutStyle} aria-hidden="true"></span>
{#if model.leftText}
<span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
{/if}
{#each model.windowChars as wc (wc.key)}
<Character char={wc.char} isPast={wc.isPast} fontSize={fontSizePx} />
{/each}
{#if model.rightText}
<span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
{/if}
</div>
{#if fontA && fontB}
<div
class="relative block w-full text-center whitespace-pre"
style:height="{lineHeightPx}px"
style:line-height="{lineHeightPx}px"
style:font-size="0"
style:letter-spacing="{letterSpacingPx}px"
style:font-weight={typography.weight}
>
<span style={strutStyle} aria-hidden="true"></span>
{#if model.leftText}
<span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
{/if}
{#each model.windowChars as wc (wc.key)}
<Character char={wc.char} {fontA} {fontB} isPast={wc.isPast} fontSize={fontSizePx} />
{/each}
{#if model.rightText}
<span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
{/if}
</div>
{/if}