A tiny router for the frontend built on top of the native URLPattern.
npm install @ausginer/router


!BundleJS

A tiny and easy-to-use middleware-style router for client and server-side development.
It is based on the new experimental URLPattern API and draws inspiration from universal-router.
- The code is minimalistic and does not rely on any dependencies except for the URLPattern polyfill, which is needed for browsers that do not support the URLPattern API yet.
- It is designed to be framework-agnostic, meaning you can use it with any framework such as React, Vue, Angular, or even without any framework at all.
- It follows a middleware approach similar to Express.
- ECMA version: ES2022. The package utilizes private class members and the Array.prototype.at method. These features are supported by all modern browsers by default.
- As URLPattern is an experimental technology, a polyfill is required. The package includes the polyfill as a dependency for convenience but the polyfill is loaded conditionally, only for browsers that do not have native support for URLPattern. Polyfill adds !BundleJS to the package size.
- npm:
``bash`
$ npm i @ausginer/router
`
- yarn:
bash`
$ yarn add @ausginer/router
`
- pnpm:
bash`
$ pnpm add @ausginer/router
`ts
import { addNavigationListener, navigate, Router } from '@ausginer/router';
const router = new Router
{
path: '',
async action({ next }) {
return My app
${await next()};User #${id} data
},
children: [
{
path: '/users/:id(\\d+)',
async action({
result: {
pathname: {
groups: { id },
},
},
}) {
return ;404: Page ${url.toString()} is not found.
},
},
],
},
{
path: '*',
action({ url }) {
return ;
},
},
]);
addNavigationListener((path) => {
router
.resolve(path)
.then((html) => {
document.body.innterHTML = html;
})
.catch((e: unknown) => {
throw e;
});
});
navigate('/user/100'); // Will render
navigate('/not-existing-page'); // Will render 404: Page https://example.com/not-existing-page is not found.
``