Skip to content

Instantly share code, notes, and snippets.

@conorhastings
Created July 21, 2016 13:53
Show Gist options
  • Save conorhastings/1fada42556e78e38c0045108b75eef94 to your computer and use it in GitHub Desktop.
Save conorhastings/1fada42556e78e38c0045108b75eef94 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="app"></div>
<!-- put markup and other contents here -->
</body>
</html>
import React from 'react';
import { render } from 'react-dom';
function Whatever() {
return <div>hello</div>;
}
console.log(Whatever.prototype);
const withKeys = (Component, keys = []) => class PureComponent extends React.Component {
constructor() {
super();
this.isReactComponent = (
Component &&
Component.prototype &&
Component.prototype.isReactComponent
);
}
shouldComponentUpdate(nextProps) {
return keys.some(key => this.props[key] !== nextProps[key]);
}
render() {
return this.isReactComponent ? <Component {...this.props} /> : Component(this.props);
}
};
export default withKeys;
class Test extends React.Component {
render() {
return <div>hello</div>
}
}
const T = withKeys(Test, ["hello"]);
render(<T />, document.getElementById('app'));
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.2.1",
"react-dom": "15.2.1",
"babel-runtime": "6.9.2"
}
}
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Whatever() {
return _react2.default.createElement(
'div',
null,
'hello'
);
}
console.log(Whatever.prototype);
var withKeys = function withKeys(Component) {
var keys = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
return function (_React$Component) {
(0, _inherits3.default)(PureComponent, _React$Component);
function PureComponent() {
(0, _classCallCheck3.default)(this, PureComponent);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(PureComponent).call(this));
_this.isReactComponent = Component && Component.prototype && Component.prototype.isReactComponent;
return _this;
}
(0, _createClass3.default)(PureComponent, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
var _this2 = this;
return keys.some(function (key) {
return _this2.props[key] !== nextProps[key];
});
}
}, {
key: 'render',
value: function render() {
return this.isReactComponent ? _react2.default.createElement(Component, this.props) : Component(this.props);
}
}]);
return PureComponent;
}(_react2.default.Component);
};
exports.default = withKeys;
var Test = function (_React$Component2) {
(0, _inherits3.default)(Test, _React$Component2);
function Test() {
(0, _classCallCheck3.default)(this, Test);
return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Test).apply(this, arguments));
}
(0, _createClass3.default)(Test, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
'hello'
);
}
}]);
return Test;
}(_react2.default.Component);
var T = withKeys(Test, ["hello"]);
(0, _reactDom.render)(_react2.default.createElement(T, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment