React DevTools 5.3.1 -> 6.0.0

[hoxyq]

Full list of changes:

• refactor: data source for errors and warnings tracking is now in Store (hoxyq in #31010)
• fix: consider alternate as a key for componentLogsEntry when inspecting raw fiber instance (hoxyq in #31009)
• Fix: profiling crashes [DevTools Bug] getCommitTree(): Invalid commit "2" for root "1". There are only "1" commits.  #30661 [DevTools Bug] Could not find node with id "464" in commit tree #28838 (EdmondChuiHW in #31024)
• chore: remove using local storage for persisting console settings on the frontend (hoxyq in #31002)
• feat: display message if user ended up opening hook script (hoxyq in #31000)
• feat: expose installHook with settings argument from react-devtools-core/backend (hoxyq in #30987)
• chore: remove settings manager from react-devtools-core (hoxyq in #30986)
• feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (hoxyq in #30636)
• refactor[react-devtools]: propagate settings from global hook object to frontend (hoxyq in #30610)
• chore[react-devtools]: extract some utils into separate modules to unify implementations (hoxyq in #30597)
• refactor[react-devtools]: move console patching to global hook (hoxyq in #30596)
• refactor[react-devtools]: remove browserTheme from ConsolePatchSettings (hoxyq in #30566)
• feat[react-devtools]: add settings to global hook object (hoxyq in #30564)
• fix: add Error prefix to Error objects names (hoxyq in #30969)
• Add enableComponentPerformanceTrack Flag (sebmarkbage in #30960)
• fix[rdt/fiber/renderer.js]: getCurrentFiber can be injected as null (hoxyq in #30968)
• disable enableSiblingPrerendering in experimental channel (gnoff in #30952)
• refactor[react-devtools]: initialize renderer interface early (hoxyq in #30946)
• Start prerendering Suspense retries immediately (acdlite in #30934)
• refactor[Agent/Store]: Store to send messages only after Agent is initialized (hoxyq in #30945)
• refactor[RendererInterface]: expose onErrorOrWarning and getComponentStack (hoxyq in #30931)
• Implement getComponentStack and onErrorOrWarning for replayed Flight logs (sebmarkbage in #30930)
• Use Unicode Atom Symbol instead of Atom Emoji (sebmarkbage in #30832)
• Improve Layering Between Console and Renderer (sebmarkbage in #30925)
• Add Map for Server Component Logs (sebmarkbage in #30905)
• Delete fiberToFiberInstanceMap (sebmarkbage in #30900)
• Add Flight Renderer (sebmarkbage in #30906)
• Refactor Error / Warning Count Tracking (sebmarkbage in #30899)
• [flow] Upgrade Flow to 0.245.2 (SamChou19815 in #30919)
• Separate RDT Fusebox into single-panel entry points (huntie in #30708)
• Build Updater List from the Commit instead of Map (sebmarkbage in #30897)
• Simplify Context Change Tracking in Profiler (sebmarkbage in #30896)
• Remove use of .alternate in root and recordProfilingDurations (sebmarkbage in #30895)
• Handle reordered contexts in Profiler (sebmarkbage in #30887)
• Refactor Forcing Fallback / Error of Suspense / Error Boundaries (sebmarkbage in #30870)
• Avoid getFiberIDUnsafe in debug() Helper (sebmarkbage in #30878)
• Include some Filtered Fiber Instances (sebmarkbage in #30865)
• Track root instances in a root Map (sebmarkbage in #30875)
• Track all public HostInstances in a Map (sebmarkbage in #30831)
• Support VirtualInstances in findAllCurrentHostInstances (sebmarkbage in #30853)
• Add Filtering of Environment Names (sebmarkbage in #30850)
• Support secondary environment name when it changes (sebmarkbage in #30842)
• Increase max payload for websocket in standalone app (runeb in #30848)
• Filter Server Components (sebmarkbage in #30839)
• Track virtual instances on the tracked path for selections (sebmarkbage in #30802)
• Remove displayName from inspected data (sebmarkbage in #30841)
• chore[react-devtools/hook]: remove unused native values (hoxyq in #30827)
• chore[react-devtools/extensions]: remove unused storage permission (hoxyq in #30826)
• fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup (hoxyq in #30825)
• feat[react-devtools]: support Manifest v3 for Firefox extension (hoxyq in #30824)
• Reconcile Fibers Against Previous Children Instances (sebmarkbage in #30822)
• Remove findCurrentFiberUsingSlowPathByFiberInstance (sebmarkbage in #30818)
• Track Tree Base Duration of Virtual Instances (sebmarkbage in #30817)
• Use Owner Stacks to Implement View Source of a Server Component (sebmarkbage in #30798)
• Make function inspection instant (sebmarkbage in #30786)
• Make Functions Clickable to Jump to Definition (sebmarkbage in #30769)
• Support REACT_LEGACY_ELEMENT_TYPE for formatting JSX (sebmarkbage in #30779)
• Find owners from the parent path that matches the Fiber or ReactComponentInfo (sebmarkbage in #30717)
• [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo (sebmarkbage in #30703)
• Hide props section if it is null (sebmarkbage in #30696)
• Support Server Components in Tree (sebmarkbage in #30684)
• fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered (hoxyq in #30676)
• Compute new reordered child set from the instance tree (sebmarkbage in #30668)
• Unmount instance by walking the instance tree instead of the fiber tree (sebmarkbage in #30665)
• Further Refactoring of Unmounts (sebmarkbage in #30658)
• Remove lodash.throttle (sebmarkbage in #30657)
• Unmount by walking previous nodes no longer in the new tree (sebmarkbage in #30644)
• Build up DevTools Instance Shadow Tree (sebmarkbage in #30625)
• chore[packages/react-devtools]: remove unused index.js (hoxyq in #30579)
• Track DOM nodes to Fiber map for HostHoistable Resources (sebmarkbage in #30590)
• Rename mountFiberRecursively/updateFiberRecursively (sebmarkbage in #30586)
• Allow Highlighting/Inspect HostSingletons/Hoistables and Resources (sebmarkbage in #30584)
• chore[react-devtools]: add global for native and use it to fork backend implementation (hoxyq in #30533)
• Enable pointEvents while scrolling (sebmarkbage in #30560)
• Make Element Inspection Feel Snappy (sebmarkbage in #30555)
• Track the parent DevToolsInstance while mounting a tree (sebmarkbage in #30542)
• Add DevToolsInstance to Store Stateful Information (sebmarkbage in #30517)
• Implement "best renderer" by taking the inner most matched node (sebmarkbage in #30494)
• Rename NativeElement to HostInstance in the Bridge (sebmarkbage in #30491)
• Rename Fiber to Element in the Bridge Protocol and RendererInterface (sebmarkbage in #30490)
• Stop filtering owner stacks (sebmarkbage in #30438)
• [Fiber] Call life-cycles with a react-stack-bottom-frame stack frame (sebmarkbage in #30429)
• [Flight] Prefix owner stacks added to the console.log with the current stack (sebmarkbage in #30427)
• [BE] switch to hermes parser for prettier (kassens in #30421)
• Implement Owner Stacks (sebmarkbage in #30417)
• [BE] upgrade prettier to 3.3.3 (kassens in #30420)
• [ci] Add yarn_test_build job to gh actions
• [Fizz] Refactor Component Stack Nodes (sebmarkbage in #30298)
• Print component stacks as error objects to get source mapping (sebmarkbage in #30289)
• Upgrade flow to 0.235.0 (kassens in #30118)
• fix: path handling in react devtools (Jack-Works in #29199)

[vercel]

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

[daniharo]

Is #28584 handled in the update?

[piotrski]

@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]

@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]

@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]

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]

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]

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

[CH1NRU5T]

@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]

@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]

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]

@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]

@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.

[CH1NRU5T]

@hoxyq Thank you for providing me with the starting point.
Appreciate it!
I will look into this as soon as possible.

[tinyCucumber]

@hoxyq I have the similar problem.In my chrome extension, i need to get the source info by the inspected element.Without the API getSourceForFiber,how can i get the source info?