Update function argument API slightly, allow for single return values

Author: helloitsjoe

README.md

@@ -111,7 +111,7 @@ const useForm = (initialValue = '') => {
 }
 
 const FormContainer = composeHooks(props => ({
-  useForm: useForm(props.initialValue)
+  useForm: () => useForm(props.initialValue)
 })(FormPresenter);
 
 <FormContainer initialValue="Susie" />

src/__tests__/index.test.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/button-has-type */
-import React, { useState } from "react";
-import { shallow, mount } from "enzyme";
-import composeHooks from "../index";
+import React, { useState } from 'react';
+import { shallow, mount } from 'enzyme';
+import composeHooks from '../index';
 
 const INITIAL_COUNT = 0;
-const INITIAL_VALUE = "hi";
+const INITIAL_VALUE = 'hi';
 
 const useCount = () => {
   const [count, setCount] = useState(INITIAL_COUNT);
@@ -24,70 +24,34 @@ const useUseState = () => useState(INITIAL_COUNT);
 
 const TestComponent = () => <div>Test</div>;
 
-test("returns component if no hooks", () => {
-  const Container = composeHooks()(TestComponent);
-  const wrapper = shallow(<Container />);
-  expect(wrapper.html()).toMatchInlineSnapshot(`"<div>Test</div>"`);
-});
-
-test("throws if no component", () => {
-  expect(() => composeHooks()()).toThrowErrorMatchingInlineSnapshot(
-    `"Component must be provided to compose"`
-  );
-});
-
-test("passes custom hooks to component", () => {
+test('passes custom hooks to component', () => {
   const Container = composeHooks({ useCount, useChange })(TestComponent);
   const wrapper = shallow(<Container />);
-  const { count, increment, decrement, value, onChange } = wrapper
-    .find(TestComponent)
-    .props();
+  const { count, increment, decrement, value, onChange } = wrapper.find(TestComponent).props();
   expect(count).toBe(INITIAL_COUNT);
   expect(value).toBe(INITIAL_VALUE);
-  expect(typeof increment).toBe("function");
-  expect(typeof decrement).toBe("function");
-  expect(typeof onChange).toBe("function");
+  expect(typeof increment).toBe('function');
+  expect(typeof decrement).toBe('function');
+  expect(typeof onChange).toBe('function');
 });
 
-test("passes props to component", () => {
+test('passes props to component', () => {
   const Container = composeHooks({ useChange })(TestComponent);
   const wrapper = shallow(<Container foo="bar" />);
   const { foo } = wrapper.find(TestComponent).props();
-  expect(foo).toBe("bar");
-});
-
-test("if prop and hook names collide, props win", () => {
-  const Container = composeHooks({ useChange })(TestComponent);
-  const wrapper = shallow(<Container />);
-  expect(wrapper.find(TestComponent).props().value).toBe("hi");
-  wrapper.setProps({ value: "newValue" });
-  expect(wrapper.find(TestComponent).props().value).toBe("newValue");
-});
-
-test("warns on hook name collisions", () => {
-  console.warn = jest.fn().mockImplementationOnce(() => {});
-  const useChangeTwo = () => ({ value: "duplicate-hook-prop" });
-  const Container = composeHooks({ useChange, useChangeTwo })(TestComponent);
-  const wrapper = shallow(<Container />);
-  expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
-    `"prop 'value' exists, overriding with value: duplicate-hook-prop"`
-  );
-  expect(wrapper.find(TestComponent).props().value).toBe("duplicate-hook-prop");
-  jest.restoreAllMocks();
+  expect(foo).toBe('bar');
 });
 
-test("hooks work as expected", () => {
-  const Component = ({ value, onChange }) => (
-    <input value={value} onChange={onChange} />
-  );
+test('hooks work as expected', () => {
+  const Component = ({ value, onChange }) => <input value={value} onChange={onChange} />;
   const Container = composeHooks({ useChange })(Component);
   const wrapper = mount(<Container />);
-  expect(wrapper.find("input").props().value).toBe(INITIAL_VALUE);
-  wrapper.find("input").simulate("change", { target: { value: "new" } });
-  expect(wrapper.find("input").props().value).toBe("new");
+  expect(wrapper.find('input').props().value).toBe(INITIAL_VALUE);
+  wrapper.find('input').simulate('change', { target: { value: 'new' } });
+  expect(wrapper.find('input').props().value).toBe('new');
 });
 
-test("works with custom hook that returns array", () => {
+test('works with custom hook that returns array', () => {
   const Component = ({ simpleHook }) => {
     const [count, setCount] = simpleHook;
     return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
@@ -96,16 +60,71 @@ test("works with custom hook that returns array", () => {
   const Container = composeHooks({ simpleHook: useUseState })(Component);
   const wrapper = mount(<Container />);
   expect(wrapper.text()).toBe(INITIAL_COUNT.toString());
-  wrapper.find("button").simulate("click");
+  wrapper.find('button').simulate('click');
   expect(wrapper.text()).toBe((INITIAL_COUNT + 1).toString());
 });
 
+test('works with custom hook that returns single value', () => {
+  // Check single function value
+  let outerFoo;
+  const useFoo = () => {
+    const [foo, setFoo] = useState('before');
+    outerFoo = foo;
+    return setFoo;
+  };
+  // Check single value
+  const useBar = () => {
+    const [bar] = useState('Click me');
+    return bar;
+  };
+  const Component = ({ setFoo, bar }) => <button onClick={() => setFoo('after')}>{bar}</button>;
+  const Container = composeHooks({ setFoo: useFoo, bar: useBar })(Component);
+  const wrapper = mount(<Container />);
+  expect(outerFoo).toBe('before');
+  wrapper.find({ children: 'Click me' }).simulate('click');
+  expect(outerFoo).toBe('after');
+});
+
 test('can pass props to hooks via function', () => {
   const TEST_VALUE = 'test-value';
   const Component = ({ value }) => value;
   const Container = composeHooks(props => ({
-    useChange: useChange(props.initialValue)
+    useChange: () => useChange(props.initialValue),
   }))(Component);
   const wrapper = mount(<Container initialValue={TEST_VALUE} />);
   expect(wrapper.text()).toBe(TEST_VALUE);
 });
+
+describe('Edge cases', () => {
+  it('returns component if no hooks', () => {
+    const Container = composeHooks()(TestComponent);
+    const wrapper = shallow(<Container />);
+    expect(wrapper.html()).toMatchInlineSnapshot(`"<div>Test</div>"`);
+  });
+
+  it('throws if no component', () => {
+    expect(() => composeHooks()()).toThrowErrorMatchingInlineSnapshot(
+      `"Component must be provided to compose"`
+    );
+  });
+
+  it('if prop and hook names collide, props win', () => {
+    const Container = composeHooks({ useChange })(TestComponent);
+    const wrapper = shallow(<Container />);
+    expect(wrapper.find(TestComponent).props().value).toBe('hi');
+    wrapper.setProps({ value: 'newValue' });
+    expect(wrapper.find(TestComponent).props().value).toBe('newValue');
+  });
+
+  it('warns on hook name collisions', () => {
+    console.warn = jest.fn().mockImplementationOnce(() => {});
+    const useChangeTwo = () => ({ value: 'duplicate-hook-prop' });
+    const Container = composeHooks({ useChange, useChangeTwo })(TestComponent);
+    const wrapper = shallow(<Container />);
+    expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
+      `"prop 'value' exists, overriding with value: duplicate-hook-prop"`
+    );
+    expect(wrapper.find(TestComponent).props().value).toBe('duplicate-hook-prop');
+    jest.restoreAllMocks();
+  });
+});

src/index.js

@@ -10,35 +10,28 @@ const composeHooks = hooks => Component => {
   }
 
   return props => {
-    // TODO: Potentially do some optimization similar to what react-redux
-    // does for mapStateToProps:
+    // TODO: Potentially optimize similar to mapStateToProps in react-redux
     // https://github.com/reduxjs/react-redux/blob/master/src/connect/wrapMapToProps.js
 
-    const hooksIsFunc = typeof hooks === 'function';
+    const hooksObject = typeof hooks === 'function' ? hooks(props) : hooks;
 
-    const hooksObject = hooksIsFunc ? hooks(props) : hooks;
+    // Flatten values from all hooks to a single object
+    const hooksProps = Object.entries(hooksObject).reduce((acc, [hookKey, hook]) => {
+      let hookValue = hook();
 
-    const hooksProps = Object.entries(hooksObject).reduce(
-      (acc, [hookKey, hookValue]) => {
-        const hookReturnValue = hooksIsFunc ? hookValue : hookValue();
+      if (Array.isArray(hookValue) || typeof hookValue !== 'object') {
+        hookValue = { [hookKey]: hookValue };
+      }
 
-        if (Array.isArray(hookReturnValue)) {
-          acc[hookKey] = hookReturnValue;
-          return acc;
+      Object.entries(hookValue).forEach(([key, value]) => {
+        if (acc[key]) {
+          console.warn(`prop '${key}' exists, overriding with value: ${value}`);
         }
+        acc[key] = value;
+      });
 
-        Object.entries(hookReturnValue).forEach(([key, value]) => {
-          if (acc[key]) {
-            console.warn(
-              `prop '${key}' exists, overriding with value: ${value}`
-            );
-          }
-          acc[key] = value;
-        });
-        return acc;
-      },
-      {}
-    );
+      return acc;
+    }, {});
 
     return <Component {...hooksProps} {...props} />;
   };