I have been using Sveltekit on a number of projects for a while now. Whilst I like some of its ideas, there is one thing that just undoes the whole thing for me. File system based routing, it sounds like a good idea but in practice it’s annoying as f%$k on any moderately complex application. It pretty much breaks how I work with any of my text editors of choice (neovim / vscode).
First problem, tabs are rendered less useful. When you have 10 files open that are all named
+page.svelte in tabs, it becomes harder to know which tab to go to for a specific file. Yes, some text editors include some information about the directory containing the file but it’s still a long way from improving the user experience. In the absence of this file system routing nonsense, finding the file with the product edit logic is as simple as just scanning for for a tab with a label like
EditProduct.svelte, not trying to make sense of labels that look something like
Secondly and the biggest deal breaker for me, it breaks fuzzy file search. Jumping between files in a text editor for me involves using a fuzzy file search tool like FZF or vscode’s *
A work around for these problems involves pushing as much logic out of Sveltekit’s routes folder to a component hierarchy outside. Basically, your
+page.svelte just imports a component from elsewhere containing all the logic. The component’s file can have a nice name that’s easy to remember (e.g.
pages/EditProduct.svelte). However, by design Sveltekit pulls you to have a good amount of pages’ logic in your routes directory. The logic needed to do stuff in your component is normally spread out in a number of files (
+layout.server.js, etc). Ideally, you don’t want your logic spread all over so naturally you gravite towards having a big part of pages’ logic in
+page.svelte. Frameworks are supposed to make work easier. In this case, I am needing to find work arounds in order to make working with the framework easier. In my opinion, this is a sure sign that something is awfully wrong.