feat(dispatchOnMount): add decorator to dispatch thunkservables on mount

Author: benlesh

.babelrc

@@ -3,6 +3,9 @@
     "plugins": [
       "transform-function-bind",
       "transform-es2015-modules-commonjs",
-      "transform-object-rest-spread"
+      "transform-object-rest-spread",
+      "transform-react-jsx",
+      "transform-decorators-legacy",
+      "transform-class-properties"
     ]
 }

package.json

@@ -8,7 +8,7 @@
     "build": "npm run lint && rm -rf lib && babel src -d lib",
     "build_tests": "rm -rf temp && babel test -d temp",
     "clean": "rimraf ./lib; rimraf ./temp;",
-    "test": "npm run build && npm run build_tests && mocha temp && npm run test_typings",
+    "test": "npm run build && npm run build_tests && mocha temp",
     "test_typings": "tsc test/typings.ts --outFile temp/typings.js --target ES2015 --moduleResolution node",
     "prepublish": "npm test"
   },
@@ -58,17 +58,26 @@
   "devDependencies": {
     "babel-cli": "^6.7.5",
     "babel-eslint": "^6.0.3",
+    "babel-plugin-transform-class-properties": "^6.9.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
     "babel-plugin-transform-function-bind": "^6.5.2",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
+    "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-register": "^6.7.2",
     "chai": "^3.5.0",
     "eslint": "^2.10.2",
     "mocha": "^2.4.5",
     "promise": "^7.1.1",
+    "react": "^15.0.2",
+    "redux": "^3.5.2",
     "rimraf": "^2.5.2",
+    "rxjs": "^5.0.0-beta.7",
     "typescript": "^1.8.10"
+  },
+  "dependencies": {
+    "redux-observable": "^0.4.0"
   }
 }

src/dispatchOnMount.js

@@ -0,0 +1,27 @@
+import { Component, PropTypes } from 'react';
+import { Subscription } from 'rxjs/Subscription';
+
+const $$reduxObservableSubscription = '@@reduxObservableSubscription';
+
+export function dispatchOnMount(...toDispatch) {
+  return (ComposedComponent) =>
+    class DispatchOnMountComponent extends Component {
+      static contextTypes = {
+        store: PropTypes.object.isRequired
+      }
+
+      componentDidMount() {
+        this[$$reduxObservableSubscription] = new Subscription();
+        toDispatch.map(a => this.context.store.dispatch(a))
+          .forEach(sub => sub && this[$$reduxObservableSubscription].add(sub));
+      }
+
+      componentWillUnmount() {
+        this[$$reduxObservableSubscription].unsubscribe();
+      }
+
+      render() {
+        return (<ComposedComponent {...this.props}/>);
+      }
+    };
+}

src/index.js

@@ -1 +1 @@
-// YOLO
+export { dispatchOnMount } from './dispatchOnMount';

test/dispatchOnMount-spec.js

@@ -0,0 +1,133 @@
+/* global describe, it */
+import { expect } from 'chai';
+import { reduxObservable } from 'redux-observable';
+import { dispatchOnMount } from '../';
+import { Component } from 'react';
+import { createStore, applyMiddleware } from 'redux';
+import * as Rx from 'rxjs';
+import 'babel-polyfill';
+
+const { Observable } = Rx;
+
+describe('dispatchOnMount', () => {
+  it('should exist', () => {
+    expect(dispatchOnMount).to.be.a('function');
+  });
+
+  it('should wire a thunkservable to dispatch on componentDidMount', () => {
+    let reducedActions = [];
+    let reducer = (state, action) => {
+      reducedActions.push(action);
+      return state;
+    };
+    let store = createStore(reducer, applyMiddleware(reduxObservable()));
+
+    @dispatchOnMount(() => Observable.of({ type: 'TEST' }))
+    class TestComponent extends Component {
+    }
+
+    let comp = new TestComponent();
+    // fake connection?
+    comp.context = { store };
+    comp.componentDidMount();
+
+    expect(reducedActions).to.deep.equal([{ type: '@@redux/INIT' }, { type: 'TEST' }]);
+  });
+
+  it('should unsubscribe on componentWillUnmount', () => {
+    let reducedActions = [];
+    let reducer = (state, action) => {
+      reducedActions.push(action);
+      return state;
+    };
+    let store = createStore(reducer, applyMiddleware(reduxObservable()));
+
+    let source1Unsubbed = false;
+    let source1 = new Observable((observer) => {
+      return () => {
+        source1Unsubbed = true;
+      };
+    });
+
+    let source2Unsubbed = false;
+    let source2 = new Observable((observer) => {
+      return () => {
+        source2Unsubbed = true;
+      };
+    });
+
+    @dispatchOnMount(() => source1, () => source2)
+    class TestComponent extends Component {
+    }
+
+    let comp = new TestComponent();
+    // fake connection?
+    comp.context = { store };
+    comp.componentDidMount();
+
+    expect(source1Unsubbed).to.equal(false);
+    expect(source2Unsubbed).to.equal(false);
+
+    comp.componentWillUnmount();
+
+    expect(source1Unsubbed).to.equal(true);
+    expect(source2Unsubbed).to.equal(true);
+  });
+
+  it('should subscribe to multiple thunkservables', () => {
+    let reducedActions = [];
+    let reducer = (state, action) => {
+      reducedActions.push(action);
+      return state;
+    };
+    let store = createStore(reducer, applyMiddleware(reduxObservable()));
+
+    let source1 = Observable.of({ type: 'SOURCE1' });
+    let source2 = Observable.of({ type: 'SOURCE2' });
+
+    @dispatchOnMount(() => source1, () => source2)
+    class TestComponent extends Component {
+    }
+
+    let comp = new TestComponent();
+    // fake connection?
+    comp.context = { store };
+    comp.componentDidMount();
+
+    expect(reducedActions).to.deep.equal([
+      { type: '@@redux/INIT' },
+      { type: 'SOURCE1' },
+      { type: 'SOURCE2' }
+    ]);
+  });
+
+  it('should allow normal actions to dispatch on mount', () => {
+    let reducedActions = [];
+    let reducer = (state, action) => {
+      reducedActions.push(action);
+      return state;
+    };
+    let store = createStore(reducer, applyMiddleware(reduxObservable()));
+
+    let source2 = Observable.of({ type: 'SOURCE2' });
+
+    @dispatchOnMount({ type: 'PLAIN_ACTION' }, () => source2)
+    class TestComponent extends Component {
+    }
+
+    let comp = new TestComponent();
+    // fake connection?
+    comp.context = { store };
+    comp.componentDidMount();
+
+    expect(reducedActions).to.deep.equal([
+      { type: '@@redux/INIT' },
+      { type: 'PLAIN_ACTION' },
+      { type: 'SOURCE2' }
+    ]);
+
+    // since plain actions don't return subscriptions, because they're not functions
+    // let's just be really sure we don't break the unsub in the componentWillUnmount
+    expect(() => comp.componentWillUnmount()).not.to.throw();
+  });
+});