sonhanguyen
2/17/2016 - 9:38 AM

esnextbin sketch

esnextbin sketch

esnextbin.md
content_copyfile_download
  • Rendered
  • Source

made with esnextbin

index.html
content_copyfile_download
<!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>
index.js
content_copyfile_download
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)
package.json
content_copyfile_download
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "babel-runtime": "6.5.0"
  }
}
transpiled.js
content_copyfile_download
'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);