made with esnextbin
Created
April 6, 2017 20:25
-
-
Save geovanisouza92/37cc79bca9b43d28ee59a58ca878acf2 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
| // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| import { run } from '@cycle/run' | |
| import { makeDOMDriver, div, button, span } from '@cycle/dom' | |
| import xs from 'xstream' | |
| // Reducers | |
| const incReducer = count => count + 1 | |
| const decReducer = count => count - 1 | |
| const main = sources => { | |
| // Intent | |
| const inc$ = sources.DOM | |
| .select('.inc').events('click') | |
| .mapTo(incReducer) // "mapeia" o evento para uma função que modifica o estado | |
| const dec$ = sources.DOM | |
| .select('.dec').events('click') | |
| .mapTo(decReducer) // "mapeia" o evento para uma função que modifica o estado | |
| // Junta todas as ações (reducers) | |
| const action$ = xs.merge(inc$, dec$) | |
| // Model | |
| const initialState = 0 // Estado inicial | |
| const count$ = action$ | |
| // "fold" é outro nome para "reduce", uma forma de aplicar as ações sobre o estado | |
| .fold((count, reducer) => reducer(count), initialState) | |
| // View | |
| // converte o estado para uma view | |
| const vtree$ = count$.map(count => | |
| div([ | |
| span(`Count is ${count}`), | |
| button('.inc', ' + '), | |
| button('.dec', ' - ') | |
| ]) | |
| ) | |
| const sinks = { | |
| DOM: vtree$ | |
| } | |
| return sinks | |
| } | |
| const drivers = { | |
| DOM: makeDOMDriver('.app') | |
| } | |
| run(main, drivers) |
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/run": "3.1.0", | |
| "@cycle/dom": "17.1.0", | |
| "xstream": "10.4.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 _run = require('@cycle/run'); | |
| var _dom = require('@cycle/dom'); | |
| var _xstream = require('xstream'); | |
| var _xstream2 = _interopRequireDefault(_xstream); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| // Reducers | |
| var incReducer = function incReducer(count) { | |
| return count + 1; | |
| }; // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| var decReducer = function decReducer(count) { | |
| return count - 1; | |
| }; | |
| var main = function main(sources) { | |
| // Intent | |
| var inc$ = sources.DOM.select('.inc').events('click').mapTo(incReducer); // "mapeia" o evento para uma função que modifica o estado | |
| var dec$ = sources.DOM.select('.dec').events('click').mapTo(decReducer); // "mapeia" o evento para uma função que modifica o estado | |
| // Junta todas as ações (reducers) | |
| var action$ = _xstream2.default.merge(inc$, dec$); | |
| // Model | |
| var initialState = 0; // Estado inicial | |
| var count$ = action$ | |
| // "fold" é outro nome para "reduce", uma forma de aplicar as ações sobre o estado | |
| .fold(function (count, reducer) { | |
| return reducer(count); | |
| }, initialState); | |
| // View | |
| // converte o estado para uma view | |
| var vtree$ = count$.map(function (count) { | |
| return (0, _dom.div)([(0, _dom.span)('Count is ' + count), (0, _dom.button)('.inc', ' + '), (0, _dom.button)('.dec', ' - ')]); | |
| }); | |
| var sinks = { | |
| DOM: vtree$ | |
| }; | |
| return sinks; | |
| }; | |
| var drivers = { | |
| DOM: (0, _dom.makeDOMDriver)('.app') | |
| }; | |
| (0, _run.run)(main, drivers); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment