Skip to content

Instantly share code, notes, and snippets.

@trxcllnt

trxcllnt/esnextbin.md

Created August 1, 2016 19:37
Show Gist options
  • Save trxcllnt/10b7fed1c2995da1cbd100875b9c6c6c to your computer and use it in GitHub Desktop.
Save trxcllnt/10b7fed1c2995da1cbd100875b9c6c6c to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNext Bin Sketch</title>
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<!-- Milligram CSS minified -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
<style>
h1 {
text-align: center;
margin-top: 20px;
}
</style>
<!-- put additional styles and scripts here -->
</head>
<body>
<div id="app"></div>
<!-- put markup and other contents here -->
</body>
</html>
Raw
index.js
import ReactDOM from 'react-dom';
import { Subscription } from 'rxjs';
import pathSyntax from 'falcor-path-syntax';
import React, { PropTypes, Children } from 'react';
function connect(mapStateToPaths, mapStateToProps, mapDispatchToProps, mergeProps) {
return function wrapWithConnect(Component) {
return class Container extends React.Component {
constructor(props, context) {
super(props, context);
const path = props.path || context.path;
const store = props.store || context.store;
this.store = Array.isArray(path) ? store.from(path) : store;
}
}
}
}
function createFalcorStore(falcorModel) {
return function enhanceReduxStore(createStore) {
return function createReduxStore(reducer, preloadState, enhancer) {
let subscription = new Subscription();
const reduxStore = createStore(reducer, preloadState, enhancer);
const falcorStore = {
...reduxStore, falcor: falcorModel, unsubscribe() {
if (subscription) {
subscription.unsubscribe();
subscription = undefined;
}
}
};
subscription.add(reduxStore.subscribe(() => {
}));
subscription.add(falcorModel.changes().subscribe(() => {
}));
return falcorStore;
}
}
}
function createStore(store, path) {
let { falcor } = store;
let state = store.getState();
let unsubscribe = store.subscribe(() => {
state = store.getState();
})
return {
...store
}
}
function createContainer(Component, { fragment }) {
return class Container extends React.Component {
static propTypes = {
store: PropTypes.object,
path: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string)
])
};
static contextTypes = { store: PropTypes.object };
constructor(props, context) {
super(props, context);
const store = props.store || context.store;
this.store = store.deref(fragment, props.path);
this.subscription = this.store.subscribe(() => this.setState(this.store.getState()));
}
getChildContext() {
return { store: this.store };
}
}
}
const App = ({ title }) => {
return (
<div>
<h1>{title}</h1>
</div>
);
};
ReactDOM.render(
<App title="React Starter App" />,
document.getElementById('app')
);
/*
class Provider extends React.Component {
static childContextTypes = {
store: PropTypes.object.isRequired
};
static propTypes = {
store: PropTypes.object.isRequired,
children: PropTypes.element.isRequired
};
constructor(props, context) {
super(props, context);
this.state = { falcor: props.falcor };
}
getChildContext() {
return { falcor: this.state.falcor };
}
componentWillMount() {
this.subscription = this.falcor.changes().subscribe((model) => {
this.setState({ falcor: model });
});
}
componentWillUnmount() {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = undefined;
}
}
render() {
return Children.only(this.props.children);
}
}
function createContainer(Component) {
return class Container extends React.Component {
static displayName = `${Component.displayName || Component.name}Container`;
constructor(props, context) {
super(props, context);
}
getInitialState() {
return { falcorVersion: -1 };
}
shouldComponentUpdate(nextProps, nextState) {
const { falcor } = nextProps;
if (!nextFalcor) {
return true;
}
const currVersion = this.state.falcorVersion;
const nextVersion = falcor.getVersion();
if (nextVersion !== currVersion) {
return true;
}
return false;
}
componentWillMount() {
}
componentWillReceiveProps(nextProps) {
const { falcor } = nextProps;
if (falcor) {
this.setState({ falcorVersion: falcor.getVersion() });
}
}
componentWillUpdate(nextProps, nextState) {
}
componentWillUnmount() {
}
render() {
return <Component {...this.state} {...this.props} />
}
}
}
*/
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react-dom": "0.14.7",
"react": "0.14.7",
"babel-runtime": "6.11.6",
"rxjs": "5.0.0-beta.10",
"falcor-path-syntax": "0.2.4"
}
}
Raw
transpiled.js
'use strict';
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
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 _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _rxjs = require('rxjs');
var _falcorPathSyntax = require('falcor-path-syntax');
var _falcorPathSyntax2 = _interopRequireDefault(_falcorPathSyntax);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function connect(mapStateToPaths, mapStateToProps, mapDispatchToProps, mergeProps) {
return function wrapWithConnect(Component) {
return function (_React$Component) {
(0, _inherits3.default)(Container, _React$Component);
function Container(props, context) {
(0, _classCallCheck3.default)(this, Container);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Container).call(this, props, context));
var path = props.path || context.path;
var store = props.store || context.store;
_this.store = Array.isArray(path) ? store.from(path) : store;
return _this;
}
return Container;
}(_react2.default.Component);
};
}
function createFalcorStore(falcorModel) {
return function enhanceReduxStore(createStore) {
return function createReduxStore(reducer, preloadState, enhancer) {
var subscription = new _rxjs.Subscription();
var reduxStore = createStore(reducer, preloadState, enhancer);
var falcorStore = (0, _extends3.default)({}, reduxStore, { falcor: falcorModel, unsubscribe: function unsubscribe() {
if (subscription) {
subscription.unsubscribe();
subscription = undefined;
}
}
});
subscription.add(reduxStore.subscribe(function () {}));
subscription.add(falcorModel.changes().subscribe(function () {}));
return falcorStore;
};
};
}
function createStore(store, path) {
var falcor = store.falcor;
var state = store.getState();
var unsubscribe = store.subscribe(function () {
state = store.getState();
});
return (0, _extends3.default)({}, store);
}
function createContainer(Component, _ref) {
var _class, _temp;
var fragment = _ref.fragment;
return _temp = _class = function (_React$Component2) {
(0, _inherits3.default)(Container, _React$Component2);
function Container(props, context) {
(0, _classCallCheck3.default)(this, Container);
var _this2 = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Container).call(this, props, context));
var store = props.store || context.store;
_this2.store = store.deref(fragment, props.path);
_this2.subscription = _this2.store.subscribe(function () {
return _this2.setState(_this2.store.getState());
});
return _this2;
}
(0, _createClass3.default)(Container, [{
key: 'getChildContext',
value: function getChildContext() {
return { store: this.store };
}
}]);
return Container;
}(_react2.default.Component), _class.propTypes = {
store: _react.PropTypes.object,
path: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)])
}, _class.contextTypes = { store: _react.PropTypes.object }, _temp;
}
var App = function App(_ref2) {
var title = _ref2.title;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h1',
null,
title
)
);
};
_reactDom2.default.render(_react2.default.createElement(App, { title: 'React Starter App' }), document.getElementById('app'));
/*
class Provider extends React.Component {
static childContextTypes = {
store: PropTypes.object.isRequired
};
static propTypes = {
store: PropTypes.object.isRequired,
children: PropTypes.element.isRequired
};
constructor(props, context) {
super(props, context);
this.state = { falcor: props.falcor };
}
getChildContext() {
return { falcor: this.state.falcor };
}
componentWillMount() {
this.subscription = this.falcor.changes().subscribe((model) => {
this.setState({ falcor: model });
});
}
componentWillUnmount() {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = undefined;
}
}
render() {
return Children.only(this.props.children);
}
}
function createContainer(Component) {
return class Container extends React.Component {
static displayName = `${Component.displayName || Component.name}Container`;
constructor(props, context) {
super(props, context);
}
getInitialState() {
return { falcorVersion: -1 };
}
shouldComponentUpdate(nextProps, nextState) {
const { falcor } = nextProps;
if (!nextFalcor) {
return true;
}
const currVersion = this.state.falcorVersion;
const nextVersion = falcor.getVersion();
if (nextVersion !== currVersion) {
return true;
}
return false;
}
componentWillMount() {
}
componentWillReceiveProps(nextProps) {
const { falcor } = nextProps;
if (falcor) {
this.setState({ falcorVersion: falcor.getVersion() });
}
}
componentWillUpdate(nextProps, nextState) {
}
componentWillUnmount() {
}
render() {
return <Component {...this.state} {...this.props} />
}
}
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment