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.

Features

- 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.

Requirements

- 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.

Installation

- npm:
``bash
$ npm i @ausginer/router
`
- yarn:
`bash
$ yarn add @ausginer/router
`
- pnpm:
`bash
$ pnpm add @ausginer/router
`

Usage

`ts
import { addNavigationListener, navigate, Router } from '@ausginer/router';

const router = new Router([
{
path: '',
async action({ next }) {
return

My app

;
},
children: [
{
path: '/users/:id(\\d+)',
async action({
result: {
pathname: {
groups: { id },
},
},
}) {
return User #${id} data;
},
},
],
},
{
path: '*',
action({ url }) {
return 404: Page ${url.toString()} is not found.;
},
},
]);

addNavigationListener((path) => {
router
.resolve(path)
.then((html) => {
document.body.innterHTML = html;
})
.catch((e: unknown) => {
throw e;
});
});

navigate('/user/100'); // Will render

My app


navigate('/not-existing-page'); // Will render 404: Page https://example.com/not-existing-page is not found.
``