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-img-adv src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAADMCAMAAAAI/LzAAAAAkFBMVEX///8ErtoAq9n0/P55zegstN3q+f12yeYAs9wAqtj4/f4Ar9sAqNjB6fXS8Pj6/v/t+fw9uN7K7PZZweJpyebd8vlLwOKF0Om15PJ60+sjud+d3e9Hut+M2e4kt9+85POk4PFQx+V00emV1OtmzOiu4vLQ6/ap3O+44vJoxOSHz+jf8vms3e87v+Kc3/CO0uoHedN/AAAFnElEQVR4nO3d2XaiShQGYCkUGWQQZBCEOJGcHNv2/d/ugEn3SrolYf/MZ+3/qvvGqs+iqAIJezbjcJrFcfPTLXGH7kbjKFF63q0XqiSkxWbozoCRlYsfJQd1tdKEkN6jefrQ/SJGVyzzRzK/qpqm/Wa8x4iG7l39yH50+nfpxar4MBwfI25Dd7FWZCs9Bvep8ZjxjpnLQ3f0i+jOxTeTYyxWWsVgTAPjWG70cvMy6e+pMSWMXQxGuHxdZ0ad0RgvRvb35dRYGBKRMSKM7Sj+c779Y9mYHkb3zWJqbK5GrRk+Xkyxo0qXr0FmfHm6HT2mGI40WLxNjZYcvWNsuZgaZnpQtWZTY2hMsaOKfpzmQeVOZCoYP0rnr95aFe0eUwNgrHM5NbBlY2QYebPqRdELJtR6pHSMsbNeLd1ilAVjGMMYxjCGMYxhDGMYwxjGMIYxjGEMYxjDGMYwhjGjx3z6xWS6mPKHODX2jKljhNA0I5if/nEtRZ0uphgNbaUettFFcXS7bGOKmEJhZOvd5phf7E9tTAxTHFPF3Ahviek/6OtkMOUxJcWbpJwbdkUbE8CUpyrNuG5zy3G+fiR2zJjywQd1vfPmP616z/WOFFOORRwsb0n0aG5MB1PMcfE2Ny7U7owII+4P1MTF3FBkrCNjwLzNDa+YG67TqI2BMcXckLL73LBaaHs4TLFuiPh8K9eNtpodCmPE53Ju6FXrH5SBMN38ecswGDHvpI2BMMtO2mAMEsYQwxgkjCGGMUgYQwxjkDCGGMYgYQwxjEHCGGIYg4QxxDAGCWOIYQwSxhDDGCSMIYYxSBhDDGOQMIYYxiBhDDGMQcIYYhiDhDHEMAYJY4hhDBLGEMMYJIwhhjFIGEMMY5AwhhjGIGEMMYxBwhhiGIOEMcQwBgljKmPLjm/+3B4Ph/M2jdyLc+/5FDG29ZS+FWq7p/xHfHgxfXl6GDkK47/LigjNCJaTw+SBUVWSY6AXT6EYOYrr1kgZPcbd1K+TMnKMnmeEmi/jxuihUdnzqWGUYETl9BpinCuxrNCIMcqGRhkzRg+plhFj9qv/D8ZSK/vcF8ZxPr5crQnmANQUaw1jRcdgt1uX2QXn1C0/1sExOWmBaRFjK+7hUz3M+xZd3T67MEb2hql0qpu3xztB8bliGwkTATOmBYw7V+t9iRSMHkJV+BpinHPt1/5RMD5Wuq4RRs7r11QmYZ6wmoJNMJc5qSUCJsVqPYoQLkNv7WgtETDIIlM2cYItlMsmIgat9vgCWkyihYLRwTKcmYlZrDX1SOgeIzzsLZbyjnxU94ABX9R3ps9QAsaG1n9JiiDLHmip87OZWEOWC/0go2G2CEbLIcwJaIqEMZEv6wot/9jOqeu9mXhCLLMEOtl0vWvG9mV2jFho1zMm+YXiax+xzHxwFaBgbMLt8rdPBxf/tAcM9eaMSDHLjHrT9Fdo63NCamULWmboy/4TWjPz+geAsUUvymQQY7i0dpzXuhoBW+AyDAtqi3K9k4Aw9iilOJlhGHGgNxXWufETEEf8U8CRgXZO+Xe/Ngn1pDSwzGxwZKDj+pJ+df9HCO+54dvfsZ0ZevL0NwvpoUdIxsFqJplBF2aSpOLt+qmX/fF4RvHfzAubU2azCNgBNLijVcQxX+aBen9gRisTb8IXs1nVit8fDQzMuum3KCv+s5vv0yQ33efLNwV2KAGuA4mrf4/xqfcbRDfFGloJ9dJJXButBR3HJ90BFFmTNbr7mIRfHAV607S31P/NYfyWYg9Y1xKP3zKzk8onDT9GC9pYpruP+/1ZQKjopXnvUTZfD44wvAkcYr8iR0H1Nk1oQd7O9qmvOFG8erw/X8XRtCj3WNvdwhAfHzWRjMVui91fHD66m4SvQZyphprFV29520/jDFYZ52K5rmm6lqW0tzvnVOQ/v2F1dDtUOa0AAAAASUVORK5CYII=" />
  </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 init = () => {
  return {}
}

const update = (state, {type, params}) => {
  switch (type) {
    case '@@attr/src':
      return Object.assign({}, state, {src: params})
    case '@@attr/altSrc':
      return Object.assign({}, state, {altSrc: params})
    case 'LOAD':
      return Object.assign({}, state, {loaded: true})
    case 'ERROR':
      return Object.assign({}, state, {errored: true})
    default: return state
  }
}

const view = (state, dispatch) => {
  return h('img', {
    src: state.errored ? state.altSrc : state.src,
    on: {load: dispatch('LOAD'), error: dispatch('ERROR')}
  })
}
const proto = rwc.createWCProto(snabbdomPatcher, {init, view, update})

/* global HTMLElement */
const html = Object.create(HTMLElement.prototype)
const CounterHTMLComponent = Object.assign(html, proto)

/* global document  */
document.registerElement('x-img-adv', {prototype: CounterHTMLComponent})

## 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 _create = require('babel-runtime/core-js/object/create');

var _create2 = _interopRequireDefault(_create);

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

var _extends3 = _interopRequireDefault(_extends2);

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 init = function init() {
  return {};
};

var update = function update(state, _ref) {
  var type = _ref.type;
  var params = _ref.params;

  switch (type) {
    case '@@attr/src':
      return (0, _extends3.default)({}, state, { src: params });
    case '@@attr/altSrc':
      return (0, _extends3.default)({}, state, { altSrc: params });
    case 'LOAD':
      return (0, _extends3.default)({}, state, { loaded: true });
    case 'ERROR':
      return (0, _extends3.default)({}, state, { errored: true });
    default:
      return state;
  }
};

var view = function view(state, dispatch) {
  return (0, _h2.default)('img', {
    src: state.errored ? state.altSrc : state.src,
    on: { load: dispatch('LOAD'), error: dispatch('ERROR') }
  });
};
var proto = _rwc2.default.createWCProto(snabbdomPatcher, { init: init, view: view, update: update });

/* global HTMLElement */
var html = (0, _create2.default)(HTMLElement.prototype);
var CounterHTMLComponent = (0, _extends3.default)(html, proto);

/* global document  */
document.registerElement('x-img-adv', { prototype: CounterHTMLComponent });
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div>
	<x-img-adv src="data:image/png;base64,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" />
	</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 init = () => {
	return {}
	}

	const update = (state, {type, params}) => {
	switch (type) {
	case '@@attr/src':
	return Object.assign({}, state, {src: params})
	case '@@attr/altSrc':
	return Object.assign({}, state, {altSrc: params})
	case 'LOAD':
	return Object.assign({}, state, {loaded: true})
	case 'ERROR':
	return Object.assign({}, state, {errored: true})
	default: return state
	}
	}

	const view = (state, dispatch) => {
	return h('img', {
	src: state.errored ? state.altSrc : state.src,
	on: {load: dispatch('LOAD'), error: dispatch('ERROR')}
	})
	}
	const proto = rwc.createWCProto(snabbdomPatcher, {init, view, update})

	/* global HTMLElement */
	const html = Object.create(HTMLElement.prototype)
	const CounterHTMLComponent = Object.assign(html, proto)

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

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

	var _create2 = _interopRequireDefault(_create);

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

	var _extends3 = _interopRequireDefault(_extends2);

	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 init = function init() {
	return {};
	};

	var update = function update(state, _ref) {
	var type = _ref.type;
	var params = _ref.params;

	switch (type) {
	case '@@attr/src':
	return (0, _extends3.default)({}, state, { src: params });
	case '@@attr/altSrc':
	return (0, _extends3.default)({}, state, { altSrc: params });
	case 'LOAD':
	return (0, _extends3.default)({}, state, { loaded: true });
	case 'ERROR':
	return (0, _extends3.default)({}, state, { errored: true });
	default:
	return state;
	}
	};

	var view = function view(state, dispatch) {
	return (0, _h2.default)('img', {
	src: state.errored ? state.altSrc : state.src,
	on: { load: dispatch('LOAD'), error: dispatch('ERROR') }
	});
	};
	var proto = _rwc2.default.createWCProto(snabbdomPatcher, { init: init, view: view, update: update });

	/* global HTMLElement */
	var html = (0, _create2.default)(HTMLElement.prototype);
	var CounterHTMLComponent = (0, _extends3.default)(html, proto);

	/* global document */
	document.registerElement('x-img-adv', { prototype: CounterHTMLComponent });