bloodyKnuckles/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    nested lenses: a, d, b...made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>nested lenses: a, d, b</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, span, button, h1, a, input} from '@cycle/dom'
import onionify, {pick, mix} from 'cycle-onionify'
import xs from 'xstream'
import isolate from '@cycle/isolate'

const aval = {val: 1, d: {val: 4, e: {val: 5, f: {val: 6, g: 7}}}}

function App (sources) {
  const initReducer$ = xs.of(function initReducer () {
    //console.log('init')
    return {a: aval, b: 2, c: 3}
  })

  const aLens = {
    get: state => { return {a: state.a, c: state.c} },
    set: (state, childState) => { return {...state, a: childState.a, c: childState.c}}
  };

  const bLens = {
    get: state => { return {b: state.b, c: state.c}},
    set: (state, childState) => { return {...state, b: childState.b, c: childState.c}}
  };

  const aSinks = isolate(Comp('a', aval), {onion: aLens})(sources);
  const aVDom = aSinks.DOM;
  const aReducer$ = aSinks.onion;

  const bSinks = isolate(Comp('b', 2), {onion: bLens})(sources);
  const bVDom = bSinks.DOM;
  const bReducer$ = bSinks.onion;

  const cSinks = isolate(CComp, 'c')(sources);
  const cVDom = cSinks.DOM;

  const vdom$ = xs.combine(aVDom, bVDom, cVDom)
    .map(([aVNode, bVNode, cVNode]) =>
      div([aVNode, bVNode, cVNode])
    );

  const reducer$ = xs.merge(initReducer$, aReducer$, bReducer$);
  return { DOM: vdom$, onion: reducer$ }
}


const Comp = function (id, defval) {

  return function (sources) {

    function intent (domSource) {
      const add$ = domSource.select('.' + id).events('blur')
        .map(ev => ev.target.value)
      return xs.merge(add$)
    }

    function model (action$) {
      const defaultReducer$ = xs.of(function defaultReducer () {
        //console.log('comp def', id, defval)
        const obj = {c: 3}
        obj[id] = defval
        //console.log(id, obj)
        return obj
      })
      const reducer$ = action$
        .map(val => function aReducer (state) {
          //console.log('update', id, state, state[id], val)
          const obj = {c: val}
          obj[id] = (
            'object' === typeof state[id] && {...state[id], val: val}
          )
            || val
          return obj
        })
      return xs.merge(defaultReducer$, reducer$)
    }

    function view (state$, cVDOM$) {
      return xs.combine(state$, cVDOM$)
        .map(([state, cVDOM]) => {
          //console.log('view', id, state)
          const stateid = (state && state[id] && state[id].val) || state[id]
          return div([
            a({attrs: {class: 'view', href: '#'}}, stateid),
            input({attrs: {type: 'text', class: id, value: stateid}}),
            cVDOM
          ])
        })
    }


    const state$ = sources.onion.state$
    const haschild = ('object' === typeof defval && 'undefined' !== typeof defval.val)
    let childSinks
    if ( haschild ) {
      const idchild = Object.keys(defval).reduce(function (prev, next) {
        return 'val' !== prev? prev: next
      }, 'val')
      const childLens = {
        get: state => {
          const retobj = {c: state.c}
          retobj[idchild] = state[id][idchild]
          return retobj
        },
        set: (state, childState) => {
          const retobj = {c: childState.c}
          retobj[id] = {...state[id]}
          retobj[id][idchild] = childState[idchild]
          return retobj
        }
      }
      childSinks = isolate(Comp(idchild, defval[idchild]), {onion: childLens})(sources)
    }
    const action$ = intent(sources.DOM)
    const reducer$ = model(action$)
    const cVDOM$ = (childSinks && childSinks.DOM) || xs.of(span(''))
    const vdom$ = view(state$, cVDOM$)
    const allReducer$ = (
      haschild && xs.merge(reducer$, childSinks.onion)
    )
      || reducer$

    return { DOM: vdom$, onion: allReducer$ }
  }
}

function CComp (sources) {
  const vdom$ = sources.onion.state$
    .map((state) => h1('latest: ' + state))
  return { DOM: vdom$ }
}

run(onionify(App), { DOM: makeDOMDriver('#app') })

## package.json
{
  "name": "nested lens: a, d, b",
  "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.23.0"
  }
}

## transpiled.js
'use strict';

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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 }; }

var aval = { val: 1, d: { val: 4, e: { val: 5, f: { val: 6, g: 7 } } } };

function App(sources) {
  var initReducer$ = _xstream2.default.of(function initReducer() {
    //console.log('init')
    return { a: aval, b: 2, c: 3 };
  });

  var aLens = {
    get: function get(state) {
      return { a: state.a, c: state.c };
    },
    set: function set(state, childState) {
      return (0, _extends3.default)({}, state, { a: childState.a, c: childState.c });
    }
  };

  var bLens = {
    get: function get(state) {
      return { b: state.b, c: state.c };
    },
    set: function set(state, childState) {
      return (0, _extends3.default)({}, state, { b: childState.b, c: childState.c });
    }
  };

  var aSinks = (0, _isolate2.default)(Comp('a', aval), { onion: aLens })(sources);
  var aVDom = aSinks.DOM;
  var aReducer$ = aSinks.onion;

  var bSinks = (0, _isolate2.default)(Comp('b', 2), { onion: bLens })(sources);
  var bVDom = bSinks.DOM;
  var bReducer$ = bSinks.onion;

  var cSinks = (0, _isolate2.default)(CComp, 'c')(sources);
  var cVDom = cSinks.DOM;

  var vdom$ = _xstream2.default.combine(aVDom, bVDom, cVDom).map(function (_ref) {
    var _ref2 = (0, _slicedToArray3.default)(_ref, 3),
        aVNode = _ref2[0],
        bVNode = _ref2[1],
        cVNode = _ref2[2];

    return (0, _dom.div)([aVNode, bVNode, cVNode]);
  });

  var reducer$ = _xstream2.default.merge(initReducer$, aReducer$, bReducer$);
  return { DOM: vdom$, onion: reducer$ };
}

var Comp = function Comp(id, defval) {

  return function (sources) {

    function intent(domSource) {
      var add$ = domSource.select('.' + id).events('blur').map(function (ev) {
        return ev.target.value;
      });
      return _xstream2.default.merge(add$);
    }

    function model(action$) {
      var defaultReducer$ = _xstream2.default.of(function defaultReducer() {
        //console.log('comp def', id, defval)
        var obj = { c: 3 };
        obj[id] = defval;
        //console.log(id, obj)
        return obj;
      });
      var reducer$ = action$.map(function (val) {
        return function aReducer(state) {
          //console.log('update', id, state, state[id], val)
          var obj = { c: val };
          obj[id] = 'object' === (0, _typeof3.default)(state[id]) && (0, _extends3.default)({}, state[id], { val: val }) || val;
          return obj;
        };
      });
      return _xstream2.default.merge(defaultReducer$, reducer$);
    }

    function view(state$, cVDOM$) {
      return _xstream2.default.combine(state$, cVDOM$).map(function (_ref3) {
        var _ref4 = (0, _slicedToArray3.default)(_ref3, 2),
            state = _ref4[0],
            cVDOM = _ref4[1];

        //console.log('view', id, state)
        var stateid = state && state[id] && state[id].val || state[id];
        return (0, _dom.div)([(0, _dom.a)({ attrs: { class: 'view', href: '#' } }, stateid), (0, _dom.input)({ attrs: { type: 'text', class: id, value: stateid } }), cVDOM]);
      });
    }

    var state$ = sources.onion.state$;
    var haschild = 'object' === (typeof defval === 'undefined' ? 'undefined' : (0, _typeof3.default)(defval)) && 'undefined' !== typeof defval.val;
    var childSinks = void 0;
    if (haschild) {
      var idchild = (0, _keys2.default)(defval).reduce(function (prev, next) {
        return 'val' !== prev ? prev : next;
      }, 'val');
      var childLens = {
        get: function get(state) {
          var retobj = { c: state.c };
          retobj[idchild] = state[id][idchild];
          return retobj;
        },
        set: function set(state, childState) {
          var retobj = { c: childState.c };
          retobj[id] = (0, _extends3.default)({}, state[id]);
          retobj[id][idchild] = childState[idchild];
          return retobj;
        }
      };
      childSinks = (0, _isolate2.default)(Comp(idchild, defval[idchild]), { onion: childLens })(sources);
    }
    var action$ = intent(sources.DOM);
    var reducer$ = model(action$);
    var cVDOM$ = childSinks && childSinks.DOM || _xstream2.default.of((0, _dom.span)(''));
    var vdom$ = view(state$, cVDOM$);
    var allReducer$ = haschild && _xstream2.default.merge(reducer$, childSinks.onion) || reducer$;

    return { DOM: vdom$, onion: allReducer$ };
  };
};

function CComp(sources) {
  var vdom$ = sources.onion.state$.map(function (state) {
    return (0, _dom.h1)('latest: ' + state);
  });
  return { DOM: vdom$ };
}

(0, _run.run)((0, _cycleOnionify2.default)(App), { DOM: (0, _dom.makeDOMDriver)('#app') });
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>nested lenses: a, d, b</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import {run} from "@cycle/run";
	import {makeDOMDriver, div, span, button, h1, a, input} from '@cycle/dom'
	import onionify, {pick, mix} from 'cycle-onionify'
	import xs from 'xstream'
	import isolate from '@cycle/isolate'

	const aval = {val: 1, d: {val: 4, e: {val: 5, f: {val: 6, g: 7}}}}

	function App (sources) {
	const initReducer$ = xs.of(function initReducer () {
	//console.log('init')
	return {a: aval, b: 2, c: 3}
	})

	const aLens = {
	get: state => { return {a: state.a, c: state.c} },
	set: (state, childState) => { return {...state, a: childState.a, c: childState.c}}
	};

	const bLens = {
	get: state => { return {b: state.b, c: state.c}},
	set: (state, childState) => { return {...state, b: childState.b, c: childState.c}}
	};

	const aSinks = isolate(Comp('a', aval), {onion: aLens})(sources);
	const aVDom = aSinks.DOM;
	const aReducer$ = aSinks.onion;

	const bSinks = isolate(Comp('b', 2), {onion: bLens})(sources);
	const bVDom = bSinks.DOM;
	const bReducer$ = bSinks.onion;

	const cSinks = isolate(CComp, 'c')(sources);
	const cVDom = cSinks.DOM;

	const vdom$ = xs.combine(aVDom, bVDom, cVDom)
	.map(([aVNode, bVNode, cVNode]) =>
	div([aVNode, bVNode, cVNode])
	);

	const reducer$ = xs.merge(initReducer$, aReducer$, bReducer$);
	return { DOM: vdom$, onion: reducer$ }
	}


	const Comp = function (id, defval) {

	return function (sources) {

	function intent (domSource) {
	const add$ = domSource.select('.' + id).events('blur')
	.map(ev => ev.target.value)
	return xs.merge(add$)
	}

	function model (action$) {
	const defaultReducer$ = xs.of(function defaultReducer () {
	//console.log('comp def', id, defval)
	const obj = {c: 3}
	obj[id] = defval
	//console.log(id, obj)
	return obj
	})
	const reducer$ = action$
	.map(val => function aReducer (state) {
	//console.log('update', id, state, state[id], val)
	const obj = {c: val}
	obj[id] = (
	'object' === typeof state[id] && {...state[id], val: val}
	)
	\|\| val
	return obj
	})
	return xs.merge(defaultReducer$, reducer$)
	}

	function view (state$, cVDOM$) {
	return xs.combine(state$, cVDOM$)
	.map(([state, cVDOM]) => {
	//console.log('view', id, state)
	const stateid = (state && state[id] && state[id].val) \|\| state[id]
	return div([
	a({attrs: {class: 'view', href: '#'}}, stateid),
	input({attrs: {type: 'text', class: id, value: stateid}}),
	cVDOM
	])
	})
	}


	const state$ = sources.onion.state$
	const haschild = ('object' === typeof defval && 'undefined' !== typeof defval.val)
	let childSinks
	if ( haschild ) {
	const idchild = Object.keys(defval).reduce(function (prev, next) {
	return 'val' !== prev? prev: next
	}, 'val')
	const childLens = {
	get: state => {
	const retobj = {c: state.c}
	retobj[idchild] = state[id][idchild]
	return retobj
	},
	set: (state, childState) => {
	const retobj = {c: childState.c}
	retobj[id] = {...state[id]}
	retobj[id][idchild] = childState[idchild]
	return retobj
	}
	}
	childSinks = isolate(Comp(idchild, defval[idchild]), {onion: childLens})(sources)
	}
	const action$ = intent(sources.DOM)
	const reducer$ = model(action$)
	const cVDOM$ = (childSinks && childSinks.DOM) \|\| xs.of(span(''))
	const vdom$ = view(state$, cVDOM$)
	const allReducer$ = (
	haschild && xs.merge(reducer$, childSinks.onion)
	)
	\|\| reducer$

	return { DOM: vdom$, onion: allReducer$ }
	}
	}

	function CComp (sources) {
	const vdom$ = sources.onion.state$
	.map((state) => h1('latest: ' + state))
	return { DOM: vdom$ }
	}

	run(onionify(App), { DOM: makeDOMDriver('#app') })
	{
	"name": "nested lens: a, d, b",
	"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.23.0"
	}
	}
	'use strict';

	var _keys = require('babel-runtime/core-js/object/keys');

	var _keys2 = _interopRequireDefault(_keys);

	var _typeof2 = require('babel-runtime/helpers/typeof');

	var _typeof3 = _interopRequireDefault(_typeof2);

	var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

	var _extends2 = require('babel-runtime/helpers/extends');

	var _extends3 = _interopRequireDefault(_extends2);

	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 }; }

	var aval = { val: 1, d: { val: 4, e: { val: 5, f: { val: 6, g: 7 } } } };

	function App(sources) {
	var initReducer$ = _xstream2.default.of(function initReducer() {
	//console.log('init')
	return { a: aval, b: 2, c: 3 };
	});

	var aLens = {
	get: function get(state) {
	return { a: state.a, c: state.c };
	},
	set: function set(state, childState) {
	return (0, _extends3.default)({}, state, { a: childState.a, c: childState.c });
	}
	};

	var bLens = {
	get: function get(state) {
	return { b: state.b, c: state.c };
	},
	set: function set(state, childState) {
	return (0, _extends3.default)({}, state, { b: childState.b, c: childState.c });
	}
	};

	var aSinks = (0, _isolate2.default)(Comp('a', aval), { onion: aLens })(sources);
	var aVDom = aSinks.DOM;
	var aReducer$ = aSinks.onion;

	var bSinks = (0, _isolate2.default)(Comp('b', 2), { onion: bLens })(sources);
	var bVDom = bSinks.DOM;
	var bReducer$ = bSinks.onion;

	var cSinks = (0, _isolate2.default)(CComp, 'c')(sources);
	var cVDom = cSinks.DOM;

	var vdom$ = _xstream2.default.combine(aVDom, bVDom, cVDom).map(function (_ref) {
	var _ref2 = (0, _slicedToArray3.default)(_ref, 3),
	aVNode = _ref2[0],
	bVNode = _ref2[1],
	cVNode = _ref2[2];

	return (0, _dom.div)([aVNode, bVNode, cVNode]);
	});

	var reducer$ = _xstream2.default.merge(initReducer$, aReducer$, bReducer$);
	return { DOM: vdom$, onion: reducer$ };
	}

	var Comp = function Comp(id, defval) {

	return function (sources) {

	function intent(domSource) {
	var add$ = domSource.select('.' + id).events('blur').map(function (ev) {
	return ev.target.value;
	});
	return _xstream2.default.merge(add$);
	}

	function model(action$) {
	var defaultReducer$ = _xstream2.default.of(function defaultReducer() {
	//console.log('comp def', id, defval)
	var obj = { c: 3 };
	obj[id] = defval;
	//console.log(id, obj)
	return obj;
	});
	var reducer$ = action$.map(function (val) {
	return function aReducer(state) {
	//console.log('update', id, state, state[id], val)
	var obj = { c: val };
	obj[id] = 'object' === (0, _typeof3.default)(state[id]) && (0, _extends3.default)({}, state[id], { val: val }) \|\| val;
	return obj;
	};
	});
	return _xstream2.default.merge(defaultReducer$, reducer$);
	}

	function view(state$, cVDOM$) {
	return _xstream2.default.combine(state$, cVDOM$).map(function (_ref3) {
	var _ref4 = (0, _slicedToArray3.default)(_ref3, 2),
	state = _ref4[0],
	cVDOM = _ref4[1];

	//console.log('view', id, state)
	var stateid = state && state[id] && state[id].val \|\| state[id];
	return (0, _dom.div)([(0, _dom.a)({ attrs: { class: 'view', href: '#' } }, stateid), (0, _dom.input)({ attrs: { type: 'text', class: id, value: stateid } }), cVDOM]);
	});
	}

	var state$ = sources.onion.state$;
	var haschild = 'object' === (typeof defval === 'undefined' ? 'undefined' : (0, _typeof3.default)(defval)) && 'undefined' !== typeof defval.val;
	var childSinks = void 0;
	if (haschild) {
	var idchild = (0, _keys2.default)(defval).reduce(function (prev, next) {
	return 'val' !== prev ? prev : next;
	}, 'val');
	var childLens = {
	get: function get(state) {
	var retobj = { c: state.c };
	retobj[idchild] = state[id][idchild];
	return retobj;
	},
	set: function set(state, childState) {
	var retobj = { c: childState.c };
	retobj[id] = (0, _extends3.default)({}, state[id]);
	retobj[id][idchild] = childState[idchild];
	return retobj;
	}
	};
	childSinks = (0, _isolate2.default)(Comp(idchild, defval[idchild]), { onion: childLens })(sources);
	}
	var action$ = intent(sources.DOM);
	var reducer$ = model(action$);
	var cVDOM$ = childSinks && childSinks.DOM \|\| _xstream2.default.of((0, _dom.span)(''));
	var vdom$ = view(state$, cVDOM$);
	var allReducer$ = haschild && _xstream2.default.merge(reducer$, childSinks.onion) \|\| reducer$;

	return { DOM: vdom$, onion: allReducer$ };
	};
	};

	function CComp(sources) {
	var vdom$ = sources.onion.state$.map(function (state) {
	return (0, _dom.h1)('latest: ' + state);
	});
	return { DOM: vdom$ };
	}

	(0, _run.run)((0, _cycleOnionify2.default)(App), { DOM: (0, _dom.makeDOMDriver)('#app') });