cycle-hashchange-driver - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

package.json

		{
		"name": "cycle-hashchange-driver",
		"version": "1.0.0",
		"description": "A Cycle.js driver for working with the onhashchange API",
		"version": "2.0.0",
		"description": "A Cycle.js driver for the hashchange event",
		"main": "lib/index.js",
		@@ -6,0 +6,0 @@ "scripts": {

README.md


		# Cycle Navigation Driver
		# Cycle hashchange Driver

		A [Cycle.js](http://cycle.js.org) [driver](http://cycle.js.org/drivers.html) for navigation.
		A [Cycle.js](http://cycle.js.org) [driver](http://cycle.js.org/drivers.html) for the [```hashchange``` event](https://developer.mozilla.org/en-US/docs/Web/Events/hashchange).

		## API
		## Design Choices

		### ```makePushStateDriver ()```
		This is a very minimal ```Cycle.js``` sink driver that simply isolates ```hashchange``` events. It is meant to drive routing with another library like ```switch-path``` or ```wayfarer```.

		Returns a navigation driver that calls ```history.pushState``` on the input paths and outputs paths sent to ```pushState``` as well as received with ```popstate``` events, starting with the current path.
		## API

		### ```makeHashChangeDriver ()```

		Returns a navigation driver that sets ```location.hash``` to the input hashes and outputs hashes received with ```hashchange``` events, starting with the current hash.
		Returns a driver that takes no input and outputs hashes from ```hashchange``` events, starting with the current hash.

		### ```makeNavigationDriver ()```

		Returns the pushState driver if ```history.pushState``` is available, otherwise returns the hashchange Driver.

		## Install

		Only available via git for now. I will publish this module on npm once I have added tests.
		```sh
		npm install cycle-hashchange-driver
		```

		@@ -30,3 +28,3 @@ ## Usage
		import Cycle from '@cycle/core'
		import { makeNavigationDriver } from 'cycle-navigation-driver'
		import { makeHashChangeDriver } from 'cycle-hashchange-driver'

		@@ -38,3 +36,3 @@ function main (responses) {
		const drivers = {
		Navigation: makeNavigationDriver()
		Path: makeHashChangeDriver()
		}
		@@ -48,3 +46,3 @@
		```js
		function main(responses) {
		function main({ DOM, Path }) {
		let localLinkClick$ = DOM.select('a').events('click')
		@@ -56,3 +54,3 @@ .filter(e => e.currentTarget.host === location.host)

		let vtree$ = responses.Navigation
		let vtree$ = Path
		.map(url => {
		@@ -74,3 +72,3 @@ switch(url) {
		DOM: vtree$,
		Navigation: navigate$,
		Path: navigate$,
		preventDefault: localLinkClick$
		@@ -80,42 +78,1 @@ };
		```

		Routing use case:

		```js
		import switchPath from 'switch-path'
		import routes from './routes'

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

		function main(responses) {
		let localLinkClick$ = DOM.select('a').events('click')
		.filter(e => e.currentTarget.host === location.host)

		let navigate$ = localLinkClick$
		.map(e => e.currentTarget.href)

		let vtree$ = responses.Navigation
		.map(resolve)
		.map(({ value }) => value)

		return {
		DOM: vtree$,
		Navigation: navigate$,
		preventDefault: localLinkClick$
		};
		}
		```

		## Roadmap

		### v0.x
		- Add tests
		- Handle errors
		- Support hash changes
		- Use cycle eslint config

		### v1.x
		- Move to cycle.js org
		- Publish on npm

src/index.js

		@@ -9,11 +9,6 @@ import { Rx } from '@cycle/core'

		function hashChangeDriver (navigate$) {
		function hashChangeDriver () {
		const hashChange$ = Rx.Observable.fromEvent(global, 'hashchange')
		.map(e => e.newUrl)
		.map(e => e.newUrl.split('#').slice(1).join('#'))

		navigate$
		.subscribe(hash => {
		global.location.hash = hash
		})

		return hashChange$
		@@ -20,0 +15,0 @@ .startWith(global.location.hash)

test/index.js

		@@ -78,6 +78,5 @@ import test from 'tape'
		const driver = makeHashChangeDriver()
		const navigate$ = Rx.Observable.empty()
		const hashchangeEvent = { newUrl: '/home', oldUrl: '/current' }
		const hashchangeEvent = { newUrl: 'http://www.test/app#/home', oldUrl: 'http://www.test/app#/current' }
		const output = []
		driver(navigate$)
		driver()
		.take(2)
		@@ -84,0 +83,0 @@ .subscribe(

cycle-hashchange-driver - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics