connect-alt - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

@@ -0,1 +1,6 @@
+### v1.1.1
+
+* change `Array.includes` to `Array.indexOf` for older browsers without polyfill imported (#8)
+* add new combined method of listening specific store and applying a reducer to it (#7)
+
 ### v1.1.0
@@ -2,0 +7,0 @@

dist/main.js

@@ -80,3 +80,3 @@ 'use strict';
           return _this.setState(_extends({}, _this.state, {
-            customProps: connectArgs[0](_this.takeSnapshot())
+            customProps: connectArgs[connectArgs.length - 1](_this.takeSnapshot())
           }));
@@ -100,2 +100,9 @@ };
           };
+        } else if (typeof connectArgs[connectArgs.length - 1] === 'function') {
+          // if we have a reducer fn as the last arg we
+          // will call this fn on the full alt state
+          this.state = {
+            connectType: 'storesReducerFn',
+            customProps: connectArgs[connectArgs.length - 1](this.takeSnapshot())
+          };
         } else if (typeof connectArgs[0] === 'string') {
@@ -156,2 +163,14 @@ (function () {
               break;
+
+            case 'storesReducerFn':
+              // bind every specified store to the handleStoresChange listener
+              connectArgs.forEach(function (storeName) {
+                if (typeof storeName === 'string') {
+                  flux.getStore(storeName).listen(_this2.handleStoresChange);
+                }
+              });
+              // a store update may have been updated between state
+              // initialization and listening for changes from store
+              this.handleStoresChange();
+              break;
           }
@@ -162,2 +181,4 @@ }
         value: function componentWillUnmount() {
+          var _this3 = this;
+
           var connectType = this.state.connectType;
@@ -184,2 +205,11 @@ var flux = this.context.flux;
               break;
+
+            case 'storesReducerFn':
+              connectArgs.forEach(function (storeName) {
+                if (typeof storeName === 'string') {
+                  flux.getStore(storeName).unlisten(_this3.handleStoresChange);
+                }
+              });
+              this.listeners = null;
+              break;
           }
@@ -212,3 +242,3 @@ }
       // Copy only fn and not defined ones on `ConnectToStoresWrapper`
-      if (!excludedProps.includes(prop) && typeof DecoratedComponent[prop] === 'function' && !ConnectToStoresWrapper[prop]) {
+      if (excludedProps.indexOf(prop) < 0 && typeof DecoratedComponent[prop] === 'function' && !ConnectToStoresWrapper[prop]) {
         var staticMethod = DecoratedComponent[prop];
@@ -215,0 +245,0 @@ ConnectToStoresWrapper[prop] = staticMethod;

package.json

 {
   "name": "connect-alt",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Decorator for passing Altjs store state through props",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

README.md

@@ -45,2 +45,4 @@ # connect-alt
 
+You can pass as many stores you want to the decorator: `@connect('session', 'posts', 'foo', 'bar')`, you will get them into props with the suffix `Store`.
+
 #### III. (Alternative) Use the decorator with a reducer function in your components
@@ -88,4 +90,26 @@
 
+#### III. (Alternative 2) Combine the stores you listen and the FinalStore reducer
+
+```javascript
+import React, { Component, PropTypes } from 'react';
+import connect from 'connect-alt';
+
+@connect('session', ({ session: { currentUser } }) => ({ currentUser }))
+class Example extends Component {
+
+  static propTypes = { currentUser: PropTypes.object.isRequired }
+
+  render() {
+    const { currentUser } = this.props;
+
+    return (
+      <pre>{ JSON.stringify(currentUser, null, 4)</pre>
+    );
+  }
+
+}
+```
+
 ## Examples
 
 See [isomorphic-flux-boilerplate](https://github.com/iam4x/isomorphic-flux-boilerplate) for a complete app example.

src/main.js

@@ -32,2 +32,9 @@ import React, { PropTypes } from 'react';
           };
+        } else if (typeof connectArgs[connectArgs.length - 1] === 'function') {
+          // if we have a reducer fn as the last arg we
+          // will call this fn on the full alt state
+          this.state = {
+            connectType: 'storesReducerFn',
+            customProps: connectArgs[connectArgs.length - 1](this.takeSnapshot())
+          };
         } else if (typeof connectArgs[0] === 'string') {
@@ -77,4 +84,15 @@ // if it's string it will be stores names,
             break;
+
+          case 'storesReducerFn':
+            // bind every specified store to the handleStoresChange listener
+            connectArgs.forEach((storeName) => {
+              if (typeof storeName === 'string') {
+                flux.getStore(storeName).listen(this.handleStoresChange);
+              }
+            });
+            // a store update may have been updated between state
+            // initialization and listening for changes from store
+            this.handleStoresChange();
+            break;
         }
-
       }
@@ -99,2 +117,11 @@
             break;
+
+          case 'storesReducerFn':
+            connectArgs.forEach(storeName => {
+              if (typeof storeName === 'string') {
+                flux.getStore(storeName).unlisten(this.handleStoresChange);
+              }
+            });
+            this.listeners = null;
+            break;
         }
@@ -117,3 +144,3 @@ }
           ...this.state,
-          customProps: connectArgs[0](this.takeSnapshot())
+          customProps: connectArgs[connectArgs.length - 1](this.takeSnapshot())
         });
@@ -146,3 +173,3 @@ }
       // Copy only fn and not defined ones on `ConnectToStoresWrapper`
-      if (!excludedProps.includes(prop) &&
+      if (excludedProps.indexOf(prop) < 0 &&
           typeof DecoratedComponent[prop] === 'function' &&
@@ -149,0 +176,0 @@ !ConnectToStoresWrapper[prop]) {

No alert changes

Improved metrics

Total package byte prevSize

23503

increased by16.34%

Lines of code

380

increased by16.21%

Number of lines in readme file

114

increased by26.67%

No dependency changes