Hypnosphi/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## 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>

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

## 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"
  }
}

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