I've build a sveltekit application to search for words in Sinhala and English. The search functionality worked fine and recently it stopped working. It doesn't show any errors. The application is not reactive.
Here is the svelte Store :
import { writable } from "svelte/store";// biome-ignore lint/suspicious/noExplicitAny: <explanation>export interface SearchStoreModel<T extends Record<PropertyKey, any>> { data: T[]; filtered: T[]; search: string;}// biome-ignore lint/suspicious/noExplicitAny: <explanation>export const createSearchStore = <T extends Record<PropertyKey, any>>( data: T[]) => { const { subscribe, set, update } = writable<SearchStoreModel<T>>({ data: data, filtered: data, search: "", }); return { subscribe, set, update, };};// biome-ignore lint/suspicious/noExplicitAny: <explanation>export const searchHandler = <T extends Record<PropertyKey, any>>( store: SearchStoreModel<T>) => { const searchTerm = store.search.toLowerCase() || ""; store.filtered = store.data.filter((item) => { return item.searchTerms.toLowerCase().includes(searchTerm); });};I expected it to be filtered under the search term that the user provided.
Here is the Component:
<script lang="ts"> import { Card, CardTitle } from "$components/ui/card"; import { Input } from "$components/ui/input"; import { Badge } from "$components/ui/badge"; import { createSearchStore, searchHandler } from "$lib/stores/search"; import { onDestroy } from "svelte"; import type { PageData } from "./$types"; export let data: PageData; type Product = { id: string; sinName: string; engName: string; sinDescription: string; sinSubject: string; engSubject: string; scientificName: string; image: string; }; const customOrder = ["අ","ආ","ඇ","ඈ","ඉ","ඊ","උ","ඌ","ඍ","ඎ","ඏ","ඐ","එ","ඒ","ඓ","ඔ","ඕ","ඖ","අ්","අඃ","ක","ඛ","ග්","ඝ","ඞ","ඟ","ච","ඡ","ජ","ඣ","ඤ","ජ","ට","ඨ","ඩ","ඪ","ණ","ඬ","ත","ථ","ද","ධ","න","ඳ","ප්","ඵ","ෙ","භ","ම","ඹ","ය","ෙ","ල","ව","ශ්","ෂ","ස","හ","ළ","ෆ", ]; const searchWords: Product[] = data.products.map((product: Product) => ({ ...product, searchTerms: `${product.sinName} ${product.engName} ${product.scientificName}`, })); const searchStore = createSearchStore(searchWords); const unsubscribe = searchStore.subscribe((model) => searchHandler(model)); const compareStrings = (a: string, b: string) => { const charOrder: { [char: string]: number } = {}; customOrder.forEach((char, index) => { charOrder[char] = index; }); const len = Math.min(a.length, b.length); for (let i = 0; i < len; i++) { const charA = a[i]; const charB = b[i]; if (charOrder[charA] !== undefined && charOrder[charB] !== undefined) { if (charOrder[charA] < charOrder[charB]) return -1; if (charOrder[charA] > charOrder[charB]) return 1; } else if (charOrder[charA] !== undefined) { return -1; } else if (charOrder[charB] !== undefined) { return 1; } } return a.length - b.length; }; // biome-ignore lint/suspicious/noConfusingLabels: <explanation> $: sortedProducts = $searchStore.filtered.sort((a, b) => compareStrings(a.sinName, b.sinName) ); onDestroy(() => { unsubscribe(); });</script><div class="container mt-8 max-w-2xl"><Input placeholder="සොයන්න - Search" bind:value={$searchStore.search} /></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8"> {#each sortedProducts as product}<a href="/encyclopedia/science/{product.id}"><Card class="gap-2 flex flex-col items-center text-center p-4 w-full"><CardTitle>{product.sinName} - {product.engName}</CardTitle><Badge rounded class="mx-auto">{product.sinSubject} - {product.engSubject}</Badge><p>{product.scientificName}</p></Card></a> {/each}</div>