Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React DevTools 5.3.1 -> 6.0.0 #31058

Merged
merged 1 commit into from
Sep 25, 2024
Merged

React DevTools 5.3.1 -> 6.0.0 #31058

merged 1 commit into from
Sep 25, 2024
+42 −10

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Sep 25, 2024

Full list of changes:

@vercel Vercel
Copy link

vercel bot commented Sep 25, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 25, 2024 11:54am

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 25, 2024
@hoxyq hoxyq merged commit d2e9b9b into facebook:main Sep 25, 2024
184 checks passed
@hoxyq hoxyq deleted the react-devtools/release/6.0.0 branch September 25, 2024 13:38
@vercel-release-bot vercel-release-bot mentioned this pull request Sep 25, 2024
Closed
@daniharo
Copy link

Is #28584 handled in the update?

@vercel-release-bot vercel-release-bot mentioned this pull request Sep 25, 2024
Merged
@piotrski
Copy link

piotrski commented Oct 9, 2024

@hoxyq just a heads-up: it seems there was an issue with the release to the Chrome Web Store. The latest version of React Dev Tools (5.3.1 from 7/3/2024) is still the only one available there. The new version is currently available only on Firefox and Edge.

@hoxyq
Copy link
Contributor Author

hoxyq commented Oct 9, 2024

@hoxyq just a heads-up: it seems there was an issue with the release to the Chrome Web Store. The latest version of React Dev Tools (5.3.1 from 7/3/2024) is still the only one available there. The new version is currently available only on Firefox and Edge.

I am aware of this, and actively working on unblocking this. We have some issues with our account at Chrome Extensions store, which we are trying to resolve ASAP.

@hoxyq
Copy link
Contributor Author

hoxyq commented Oct 14, 2024

@hoxyq just a heads-up: it seems there was an issue with the release to the Chrome Web Store. The latest version of React Dev Tools (5.3.1 from 7/3/2024) is still the only one available there. The new version is currently available only on Firefox and Edge.

I am aware of this, and actively working on unblocking this. We have some issues with our account at Chrome Extensions store, which we are trying to resolve ASAP.

It is published now.

@CH1NRU5T
Copy link

Did this remove the getSourceForFiber function from __REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1), because I am not able to access it right now.

Earlier I used to do this:

__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1).getSourceForFiber(<some fiber here>);

If yes, what would be the alternative to get the source for a react fiber?

@hoxyq
Copy link
Contributor Author

hoxyq commented Oct 16, 2024 •
edited
Loading

Did this remove the getSourceForFiber function from __REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1), because I am not able to access it right now.

Earlier I used to do this:

__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1).getSourceForFiber(<some fiber here>);

If yes, what would be the alternative to get the source for a react fiber?

Yes, it did. Technically, React DevTools hook should not be treated as public API, so any breaking changes are expected.
How do you use it? And what exactly do you need: JSX callsite or the component or component's definition (render function)?

The main reason for removal is that React DevTools now operates with its own instance of a Node, which is not necessarily Fiber. This is done to support Server Components.

@piotrski
Copy link

It was surely used by https://www.locatorjs.com/ to open the component source using the option + click shortcut

@CH1NRU5T
Copy link

CH1NRU5T commented Oct 16, 2024 •
edited
Loading

@piotrski But locatorjs works only on dev environment (they use _debugSource). I need to get sources of an element on the deployed react website (even if the sources are minifed, because I have sourcemaps to decode them).

@CH1NRU5T
Copy link

CH1NRU5T commented Oct 16, 2024 •
edited
Loading

@hoxyq

Did this remove the getSourceForFiber function from __REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1), because I am not able to access it right now.
Earlier I used to do this:

__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1).getSourceForFiber(<some fiber here>);

If yes, what would be the alternative to get the source for a react fiber?

Yes, it did. Technically, React DevTools hook should not be treated as public API, so any breaking changes are expected. How do you use it? And what exactly do you need: JSX callsite or the component or component's definition (render function)?

The main reason for removal is that React DevTools now operates with its own instance of a Node, which is not necessarily Fiber. This is done to support Server Components.

I'm building an AI agent to add event listeners to your frontend code, just by selecting an element on your deployed website. For this to work, there is prerequisite that you need to upload the code's sourcemaps.

Earlier I used to do it like this

__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces.get(1).getSourceForFiber(e.__fiber);

With this I used to get the minified sources, and then using sourcemaps, I used to decode the original location of the DOM node.

Essentially what I need is the jsx callsite, when the element is being called and rendered in the codebase.

@hoxyq
Copy link
Contributor Author

hoxyq commented Oct 16, 2024

Essentially what I need is the jsx callsite, when the element is being called and rendered in the codebase.

This will only be available in React 19.1+ (this is currently in experimental).

I am okay with adding some public API to React DevTools, something like getHostElementSource(element: HostInstance): string, where element is HTMLElement for Web (e. g. with react-dom renderer), but probably in another form.

But I don't think that this should be part of the extension code. Basically, your product only works if user has React DevTools installed.

@CH1NRU5T
Copy link

CH1NRU5T commented Oct 16, 2024 •
edited
Loading

@hoxyq
Yes, you are right. Currently, my product only works if the user has React DevTools installed.
Can I extract the source of a DOM node currently without depending on the React Devtools extension?
If yes, please point me to where I can look to implement this in my code.

@hoxyq
Copy link
Contributor Author

hoxyq commented Oct 16, 2024

@hoxyq Yes, you are right. Currently, my product only works if the user has React DevTools installed. Can I extract the source of a DOM node currently without depending on the React Devtools extension? If yes, please point me to where I can look to implement this in my code.

Yeah, you can try to reverse-engineer the whole thing. But you have to account for different version of React: they might have different internals and constants.

I would start from getSourceForFiber, which changed in e44685e.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@hoxyq @daniharo @piotrski @CH1NRU5T @facebook-github-bot