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>
  <div>
    <x-counter />
  </div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import rwc from 'rwc'
import h from 'snabbdom/h'
import snabbdom from 'snabbdom'

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'), // attaches event listeners
])


function snabbdomPatcher (shadowRoot) {
  let __vNode = shadowRoot.appendChild(
    document.createElement('div')
  )

  return function (vNode) {
    __vNode = patch(__vNode, vNode)
  }
}

const CounterComponent = {
  init () {
    return {count: 0}
  },
  update (state, {type, params}) {
    const {count} = state
    switch(type) {
      case 'INC': return {count: count + 1}
      case 'DEC': return {count: count - 1}
      default: return state
    }
  },
  view ({count}, d) {
    return h('div', [
      h('h1', [count]),
      h('button',{on: {click: d('INC')}}, ['INCREMENT']),
      h('button',{on: {click: d('DEC')}}, ['DECREMENT']),
    ])
  }
}


// create prototype object
const proto = rwc.createWCProto(snabbdomPatcher, CounterComponent)

// create an HTMLElement instance
const html = Object.create(HTMLElement.prototype)

// extend html element with the created prototype
const prototype = Object.assign(html, proto)

document.registerElement('x-counter', {prototype})

## package.json
{
  "name": "esnextbin-sketch",
  "dependencies": {
    "rwc": "1.0.2",
    "snabbdom": "0.5.1",
    "babel-runtime": "6.11.6"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

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

var _extends3 = _interopRequireDefault(_extends2);

var _create = require('babel-runtime/core-js/object/create');

var _create2 = _interopRequireDefault(_create);

var _rwc = require('rwc');

var _rwc2 = _interopRequireDefault(_rwc);

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

var _h2 = _interopRequireDefault(_h);

var _snabbdom = require('snabbdom');

var _snabbdom2 = _interopRequireDefault(_snabbdom);

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

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


// attaches event listeners
function snabbdomPatcher(shadowRoot) {
  var __vNode = shadowRoot.appendChild(document.createElement('div'));

  return function (vNode) {
    __vNode = patch(__vNode, vNode);
  };
}

var CounterComponent = {
  init: function init() {
    return { count: 0 };
  },
  update: function update(state, _ref) {
    var type = _ref.type;
    var params = _ref.params;
    var count = state.count;

    switch (type) {
      case 'INC':
        return { count: count + 1 };
      case 'DEC':
        return { count: count - 1 };
      default:
        return state;
    }
  },
  view: function view(_ref2, d) {
    var count = _ref2.count;

    return (0, _h2.default)('div', [(0, _h2.default)('h1', [count]), (0, _h2.default)('button', { on: { click: d('INC') } }, ['INCREMENT']), (0, _h2.default)('button', { on: { click: d('DEC') } }, ['DECREMENT'])]);
  }
};

// create prototype object
var proto = _rwc2.default.createWCProto(snabbdomPatcher, CounterComponent);

// create an HTMLElement instance
var html = (0, _create2.default)(HTMLElement.prototype);

// extend html element with the created prototype
var prototype = (0, _extends3.default)(html, proto);

document.registerElement('x-counter', { prototype: prototype });
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div>
	<x-counter />
	</div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import rwc from 'rwc'
	import h from 'snabbdom/h'
	import snabbdom from 'snabbdom'

	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'), // attaches event listeners
	])


	function snabbdomPatcher (shadowRoot) {
	let __vNode = shadowRoot.appendChild(
	document.createElement('div')
	)

	return function (vNode) {
	__vNode = patch(__vNode, vNode)
	}
	}

	const CounterComponent = {
	init () {
	return {count: 0}
	},
	update (state, {type, params}) {
	const {count} = state
	switch(type) {
	case 'INC': return {count: count + 1}
	case 'DEC': return {count: count - 1}
	default: return state
	}
	},
	view ({count}, d) {
	return h('div', [
	h('h1', [count]),
	h('button',{on: {click: d('INC')}}, ['INCREMENT']),
	h('button',{on: {click: d('DEC')}}, ['DECREMENT']),
	])
	}
	}


	// create prototype object
	const proto = rwc.createWCProto(snabbdomPatcher, CounterComponent)

	// create an HTMLElement instance
	const html = Object.create(HTMLElement.prototype)

	// extend html element with the created prototype
	const prototype = Object.assign(html, proto)

	document.registerElement('x-counter', {prototype})
	{
	"name": "esnextbin-sketch",
	"dependencies": {
	"rwc": "1.0.2",
	"snabbdom": "0.5.1",
	"babel-runtime": "6.11.6"
	},
	"version": "0.0.0"
	}
	'use strict';

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

	var _extends3 = _interopRequireDefault(_extends2);

	var _create = require('babel-runtime/core-js/object/create');

	var _create2 = _interopRequireDefault(_create);

	var _rwc = require('rwc');

	var _rwc2 = _interopRequireDefault(_rwc);

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

	var _h2 = _interopRequireDefault(_h);

	var _snabbdom = require('snabbdom');

	var _snabbdom2 = _interopRequireDefault(_snabbdom);

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

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


	// attaches event listeners
	function snabbdomPatcher(shadowRoot) {
	var __vNode = shadowRoot.appendChild(document.createElement('div'));

	return function (vNode) {
	__vNode = patch(__vNode, vNode);
	};
	}

	var CounterComponent = {
	init: function init() {
	return { count: 0 };
	},
	update: function update(state, _ref) {
	var type = _ref.type;
	var params = _ref.params;
	var count = state.count;

	switch (type) {
	case 'INC':
	return { count: count + 1 };
	case 'DEC':
	return { count: count - 1 };
	default:
	return state;
	}
	},
	view: function view(_ref2, d) {
	var count = _ref2.count;

	return (0, _h2.default)('div', [(0, _h2.default)('h1', [count]), (0, _h2.default)('button', { on: { click: d('INC') } }, ['INCREMENT']), (0, _h2.default)('button', { on: { click: d('DEC') } }, ['DECREMENT'])]);
	}
	};

	// create prototype object
	var proto = _rwc2.default.createWCProto(snabbdomPatcher, CounterComponent);

	// create an HTMLElement instance
	var html = (0, _create2.default)(HTMLElement.prototype);

	// extend html element with the created prototype
	var prototype = (0, _extends3.default)(html, proto);

	document.registerElement('x-counter', { prototype: prototype });