Routing Idea: More flexibility and url_for equivalent

[realJogicodes]

Svelte kit is awesome, I love it. Coming at it from flask, I found a limitation and I wonder if it could be addressed.

Example:

In Flask I have all templates in sub-folders:

templates
    users
        login.html
        signup.html
        ...
    blog
        all_posts.html
        ...

I would route them in my app.py:

@app.route("/login")
def login():
    return render_template('users/login.html')

@app.route("/signup")
def signup():
    return render_template('users/signup.html')

@app.route("/blog")
def blog():
    return render_template('blog/all_posts.html')

With this neat folder structure comes the flexibility to route each function as I see fit.

Login is at /login, signup is at /signup, blog is at /blog while the files for them are all in the user folder, not on the top folder level. I don't think svelte kit has that ability.

Another neat thing about Flask is that we can dynamically create routes using the url_for() function which returns the /route. Whenever I made need a link on the back end or the front end, I would write url_for('signup') instead of '/signup' which meant that if I ever where to move the signup route to say a very contrived /moved/signup, my code would not break and every link to it would automatically update because url_for resolves them.

Svelte kit lacks this functionality from my understanding because of the folder based routing. If I want my user components neat, they would go to say users/components, that way the files are tidy but then of course they all route as /users/whatever-component, not as /whatever-component. I can get that done of course at the expense of the tidiness.

What is entirely missing though is a url_for equivalent that dynamically creates the route. goto() isn't doing the same thing, because when the folder changes, all legacy goto('/old-location') calls that point to the now moved folder need to be updated, which url_for did for me.

Being able to route more freely and having an equivalent function to url_for would improve svelte kit tremendously.

[danieljb]

There is this package called vite-plugin-kit-routes which helps ensure route references are working. Here’s an example from their readme:

<script lang="ts">
  import { route } from '$lib/ROUTES'
</script>
 
<!-- 🤞 before, hardcoded string, error prone -->
<a href="/terms-and-conditions">Terms</a>
 
<!-- ✅ after, typechecked route, no more errors -->
<a href={route('/terms-and-conditions')}>Terms</a>
<!-- 
   If you change location of `/terms-and-conditions/+page.svelte`: 
     - the key '/terms-and-conditions' will not exist
     - `route` function will yell! 
-->

It typechecks parameters, too. As far as I know it does not offer the named routes functionality (as url_for does in flask or django). It does however ensure that generated links are working.
For the named routes you could consider a custom function, so you only have one place to update the path after moving a route – not sure its worth it though (especially as there’s some overhead for proper typing):

import { route } from '$lib/ROUTES'

function routeByName(name, params) {
  switch (name) {
    case "login":
      return route("/login", params);
    case "signup":
      return route("/moved/signup", params);
    default:
      throw new Error(`Route with name ${name} not found.`);
  }
}