refactor(GetFonts): centralize filterManager/sortStore → fontStore bridge
Move the duplicated $effect blocks that mapped filterManager and sortStore into fontStore params out of Search, FontSearch and FilterControls into a single $effect.root in features/GetFonts/model/state/bindings.svelte.ts. Consumers now bind to the manager/store directly; the bridge is installed once via a side-effect import from the feature barrel.
This commit is contained in:
@@ -29,6 +29,12 @@ export {
|
||||
filterManager,
|
||||
} from './state/manager.svelte';
|
||||
|
||||
/**
|
||||
* Side-effect import: installs the global filterManager+sortStore → fontStore
|
||||
* bridge on first import of this feature barrel. No exports.
|
||||
*/
|
||||
import './state/bindings.svelte';
|
||||
|
||||
/**
|
||||
* Sorting logic
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Bridges feature-level UI state (filterManager + sortStore) to the
|
||||
* entity-level fontStore query params.
|
||||
*
|
||||
* Centralizing this here means consumers (Search, FontSearch,
|
||||
* FilterControls, etc.) bind to the manager/store directly without
|
||||
* each repeating the same mapping effect. The bridge is a singleton
|
||||
* concern — it tracks singleton state and writes to a singleton query
|
||||
* observer, so it lives at module scope, not in any individual widget.
|
||||
*/
|
||||
|
||||
import { fontStore } from '$entities/Font';
|
||||
import { untrack } from 'svelte';
|
||||
import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
|
||||
import { sortStore } from '../store/sortStore.svelte';
|
||||
import { filterManager } from './manager.svelte';
|
||||
|
||||
$effect.root(() => {
|
||||
/**
|
||||
* Mirror filter selections + debounced search query into fontStore params.
|
||||
* untrack the write so fontStore's internal $state reads don't feed back
|
||||
* into this effect's dependency graph.
|
||||
*/
|
||||
$effect(() => {
|
||||
const params = mapManagerToParams(filterManager);
|
||||
untrack(() => fontStore.setParams(params));
|
||||
});
|
||||
|
||||
/**
|
||||
* Mirror sort selection into fontStore.
|
||||
*/
|
||||
$effect(() => {
|
||||
const apiSort = sortStore.apiValue;
|
||||
untrack(() => fontStore.setSort(apiSort));
|
||||
});
|
||||
});
|
||||
@@ -4,16 +4,12 @@
|
||||
Sits below the filter list, separated by a top border.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { fontStore } from '$entities/Font';
|
||||
import type { ResponsiveManager } from '$shared/lib';
|
||||
import { cn } from '$shared/lib';
|
||||
import { Button } from '$shared/ui';
|
||||
import { Label } from '$shared/ui';
|
||||
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
|
||||
import {
|
||||
getContext,
|
||||
untrack,
|
||||
} from 'svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import {
|
||||
SORT_OPTIONS,
|
||||
filterManager,
|
||||
@@ -31,11 +27,6 @@ const {
|
||||
class: className,
|
||||
}: Props = $props();
|
||||
|
||||
$effect(() => {
|
||||
const apiSort = sortStore.apiValue;
|
||||
untrack(() => fontStore.setSort(apiSort));
|
||||
});
|
||||
|
||||
const responsive = getContext<ResponsiveManager>('responsive');
|
||||
const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user