Widdershin/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app"></div>
</body>
</html>

## index.js
import {div, span, select, input, label, h1, pre} from '@cycle/dom';
import {run} from '@cycle/xstream-run';
import {makeDOMDriver} from '@cycle/dom';
import xs from 'xstream';
import Collection from '@cycle/collection';
import _ from 'lodash';

function updateIssueCategory (newIssueCategory) {
  return function reducer (issue) {
    return {
      ...issue,

      category: newIssueCategory
    }
  }
}

function Issue ({DOM, issue, categories}) {
  function view (issue) {
    return (
      div('.issue', [
        issue.name,

        div('.categories',
          categories.map((category, index) =>
            span([
              label(category),
              input('.category', {
                key: 'category' + issue.name + index,
                props: {
                  type: 'radio',
                  name: issue.name,
                  value: category,
                  checked: issue.category === category
                }
              })
            ])
          )
        )
      ])
    );
  }

  const updateIssueCategory$ = DOM
    .select('.category')
    .events('change')
    .map(ev => ev.target.value)
    .map(updateIssueCategory);

  const reducer$ = xs.merge(
    updateIssueCategory$
  );

  const state$ = reducer$.fold((state, reducer) => reducer(state), issue);

  return {
    DOM: state$.map(view),

    state$
  }
}

function categoryView (category, index, issues) {
  return (
    div('.category', {key: category}, [
      h1(category),

      div('.issues', {key: category + '-issues'}, issues)
    ])
  )
}

function App ({DOM}) {
  const categories = ['a', 'b', 'c'];

  const issues = [
    {name: 'this is a test', category: 'a'},
    {name: 'and another', category: 'c'},
    {name: 'such wow', category: 'b'}
  ];

  const issues$ = Collection(
    Issue,
    {DOM, categories},
    xs.fromArray(issues.map(issue => ({issue})))
  );

  const issuesStateAndDOM$ = Collection.pluck(
    issues$,
    issue => xs.combine(issue.state$, issue.DOM)
  );

  const categories$ = issuesStateAndDOM$.map(issuesData => {
    const categorySelector = (issue) => issue[0].category;

    const issuesByCategory = _.groupBy(issuesData, categorySelector);

    console.log(issuesByCategory)

    function issuesForCategory (category) {
     const data = issuesByCategory[category] || [];

     return data.map(([issue, issueDOM]) => issueDOM);
    }

    return categories.map((category, index) => categoryView(category, index, issuesForCategory(category)));
  });

  return {
    DOM: categories$.map(issueVtrees =>
      div([
        div(issueVtrees),
        pre('.hello-world', JSON.stringify(issueVtrees, null, 2))
      ])

    )
  };
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

run(App, drivers);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "@cycle/dom": "14.1.0",
    "@cycle/xstream-run": "4.1.0",
    "xstream": "9.0.0",
    "@cycle/collection": "0.4.0",
    "lodash": "4.17.2",
    "babel-runtime": "6.18.0"
  }
}

## transpiled.js
'use strict';

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

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

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _dom = require('@cycle/dom');

var _xstreamRun = require('@cycle/xstream-run');

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _collection = require('@cycle/collection');

var _collection2 = _interopRequireDefault(_collection);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function updateIssueCategory(newIssueCategory) {
  return function reducer(issue) {
    return (0, _extends3.default)({}, issue, {

      category: newIssueCategory
    });
  };
}

function Issue(_ref) {
  var DOM = _ref.DOM;
  var issue = _ref.issue;
  var categories = _ref.categories;

  function view(issue) {
    return (0, _dom.div)('.issue', [issue.name, (0, _dom.div)('.categories', categories.map(function (category, index) {
      return (0, _dom.span)([(0, _dom.label)(category), (0, _dom.input)('.category', {
        key: 'category' + issue.name + index,
        props: {
          type: 'radio',
          name: issue.name,
          value: category,
          checked: issue.category === category
        }
      })]);
    }))]);
  }

  var updateIssueCategory$ = DOM.select('.category').events('change').map(function (ev) {
    return ev.target.value;
  }).map(updateIssueCategory);

  var reducer$ = _xstream2.default.merge(updateIssueCategory$);

  var state$ = reducer$.fold(function (state, reducer) {
    return reducer(state);
  }, issue);

  return {
    DOM: state$.map(view),

    state$: state$
  };
}

function categoryView(category, index, issues) {
  return (0, _dom.div)('.category', { key: category }, [(0, _dom.h1)(category), (0, _dom.div)('.issues', { key: category + '-issues' }, issues)]);
}

function App(_ref2) {
  var DOM = _ref2.DOM;

  var categories = ['a', 'b', 'c'];

  var issues = [{ name: 'this is a test', category: 'a' }, { name: 'and another', category: 'c' }, { name: 'such wow', category: 'b' }];

  var issues$ = (0, _collection2.default)(Issue, { DOM: DOM, categories: categories }, _xstream2.default.fromArray(issues.map(function (issue) {
    return { issue: issue };
  })));

  var issuesStateAndDOM$ = _collection2.default.pluck(issues$, function (issue) {
    return _xstream2.default.combine(issue.state$, issue.DOM);
  });

  var categories$ = issuesStateAndDOM$.map(function (issuesData) {
    var categorySelector = function categorySelector(issue) {
      return issue[0].category;
    };

    var issuesByCategory = _lodash2.default.groupBy(issuesData, categorySelector);

    console.log(issuesByCategory);

    function issuesForCategory(category) {
      var data = issuesByCategory[category] || [];

      return data.map(function (_ref3) {
        var _ref4 = (0, _slicedToArray3.default)(_ref3, 2);

        var issue = _ref4[0];
        var issueDOM = _ref4[1];
        return issueDOM;
      });
    }

    return categories.map(function (category, index) {
      return categoryView(category, index, issuesForCategory(category));
    });
  });

  return {
    DOM: categories$.map(function (issueVtrees) {
      return (0, _dom.div)([(0, _dom.div)(issueVtrees), (0, _dom.pre)('.hello-world', (0, _stringify2.default)(issueVtrees, null, 2))]);
    })
  };
}

var drivers = {
  DOM: (0, _dom.makeDOMDriver)('#app')
};

(0, _xstreamRun.run)(App, drivers);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>
	</body>
	</html>
	import {div, span, select, input, label, h1, pre} from '@cycle/dom';
	import {run} from '@cycle/xstream-run';
	import {makeDOMDriver} from '@cycle/dom';
	import xs from 'xstream';
	import Collection from '@cycle/collection';
	import _ from 'lodash';

	function updateIssueCategory (newIssueCategory) {
	return function reducer (issue) {
	return {
	...issue,

	category: newIssueCategory
	}
	}
	}

	function Issue ({DOM, issue, categories}) {
	function view (issue) {
	return (
	div('.issue', [
	issue.name,

	div('.categories',
	categories.map((category, index) =>
	span([
	label(category),
	input('.category', {
	key: 'category' + issue.name + index,
	props: {
	type: 'radio',
	name: issue.name,
	value: category,
	checked: issue.category === category
	}
	})
	])
	)
	)
	])
	);
	}

	const updateIssueCategory$ = DOM
	.select('.category')
	.events('change')
	.map(ev => ev.target.value)
	.map(updateIssueCategory);

	const reducer$ = xs.merge(
	updateIssueCategory$
	);

	const state$ = reducer$.fold((state, reducer) => reducer(state), issue);

	return {
	DOM: state$.map(view),

	state$
	}
	}

	function categoryView (category, index, issues) {
	return (
	div('.category', {key: category}, [
	h1(category),

	div('.issues', {key: category + '-issues'}, issues)
	])
	)
	}

	function App ({DOM}) {
	const categories = ['a', 'b', 'c'];

	const issues = [
	{name: 'this is a test', category: 'a'},
	{name: 'and another', category: 'c'},
	{name: 'such wow', category: 'b'}
	];

	const issues$ = Collection(
	Issue,
	{DOM, categories},
	xs.fromArray(issues.map(issue => ({issue})))
	);

	const issuesStateAndDOM$ = Collection.pluck(
	issues$,
	issue => xs.combine(issue.state$, issue.DOM)
	);

	const categories$ = issuesStateAndDOM$.map(issuesData => {
	const categorySelector = (issue) => issue[0].category;

	const issuesByCategory = _.groupBy(issuesData, categorySelector);

	console.log(issuesByCategory)

	function issuesForCategory (category) {
	const data = issuesByCategory[category] \|\| [];

	return data.map(([issue, issueDOM]) => issueDOM);
	}

	return categories.map((category, index) => categoryView(category, index, issuesForCategory(category)));
	});

	return {
	DOM: categories$.map(issueVtrees =>
	div([
	div(issueVtrees),
	pre('.hello-world', JSON.stringify(issueVtrees, null, 2))
	])

	)
	};
	}

	const drivers = {
	DOM: makeDOMDriver('#app')
	};

	run(App, drivers);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"@cycle/dom": "14.1.0",
	"@cycle/xstream-run": "4.1.0",
	"xstream": "9.0.0",
	"@cycle/collection": "0.4.0",
	"lodash": "4.17.2",
	"babel-runtime": "6.18.0"
	}
	}
	'use strict';

	var _stringify = require('babel-runtime/core-js/json/stringify');

	var _stringify2 = _interopRequireDefault(_stringify);

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

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

	var _extends3 = _interopRequireDefault(_extends2);

	var _dom = require('@cycle/dom');

	var _xstreamRun = require('@cycle/xstream-run');

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _collection = require('@cycle/collection');

	var _collection2 = _interopRequireDefault(_collection);

	var _lodash = require('lodash');

	var _lodash2 = _interopRequireDefault(_lodash);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function updateIssueCategory(newIssueCategory) {
	return function reducer(issue) {
	return (0, _extends3.default)({}, issue, {

	category: newIssueCategory
	});
	};
	}

	function Issue(_ref) {
	var DOM = _ref.DOM;
	var issue = _ref.issue;
	var categories = _ref.categories;

	function view(issue) {
	return (0, _dom.div)('.issue', [issue.name, (0, _dom.div)('.categories', categories.map(function (category, index) {
	return (0, _dom.span)([(0, _dom.label)(category), (0, _dom.input)('.category', {
	key: 'category' + issue.name + index,
	props: {
	type: 'radio',
	name: issue.name,
	value: category,
	checked: issue.category === category
	}
	})]);
	}))]);
	}

	var updateIssueCategory$ = DOM.select('.category').events('change').map(function (ev) {
	return ev.target.value;
	}).map(updateIssueCategory);

	var reducer$ = _xstream2.default.merge(updateIssueCategory$);

	var state$ = reducer$.fold(function (state, reducer) {
	return reducer(state);
	}, issue);

	return {
	DOM: state$.map(view),

	state$: state$
	};
	}

	function categoryView(category, index, issues) {
	return (0, _dom.div)('.category', { key: category }, [(0, _dom.h1)(category), (0, _dom.div)('.issues', { key: category + '-issues' }, issues)]);
	}

	function App(_ref2) {
	var DOM = _ref2.DOM;

	var categories = ['a', 'b', 'c'];

	var issues = [{ name: 'this is a test', category: 'a' }, { name: 'and another', category: 'c' }, { name: 'such wow', category: 'b' }];

	var issues$ = (0, _collection2.default)(Issue, { DOM: DOM, categories: categories }, _xstream2.default.fromArray(issues.map(function (issue) {
	return { issue: issue };
	})));

	var issuesStateAndDOM$ = _collection2.default.pluck(issues$, function (issue) {
	return _xstream2.default.combine(issue.state$, issue.DOM);
	});

	var categories$ = issuesStateAndDOM$.map(function (issuesData) {
	var categorySelector = function categorySelector(issue) {
	return issue[0].category;
	};

	var issuesByCategory = _lodash2.default.groupBy(issuesData, categorySelector);

	console.log(issuesByCategory);

	function issuesForCategory(category) {
	var data = issuesByCategory[category] \|\| [];

	return data.map(function (_ref3) {
	var _ref4 = (0, _slicedToArray3.default)(_ref3, 2);

	var issue = _ref4[0];
	var issueDOM = _ref4[1];
	return issueDOM;
	});
	}

	return categories.map(function (category, index) {
	return categoryView(category, index, issuesForCategory(category));
	});
	});

	return {
	DOM: categories$.map(function (issueVtrees) {
	return (0, _dom.div)([(0, _dom.div)(issueVtrees), (0, _dom.pre)('.hello-world', (0, _stringify2.default)(issueVtrees, null, 2))]);
	})
	};
	}

	var drivers = {
	DOM: (0, _dom.makeDOMDriver)('#app')
	};

	(0, _xstreamRun.run)(App, drivers);