Merge pull request #5 from subuta/feature/pass-children-to-render

Feature/pass children to render

example/components/snabbdom/Counter.js

@@ -1,9 +1,9 @@
 import h from 'snabbdom/h';
 
-import {connect, inject} from 'example/store.js'
-import {createSelector} from 'reselect';
+import { connect, inject } from 'example/store.js'
+import { createSelector } from 'reselect';
 import { bindActionCreators } from 'redux'
-import {getCount} from 'example/reducers/counter.js';
+import { getCount } from 'example/reducers/counter.js';
 
 const dummyActions = {
   dummyAction: () => {
@@ -13,37 +13,23 @@ const dummyActions = {
   }
 };
 
-const mapStateToProps = (state) => {
-  return {
-    count: getCount(state)
-  }
-};
-
-//// ** Or you can use reselect if you want **
-// const mapStateToProps = createSelector(
-//   getCount,
-//   (count) => {
-//     return {
-//       count
-//     }
-//   }
-// );
+const mapStateToProps = null;
 
 const mapDispatchToProps = (dispatch) => {
   return {
     ...bindActionCreators(dummyActions, dispatch)
   }
 };
 
-const render = ({props}) => {
+const render = ({ props, children }) => {
   console.log('[snabbdom-counter] rendered');
   return h(`span`, {
     on: {
       'click': function (ev) {
         return props.dummyAction();
       }
     }
-  }, [props.count]);
+  }, children);
 };
 
 // react-redux way

example/components/snabbdom/app.js

@@ -6,21 +6,38 @@ import eventlistenersModule from 'snabbdom/modules/eventlisteners';
 import h from 'snabbdom/h';
 
 import store, {inject} from 'example/store.js'
+import { getCount } from 'example/reducers/counter.js';
 
 import Counter from './Counter.js';
 import Incrementer from './Incrementer.js';
 import Decrementer from './Decrementer.js';
 
+// redux style mapStateToProps
+const mapStateToProps = (state) => {
+  return {
+    count: getCount(state)
+  }
+};
+
+//// ** Or you can use reselect if you want **
+// const mapStateToProps = createSelector(
+//   getCount,
+//   (count) => {
+//     return {
+//       count
+//     }
+//   }
+// );
+
 const patch = snabbdom.init([ // Init patch function with choosen modules
   classModule, // makes it easy to toggle classes
   propsModule, // for setting properties on DOM elements
   styleModule, // handles styling on elements with support for animations
   eventlistenersModule // attaches event listeners
 ]);
 
-const render = inject(({dispatch, state}) => {
-  const count = state.counter.count;
-  return h(`div#app-container.test${count}`, {
+const render = inject(({dispatch, state, props}) => {
+  return h(`div#app-container.test${props.count}`, {
     style: {
       display: 'flex',
       justifyContent: 'center',
@@ -33,10 +50,10 @@ const render = inject(({dispatch, state}) => {
     }
   }, [
     Incrementer(),
-    Counter(),
+    Counter({}, props.count),
     Decrementer()
   ]);
-});
+}, mapStateToProps);
 
 export default () => {
   // Patch into empty DOM element – this modifies the DOM as a side effect

example/components/vidom/Counter.js

@@ -14,33 +14,19 @@ const dummyActions = {
   }
 };
 
-const mapStateToProps = (state) => {
-  return {
-    count: getCount(state)
-  }
-};
-
-//// ** Or you can use reselect if you want **
-// const mapStateToProps = createSelector(
-//   getCount,
-//   (count) => {
-//     return {
-//       count
-//     }
-//   }
-// );
+const mapStateToProps = null;
 
 const mapDispatchToProps = (dispatch) => {
   return {
     ...bindActionCreators(dummyActions, dispatch)
   }
 };
 
-const render = ({ props }) => {
+const render = ({ props, children }) => {
   console.log('[vidom-counter] rendered');
   return (
     <span onClick={(ev) => props.dummyAction()}>
-      {props.count}
+      {children}
     </span>
   );
 };

example/components/vidom/app.js

@@ -2,13 +2,30 @@ import * as vidom from 'vidom';
 import { mount, unmount } from 'vidom';
 
 import store, {inject} from 'example/store.js'
+import { getCount } from 'example/reducers/counter.js';
 
 import Counter from './Counter.js';
 import Incrementer from './Incrementer.js';
 import Decrementer from './Decrementer.js';
 
-const render = inject(({dispatch, state}) => {
-  const count = state.counter.count;
+// redux style mapStateToProps
+const mapStateToProps = (state) => {
+  return {
+    count: getCount(state)
+  }
+};
+
+//// ** Or you can use reselect if you want **
+// const mapStateToProps = createSelector(
+//   getCount,
+//   (count) => {
+//     return {
+//       count
+//     }
+//   }
+// );
+
+const render = inject(({dispatch, state, props}) => {
   const ContainerStyle = {
     display: 'flex',
     justifyContent: 'center',
@@ -22,14 +39,14 @@ const render = inject(({dispatch, state}) => {
 
   return (
     <div id="app-container"
-         className={`test${count}`}
+         className={`test${props.count}`}
          style={ContainerStyle}>
       <Incrementer/>
-      <Counter/>
+      <Counter>{props.count}</Counter>
       <Decrementer/>
     </div>
   );
-});
+}, mapStateToProps);
 
 export default () => {
   var container = document.querySelector('#app-container');

lib/redux-virtual-dom.js

@@ -25,7 +25,7 @@ export default function(store) {
   let cache = {};
 
   // injects store context to render function.
-  const inject = (render, mapStateToProps, mapDispatchToProps) => (props = {}) => {
+  const inject = (render, mapStateToProps, mapDispatchToProps) => (props = {}, children = []) => {
     const state = getState();
     const cacheKey = hashCode(render);
 
@@ -53,7 +53,7 @@ export default function(store) {
       if (mapDispatchToProps instanceof Function) {
         nextProps = {...nextProps, ...mapDispatchToProps(dispatch, nextProps)};
       }
-      return render({props: nextProps, state, dispatch});
+      return render({props: nextProps, state, children, dispatch});
     };
 
     // calls if not cached or has some changes in state. (memoize)

package.json

@@ -67,7 +67,7 @@
   },
   "name": "redux-virtual-dom",
   "description": "connect redux to any virtual-dom library like react-redux ✨",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "dependencies": {},
   "devDependencies": {
     "babel-core": "^6.10.4",

spec/redux-virtual-dom.spec.js

@@ -4,6 +4,7 @@ describe('injectorCreator', function(){
 
   var state = {};
   var props = {};
+  var children = {};
   var store = {};
 
   beforeEach(function(){
@@ -18,6 +19,10 @@ describe('injectorCreator', function(){
       count: 0
     };
 
+    children = [
+      'hoge'
+    ];
+
     store = {
       dispatch: sinon.spy(),
       getState: sinon.spy(() => state)
@@ -35,13 +40,16 @@ describe('injectorCreator', function(){
     assert.typeOf(connect, 'function');
   });
 
-  it('should inject injects props/dispatch/state to render', function(){
+  it('should inject injects props/dispatch/state/children to render', function(){
     const {inject} = injectorCreator(store);
 
     const render = (model) => {
       // should pass props as model.props
       assert.deepEqual(model.props, props);
 
+      // should pass children as model.children
+      assert.deepEqual(model.children, children);
+
       // check dispatch
       // when you call model.dispatch that should call store.dispatch
       assert.typeOf(model.dispatch, 'function');
@@ -56,16 +64,19 @@ describe('injectorCreator', function(){
     };
 
     const wrappedRender = inject(render);
-    wrappedRender(props);
+    wrappedRender(props, children);
   });
 
-  it('should connect injects props/dispatch/state to render also', function(){
+  it('should connect injects props/dispatch/state/children to render also', function(){
     const {connect} = injectorCreator(store);
 
     const render = (model) => {
       // should pass props as model.props
       assert.deepEqual(model.props, props);
 
+      // should pass children as model.children
+      assert.deepEqual(model.children, children);
+
       // check dispatch
       // when you call model.dispatch that should call store.dispatch
       assert.typeOf(model.dispatch, 'function');
@@ -80,7 +91,7 @@ describe('injectorCreator', function(){
     };
 
     const wrappedRender = connect()(render);
-    wrappedRender(props);
+    wrappedRender(props, children);
   });
 
   it('should inject accepts mapStateToProps as a second argument', function(){