feat(createRender): new function to pre-determine what type renderable is

which prevents these checks on every invocation

Author: sastan

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/react-render-callback.cjs.js": {
-    "bundled": 1491,
-    "minified": 820,
-    "gzipped": 431
+    "bundled": 1807,
+    "minified": 1032,
+    "gzipped": 471
   },
   "dist/react-render-callback.esm.js": {
-    "bundled": 1363,
-    "minified": 733,
-    "gzipped": 383,
+    "bundled": 1651,
+    "minified": 919,
+    "gzipped": 422,
     "treeshaked": {
       "rollup": {
         "code": 78,
@@ -19,13 +19,13 @@
     }
   },
   "dist/react-render-callback.umd.min.js": {
-    "bundled": 6986,
-    "minified": 3178,
-    "gzipped": 1118
+    "bundled": 7332,
+    "minified": 3333,
+    "gzipped": 1160
   },
   "dist/react-render-callback.umd.js": {
-    "bundled": 11501,
-    "minified": 4775,
-    "gzipped": 1379
+    "bundled": 11847,
+    "minified": 4930,
+    "gzipped": 1417
   }
 }

README.md

@@ -82,7 +82,9 @@ npm install --save react-render-callback
 
 ### API
 
-`render([ renderable [, props [, options ] ] ])`:
+#### `render([ renderable [, props [, options ] ] ])`
+
+> renders the given `renderable` with `props`
 
 - `renderable` (optional): anything that can be rendered like a function, a component, or elements
   - invokes stateless function components (SFC) respecting their
@@ -119,6 +121,24 @@ npm install --save react-render-callback
 - `null` for `false`, `null`, `undefined`, `NaN` and an empty string
 - the value as is for all other values
 
+#### `createRender([ renderable [, options ] ])`
+
+> Returns a function (`(props) => ...`) to render `renderable` with `props`.
+
+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.
+
+This function is available via
+
+```js
+import {createRender} from 'react-render-callback'
+```
+
+```js
+const {createRender} = require('react-render-callback')
+```
+
 ### Example
 
 ```js

other/misc-tests/__tests__/build.js

@@ -10,13 +10,13 @@
  * This file is unable to validate the global export.
  */
 
- /* eslint-disable import/extensions, import/no-unresolved */
+/* eslint-disable import/extensions, import/no-unresolved */
 
-import esImport from '../../../dist/react-render-callback.esm'
+import * as esImport from '../../../dist/react-render-callback.esm'
 
-import cjsImport from '../../../' // picks up the main from package.json
+import * as cjsImport from '../../../' // picks up the main from package.json
 
-import umdImport from '../../../dist/react-render-callback.umd'
+import * as umdImport from '../../../dist/react-render-callback.umd'
 
 // intentionally left out because you shouldn't ever
 // try to require the ES file in CommonJS
@@ -25,21 +25,42 @@ const cjsRequire = require('../../../') // picks up the main from package.json
 const umdRequire = require('../../../dist/react-render-callback.umd')
 
 test(`import render from 'react-render-callback/dist/react-render-callback.esm'`, () => {
-  expect(esImport).toBeInstanceOf(Function)
+  expect(esImport.default).toBeInstanceOf(Function)
+})
+test(`import {render} from 'react-render-callback/dist/react-render-callback.esm'`, () => {
+  expect(esImport.render).toBeInstanceOf(Function)
+})
+test(`import {createRender} from 'react-render-callback/dist/react-render-callback.esm'`, () => {
+  expect(esImport.createRender).toBeInstanceOf(Function)
 })
 
 test(`import render from 'react-render-callback'`, () => {
-  expect(cjsImport).toBeInstanceOf(Function)
+  expect(cjsImport.default).toBeInstanceOf(Function)
+  expect(cjsImport.render).toBeInstanceOf(Function)
+  expect(cjsImport.createRender).toBeInstanceOf(Function)
+})
+
+test(`import {render} from 'react-render-callback'`, () => {
+  expect(cjsImport.render).toBeInstanceOf(Function)
+})
+test(`import {createRender} from 'react-render-callback'`, () => {
+  expect(cjsImport.createRender).toBeInstanceOf(Function)
 })
 
 test(`import render from 'react-render-callback/dist/react-render-callback.umd'`, () => {
-  expect(umdImport).toBeInstanceOf(Function)
+  expect(umdImport.default).toBeInstanceOf(Function)
+  expect(umdImport.render).toBeInstanceOf(Function)
+  expect(umdImport.createRender).toBeInstanceOf(Function)
 })
 
 test(`const render = require('react-render-callback')`, () => {
   expect(cjsRequire).toBeInstanceOf(Function)
+  expect(cjsRequire.render).toBeInstanceOf(Function)
+  expect(cjsRequire.createRender).toBeInstanceOf(Function)
 })
 
 test(`const render = require('react-render-callback/dist/react-render-callback.umd')`, () => {
   expect(umdRequire).toBeInstanceOf(Function)
+  expect(umdRequire.render).toBeInstanceOf(Function)
+  expect(umdRequire.createRender).toBeInstanceOf(Function)
 })

src/createRender.js

@@ -0,0 +1,23 @@
+import {isValidElement, createElement, cloneElement} from 'react'
+
+import isReactComponent from './internal/isReactComponent'
+import maybeFalsy from './internal/maybeFalsy'
+
+export default (renderable, options) => {
+  if (isReactComponent(renderable)) {
+    return props => createElement(renderable, props)
+  }
+
+  if (typeof renderable === 'function') {
+    return maybeFalsy(props =>
+      renderable({...renderable.defaultProps, ...props}),
+    )
+  }
+
+  if (options && options.cloneElement && isValidElement(renderable)) {
+    return props => cloneElement(renderable, props)
+  }
+
+  // must be something else
+  return maybeFalsy(() => renderable)
+}

src/esm-entry.js

@@ -0,0 +1,4 @@
+export {default} from './render'
+
+export {default as render} from './render'
+export {default as createRender} from './createRender'

src/esm-entry.test.js

@@ -0,0 +1,16 @@
+import render from './render'
+import createRender from './createRender'
+
+import * as Export from './esm-entry'
+
+test('the default export is render', () => {
+  expect(Export.default).toBe(render)
+})
+
+test('named export render', () => {
+  expect(Export.render).toBe(render)
+})
+
+test('named export createRender', () => {
+  expect(Export.createRender).toBe(createRender)
+})

src/index.js

@@ -1 +1,8 @@
-export {default} from './render'
+import render from './render'
+
+import createRender from './createRender'
+
+render.render = render
+render.createRender = createRender
+
+export default render

src/index.test.js

@@ -1,7 +1,16 @@
 import render from './render'
+import createRender from './createRender'
 
-import defaultExport from '.'
+import Export from '.'
 
 test('the default export is render', () => {
-  expect(defaultExport).toBe(render)
-})
+  expect(Export).toBe(render)
+})
+
+test('named export render', () => {
+  expect(Export.render).toBe(render)
+})
+
+test('named export createRender', () => {
+  expect(Export.createRender).toBe(createRender)
+})

src/internal/isFalsy.js

@@ -0,0 +1,5 @@
+export default value =>
+  value == null ||
+  value === false ||
+  value === '' ||
+  (typeof value === 'number' && isNaN(value))

src/internal/maybeFalsy.js

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