tusharmath/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
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

console.clear()
import h from 'snabbdom/h'
import snabbdom from 'snabbdom'
import {createStore} from 'redux'
import R from 'ramda'

let node = document.getElementById('app')
const patch = snabbdom.init([ // Init patch function with choosen modules
  require('snabbdom/modules/class'), // makes it easy to toggle classes
  require('snabbdom/modules/props'), // for setting properties on DOM elements
  require('snabbdom/modules/style'), // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners'),
  require('snabbdom/modules/attributes')// attaches event listeners
])

const Child = {
  init () {
    return {
      allowance: 0,
      jealousy: 0
    }
  },
  update (state, {type, params}) {
    switch (type) {
      case 'BUY_CANDY':
        return R.assoc('allowance', state.allowance - 5, state)
      case 'ALLOWANCE':
        return R.assoc('allowance', state.allowance + params, state)
      default: return state
    }
  },
  view ({allowance, jealousy}, dispatch) {
   return h('div', [
      h('div', [
        h('strong', ['Allowance: ']),
        h('span', [allowance]),
      ]),
      h('button', {on: {click: () => dispatch({type: 'BUY_CANDY'})}}, ['BUY 5$ candy'])
   ])
  }
}

function UpdateChildren (state) {
    return Child.update(state, {
      type: 'ALLOWANCE', params: 10
    })
}

const Parent = {
  actions () {},
  init () {
    return {
      money: 0,
      children: {
        'Aditya': Child.init(),
        'Ishana': Child.init(),
        'Sanya': Child.init()
      }
    }
  },
  update (state, {type, params}) {
    switch (type) {
      case 'CHILD_ACTION':
        const child = Child.update(state.children[params.child], params.action)
        return R.assocPath(['children', params.child], child, state)
      case 'ADD_PAYCHECK':
        return R.assoc('money', state.money + 100, state)
      case 'HANDOUT_ALLOWANCE':
        const count = R.length(R.keys(state.children))
        const children = R.map(UpdateChildren, state.children)
        return R.compose(
          R.assoc('children', children),
          R.assoc('money', state.money - count * 10)
        )(state)
      default:
        return state
    }
  },
  view ({money, children}, dispatch) {
    const Children = R.mapObjIndexed(function (state, child) {
      const childDispatcher = (action) => dispatch(
        {
          type: 'CHILD_ACTION',
          params: {action, child}
        })
      return h('div', [
        h('h2', [child]),
        Child.view(state, childDispatcher)
      ])
    })
    return h('div', [
      h('h1', ['Parent']),
      h('p', [
        h('strong', ['MONEY: ']),
        money
      ]),
      h('button', {on: {click: () => dispatch({type: 'ADD_PAYCHECK'})}, value: 'BUTTON'}, ['100 $ Paycheck']),
      h('button', {on: {click: () => dispatch({type: 'HANDOUT_ALLOWANCE'})}, value: 'BUTTON'}, ['Handout 10$ allowance']),
      h('p', [
        h('h1', ['Children']),
        h('div', R.values(Children(children)))
      ])
    ])
  }
}

const Main = {
  actions () {

  },
  init () {
    return Parent.init()
  },
  update (state, action) {
    return Parent.update(state, action)
  },
  view (state, dispatch) {
    return h('div', [
      Parent.view(state, dispatch)
    ])
  }
}

let state = null
const store = createStore(Main.update, Main.init())


function render () {
  const newState = store.getState()
  if(newState === state) return
  state = newState
  const html = Main.view(state, store.dispatch)
  node = patch(node, html)
}

store.subscribe(render)
render()

## package.json
{
  "name": "esnextbin-sketch",
  "dependencies": {
    "snabbdom": "0.5.2",
    "redux": "3.6.0",
    "ramda": "0.22.1"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

var _h = require('snabbdom/h');

var _h2 = _interopRequireDefault(_h);

var _snabbdom = require('snabbdom');

var _snabbdom2 = _interopRequireDefault(_snabbdom);

var _redux = require('redux');

var _ramda = require('ramda');

var _ramda2 = _interopRequireDefault(_ramda);

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

// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

console.clear();


var node = document.getElementById('app');
var patch = _snabbdom2.default.init([// Init patch function with choosen modules
require('snabbdom/modules/class'), // makes it easy to toggle classes
require('snabbdom/modules/props'), // for setting properties on DOM elements
require('snabbdom/modules/style'), // handles styling on elements with support for animations
require('snabbdom/modules/eventlisteners'), require('snabbdom/modules/attributes') // attaches event listeners
]);

var Child = {
  init: function init() {
    return {
      allowance: 0,
      jealousy: 0
    };
  },
  update: function update(state, _ref) {
    var type = _ref.type;
    var params = _ref.params;

    switch (type) {
      case 'BUY_CANDY':
        return _ramda2.default.assoc('allowance', state.allowance - 5, state);
      case 'ALLOWANCE':
        return _ramda2.default.assoc('allowance', state.allowance + params, state);
      default:
        return state;
    }
  },
  view: function view(_ref2, dispatch) {
    var allowance = _ref2.allowance;
    var jealousy = _ref2.jealousy;

    return (0, _h2.default)('div', [(0, _h2.default)('div', [(0, _h2.default)('strong', ['Allowance: ']), (0, _h2.default)('span', [allowance])]), (0, _h2.default)('button', { on: { click: function click() {
          return dispatch({ type: 'BUY_CANDY' });
        } } }, ['BUY 5$ candy'])]);
  }
};

function UpdateChildren(state) {
  return Child.update(state, {
    type: 'ALLOWANCE', params: 10
  });
}

var Parent = {
  actions: function actions() {},
  init: function init() {
    return {
      money: 0,
      children: {
        'Aditya': Child.init(),
        'Ishana': Child.init(),
        'Sanya': Child.init()
      }
    };
  },
  update: function update(state, _ref3) {
    var type = _ref3.type;
    var params = _ref3.params;

    switch (type) {
      case 'CHILD_ACTION':
        var child = Child.update(state.children[params.child], params.action);
        return _ramda2.default.assocPath(['children', params.child], child, state);
      case 'ADD_PAYCHECK':
        return _ramda2.default.assoc('money', state.money + 100, state);
      case 'HANDOUT_ALLOWANCE':
        var count = _ramda2.default.length(_ramda2.default.keys(state.children));
        var children = _ramda2.default.map(UpdateChildren, state.children);
        return _ramda2.default.compose(_ramda2.default.assoc('children', children), _ramda2.default.assoc('money', state.money - count * 10))(state);
      default:
        return state;
    }
  },
  view: function view(_ref4, dispatch) {
    var money = _ref4.money;
    var children = _ref4.children;

    var Children = _ramda2.default.mapObjIndexed(function (state, child) {
      var childDispatcher = function childDispatcher(action) {
        return dispatch({
          type: 'CHILD_ACTION',
          params: { action: action, child: child }
        });
      };
      return (0, _h2.default)('div', [(0, _h2.default)('h2', [child]), Child.view(state, childDispatcher)]);
    });
    return (0, _h2.default)('div', [(0, _h2.default)('h1', ['Parent']), (0, _h2.default)('p', [(0, _h2.default)('strong', ['MONEY: ']), money]), (0, _h2.default)('button', { on: { click: function click() {
          return dispatch({ type: 'ADD_PAYCHECK' });
        } }, value: 'BUTTON' }, ['100 $ Paycheck']), (0, _h2.default)('button', { on: { click: function click() {
          return dispatch({ type: 'HANDOUT_ALLOWANCE' });
        } }, value: 'BUTTON' }, ['Handout 10$ allowance']), (0, _h2.default)('p', [(0, _h2.default)('h1', ['Children']), (0, _h2.default)('div', _ramda2.default.values(Children(children)))])]);
  }
};

var Main = {
  actions: function actions() {},
  init: function init() {
    return Parent.init();
  },
  update: function update(state, action) {
    return Parent.update(state, action);
  },
  view: function view(state, dispatch) {
    return (0, _h2.default)('div', [Parent.view(state, dispatch)]);
  }
};

var state = null;
var store = (0, _redux.createStore)(Main.update, Main.init());

function render() {
  var newState = store.getState();
  if (newState === state) return;
  state = newState;
  var html = Main.view(state, store.dispatch);
  node = patch(node, html);
}

store.subscribe(render);
render();
	<!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>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	console.clear()
	import h from 'snabbdom/h'
	import snabbdom from 'snabbdom'
	import {createStore} from 'redux'
	import R from 'ramda'

	let node = document.getElementById('app')
	const patch = snabbdom.init([ // Init patch function with choosen modules
	require('snabbdom/modules/class'), // makes it easy to toggle classes
	require('snabbdom/modules/props'), // for setting properties on DOM elements
	require('snabbdom/modules/style'), // handles styling on elements with support for animations
	require('snabbdom/modules/eventlisteners'),
	require('snabbdom/modules/attributes')// attaches event listeners
	])

	const Child = {
	init () {
	return {
	allowance: 0,
	jealousy: 0
	}
	},
	update (state, {type, params}) {
	switch (type) {
	case 'BUY_CANDY':
	return R.assoc('allowance', state.allowance - 5, state)
	case 'ALLOWANCE':
	return R.assoc('allowance', state.allowance + params, state)
	default: return state
	}
	},
	view ({allowance, jealousy}, dispatch) {
	return h('div', [
	h('div', [
	h('strong', ['Allowance: ']),
	h('span', [allowance]),
	]),
	h('button', {on: {click: () => dispatch({type: 'BUY_CANDY'})}}, ['BUY 5$ candy'])
	])
	}
	}

	function UpdateChildren (state) {
	return Child.update(state, {
	type: 'ALLOWANCE', params: 10
	})
	}

	const Parent = {
	actions () {},
	init () {
	return {
	money: 0,
	children: {
	'Aditya': Child.init(),
	'Ishana': Child.init(),
	'Sanya': Child.init()
	}
	}
	},
	update (state, {type, params}) {
	switch (type) {
	case 'CHILD_ACTION':
	const child = Child.update(state.children[params.child], params.action)
	return R.assocPath(['children', params.child], child, state)
	case 'ADD_PAYCHECK':
	return R.assoc('money', state.money + 100, state)
	case 'HANDOUT_ALLOWANCE':
	const count = R.length(R.keys(state.children))
	const children = R.map(UpdateChildren, state.children)
	return R.compose(
	R.assoc('children', children),
	R.assoc('money', state.money - count * 10)
	)(state)
	default:
	return state
	}
	},
	view ({money, children}, dispatch) {
	const Children = R.mapObjIndexed(function (state, child) {
	const childDispatcher = (action) => dispatch(
	{
	type: 'CHILD_ACTION',
	params: {action, child}
	})
	return h('div', [
	h('h2', [child]),
	Child.view(state, childDispatcher)
	])
	})
	return h('div', [
	h('h1', ['Parent']),
	h('p', [
	h('strong', ['MONEY: ']),
	money
	]),
	h('button', {on: {click: () => dispatch({type: 'ADD_PAYCHECK'})}, value: 'BUTTON'}, ['100 $ Paycheck']),
	h('button', {on: {click: () => dispatch({type: 'HANDOUT_ALLOWANCE'})}, value: 'BUTTON'}, ['Handout 10$ allowance']),
	h('p', [
	h('h1', ['Children']),
	h('div', R.values(Children(children)))
	])
	])
	}
	}

	const Main = {
	actions () {

	},
	init () {
	return Parent.init()
	},
	update (state, action) {
	return Parent.update(state, action)
	},
	view (state, dispatch) {
	return h('div', [
	Parent.view(state, dispatch)
	])
	}
	}

	let state = null
	const store = createStore(Main.update, Main.init())


	function render () {
	const newState = store.getState()
	if(newState === state) return
	state = newState
	const html = Main.view(state, store.dispatch)
	node = patch(node, html)
	}

	store.subscribe(render)
	render()
	{
	"name": "esnextbin-sketch",
	"dependencies": {
	"snabbdom": "0.5.2",
	"redux": "3.6.0",
	"ramda": "0.22.1"
	},
	"version": "0.0.0"
	}
	'use strict';

	var _h = require('snabbdom/h');

	var _h2 = _interopRequireDefault(_h);

	var _snabbdom = require('snabbdom');

	var _snabbdom2 = _interopRequireDefault(_snabbdom);

	var _redux = require('redux');

	var _ramda = require('ramda');

	var _ramda2 = _interopRequireDefault(_ramda);

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

	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	console.clear();


	var node = document.getElementById('app');
	var patch = _snabbdom2.default.init([// Init patch function with choosen modules
	require('snabbdom/modules/class'), // makes it easy to toggle classes
	require('snabbdom/modules/props'), // for setting properties on DOM elements
	require('snabbdom/modules/style'), // handles styling on elements with support for animations
	require('snabbdom/modules/eventlisteners'), require('snabbdom/modules/attributes') // attaches event listeners
	]);

	var Child = {
	init: function init() {
	return {
	allowance: 0,
	jealousy: 0
	};
	},
	update: function update(state, _ref) {
	var type = _ref.type;
	var params = _ref.params;

	switch (type) {
	case 'BUY_CANDY':
	return _ramda2.default.assoc('allowance', state.allowance - 5, state);
	case 'ALLOWANCE':
	return _ramda2.default.assoc('allowance', state.allowance + params, state);
	default:
	return state;
	}
	},
	view: function view(_ref2, dispatch) {
	var allowance = _ref2.allowance;
	var jealousy = _ref2.jealousy;

	return (0, _h2.default)('div', [(0, _h2.default)('div', [(0, _h2.default)('strong', ['Allowance: ']), (0, _h2.default)('span', [allowance])]), (0, _h2.default)('button', { on: { click: function click() {
	return dispatch({ type: 'BUY_CANDY' });
	} } }, ['BUY 5$ candy'])]);
	}
	};

	function UpdateChildren(state) {
	return Child.update(state, {
	type: 'ALLOWANCE', params: 10
	});
	}

	var Parent = {
	actions: function actions() {},
	init: function init() {
	return {
	money: 0,
	children: {
	'Aditya': Child.init(),
	'Ishana': Child.init(),
	'Sanya': Child.init()
	}
	};
	},
	update: function update(state, _ref3) {
	var type = _ref3.type;
	var params = _ref3.params;

	switch (type) {
	case 'CHILD_ACTION':
	var child = Child.update(state.children[params.child], params.action);
	return _ramda2.default.assocPath(['children', params.child], child, state);
	case 'ADD_PAYCHECK':
	return _ramda2.default.assoc('money', state.money + 100, state);
	case 'HANDOUT_ALLOWANCE':
	var count = _ramda2.default.length(_ramda2.default.keys(state.children));
	var children = _ramda2.default.map(UpdateChildren, state.children);
	return _ramda2.default.compose(_ramda2.default.assoc('children', children), _ramda2.default.assoc('money', state.money - count * 10))(state);
	default:
	return state;
	}
	},
	view: function view(_ref4, dispatch) {
	var money = _ref4.money;
	var children = _ref4.children;

	var Children = _ramda2.default.mapObjIndexed(function (state, child) {
	var childDispatcher = function childDispatcher(action) {
	return dispatch({
	type: 'CHILD_ACTION',
	params: { action: action, child: child }
	});
	};
	return (0, _h2.default)('div', [(0, _h2.default)('h2', [child]), Child.view(state, childDispatcher)]);
	});
	return (0, _h2.default)('div', [(0, _h2.default)('h1', ['Parent']), (0, _h2.default)('p', [(0, _h2.default)('strong', ['MONEY: ']), money]), (0, _h2.default)('button', { on: { click: function click() {
	return dispatch({ type: 'ADD_PAYCHECK' });
	} }, value: 'BUTTON' }, ['100 $ Paycheck']), (0, _h2.default)('button', { on: { click: function click() {
	return dispatch({ type: 'HANDOUT_ALLOWANCE' });
	} }, value: 'BUTTON' }, ['Handout 10$ allowance']), (0, _h2.default)('p', [(0, _h2.default)('h1', ['Children']), (0, _h2.default)('div', _ramda2.default.values(Children(children)))])]);
	}
	};

	var Main = {
	actions: function actions() {},
	init: function init() {
	return Parent.init();
	},
	update: function update(state, action) {
	return Parent.update(state, action);
	},
	view: function view(state, dispatch) {
	return (0, _h2.default)('div', [Parent.view(state, dispatch)]);
	}
	};

	var state = null;
	var store = (0, _redux.createStore)(Main.update, Main.init());

	function render() {
	var newState = store.getState();
	if (newState === state) return;
	state = newState;
	var html = Main.view(state, store.dispatch);
	node = patch(node, html);
	}

	store.subscribe(render);
	render();