Url reverse + compose #1624
Description
Is your feature request related to a problem? Please describe.
We all need to build links between pages. Currently we have to hardcode the links right into the component or into a separate module, which can break over time.
Describe the solution you'd like
The idea is not new, many backend frameworks have this implemented a long time ago: RoR, Django.
They have url configs, where they map paths with parameters to controllers. You can assign a name to this route, like post-edit
or post-view
. Then if you want to build a link to this route you can then call a special function, where you put this developer-friendly name and get a link in return.
It has multiple great parts:
- the developer-friendly name is a constant, so even if you move your routes around, you won't need to change all the places that link to this route;
- if however the constant name changes this function can throw an error so you don't miss the bad link. It can also do the same if you don't pass the needed parameters;
- it can simplify the link-building process for a developer
The first part of the implementation should be defining the route name. Since Sapper has no url configuration file, I think it should reside in route components. It would be convenient enough to introduce something like <sapper:option routeName='blahblah'>
or some export const routeName
.
The second part would be a function, like urlReverse
, that can be imported from @sapper/app
with this signature: (routeName: string, urlParams?: any) => Readable<string>
. It would merge the given urlParams
with current ones, so if you want to edit the currently viewed post you'd just type urlReverse('post-edit')
without any params.
Describe alternatives you've considered
I have a separate routes.ts
file, where I maintain a bunch of derived stores, where I manually compose the routes. I then import this stuff where I need and use it there.
If I need a deep-nested link, I derive a store from a derived store. This overcomplication comes from the fact that you cannot access page
store outside of components, so in order to get current state of affairs you'd need to either pass $page
value each time you need to build a link or just maintain current values yourself.
It works! But it is hard to maintain, it becomes a helluva mess after you have more than 20 endpoints (which is not that much!).
How important is this feature to you?
Not really. I've solved it for myself, even though I've broken my links a couple of times already. But I think the community will love it.