Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jacekkolasa/b9e3a313eaf03dad92372cd4c992f77c to your computer and use it in GitHub Desktop.
Save jacekkolasa/b9e3a313eaf03dad92372cd4c992f77c to your computer and use it in GitHub Desktop.
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