esnextbin sketch
made with esnextbin
<!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>
import React from 'react'
createProvider = childContextTypes =>
Object.assign(
class extends React.Component {
constructor({children, ...context}) { super({ children })
this.getChildContext = () => context
}
render() { return this.props.children }
}, {
childContextTypes
}
)
// container
Context = ({children, contextTypes, ...context}) => {
var Provider = createProvider(contextTypes)
return <Provider {...context}>
{children}
</Provider>
}
// can apply some magic so that contextTypes are infered, but let's stop here
// npm: react-type
// decorator
provideContext = (context, contextTypes) =>
Component => props => {
var context = {...context, contextTypes}
return <Context {...context} >
<Component {...props}/>
</Context>
}
App = (props, context) => <div>{context.store.data}</div>
App.contextTypes = {
store: React.PropTypes.object
}
import { render } from 'react-dom'
render(
<Context
store={{ data: 'string'}}
contextTypes={App.contextTypes}>
<App/>
</Context>
, document.body)
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "0.14.7",
"react-dom": "0.14.7",
"babel-runtime": "6.5.0"
}
}
'use strict';
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
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 _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
createProvider = function (childContextTypes) {
return (0, _extends3.default)((function (_React$Component) {
(0, _inherits3.default)(_class, _React$Component);
function _class(_ref) {
var children = _ref.children;
var context = (0, _objectWithoutProperties3.default)(_ref, ['children']);
(0, _classCallCheck3.default)(this, _class);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(_class).call(this, { children: children }));
_this.getChildContext = function () {
return context;
};
return _this;
}
(0, _createClass3.default)(_class, [{
key: 'render',
value: function render() {
return this.props.children;
}
}]);
return _class;
})(_react2.default.Component), {
childContextTypes: childContextTypes
});
};
// container
Context = function (_ref2) {
var children = _ref2.children;
var contextTypes = _ref2.contextTypes;
var context = (0, _objectWithoutProperties3.default)(_ref2, ['children', 'contextTypes']);
var Provider = createProvider(contextTypes);
return _react2.default.createElement(
Provider,
context,
children
);
};
// can apply some magic so that contextTypes are infered, but let's stop here
// npm: react-type
// decorator
provideContext = function (context, contextTypes) {
return function (Component) {
return function (props) {
var context = (0, _extends3.default)({}, context, { contextTypes: contextTypes });
return _react2.default.createElement(
Context,
context,
_react2.default.createElement(Component, props)
);
};
};
};
App = function (props, context) {
return _react2.default.createElement(
'div',
null,
context.store.data
);
};
App.contextTypes = {
store: _react2.default.PropTypes.object
};
(0, _reactDom.render)(_react2.default.createElement(
Context,
{
store: { data: 'string' },
contextTypes: App.contextTypes },
_react2.default.createElement(App, null)
), document.body);