fix(displayname): refactor memo wrapper on functional components

Add Readme for React Dev Tools

README.md

@@ -407,6 +407,32 @@ This is not necessary if you use React Router 4.4+. You can find more details an
 </details>
 <p></p>
 
+<details>
+<summary>Usage with React Developer Tools.</summary>
+<p></p>
+
+If you want React Developer Tools to recognize your reactive view components with names, you have to pass a **named component** to the `view` wrapper function instead of an anonymous one.
+
+```jsx
+import React from 'react';
+import { view, store } from 'react-easy-state';
+import Table from 'rc-table';
+import cloneDeep from 'lodash/cloneDeep';
+
+const user = store({
+  name: 'Rick',
+});
+
+const componentName = () => (
+  <div>{user.name}</div>
+);
+
+export default view(componentName);
+```
+
+</details>
+<p></p>
+
 <details>
 <summary>Passing nested data to third party components.</summary>
 <p></p>

__tests__/staticProps.test.jsx

@@ -0,0 +1,115 @@
+/* eslint-disable react/forbid-foreign-prop-types */
+/* eslint-disable no-multi-assign */
+import React, { Component } from 'react';
+import { render, cleanup } from '@testing-library/react/pure';
+// eslint-disable-next-line import/no-unresolved
+import { view } from 'react-easy-state';
+import PropTypes from 'prop-types';
+
+describe('static props', () => {
+  afterEach(cleanup);
+
+  test('view() should proxy defaultProps for class components', () => {
+    class MyCustomCompName extends Component {
+      render() {
+        return <div>{this.props.name}</div>;
+      }
+    }
+
+    MyCustomCompName.defaultProps = {
+      name: 'Bob',
+    };
+
+    const WrappedComp = view(MyCustomCompName);
+    const { container } = render(<WrappedComp />);
+    expect(container).toHaveTextContent('Bob');
+  });
+
+  test('view() should proxy defaultProps for functional components', () => {
+    const MyCustomCompName = props => {
+      return <div>{props.name}</div>;
+    };
+
+    MyCustomCompName.defaultProps = {
+      name: 'Bob',
+    };
+
+    const WrappedComp = view(MyCustomCompName);
+    const { container } = render(<WrappedComp />);
+    expect(container).toHaveTextContent('Bob');
+  });
+
+  test('view() should proxy propTypes for class components', () => {
+    class MyCustomCompName extends Component {
+      render() {
+        return <div>{this.props.name}</div>;
+      }
+    }
+
+    MyCustomCompName.propTypes = {
+      name: PropTypes.string.isRequired,
+    };
+
+    const ViewComp = view(MyCustomCompName);
+
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(message =>
+        expect(message.indexOf('Failed prop type')).not.toBe(-1),
+      );
+    render(<ViewComp number="Bob" />);
+    expect(errorSpy).toHaveBeenCalled();
+    errorSpy.mockRestore();
+  });
+
+  test('view() should proxy propTypes for functional components', () => {
+    const MyCustomCompName = props => {
+      return <div>{props.number}</div>;
+    };
+
+    MyCustomCompName.propTypes = {
+      number: PropTypes.number.isRequired,
+    };
+
+    const ViewComp = view(MyCustomCompName);
+
+    const errorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(message =>
+        expect(message.indexOf('Failed prop type')).not.toBe(-1),
+      );
+    render(<ViewComp number="Bob" />);
+    expect(errorSpy).toHaveBeenCalled();
+    errorSpy.mockRestore();
+  });
+
+  test('view() should proxy static methods', () => {
+    class Comp extends Component {
+      static getDerivedStateFromError() {}
+
+      static customMethod() {}
+    }
+
+    const ViewComp = view(Comp);
+    expect(ViewComp.getDerivedStateFromError).toBe(
+      Comp.getDerivedStateFromError,
+    );
+    expect(ViewComp.customMethod).toBe(Comp.customMethod);
+  });
+
+  test('view() should proxy static getters', () => {
+    class Comp extends Component {
+      static get defaultProp() {
+        return { key: 'value' };
+      }
+
+      static get customProp() {
+        return { key: 'hello' };
+      }
+    }
+
+    const ViewComp = view(Comp);
+    expect(ViewComp.defaultProps).toEqual(Comp.defaultProps);
+    expect(ViewComp.customProp).toEqual(Comp.customProp);
+  });
+});

src/view.js

@@ -74,8 +74,6 @@ export function view(Comp) {
         isInsideFunctionComponent = false;
       }
     };
-    ReactiveComp.displayName = Comp.displayName || Comp.name;
-    ReactiveComp = memo(ReactiveComp);
   } else {
     const BaseComp = isStatelessComp ? Component : Comp;
     // a HOC which overwrites render, shouldComponentUpdate and componentWillUnmount
@@ -170,5 +168,7 @@ export function view(Comp) {
     });
   }
 
-  return ReactiveComp;
+  return isStatelessComp && hasHooks
+    ? memo(ReactiveComp)
+    : ReactiveComp;
 }