Routes defined in code

[Pixelatedza]

Describe the problem

Would sveltekit ever consider an option for defining the routes in code using objects? This is mainly for the sake of maintainability. Currently if I need to refactor a route I have a minimum of 2 places I need to update, the directory structure and then any enums I use for navigation.

The file based system is really nice to get going fast and there are obviously some great pros to doing it that way. I do think that having routes defined in objects or in the code in some manner also has pros to it and would be a nice additional alternative to the filed based system.

Describe the proposed solution

How this object would precisely be structured I'm not sure, but I figure it would be similar to the file structure in many ways. Possibly something similar to what React Router V6 has done?

React Router V6 example from their documentation.

[
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> }
          ]
        },
        { path: "*", element: <NoMatch /> }
      ]
   }
];

An off the cough idea. I'm sure this can be updated and improved upon significantly as well.

{
  Index: {
    path: "/",
    component: Layout,
    children: {
      Home: {
        index: true,
        component: Home,
      },
      Courses: {
        path: "/courses",
        component: Courses,
        children: [
          { index: true, component: CoursesIndex },
          { path: "/courses/:id", component: Course }
        ]
      },
      NoMatch: {
        path: "*",
        element: <NoMatch />
      }
    }
  }
}

I've found having objects works well for referencing routes in the code base and makes refactoring simple. You could always allow both objects or lists to be used to describe the routes as in my small example above.

Not sure if this becomes a bit too open, as I do understand there has to be some standard way of doing things.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[f-elix]

I would just like to add that this could also serve as a base for i18n of routes. We could add an alternates property to a route object or something like that.

[arekbal]

What I would expect/require from this system:

• TS type safety(in TS context) as much as possible so I wish I could call:

router.goTo('users/{userId}/profile', { userId: 'u123' }) // in type safe manner. 

I don't care about the syntax that much... router builder or something could be used as long as it enables route type-safety for most cases... just use whatever is available in TS and make sure the code is type-safe.

• Build time, routes validation against file system, so the non-dynamic route declaration has to match to file that exists during build. This could also entail parameters/arguments matching, such as file/route could declare a parameters as part of export, and route declaration in route-map.ts or whatever also would have to declare it, otherwise build fails. For ex. userId param.
• Alternatively - but I know little about .svelte to .ts integration - router could get information about exposed parameters from routed files itself.

[Rich-Harris]

Realistically this isn't going to happen — it would make SvelteKit significantly less maintainable and harder to learn, even if we could come up with a good design for it (the example above would defeat code-splitting, for example) that addressed all the challenges around who 'wins' in a disagreement between the fs routes and the code routes. Filesystem-based routing is fairly universal at this point (every major metaframework uses it, even the one from the React Router team), and it would be better to spend our energy on addressing any shortcomings we find within that approach rather than adding a separate one.