Ordered url params

[bleucitron]

Describe the problem

It's currently impossible to have information about the order of url params.

Say i have the following path: /anything/${id}/${otherId}, and i want to display in a breadcrumbs component content related to each id and otherId (for instance a name, fetched from a distant api).

$page.params gives {id, otherId}, which can be used to get a reverse mapping between the slug values in the path and the name of each param, helpful to know what to do with each value (basically fetch data).
But what if id and otherId actually are the same value, 1 for instance ? In this case, the reversing mapping would be broken, since we'd get {1: 'otherId'}, and lose the info about id.

Describe the proposed solution

Maybe make an orderedParams available in InputProps and page store.

It would provide [{slug: 'id', value: 1}, {slug: 'otherId', value: 1}], or even just ['id', 'otherId'].

Alternatives considered

Hope all the ids are unique.

Importance

nice to have

Additional Information

No response

[rmunn]

The param names assigned to the path are entirely under your control, so I fail to see any scenario in which you wouldn't already know the order. E.g., if you have the path /anything/${id}/${otherId}, then you'll know for a fact that ${id} was the earlier part of the path and ${otherId} was the later part, precisely because that's how you set up the names of the files in src/routes.

Perhaps I'm failing to understand your use case.

[bleucitron]

This is an edge case.

I land on page with the following URL: /anything/1/1, with this format: /anything/{id}/{clientId}.

I do have access to id and clientId, and I know they both have 1 as a value.
I get info through apis for id and clientId to display in a breadcrumbs component, like name = 'Romain' and clientName = 'Nintendo'.

From here I want to display in my component something that looks like "Anything > Romain > Nintendo" (and make each segment a clickable link, but that's easy).

I want a dynamic behaviour, so i derive from the SK page store:

const pathname = $page.url; // /anything/1/1
const {id, clientId} = $page.params;

const name = await getUserName(id); // Romain
const clientName = await getClientName(clientId); // Nintendo

const segments = pathname.substring(1).split('/') // ['anything', '1', '1']

Now i want to replace both 1 by the correct value.

How do I know it's Anything > Romain > Nintendo and not Anything > Nintendo > Romain ?
If both id values are different, i can handle, but in the case they're the same, i'm stuck.

[rmunn]

Do you have any URLs with the format {clientId}/{id}? If you don't, then I see no reason why you can't use your inherent knowledge of the URL to just know, and hardcode into your code, the fact that segments[1] is the name and segments[2] is the clientName.

[bleucitron]

That could be a solution, but the idea is to have a derived store with as little hard-coding as possible, given the fact that my app already has quite the number of slugged route configurations.

I currently rely on the idea (or hope) that all my ids are unique, which kind of solves the issue, but that feels odd.

Again, I know this is an edge case.
And if it's not worth it, just ignore this.

[rmunn]

Have you tried doing for (const paramName in Object.keys(params))? I haven't yet checked the Svelte-Kit source, but I believe the params object will have its keys set in left-to-right order. And while Javascript used to not guarantee the order of iteration, I believe it's been guaranteed since ES2015 that object properties will be iterated in insertion order. So you might already have the orderedParams that you're looking for, simply by using Object.keys. It may not be guaranteed in the Svelte-Kit documentation, but it's very unlikely to change.

[Rich-Harris]

Correct, the keys will enumerate left-to-right. In any case, #4345 will make the routeId available, which solves this problem — closing this