Skip to content

Instantly share code, notes, and snippets.

@bloodyKnuckles

bloodyKnuckles/esnextbin.md

Last active July 6, 2017 14:54
Show Gist options
  • Save bloodyKnuckles/b666c8d2074297f250c48429917bbd85 to your computer and use it in GitHub Desktop.
Save bloodyKnuckles/b666c8d2074297f250c48429917bbd85 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
esnextbin.md

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

Raw
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>
Raw
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') })
Raw
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"
}
}
Raw
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') });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment