'use strict'; var _CycleDOM = CycleDOM; var h4 = _CycleDOM.h4; var a = _CycleDOM.a; var button = _CycleDOM.button; var p = _CycleDOM.p; var label = _CycleDOM.label; var input = _CycleDOM.input; var h1 = _CycleDOM.h1; var hr = _CycleDOM.hr; var div = _CycleDOM.div; var makeDOMDriver = _CycleDOM.makeDOMDriver; var _CycleHTTPDriver = CycleHTTPDriver; var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver; // DOM read effect: button clicked // HTTP write effect: request sent // HTTP read effect: response received // dom write effect: data display function main(sources) { var clickEvent$ = sources.DOM.select('.get-first').events('click'); var request$ = clickEvent$.map(function () { return { url: 'https://jsonplaceholder.typicode.com/users/1', method: 'GET' }; }); var response$$ = sources.HTTP.filter(function (response$) { return response$.request.url === 'https://jsonplaceholder.typicode.com/users/1'; }); var response$ = response$$['switch'](); var firstUser$ = response$.map(function (response) { return response.body; }).startWith(null); return { DOM: firstUser$.map(function (firstUser) { return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]); }), HTTP: request$ }; } // source: input (read) effects // sink: output (write) effects function consoleLogDriver(msg$) { msg$.subscribe(function (msg) { return console.log(msg); }); } var drivers = { HTTP: makeHTTPDriver(), DOM: makeDOMDriver('#app') }; Cycle.run(main, drivers);