voronianski/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

## index.js
import barracks from 'barracks';
import { create, h, diff, patch } from 'virtual-dom';

let view;
let domNode;

const store = barracks();

const counter = store.model({
  namespace: 'counter',
  state: {
    count: 0
  },
  reducers: {
    increment(state, data) {
      return {count: ++state.count}
    },
    decrement(state, data) {
      return {count: --state.count}
    }
  }
});

const createSend = store.start();
const sendAction = createSend('dispatcher', true);

const render = state => {
  const children = [
    h('h3', {}, `Barracks counter ${state.counter.count}!`)
  ];

  if (state.counter.count >= 2) {
    const button = h('button', {
      onclick() {
        sendAction('counter:increment');
      }
    }, 'Increment');

    children.push(button);
  }

  return h('div', {}, children)
};
const updateDom = state => {
  const newView = render(state);
  const patches = diff(view, newView);

  view = newView;
  domNode = patch(domNode, patches);
};

store.use({
  onError(err, state, createSend) {
    console.error('error:', err);
  },
  onAction(state, data, name, caller, createSend) {
    console.log(`on ${name}:`, data);
  },
  onStateChange(state, data, prev, caller, createSend) {
    console.log(state, prev);
    updateDom(state);
  }
});

view = render(store.state());
domNode = create(view);

document.getElementById('app').appendChild(domNode);

sendAction('counter:increment');
setTimeout(() => {
  sendAction('counter:increment');
}, 1000);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "barracks": "9.0.0",
    "virtual-dom": "2.1.1"
  }
}

## transpiled.js
'use strict';

var _barracks = require('barracks');

var _barracks2 = _interopRequireDefault(_barracks);

var _virtualDom = require('virtual-dom');

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

var view = void 0;
var domNode = void 0;

var store = (0, _barracks2.default)();

var counter = store.model({
  namespace: 'counter',
  state: {
    count: 0
  },
  reducers: {
    increment: function increment(state, data) {
      return { count: ++state.count };
    },
    decrement: function decrement(state, data) {
      return { count: --state.count };
    }
  }
});

var createSend = store.start();
var sendAction = createSend('dispatcher', true);

var render = function render(state) {
  var children = [(0, _virtualDom.h)('h3', {}, 'Barracks counter ' + state.counter.count + '!')];

  if (state.counter.count >= 2) {
    var button = (0, _virtualDom.h)('button', {
      onclick: function onclick() {
        sendAction('counter:increment');
      }
    }, 'Increment');

    children.push(button);
  }

  return (0, _virtualDom.h)('div', {}, children);
};
var updateDom = function updateDom(state) {
  var newView = render(state);
  var patches = (0, _virtualDom.diff)(view, newView);

  view = newView;
  domNode = (0, _virtualDom.patch)(domNode, patches);
};

store.use({
  onError: function onError(err, state, createSend) {
    console.error('error:', err);
  },
  onAction: function onAction(state, data, name, caller, createSend) {
    console.log('on ' + name + ':', data);
  },
  onStateChange: function onStateChange(state, data, prev, caller, createSend) {
    console.log(state, prev);
    updateDom(state);
  }
});

view = render(store.state());
domNode = (0, _virtualDom.create)(view);

document.getElementById('app').appendChild(domNode);

sendAction('counter:increment');
setTimeout(function () {
  sendAction('counter:increment');
}, 1000);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	</head>
	<body>
	<div id="app"></div>
	</body>
	</html>
	import barracks from 'barracks';
	import { create, h, diff, patch } from 'virtual-dom';

	let view;
	let domNode;

	const store = barracks();

	const counter = store.model({
	namespace: 'counter',
	state: {
	count: 0
	},
	reducers: {
	increment(state, data) {
	return {count: ++state.count}
	},
	decrement(state, data) {
	return {count: --state.count}
	}
	}
	});

	const createSend = store.start();
	const sendAction = createSend('dispatcher', true);

	const render = state => {
	const children = [
	h('h3', {}, `Barracks counter ${state.counter.count}!`)
	];

	if (state.counter.count >= 2) {
	const button = h('button', {
	onclick() {
	sendAction('counter:increment');
	}
	}, 'Increment');

	children.push(button);
	}

	return h('div', {}, children)
	};
	const updateDom = state => {
	const newView = render(state);
	const patches = diff(view, newView);

	view = newView;
	domNode = patch(domNode, patches);
	};

	store.use({
	onError(err, state, createSend) {
	console.error('error:', err);
	},
	onAction(state, data, name, caller, createSend) {
	console.log(`on ${name}:`, data);
	},
	onStateChange(state, data, prev, caller, createSend) {
	console.log(state, prev);
	updateDom(state);
	}
	});

	view = render(store.state());
	domNode = create(view);

	document.getElementById('app').appendChild(domNode);

	sendAction('counter:increment');
	setTimeout(() => {
	sendAction('counter:increment');
	}, 1000);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"barracks": "9.0.0",
	"virtual-dom": "2.1.1"
	}
	}
	'use strict';

	var _barracks = require('barracks');

	var _barracks2 = _interopRequireDefault(_barracks);

	var _virtualDom = require('virtual-dom');

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

	var view = void 0;
	var domNode = void 0;

	var store = (0, _barracks2.default)();

	var counter = store.model({
	namespace: 'counter',
	state: {
	count: 0
	},
	reducers: {
	increment: function increment(state, data) {
	return { count: ++state.count };
	},
	decrement: function decrement(state, data) {
	return { count: --state.count };
	}
	}
	});

	var createSend = store.start();
	var sendAction = createSend('dispatcher', true);

	var render = function render(state) {
	var children = [(0, _virtualDom.h)('h3', {}, 'Barracks counter ' + state.counter.count + '!')];

	if (state.counter.count >= 2) {
	var button = (0, _virtualDom.h)('button', {
	onclick: function onclick() {
	sendAction('counter:increment');
	}
	}, 'Increment');

	children.push(button);
	}

	return (0, _virtualDom.h)('div', {}, children);
	};
	var updateDom = function updateDom(state) {
	var newView = render(state);
	var patches = (0, _virtualDom.diff)(view, newView);

	view = newView;
	domNode = (0, _virtualDom.patch)(domNode, patches);
	};

	store.use({
	onError: function onError(err, state, createSend) {
	console.error('error:', err);
	},
	onAction: function onAction(state, data, name, caller, createSend) {
	console.log('on ' + name + ':', data);
	},
	onStateChange: function onStateChange(state, data, prev, caller, createSend) {
	console.log(state, prev);
	updateDom(state);
	}
	});

	view = render(store.state());
	domNode = (0, _virtualDom.create)(view);

	document.getElementById('app').appendChild(domNode);

	sendAction('counter:increment');
	setTimeout(function () {
	sendAction('counter:increment');
	}, 1000);