Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

Url reverse + compose #1624

Open
Open
@dkzlv

Description

@dkzlv

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:

  1. 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;
  2. 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;
  3. 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.

config

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions