RFC: rework of queryParameters to return an object of stores instead of an actual object.

[paoloricciuti]

For the moment when you use queryParameters you get back a single store containing the mix of every key that you pass in + every other query parameter present in the URL

<script lang="ts">
    import { queryParameters, ssp } from "sveltekit-search-params";
    const store = queryParameters({
        username: true,
        count: ssp.number(),
    });
</script>

you can later access those inside your template like this

<script lang="ts">
    import { queryParameters, ssp } from "sveltekit-search-params";
    const store = queryParameters({
        username: true,
        count: ssp.number(),
    });
</script>

<!-- this is required to check store is not undefined and can actually bind-->
{#if $store}
    <input bind:value={$store.username} />
    <button on:click={() => $store.count++}>{$store.count}</button>
   <!-- You can access id even tho you have not declared it inside the queryParameters function -->
    Your id is: {$store.id}
{/if}

this is actually fine.

But i was thinking of caching the stores for the query parameters already created (to imporve performance and memory) and i tought of something: the queryParameters store could actually just be an object containing a bunch of small stores. One for every parameter. While this would create more stores it would help with code duplication inside the library and also would, imho, provide a better way to access those stores because you wouldn't need to always namespace them. Here's an example of the proposed usage.

<script lang="ts">
    import { queryParameters, ssp } from "sveltekit-search-params";
    //destructuring (or reassigning) becomes mandatory
    //you can either do this
    const { username, count, id } = queryParameters({
        username: true,
        count: ssp.number(),
    });
    //or this
    const store = queryParameters({
        username: true,
        count: ssp.number(),
    });
    const username = store.username;
    const count = store.count;
    const id = store.id;
</script>

<!-- the check becomes unique to each store (this is already true for the queryParam function tho)-->
{#if $username}
    <input bind:value={$username} />
{/if}
<button on:click={() => { if($count) $count++}}>{$count}</button>
Your id is: {$id}

each of the two methods brings it's own set of itches (to be fair i almost ever use queryParam but don't tell this to queryParameters it might offend it) and while i feel that the proposed method helps to use the variables inside the markup the need to destructure or reassigning the variables might be causes of bugs if someone doesn't read the documentation thoroughly.

What do you guys think about this?