Skip to content

Instantly share code, notes, and snippets.

@joshgillies

joshgillies/esnextbin.md

Last active July 7, 2017 07:06
Show Gist options
  • Save joshgillies/133fd6a2d765fb7eee046a63a310406f to your computer and use it in GitHub Desktop.
Save joshgillies/133fd6a2d765fb7eee046a63a310406f 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/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())
Raw
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"
}
}
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)(['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());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment