router/README.md

@elexis/router

Single page app router extension for ElexisJS

Installation

npm i @elexis/router

Usage

import 'elexis';
import '@elexis/router';
import { Router, Route } from '@elexis/router'

// create new Router with base path '/', 
const router = new Router('/');

// append router view element
const $app = $('app').content([
    router.$view
])

const home_page_route = new Route('/', () => {
    // which this callback function return will be appended
    // into router view element when path match
    return $('h1').content('This is a Homepage!')
})

// Add home_page_route into router
router.addRoute(home_page_route);
// Router starting listen location path change
router.listen();

Without Router.listen(), Router will do nothing when page loaded.

Global $ Methods

import 'elexis';
import '@elexis/router';

$.open('/about') // open /about page without load page
$.back() // back
$.replace('/hello') // replace current page history state with url

Events

Router event: load

const gallery_route = new Route('/gallery', ({loaded}) => {

    async function $ImageList() {
        // fetch images and return elements

        // after all image loaded, using loaded function.
        // this will trigger load event on anccestor router
        loaded();
    }
    return $('div').content([
        $ImageList()
    ])
})

router.on('load', () => {...})

RouteRecord event: open

const viewer_route = new Route('/viewer', ({record}) => {
    const page_open_count$ = $.state(0);

    // this event will be fire everytime this page opened
    record.on('open', () => {
        page_open_count$.set( page_open_count$.value + 1 );
    })

    return $('div').content(page_open_count$) 
})

Router event: notfound

// Route will remove all child of view when path is not exist.
// Using preventDefault function to prevent this action.
router.on('notfound', ({preventDefault}) => {
    preventDefault(); // prevent remove all child of view
    ... // do something
})

static Router event: pathchange

// This event fired on location change happened
Router.on('pathchange', () => {
    ... // do something
})