➕ add with-debugger

packages/with-debugger/demo/index.jsx

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

packages/with-debugger/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@hocs/with-debugger",
+  "library": "withDebugger",
+  "version": "0.1.0",
+  "description": "Debugger HOC for React",
+  "keywords": [
+    "react",
+    "hoc",
+    "recompose",
+    "debug",
+    "debugger"
+  ],
+  "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-debugger/readme.md

@@ -0,0 +1,34 @@
+# :mag: with-debugger
+
+[![npm](https://img.shields.io/npm/v/@hocs/with-debugger.svg?style=flat-square)](https://www.npmjs.com/package/@hocs/with-debugger) [![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-debugger&style=flat-square)](https://david-dm.org/deepsweet/hocs?path=packages/with-debugger)
+
+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 `debugger` into render.
+
+## Install
+
+```
+yarn add recompose @hocs/with-debugger
+```
+
+## Usage
+
+```js
+withDebugger: HigherOrderComponent
+```
+
+```js
+import React from 'react';
+import { compose, withProps } from 'recompose';
+import withDebugger from '@hocs/with-debugger';
+
+const Demo = () => (
+  <h1>Hi</h1>
+);
+
+export default compose(
+  withProps({ a: 1, b: 2, c: 3 }),
+  withDebugger
+)(Demo);
+```

packages/with-debugger/src/index.jsx

@@ -0,0 +1,21 @@
+/* eslint-disable no-debugger */
+import React from 'react';
+import { setDisplayName, wrapDisplayName } from 'recompose';
+
+const withDebugger = (Target) => {
+  if (process.env.NODE_ENV === 'production') {
+    return Target;
+  }
+
+  const WithDebugger = (props) => {
+    debugger;
+
+    return (
+      <Target {...props}/>
+    );
+  };
+
+  return setDisplayName(wrapDisplayName(Target, 'withDebugger'))(WithDebugger);
+};
+
+export default withDebugger;

packages/with-debugger/test/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import withDebugger from '../src/';
+
+const Target = () => null;
+
+describe('withDebugger', () => {
+  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 = withDebugger(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 = withDebugger(Target);
+      const wrapper = mount(
+        <EnhancedTarget/>
+      );
+
+      expect(wrapper.name()).toBe('withDebugger(Target)');
+    });
+  });
+});

readme.md

@@ -40,6 +40,10 @@ Provides safe versions of `setTimeout`, `setInterval`, `requestAnimationFrame` a
 
 Injects `console.log` with props or any custom message into render.
 
+### :mag: [with-debugger](packages/with-debugger)
+
+Injects `debugger` into render.
+
 ### …and more to come
 
 You can [follow me on Twitter](https://twitter.com/deepsweet) for updates.