add implementation

Description:
- implement Connector, Connection and Reductor components
- update package.json and .babelrc to make a build

Author: akuzko

.babelrc

@@ -0,0 +1,7 @@
+{
+  presets: [
+    'es2015',
+    'react',
+    'stage-1'
+  ]
+}

package.json

@@ -4,12 +4,19 @@
   "description": "Connector component to hoist all Redux-related logic of your app",
   "main": "./lib/index.js",
   "scripts": {
+    "build": "babel src --out-dir lib",
+    "clear": "rimraf lib",
+    "rebuild": "npm run clear && npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/akuzko/react-redux-connector.git"
   },
+  "files": [
+    "lib",
+    "src"
+  ],
   "keywords": [
     "react",
     "reactjs",
@@ -20,7 +27,16 @@
   "license": "MIT",
   "homepage": "https://github.com/akuzko/react-redux-connector",
   "devDependencies": {
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.16.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
     "react": "^15.3.2",
-    "redux": "^3.6.0"
+    "redux": "^3.6.0",
+    "rimraf": "^2.5.4"
+  },
+  "dependencies": {
+    "lodash": "^4.16.2"
   }
 }

src/components/Connection.jsx

@@ -0,0 +1,13 @@
+import React, { PropTypes, Component } from 'react';
+
+export default class Connection extends Component {
+  static contextTypes = {
+    on: PropTypes.object
+  };
+
+  constructor(props, context) {
+    super(props, context);
+
+    Object.assign(this, this.context.on);
+  }
+}

src/components/Connector.jsx

@@ -0,0 +1,133 @@
+import React, { PropTypes, Component } from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import get from 'lodash/get';
+import storeShape from '../utils/storeShape';
+
+const ownProps = Object.getOwnPropertyNames;
+const proto = Object.getPrototypeOf;
+
+export default class Connector extends Component {
+  static reduce(namespace, stateToHandlers) {
+    this.$namespace = namespace;
+    const initialState = this.$state;
+    const actionNames = ownProps(stateToHandlers());
+    this.__generateDispatchers(actionNames);
+
+    return function(state = initialState, action) {
+      const [actionNamespace, actionType] = action.type.split('/');
+
+      if (actionNamespace === namespace) {
+        const handler = stateToHandlers(state)[actionType];
+        if (handler) {
+          return handler(action.data);
+        }
+      }
+      return state;
+    };
+  }
+
+  static __generateDispatchers(actionNames) {
+    actionNames.forEach(name => {
+      const type = this.action(name);
+      if (typeof this.prototype[`$${name}`] !== 'function') {
+        this.prototype[`$${name}`] = function(data) {
+          this.dispatch(type, data);
+        };
+      }
+    });
+  }
+
+  static $namespace = 'global';
+
+  static action(name) {
+    return `${this.$namespace}/${name}`;
+  }
+
+  static get displayName() {
+    const viewName = this.$connection.displayName || this.$connection.name || 'Component';
+
+    return `Connector(${viewName})`;
+  }
+
+  static contextTypes = {
+    store: storeShape
+  };
+
+  static propTypes = {
+    store: storeShape
+  };
+
+  static childContextTypes = {
+    on: PropTypes.object
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.store = props.store || context.store;
+    this.state = this.getExposedState();
+
+    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+  }
+
+  getChildContext() {
+    return { on: this.getEventHandlers() };
+  }
+
+  componentDidMount() {
+    this.trySubscribe();
+  }
+
+  componentWillUnmount() {
+    this.tryUnsubscribe();
+  }
+
+  trySubscribe() {
+    if (!this.unsubscribe) {
+      this.unsubscribe = this.store.subscribe(this.handleChange.bind(this));
+    }
+  }
+
+  tryUnsubscribe() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
+
+  handleChange() {
+    if (!this.unsubscribe) return;
+
+    const state = this.getExposedState();
+    this.setState(state);
+  }
+
+  getExposedState() {
+    const state = this.store.getState();
+    return this.$expose(get(state, this.constructor.$namespace) || this.constructor.$state, state);
+  }
+
+  dispatch(type, data) {
+    return this.store.dispatch({ type, data });
+  }
+
+  $expose($state) {
+    return $state || {};
+  }
+
+  getEventHandlers() {
+    return ownProps(proto(this)).reduce((handlers, key) => {
+      if (key[0] === '$' && key[1] != '$' && typeof this[key] === 'function' && key != '$expose') {
+        handlers[key] = this[key].bind(this);
+      }
+      return handlers;
+    }, {});
+  }
+
+  getConnection() {
+    return this.constructor.$connection;
+  }
+
+  render() {
+    return React.createElement(this.getConnection(), { ...this.props, ...this.state });
+  }
+}

src/components/Reductor.jsx

@@ -0,0 +1,66 @@
+import React, { PropTypes, Children, Component } from 'react';
+
+import flatten from 'lodash/flatten';
+import set from 'lodash/set';
+import get from 'lodash/get';
+import groupBy from 'lodash/groupBy';
+import forEach from 'lodash/forEach';
+import storeShape from '../utils/storeShape';
+
+export default class Reductor extends Component {
+  static propTypes = {
+    createStore: PropTypes.func.isRequired,
+    children: PropTypes.element.isRequired
+  };
+
+  static childContextTypes = {
+    store: storeShape.isRequired
+  };
+
+  getChildContext() {
+    return { store: this.store };
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    const reducer = this.getReducer();
+    this.store = this.props.createStore(reducer);
+  }
+
+  getConnectors(childrenToProcess = this.props.children) {
+    const tmp = Children.map(childrenToProcess, (child) => {
+      const connectors = [];
+      const { component, children } = child.props;
+      if (component && component.$namespace) {
+        connectors.push(component);
+      }
+      if (children) {
+        connectors.push(...this.getConnectors(children));
+      }
+      // weird thing: for some reason, when array is returned (i.e. return connectors),
+      // React abandons all elements in it.
+      return { connectors };
+    });
+    return flatten(tmp.map(container => container.connectors));
+  }
+
+  getReducer() {
+    const connectors = groupBy(this.getConnectors().filter(c => c.$reducer), '$namespace');
+
+    return function(state = {}, action) {
+      const newState = {};
+
+      forEach(connectors, (group, namespace) => {
+        const namespaceState = group.reduce((st, connector) => {
+          return connector.$reducer(st, action);
+        }, get(state, namespace));
+        set(newState, namespace, namespaceState);
+      });
+      return newState;
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}

src/index.js

@@ -0,0 +1,3 @@
+export Connector from './components/Connector';
+export Connection from './components/Connection';
+export Reductor from './components/Reductor';

src/utils/storeShape.js

@@ -0,0 +1,7 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.shape({
+  subscribe: PropTypes.func.isRequired,
+  dispatch:  PropTypes.func.isRequired,
+  getState:  PropTypes.func.isRequired
+});