fix(API): API Updates

Queries now accept named parameters.  Guards have been added to see if any passed in props clash
with props that are resolved via the queries.

Author: ctrlplusb

README.md

@@ -32,9 +32,13 @@ class MyComponent extends Component {
 
 export default ComponentQueries(
   // Provide as many query functions as you need.
-  (width) => width <= 330 ? { scale: 'mobile' } : {},
-  (width) => width > 330 && width <=960 ? { scale: 'tablet' } : {},
-  (width) => width > 960 && width <=1024 ? { scale: 'desktop' } : {},
+  ({ width }) => width <= 330 ? { scale: 'mobile' } : {},
+  ({ width }) => width > 330 && width <=960 ? { scale: 'tablet' } : {},
+  ({ width }) => width > 960 ? { scale: 'desktop' } : {},
+  // Pass in height too
+  ({ height }) => height > 200 ? { short: false } : { short: true },
+  // Or both
+  ({ width, height }) => width === height ? { square: true } : { square: false },
 )(MyComponent);
 ```
 

src/ComponentQueries.js

@@ -20,12 +20,6 @@ function ComponentQueries(...queries) {
     `All provided queries for ComponentQueries should be functions.`
   );
 
-  function query(width, height) {
-    return queries.reduce((acc, cur) =>
-      Object.assign({}, acc, cur(width, height))
-    , {});
-  }
-
   return function WrapComponent(WrappedComponent) {
     class ComponentWithComponentQueries extends Component {
       state = {
@@ -55,12 +49,28 @@ function ComponentQueries(...queries) {
       }
 
       runQueries({ width, height }) {
-        const queryResult = query(width, height);
+        const queryResult = queries.reduce((acc, cur) =>
+          Object.assign({}, acc, cur({ width, height }))
+        , {});
 
         this.setState({ queryResult });
       }
 
+      checkForDuplicateProps() {
+        const provided = new Set(Object.keys(this.props));
+
+        Object.keys(this.state.queryResult).forEach(queryProp =>
+          invariant(
+            !provided.has(queryProp),
+            `Duplicate prop has been provided to Component with ComponentQueries: ${queryProp}`)
+        );
+      }
+
       render() {
+        // We need this guard to execute here in order to guarantee we have
+        // both the updated state and the passed in props.
+        this.checkForDuplicateProps();
+
         const { size, ...otherProps } = this.props; // eslint-disable-line no-unused-vars
 
         return (

test/ComponentQueries.test.js

@@ -43,21 +43,49 @@ describeWithDOM(`Given the ComponentQueries library`, () => {
       let receivedProps;
 
       const ComponentQueriedComponent = ComponentQueries(
-        (width) => width <= 100 ? { foo: `bar` } : {},
-        (width) => width > 100 && width <= 500 ? { bob: `baz` } : {}
+        ({ width }) => width <= 100 ? { foo: `bar` } : {},
+        ({ width }) => width > 100 && width <= 500 ? { bob: `baz` } : {},
+        ({ height }) => height <= 100 ? { zip: `zap` } : {}
       )((props) => { receivedProps = props; return <div></div>; });
 
       // Initial render
       const mounted = mount(<ComponentQueriedComponent size={{ width: 100, height: 100 }} />);
-      expect(receivedProps).to.eql({ foo: `bar` });
+      expect(receivedProps).to.eql({ foo: `bar`, zip: `zap` });
 
       // Update size, but no size change
       mounted.setProps({ size: { width: 100, height: 100 } });
-      expect(receivedProps).to.eql({ foo: `bar` });
+      expect(receivedProps).to.eql({ foo: `bar`, zip: `zap` });
 
       // Update size, with change.
-      mounted.setProps({ size: { width: 101, height: 100 } });
+      mounted.setProps({ size: { width: 101, height: 99 } });
+      expect(receivedProps).to.eql({ bob: `baz`, zip: `zap` });
+
+      // Update size, with change.
+      mounted.setProps({ size: { width: 101, height: 101 } });
       expect(receivedProps).to.eql({ bob: `baz` });
     });
+
+    it(`Then it should throw an error when a duplicate prop is provided`, () => {
+      const ComponentQueriedComponent = ComponentQueries(
+        ({ width }) => width <= 100 ? { foo: `bar` } : {}
+      )(() => <div></div>);
+
+      // Initial render duplicate prop
+      const onMount = () => mount(
+        <ComponentQueriedComponent foo="foo" size={{ width: 100, height: 100 }} />
+      );
+
+      expect(onMount).to.throw(/Duplicate prop has been provided/);
+
+      // Updated component duplicate prop
+      const mounted = mount(
+        <ComponentQueriedComponent size={{ width: 100, height: 100 }} />
+      );
+
+      const updateComponent = () =>
+        mounted.setProps({ foo: `baz` });
+
+      expect(updateComponent).to.throw(/Duplicate prop has been provided/);
+    });
   });
 });