joshgillies/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 -->
</body>
</html>

## index.js
var PicoComponent = require('picocomponent')
var viperHTML = require('viperhtml')
var extend = require('xtend')

// WeakMap fallback from hyperhtml HT @WebReflection
var EXPANDO = '__hypercomponent'
var $WeakMap = typeof WeakMap === undefined
  ? function () {
    return {
      get: function (obj) { return obj[EXPANDO] },
      set: function (obj, value) {
        Object.defineProperty(obj, EXPANDO, {
          configurable: true,
          value: value
        })
      }
    }
  } : WeakMap

var childComponents = new $WeakMap()

function HyperComponent (props) {
  PicoComponent.call(this)
  this.props = props || {}
}

HyperComponent.prototype = Object.create(PicoComponent.prototype)
HyperComponent.prototype.constructor = HyperComponent

HyperComponent.prototype.child = function child (Component, props, children) {
  if (childComponents.get(this) === undefined) childComponents.set(this, {})

  var components = childComponents.get(this)
  var key = props.key ? Component.name + ':' + props.key : Component.name

  if (components[key] === undefined) {
    return (components[key] = new Component(
      extend(
        {},
        Component.defaultProps || {},
        props || {},
        children ? { children: children } : {}
      )
    )).render()
  }

  var instance = components[key]
  instance.props = extend(instance.props, props, { children: children })
  return instance.render()
}

HyperComponent.prototype.handleEvent = function handleEvent (event) {
  var handler = this[event.type] || this['on' + event.type]
  if (handler) handler(event)
}

HyperComponent.prototype.html = function html () {
  if (this._html === undefined) this._html = this.wire(this, 'html')
  this.el = this._html.apply(this, arguments)
  return this.el
}

HyperComponent.prototype.setState = function setState (state) {
  if (this.state === undefined) this.state = {}
  this.state = extend(this.state, state)
  this.render()
}

HyperComponent.prototype.wire = function wire (obj, type) {
  if (typeof obj === 'string') return viperHTML.wire(this, obj)
  return viperHTML.wire(obj, type)
}

class Clicker extends HyperComponent {
  onclick (event) {
    console.log("I've been clicked!")
  }
}

// instead of this... 👎
class BoundButton extends Clicker {
  render () {
    this.html`<button onclick="${this.onclick}">Click me</button>`
  }
}

// you can simply do this! 🎉
class DelegatedButton extends Clicker {
  render () {
    return this.html`<button onclick="${this}">Click me</button>`
  }
}

class App extends HyperComponent {
  render () {
    return this.html`${[
      this.child(BoundButton),
      this.child(DelegatedButton)
    ]}`
  }
}

document.body.appendChild((new App()).render())

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "picocomponent": "2.1.0",
    "viperhtml": "0.12.2",
    "xtend": "4.0.1",
    "babel-runtime": "6.25.0"
  }
}

## transpiled.js
'use strict';

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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

var _create2 = _interopRequireDefault(_create);

var _defineProperty = require('babel-runtime/core-js/object/define-property');

var _defineProperty2 = _interopRequireDefault(_defineProperty);

var _weakMap = require('babel-runtime/core-js/weak-map');

var _weakMap2 = _interopRequireDefault(_weakMap);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['<button onclick="', '">Click me</button>'], ['<button onclick="', '">Click me</button>']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['', ''], ['', '']);

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

var PicoComponent = require('picocomponent');
var viperHTML = require('viperhtml');
var extend = require('xtend'

// WeakMap fallback from hyperhtml HT @WebReflection
);var EXPANDO = '__hypercomponent';
var $WeakMap = (typeof _weakMap2.default === 'undefined' ? 'undefined' : (0, _typeof3.default)(_weakMap2.default)) === undefined ? function () {
  return {
    get: function get(obj) {
      return obj[EXPANDO];
    },
    set: function set(obj, value) {
      (0, _defineProperty2.default)(obj, EXPANDO, {
        configurable: true,
        value: value
      });
    }
  };
} : _weakMap2.default;

var childComponents = new $WeakMap();

function HyperComponent(props) {
  PicoComponent.call(this);
  this.props = props || {};
}

HyperComponent.prototype = (0, _create2.default)(PicoComponent.prototype);
HyperComponent.prototype.constructor = HyperComponent;

HyperComponent.prototype.child = function child(Component, props, children) {
  if (childComponents.get(this) === undefined) childComponents.set(this, {});

  var components = childComponents.get(this);
  var key = props.key ? Component.name + ':' + props.key : Component.name;

  if (components[key] === undefined) {
    return (components[key] = new Component(extend({}, Component.defaultProps || {}, props || {}, children ? { children: children } : {}))).render();
  }

  var instance = components[key];
  instance.props = extend(instance.props, props, { children: children });
  return instance.render();
};

HyperComponent.prototype.handleEvent = function handleEvent(event) {
  var handler = this[event.type] || this['on' + event.type];
  if (handler) handler(event);
};

HyperComponent.prototype.html = function html() {
  if (this._html === undefined) this._html = this.wire(this, 'html');
  this.el = this._html.apply(this, arguments);
  return this.el;
};

HyperComponent.prototype.setState = function setState(state) {
  if (this.state === undefined) this.state = {};
  this.state = extend(this.state, state);
  this.render();
};

HyperComponent.prototype.wire = function wire(obj, type) {
  if (typeof obj === 'string') return viperHTML.wire(this, obj);
  return viperHTML.wire(obj, type);
};

var Clicker = function (_HyperComponent) {
  (0, _inherits3.default)(Clicker, _HyperComponent);

  function Clicker() {
    (0, _classCallCheck3.default)(this, Clicker);
    return (0, _possibleConstructorReturn3.default)(this, (Clicker.__proto__ || (0, _getPrototypeOf2.default)(Clicker)).apply(this, arguments));
  }

  (0, _createClass3.default)(Clicker, [{
    key: 'onclick',
    value: function onclick(event) {
      console.log("I've been clicked!");
    }
  }]);
  return Clicker;
}(HyperComponent);

// instead of this... 👎


var BoundButton = function (_Clicker) {
  (0, _inherits3.default)(BoundButton, _Clicker);

  function BoundButton() {
    (0, _classCallCheck3.default)(this, BoundButton);
    return (0, _possibleConstructorReturn3.default)(this, (BoundButton.__proto__ || (0, _getPrototypeOf2.default)(BoundButton)).apply(this, arguments));
  }

  (0, _createClass3.default)(BoundButton, [{
    key: 'render',
    value: function render() {
      this.html(_templateObject, this.onclick);
    }
  }]);
  return BoundButton;
}(Clicker);

// you can simply do this! 🎉


var DelegatedButton = function (_Clicker2) {
  (0, _inherits3.default)(DelegatedButton, _Clicker2);

  function DelegatedButton() {
    (0, _classCallCheck3.default)(this, DelegatedButton);
    return (0, _possibleConstructorReturn3.default)(this, (DelegatedButton.__proto__ || (0, _getPrototypeOf2.default)(DelegatedButton)).apply(this, arguments));
  }

  (0, _createClass3.default)(DelegatedButton, [{
    key: 'render',
    value: function render() {
      return this.html(_templateObject, this);
    }
  }]);
  return DelegatedButton;
}(Clicker);

var App = function (_HyperComponent2) {
  (0, _inherits3.default)(App, _HyperComponent2);

  function App() {
    (0, _classCallCheck3.default)(this, App);
    return (0, _possibleConstructorReturn3.default)(this, (App.__proto__ || (0, _getPrototypeOf2.default)(App)).apply(this, arguments));
  }

  (0, _createClass3.default)(App, [{
    key: 'render',
    value: function render() {
      return this.html(_templateObject2, [this.child(BoundButton), this.child(DelegatedButton)]);
    }
  }]);
  return App;
}(HyperComponent);

document.body.appendChild(new App().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 -->
	</body>
	</html>
	var PicoComponent = require('picocomponent')
	var viperHTML = require('viperhtml')
	var extend = require('xtend')

	// WeakMap fallback from hyperhtml HT @WebReflection
	var EXPANDO = '__hypercomponent'
	var $WeakMap = typeof WeakMap === undefined
	? function () {
	return {
	get: function (obj) { return obj[EXPANDO] },
	set: function (obj, value) {
	Object.defineProperty(obj, EXPANDO, {
	configurable: true,
	value: value
	})
	}
	}
	} : WeakMap

	var childComponents = new $WeakMap()

	function HyperComponent (props) {
	PicoComponent.call(this)
	this.props = props \|\| {}
	}

	HyperComponent.prototype = Object.create(PicoComponent.prototype)
	HyperComponent.prototype.constructor = HyperComponent

	HyperComponent.prototype.child = function child (Component, props, children) {
	if (childComponents.get(this) === undefined) childComponents.set(this, {})

	var components = childComponents.get(this)
	var key = props.key ? Component.name + ':' + props.key : Component.name

	if (components[key] === undefined) {
	return (components[key] = new Component(
	extend(
	{},
	Component.defaultProps \|\| {},
	props \|\| {},
	children ? { children: children } : {}
	)
	)).render()
	}

	var instance = components[key]
	instance.props = extend(instance.props, props, { children: children })
	return instance.render()
	}

	HyperComponent.prototype.handleEvent = function handleEvent (event) {
	var handler = this[event.type] \|\| this['on' + event.type]
	if (handler) handler(event)
	}

	HyperComponent.prototype.html = function html () {
	if (this._html === undefined) this._html = this.wire(this, 'html')
	this.el = this._html.apply(this, arguments)
	return this.el
	}

	HyperComponent.prototype.setState = function setState (state) {
	if (this.state === undefined) this.state = {}
	this.state = extend(this.state, state)
	this.render()
	}

	HyperComponent.prototype.wire = function wire (obj, type) {
	if (typeof obj === 'string') return viperHTML.wire(this, obj)
	return viperHTML.wire(obj, type)
	}

	class Clicker extends HyperComponent {
	onclick (event) {
	console.log("I've been clicked!")
	}
	}

	// instead of this... 👎
	class BoundButton extends Clicker {
	render () {
	this.html`<button onclick="${this.onclick}">Click me</button>`
	}
	}

	// you can simply do this! 🎉
	class DelegatedButton extends Clicker {
	render () {
	return this.html`<button onclick="${this}">Click me</button>`
	}
	}

	class App extends HyperComponent {
	render () {
	return this.html`${[
	this.child(BoundButton),
	this.child(DelegatedButton)
	]}`
	}
	}

	document.body.appendChild((new App()).render())
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"picocomponent": "2.1.0",
	"viperhtml": "0.12.2",
	"xtend": "4.0.1",
	"babel-runtime": "6.25.0"
	}
	}
	'use strict';

	var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

	var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

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

	var _create2 = _interopRequireDefault(_create);

	var _defineProperty = require('babel-runtime/core-js/object/define-property');

	var _defineProperty2 = _interopRequireDefault(_defineProperty);

	var _weakMap = require('babel-runtime/core-js/weak-map');

	var _weakMap2 = _interopRequireDefault(_weakMap);

	var _typeof2 = require('babel-runtime/helpers/typeof');

	var _typeof3 = _interopRequireDefault(_typeof2);

	var _templateObject = (0, _taggedTemplateLiteral3.default)(['<button onclick="', '">Click me</button>'], ['<button onclick="', '">Click me</button>']),
	_templateObject2 = (0, _taggedTemplateLiteral3.default)(['', ''], ['', '']);

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

	var PicoComponent = require('picocomponent');
	var viperHTML = require('viperhtml');
	var extend = require('xtend'

	// WeakMap fallback from hyperhtml HT @WebReflection
	);var EXPANDO = '__hypercomponent';
	var $WeakMap = (typeof _weakMap2.default === 'undefined' ? 'undefined' : (0, _typeof3.default)(_weakMap2.default)) === undefined ? function () {
	return {
	get: function get(obj) {
	return obj[EXPANDO];
	},
	set: function set(obj, value) {
	(0, _defineProperty2.default)(obj, EXPANDO, {
	configurable: true,
	value: value
	});
	}
	};
	} : _weakMap2.default;

	var childComponents = new $WeakMap();

	function HyperComponent(props) {
	PicoComponent.call(this);
	this.props = props \|\| {};
	}

	HyperComponent.prototype = (0, _create2.default)(PicoComponent.prototype);
	HyperComponent.prototype.constructor = HyperComponent;

	HyperComponent.prototype.child = function child(Component, props, children) {
	if (childComponents.get(this) === undefined) childComponents.set(this, {});

	var components = childComponents.get(this);
	var key = props.key ? Component.name + ':' + props.key : Component.name;

	if (components[key] === undefined) {
	return (components[key] = new Component(extend({}, Component.defaultProps \|\| {}, props \|\| {}, children ? { children: children } : {}))).render();
	}

	var instance = components[key];
	instance.props = extend(instance.props, props, { children: children });
	return instance.render();
	};

	HyperComponent.prototype.handleEvent = function handleEvent(event) {
	var handler = this[event.type] \|\| this['on' + event.type];
	if (handler) handler(event);
	};

	HyperComponent.prototype.html = function html() {
	if (this._html === undefined) this._html = this.wire(this, 'html');
	this.el = this._html.apply(this, arguments);
	return this.el;
	};

	HyperComponent.prototype.setState = function setState(state) {
	if (this.state === undefined) this.state = {};
	this.state = extend(this.state, state);
	this.render();
	};

	HyperComponent.prototype.wire = function wire(obj, type) {
	if (typeof obj === 'string') return viperHTML.wire(this, obj);
	return viperHTML.wire(obj, type);
	};

	var Clicker = function (_HyperComponent) {
	(0, _inherits3.default)(Clicker, _HyperComponent);

	function Clicker() {
	(0, _classCallCheck3.default)(this, Clicker);
	return (0, _possibleConstructorReturn3.default)(this, (Clicker.__proto__ \|\| (0, _getPrototypeOf2.default)(Clicker)).apply(this, arguments));
	}

	(0, _createClass3.default)(Clicker, [{
	key: 'onclick',
	value: function onclick(event) {
	console.log("I've been clicked!");
	}
	}]);
	return Clicker;
	}(HyperComponent);

	// instead of this... 👎


	var BoundButton = function (_Clicker) {
	(0, _inherits3.default)(BoundButton, _Clicker);

	function BoundButton() {
	(0, _classCallCheck3.default)(this, BoundButton);
	return (0, _possibleConstructorReturn3.default)(this, (BoundButton.__proto__ \|\| (0, _getPrototypeOf2.default)(BoundButton)).apply(this, arguments));
	}

	(0, _createClass3.default)(BoundButton, [{
	key: 'render',
	value: function render() {
	this.html(_templateObject, this.onclick);
	}
	}]);
	return BoundButton;
	}(Clicker);

	// you can simply do this! 🎉


	var DelegatedButton = function (_Clicker2) {
	(0, _inherits3.default)(DelegatedButton, _Clicker2);

	function DelegatedButton() {
	(0, _classCallCheck3.default)(this, DelegatedButton);
	return (0, _possibleConstructorReturn3.default)(this, (DelegatedButton.__proto__ \|\| (0, _getPrototypeOf2.default)(DelegatedButton)).apply(this, arguments));
	}

	(0, _createClass3.default)(DelegatedButton, [{
	key: 'render',
	value: function render() {
	return this.html(_templateObject, this);
	}
	}]);
	return DelegatedButton;
	}(Clicker);

	var App = function (_HyperComponent2) {
	(0, _inherits3.default)(App, _HyperComponent2);

	function App() {
	(0, _classCallCheck3.default)(this, App);
	return (0, _possibleConstructorReturn3.default)(this, (App.__proto__ \|\| (0, _getPrototypeOf2.default)(App)).apply(this, arguments));
	}

	(0, _createClass3.default)(App, [{
	key: 'render',
	value: function render() {
	return this.html(_templateObject2, [this.child(BoundButton), this.child(DelegatedButton)]);
	}
	}]);
	return App;
	}(HyperComponent);

	document.body.appendChild(new App().render());