Proposal for cycle routing using a url driver and separate route resolver

cycle-routing-example.js

/** @jsx hJSX */

import { run, Rx } from '@cycle/core'
import { makeDOMDriver, hJSX } from '@cycle/dom'
import switchPath from 'switch-path'

const routes = {
  '/': <h1>Home</h1>,
  '/user': <h1>User</h1>
}

function resolve (path) {
  return switchPath(path, routes)
}

function makeURLDriver () {
  return function URLDriver (navigate$) {
    let pushState$ = navigate$
      .distinctUntilChanged()
      .do(url => history.pushState(null, null, url))
    let popState$ = Rx.Observable.fromEvent(window, 'popstate')
      .map(e => location.pathname)
      .distinctUntilChanged()
    return Rx.Observable.merge(pushState$, popState$)
  }
}

function main ({ DOM, URL }) {
  const navigate$ = DOM.select('a').events('click')
    .filter(e => e.currentTarget.host === location.host)
    .do(e => e.preventDefault())
    .map(e => e.currentTarget.href)

  const vtree$ = URL
    .map(resolve)
    .map({ value } => value)

  return {
    DOM: vtree$,
    URL: navigate$
  }
}

run(main, {
  DOM: makeDOMDriver('main'),
  URL: makeURLDriver()
})