Change compose to pass list of props instead of object (#51)

* Change compose to pass list of props instead of object

* Restore markdown trailing whitespace

* Restore markdown trailing whitespace

* linebreak

Author: gnapse

README.md

@@ -308,7 +308,7 @@ import { compose } from 'react-powerplug'
 const ToggleCounter = compose(Toggle, Counter)
 
 <ToggleCounter>
-  {({ toggle: { toggle, on }, counter: { count, inc, dec } }) => (
+  {({ toggle, on }, { count, inc, dec }) => (
     <ProductCard
       {...productInfo}
       isFavorited={on}
@@ -339,7 +339,7 @@ Also, you can use a built-in Compose component and pass components on `states` p
 import { Compose } from 'react-powerplug'
 
 <Compose states={[Toggle, Counter]}>
-  {({ toggle, counter }) => (
+  {(toggle, counter) => (
     <ProductCard {...} />
   )}
 </Compose>

docs/components/Compose.md

@@ -8,14 +8,14 @@ import { Compose, Toggle, Counter } from 'react-powerplug'
 
 ```jsx
 <Compose states={[<Counter />, <Toggle initial={false} />]}>
-  {({ count, inc, dec, on, toggle }) => (
+  {(counter, toggle) => (
     <ProductCard
       {...productInfo}
-      isFavorited={on}
-      onFavorite={toggle}
-      count={count}
-      onAdd={inc}
-      onRemove={dec}
+      isFavorited={toggle.on}
+      onFavorite={toggle.toggle}
+      count={counter.count}
+      onAdd={counter.inc}
+      onRemove={counter.dec}
     />
   )}
 </Compose>
@@ -34,7 +34,7 @@ const ToggleCounter = compose(
 
 ```jsx
 <ToggleCounter>
-  {({ count, inc, dec, on, toggle }) => (...)}
+  {(counter, toggle) => (...)}
 </ToggleCounter>
 ```
 
@@ -48,10 +48,8 @@ need to pass an array, just pass by arguments: `compose(<Foo />, <Bar />, <Baz /
 
 ## Compose Children Props
 
-Depends on your choices.  
-Will be all children props merged from your passed components.
+The render props function provided will receive n arguments, each of them being
+the arguments provided by the corresponding component in the list.
+
 
-## Known Issues
 
-React PowerPlug still does not deal with name conflicts.  
-Sorry fot that, but PRs are welcome!

src/utils/compose.js

@@ -10,7 +10,7 @@ const compose = (...elements) => {
     // Stack children arguments recursively and pass
     // it down until the last component that render children
     // with these stacked arguments
-    function stackProps(i, elements, stacked = {}) {
+    function stackProps(i, elements, propsList = []) {
       const element = elements[i]
       const isTheLast = i === 0
 
@@ -19,8 +19,8 @@ const compose = (...elements) => {
       // Otherwise continue stacking arguments
       const renderFn = props =>
         isTheLast
-          ? renderProps(composedProps, { [name(element)]: props, ...stacked })
-          : stackProps(i - 1, elements, { [name(element)]: props, ...stacked })
+          ? renderProps(composedProps, ...propsList.concat(props))
+          : stackProps(i - 1, elements, propsList.concat(props))
 
       // Clone a element if it's passed created as <Element initial={} />
       // Or create it if passed as just Element

src/utils/renderProps.js

@@ -1,6 +1,6 @@
 import warn from './warn'
 
-const isFn = (prop) => typeof prop === 'function'
+const isFn = prop => typeof prop === 'function'
 
 /**
  * renderProps
@@ -9,19 +9,18 @@ const isFn = (prop) => typeof prop === 'function'
  * or children if both are used
  */
 
-const renderProps = ({ children, render }, props) => {
+const renderProps = ({ children, render }, ...props) => {
   if (process.env.NODE_ENV !== 'production') {
-    warn(isFn(children) && isFn(render),
+    warn(
+      isFn(children) && isFn(render),
       'You are using the children and render props together.\n' +
-      'This is impossible, therefore, only the children will be used.'
+        'This is impossible, therefore, only the children will be used.'
     )
   }
 
-  const fn = isFn(children)
-    ? children
-    : render
+  const fn = isFn(children) ? children : render
 
-  return fn ? fn(props) : null
+  return fn ? fn(...props) : null
 }
 
 export default renderProps