search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.62k stars 46.43k forks source link

Include DevTools as Public API #4593

Open sebmarkbage opened 9 years ago

sebmarkbage commented 9 years ago

The idea is to have a multi-version extension that allow you to attach a "debugger" to a running React instance. This debugger protocol injects intercepted functions into a particular version of React which exposes development hooks.

Effectively this: https://github.com/facebook/react-devtools/tree/devtools-next/backend/integration

This is not intended to expose stateful reflection APIs in production use since it will negatively affect performance.

gre commented 8 years ago

+1 this is really interesting. I'm currently developing a tool that intends to be a react devtools extension so I would love to have this possible.

Any WIP on this? Maybe I can help. However I don't have a good knowledge of the React source code and where to start looking at.

gaearon commented 8 years ago

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?

sebmarkbage commented 8 years ago

Yes please. The new devtools was designed with this in mind.

We would like to move the integration part into React's core and expose that API.

https://github.com/facebook/react-devtools/tree/master/backend/integration

The key to this design is that React should not need to maintain any state itself. Other than the component state. The API could force a complete rerender to get a replay of changes but the API should not require React keeping the previous render in memory.

On Oct 8, 2015, at 2:35 PM, Dan Abramov notifications@github.com wrote:

I'm very interested in this.

With the advent of stateless components there's no easy way for my library to get internal instance of the root component to traverse the tree and force update it.

The important part for me is that multiple tools should be able to hook up to this API. Both DevTools and my library should be able to register independently without interfering with each other.

Would you like me to propose a straw man API based on what DevTools uses now?

— Reply to this email directly or view it on GitHub.

kentcdodds commented 8 years ago

I'm not certain whether this can be done in a way that doesn't impact performance, but I thought I'd mention this for what it's worth. It'd be really nice to be able to debug a production react application. Angular does this by setting window.name to something and refreshing the browser. Angular then keys off of this to add the necessary debug information. If there's a way to do something similar without impacting performance for a "non-debug" mode that would be cool. My 2¢

j-stuckey commented 5 years ago

Is this still something that is being discussed? How's it coming along? I'm not familiar with the React codebase really but I would love to contribute and I'm searching for a place to start that I may understand.