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 -->
  <x-counter></x-counter>
</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 { render } from 'preact'
import { createElement as h } from 'preact-hyperscript'

function preactPatcher (shadowRoot) {
  let __vNode
  return function (vNode) {
    __vNode =render(vNode, shadowRoot, __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',{onclick: d('INC')}, ['INCREMENT']),
      h('button',{onclick: d('DEC')}, ['DECREMENT']),
    ])
  }
}


// create prototype object
const proto = rwc.createWCProto(preactPatcher, 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",
    "preact": "5.7.0",
    "preact-hyperscript": "0.7.0",
    "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 _preact = require('preact');

var _preactHyperscript = require('preact-hyperscript');

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

function preactPatcher(shadowRoot) {
  var __vNode = void 0;
  return function (vNode) {
    __vNode = (0, _preact.render)(vNode, shadowRoot, __vNode);
  };
} // write ES2015 code and import modules from npm
// and then press "Execute" to run your program


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, _preactHyperscript.createElement)('div', [(0, _preactHyperscript.createElement)('h1', [count]), (0, _preactHyperscript.createElement)('button', { onclick: d('INC') }, ['INCREMENT']), (0, _preactHyperscript.createElement)('button', { onclick: d('DEC') }, ['DECREMENT'])]);
  }
};

// create prototype object
var proto = _rwc2.default.createWCProto(preactPatcher, 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>
	<!-- put markup and other contents here -->
	<x-counter></x-counter>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import rwc from 'rwc'
	import { render } from 'preact'
	import { createElement as h } from 'preact-hyperscript'

	function preactPatcher (shadowRoot) {
	let __vNode
	return function (vNode) {
	__vNode =render(vNode, shadowRoot, __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',{onclick: d('INC')}, ['INCREMENT']),
	h('button',{onclick: d('DEC')}, ['DECREMENT']),
	])
	}
	}


	// create prototype object
	const proto = rwc.createWCProto(preactPatcher, 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",
	"preact": "5.7.0",
	"preact-hyperscript": "0.7.0",
	"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 _preact = require('preact');

	var _preactHyperscript = require('preact-hyperscript');

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

	function preactPatcher(shadowRoot) {
	var __vNode = void 0;
	return function (vNode) {
	__vNode = (0, _preact.render)(vNode, shadowRoot, __vNode);
	};
	} // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program


	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, _preactHyperscript.createElement)('div', [(0, _preactHyperscript.createElement)('h1', [count]), (0, _preactHyperscript.createElement)('button', { onclick: d('INC') }, ['INCREMENT']), (0, _preactHyperscript.createElement)('button', { onclick: d('DEC') }, ['DECREMENT'])]);
	}
	};

	// create prototype object
	var proto = _rwc2.default.createWCProto(preactPatcher, 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 });