feat: support different types of arguments for the renderable

This allows to pass several arguments to the renderable function or
an argument that is different from a plain object.

Author: sastan

.size-snapshot.json

@@ -1,31 +1,31 @@
 {
   "dist/react-render-callback.umd.js": {
-    "bundled": 3153,
-    "minified": 1305,
-    "gzipped": 622
+    "bundled": 4399,
+    "minified": 1771,
+    "gzipped": 759
   },
   "dist/react-render-callback.esm.js": {
-    "bundled": 2422,
-    "minified": 1315,
-    "gzipped": 579,
+    "bundled": 2730,
+    "minified": 1567,
+    "gzipped": 649,
     "treeshaked": {
       "rollup": {
-        "code": 269,
-        "import_statements": 101
+        "code": 289,
+        "import_statements": 121
       },
       "webpack": {
-        "code": 1316
+        "code": 1369
       }
     }
   },
   "dist/react-render-callback.cjs.js": {
-    "bundled": 2579,
-    "minified": 1432,
-    "gzipped": 617
+    "bundled": 2903,
+    "minified": 1695,
+    "gzipped": 686
   },
   "dist/react-render-callback.umd.min.js": {
-    "bundled": 3186,
-    "minified": 1291,
-    "gzipped": 611
+    "bundled": 4432,
+    "minified": 1757,
+    "gzipped": 749
   }
 }

README.md

@@ -139,7 +139,7 @@ const render = require('react-render-callback')
 
 since: v1.1.0
 
-> Returns a function (`(props) => ...`) to render `renderable` with `props`.
+> Returns a function (`(...args) => ...`) to render `renderable` with.
 
 ```js
 // esm
@@ -152,6 +152,22 @@ Accepts the same arguments (except `props`) as `render()`. It exists mainly
 to pre-determine (read cache) what type `renderable` is, to prevent these
 checks on every invocation.
 
+Additionally the returned method accepts more than one argument. This allows
+to provide several parameters to the render function.
+
+```js
+const render = createRender((a, b, c) => ({a, b, c}))
+render(1, 2, 3)
+// -> { a: 1, b: 2, c: 3 }
+```
+
+If only one argument is passed and it is a plain object, that argument is merged
+with (if defined) the `defaultProps` of the `renderable`.
+
+**returns**
+
+a function (`(...args) => ...`)
+
 ### Example
 
 ```js

babel.config.js

@@ -3,17 +3,15 @@ module.exports = api => {
 
   const babelConfig = require('kcd-scripts/babel')(api)
 
-  if (process.env.BUILD_FORMAT !== 'umd') {
-    babelConfig.plugins.unshift([
-      '@babel/plugin-transform-runtime',
-      {
-        corejs: 2,
-        helpers: true,
-        regenerator: false,
-        useESModules: false,
-      },
-    ])
-  }
+  babelConfig.plugins.unshift([
+    '@babel/plugin-transform-runtime',
+    {
+      helpers: true,
+      regenerator: false,
+      useESModules:
+        process.env.NODE_ENV !== 'test' && process.env.BUILD_FORMAT !== 'cjs',
+    },
+  ])
 
   if (process.env.NODE_ENV === 'test') {
     babelConfig.plugins.unshift('dynamic-import-node')

other/misc-tests/jest.config.js

@@ -4,4 +4,5 @@ module.exports = Object.assign(jestConfig, {
   displayName: 'react-render-callback',
   roots: ['.'],
   testEnvironment: 'jsdom',
+  transformIgnorePatterns: [],
 })

package.json

@@ -35,7 +35,8 @@
     "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
   },
   "dependencies": {
-    "@babel/runtime-corejs2": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "is-plain-object": "^2.0.4"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.0.0",

rollup.config.js

@@ -3,17 +3,15 @@ module.exports = () => {
 
   const rollupConfig = getRollupConfig()
 
-  if (process.env.BUILD_FORMAT !== 'umd') {
-    replace(rollupConfig.plugins, 'babel', () => {
-      const babel = require('rollup-plugin-babel')
+  replace(rollupConfig.plugins, 'babel', () => {
+    const babel = require('rollup-plugin-babel')
 
-      return babel({
-        exclude: 'node_modules/**',
-        babelrc: true,
-        runtimeHelpers: true,
-      })
+    return babel({
+      exclude: 'node_modules/**',
+      babelrc: true,
+      runtimeHelpers: true,
     })
-  }
+  })
 
   return rollupConfig
 }

src/createRender.js

@@ -1,23 +1,35 @@
 import {isValidElement, createElement, cloneElement} from 'react'
 
-import isReactComponent from './internal/isReactComponent'
+import isPlainObject from 'is-plain-object'
+
+import constant from './internal/constant'
 import falsyToNull from './internal/falsyToNull'
+import isReactComponent from './internal/isReactComponent'
 
 export default (renderable, options) => {
   if (isReactComponent(renderable)) {
     return props => createElement(renderable, props)
   }
 
   if (typeof renderable === 'function') {
-    return falsyToNull(props =>
-      renderable({...renderable.defaultProps, ...props}),
-    )
+    return (...args) => {
+      const element =
+        args.length === 1 && isPlainObject(args[0])
+          ? renderable(
+              renderable.defaultProps
+                ? {...renderable.defaultProps, ...args[0]}
+                : args[0],
+            )
+          : renderable(...args)
+
+      return falsyToNull(element)
+    }
   }
 
   if (options && options.cloneElement && isValidElement(renderable)) {
     return props => cloneElement(renderable, props)
   }
 
   // must be something else
-  return falsyToNull(() => renderable)
+  return constant(falsyToNull(renderable))
 }

src/createRender.test.js

@@ -0,0 +1,39 @@
+import createRender from './createRender'
+
+describe('createRender', () => {
+  it('should invoke function with several args', () => {
+    const result = Symbol('result')
+
+    const renderable = jest.fn()
+    renderable.mockReturnValueOnce(result)
+
+    const render = createRender(renderable)
+
+    expect(render({foo: 'bar'}, 'buz')).toBe(result)
+
+    expect(renderable.mock).toMatchInlineSnapshot(`
+Object {
+  "calls": Array [
+    Array [
+      Object {
+        "foo": "bar",
+      },
+      "buz",
+    ],
+  ],
+  "instances": Array [
+    undefined,
+  ],
+  "invocationCallOrder": Array [
+    1,
+  ],
+  "results": Array [
+    Object {
+      "isThrow": false,
+      "value": Symbol(result),
+    },
+  ],
+}
+`)
+  })
+})

src/internal/constant.js

@@ -0,0 +1 @@
+export default value => () => value

src/internal/falsyToNull.js

@@ -1,7 +1,3 @@
 import isFalsy from './isFalsy'
 
-export default render => props => {
-  const element = render(props)
-
-  return isFalsy(element) ? null : element
-}
+export default value => (isFalsy(value) ? null : value)