appState/visitors/count - onionify diagram implementation...made with esnextbin
Last active
July 6, 2017 14:54
-
-
Save bloodyKnuckles/40db1bf500c42eb289db8dc95bdb64de to your computer and use it in GitHub Desktop.
esnextbin sketch
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>appState/visitors/count - onionify diagram implementation</title> | |
| <!-- put additional styles and scripts here --> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
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 {run} from "@cycle/run"; | |
| import {makeDOMDriver, div, p, button, h1, a, input, span} from '@cycle/dom' | |
| import onionify, {pick, mix} from 'cycle-onionify' | |
| import xs from 'xstream' | |
| import isolate from '@cycle/isolate' | |
| function A (sources) { | |
| const initReducer$ = xs.of(function initReducer() { | |
| return {visitors: {count: 0}} | |
| }) | |
| const bSink = isolate(B, 'visitors')(sources) | |
| const reducer$ = xs.merge(initReducer$, bSink.onion) | |
| const vdom$ = bSink.DOM | |
| return {DOM: vdom$, onion: reducer$} | |
| } | |
| function B (sources) { | |
| const defaultReducer$ = xs.of(function defaultReducer(prev) { | |
| if ( typeof prev !== 'undefined' ) { return {count: prev.count} } | |
| else { return {count: 10} } | |
| }) | |
| const cSink = isolate(C, 'count')(sources) | |
| const reducer$ = xs.merge(defaultReducer$, cSink.onion) | |
| const vdom$ = cSink.DOM | |
| return {DOM: vdom$, onion: reducer$} | |
| } | |
| function C (sources) { | |
| const action$ = xs.merge( | |
| sources.DOM.select('.decrement').events('click').map(ev => -1), | |
| sources.DOM.select('.increment').events('click').map(ev => +1) | |
| ); | |
| const defaultReducer$ = xs.of(function defaultReducer(prev) { | |
| if ( typeof prev !== 'undefined' ) { return prev } | |
| else { return 20 } | |
| }) | |
| const cReducer$ = action$.map(num => function cReducer(count) { | |
| return count + num; | |
| }); | |
| const reducer$ = xs.merge(defaultReducer$, cReducer$) | |
| const state$ = sources.onion.state$; | |
| const vdom$ = state$.map(count => | |
| div([ | |
| button('.decrement', 'Decrement'), | |
| button('.increment', 'Increment'), | |
| p('Counter: ' + count) | |
| ]) | |
| ); | |
| return {DOM: vdom$, onion: reducer$} | |
| } | |
| run(onionify(A), { DOM: makeDOMDriver('#app') }) |
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
| { | |
| "name": "appState/visitors/count - onionify diagram implementation", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "@cycle/run": "3.1.0", | |
| "@cycle/dom": "17.4.0", | |
| "cycle-onionify": "3.1.0", | |
| "xstream": "10.8.0", | |
| "@cycle/isolate": "2.1.0" | |
| } | |
| } |
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
| 'use strict'; | |
| var _run = require('@cycle/run'); | |
| var _dom = require('@cycle/dom'); | |
| var _cycleOnionify = require('cycle-onionify'); | |
| var _cycleOnionify2 = _interopRequireDefault(_cycleOnionify); | |
| var _xstream = require('xstream'); | |
| var _xstream2 = _interopRequireDefault(_xstream); | |
| var _isolate = require('@cycle/isolate'); | |
| var _isolate2 = _interopRequireDefault(_isolate); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| function A(sources) { | |
| var initReducer$ = _xstream2.default.of(function initReducer() { | |
| return { visitors: { count: 0 } }; | |
| }); | |
| var bSink = (0, _isolate2.default)(B, 'visitors')(sources); | |
| var reducer$ = _xstream2.default.merge(initReducer$, bSink.onion); | |
| var vdom$ = bSink.DOM; | |
| return { DOM: vdom$, onion: reducer$ }; | |
| } | |
| function B(sources) { | |
| var defaultReducer$ = _xstream2.default.of(function defaultReducer(prev) { | |
| if (typeof prev !== 'undefined') { | |
| return { count: prev.count }; | |
| } else { | |
| return { count: 10 }; | |
| } | |
| }); | |
| var cSink = (0, _isolate2.default)(C, 'count')(sources); | |
| var reducer$ = _xstream2.default.merge(defaultReducer$, cSink.onion); | |
| var vdom$ = cSink.DOM; | |
| return { DOM: vdom$, onion: reducer$ }; | |
| } | |
| function C(sources) { | |
| var action$ = _xstream2.default.merge(sources.DOM.select('.decrement').events('click').map(function (ev) { | |
| return -1; | |
| }), sources.DOM.select('.increment').events('click').map(function (ev) { | |
| return +1; | |
| })); | |
| var defaultReducer$ = _xstream2.default.of(function defaultReducer(prev) { | |
| if (typeof prev !== 'undefined') { | |
| return prev; | |
| } else { | |
| return 20; | |
| } | |
| }); | |
| var cReducer$ = action$.map(function (num) { | |
| return function cReducer(count) { | |
| return count + num; | |
| }; | |
| }); | |
| var reducer$ = _xstream2.default.merge(defaultReducer$, cReducer$); | |
| var state$ = sources.onion.state$; | |
| var vdom$ = state$.map(function (count) { | |
| return (0, _dom.div)([(0, _dom.button)('.decrement', 'Decrement'), (0, _dom.button)('.increment', 'Increment'), (0, _dom.p)('Counter: ' + count)]); | |
| }); | |
| return { DOM: vdom$, onion: reducer$ }; | |
| } | |
| (0, _run.run)((0, _cycleOnionify2.default)(A), { DOM: (0, _dom.makeDOMDriver)('#app') }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment