Frikki/esnextbin.md

## esnextbin.md

      
  Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!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>

## index.js
// 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'),
});

## package.json
{
  "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"
  }
}

## transpiled.js
'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')
});
	<!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')
	});