About
=====
Simple and modern Vanilla JS router based on the 📖 [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) and 📖 [URLPattern API](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern).
- Dependency free.
- Parameterized routes and URL pattern matchers.
- Handles navigation: just define your routes.
- Optional "Not-found" handler.
- Handler redirection: navigating between routes.
📦 Scoped `@xan105` packages are for my own personal use but feel free to use them.
🤔 Curious to see it in real use? This package powers [my personal blog](https://xan105.com/).
Example
=======
```js
import { Router } from "@xan105/vanilla-router"
const router = new Router();
router
.on("/", function(ctx){
// do something
})
.on("/about", async(ctx) => {
// do something
})
// Parameterized routes
.on("/user/:id", ({ routeParams }) => {
const { id } = routeParams;
// do something
})
// Query parameters (eg: /items?name=foo)
.on("/items", ({ searchParams }) => {
const { name } = searchParams;
// do something
})
// Handler redirection
.on("/admin", ({ redirect }) => {
if (!isLoggedIn()){
redirect("/login");
}
// do something
})
.on("/login", () => {
// Authenticate
})
// Deferred commit (don't immediately update the URL)
.on("/render", async({ event }) => {
event.scroll()
await fetch("/foo/bar", { signal: event.signal });
}, { deferredCommit: true })
// Optional "not found" hook
.on(404, () => {
console.error("not found !");
})
.listen();
```
Install
=======
```
npm i @xan105/vanilla-router
```
💡 The bundled library and its minified version can be found in the `./dist` folder.
### Via importmap
Create an importmap and add it to your html:
```html