fix: mapper function support typings and trade-offs

Author: pedronauck

src/index.test.tsx

@@ -23,40 +23,57 @@ test('return one component with children props as function', () => {
 })
 
 test('rendering children component', () => {
-  const Foo = ({ children }) =>
-    children && typeof children === 'function' && children('foo')
+  const Foo = ({ children, tor }) =>
+    children && typeof children === 'function' && children(tor + 'foo')
 
-  const Bar = ({ children }) =>
-    children && typeof children === 'function' && children('bar')
+  const Bar = ({ render, tor }) =>
+    render && typeof render === 'function' && render(tor + 'bar')
 
   interface RenderProps {
     foo: 'foo'
     bar: 'bar'
   }
 
-  const Composed = adopt<RenderProps>({
-    bar: <Bar />,
-    foo: <Foo />,
+  interface Props {
+    tor: string
+  }
+
+  const Composed = adopt<RenderProps, Props>({
+    bar: ({ tor, render }) => <Bar tor={tor} render={render} />,
+    foo: ({ tor, render }) => <Foo tor={tor}>{render}</Foo>,
   })
 
   const result = shallow(
-    <Composed>
+    <Composed tor="tor">
       {props => (
         <div>
-          {props.foo}
-          {props.bar}
+          <div>{props.foo}</div>
+          <div>{props.bar}</div>
         </div>
       )}
     </Composed>
   )
 
   expect(result.children().length).toBe(1)
-  expect(result.html()).toBe('<div>foobar</div>')
+  expect(result.html()).toBe('<div><div>torfoo</div><div>torbar</div></div>')
 })
 
-test('should allow a function as mapper', () => {
+test('passing a function', () => {
   const Foo = ({ children }) => children('foo')
-  const foo = jest.fn(({ renderProp }) => <Foo children={renderProp} />)
+  const foo = jest.fn(({ render }) => <Foo>{render}</Foo>)
+  const children = jest.fn(() => null)
+  const Composed = adopt({ foo })
+
+  mount(<Composed>{children}</Composed>)
+
+  expect(foo).toHaveBeenCalled()
+  expect(children).toHaveBeenCalledWith({ foo: 'foo' })
+})
+
+test('passing a function changing the render prop on mapper', () => {
+  const Foo = ({ render }) => render('foo')
+
+  const foo = jest.fn(({ render }) => <Foo render={render} />)
   const children = jest.fn(() => null)
   const Composed = adopt({ foo })
 
@@ -69,7 +86,7 @@ test('should allow a function as mapper', () => {
 test('should provide a function mapper with all previous render prop results', () => {
   const Foo = ({ children }) => children('foo')
   const Bar = ({ children }) => children('bar')
-  const bar = jest.fn(({ renderProp }) => <Bar children={renderProp} />)
+  const bar = jest.fn(({ render }) => <Bar>{render}</Bar>)
   const children = jest.fn(() => null)
 
   interface RenderProps {
@@ -90,9 +107,20 @@ test('should provide a function mapper with all previous render prop results', (
 
 test('should provide mapper functions with Composed component props', () => {
   const Foo = ({ children }) => children('foo')
-  const foo = jest.fn(({ renderProp }) => <Foo children={renderProp} />)
+  const foo = jest.fn(({ render }) => <Foo>{render}</Foo>)
   const children = jest.fn(() => null)
-  const Composed = adopt({ foo })
+
+  type RenderProps = {
+    foo: string
+  }
+
+  type Props = {
+    bar: string
+  }
+
+  const Composed = adopt<RenderProps, Props>({
+    foo,
+  })
 
   mount(<Composed bar="bar">{children}</Composed>)
 
@@ -102,8 +130,8 @@ test('should provide mapper functions with Composed component props', () => {
 
 test('throw with a wrong value on mapper', () => {
   expect(() => {
-    const Composed = adopt({ foo: 'helo' })
-    return shallow(<Composed>{props => <div>{props.foo}</div>}</Composed>)
+    const Composed = adopt({ foo: 'helo' } as any)
+    return shallow(<Composed>{props => <div>foo</div>}</Composed>)
   }).toThrowError(
     'The render props object mapper just accept valid elements as value'
   )

src/index.tsx

@@ -1,41 +1,74 @@
 import * as React from 'react'
 import { ComponentType, ReactNode, ReactElement } from 'react'
 
-export type ChildrenFn<P> = (props: P) => ReactNode
+const { values, keys, assign } = Object
 
-export type RPC<Props> = ComponentType<{
-  children?: ChildrenFn<Props>
-}>
+export type ChildrenFn<P = any> = (props: P) => ReactNode
 
-export type Mapper<R> = Record<keyof R, ReactElement<any> | any>
+export type MapperValue =
+  | ReactElement<any>
+  | ChildrenFn<{
+      renderProp?: ChildrenFn
+      [key: string]: any
+    }>
 
-const isValidRenderProp = (prop: ReactNode | ChildrenFn): boolean =>
-  React.isValidElement(prop) || typeof prop === 'function'
+export type Mapper<R> = Record<keyof R, MapperValue>
 
-const Children = ({ children }: any) => children()
+export type RPC<RenderProps, Props = {}> = ComponentType<
+  Props & {
+    children: ChildrenFn<RenderProps>
+  }
+>
+
+const isFn = (val: any): boolean => Boolean(val) && typeof val === 'function'
+
+function omit<R = object>(obj: any, omitProps: string[]): R {
+  const newObj = keys(obj)
+    .filter((key: string): boolean => omitProps.indexOf(key) === -1)
+    .reduce(
+      (returnObj: any, key: string): R => ({ ...returnObj, [key]: obj[key] }),
+      {}
+    )
+
+  return newObj as R
+}
 
-export function adopt<RP extends Record<string, any>>(
+const isValidRenderProp = (prop: ReactNode | ChildrenFn<any>): boolean =>
+  React.isValidElement(prop) || isFn(prop)
+
+export function adopt<RP extends Record<string, any>, P = {}>(
   mapper: Mapper<RP>
-): RPC<RP> {
-  if (!Object.values(mapper).some(isValidRenderProp)) {
+): RPC<RP, P> {
+  if (!values(mapper).some(isValidRenderProp)) {
     throw new Error(
       'The render props object mapper just accept valid elements as value'
     )
   }
 
-  return Object.keys(mapper).reduce(
-    (Component: RPC<RP>, key: keyof RP): RPC<RP> => ({ children, ...rest }) => (
-      <Component>
-        {props => {
-          const renderProp = (childProps: any) =>
-            children(Object.assign({}, props, { [key]: childProps }))
-
-          return typeof mapper[key] === 'function'
-            ? mapper[key](Object.assign({}, rest, props, { renderProp }))
-            : React.cloneElement(mapper[key], { children: renderProp })
-        }}
-      </Component>
-    ),
-    Children
+  const Children: RPC<RP, P> = ({ children, ...rest }: any) =>
+    isFn(children) && children(rest)
+
+  const reducer = (Component: RPC<RP, P>, key: keyof RP): RPC<RP, P> => ({
+    children,
+    ...rest
+  }: {
+    children: ChildrenFn<RP>
+  }) => (
+    <Component {...rest}>
+      {props => {
+        const element: any = mapper[key]
+        const propsWithoutRest = omit<RP>(props, keys(rest))
+
+        const render = (cProps: Partial<RP>) =>
+          isFn(children) &&
+          children(assign({}, propsWithoutRest, { [key]: cProps }))
+
+        return isFn(element)
+          ? React.createElement(element, assign({}, rest, props, { render }))
+          : React.cloneElement(element, null, render)
+      }}
+    </Component>
   )
+
+  return keys(mapper).reduce(reducer, Children)
 }

tslint.json

@@ -11,6 +11,7 @@
     "prefer-object-spread": false,
     "no-console": false,
     "no-shadowed-variable": false,
+    "max-classes-per-file": false,
 
     // Recommended built-in rules
     "no-var-keyword": true,