bloodyKnuckles/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    appState/visitors/count - onionify diagram implementation...made with esnextbin

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

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

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

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