-
-
Save bholloway/75377094ed4f08f92524 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/jelane
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> | |
| <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> |
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 _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