Skip to content

Instantly share code, notes, and snippets.

@Frikki

Frikki/esnextbin.md

Last active Nov 25, 2016
Embed
What would you like to do?
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div class="application"></div>
</body>
</html>
import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {makeDOMDriver, h3, div, input} from '@cycle/dom';
const ProjectComponent = sources => {
return {
DOM: xs.of(sources.prop).map(project => {
console.log(project);
return div(project.title) })
};
};
const main = sources => {
const projects$ = xs.of([
{
title: 'hello world',
featured: false,
published: true
},
{
title: 'some other title',
featured: true,
published: false
}
]);
const state$ = projects$.map(
projects => projects.map(
project => ProjectComponent({DOM: sources.DOM, prop: project}).DOM
)
).debug().map(state => div(state));
return {
DOM: state$
};
}
run(main, {
DOM: makeDOMDriver('.application')
});
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"xstream": "8.0.0",
"@cycle/xstream-run": "3.1.0",
"@cycle/dom": "14.1.0"
}
}
'use strict';
var _xstream = require('xstream');
var _xstream2 = _interopRequireDefault(_xstream);
var _xstreamRun = require('@cycle/xstream-run');
var _dom = require('@cycle/dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ProjectComponent = function ProjectComponent(sources) {
return {
DOM: _xstream2.default.of(sources.prop).map(function (project) {
console.log(project);
return (0, _dom.div)(project.title);
})
};
};
var main = function main(sources) {
var projects$ = _xstream2.default.of([{
title: 'hello world',
featured: false,
published: true
}, {
title: 'some other title',
featured: true,
published: false
}]);
var state$ = projects$.map(function (projects) {
return projects.map(function (project) {
return ProjectComponent({ DOM: sources.DOM, prop: project }).DOM;
});
}).debug().map(function (state) {
return (0, _dom.div)(state);
});
return {
DOM: state$
};
};
(0, _xstreamRun.run)(main, {
DOM: (0, _dom.makeDOMDriver)('.application')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment