node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

caliburne-router5

caliburne-router5

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

Author

Naoki OKAMURA (Nyarla) nyarla@thotep.net

License

MIT