wrouter

demo

Router state machine for virtual doms. It's a wrapper around single-page and catch-links for easier client side routing. It also works in Node if you pass in a route event.

install

$ npm install wrouter

example

Node:

var Router = require('wrouter');
var struct = require('observ-struct');
var value = require('observ');
var assert = require('assert');

var routeEvent = value('');

var routerState = Router({
  routeHash: {
    '/animals/:id': {
      component: {
        state: struct({ example: 'my data' }),
        render: function renderMyComponent(state) {
          assert(state.example === 'my data');
        }
      },
      // do anything that needs to happen before component.render is called
      routeFn: function(params, done) {
        console.log(params);
        done();
      }
    }
  },
  // pass in an event implemented like `observ`. If this is omitted the
  // router will listen for click events on document.body
  // (via `catch-links`)
  event: routeEvent
});

routerState(function onChange(state) {
  var view = Router.route(state);
  // {
  //    state: { example: 'my data' },
  //    render: renderMyComponent
  // }
  view.render(view.state);
});


routeEvent.set('/animals/3');   // { id: '3' }
try {
  routeEvent.set('no-match');
}
catch(err) {
  console.log(err);
  // [Error: router: no match found]
}

Browser:

var Loop = require('main-loop');
var vdom = require('virtual-dom');
var h = vdom.h;
var struct = require('observ-struct');
var value = require('observ');
var noop = function(){};

var Router = require('../Router.js');
var components = require('./components');

var animalItemEvent = struct({});

function fetchAnimal(id, cb) {
  setTimeout(function () {
    cb({
      id: id,
      _name: 'iguana',
      type: 'reptile'
    });
  }, 500);
}

var app = App();
var loop = Loop( app(), renderApp, vdom);
document.getElementById('content').appendChild(loop.target);
app(loop.update);

// root component
function App() {

  var routeHash = {
    '/': {
      component: {
        state: components.Home({home: 'home state'}),
        render: components.Home.render
      }
    },
    '/animals': {
      component: {
        state: components.Animals(),
        render: components.Animals.render
      }
    },
    '/animals/:id': {
      component: {
        state: components.AnimalItem({
          event: animalItemEvent
        }),
        render: components.AnimalItem.render
      },

      // do anything that needs to be done before the view is rendered
      routeFn: function(params, done) {
        if ( !state.loading() ) state.loading.set(true);
        fetchAnimal(params.id, function(animal) {
          if (state.loading) state.loading.set(false);
          animalItemEvent.set(animal);
          done();
        });
      }
    }
  };

  var state = struct({
    loading: value(false),
    router: Router({
      routeHash: routeHash
    })
  });

  return state;
}

function renderApp(state) {
  var page = Router.route(state.router);
  return h('div', {
    style: { }
  }, [
    h('div', {style: {
      width: '50%',
      display: 'inline-block'
    }}, [
      menu(),
      page ? page.render(page.state) : '',
    ]),
    h('div.loading', {
      style: {
        width: '30%',
        display: state.loading ? 'inline-block' : 'none',
        textAlign: 'center',
        fontSize: '2em',
      }
    }, ['loading'])
  ]);

  function menu() {
    return h('ul', [
      h('li', [
        h('a', {
          href: '/'
        }, 'Home')
      ]),
      h('li', [
        h('a', {
          href: '/animals'
        }, 'Animals')
      ]),
      h('li', [
        h('a', {
          href: '/animals/1'
        }, 'Animal Item')
      ])
    ]);
  }
}