➕ add with-log

packages/with-log/demo/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { compose, withProps } from 'recompose';
+
+import withLog from '../src/';
+
+const Demo = () => (
+  <h1>Hi</h1>
+);
+
+export default compose(
+  withProps({ a: 1, b: 2, c: 3 }),
+  withLog(({ a }) => `a = ${a}`)
+)(Demo);

packages/with-log/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@hocs/with-log",
+  "library": "withLog",
+  "version": "0.1.0",
+  "description": "Console log HOC for React",
+  "keywords": [
+    "react",
+    "hoc",
+    "recompose",
+    "log",
+    "debug"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "dist/",
+    "es/",
+    "lib/"
+  ],
+  "repository": "deepsweet/hocs",
+  "author": "Kir Belevich <kir@belevi.ch> (https://github.com/deepsweet)",
+  "license": {
+    "type": "MIT",
+    "url": "https://github.com/deepsweet/hocs/blob/master/license.md"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^15.6.1",
+    "recompose": "^0.24.0"
+  }
+}

packages/with-log/readme.md

@@ -0,0 +1,38 @@
+# :mag: with-log
+
+[![npm](https://img.shields.io/npm/v/@hocs/with-log.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-log) [![ci](https://img.shields.io/travis/deepsweet/hocs/master.svg?style=flat-square)](https://travis-ci.org/deepsweet/hocs) [![coverage](https://img.shields.io/codecov/c/github/deepsweet/hocs/master.svg?style=flat-square)](https://codecov.io/github/deepsweet/hocs) [![deps](https://david-dm.org/deepsweet/hocs.svg?path=packages/with-log&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-log)
+
+Part of a [collection](https://github.com/deepsweet/hocs) of Higher-Order Components for React, especially useful with [Recompose](https://github.com/acdlite/recompose).
+
+Injects `console.log` with props or any custom message into render.
+
+## Install
+
+```
+yarn add recompose @hocs/with-log
+```
+
+## Usage
+
+```js
+withLog(
+  getMessageToLog?: (props: Object) => any
+): HigherOrderComponent
+```
+
+```js
+import React from 'react';
+import { compose, withProps } from 'recompose';
+import withLog from '@hocs/with-log';
+
+const Demo = () => (
+  <h1>Hi</h1>
+);
+
+export default compose(
+  withProps({ a: 1, b: 2, c: 3 }),
+  withLog(({ a }) => `a = ${a}`)
+)(Demo);
+```
+
+:tv: [Check out live demo](https://www.webpackbin.com/bins/-KrMI90M0LSFI68m7gtN).

packages/with-log/src/index.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { setDisplayName, wrapDisplayName } from 'recompose';
+
+const withLog = (getMessageToLog = (props) => props) => (Target) => {
+  if (process.env.NODE_ENV === 'production') {
+    return Target;
+  }
+
+  const displayName = wrapDisplayName(Target, 'withLog');
+
+  const WithLog = (props) => {
+    console.log(`${displayName}:`, getMessageToLog(props));
+
+    return (
+      <Target {...props}/>
+    );
+  };
+
+  return setDisplayName(displayName)(WithLog);
+};
+
+export default withLog;

packages/with-log/test/index.jsx

@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { mount } from 'enzyme';
+
+import withLog from '../src/';
+
+const Target = () => null;
+
+describe('withLog', () => {
+  let origConsoleLog = null;
+
+  beforeAll(() => {
+    origConsoleLog = console.log;
+    console.log = jest.fn();
+  });
+
+  afterEach(() => {
+    console.log.mockClear();
+  });
+
+  afterAll(() => {
+    console.log = origConsoleLog;
+  });
+
+  it('should log all props if no argument was passed in', () => {
+    const EnhancedTarget = withLog()(Target);
+
+    mount(
+      <EnhancedTarget a={1} b={2} c={3}/>
+    );
+
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledWith('withLog(Target):', { a: 1, b: 2, c: 3 });
+  });
+
+  it('should call provided `getMessageToLog` with props and log its result', () => {
+    const mockGetMessageToLog = jest.fn(({ a }) => `a = ${a}`);
+    const EnhancedTarget = withLog(mockGetMessageToLog)(Target);
+
+    mount(
+      <EnhancedTarget a={1} b={2} c={3}/>
+    );
+
+    expect(mockGetMessageToLog).toHaveBeenCalledTimes(1);
+    expect(mockGetMessageToLog).toHaveBeenCalledWith({ a: 1, b: 2, c: 3 });
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledWith('withLog(Target):', 'a = 1');
+  });
+
+  describe('env', () => {
+    const origNodeEnv = process.env.NODE_ENV;
+
+    afterAll(() => {
+      process.env.NODE_ENV = origNodeEnv;
+    });
+
+    it('should pass Target through in production env', () => {
+      process.env.NODE_ENV = 'production';
+
+      const EnhancedTarget = withLog()(Target);
+      const wrapper = mount(
+        <EnhancedTarget/>
+      );
+
+      expect(wrapper.is(Target)).toBe(true);
+    });
+
+    it('should wrap display name in non-production env', () => {
+      process.env.NODE_ENV = 'test';
+
+      const EnhancedTarget = withLog()(Target);
+      const wrapper = mount(
+        <EnhancedTarget/>
+      );
+
+      expect(wrapper.name()).toBe('withLog(Target)');
+    });
+  });
+});

readme.md

@@ -36,6 +36,10 @@ Decouples [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/AP
 
 Provides safe versions of `setTimeout`, `setInterval`, `requestAnimationFrame` and `requestIdleCallback` which will be cleared/cancelled automatically before component is unmounted.
 
+### :mag: [with-log](packages/with-log)
+
+Injects `console.log` with props or any custom message into render.
+
 ### …and more to come
 
 You can [follow me on Twitter](https://twitter.com/deepsweet) for updates.