Merge pull request cerebral#107 from cerebral/preserveComponentName

feat(overmind-react): preserve component name on connect

Author: christianalfoni

packages/node_modules/overmind-react/src/index.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
-import App, { TConfig, TAction } from 'overmind'
+
+import App, { TAction, TConfig } from 'overmind'
 import createConnect, { TConnect } from './'
 
 describe('React', () => {
@@ -94,6 +95,7 @@ describe('React', () => {
     expect(didCallAction).toBe(true)
     expect(tree).toMatchSnapshot()
   })
+
   test('should connect reactions to components', () => {
     expect.assertions(2)
     let reactionCount = 0
@@ -146,4 +148,23 @@ describe('React', () => {
     app.actions.doThis()
     expect(reactionCount).toBe(1)
   })
+
+  test('should preserve component name', () => {
+    const app = new App({})
+    const connect = createConnect(app)
+
+    class FooComponent extends React.Component<TConnect<typeof app>> {
+      render() {
+        return <h1>hop</h1>
+      }
+    }
+    function BarComponent() {
+      return <div />
+    }
+
+    const ConnectedFoo = connect(FooComponent)
+    const ConnectedBar = connect(BarComponent)
+    expect(ConnectedFoo.name).toBe('FooComponent')
+    expect(ConnectedBar.name).toBe('BarComponent')
+  })
 })

packages/node_modules/overmind-react/src/index.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import OvermindApp, { EventType } from 'overmind'
 
 export type IReactComponent<P = any> =
@@ -97,7 +98,7 @@ export default <App extends OvermindApp<any, any>>(app: App) => {
       }
     }
 
-    return class extends React.PureComponent<
+    const klass = class extends React.PureComponent<
       Omit<Props & TConnect<App>, keyof TConnect<App>>
     > {
       __mutationListener: any
@@ -191,5 +192,8 @@ export default <App extends OvermindApp<any, any>>(app: App) => {
         return this.renderStatelessComponent()
       }
     }
+
+    Object.defineProperties(klass, { name: { value: Component.displayName || Component.name || '' } })
+    return klass
   }
 }