0.3.1 • Published 4 months ago

@capitec/omni-router v0.3.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

Introduction

Omni Router is a simple client-side page router for single page application (SPA) web component projects that enable you to add animated URL based page navigation to your web app.

Core features of the library include:

  • Framework Agnostic - The router is provided as a standard HTML web components, that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc.
  • Web Components - The router has been specifically built to route pages built using web components.
  • Lazy Loading - Web component pages can be lazy loaded using import('...').
  • Route Guards - Routes can be protected using guard functions that prevent routing based on your app logic, e.g. check if the user is logged in.
  • Animations - Pages can be animated in and out of view when routing, e.g. fade, slide, pop, etc.
  • Browser History - Integrates with the browser history API to push, pop, and replace paths.
  • Mobile Friendly - Navigating back reverses the route load animation, allowing mobile-like user experiences e.g. sliding routes in and out.
  • Lightweight - The library is small and comes with zero dependencies, minimizing bloat to your project.

Usage

1️⃣   Install the library in your project.

npm install @capitec/omni-router

2️⃣   Specify a base href location in your index.html to use as root for page navigation.

<base href="/">

3️⃣   Import the Router package.

// JS import
import '@capitec/omni-router';

// or HTML import
<script type="module" src="/node_modules/omni-router/dist/index.js"></script>

4️⃣   Place the <omni-router> tag in your web page, all routes will be rendered in this container.

<omni-router></omni-router>

5️⃣   Define the pages you will route to.

// Register the app routes.
Router.addRoute({
    name: 'view-fade',
    title: 'Fade',
    path: '/fade',
    animation: 'fade',
    load: () => import('./views/ViewFade'),
    isDefault: true
});

// Load the route matching the current browser path.
Router.load();

💡 Example

This example sets up a simple web page containing the Omni Router. Routes are registered on page load to navigate to individual web component pages using fade, slide, and pop animations.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <title>Omni Router Demo</title>

        <base href="/">

        <script type="module">
            import { Router } from '@capitec/omni-router';

            // Register the app routes.
            Router.addRoute({
                name: 'view-fade',
                title: 'Fade',
                path: '/fade',
                animation: 'fade',
                load: () => import('./views/ViewFade'),
                isDefault: true
            });

            Router.addRoute({
                name: 'view-slide',
                title: 'Slide',
                path: '/slide',
                animation: 'slide',
                load: () => import('./views/ViewSlide')
            });

            Router.addRoute({
                name: 'view-pop',
                title: 'Pop',
                path: '/pop',
                animation: 'pop',
                load: () => import('./views/ViewPop')
            });

            Router.addRoute({
                name: 'view-guarded',
                title: 'Guarded Route',
                path: '/guarded',
                load: () => import('./views/ViewGuarded'),
                guard: () => !this._isUserLoggedIn()
            });

            Router.addRoute({
                name: 'view-fallback',
                title: 'Fallback Route',
                path: '/error404',
                load: () => import('./views/ViewFallback'),
                isFallback: true
            });

            // Load the route matching the current browser path.
            Router.load();
        </script>

        <script type="module" src="./AppShell.js"></script>
    </head>

    <body>
        <omni-router></omni-router>
    </body>
</html>
// view/ViewFade.js

import { Router } from '@capitec/omni-router';

class ViewFade extends HTMLElement {

    constructor() {

        super();

        // Create the DOM content template.
        const template = document.createElement('template');
        template.innerHTML = `
            <style>
                :host {
                    .background-color: white;
                }
            </style>

            <h1>Hello World</h1>

            <button id="back">⬅ Go Back</button>
        `;

        // Create a shadow root for the content.
        this.attachShadow({ mode: 'open' });

        // Add the template content to the shadow root.
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        // Register element event listeners.
        this.shadowRoot.querySelector('#back').addEventListener('click', () => Router.pop());
    }
}

customElements.define('view-fade', ViewFade);

🚩 Framework Starter Projects

Starter projects are available in the examples directory for the following frameworks:

API Reference

Route Object

The Route object contains the following properties:

PropertyTypeDescription
namestringThe unique identifier for the route, must be the tag name of the web component if tag is not set.
tagstringOptional, the registered custom-element tag name for your page web component, e.g. 'view-login'
pathstringThe relative URL path for the route to set in the browser navigation bar, e.g. '/login'
titlestringThe window title to show when the route is loaded, e.g. 'Login'
animationstringOptional, animation to apply when loading the route. Can be one of fade, slide, pop
cachebooleanOptional, indicator if the route template should be cached and reused, or recreated every time the route is navigated to.
loadfunctionOptional, function to execute before navigating to the route. Typically used to lazy load the page web component, e.g. () => import('./views/ViewLogin')
guardfunctionOptional, function to execute to check if a route may be navigated to. Typically used to limit access to routes., e.g. () => !this._isUserLoggedIn()
isDefaultbooleanOptional, flag to set this route as the default route to load when the browser URL path is empty or default, e.g. /. Note: can only be applied to 1 route.
isFallbackbooleanOptional, flag to set this route as the fallback route to load when the user attempts to navigate to a route that does not exist, e.g. a 404 page. Note: can only be applied to 1 route.

Path Patterns

The router supports URL paths for the following patterns:

PatternExampleMatchesDescription
/part/hello/world/hello/worldA static path part, will be matched exactly.
/:param/hello/:place/hello/worldA required path parameter.
/:param?/hello/:place?/hello/hello/worldAn optional path parameter

Note: Path part parameters must be valid URL characters including: Period (.), Dash (-), Characters (a-Z), Numbers (0-9).

Styling

The router styling can be customized using the following CSS Custom Properties:

CSS VariableDefault ValueDescription
--omni-router-animation-duration300msThe duration it takes for route pages to be animated into view.
--omni-router-animation-z-index1000000The z-index to apply to the page being routed to. Set to a value higher than your app's highest z-index value to prevent elements from appearing above the page while routing.

Router Tag

The <omni-router> tag dispatches the following events, that may be useful to subscribe to when wanting to apply changes to a page while a route is lazy loading, e.g. show a loading indicator.

EventDescription
navigation-startedFired before the route starts navigating, e.g. after guard is successful, but before load is called.
navigation-startedFired after the route page has completely rendered on screen, e.g. after it was fully animated in.

The <omni-router> tag provides the following functions:

FunctionDescription
clearCache(): voidClear the cache of route components.

Router Class

Full API documentation available here.

The Router class provides the following properties and functions:

PropertyDescription
get currentLocation(): RoutedLocation \| undefinedGet the currently location routed to.
get previousLocation(): RoutedLocation \| undefinedGet the previous location routed to.
get defaultRoute(): Route \| undefinedGet the route that should be rendered when navigating to the app base URL.
get fallbackRoute(): Route \| undefinedGet the route that should be rendered when navigating to a route that does not exist.
FunctionDescription
addEventListener(eventName: RouterEventType, callback: () => void): voidRegisters a callback function to be invoked when the router dispatches an event.
removeEventListener(eventName: RouterEventType, callback: () => void): voidRemoves a callback function from the list of functions to be invoked when the router dispatches an event.
addRoute(route: Route): voidAdd a route from the list of navigable routes.
remove(name: string): voidRemove a route from the list of navigable routes.
getRouteForPath(pathOrUrl: string): Route \| nullGet the registered route for the given path.
setDefault(name: string): booleanSet the route that should be rendered when navigating to the app base URL.
setFallback(name: string): booleanSet the route that should be rendered when navigating to a route that does not exist.
load(): Promise<boolean>Navigate to the current browser URL path.
push(path: string, state = {}, animateOut = false): Promise<boolean>Push a new path onto the browser history stack and render it's registered route.
replace(path: string, state = {}, animateOut = false): Promise<boolean>Update the current path in the browser history stack with a new path and render it's registered route.
pop(delta?: number): Promise<boolean>Pops the current path in the browser history stack and navigate the previous path, or specified number pages back.
popToPath(path: string, before = false): Promise<boolean>Pops back in history to a previous path, removing all paths after this point from the stack.

Contributors

Made possible by these fantastic people. 💖

See the CONTRIBUTING.md guide to get involved.

License

Licensed under MIT

0.2.8-beta

4 months ago

0.3.1-beta

4 months ago

0.2.7-beta

5 months ago

0.3.0-beta

4 months ago

0.2.6-beta

5 months ago

0.2.7

5 months ago

0.3.1

4 months ago

0.2.5-beta

5 months ago

0.2.4-beta

8 months ago

0.2.3-beta

8 months ago

0.2.3

8 months ago

0.2.4

8 months ago

0.2.2

8 months ago

0.2.2-beta

8 months ago

0.2.1-beta

10 months ago

0.2.0-beta

10 months ago

0.2.1

10 months ago

0.1.3-beta

1 year ago

0.0.11-beta

1 year ago

0.1.0

1 year ago

0.1.4-beta

1 year ago

0.1.1-beta

1 year ago

0.1.2-beta

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.5-beta

1 year ago

0.1.5

1 year ago

0.0.3

2 years ago

0.0.10-beta

2 years ago

0.0.8-beta

2 years ago

0.0.9-beta

2 years ago

0.0.7-beta

2 years ago

0.0.6-beta

2 years ago

0.0.5-beta

2 years ago

0.0.4-beta

2 years ago

0.0.3-beta

2 years ago

0.0.2

2 years ago

0.0.2-beta

2 years ago

0.0.1-beta

2 years ago