Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    cycle-routepublic

    Cycle Route

    A simple router factory that takes a static map of route => label and returns a function that maps a path to a route object.

    It was created to be used with cycle-pushstate-driver but is a generic URL mapper that can be as a helper in any routing engine.

    Install

    npm install cycle-route

    API

    makeRouter(routes)

    Takes as input a map from route definition to route name and returns a router function. cycle-route uses routington so it accepts all route definitions that routington accepts and adds a * route to define the default route.

    Format of route object

    {
      path: '/',         // this is the input path
      name: 'home',      // this is the value from the routes map
      params: {}         // this are the matched params
    }

    Usage

    Basics:

    import { makeRouter } from 'cycle-route'
     
    const router = makeRouter({
      '/': 'home',
      '/foo/:bar': 'foo',
      '*': 'notfound'          // default route
    })
     
    router('/')

    Cycle.js use case:

    import { makePushStateDriver } from 'cycle-pushstate-driver'
    import { makeRouter } from 'cycle-route'
    import routes from 'routes'
     
    const router = makeRouter(routes)
     
    function main({ DOM, Path }) {
      const Route = Path
        .map(router)
     
      const homeRequests = home({ Route })
      const fooRequests = foo({ Route })
      const barRequests = bar({ Route })
     
      const localLinkClick$ = DOM.select('a').events('click')
        .filter(e => e.currentTarget.host === global.location.host)
     
      const navigate$ = DOM.select('a').events('click')
        .map(e => e.currentTarget.pathname)
     
      const vtree$ = Rx.Observable.combineLatest(
        Route, homeRequests.DOM, fooRequests.DOM, barRequests.DOM,
        (route, homePage, fooPage, barPage) => {
          const pages = {
            'home': homePage,
            'foo': fooPage,
            'bar': barPage
          }
          return pages[route.name]
        }
      )
     
      return {
        DOM: vtree$,
        Path: navigate$,
        PreventDefault: localLinkClick$
      };
    }

    Keywords

    none

    install

    npm i cycle-route

    Downloadsweekly downloads

    5

    version

    2.0.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar