withQueries decorator syntax

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["airbnb", "stage-1"]
+  "presets": ["airbnb", "stage-1"],
+  "plugins": [
+     "transform-decorators-legacy"
+  ]
 }

.npmignore

@@ -4,4 +4,5 @@ test/
 *.png
 .npmignore
 .babelrc
-.travis.yml
+.travis.yml
+jsconfig.json

README.md

@@ -66,6 +66,27 @@ const AppContainer = connect(App, {
 });
 ```
 
+### `withQueries(config)`
+`withQueries` is like `connect`, but designed to be used as a decorator. If you have enabled the decorator syntax in your project, instead of using `connect` like above, you can do the following:
+```js
+
+import {withQueries} from 'react-hz'
+
+@withQueries({
+  subscriptions: {
+    // ...
+  },
+  mutations: {
+    // ...
+  }
+})
+class MyComponent extends Component {
+  // ...
+}
+```
+
+
+
 ### Subscriptions
 
 `subscriptions` is a map of subscription names to query functions. Data behind query is available as a prop with the same name in React component. Query function receives Horizon `hz` function which should be used to construct a query using Horizon's Collection API and props object which is being passed into container component.

jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions" : {
+        "experimentalDecorators": true
+    }
+}

package.json

@@ -20,7 +20,7 @@
     "type": "git",
     "url": "https://github.com/roman01la/react-horizon.git"
   },
-  "bugs" : {
+  "bugs": {
     "url": "https://github.com/roman01la/react-horizon/issues"
   },
   "homepage": "https://github.com/roman01la/react-horizon",
@@ -33,9 +33,10 @@
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",
-    "babel-register": "^6.9.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-airbnb": "^2.0.0",
     "babel-preset-stage-1": "^6.5.0",
+    "babel-register": "^6.9.0",
     "chai": "^3.5.0",
     "enzyme": "^2.3.0",
     "jsdom": "^9.2.1",

src/connect.js

@@ -1,62 +1,68 @@
 import React, { Component, PropTypes } from 'react';
 import shallowequal from 'shallowequal';
 
-export default function connect(ReactComponent, { subscriptions = {}, mutations = {} }) {
-  return class extends Component {
-    static contextTypes = {
-      hz: PropTypes.func
-    }
-    constructor(props, context) {
+export function withQueries({ subscriptions = {}, mutations = {} }) {
+  return function(ReactComponent) {
+    return class extends Component {
+      static contextTypes = {
+        hz: PropTypes.func
+      }
+      constructor(props, context) {
 
-      super(props, context);
+        super(props, context);
 
-      this._subscriptions = [];
-      this._mutations = {};
+        this._subscriptions = [];
+        this._mutations = {};
 
-      this.state = Object.keys(subscriptions)
-        .reduce((initialState, qname) => {
-          initialState[qname] = [];
-          return initialState;
-        }, {});
+        this.state = Object.keys(subscriptions)
+          .reduce((initialState, qname) => {
+            initialState[qname] = [];
+            return initialState;
+          }, {});
 
-      this._subscribe = this._subscribe.bind(this);
-      this._unsubscribe = this._unsubscribe.bind(this);
-      this._createMutations = this._createMutations.bind(this);
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-      return shallowequal(nextProps, this.props) === false ||
-             shallowequal(nextState, this.state) === false;
-    }
-    componentWillReceiveProps(nextProps) {
-      this._unsubscribe(this._subscriptions);
-      this._subscribe(this.context.hz, nextProps);
-    }
-    componentWillMount() {
-      this._subscribe(this.context.hz, this.props);
-      this._createMutations(this.context.hz);
-    }
-    componentWillUnmount() {
-      this._unsubscribe(this._subscriptions);
-    }
-    _subscribe(hz, props) {
-      Object.keys(subscriptions)
-        .forEach((qname) => {
-          const q = subscriptions[qname];
-          const subscription = q(hz, props).watch().subscribe((data) => this.setState({ [qname]: data }));
-          this._subscriptions.push(subscription);
-        });
-    }
-    _unsubscribe(subscriptions) {
-      subscriptions.forEach((q) => q.unsubscribe());
-    }
-    _createMutations(hz) {
-      Object.keys(mutations)
-        .forEach((mname) => {
-          this._mutations[mname] = mutations[mname](hz);
-        });
-    }
-    render() {
-      return <ReactComponent {...this.props} {...this.state} {...this._mutations} />;
+        this._subscribe = this._subscribe.bind(this);
+        this._unsubscribe = this._unsubscribe.bind(this);
+        this._createMutations = this._createMutations.bind(this);
+      }
+      shouldComponentUpdate(nextProps, nextState) {
+        return shallowequal(nextProps, this.props) === false ||
+              shallowequal(nextState, this.state) === false;
+      }
+      componentWillReceiveProps(nextProps) {
+        this._unsubscribe(this._subscriptions);
+        this._subscribe(this.context.hz, nextProps);
+      }
+      componentWillMount() {
+        this._subscribe(this.context.hz, this.props);
+        this._createMutations(this.context.hz);
+      }
+      componentWillUnmount() {
+        this._unsubscribe(this._subscriptions);
+      }
+      _subscribe(hz, props) {
+        Object.keys(subscriptions)
+          .forEach((qname) => {
+            const q = subscriptions[qname];
+            const subscription = q(hz, props).watch().subscribe((data) => this.setState({ [qname]: data }));
+            this._subscriptions.push(subscription);
+          });
+      }
+      _unsubscribe(subscriptions) {
+        subscriptions.forEach((q) => q.unsubscribe());
+      }
+      _createMutations(hz) {
+        Object.keys(mutations)
+          .forEach((mname) => {
+            this._mutations[mname] = mutations[mname](hz);
+          });
+      }
+      render() {
+        return <ReactComponent {...this.props} {...this.state} {...this._mutations} />;
+      }
     }
   }
 }
+
+export default function connect(ReactComponent, options) {
+  return withQueries(options)(ReactComponent);
+}

src/index.js

@@ -1,4 +1,4 @@
 export { default as Horizon } from '@horizon/client/dist/horizon';
-export { default as connect } from './connect';
+export { default as connect, withQueries } from './connect';
 export { default as HorizonProvider } from './provider';
 export { default as HorizonRoute } from './route';

test/withQueries.spec.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import { expect } from 'chai';
+import { withQueries, HorizonProvider } from '../src/index';
+import { Horizon } from './utils';
+
+describe('withQueries', () => {
+
+  it('should create container component with 2 subscriptions', () => {
+    @withQueries({
+      subscriptions: {
+        items: (hz) => hz('items'),
+        users: (hz) => hz('users'),
+      }
+    })
+    class WithSubscriptions extends React.Component {
+      render() {
+        return <div/>
+      }
+    }
+
+    const wrapper = mount((
+      <HorizonProvider instance={Horizon()}>
+        <WithSubscriptions />
+      </HorizonProvider>
+    ));
+
+    expect(wrapper.find(WithSubscriptions).nodes[0]._subscriptions)
+      .to.have.length(2);
+  });
+
+  it('should create container component with 2 mutations', () => {
+    @withQueries({
+      mutations: {
+        createItem: (hz) => (item) => hz('items').store(item),
+        addUser: (hz) => (user) => hz('users').store(user),
+      }
+    })
+    class WithMutations extends React.Component {
+      render() {
+        return <div/>
+      }
+    }
+
+    const wrapper = mount((
+      <HorizonProvider instance={Horizon()}>
+        <WithMutations />
+      </HorizonProvider>
+    ));
+
+    expect(wrapper.find(WithMutations).nodes[0]._mutations)
+      .to.have.keys(['createItem', 'addUser']);
+  });
+});