Skip to content

Instantly share code, notes, and snippets.

@Frikki

Frikki/esnextbin.md

Last active Nov 21, 2016
Embed
What would you like to do?
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id=app></div>
<!-- put markup and other contents here -->
</body>
</html>
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import { run } from '@cycle/xstream-run';
import { makeDOMDriver, div, button } from '@cycle/dom';
import xs from 'xstream';
import dropRepeats from 'xstream/extra/dropRepeats';
import isolate from '@cycle/isolate';
import R from 'ramda';
function Component(sources) {
// expected: one console.log per component
// actual: more and more for every click
sources.shared$
.addListener({
next: i => console.log(i),
error: err => console.error(err),
complete: () => console.log('completed'),
})
return {
DOM : xs.of(div('Component'))
}
}
function main(sources) {
// just a state stream used to create two components
const shared$ = sources.DOM
.select('button')
.events('click')
.map(() => xs.of([1,2]))
.flatten()
.startWith([1,2]);
const sinks$ = shared$
// dropRepeats fixes problem
//.compose(dropRepeats(R.equals))
.map(array => array.map(key => isolate(Component, key)({ shared$, ...sources })))
const childDOM$ = sinks$
.map(array => array.map(sink => sink.DOM))
.map(array => xs.combine(...array))
.flatten();
const vdom$ = childDOM$.map(childDOM => div([
div(childDOM),
button('Change Shared Data'),
div('PROBLEM: Why do I get more and more console.logs for every click on the button?')
]))
return {
DOM : vdom$
}
}
run(main, {
DOM : makeDOMDriver('#app'),
});
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"@cycle/xstream-run": "3.1.0",
"@cycle/dom": "14.1.0",
"xstream": "8.0.0",
"@cycle/isolate": "1.4.0",
"ramda": "0.22.1",
"babel-runtime": "6.18.0"
}
}
'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 _xstream = require('xstream');
var _xstream2 = _interopRequireDefault(_xstream);
var _dropRepeats = require('xstream/extra/dropRepeats');
var _dropRepeats2 = _interopRequireDefault(_dropRepeats);
var _isolate = require('@cycle/isolate');
var _isolate2 = _interopRequireDefault(_isolate);
var _ramda = require('ramda');
var _ramda2 = _interopRequireDefault(_ramda);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
function Component(sources) {
// expected: one console.log per component
// actual: more and more for every click
sources.shared$.addListener({
next: function next(i) {
return console.log(i);
},
error: function error(err) {
return console.error(err);
},
complete: function complete() {
return console.log('completed');
}
});
return {
DOM: _xstream2.default.of((0, _dom.div)('Component'))
};
}
function main(sources) {
// just a state stream used to create two components
var shared$ = sources.DOM.select('button').events('click').map(function () {
return _xstream2.default.of([1, 2]);
}).flatten().startWith([1, 2]);
var sinks$ = shared$
// dropRepeats fixes problem
//.compose(dropRepeats(R.equals))
.map(function (array) {
return array.map(function (key) {
return (0, _isolate2.default)(Component, key)((0, _extends3.default)({ shared$: shared$ }, sources));
});
});
var childDOM$ = sinks$.map(function (array) {
return array.map(function (sink) {
return sink.DOM;
});
}).map(function (array) {
return _xstream2.default.combine.apply(_xstream2.default, (0, _toConsumableArray3.default)(array));
}).flatten();
var vdom$ = childDOM$.map(function (childDOM) {
return (0, _dom.div)([(0, _dom.div)(childDOM), (0, _dom.button)('Change Shared Data'), (0, _dom.div)('PROBLEM: Why do I get more and more console.logs for every click on the button?')]);
});
return {
DOM: vdom$
};
}
(0, _xstreamRun.run)(main, {
DOM: (0, _dom.makeDOMDriver)('#app')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment