Last active
October 26, 2015 00:19
-
-
Save hsubra89/bc54e3e4b471d0df019d to your computer and use it in GitHub Desktop.
Gist to demonstrate the back navigation bug in @cycle/history
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <script src="./test-app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx hJSX */ | |
| document.body.innerHTML += `<div id="test-app"></div>` | |
| import Rx from 'rx' | |
| import { run } from '@cycle/core' | |
| import { makeDOMDriver, hJSX } from '@cycle/dom' | |
| import { makeHistoryDriver, filterLinks } from '@cycle/history' | |
| import switchPath from 'switch-path' | |
| // Drivers | |
| const drivers = { | |
| DOM: makeDOMDriver("#test-app"), | |
| History: makeHistoryDriver({ | |
| hash: false, | |
| queries: true, | |
| basename: '' | |
| }) | |
| } | |
| // A bunch of basic routes | |
| const routes = { | |
| "/": "Home Page", | |
| "/link1": "Link 1", | |
| "/link2": "Link 2" | |
| } | |
| const [sources, sinks] = run(main, drivers); | |
| function main(responses) { | |
| responses.History = responses.History | |
| .map(location => switchPath(location.pathname, routes).value) | |
| .subscribe(routeObj => console.log("History Changed --> ", routeObj)) | |
| const url$ = responses.DOM.select('a').events('click', true) | |
| .filter(filterLinks) | |
| .map(e => e.target.pathname) | |
| .doOnNext(routeUrl => console.log("Request Route change --> ", routeUrl)) | |
| return { | |
| DOM: view(Rx.Observable.just(true)), | |
| History: url$ | |
| } | |
| } | |
| // Rendering function. | |
| function view(state$) { | |
| return state$.map(state => { | |
| return ( | |
| <div> | |
| <div><a href="/link1">Link 1</a></div> | |
| <div><a href="/link2">Link 2</a></div> | |
| </div> | |
| ) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment