Skip to content

Instantly share code, notes, and snippets.

@joshgillies

joshgillies/esnextbin.md

Created August 3, 2017 01:10
Show Gist options
  • Save joshgillies/9f93871ca2864e2e8eb172c9aae710cc to your computer and use it in GitHub Desktop.
Save joshgillies/9f93871ca2864e2e8eb172c9aae710cc to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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>
Raw
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())
Raw
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"
}
}
Raw
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());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment