MicroClientRouter

micro client router in es6.

Motivation

I want to make a router without dependencies.

Getting Started

$ npm install micro-clinet-router

import MicroClientRouter from 'micro-client-router';

API

It has 5 API only.

Basic API

• route
• emit

Support API

• pushState
• setLoadHandler
• setPopStateHandler

initialize

let router = new MicroClientRouter();

if you want to emit when load/popstate events. (use pushState method, you want to emit when pushstate events.)

let router = new MicroClientRouter({ onload: true, onpopstate: true });

route

router.route('/posts', () => {
  // do somethong.
});
router.route('/posts/:id', ({ id }) => {
  // do somethong.
});

emit

router.route('/posts/:id', (id) => {
  console.log(id); // 100
});
 
route.emit('/posts/100');

pushState

let $link = document.querySelector('a');
 
$link.addEventListener('click', (event) => {
  let url = event.target.href;
  route.pushState(null, null, url); // change url and run callback seted by route.
});

setLoadHandler

route.setLoadHandler(() => {
  console.log('call this when onload.');
});

setPopStateHandler

route.setLoadHandler(() => {
  console.log('call this when onpopstate.');
});

Examples

import MicroClientRouter from 'micro-client-router';
 
let router = new MicroClientRouter({ onload: true, onpopstate: true });
 
router.route('/posts', () => {
  // show posts.
});
 
router.route('/posts/:id', (id) => {
  // show a post.
});
 
let $link = document.querySelector('a');
 
$link.addEventListener('click', (event) => {
  let url = event.target.href;
  route.pushState(null, null, url); // change url and run callback seted by route.
});