Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 14, 2016 09:38
Show Gist options
  • Save anonymous/41e2444a10151151578a to your computer and use it in GitHub Desktop.
Save anonymous/41e2444a10151151578a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/jelane
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createDecoratedClass = (function () { function defineProperties(target, descriptors, initializers) { for (var i = 0; i < descriptors.length; i++) { var descriptor = descriptors[i]; var decorators = descriptor.decorators; var key = descriptor.key; delete descriptor.key; delete descriptor.decorators; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor || descriptor.initializer) descriptor.writable = true; if (decorators) { for (var f = 0; f < decorators.length; f++) { var decorator = decorators[f]; if (typeof decorator === 'function') { descriptor = decorator(target, key, descriptor) || descriptor; } else { throw new TypeError('The decorator for method ' + descriptor.key + ' is of the invalid type ' + typeof decorator); } } if (descriptor.initializer !== undefined) { initializers[key] = descriptor; continue; } } Object.defineProperty(target, key, descriptor); } } return function (Constructor, protoProps, staticProps, protoInitializers, staticInitializers) { if (protoProps) defineProperties(Constructor.prototype, protoProps, protoInitializers); if (staticProps) defineProperties(Constructor, staticProps, staticInitializers); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _defineDecoratedPropertyDescriptor(target, key, descriptors) { var _descriptor = descriptors[key]; if (!_descriptor) return; var descriptor = {}; for (var _key in _descriptor) descriptor[_key] = _descriptor[_key]; descriptor.value = descriptor.initializer ? descriptor.initializer.call(target) : undefined; Object.defineProperty(target, key, descriptor); }
console.clear();
var Parent = (function () {
var _instanceInitializers = {};
function Parent() {
_classCallCheck(this, Parent);
_defineDecoratedPropertyDescriptor(this, 'Child', _instanceInitializers);
}
_createDecoratedClass(Parent, [{
key: 'render',
value: function render() {
return React.createElement(this.Child, null);
}
}, {
key: 'Child',
decorators: [inject(React.PropTypes.func.isRequired)],
initializer: null,
enumerable: true
}], null, _instanceInitializers);
return Parent;
})();
var Child = (function () {
var _instanceInitializers2 = {};
function Child() {
_classCallCheck(this, Child);
_defineDecoratedPropertyDescriptor(this, 'name', _instanceInitializers2);
}
_createDecoratedClass(Child, [{
key: 'render',
value: function render() {
return React.createElement(
'div',
null,
'My name is ',
this.name || 'unspecified'
);
}
}, {
key: 'name',
decorators: [inject(React.PropTypes.string)],
initializer: null,
enumerable: true
}], null, _instanceInitializers2);
return Child;
})();
var App = (function () {
var _instanceInitializers3 = {};
function App() {
_classCallCheck(this, _App);
_defineDecoratedPropertyDescriptor(this, 'Parent', _instanceInitializers3);
}
_createDecoratedClass(App, [{
key: 'render',
value: function render() {
return React.createElement(this.Parent, null);
}
}, {
key: 'Parent',
decorators: [inject(React.PropTypes.func.isRequired)],
initializer: null,
enumerable: true
}], null, _instanceInitializers3);
var _App = App;
App = provide({
Parent: [React.PropTypes.func, Parent],
Child: [React.PropTypes.func, Child],
name: [React.PropTypes.string, 'joe']
})(App) || App;
return App;
})();
React.render(React.createElement(App, null), document.body);
function inject(type) {
return function (target, key, descriptor) {
var klass = target.constructor;
var contextTypes = klass.contextTypes = klass.contextTypes || {};
contextTypes[key] = type;
return {
get: function get() {
return this.context[key];
}
};
};
}
function provide(providing) {
return function (Component) {
return (function () {
function _class() {
_classCallCheck(this, _class);
}
_createClass(_class, [{
key: 'getChildContext',
value: function getChildContext() {
return Object.keys(providing).reduce(reduceValues, {});
}
}, {
key: 'render',
value: function render() {
return React.createElement(Component, this.props);
}
}], [{
key: 'childContextTypes',
value: Object.keys(providing).reduce(reduceTypes, {}),
enumerable: true
}]);
return _class;
})();
};
function reduceTypes(contextTypes, key) {
contextTypes[key] = providing[key][0];
return contextTypes;
}
function reduceValues(contextTypes, key) {
contextTypes[key] = providing[key][1];
return contextTypes;
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.13.1.js"><\/script>
<script src="//fb.me/react-with-addons-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
class Parent {
@inject(React.PropTypes.func.isRequired)
Child;
render() {
return <this.Child/>;
}
}
class Child {
@inject(React.PropTypes.string)
name;
render() {
return <div>My name is {this.name || 'unspecified'}</div>;
}
}
@provide({
Parent: [React.PropTypes.func, Parent],
Child : [React.PropTypes.func, Child ],
name : [React.PropTypes.string, 'joe' ]
})
class App {
@inject(React.PropTypes.func.isRequired)
Parent;
render() {
return <this.Parent/>;
}
}
React.render(<App/>, document.body);
function inject(type) {
return function (target, key, descriptor) {
var klass = target.constructor;
var contextTypes = klass.contextTypes = klass.contextTypes || {};
contextTypes[key] = type;
return {
get: function () {
return this.context[key];
}
};
}
}
function provide(providing) {
return (Component) => class {
static childContextTypes = Object.keys(providing)
.reduce(reduceTypes, {});
getChildContext() {
return Object.keys(providing)
.reduce(reduceValues, {});
}
render() {
return <Component {...this.props} />;
}
};
function reduceTypes(contextTypes, key) {
contextTypes[key] = providing[key][0];
return contextTypes;
}
function reduceValues(contextTypes, key) {
contextTypes[key] = providing[key][1];
return contextTypes;
}
}</script></body>
</html>
Raw
jsbin.jelane.js
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createDecoratedClass = (function () { function defineProperties(target, descriptors, initializers) { for (var i = 0; i < descriptors.length; i++) { var descriptor = descriptors[i]; var decorators = descriptor.decorators; var key = descriptor.key; delete descriptor.key; delete descriptor.decorators; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor || descriptor.initializer) descriptor.writable = true; if (decorators) { for (var f = 0; f < decorators.length; f++) { var decorator = decorators[f]; if (typeof decorator === 'function') { descriptor = decorator(target, key, descriptor) || descriptor; } else { throw new TypeError('The decorator for method ' + descriptor.key + ' is of the invalid type ' + typeof decorator); } } if (descriptor.initializer !== undefined) { initializers[key] = descriptor; continue; } } Object.defineProperty(target, key, descriptor); } } return function (Constructor, protoProps, staticProps, protoInitializers, staticInitializers) { if (protoProps) defineProperties(Constructor.prototype, protoProps, protoInitializers); if (staticProps) defineProperties(Constructor, staticProps, staticInitializers); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _defineDecoratedPropertyDescriptor(target, key, descriptors) { var _descriptor = descriptors[key]; if (!_descriptor) return; var descriptor = {}; for (var _key in _descriptor) descriptor[_key] = _descriptor[_key]; descriptor.value = descriptor.initializer ? descriptor.initializer.call(target) : undefined; Object.defineProperty(target, key, descriptor); }
console.clear();
var Parent = (function () {
var _instanceInitializers = {};
function Parent() {
_classCallCheck(this, Parent);
_defineDecoratedPropertyDescriptor(this, 'Child', _instanceInitializers);
}
_createDecoratedClass(Parent, [{
key: 'render',
value: function render() {
return React.createElement(this.Child, null);
}
}, {
key: 'Child',
decorators: [inject(React.PropTypes.func.isRequired)],
initializer: null,
enumerable: true
}], null, _instanceInitializers);
return Parent;
})();
var Child = (function () {
var _instanceInitializers2 = {};
function Child() {
_classCallCheck(this, Child);
_defineDecoratedPropertyDescriptor(this, 'name', _instanceInitializers2);
}
_createDecoratedClass(Child, [{
key: 'render',
value: function render() {
return React.createElement(
'div',
null,
'My name is ',
this.name || 'unspecified'
);
}
}, {
key: 'name',
decorators: [inject(React.PropTypes.string)],
initializer: null,
enumerable: true
}], null, _instanceInitializers2);
return Child;
})();
var App = (function () {
var _instanceInitializers3 = {};
function App() {
_classCallCheck(this, _App);
_defineDecoratedPropertyDescriptor(this, 'Parent', _instanceInitializers3);
}
_createDecoratedClass(App, [{
key: 'render',
value: function render() {
return React.createElement(this.Parent, null);
}
}, {
key: 'Parent',
decorators: [inject(React.PropTypes.func.isRequired)],
initializer: null,
enumerable: true
}], null, _instanceInitializers3);
var _App = App;
App = provide({
Parent: [React.PropTypes.func, Parent],
Child: [React.PropTypes.func, Child],
name: [React.PropTypes.string, 'joe']
})(App) || App;
return App;
})();
React.render(React.createElement(App, null), document.body);
function inject(type) {
return function (target, key, descriptor) {
var klass = target.constructor;
var contextTypes = klass.contextTypes = klass.contextTypes || {};
contextTypes[key] = type;
return {
get: function get() {
return this.context[key];
}
};
};
}
function provide(providing) {
return function (Component) {
return (function () {
function _class() {
_classCallCheck(this, _class);
}
_createClass(_class, [{
key: 'getChildContext',
value: function getChildContext() {
return Object.keys(providing).reduce(reduceValues, {});
}
}, {
key: 'render',
value: function render() {
return React.createElement(Component, this.props);
}
}], [{
key: 'childContextTypes',
value: Object.keys(providing).reduce(reduceTypes, {}),
enumerable: true
}]);
return _class;
})();
};
function reduceTypes(contextTypes, key) {
contextTypes[key] = providing[key][0];
return contextTypes;
}
function reduceValues(contextTypes, key) {
contextTypes[key] = providing[key][1];
return contextTypes;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment