Last active
May 19, 2016 11:52
-
-
Save jacekkolasa/b9e3a313eaf03dad92372cd4c992f77c to your computer and use it in GitHub Desktop.
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
import {Observable as O} from 'rx'; | |
import Cycle from '@cycle/core'; | |
import {div, label, input, hr, ul, li, a, makeDOMDriver} from '@cycle/dom'; | |
import {makeHTTPDriver} from '@cycle/http'; | |
import {makeRouterDriver} from 'cyclic-router'; // version 1.0.0 | |
import {createHashHistory} from 'history'; | |
import isolate from '@cycle/isolate'; | |
const history = createHashHistory(); | |
const drivers = { | |
DOM: makeDOMDriver('body'), | |
HTTP: makeHTTPDriver(), | |
router: makeRouterDriver(history) | |
}; | |
const ChildComponent = (sources) => { | |
const response$ = sources.HTTP | |
.filter(response$$ => { | |
return response$$.request.requestOrigin && | |
response$$.request.requestOrigin === 'child-component' | |
} | |
).mergeAll() | |
return { | |
DOM: response$.map(({body}) => div(['response: ', JSON.stringify(body)])), | |
HTTP: O.interval(2000) | |
.map((a) => { | |
return { | |
url: `/url?param=${a}`, | |
requestOrigin: 'child-component' | |
} | |
}) | |
} | |
} | |
const ParentComponent = (sources) => { | |
const { | |
DOM: childDom, | |
HTTP: childHttp | |
// this line doesnt work: | |
} = isolate(ChildComponent)(sources) | |
// this line works: | |
// } = ChildComponent(sources) | |
return { | |
DOM: childDom.map((childVTree) => div(['child vtree: ', childVTree])), | |
HTTP: childHttp | |
} | |
} | |
function main(sources) { | |
// also, ommiting the router also work (even with isolate) | |
// const parent = ParentComponent(sources); | |
// return { | |
// DOM: parent.DOM.map(a => div([a])), | |
// HTTP: O.merge(parent.HTTP) | |
// } | |
const routes = { | |
'/': () => ({DOM: div('home view')}), | |
'/child': ParentComponent, | |
'*': () => ({DOM: div('not found route')}) | |
}; | |
const {router} = sources; // get router out of sources | |
const match$ = router.define(routes); | |
const childrenSinks = match$.map( | |
({path, value}) => value({...sources, router: router.path(path)}) | |
); | |
return { | |
DOM: O.combineLatest(childrenSinks.map(x => x.DOM), | |
children => div([children]) | |
), | |
HTTP: childrenSinks.map(x => x.HTTP) | |
.filter(x => x instanceof Object) | |
.mergeAll() | |
}; | |
} | |
Cycle.run(main, drivers); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment