Is there a way to refactor this code?

[frederikhors]

I need all the below code to be able to persist in the URL (query string) some variables I'm using in a Svelte 5 / Svelte Kit project page.

I also need to assign URL query params to variables on page reload or page change.

As you can see the code is very repetitive and I think there must be a better way! (better = DRY and faster)

I created a small reproduction.

What do you think?

// condition, pagination and searchText comes from $props()

let firstLoad = $state(true);

$effect(() => {
    if (firstLoad) return;

    const url = new URL(window.location.toString());

    const paramCondition = url.searchParams.get('condition');
    const paramPagination = url.searchParams.get('pagination');
    const paramSearchText = url.searchParams.get('searchText');

    const actualCondition = isAnEmptyOrFalsyObject(condition) ? null : JSON.stringify(condition);
    const actualPagination = isAnEmptyOrFalsyObject(pagination) ? null : JSON.stringify(pagination);
    const actualSearchText = !searchText ? null : searchText;

    let shouldGo = false;

    if (paramCondition !== actualCondition) {
        if (actualCondition) {
            url.searchParams.set('condition', actualCondition);
        } else {
            url.searchParams.delete('condition');
        }

        shouldGo = true;
    }

    if (paramPagination !== actualPagination) {
        if (actualPagination) {
            url.searchParams.set('pagination', actualPagination);
        } else {
            url.searchParams.delete('pagination');
        }

        shouldGo = true;
    }

    if (paramSearchText !== actualSearchText) {
        if (actualSearchText) {
            url.searchParams.set('searchText', actualSearchText);
        } else {
            url.searchParams.delete('searchText');
        }

        shouldGo = true;
    }

    if (shouldGo) goto(url, { replaceState: false, keepFocus: true, noScroll: true });
});

afterNavigate(({ to }) => {
    if (!to) return;

    const paramCondition = to.url.searchParams.get('condition');
    const paramPagination = to.url.searchParams.get('pagination');
    const paramSearchText = to.url.searchParams.get('searchText');

    if (paramCondition && paramCondition !== JSON.stringify(condition)) {
        condition = JSON.parse(paramCondition);
    }

    if (paramPagination && paramPagination !== JSON.stringify(pagination)) {
        pagination = JSON.parse(paramPagination);
    }

    if (paramSearchText && paramSearchText !== searchText) {
        searchText = paramSearchText;
    }

    if (firstLoad) firstLoad = false;
});

[gterras]

As you can see the code is very repetitive and I think there must be a better way! (better = DRY and faster)

A bad repetition is better than a bad abstraction. Here your code has repetition but is easy to read and maintain, and that's what matters the most in any case (personal or professional project).

I suppose you tried to abstract the logic from the effect and found that it was unpractical since param treatment isn't generic (searchText has special treatment), plus the abstraction would require url as a param since it's also needed beforehand. You would end up with a 3 or 4 args function with conditional logic inside, meaning it would need maintenance or at least special care to add a new param anyway. Compare this to the flexibility you get with the existing.

What I would do is isolate this file since Svelte5 now allows it, and let it live until its size actually becomes a problem (that would need quite some extra params).

[frederikhors]

@gterras Thanks for your answer!

What I would do is isolate this file since Svelte5 now allows it

How?

I'm trying in a way, but I have this issue: sveltejs/svelte#12407, can you help?