From faad66ba30d418a41f10f8a3e0f90e259c84a070 Mon Sep 17 00:00:00 2001
From: mbasso <mbasso96@gmail.com>
Date: Mon, 9 Jan 2017 21:16:07 +0100
Subject: [PATCH] Add displayName

---
 README.md             | 29 +++++++++++++++++++++++++++++
 src/classInjector.js  |  2 +-
 test/classInjector.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6cfa2a9..0ee0fa3 100755
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ You can load styles in the way that you prefer but is important to keep in mind
 For example, this is a valid one `.⚛App`.
 So, pay attention that components' names and css selectors always match.
 This is particular important if you have css-modules that modifies the original names, or code obfuscation.
+
 The first ones for example need a syntax like this:
 
 ```css
@@ -76,6 +77,28 @@ The first ones for example need a syntax like this:
 }
 ```
 
+And the second one, considering for example a minification process with webpack's UglifyJsPlugin (see [here](https://github.com/facebook/react/issues/4915) for more information),
+need a component with a displayName attribute like this:
+
+```js
+class ComponentName extends React.Component {
+
+	static propTypes = {
+		// propTypes...
+	}
+
+	// this
+	static displayName = 'ComponentName';
+
+	render() {
+		// render here...
+	}
+}
+
+// or this
+// ComponentName.displayName = 'ComponentName';
+```
+
 
 ### Adapting based on props
 
@@ -84,6 +107,9 @@ If you want to set styles based on props, you can do it in 2 ways:
 - Set inline styles, as we can see in this example:
 ```js
 class Button extends React.Component {
+
+	static displayName = 'Button';
+
 	render() {
 		return (
 			<button
@@ -103,6 +129,9 @@ class Button extends React.Component {
 import styles from './Button.css';
 
 export default class Button extends React.Component {
+
+	static displayName = 'Button';
+
 	render() {
 		return (
 			<button
diff --git a/src/classInjector.js b/src/classInjector.js
index 041ec8c..752dc23 100644
--- a/src/classInjector.js
+++ b/src/classInjector.js
@@ -11,7 +11,7 @@ export default function initClassInjector() {
       const component = originalRender.apply(this);
       let result = component;
       if (component) {
-        const classToInject = `⚛${this.constructor.name}`;
+        const classToInject = `⚛${this.constructor.displayName || this.constructor.name}`;
         if (typeof component.type === 'string') {
           result = React.cloneElement(
             component,
diff --git a/test/classInjector.js b/test/classInjector.js
index 69b9099..1266375 100644
--- a/test/classInjector.js
+++ b/test/classInjector.js
@@ -87,4 +87,32 @@ describe('Css class injector', () => {
       className: '⚛Foo',
     });
   });
+
+  it('should inject displayName', () => {
+    //eslint-disable-next-line
+    class Foo extends React.Component {
+      static propTypes = {
+        style: React.PropTypes.string,
+        className: React.PropTypes.string,
+      }
+
+      static displayName = 'Bar';
+
+      render() {
+        return (
+          <div {...this.props}>
+            <p></p>
+          </div>
+        );
+      }
+    }
+
+    const renderer = ReactTestUtils.createRenderer();
+    renderer.render(<Foo style="bar" />);
+    const result = renderer.getRenderOutput();
+    expect(result.props).toMatch({
+      style: 'bar',
+      className: '⚛Bar ',
+    });
+  });
 });