New API tentative #2x

Author: wbuchwalter

examples/counter/components/counter.js

@@ -13,7 +13,8 @@ export default function counter() {
 class CounterController {
 
   constructor($ngRedux, $scope) {
-    $ngRedux.connect($scope, this.mapStateToScope, CounterActions, 'vm');
+    const unsubscribe = $ngRedux.connect(this.mapStateToScope, CounterActions)(this);
+    $scope.$on('$destroy', unsubscribe);
   }
 
   // Which part of the Redux global state does our component want to receive on $scope?

package.json

@@ -23,6 +23,7 @@
     "babel-loader": "^5.3.2",
     "expect": "^1.8.0",
     "mocha": "^2.2.5",
+    "sinon": "^1.16.1",
     "webpack": "^1.10.5"
   },
   "peerDependencies": {

src/components/connector.js

@@ -1,53 +1,58 @@
 import shallowEqual from '../utils/shallowEqual';
 import wrapActionCreators from '../utils/wrapActionCreators';
-import findControllerAsKey from '../utils/findControllerAsKey';
 import invariant from 'invariant';
 import _ from 'lodash';
 
 export default function Connector(store) {
-  return (scope, mapStateToScope, mapDispatchToScope = {}) => {
-
-    invariant(
-      scope && _.isFunction(scope.$on) && _.isFunction(scope.$destroy),
-      'The scope parameter passed to connect must be an instance of $scope.'
-      );
+  return (mapStateToTarget, mapDispatchToTarget = dispatch => ({dispatch})) => {
     invariant(
-      _.isFunction(mapStateToScope),
-      'mapStateToScope must be a Function. Instead received $s.', mapStateToScope
+      _.isFunction(mapStateToTarget),
+      'mapStateToTarget must be a Function. Instead received $s.', mapStateToTarget
       );
+
     invariant(
-      _.isPlainObject(mapDispatchToScope) || _.isFunction(mapDispatchToScope),
-      'mapDispatchToScope must be a plain Object or a Function. Instead received $s.', mapDispatchToScope
+      _.isPlainObject(mapDispatchToTarget) || _.isFunction(mapDispatchToTarget),
+      'mapDispatchToTarget must be a plain Object or a Function. Instead received $s.', mapDispatchToTarget
       );
 
-    const propertyKey = findControllerAsKey(scope);
+    let slice = getStateSlice(store.getState(), mapStateToTarget);
+
+    const finalMapDispatchToTarget = _.isPlainObject(mapDispatchToTarget) ?
+      wrapActionCreators(mapDispatchToTarget) :
+      mapDispatchToTarget;
 
-    let slice = getStateSlice(store.getState(), mapStateToScope);
-    let target = propertyKey ? scope[propertyKey] : scope;
+      //find better name
+    const actions = finalMapDispatchToTarget(store.dispatch);
 
-    const finalMapDispatchToScope = _.isPlainObject(mapDispatchToScope) ?
-      wrapActionCreators(mapDispatchToScope) :
-      mapDispatchToScope;
+    return (target) => {
 
-    //Initial update
-    _.assign(target, slice, finalMapDispatchToScope(store.dispatch));
+      invariant(
+        _.isFunction(target) || _.isObject(target),
+        'The target parameter passed to connect must be a Function or a plain object.'
+        );
+
+       //Initial update
+      updateTarget(target, slice, actions);
+
+      const unsubscribe = store.subscribe(() => {
+        const nextSlice = getStateSlice(store.getState(), mapStateToTarget);
+        if (!shallowEqual(slice, nextSlice)) {
+          slice = nextSlice;
+          updateTarget(target, slice, actions);
+        }
+      });
+      return unsubscribe;
+    }
 
-    subscribe(scope, store, () => {
-      const nextSlice = getStateSlice(store.getState(), mapStateToScope);
-      if (!shallowEqual(slice, nextSlice)) {
-        slice = nextSlice;
-        _.assign(target, slice);
-      }
-    });
   }
 }
 
-function subscribe(scope, store, callback) {
-  const unsubscribe = store.subscribe(callback);
-
-  scope.$on('$destroy', () => {
-    unsubscribe();
-  });
+function updateTarget(target, StateSlice, dispatch) {
+  if(_.isFunction(target)) {
+    target(StateSlice, dispatch);
+  } else {
+    _.assign(target, StateSlice, dispatch);
+  }
 }
 
 function getStateSlice(state, mapStateToScope) {

src/utils/findControllerAsKey.js

@@ -1,81 +1,100 @@
 import expect from 'expect';
+let sinon = require('sinon');
 import { createStore } from 'redux';
 import Connector from '../../src/components/connector';
 import _ from 'lodash';
 
 describe('Connector', () => {
   let store;
   let connect;
-  let scopeStub;
+  let targetObj;
 
   beforeEach(() => {
     store = createStore((state, action) => ({
       foo: 'bar',
       baz: action.payload
     }));
-    scopeStub = {
-      $on: () => {},
-      $destroy: () => {}
-    };
+    targetObj = {};
     connect = Connector(store);
   });
 
-	it('Should throw when not passed a $scope object', () => {
-	  expect(connect.bind(connect, () => { }, () => ({}))).toThrow();
-	  expect(connect.bind(connect, 15, () => ({}))).toThrow();
-	  expect(connect.bind(connect, undefined, () => ({}))).toThrow();
-	  expect(connect.bind(connect, {}, () => ({}))).toThrow();
+	it('Should throw when target is not a Function or a plain object', () => {
+	  expect(connect(() => ({})).bind(connect, 15)).toThrow();
+	  expect(connect(() => ({})).bind(connect, undefined)).toThrow();
+	  expect(connect(() => ({})).bind(connect, 'test')).toThrow();
+
+	  expect(connect(() => ({})).bind(connect, {})).toNotThrow();
+    expect(connect(() => ({})).bind(connect, () => {})).toNotThrow();
 
-	  expect(connect.bind(connect, scopeStub, () => ({}))).toNotThrow();
 	});
 
-  it('Should throw when selector does not return a plain object as target', () => {
-    expect(connect.bind(connect, scopeStub, state => state.foo)).toThrow();
+  it('Should throw when selector does not return a plain object', () => {
+    expect(connect.bind(connect, state => state.foo)).toThrow();
   });
 
-  it('Should extend scope with selected state once directly after creation', () => {
-    connect(
-      scopeStub,
+  it('Should extend target (Object) with selected state once directly after creation', () => {
+     connect(
       () => ({
         vm: { test: 1 }
-      }));
+      }))(targetObj);
 
-    expect(scopeStub.vm).toEqual({ test: 1 });
+    expect(targetObj.vm).toEqual({ test: 1 });
   });
 
-  it('Should update the scope passed to connect when the store updates', () => {
-    connect(scopeStub, state => state);
+  it('Should update the target (Object) passed to connect when the store updates', () => {
+    connect(state => state)(targetObj);
     store.dispatch({ type: 'ACTION', payload: 0 });
-    expect(scopeStub.baz).toBe(0);
+    expect(targetObj.baz).toBe(0);
     store.dispatch({ type: 'ACTION', payload: 1 });
-    expect(scopeStub.baz).toBe(1);
+    expect(targetObj.baz).toBe(1);
   });
 
   it('Should prevent unnecessary updates when state does not change (shallowly)', () => {
-    connect(scopeStub, state => state);
+    connect(state => state)(targetObj);
     store.dispatch({ type: 'ACTION', payload: 5 });
 
-    expect(scopeStub.baz).toBe(5);
+    expect(targetObj.baz).toBe(5);
 
-    scopeStub.baz = 0;
+    targetObj.baz = 0;
 
     //this should not replace our mutation, since the state didn't change 
     store.dispatch({ type: 'ACTION', payload: 5 });
 
-    expect(scopeStub.baz).toBe(0);
+    expect(targetObj.baz).toBe(0);
+
+  });
 
+  it('Should extend target (object) with actionCreators', () => {
+    connect(() => ({}), { ac1: () => { }, ac2: () => { } })(targetObj);
+    expect(_.isFunction(targetObj.ac1)).toBe(true);
+    expect(_.isFunction(targetObj.ac2)).toBe(true);
   });
 
-  it('Should extend scope with actionCreators', () => {
-    connect(scopeStub, () => ({}), { ac1: () => { }, ac2: () => { } });
-    expect(_.isFunction(scopeStub.ac1)).toBe(true);
-    expect(_.isFunction(scopeStub.ac2)).toBe(true);
+   it('Should return an unsubscribing function', () => {
+    const unsubscribe = connect(state => state)(targetObj);
+    store.dispatch({ type: 'ACTION', payload: 5 });
+
+    expect(targetObj.baz).toBe(5);
+
+    unsubscribe();
+
+    store.dispatch({ type: 'ACTION', payload: 7 });
+
+    expect(targetObj.baz).toBe(5);
+
   });
 
-  it('Should provide dispatch to mapDispatchToScope when receiving a Function', () => {
+  it('Should provide dispatch to mapDispatchToTarget when receiving a Function', () => {
     let receivedDispatch;
-    connect(scopeStub, () => ({}), dispatch => { receivedDispatch = dispatch });
+    connect(() => ({}), dispatch => { receivedDispatch = dispatch })(targetObj);
     expect(receivedDispatch).toBe(store.dispatch);
   });
 
+  it('Should call target (Function) with mapStateToTarget and mapDispatchToTarget results ', () => {
+
+    //let targetFunc = sinon.spy();
+    //connect(targetFunc, state => state.pojo);
+    expect(false).toBe(true);
+  });
+
 });