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/mutable')

// 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.adopt = function adopt (node, type) {
  this['_' + type || 'html'] = viperHTML.adopt(node)
  return this
}

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 }
      )
    )).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.call(this, 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 = {}
  console.log(state)
  this.state = extend(this.state, state)
  this.render()
}

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

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

class Button extends HyperComponent {
  constructor (props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  static defaultProps = {
    test: 'test'
  }
  onclick () {
    this.setState({
      count: this.state.count + 1
    })
  }
  render () {
    const count = this.state.count
    const children = this.props.children
    const countText = this.wire('count')`I've been clicked <b> ${count} </b> times!`
    const text = this.wire('text')` ${children || 'Click me'} `

    return this.html`
      <button onclick="${this}" name="${this.props.test}">${
        count ? countText : typeof children !== 'string' && children || text
      }</button>
    `
  }
}

class App extends HyperComponent {
  render () {
    return this.html`
      <div>${[
        this.child(Button, { key: 1, test: `hey${+new Date}` }),
        this.child(Button, { key: 2, test: `h0${+new Date}` }, 'No, click me!'),
        this.child(Button, { key: 3, test: `y0${+new Date}` }, 'OMG CLICK ME!'),
        this.child(Button, { key: 4, test: `s0${+new Date}` }, this.wire('button')`I'm <i>fancy</i>, please click me.`)
      ]}</div>
    `
  }
}

const btnApp = new App()

document.body.appendChild(btnApp.render())


class TodoApp extends HyperComponent {
  constructor(props) {
    super(props);
    this.state = {items: [], text: ''};
  }

  render() {
    return this.html`
      <div>
        <h3>TODO</h3>
        <div>${
        this.child(TodoList, {items: this.state.items})
        }</div><form onsubmit="${this}">
          <input onchange="${this}" value="${this.state.text}" />
          <button>Add #${this.state.items.length + 1}</button>
        </form>
      </div>
    `
  }

  onchange(e) {
    this.setState({text: e.target.value});
  }

  onsubmit(e) {
    e.preventDefault();
    var newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState({
      items: this.state.items.concat(newItem),
      text: ''
    });
  }
}

class TodoList extends HyperComponent {
  render() {
    return this.html`
      <ul>${this.props.items.map( item => this.wire(item)`
        <li>
          ${item.text}
        </li>`)
      }</ul>`
  }
}

const app = new TodoApp()
document.body.appendChild(app.render())

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "picocomponent": "2.0.0",
    "viperhtml": "0.10.1",
    "babel-runtime": "6.23.0",
    "xtend": "4.0.1"
  }
}

## 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)(['I\'ve been clicked <b> ', ' </b> times!'], ['I\'ve been clicked <b> ', ' </b> times!']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)([' ', ' '], [' ', ' ']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n      <button onclick="', '" name="', '">', '</button>\n    '], ['\n      <button onclick="', '" name="', '">', '</button>\n    ']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n      <div>', '</div>\n    '], ['\n      <div>', '</div>\n    ']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['I\'m <i>fancy</i>, please click me.'], ['I\'m <i>fancy</i>, please click me.']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n      <div>\n        <h3>TODO</h3>\n        <div>', '</div><form onsubmit="', '">\n          <input onchange="', '" value="', '" />\n          <button>Add #', '</button>\n        </form>\n      </div>\n    '], ['\n      <div>\n        <h3>TODO</h3>\n        <div>', '</div><form onsubmit="', '">\n          <input onchange="', '" value="', '" />\n          <button>Add #', '</button>\n        </form>\n      </div>\n    ']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n      <ul>', '</ul>'], ['\n      <ul>', '</ul>']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n        <li>\n          ', ' \n        </li>'], ['\n        <li>\n          ', ' \n        </li>']);

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

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

// 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.adopt = function adopt(node, type) {
  this['_' + type || 'html'] = viperHTML.adopt(node);
  return this;
};

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 }))).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.call(this, 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 = {};
  console.log(state);
  this.state = extend(this.state, state);
  this.render();
};

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

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

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

  function Button(props) {
    (0, _classCallCheck3.default)(this, Button);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Button.__proto__ || (0, _getPrototypeOf2.default)(Button)).call(this, props));

    _this.state = {
      count: 0
    };
    return _this;
  }

  (0, _createClass3.default)(Button, [{
    key: 'onclick',
    value: function onclick() {
      this.setState({
        count: this.state.count + 1
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var count = this.state.count;
      var children = this.props.children;
      var countText = this.wire('count')(_templateObject, count);
      var text = this.wire('text')(_templateObject2, children || 'Click me');

      return this.html(_templateObject3, this, this.props.test, count ? countText : typeof children !== 'string' && children || text);
    }
  }]);
  return Button;
}(HyperComponent);

Button.defaultProps = {
  test: 'test'
};

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(_templateObject4, [this.child(Button, { key: 1, test: 'hey' + +new Date() }), this.child(Button, { key: 2, test: 'h0' + +new Date() }, 'No, click me!'), this.child(Button, { key: 3, test: 'y0' + +new Date() }, 'OMG CLICK ME!'), this.child(Button, { key: 4, test: 's0' + +new Date() }, this.wire('button')(_templateObject5))]);
    }
  }]);
  return App;
}(HyperComponent);

var btnApp = new App();

document.body.appendChild(btnApp.render());

var TodoApp = function (_HyperComponent3) {
  (0, _inherits3.default)(TodoApp, _HyperComponent3);

  function TodoApp(props) {
    (0, _classCallCheck3.default)(this, TodoApp);

    var _this3 = (0, _possibleConstructorReturn3.default)(this, (TodoApp.__proto__ || (0, _getPrototypeOf2.default)(TodoApp)).call(this, props));

    _this3.state = { items: [], text: '' };
    return _this3;
  }

  (0, _createClass3.default)(TodoApp, [{
    key: 'render',
    value: function render() {
      return this.html(_templateObject6, this.child(TodoList, { items: this.state.items }), this, this, this.state.text, this.state.items.length + 1);
    }
  }, {
    key: 'onchange',
    value: function onchange(e) {
      this.setState({ text: e.target.value });
    }
  }, {
    key: 'onsubmit',
    value: function onsubmit(e) {
      e.preventDefault();
      var newItem = {
        text: this.state.text,
        id: Date.now()
      };
      this.setState({
        items: this.state.items.concat(newItem),
        text: ''
      });
    }
  }]);
  return TodoApp;
}(HyperComponent);

var TodoList = function (_HyperComponent4) {
  (0, _inherits3.default)(TodoList, _HyperComponent4);

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

  (0, _createClass3.default)(TodoList, [{
    key: 'render',
    value: function render() {
      var _this5 = this;

      return this.html(_templateObject7, this.props.items.map(function (item) {
        return _this5.wire(item)(_templateObject8, item.text);
      }));
    }
  }]);
  return TodoList;
}(HyperComponent);

var app = new TodoApp();
document.body.appendChild(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/mutable')

	// 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.adopt = function adopt (node, type) {
	this['_' + type \|\| 'html'] = viperHTML.adopt(node)
	return this
	}

	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 }
	)
	)).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.call(this, 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 = {}
	console.log(state)
	this.state = extend(this.state, state)
	this.render()
	}

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

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

	class Button extends HyperComponent {
	constructor (props) {
	super(props)
	this.state = {
	count: 0
	}
	}
	static defaultProps = {
	test: 'test'
	}
	onclick () {
	this.setState({
	count: this.state.count + 1
	})
	}
	render () {
	const count = this.state.count
	const children = this.props.children
	const countText = this.wire('count')`I've been clicked <b> ${count} </b> times!`
	const text = this.wire('text')` ${children \|\| 'Click me'} `

	return this.html`
	<button onclick="${this}" name="${this.props.test}">${
	count ? countText : typeof children !== 'string' && children \|\| text
	}</button>
	`
	}
	}

	class App extends HyperComponent {
	render () {
	return this.html`
	<div>${[
	this.child(Button, { key: 1, test: `hey${+new Date}` }),
	this.child(Button, { key: 2, test: `h0${+new Date}` }, 'No, click me!'),
	this.child(Button, { key: 3, test: `y0${+new Date}` }, 'OMG CLICK ME!'),
	this.child(Button, { key: 4, test: `s0${+new Date}` }, this.wire('button')`I'm <i>fancy</i>, please click me.`)
	]}</div>
	`
	}
	}

	const btnApp = new App()

	document.body.appendChild(btnApp.render())


	class TodoApp extends HyperComponent {
	constructor(props) {
	super(props);
	this.state = {items: [], text: ''};
	}

	render() {
	return this.html`
	<div>
	<h3>TODO</h3>
	<div>${
	this.child(TodoList, {items: this.state.items})
	}</div><form onsubmit="${this}">
	<input onchange="${this}" value="${this.state.text}" />
	<button>Add #${this.state.items.length + 1}</button>
	</form>
	</div>
	`
	}

	onchange(e) {
	this.setState({text: e.target.value});
	}

	onsubmit(e) {
	e.preventDefault();
	var newItem = {
	text: this.state.text,
	id: Date.now()
	};
	this.setState({
	items: this.state.items.concat(newItem),
	text: ''
	});
	}
	}

	class TodoList extends HyperComponent {
	render() {
	return this.html`
	<ul>${this.props.items.map( item => this.wire(item)`
	<li>
	${item.text}
	</li>`)
	}</ul>`
	}
	}

	const app = new TodoApp()
	document.body.appendChild(app.render())
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"picocomponent": "2.0.0",
	"viperhtml": "0.10.1",
	"babel-runtime": "6.23.0",
	"xtend": "4.0.1"
	}
	}
	'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)(['I\'ve been clicked <b> ', ' </b> times!'], ['I\'ve been clicked <b> ', ' </b> times!']),
	_templateObject2 = (0, _taggedTemplateLiteral3.default)([' ', ' '], [' ', ' ']),
	_templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n <button onclick="', '" name="', '">', '</button>\n '], ['\n <button onclick="', '" name="', '">', '</button>\n ']),
	_templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n <div>', '</div>\n '], ['\n <div>', '</div>\n ']),
	_templateObject5 = (0, _taggedTemplateLiteral3.default)(['I\'m <i>fancy</i>, please click me.'], ['I\'m <i>fancy</i>, please click me.']),
	_templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n <div>\n <h3>TODO</h3>\n <div>', '</div><form onsubmit="', '">\n <input onchange="', '" value="', '" />\n <button>Add #', '</button>\n </form>\n </div>\n '], ['\n <div>\n <h3>TODO</h3>\n <div>', '</div><form onsubmit="', '">\n <input onchange="', '" value="', '" />\n <button>Add #', '</button>\n </form>\n </div>\n ']),
	_templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n <ul>', '</ul>'], ['\n <ul>', '</ul>']),
	_templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n <li>\n ', ' \n </li>'], ['\n <li>\n ', ' \n </li>']);

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

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

	// 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.adopt = function adopt(node, type) {
	this['_' + type \|\| 'html'] = viperHTML.adopt(node);
	return this;
	};

	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 }))).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.call(this, 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 = {};
	console.log(state);
	this.state = extend(this.state, state);
	this.render();
	};

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

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

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

	function Button(props) {
	(0, _classCallCheck3.default)(this, Button);

	var _this = (0, _possibleConstructorReturn3.default)(this, (Button.__proto__ \|\| (0, _getPrototypeOf2.default)(Button)).call(this, props));

	_this.state = {
	count: 0
	};
	return _this;
	}

	(0, _createClass3.default)(Button, [{
	key: 'onclick',
	value: function onclick() {
	this.setState({
	count: this.state.count + 1
	});
	}
	}, {
	key: 'render',
	value: function render() {
	var count = this.state.count;
	var children = this.props.children;
	var countText = this.wire('count')(_templateObject, count);
	var text = this.wire('text')(_templateObject2, children \|\| 'Click me');

	return this.html(_templateObject3, this, this.props.test, count ? countText : typeof children !== 'string' && children \|\| text);
	}
	}]);
	return Button;
	}(HyperComponent);

	Button.defaultProps = {
	test: 'test'
	};

	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(_templateObject4, [this.child(Button, { key: 1, test: 'hey' + +new Date() }), this.child(Button, { key: 2, test: 'h0' + +new Date() }, 'No, click me!'), this.child(Button, { key: 3, test: 'y0' + +new Date() }, 'OMG CLICK ME!'), this.child(Button, { key: 4, test: 's0' + +new Date() }, this.wire('button')(_templateObject5))]);
	}
	}]);
	return App;
	}(HyperComponent);

	var btnApp = new App();

	document.body.appendChild(btnApp.render());

	var TodoApp = function (_HyperComponent3) {
	(0, _inherits3.default)(TodoApp, _HyperComponent3);

	function TodoApp(props) {
	(0, _classCallCheck3.default)(this, TodoApp);

	var _this3 = (0, _possibleConstructorReturn3.default)(this, (TodoApp.__proto__ \|\| (0, _getPrototypeOf2.default)(TodoApp)).call(this, props));

	_this3.state = { items: [], text: '' };
	return _this3;
	}

	(0, _createClass3.default)(TodoApp, [{
	key: 'render',
	value: function render() {
	return this.html(_templateObject6, this.child(TodoList, { items: this.state.items }), this, this, this.state.text, this.state.items.length + 1);
	}
	}, {
	key: 'onchange',
	value: function onchange(e) {
	this.setState({ text: e.target.value });
	}
	}, {
	key: 'onsubmit',
	value: function onsubmit(e) {
	e.preventDefault();
	var newItem = {
	text: this.state.text,
	id: Date.now()
	};
	this.setState({
	items: this.state.items.concat(newItem),
	text: ''
	});
	}
	}]);
	return TodoApp;
	}(HyperComponent);

	var TodoList = function (_HyperComponent4) {
	(0, _inherits3.default)(TodoList, _HyperComponent4);

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

	(0, _createClass3.default)(TodoList, [{
	key: 'render',
	value: function render() {
	var _this5 = this;

	return this.html(_templateObject7, this.props.items.map(function (item) {
	return _this5.wire(item)(_templateObject8, item.text);
	}));
	}
	}]);
	return TodoList;
	}(HyperComponent);

	var app = new TodoApp();
	document.body.appendChild(app.render());