no more collect

Author: nadimtuhin

README.md

@@ -29,7 +29,7 @@ new Vue({
 // store.js
 import { createStore } from 'redux';
 
-cosnt initialState = { 
+const initialState = { 
   todos: [] 
 };
 
@@ -58,13 +58,7 @@ export default AppStore;
 import { connect } from 'vua-redux';
 
 const App = {
-	props: ['some-prop', 'another-prop'],
-
-	/**
-	 * everything you do with vue component props
-	 * you can do inside collect key
-	 */
-	collect: {
+	props: {
 		todos: {
 			type: Array,
 		},
@@ -78,7 +72,7 @@ const App = {
 			const todo = this.$refs.input.value;
 			this.addTodo(todo);
 		}
-	}.
+	},
 
 	render(h) {
 		return <div>
@@ -94,13 +88,13 @@ const App = {
 	}
 };
 
-function mapStateAsProps(state) {
+function mapStateToProps(state) {
 	return {
 		todos: state.todos
 	};
 }
 
-function mapActionAsProps(dispatch) {
+function mapActionToProps(dispatch) {
 	return {
 		addTodo(todo) {
 			dispatch({
@@ -111,6 +105,6 @@ function mapActionAsProps(dispatch) {
 	}
 }
 
-export default connect(mapStateAsProps, mapActionsAsProps)(App);
+export default connect(mapStateToProps, mapActionToProps)(App);
 
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vua-redux",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "vue redux binding higher order component",
   "author": "Nadim Tuhin",
   "repository": {
@@ -27,8 +27,5 @@
     "babel-preset-stage-0": "^6.5.0",
     "expect": "^1.20.2",
     "mocha": "^3.0.2"
-  },
-  "dependencies": {
-    "lodash": "^4.16.1"
   }
 }

src/connect.js

@@ -1,64 +1,112 @@
-import noop from 'lodash/noop';
 import normalizeProps from './normalizeProps';
 
-export default function connect(mapStateAsProps = noop, mapActionsAsProps = noop) {
-    return (children) => {
-        const props = children.props || {};
-        const subscriptions = children.collect || {};
+function noop() {
+}
 
-        const allProps = {
-            ...normalizeProps(props),
-            ...normalizeProps(subscriptions)
-        };
+function getStore(component) {
+  return component.$store;
+}
+
+function getAttrs(component) {
+  return component.$parent._vnode.data.attrs;
+}
+
+function getStates(component, mapStateToProps) {
+  const store = getStore(component);
+  const attrs = getAttrs(component);
+
+  return mapStateToProps(store.getState(), attrs) || {};
+}
+
+function getActions(component, mapActionsToProps) {
+  const store = getStore(component);
+
+  return mapActionsToProps(store.dispatch, getAttrs.bind(null, component)) || {};
+}
+
+function getProps(component) {
+  let props = {};
+  const attrs = getAttrs(component);
+  const stateNames = component.vuaReduxStateNames;
+  const actionNames = component.vuaReduxActionNames;
+
+  for (let ii = 0; ii < stateNames.length; ii++) {
+    props[stateNames[ii]] = component[stateNames[ii]];
+  }
 
-        children.props = allProps;
-        delete children.collect;
+  for (let ii = 0; ii < actionNames.length; ii++) {
+    props[actionNames[ii]] = component[actionNames[ii]];
+  }
+
+  return {
+    ...props,
+    ...attrs
+  };
+}
+
+/**
+ * 1. utilities are moved above because vue stores methods, states and props
+ * in the same namespace
+ * 2. actions are set while created
+ */
+
+/**
+ * @param mapStateToProps
+ * @param mapActionsToProps
+ * @returns Object
+ */
+export default function connect(mapStateToProps = noop, mapActionsToProps = noop) {
+  return (children) => {
+
+    /** @namespace children.collect */
+    if (children.collect) {
+      console.warn('vua-redux: collect is deprecated, use props');
+      children.props = {
+        ...normalizeProps(children.props || {}),
+        ...normalizeProps(children.collect || {})
+      }
+    }
+
+    return {
+      name: `ConnectVuaRedux-${children.name || 'children'}`,
+
+      render(h) {
+        const props = getProps(this);
+
+        return h(children, { props });
+      },
+
+      data() {
+        const state = getStates(this, mapStateToProps);
+        const actions = getActions(this, mapActionsToProps);
+        const stateNames = Object.keys(state);
+        const actionNames = Object.keys(actions);
 
         return {
-            name: 'VuaRedux',
-
-            props: props,
-
-            render(h) {
-                const keys = Object.keys(allProps);
-                let propsToPass = {};
-                for (let i = 0; i < keys.length; i++) {
-                    propsToPass[keys[i]] = this[keys[i]];
-                }
-
-                return h(children, {
-                    props: propsToPass
-                })
-            },
-
-            data() {
-                const store = this.$store;
-                const state = mapStateAsProps(store.getState()) || {};
-                const actions = mapActionsAsProps(store.dispatch, store.getState) || {};
-
-                return {
-                    ...state,
-                    ...actions
-                };
-            },
-
-            created() {
-                const store = this.$store;
-                const state = mapStateAsProps(store.getState()) || {};
-                const stateNames = Object.keys(state);
-
-                this.unsubscribe = store.subscribe(() => {
-                    const state = mapStateAsProps(store.getState());
-
-                    for (let i = 0; i < stateNames.length; i++) {
-                        this[stateNames[i]] = state[stateNames[i]];
-                    }
-                });
-            },
-
-            beforeDestroy() {
-                this.unsubscribe();
-            }
+          ...state,
+          ...actions,
+          vuaReduxStateNames: stateNames,
+          vuaReduxActionNames: actionNames
         };
+      },
+
+      created() {
+        const store = getStore(this);
+
+        this.vuaReduxUnsubscribe = store.subscribe(() => {
+          const state = getStates(this, mapStateToProps);
+          const stateNames = Object.keys(state);
+          this.vuaReduxStateNames = stateNames;
+
+          for (let ii = 0; ii < stateNames.length; ii++) {
+            this[stateNames[ii]] = state[stateNames[ii]];
+          }
+        });
+      },
+
+      beforeDestroy() {
+        this.vuaReduxUnsubscribe();
+      }
     };
+  };
 }