Implementation

Why bother creating that?

So, the whole idea came when I was thinking about SPAs and how cool they are, but I saw that you need some special thing in the server, like, you need to always send a default index.html wich contains the script to handle the routes and stuff (I'm talking about doing it vanilla, but AFAIK the frameworks like React / VUE / ETC do that in background when you spin-up a server with those...).

Besides that, you also need to define any route manually and have complex strutctures that's harder at least for me as not being a developer.

Other types of routers can also break SEO, since when the bot tries a direct path like 'domain/a-sample-page' it get's redirect to the home, then a script tries to find the route and re-draw the page.

So, my approach is way simpler and uses a native API called 'NavigationAPI', it handles lots of stuff like pushing history states, with that API, you don't need to define any route, the magic happens automatic.

Just import the router script as a module, edit it to fit your needs and that's it, also, that's just a POC, so I better not recommend it for production use unless you are dumb like me and like experimenting.

About SEO, it does't break, since the multiple pages (MPA) still exists and are full normal pages directly accessible, the router only takes control after the page has loaded.

Because of that, the entire page needs to still be downloaded, and the main part extracted and added to the current DOM for it to render.

This makes it easy to use the View Transitions API, another experimental one, but I saw that MPAs are going to get this too in the near future.

Also, the scripts need to be made a bit different, since the DOM changes, you need to recall whatever is listening to it, like events, elements selectors and stuff.

Fun fact: 'Gambi' in the name comes from the word 'gambiarra' that here in Brazil means something like 'improvisation' or 'workaround', a thing that should be set temporarely but we gently 'forget about it' since it 'works'.

You can check the source code of the router and the example script.