3.1.1 • Published 10 years ago

cycle-router v3.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
10 years ago

Cycle Router

This is the first (that I know of) router built from the ground up with Cycle.js in mind. Stands on the shoulders of battle-tested libraries switch-path for route matching and rackt/history for dealing with the History API.

Would you like to try it out?!

$ npm install cycle-router

Very Basic Example

PLEASE read the tests to get the best idea of how this library can/does work

I'll hopefully get time to make some more.

import {run} from '@cycle/core'
import {makeDOMDriver, h} from '@cycle/dom'
import {makeRouterDriver, createLocation} from 'cycle-router'

const routes = {
  '/': 'Home',
  '/route': 'Somewhere Else'
}

function Component(sources) {
  const vtree$ = sources.router.define(routes)
    .flatMap(({path, value, fullPath, /*routeDefinitions,*/ props$}) => {
      return props$.map(props => {
        return h('div', {}, {
          h('h1', `Location: ${path}`), // <h1>Location: /route</h1>
          h('h4', `Value: ${value}`), // <h4>Value: Somewhere Else</h4>
          h('span', `Props`: props.color), // <span>Props: #000000</span>
          h('span', `fullPath: ${fullPath}`) // <span>fullPath: /nested/route</span>
        })
      })
    })
  return {
    DOM: vtree$,
  }
}

function main(sources) {
  const props$ = Rx.Observable.just({color: '#000000'})
  const nestedRoute$ = sources.router.path('/nested', props$)

  const vTree$ = Component({router: nestedRoute$, ...sources}).DOM

  return {
    DOM: vTree$,
    router: Rx.Observable.just(createLocation('/nested/route'))
  }
}

run(main, {
  DOM: makeDOMDriver('.container'),
  router: makeRouterDriver({hash: true})
})

API

makeRouterDriver(options)
import {makeRouterDriver} from 'cycle-router'

Arguments :

  • (options) :: Object
    • hash :: Boolean - Use hash for routing
    • All options for creating a history object from rackt/history

returns :

  • routerDriver(history$) :: function
routerDriver(history$)

Arguments :

  • history$ :: Rx.Observable<Object>

returns : RouterObject :: Object

RouterObject
  • Keys

    • namespace :: Array - Array of pathnames
    • observable :: Rx.observable<(Location> - An observable of the current Location filtered from the namespace
    • path(path , props$) :: Function -
      • Arguments
        • path :: string (Required) - a string used to append to the namespace
        • props$ :: Rx.observable<any> (options) - and obervable props$ to be passed along
      • Returns (RouterObject)
    • define(routeDefinition, props$) :: Function -

      • Arguments
        • routeDefinition :: Object<Route: any> - An object of routes for values and any kind of value. see switch-path for more information
        • props$ :: Rx.Observable<any> - An optional props observable
      • Returns
        • Rx.Observable<Object> - and Observable containing a collection with the current path and value from the switchPath() function. fullPath - the entire path being matched and routeDefinitions for access to the defined routes. props$ and Rx.Observable<any>. props$ is inherited from the last .path() if not defined directly.
    • props$ :: Rx.Observable<any> - Observable of any sort of props to pass around

createLocation(options)
createHref(options)
import {createLocation, createHref} from 'cycle-router'

Please see the rackt/history docs

3.1.1

10 years ago

3.1.0

10 years ago

3.0.1

10 years ago

3.0.0

10 years ago

2.0.0

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.0

10 years ago