cycle-page
Tiny client-side router for Cycle.js
Last updated 4 years ago by garrydzeng .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cycle-page 
SYNC missed versions from official npm registry.

Introduction

This driver help you manage browser history and receive Location.

Concepts

Location represents a url with related state.

interface Location {
  host: string,
  protocol: string,
  path: string,
  canonicalPath: string, // path without baseName
  hash?: string,
  baseName?: string,
  state?: any,
  queryString?: {
    [name: string]: string
  }
}

Action represents a history operation:

  • push : Adds new Location into history stack.
  • replace : Updates the most recent entry on the history stack to newly Location.
  • forward : Goes to the next page in history stack.
  • back : Goes to the previous page.
enum Action {
  push,
  replace,
  forward,
  back
}

User uses Directive to controls history behavior.
location is optional,
because not all action needs it.
such as back action.

interface Directive {
  location?: Location,
  action: Action
}

Driver sends a Context to your data component when history changed.

interface Context {
  name?: string,
  location: Location,
  args?: {
    [name: string]: string
  }
}

Finally, driver accepts an optional Option to initialization.

interface Option {
  hash?: boolean,
  baseName?: string,
  click?: boolean,
  patterns?: {
    [name: string]: string
  }
}

Detail of option:

  • hash : Use hash fragment instead of url.
  • baseName : If provided, all path will relatives to it.
  • click : Whether to capture DOM click event.
  • patterns : Define url pattern.

Driver exports

Main function

function makePageDriver(option : Option) : (directive$ : Stream<Directive>) => Stream<Context>

and Action constant...

const action = {
  push: "PUSH",
  replace: "REPLACE",
  forward: "FORWARD",
  back: "BACK"
}

Work with path arguments.

please see path-to-regexp#parameters !

Examples

Send initial Directive.

import {run} from "@cycle/xstream-run"
import {makePageDriver, Action} from "cycle-page"
import xstream from "xstream"

function main() {
  return {
    page: xstream.of({
      action: Action.push,
      location: {
        path: "/"
      }
    })
  }
}

run(main, {
  page: makePageDriver({
    hash: true
  })
})

Show component by url.

import {run} from "@cycle/xstream-run"
import {makePageDriver, Action} from "cycle-page"
import xstream from "xstream"
import {makeDOMDriver, div} from "@cycle/dom"

function main({ dom, page }) {
  return {
    dom: page.map(context => {
      // name will be matched pattern's name defined in option.
      switch (context.name) {
        case "index": return div("index")
        case "userDetail": return div(`Hello ${context.args.id}`)
        default: return div("404")
      }
    }),
    page: xstream.of({
      action: Action.push,
      location: {
        path: "/"
      }
    })
  }
}

run(main, {
  dom: makeDOMDriver(document.body),
  page: makePageDriver({
    patterns: {
      userDetail: "/users/:id",
      index: "/"
    }
  })
})

Redirection

import {run} from "@cycle/xstream-run"
import {makePageDriver, Action} from "cycle-page"
import xstream from "xstream"

function main() {
  return {
    page: xstream.of({
      action: Action.push,
      location: {
        protocol: 'https',
        host: 'www.google.com',
        queryString: {
          q: 'cycle.js'
        }
      }
    })
  }
}

run(main, {
  page: makePageDriver()
})

Current Tags

  • 1.3.2                                ...           latest (4 years ago)

4 Versions

  • 1.3.2                                ...           4 years ago
  • 1.3.0                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dependencies (5)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |