Hi.. I am using Svelte for quite a while now. I think it is a pretty sweet compiler for front-end.
But why do I decided to write a Router ?
Because until now I didn’t find a router to attend to specific need. Well not a router embedded inside a framework like the Framework7.
Don’t get me wrong, Framework7 is awesome too, but what if I just want a router not an entire framework.
So.. What Should a Router do ?
That is an important question and all the routers I saw, until now, doesn’t give me the control that I need. They are great routers, but let’s face it what is important for a router to do.
One can say routing.. of course — but is a little more than that.
It has to control the routing and:
- If it should route to a route;
- What to do before enter each route;
- What to do before enter that specific route;
- What to do when it is allowed to enter that route;
- Allow we to control all that above behavior in a easy way;
- And last but not least — access to everything everywhere!
This is what I think a route should deliver. Kind of what VueRouter delivers to us.
VueRouter is great and works like a charm.. so why shouldn’t Svelte have a great router too ?
As I said that Svelte does have good routers however I personally don’t like routes based on structure. I like routers to give me the choice to do what I want to do when I want to do.
SCR — Svelte Client Router — The Proposal
Who Am I to create a router right? I know my limitations I am not the wisest guy around, but I try to do my best =).
That’s why I came with this proposal — I have created a router for Svelte that does exactly what I think it should do.
The key concept of this router is allow us to control the behavior before enter a route. So we can set:
-Global Before Enter Functions: To execute a function or array of functions to each route — Applied to all routes;
-Route Before Enter Functions: To execute a function or array of functions to a single route — Applied to a single route;
-Ignore Global Enter Functions: To just ignore Global Before Enter functions on a single route — Applied to a single route;
-Revert Order Of Execution: To execute Route Before Functions Before Global Before Functions;
Of course it offers more than just that.. but it is focused on deliver that!
With this router you will be able to control every aspect of routing, passing information forward throughout Before Enter Functions and After Before Enter Functions and receiving it in all components.
One of the cooliest things is that every param, variable defined will be delivered in all places — functions, components, etc, as soon as possible.
That means if you define a parameter inside of a Before Enter Function it will be delivered in the next one until the end, plus it will be delivered in your components.
Why is this nice, one can ask?
Because I can control the behavior of routing and even alter as soon as I want to.
Ah.. I almost forget you can set loading components to it — Global and Per Route too!
As soon as Before Enter Functions kicks in it will show a loading component if the loading take time enough.
Try It — Test It — Documentation
Yes, It is in its early stages however I think it is awesome!
NPM Package
See on Github
Motivation
I have worked with a little personal project and Svelte is really wonderful. I missed one thing in Svelte Community though, a good not embedded router.
So here it my proposal. Please check out — test it and let me know your thoughts. =)
Finance Notes Project
If you want to check out my personal project..
Cheers!
Top comments (2)
No idea what router routify uses, but the ability to read files and make autoroutes was amazing. One thing I hate about the routes is the massive overhead in files. Will try your router on the next project and leave a review.
Hi Roberts.. many thanks =) - If you find problems or have comments, improvements please .. let me know =)