Skip to content

Commit d7cc533

Browse files
committed
fix(react): fix display name in devtools for react cerebral#406
1 parent ad8c197 commit d7cc533

File tree

1 file changed

+24
-5
lines changed
  • packages/node_modules/overmind-react/src

1 file changed

+24
-5
lines changed

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

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,25 @@ type Omit<T, K extends keyof T> = Pick<
2727
{ [P in K]: never } & { [x: string]: never; [x: number]: never })[keyof T]
2828
>
2929

30+
function getFiberType(component) {
31+
if (component.type) {
32+
// React.memo
33+
return getFiberType(component.type)
34+
}
35+
// React.forwardRef
36+
return component.render || component
37+
}
38+
39+
// Inspired from https://github.com/facebook/react/blob/master/packages/react-devtools-shared/src/backend/renderer.js
40+
function getDisplayName(component): string {
41+
const type = getFiberType(component);
42+
return (
43+
type.displayName ||
44+
type.name ||
45+
'Anonymous'
46+
);
47+
}
48+
3049
export interface IConnect<Config extends IConfiguration> {
3150
overmind: {
3251
state: Overmind<Config>['state']
@@ -49,8 +68,8 @@ const context = react.createContext<Overmind<IConfiguration>>({} as Overmind<
4968
>)
5069
let nextComponentId = 0
5170

52-
export const Provider: React.ProviderExoticComponent<
53-
React.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
71+
export const Provider: react.ProviderExoticComponent<
72+
react.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
5473
> = context.Provider
5574

5675
const useForceRerender = () => {
@@ -118,7 +137,7 @@ const useState = <Config extends IConfiguration>(): Overmind<Config>['state'] =
118137
tree.track(forceRerender)
119138
} else {
120139
const component = useCurrentComponent()
121-
const name = component.name
140+
const name = getDisplayName(component)
122141
component.__componentId =
123142
typeof component.__componentId === 'undefined'
124143
? nextComponentId++
@@ -251,7 +270,7 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
251270
component
252271
)=> {
253272
let componentInstanceId = 0
254-
const name = component.name
273+
const name = component.displayName || component.name || 'Anonymous';
255274
const populatedComponent = component as any
256275
populatedComponent.__componentId =
257276
typeof populatedComponent.__componentId === 'undefined'
@@ -437,7 +456,7 @@ export const createConnect: <ThisConfig extends IConfiguration>() => <Props>(com
437456

438457
Object.defineProperties(HOC, {
439458
name: {
440-
value: 'Connect' + (component.displayName || component.name || ''),
459+
value: 'Connect' + name,
441460
},
442461
})
443462

0 commit comments

Comments
 (0)