feat: add debug hoc

docs/README.md

@@ -14,6 +14,7 @@
 ## `Higher-order-components`
 * <a href="#branchtest-left-rightidentity">`branch`</a>
 * <a href="#connectobsobsmapper">`connectObs`</a>
+* <a href="#debuglabel-selector">`debug`</a>
 * <a href="#defaultpropsdefaultprops">`defaultProps`</a>
 * <a href="#flattenproppropname">`flattenProp`</a>
 * <a href="#getcontextcontexttypes">`getContext`</a>
@@ -161,6 +162,34 @@ connectObs(({change$, value$}) => ({
 
 <!-- div -->
 
+<h3 id="debuglabel-selector"><code>debug(label, selector)</code></h3>
+[&#x24C8;](https://github.com/neoziro/recompact/blob/1.0.2/src/debug.js#L23 "View in source") [&#x24C9;][1]
+
+Display the flow of props.
+Very useful for debugging higher-order component stack.
+
+#### Arguments
+1. `label` *(&#42;)*: A label displayed in console.
+2. `selector` *(Function)*: A props selector.
+
+#### Returns
+*(HigherOrderComponent)*: Returns a function that take a Component.
+
+#### Example
+```js
+recompact.compose(
+  recompact.withProps({ foo: 'bar' }),
+  recompact.debug(),
+  recompact.renameProp('foo', 'className'),
+  recompact.debug(),
+)('input')
+```
+---
+
+<!-- /div -->
+
+<!-- div -->
+
 <h3 id="defaultpropsdefaultprops"><code>defaultProps(defaultProps)</code></h3>
 [&#x24C8;](https://github.com/neoziro/recompact/blob/1.0.2/src/defaultProps.js#L19 "View in source") [&#x24C9;][1]
 

src/__tests__/debug.test.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+import React from 'react'
+import { shallow } from 'enzyme'
+import { Dummy } from './utils'
+import { compose, debug, withProps } from '../'
+
+describe('debug', () => {
+  let consoleLog
+
+  beforeEach(() => {
+    consoleLog = console.log
+    console.log = jest.fn()
+  })
+
+  afterEach(() => {
+    console.log = consoleLog
+  })
+
+  it('should log compose', () => {
+    const Component = compose(
+      withProps({ a: 'b' }),
+      debug(),
+      withProps({ c: 'd' }),
+      debug(),
+    )(Dummy)
+
+    shallow(<Component />).find(Dummy)
+    expect(console.log).toHaveBeenCalledTimes(2)
+    expect(console.log.mock.calls[0]).toEqual(['withProps(Component)', { a: 'b' }])
+    expect(console.log.mock.calls[1]).toEqual(['Dummy', { a: 'b', c: 'd' }])
+  })
+})

src/debug.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-param-reassign, no-console */
+import createEagerFactory from './createEagerFactory'
+import getDisplayName from './getDisplayName'
+
+/**
+ * Display the flow of props.
+ * Very useful for debugging higher-order component stack.
+ *
+ * @static
+ * @category Higher-order-components
+ * @param {*} label A label displayed in console.
+ * @param {Function} selector A props selector.
+ * @returns {HigherOrderComponent} Returns a function that take a Component.
+ * @example
+ *
+ * recompact.compose(
+ *   recompact.withProps({ foo: 'bar' }),
+ *   recompact.debug(),
+ *   recompact.renameProp('foo', 'className'),
+ *   recompact.debug(),
+ * )('input')
+ */
+const debug = (label, selector = x => x) => (BaseComponent) => {
+  const factory = createEagerFactory(BaseComponent)
+  label = label || getDisplayName(BaseComponent)
+  return (props) => {
+    console.log(label, selector(props))
+    return factory(props)
+  }
+}
+
+export default debug

src/index.js

@@ -8,6 +8,7 @@ import createEagerFactory from './createEagerFactory'
 import createEventHandler from './createEventHandler'
 import createHelper from './createHelper'
 import createSink from './createSink'
+import debug from './debug'
 import defaultProps from './defaultProps'
 import flattenProp from './flattenProp'
 import getContext from './getContext'
@@ -59,6 +60,7 @@ export {
   createEventHandler,
   createHelper,
   createSink,
+  debug,
   defaultProps,
   flattenProp,
   getContext,
@@ -110,6 +112,7 @@ export default {
   createEventHandler,
   createHelper,
   createSink,
+  debug,
   defaultProps,
   flattenProp,
   getContext,

webpack.config.js

@@ -13,6 +13,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        exclude: /node_modules/,
       },
     ],
   },