leafeon

As light as a leaf, leafeon is a Javascript routing library that fits perfectly with client-side templating.

Table of Content

• Features
• Overview
• Usage
  • npm
  • Browser
• Browser support
• API
  • .add(name: string, path: string, callback: function)
  • .map(prefixName: string, prefixPath: string, routes: Array)
  • .fetchRoute(name: string[, parameters: object])
  • .route: object
  • .setErrorCallback(callback: function)
  • .notFoundException()
  • .before(path: string, callback: function)
  • .run([callback: function])
• License

Features

• Dynamic routing & URL generator
• Error handling
• Before and after router middleware
• Route mapping
• Browser & npm usage

Overview

A simple route

leafeon.add('default', '/', function () {
    /* do something */
});

A simple route using parameter

leafeon.add('single_category', '/category/:id', function (id) {
  console.log('You requested the category #' + id);
});

Register a callback when route is not found. It returns router object.

leafeon.setErrorCallback(function () {
    throw new TypeError('I think there\'s a problem.');
});

Mapping routes using a route prefix

// This will create two routes under /docs prefix
leafeon.map('docs_', '/docs', [
    {
        name: 'intro', // will be registered as docs_intro
        path: '/',
        callback: () => { document.write('Hey! Welcome.') }
    },
    {
        name: 'get_started',
        path: '/get-started', // will be registered as /#/docs/get-started
        callback: getStartedAction()
    }
]);

Usage

npm

Install the package :

npm i leafeon --save

const leafeon = require('leafeon').Router();
// or using ES6
// import * as leafeon from 'leafeon';
// const router = leafeon.Router();
 
leafeon.add('home', '/', () => {
    document.write('hello world');
})
 
leafeon.run();

Browser

1. Include leafeon.js in or at the end of the

<script src="leafeon.min.js"></script>
 
<!-- or via jsdelivr CDN -->
<script src="https://cdn.jsdelivr.net/gh/sundowndev/leafeon@latest/dist/leafeon.min.js"></script>

1. Init the router

const leafeon = new leafeon.Router();

1. Create some routes and run the router

leafeon
    .add('home', '/', () => { /* ... */ })
    .add('contact', '/contact', () => { /* ... */ })
    .setErrorCallback(() => { /* ... */ })
    .run();

Browser support

Supports IE 11+, Chrome 43+, Opera 29+, and Firefox 41+

API

.add(name: string, path: string, callback: function)

Register a route. Use : in path to create a parameter. It returns the router object.

.map(prefixName: string, prefixPath: string, routes: Array)

Register several routes using a prefix name and path. Routes must be an array of object that follows this schema :

{
  name: string,
  path: string,
  callback: function
}

.fetchRoute(name: string[, parameters: object])

Fetch a registered route by name or path. For dynamic routes, It'll generate the path using given parameters.

leafeon.fetchRoute('home'); // or .fetchRoute('/');
 
// with parameters
leafeon.fetchRoute('/hello/:name', {name: 'Sundown'});

.route: object

Get the current route :

{
    name: string,
    path: string,
    callback: function,
    paramsEnabled: boolean,
    params: array
}

.setErrorCallback(callback: function)

Set the not found exception. It returns the router object.

Example :

// overwrite the default not found exception
leafeon.setErrorCallback(function () {
    document.write('Oh no! Page not found.');
});

.notFoundException()

Call the not found exception callback.

.before(path: string, callback: function)

Register a middleware that will be executed before given path. Type * to target every routes. It returns the router object.

.run([callback: function])

Run the router with registered routes. Optionally, register a middleware that will be executed after every routes callback.

License

This repository is MIT licensed.

Icon made by Good Ware from Flaticon under CC 3.0 BY license.