Bacon.js Router

baconjs-router is a project used at Fox Sports Australia for a few of our projects in an effort to have simple SinglePageApps, using our favourite Bacon.js reactive stream based logic.

Code Example

import bacon from 'baconjs';
import baconjsRouter, {getBaconRouterHistoryBus} from 'baconjs-router';

// For demo purposes, we're going to simply say our baseUrl and current path is based on where you'd view this example using `#` to denote new paths.

const routeStream = baconRouter(
    window.location.origin + window.location.pathname + '#',
    window.location.hash.replace('#', ''),

    // User ID Match
    '/user/:userId',
    // (path params, query params, hash)
    ({params, query, hash}) => Bacon.later(0, {
        pageType: 'user',
        userId: params.userId,
        detailed: query.detailed,
        postCount: query.postCount,
        section: hash,
    }),

    // /about route, matched purely by string
    '/about',
    () => bacon.later(0, {pageType: 'about'}),

    // Group ID Match
    /\/group\/(\d+)/,
    (groupId) => bacon.later(0, {pageType: 'group', groupId}),

    // All other routes are considered 404
    /./,
    () => bacon.later(0, {pageType: 404});
);

Keep in mind that like a Bacon.update or Bacon.when statement, the higher the route, the higher the action priority. Therefore if you want to match /user/1234/edit, it should be in your routes before /user/1234, depending how you've written your matches.

Super basic code sample can be found in example.html.

Additionally, here's a more detailed code example compiled by Fed at https://github.com/fknussel/baconjs-router-example. Thanks Fed!

Sample

npm run example

and navigate yourself to the 'example.html' file. Click a couple of links, then hit back.

Motivation

We wanted something very basic in functionality that supported both browser logic, as well as server-side rendering logic. The rest of the magic is up to you.

Because of the way we server-side render, we also needed to be able to dynamically set base paths where the server has no context of the page it's being called on.

Thus we have a concept of baseUrl and path, where baseUrl would be something like http://www.foxsports.com.au/some-dynamic-page and path would be handed in as something like 'root' / or maybe the /football section. But as far as our router is concerned, we're only dealing with pages that happen on or beyond http://www.foxsports.com.au/some-dynamic-page

Installation

npm install --save baconjs-router

Then just either import the router, or the controlling bus, or both (depending what you need).

import baconjsRouter, {getBaconRouterHistoryBus} from 'baconjs-router';

API Reference

Depending on the size of the project, if it is small and simple enough the reference docs can be added to the README. For medium size to larger projects it is important to at least provide a link to where the API reference docs live.

Tests

TBC - We have some internal tests, that aren't specifically around the router alone. We'll get to those.

Branches in GitHub

Moving forward, develop will be our main working branch, and while we consider it stable, master will always reflect the latest version you'll find on npm packages.

Contributors

All the Web Development Team here at Fox Sports Australia.

License

MIT License, see LICENCE.md for details.