made with esnextbin
Created
May 1, 2017 03:43
-
-
Save joshgillies/45cd998857a0390d6cab4589095b8220 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var component = require('hypercomponent') | |
| var ReactDOM = require('react-dom') | |
| var React = require('react') | |
| function Greeter () { | |
| let count = 1 | |
| const greet = component((html, data) => html` | |
| <button onclick="${onclick}"> | |
| ${data.text} | |
| </button> | |
| `)() | |
| function onclick (e) { | |
| greet.render({ text: `I've been clicked ${count++} times!` }) | |
| } | |
| return greet | |
| } | |
| function toReact (component, react) { | |
| return react.createClass({ | |
| shouldComponentUpdate: function (nextProps) { | |
| return false | |
| }, | |
| componentWillReceiveProps: function (props) { | |
| if (this._element) this._element.render(props) | |
| }, | |
| componentDidMount: function () { | |
| if (!this._element) { | |
| this._element = component() | |
| this._node.appendChild(this._element.render(this.props)) | |
| } | |
| }, | |
| setRef: function (_node) { | |
| this._node = _node | |
| }, | |
| render: function () { | |
| return react.createElement('div', { ref: this.setRef }) | |
| } | |
| }) | |
| } | |
| Greeter = toReact(Greeter, React) | |
| ReactDOM.render( | |
| <div> | |
| <Greeter text="Hello World!" /> | |
| <Greeter text="Hello There!" /> | |
| </div>, document.body); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "react-dom": "15.4.2", | |
| "react": "15.4.2", | |
| "babel-runtime": "6.23.0", | |
| "hypercomponent": "2.0.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral'); | |
| var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2); | |
| var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n <button onclick="', '">\n ', '\n </button>\n '], ['\n <button onclick="', '">\n ', '\n </button>\n ']); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var component = require('hypercomponent'); | |
| var ReactDOM = require('react-dom'); | |
| var React = require('react'); | |
| function Greeter() { | |
| var count = 1; | |
| var greet = component(function (html, data) { | |
| return html(_templateObject, onclick, data.text); | |
| })(); | |
| function onclick(e) { | |
| greet.render({ text: 'I\'ve been clicked ' + count++ + ' times!' }); | |
| } | |
| return greet; | |
| } | |
| function toReact(component, react) { | |
| return react.createClass({ | |
| shouldComponentUpdate: function shouldComponentUpdate(nextProps) { | |
| return false; | |
| }, | |
| componentWillReceiveProps: function componentWillReceiveProps(props) { | |
| if (this._element) this._element.render(props); | |
| }, | |
| componentDidMount: function componentDidMount() { | |
| if (!this._element) { | |
| this._element = component(); | |
| this._node.appendChild(this._element.render(this.props)); | |
| } | |
| }, | |
| setRef: function setRef(_node) { | |
| this._node = _node; | |
| }, | |
| render: function render() { | |
| return react.createElement('div', { ref: this.setRef }); | |
| } | |
| }); | |
| } | |
| Greeter = toReact(Greeter, React); | |
| ReactDOM.render(React.createElement( | |
| 'div', | |
| null, | |
| React.createElement(Greeter, { text: 'Hello World!' }), | |
| React.createElement(Greeter, { text: 'Hello There!' }) | |
| ), document.body); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment