bloodyKnuckles/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    yup counter...made with esnextbin

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

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

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

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