[wip] Calculate tide state from props

src/component.js

@@ -9,6 +9,7 @@ const NOT_KEY_PATH_PROPS = [
   'tide',
   'key',
   'ref',
+  'propMap',
 ]
 
 function omit(object, func) {
@@ -53,10 +54,13 @@ export default class TideComponent extends React.Component {
   }
 
   getKeyPaths() {
-    let keyPaths = omit(this.props, (key) => excludedProps[key])
+    const {propMap, ...rest} = this.props
+
+    const keyPaths = mapValues(propMap, (val, key) => {
+      const value = typeof val === 'function' ?
+        val(this.tide.getState(), rest) :
+        val
 
-    keyPaths = mapValues(keyPaths, (val, key) => {
-      const value = typeof val === 'function' ? val(this.tide.getState()) : val
       if (Array.isArray(value)) return value
       if (value === true) return [key]
       return value.split('.')
@@ -66,6 +70,8 @@ export default class TideComponent extends React.Component {
 
   getMappedProps() {
     const state = this.tide.getState()
+    if (!state) return {}
+
     return mapValues(this.getKeyPaths(), (value) => state.getIn(value))
   }
 
@@ -75,8 +81,9 @@ export default class TideComponent extends React.Component {
       ...this.tide.getComponentProps(),
     }
     const mappedProps = omit(this.state, (_, value) => value === undefined)
+    const passThroughProps = omit(this.props, k => k === excludedProps[k])
 
-    return {...mappedProps, tide}
+    return {...mappedProps, ...passThroughProps, tide}
   }
 
   render() {
@@ -87,6 +94,7 @@ export default class TideComponent extends React.Component {
 if (process.env.NODE_ENV !== 'production') {
   TideComponent.displayName = 'TideComponent'
   TideComponent.propTypes = {
+    propMap: PropTypes.object,
     tide: PropTypes.object,
   }
 }

test/component_test.js

@@ -70,70 +70,79 @@ describe('Component', function() {
   describe('Props', function() {
     it('passes down the data of the given key paths as props to the child', function() {
       const Child = createComponent(function() {
-        expect(this.props.foo).toEqual('foo')
-        expect(this.props.bar).toEqual('bar')
+        expect(this.props.foo).toEqual('my nested foo val')
+        expect(this.props.bar).toEqual('my nested bar val')
       })
 
       const state = Immutable.fromJS({
         nested: {
-          foo: 'foo',
-          bar: 'bar'
+          foo: 'my nested foo val',
+          bar: 'my nested bar val'
         }
       })
 
       tideInstance.setState(state)
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        foo: ['nested', 'foo'],
-        bar: ['nested', 'bar']
+        propMap: {
+          foo: ['nested', 'foo'],
+          bar: ['nested', 'bar']
+        }
       }, Child)
 
       TestUtils.renderIntoDocument(tree)
     })
 
     it('accepts dot notation instead of an array for key paths', function() {
       const Child = createComponent(function() {
-        expect(this.props.foo).toEqual('foo')
+        expect(this.props.foo).toEqual('my nested foo val')
       })
 
-      const state = Immutable.fromJS({nested: {foo: 'foo'}})
+      const state = Immutable.fromJS({nested: {foo: 'my nested foo val'}})
 
       tideInstance.setState(state)
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        foo: 'nested.foo'
+        propMap: {
+          foo: 'nested.foo'
+        }
       }, Child)
 
       TestUtils.renderIntoDocument(tree)
     })
 
     it('accepts setting key path to true to have it mirror the prop name', function() {
       const Child = createComponent(function() {
-        expect(this.props.foo).toEqual('foo')
+        expect(this.props.foo).toEqual('my foo val')
       })
 
-      const state = Immutable.fromJS({foo: 'foo'})
+      const state = Immutable.fromJS({foo: 'my foo val'})
 
       tideInstance.setState(state)
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        foo: true
+        propMap: {
+          foo: true
+        }
       }, Child)
 
       TestUtils.renderIntoDocument(tree)
     })
 
-    it('accepts functions to create keypaths based on the current state', function() {
+    it('accepts functions to create keypaths based on the current state and props', function() {
       const Child = createComponent(function() {
-        expect(this.props.fooPointer).toEqual('foo')
+        expect(this.props.fooPointer).toEqual('foo val')
       })
 
-      const state = Immutable.fromJS({foo: 'foo', path: 'foo'})
+      const state = Immutable.fromJS({foo: 'foo', path: 'map', map: {a1: 'foo val'}})
 
       tideInstance.setState(state)
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        fooPointer(state) { return [state.get('path')] }
+        id: 'a1',
+        propMap: {
+          fooPointer: (s, p) => [s.get('path'), p.id]
+        }
       }, Child)
 
       TestUtils.renderIntoDocument(tree)
@@ -146,7 +155,7 @@ describe('Component', function() {
 
       tideInstance.setState(Immutable.Map())
       const tree = React.createElement(
-        Component, {tide: tideInstance, foo: ['nested', 'foo']}, Child
+        Component, {tide: tideInstance, propMap: {foo: ['nested', 'foo']}}, Child
       )
       TestUtils.renderIntoDocument(tree)
     })
@@ -159,7 +168,7 @@ describe('Component', function() {
       tideInstance.setState(Immutable.Map())
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        foo: ['non-existing-state-path']
+        propMap: {foo: ['non-existing-state-path']}
       }, Child)
       TestUtils.renderIntoDocument(tree)
     })
@@ -173,7 +182,11 @@ describe('Component', function() {
         const Child = createComponent(spy)
         tideInstance.setState(Immutable.Map({foo: 'foo'}))
 
-        const tree = React.createElement(Component, {tide: tideInstance, foo: ['foo']}, Child)
+        const tree = React.createElement(
+          Component,
+          {tide: tideInstance, propMap: {foo: ['foo']}},
+          Child
+        )
         TestUtils.renderIntoDocument(tree)
         expect(spy).toHaveBeenCalledTimes(1)
         tideInstance.updateState(state => state.set('foo', 'bar'))
@@ -199,7 +212,9 @@ describe('Component', function() {
 
       const tree = React.createElement(Component, {
         tide: tideInstance,
-        pointer(state) { return [state.get('path')] }
+        propMap: {
+          pointer: s => s.get('path')
+        }
       }, Child)
 
       TestUtils.renderIntoDocument(tree)