Screen Router as Finite State Machine

StateMachineRouter allows you to describe the "history-driven" screen transitions in declarative manner.

Status

In progress...

Usage

import { Router } from 'state-machine-router';

let router = new Router({
    index: {
        url   : '/',
        title : 'Demo Appication',

        transitions : {
            'users_requested' : 'users',
            'about_requested' : 'about'
        },

        enter  : showIndex
    },

    users: {
        url   : '/users/',
        title : 'Users Info',

        transitions : {
            'userDetails_requested' : 'userDetails',
            'about_requested'       : 'about'
        },

        enter  : showUsers
    },

    userDetails: {
        // http://www.regular-expressions.info/named.html
        url      : '/users/(:<userId>[0-9]+)/',
        title    : 'User Details',

        transitions : {
            'back_requested'            : 'users',
            'userDetails_requested'     : 'userDetails',
            'userBookDetails_requested' : 'userBookDetails',
            'about_requested'           : 'about'
        },

        enter  : showUser
    },

    userBookDetails: {
        url      : '/users/(:<userId>[0-9]+)/book/(:<bookId>[0-9]+)/',
        title    : 'Book Details',

        transitions : {
            'userDetails_requested' : 'userDetails',
            'about_requested'       : 'about'
        },

        enter  : showUserBook
    },

    about: {
        url      : '/about/',
        title    : 'About',

        transitions : {
            'index_requested': 'index'
        },

        enter  : showAbout
    }
});


router.start();


function showIndex(router, data, meta) {
	return new Promise((resolve) => {
		// load and render screen teplate, etc
		...

		// then, on some Users's click
		router.process('users_requested');
	});
}

...

Features

• automatically calculates the router's state from the window.location.href, on page load
• named regexp in URL definition

License

MIT-LICENSE