Singleton-router NPM

Install

$ npm install --save singleton-router

<script type="text/javascript" src="https://unpkg.com/singleton-router@2.0.0/dist/bundle.min.js"></script>

Usage

import SingletonRouter from 'singleton-router'

const router = SingletonRouter()
// each view is a function that returns an htmlElement object
router.addRoute('/', HomeView)
// callback is fired after new element (view) is mounted
router.addRoute('/about', AboutView, () => { console.log('Content mounted to DOM') })
router.addRoute('/user/:id', UserView)
// starting route
router.setRoot('/')
// element to mount router, if not set will mount on body element
router.start('#app')

In your html, any clickeable element with an attribute data-route would navigate to the route specified there. So, for example, an anchor tag like <a data-route="/about">about</a> will navigate to the AboutView. Programatic navigation can be done with the router.goToPath function.

API

const router = SingletonRouter(options)

There is a single function exposed, the function returns the instance of the router. The instance is also saved to the global window object as RouterInstance_. It accepts an optional options object, the availaible options are:

onRender(currentView, previousView, cb): By default, the router use the replaceChild function to render the view, you can replace it to add animations, or use some html diffing function to improve performance. Notice that the function is ran inside a requestAnimationFrame call, so don't need to include it yourself. Also, when defined, you get a third parameter, that's the callback defined on each addRoute method.
onNavClick(path, element): If provided, is executed after any element with the data-route attribute in it. Useful to mark active links in navigation menus.

router.setStore(store)

Set a store container, like redux for example. This store is passed to each view.

router.addRoute(path, view , callback)

Add routes to the router. The arguments are:

path: A string with the path of the route.
view: A function that returns an HtmlElement, the function hast two arguments:
- params: The value of the params for that route.
- store: the store object set before by router.setStore.
- callback: Optional function that runs after the view is rendered to the DOM. Note that if you define a onRender function, then you MUST handle yourself this callback.