Best way to define route metadata: route descriptions, names, icons...

[rgon]

I generally love filesystem routing. It's intuitive and leads to good results quickly. However, it seems like in every project, I end up:

• Defining normal sveltekit routes using directories
• Creating a src/routes/routes.js/ts file re-enumerating said routes and defining some extra data:
  • The route URL (requires properly parsing parametric routes)
  • Defining a name for the route
  • Creating a description for the route
  • Setting an icon path
  • ...

It is normally to fulfill the use cases:

• Header/navbar titles (w/ deep linking routes): see my.app:5173/projects/create -> projects > create. Very useful on chromeless browsers/embeds.
• Programatically creating a navbar. Picture an app launcher (whose icons are defined in routes.ts
• In-app/site search (searchbox that searches the description of routes)

It obviously causes code duplication, and I'd really like an elegant 'compile-time' solution, which I'm not sure how to achieve with FS enumeration a-la import.meta.glob('**/+page.svelte') + module exports.

It makes me think sveltekit should have a built-in method to: enumerate routes & metadata (#5793 #1142), and export route metadata from +layout/+page.js files (static export, unlike PageData/LayoutData).

What's the recommended approach for this? Please share your solution!

[david-plugge]

Just as you mentioned I use files colocated to the routes which I call -route.ts. the minus is used because + is reserved. A vite glob is used to gather all the files. I'm not too happy with that solution but combined with the use of route ids it's definitely usable.