Is there already a package that allows me to save all the elements I want in the URL and repopulate them when I go back and forth?

[frederikhors]

I need an easy way to put plain JS objects JSON.stringified() in the URL to be able to bookmark or share it.

The below code is working good in my small Svelte Kit app: here the reproduction.

<script>
    import { afterNavigate, goto } from '$app/navigation';

    let {
        pagination = { page: 1, size: 10 },
        condition = {},
        searchText
    } = $props();

    let listInput = $derived({
        pagination: $state.snapshot(pagination),
        condition: $state.snapshot(condition)
    });

    const players = getData(listInput);

    let { error, isLoading, isRefetching, data } = $derived($players);

    $effect(() => {
        if (!!condition) {
            const url = new URL(window.location.toString());

            const paramCondition = url.searchParams.get('condition');

            const actualCondition = JSON.stringify(condition);

            if (paramCondition !== actualCondition) {
                url.searchParams.set('condition', JSON.stringify(condition));

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

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

        const paramCondition = url.searchParams.get('condition');

        if (paramCondition !== JSON.stringify(condition)) {
            condition = JSON.parse(paramCondition || '{}');
        }
    });
</script>

What I need now is to remove $effect and afterNavigate code from this single file and create an helper to be used in the others app's pages.

And I need to handle more than one param, not only condition like here, but for example searchText and pagination.

I was thinking about something like:

const newParamsPersiter(initialProps: Record<string, any | undefined>) {
    let values = $state(initialProps);

    $effect(() => {
        // Is it good to use $effect here?
    })

    afterNavigate(() => {
        // Does it work here, right?
    });

    get prop() {
        return values.prop;
    },

    set prop(newValue) {
        values.prop = newValue;
    }
}

but since I'm not good at programming and I don't want to reinvent a (punctured) wheel, can you tell me if there is already some package that does similar things?

Is there a SIMPLE way in Svelte Kit to persist in the URL the filter conditions of a dashboard or a list so that I can:

1. return to previous filter settings when I go back and to subsequent ones when I go forward with the browser keys or

2. save those filters (javascript simple objects with JSON.stringify()) in the browser bookmarks or as a link to share with some people?

[frederikhors]

Nobody? Really?