Dev tools inject get component name and describe component frame

[bvaughn]

This change is being made to enable DevTools to eagerly patch the console (before a renderer has been attached to the frontend) so that e.g. React Native developers can still get component stacks even if they aren't using the DevTools UI.

We don't strictly need to inject these methods, but since the logic for getting the display name of a component is tied to the renderer version, this simplifies things for DevTools.

At this point, it would be much easier to just inject ReactDebugCurrentFrame and let it create the stacks for us- but that would prevent DevTools from being able to create an owners-only stack, which I think is rather nice to have.

[threepointone]

https://media1.giphy.com/media/3oKHWvPDbQZTAjbXuU/giphy.gif?cid=790b76115d2cfb93422f416a6fabaad8&rid=giphy.gif

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS

[gaearon]

but that would prevent DevTools from being able to create an owners-only stack

Can you elaborate on why?

[gaearon]

since the logic for getting the display name of a component is tied to the renderer version, this simplifies things for DevTools.

Don't DevTools already know how to do it based on a renderer version? Since they need that to show the element tags.

[bvaughn]

but that would prevent DevTools from being able to create an owners-only stack

Can you elaborate on why?

If React just injected ReactDebugCurrentFrame, then the only thing DevTools could use would be getStackAddendum()- which returns a component stack containing all ancestors, not just parents. By injecting a ref to the current Fiber, DevTools can choose what kind of component stack to generate (currently, owners-only).

since the logic for getting the display name of a component is tied to the renderer version, this simplifies things for DevTools.

Don't DevTools already know how to do it based on a renderer version? Since they need that to show the element tags.

Yes, this was me being kind of lazy which is why I haven't merged this PR yet. Had just opened it for discussion purposes and for me to mull it over. Currently the logic for renderer-version-specific stuff all happens after the backend and frontend connection is established. The console needs to be patched during injection in order to append component stacks to React Native when DevTools frontend is not present.

I could refactor the renderer-specific bits somewhat to pull the display name stuff out and do another version-check during injection. It just seemed ... not obviously better. There's something kind of nice about having the exact same naming and frame format as React uses for other e.g. warnings of its own, which injecting ensures us.

[bvaughn]

I will refactor DevTools so these additional methods are not required. It's going to add some complexity to the fiber renderer interface, but I guess it's probably preferable to additional coupling here.

bvaughn/react-devtools-experimental@d9b3037