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    to the package size.

Installation

• npm:

  $ npm i @ausginer/router
  Copy

• yarn:

  $ yarn add @ausginer/router
  Copy

• pnpm:

  $ pnpm add @ausginer/router
  Copy

Usage

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

const router = new Router<string>([
  {
    path: '',
    async action({ next }) {
      return `<h1>My app</h1><div>${await next()}</div>`;
    },
    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 `<h1>My app</h1><div>User #100 data</div>`
navigate('/not-existing-page'); // Will render `404: Page https://example.com/not-existing-page is not found.`
Copy