Skip to content

Instantly share code, notes, and snippets.

@Hypnosphi

Hypnosphi/esnextbin.md

Last active November 13, 2016 16:20
Show Gist options
  • Save Hypnosphi/f5bac3760fa1730e69ff463f5e428fa9 to your computer and use it in GitHub Desktop.
Save Hypnosphi/f5bac3760fa1730e69ff463f5e428fa9 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<style>
.todoapp{
padding: 1em;
}
.complete>.text{
text-decoration: line-through;
}
.remove{
cursor: pointer;
}
</style>
</head>
<body>
<div class="todoapp"></div>
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {makeDOMDriver, h} from '@cycle/dom';
function intent(sources) {
const add$ = sources.DOM
.select('.add')
.events('keydown')
.filter(e => e.key === 'Enter')
.map(e => ({
type: 'ADD',
payload: e.target.value
}));
const toggle$ = sources.DOM
.select('.todo>.text')
.events('click')
.debug(e => console.log(+e.target.parentElement.dataset.index))
.map(e => ({
type: 'TOGGLE',
index: +e.target.parentElement.dataset.index
}));
const remove$ = sources.DOM
.select('.todo>.remove')
.events('click')
.debug(e => console.log(+e.target.parentElement.dataset.index))
.map(e => ({
type: 'REMOVE',
index: +e.target.parentElement.dataset.index
}));
return xs.merge(add$, toggle$, remove$);
}
function model(action$) {
const addReducer$ = action$
.filter(action => action.type === 'ADD')
.map(action => todos => todos.concat({
text: action.payload,
complete: false
}));
const toggleReducer$ = action$
.filter(action => action.type === 'TOGGLE')
.map(action => todos => todos.map((todo, i) => {
console.log(todo, i, action.index);
if (i === action.index) {
return {
...todo,
complete: !todo.complete
}
} else {
return todo
}
}));
const removeReducer$ = action$
.filter(action => action.type === 'REMOVE')
.map(action => todos => todos.filter((todo, i) => i !== action.index));
const reducer$ = xs.merge(addReducer$, toggleReducer$, removeReducer$);
return reducer$.fold((state, reducer) => reducer(state), []).debug('state');
}
function view(state$) {
state$.debug('lol');
return {
DOM: state$.map(todos => h('div', [
'To do: ',
h('input.add'),
...todos.map((todo, i) => h('div.todo', {
class: {complete: todo.complete},
attrs: {'data-index': i}
}, [
h('span.text', todo.text),
' ',
h('span.remove', '×')
]))
]))
};
}
function main(sources) {
return view(model(intent(sources)));
}
run(main, {
DOM: makeDOMDriver('.todoapp')
});
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"xstream": "7.0.0",
"@cycle/xstream-run": "3.1.0",
"@cycle/dom": "14.0.0",
"babel-runtime": "6.18.0"
}
}
Raw
transpiled.js
'use strict';
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
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 }; }
function intent(sources) {
var add$ = sources.DOM.select('.add').events('keydown').filter(function (e) {
return e.key === 'Enter';
}).map(function (e) {
return {
type: 'ADD',
payload: e.target.value
};
});
var toggle$ = sources.DOM.select('.todo>.text').events('click').debug(function (e) {
return console.log(+e.target.parentElement.dataset.index);
}).map(function (e) {
return {
type: 'TOGGLE',
index: +e.target.parentElement.dataset.index
};
});
var remove$ = sources.DOM.select('.todo>.remove').events('click').debug(function (e) {
return console.log(+e.target.parentElement.dataset.index);
}).map(function (e) {
return {
type: 'REMOVE',
index: +e.target.parentElement.dataset.index
};
});
return _xstream2.default.merge(add$, toggle$, remove$);
} // write ES2015 code and import modules from npm
// and then press "Execute" to run your program
function model(action$) {
var addReducer$ = action$.filter(function (action) {
return action.type === 'ADD';
}).map(function (action) {
return function (todos) {
return todos.concat({
text: action.payload,
complete: false
});
};
});
var toggleReducer$ = action$.filter(function (action) {
return action.type === 'TOGGLE';
}).map(function (action) {
return function (todos) {
return todos.map(function (todo, i) {
console.log(todo, i, action.index);
if (i === action.index) {
return (0, _extends3.default)({}, todo, {
complete: !todo.complete
});
} else {
return todo;
}
});
};
});
var removeReducer$ = action$.filter(function (action) {
return action.type === 'REMOVE';
}).map(function (action) {
return function (todos) {
return todos.filter(function (todo, i) {
return i !== action.index;
});
};
});
var reducer$ = _xstream2.default.merge(addReducer$, toggleReducer$, removeReducer$);
return reducer$.fold(function (state, reducer) {
return reducer(state);
}, []).debug('state');
}
function view(state$) {
state$.debug('lol');
return {
DOM: state$.map(function (todos) {
return (0, _dom.h)('div', ['To do: ', (0, _dom.h)('input.add')].concat((0, _toConsumableArray3.default)(todos.map(function (todo, i) {
return (0, _dom.h)('div.todo', {
class: { complete: todo.complete },
attrs: { 'data-index': i }
}, [(0, _dom.h)('span.text', todo.text), ' ', (0, _dom.h)('span.remove', '×')]);
}))));
})
};
}
function main(sources) {
return view(model(intent(sources)));
}
(0, _xstreamRun.run)(main, {
DOM: (0, _dom.makeDOMDriver)('.todoapp')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment