caliburne-router5 v0.2.0

caliburne-router5

• A router5 binding for caliburne.js

Description

This library is a router5 binding for calibutne.js

Example

/** @jsx element */

import { element, dom } from 'deku';

const { createRenderer } = dom;

import createContext from 'caliburne-context';
import { createMiddleware, routeNode, Link } from '../src'; 

import { Router5 } from 'router5';
import router5ListenerPlugin from 'router5-listeners';
import router5HistoryPlugin from 'router5-history';

const router = new Router5()
                .setOption('useHash', false)
                .setOption('hashPrefix', '')
                .setOption('base', `${window.location.protocol}//${window.location.host}`)
                .addNode('page', '/')
                .addNode('page.permalink', 'page/:permalink')
                .addNode('page.list', 'pages')
                .usePlugin(router5ListenerPlugin())
                .usePlugin(router5HistoryPlugin())

router.start();
router.navigate('page');

const initialState = {
  route: router.getState()
};

const context = createContext(initialState, [
  createMiddleware(router) 
]);

const render = createRenderer( document.querySelector('main'), context.dispatch );

const Index = {
  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <ul>
          <li><Link to="page">Root</Link></li>
          <li><Link to="page.permalink" params={{ permalink: 'foo' }}>Permalink</Link></li>
          <li><Link to="page.list">Pages</Link></li>
        </ul>
      </div>
    );
  }
};

const Page = {
  render({ props }) {
    return (
      <div>
        <h1>{props.route.name}</h1>
        <p><Link to="page">Back to root page.</Link></p>
      </div>
    );
  }
}

const Provider = routeNode('page')({
  render({ props, children }) {
    switch (props.route.name) {
      case 'page.permalink':
        return element(Page, props, children);
      case 'page.list':
        return element(Page, props, children);
      default:
        return element(Index, props, children);
    }
  }
})

context.on(':apply-updating', (state) => {
  render(<Provider {...state} />, context);
});

context.update((_state) => {
  return initialState;
})

See Also

• caliburne
• caliburne-context
• router5

Author

Naoki OKAMURA (Nyarla) nyarla@thotep.net

License

MIT