yerkopalma/singleton-router

:anchor: Tiny singleton router for the browser

singleton-router

Install

$ npm install --save singleton-router

or

<script type="text/javascript" src="https://unpkg.com/[email protected]/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.

router.setRoot(path)

Set a starting route

router.goToPath(path [, title])

Programmatically navigates to a route. Optionally add a title for the history api.

router.start([selector])

Start the router. This function receive a selector to mount the app, if none is provided, it will replace and update the body od the document.

Licencia

MIT © Yerko Palma.

singleton-router's Issues

Programatically go to notFound (default) view

Add prefix support

Improve bundled size

Actual size (37.1 Kb) is too heavy, should be improved.

options

• switch minifyjs for butternut -> ~25.38Kb
• use vanilla ES5 syntax -> ~24.72Kb
• separate the standalone version -> bundle ~4.18Kb, web.min ~24.74Kb
• avoid url-pattern dependency

Add 404 or default route support

Test the thing!

Test Suite

• Singleton Pattern
• Router
  • popstate
  • setStore
  • addRoute
  • setRoot
  • start
  • onPopState
  • getRoute
  • notFound
  • gotToPath
  • manageState
  • requestStateUpdate
• Route
  • getParams
  • setParams
  • onStart

Support priority in routes

Support these routes

const router = SingletonRouter()

router.addRoute('/', PostsView)
router.addRoute('/posts', PostsView)
router.addRoute('/posts/:post', PostView)
router.addRoute('/authors', AuthorsView)
router.addRoute('/authors/:author', AuthorView)
router.addRoute('/tags', TagsView)
router.addRoute('/tags/:tag', PostsView)
router.addRoute('/search', SearchView)
router.addRoute('/:year/:month/:day', PostsView)
router.setRoot('/')
router.start('#app')

Right now, the getRoute method, returns the first matched route, not the best matched routes, so I need to define some priority in routes.
The above example would render the PostsView for /posts/awesome-post instead of the PostView

New added links don't manage route

When something like

<a data-route="/new" href="#"></a>

is added, it wont have the event listener for new navigation, so it will have default behaviour

support transitions (animations)