made with esnextbin
Last active
November 25, 2016 18:59
-
-
Save geovanisouza92/56bcf5f3a641672ce64fe3c21b73e65b to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| </head> | |
| <body> | |
| <!-- put markup and other contents here --> | |
| <div class="app"></div> | |
| </body> | |
| </html> |
This file contains hidden or 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 {run} from '@cycle/xstream-run' | |
| import {makeDOMDriver, div} from '@cycle/dom' | |
| import {makeHTTPDriver} from '@cycle/http' | |
| import isolate from '@cycle/isolate' | |
| import xs from 'xstream' | |
| function item (sources) { | |
| // Other logic here | |
| return { | |
| DOM: sources.props | |
| .map(it => div(it.name)) | |
| } | |
| } | |
| // Remember to isolate each component individually | |
| const Item = sources => isolate(item)(sources) | |
| function main (sources) { | |
| const response$ = sources.HTTP | |
| .select('users').flatten() // Pick responses | |
| .map(res => JSON.parse(res.text)) // Parses them | |
| .remember() // As this is a "state" | |
| const itemsSinks$ = response$ | |
| // Convert array of items into | |
| // array of component "instances" (sinks) | |
| .map(items => items | |
| .map(item => { | |
| // Create ad-hoc sources for each component | |
| const itemSources = { | |
| ...sources, // Pick parent' sources | |
| props: xs.of(item).remember() // And append anything else | |
| } | |
| return Item(itemSources) // And create 'em | |
| }) | |
| ) | |
| // Pick only and Array of Vtree$ from Item's | |
| const itemsDOM$ = itemsSinks$ // This is a Stream of Array of Sinks (Object of Streams) | |
| .map(itemsSinks => // This is an Array of Sinks | |
| xs.combine( // Combine sinks | |
| ...itemsSinks.map(sinks => sinks.DOM) // Here we pick only the DOM sink | |
| ) | |
| ) | |
| .flatten() // Flatten to convert the Stream of Streams into plain Stream (DOM sink, in this case) | |
| const vtree$ = itemsDOM$ | |
| .map(itemsVtree => | |
| div([ | |
| div('Header'), // And other components | |
| ...itemsVtree | |
| ]) | |
| ) | |
| return { | |
| DOM: vtree$, | |
| HTTP: xs.of({ | |
| url: 'https://jsonplaceholder.typicode.com/users', | |
| category: 'users' | |
| }) | |
| } | |
| } | |
| run(main, { | |
| DOM: makeDOMDriver('.app'), | |
| HTTP: makeHTTPDriver() | |
| }) |
This file contains hidden or 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
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "@cycle/xstream-run": "3.1.0", | |
| "@cycle/dom": "14.1.0", | |
| "@cycle/http": "11.2.0", | |
| "@cycle/isolate": "1.4.0", | |
| "xstream": "8.0.0", | |
| "babel-runtime": "6.18.0" | |
| } | |
| } |
This file contains hidden or 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
| 'use strict'; | |
| var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); | |
| var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); | |
| var _extends2 = require('babel-runtime/helpers/extends'); | |
| var _extends3 = _interopRequireDefault(_extends2); | |
| var _xstreamRun = require('@cycle/xstream-run'); | |
| var _dom = require('@cycle/dom'); | |
| var _http = require('@cycle/http'); | |
| var _isolate = require('@cycle/isolate'); | |
| var _isolate2 = _interopRequireDefault(_isolate); | |
| var _xstream = require('xstream'); | |
| var _xstream2 = _interopRequireDefault(_xstream); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| function item(sources) { | |
| // Other logic here | |
| return { | |
| DOM: sources.props.map(function (it) { | |
| return (0, _dom.div)(it.name); | |
| }) | |
| }; | |
| } | |
| // Remember to isolate each component individually | |
| var Item = function Item(sources) { | |
| return (0, _isolate2.default)(item)(sources); | |
| }; | |
| function main(sources) { | |
| var response$ = sources.HTTP.select('users').flatten() // Pick responses | |
| .map(function (res) { | |
| return JSON.parse(res.text); | |
| }) // Parses them | |
| .remember(); // As this is a "state" | |
| var itemsSinks$ = response$ | |
| // Convert array of items into | |
| // array of component "instances" (sinks) | |
| .map(function (items) { | |
| return items.map(function (item) { | |
| // Create ad-hoc sources for each component | |
| var itemSources = (0, _extends3.default)({}, sources, { // Pick parent' sources | |
| props: _xstream2.default.of(item).remember() // And append anything else | |
| }); | |
| return Item(itemSources); // And create 'em | |
| }); | |
| }); | |
| // Pick only and Array of Vtree$ from Item's | |
| var itemsDOM$ = itemsSinks$ // This is a Stream of Array of Sinks (Object of Streams) | |
| .map(function (itemsSinks) { | |
| return (// This is an Array of Sinks | |
| _xstream2.default.combine.apply(_xstream2.default, (0, _toConsumableArray3.default)(itemsSinks.map(function (sinks) { | |
| return sinks.DOM; | |
| }))) | |
| ); | |
| }). // Here we pick only the DOM sink | |
| flatten(); // Flatten to convert the Stream of Streams into plain Stream (DOM sink, in this case) | |
| var vtree$ = itemsDOM$.map(function (itemsVtree) { | |
| return (0, _dom.div)([(0, _dom.div)('Header')].concat((0, _toConsumableArray3.default)(itemsVtree))); | |
| }); | |
| return { | |
| DOM: vtree$, | |
| HTTP: _xstream2.default.of({ | |
| url: 'https://jsonplaceholder.typicode.com/users', | |
| category: 'users' | |
| }) | |
| }; | |
| } | |
| (0, _xstreamRun.run)(main, { | |
| DOM: (0, _dom.makeDOMDriver)('.app'), | |
| HTTP: (0, _http.makeHTTPDriver)() | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment