Merge pull request cerebral#409 from darkowic/406-displayName-in-devtools

fix(react): fix display name in devtools for react cerebral#406

Author: christianalfoni

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

@@ -27,6 +27,25 @@ type Omit<T, K extends keyof T> = Pick<
     { [P in K]: never } & { [x: string]: never; [x: number]: never })[keyof T]
 >
 
+function getFiberType(component) {
+  if (component.type) {
+    // React.memo
+    return getFiberType(component.type)
+  }
+  // React.forwardRef
+  return component.render || component
+}
+
+// Inspired from https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/backend/renderer.js
+function getDisplayName(component): string {
+  const type = getFiberType(component);
+  return (
+    type.displayName ||
+    type.name ||
+    'Anonymous'
+  );
+}
+
 export interface IConnect<Config extends IConfiguration> {
   overmind: {
     state: Overmind<Config>['state']
@@ -49,8 +68,8 @@ const context = react.createContext<Overmind<IConfiguration>>({} as Overmind<
 >)
 let nextComponentId = 0
 
-export const Provider: React.ProviderExoticComponent<
-  React.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
+export const Provider: react.ProviderExoticComponent<
+  react.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
 > = context.Provider
 
 function useForceRerender() {
@@ -137,7 +156,7 @@ const useState =  <Config extends IConfiguration>(): Overmind<Config>['state'] =
     })
   } else {
     const component = useCurrentComponent()
-    const name = component.name
+    const name = getDisplayName(component)
     component.__componentId =
       typeof component.__componentId === 'undefined'
         ? nextComponentId++
@@ -284,7 +303,7 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
     component
   )=> {
     let componentInstanceId = 0
-    const name = component.name
+    const name = component.displayName || component.name || 'Anonymous';
     const populatedComponent = component as any
     populatedComponent.__componentId =
       typeof populatedComponent.__componentId === 'undefined'
@@ -470,7 +489,7 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
 
       Object.defineProperties(HOC, {
         name: {
-          value: 'Connect' + (component.displayName || component.name || ''),
+          value: 'Connect' + name,
         },
       })