yup counter...made with esnextbin
Last active
July 6, 2017 14:47
-
-
Save bloodyKnuckles/1420fa96f0d70760fea8c96044f53d97 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>yup counter</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 App (sources) { | |
const initReducer$ = xs.of(function initReducer() { | |
return {count: 10, header: 'yup'} | |
}) | |
const action$ = sources.DOM | |
.select('#header').events('input') | |
.map(ev => ev.target.value) | |
const updateReducer$ = action$ | |
.map(txt => function updateReducer (prev) { | |
return {count: prev.count, header: txt} | |
}) | |
const parentReducer$ = xs.merge(initReducer$, updateReducer$) | |
const state$ = sources.onion.state$; | |
const cSink = isolate(Counter, 'count')(sources) | |
const reducer$ = xs.merge(parentReducer$, cSink.onion) | |
const vdom$ = xs.combine(state$, cSink.DOM) | |
.map(([state, cVDOM]) => { | |
return div([h1(state.header), input({attrs: {id: 'header', value: state.header}}), cVDOM]) | |
}) | |
return {DOM: vdom$, onion: reducer$} | |
} | |
function Counter (sources) { | |
const action$ = xs.merge( | |
sources.DOM.select('.decrement').events('click').map(ev => -1), | |
sources.DOM.select('.increment').events('click').map(ev => +1) | |
); | |
const state$ = sources.onion.state$; | |
const vdom$ = state$.map(count => | |
div([ | |
button('.decrement', 'Decrement'), | |
button('.increment', 'Increment'), | |
p('Counter: ' + count) | |
]) | |
); | |
const defaultReducer$ = xs.of(function defaultReducer(prev) { | |
return prev || 0; | |
}); | |
const cReducer$ = action$.map(num => function cReducer(count) { | |
return count + num; | |
}); | |
const reducer$ = xs.merge(defaultReducer$, cReducer$); | |
return {DOM: vdom$, onion: reducer$} | |
} | |
run(onionify(App), { 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": "yup counter", | |
"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": "3.0.0", | |
"babel-runtime": "6.22.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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); | |
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); | |
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 App(sources) { | |
var initReducer$ = _xstream2.default.of(function initReducer() { | |
return { count: 10, header: 'yup' }; | |
}); | |
var action$ = sources.DOM.select('#header').events('input').map(function (ev) { | |
return ev.target.value; | |
}); | |
var updateReducer$ = action$.map(function (txt) { | |
return function updateReducer(prev) { | |
return { count: prev.count, header: txt }; | |
}; | |
}); | |
var parentReducer$ = _xstream2.default.merge(initReducer$, updateReducer$); | |
var state$ = sources.onion.state$; | |
var cSink = (0, _isolate2.default)(Counter, 'count')(sources); | |
var reducer$ = _xstream2.default.merge(parentReducer$, cSink.onion); | |
var vdom$ = _xstream2.default.combine(state$, cSink.DOM).map(function (_ref) { | |
var _ref2 = (0, _slicedToArray3.default)(_ref, 2), | |
state = _ref2[0], | |
cVDOM = _ref2[1]; | |
return (0, _dom.div)([(0, _dom.h1)(state.header), (0, _dom.input)({ attrs: { id: 'header', value: state.header } }), cVDOM]); | |
}); | |
return { DOM: vdom$, onion: reducer$ }; | |
} | |
function Counter(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 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)]); | |
}); | |
var defaultReducer$ = _xstream2.default.of(function defaultReducer(prev) { | |
return prev || 0; | |
}); | |
var cReducer$ = action$.map(function (num) { | |
return function cReducer(count) { | |
return count + num; | |
}; | |
}); | |
var reducer$ = _xstream2.default.merge(defaultReducer$, cReducer$); | |
return { DOM: vdom$, onion: reducer$ }; | |
} | |
(0, _run.run)((0, _cycleOnionify2.default)(App), { DOM: (0, _dom.makeDOMDriver)('#app') }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment