mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
dcf83f7c2db2de64ec370df73294cedb658bd896
331 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Ruslan Lesiutin
|
d92056efb3 |
React DevTools 6.1.2 -> 6.1.3 (#33657)
Full list of changes: * devtools: emit performance entries only when profiling ([hoxyq](https://github.com/hoxyq) in [#33652](https://github.com/facebook/react/pull/33652)) * Get Server Component Function Location for Parent Stacks using Child's Owner Stack ([sebmarkbage](https://github.com/sebmarkbage) in [#33629](https://github.com/facebook/react/pull/33629)) * Added minimum indent size to Component Tree ([jsdf](https://github.com/jsdf) in [#33517](https://github.com/facebook/react/pull/33517)) * [devtools-shell] layout options for testing ([jsdf](https://github.com/jsdf) in [#33516](https://github.com/facebook/react/pull/33516)) * Remove feature flag enableRenderableContext ([kassens](https://github.com/kassens) in [#33505](https://github.com/facebook/react/pull/33505)) * refactor[devtools]: update css for settings and support css variables in shadow dom scnenario ([hoxyq](https://github.com/hoxyq) in [#33487](https://github.com/facebook/react/pull/33487)) * [mcp] Add MCP tool to print out the component tree of the currently open React App ([jorge-cab](https://github.com/jorge-cab) in [#33305](https://github.com/facebook/react/pull/33305)) * [scripts] Switch back to flow parser for prettier ([rickhanlonii](https://github.com/rickhanlonii) in [#33414](https://github.com/facebook/react/pull/33414)) * upgrade json5 ([rickhanlonii](https://github.com/rickhanlonii) in [#33358](https://github.com/facebook/react/pull/33358)) * Get source location from structured callsites in prepareStackTrace ([sebmarkbage](https://github.com/sebmarkbage) in [#33143](https://github.com/facebook/react/pull/33143)) * Clean up enableSiblingPrerendering flag ([jackpope](https://github.com/jackpope) in [#32319](https://github.com/facebook/react/pull/32319)) |
||
 Jorge Cabiedes
|
2b4064eb9b |
[mcp] Add MCP tool to print out the component tree of the currently open React App (#33305)
## Summary This tool leverages DevTools to get the component tree from the currently open React App. This gives realtime information to agents about the state of the app. ## How did you test this change? Tested integration with Claude Desktop |
||
 Ruslan Lesiutin
|
557a64795c |
React DevTools 6.1.1 -> 6.1.2 (#33142)
Patch release to mitigate https://github.com/facebook/react/issues/32659 Essentially just 6.1.1 with: * Restore all Transitions for Tree updates ([eps1lon](https://github.com/eps1lon) in [#33042](https://github.com/facebook/react/pull/33042)) * Restore "double-click to view owners tree" functionality ([eps1lon](https://github.com/eps1lon) in [#33039](https://github.com/facebook/react/pull/33039)) |
||
 YongSeok Jang (장용석)
|
53c9f81049 |
[DevTools] Use Popover API for TraceUpdates highlighting (#32614)
## Summary When using React DevTools to highlight component updates, the highlights would sometimes appear behind elements that use the browser's [top-layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) (such as `<dialog>` elements or components using the Popover API). This made it difficult to see which components were updating when they were inside or behind top-layer elements. This PR fixes the issue by using the Popover API to ensure that highlighting appears on top of all content, including elements in the top-layer. The implementation maintains backward compatibility with browsers that don't support the Popover API. ## How did you test this change? I tested this change in the following ways: 1. Manually tested in Chrome (which supports the Popover API) with: - Created a test application with React components inside `<dialog>` elements and custom elements using the Popover API - Verified that component highlighting appears above these elements when they update - Confirmed that highlighting displays correctly for nested components within top-layer elements 2. Verified backward compatibility: - Tested in browsers without Popover API support to ensure fallback behavior works correctly - Confirmed that no errors occur and highlighting still functions as before 3. Ran the React DevTools test suite: - All tests pass successfully - No regressions were introduced [demo-page](https://devtools-toplayer-demo.vercel.app/) [demo-repo](https://github.com/yongsk0066/devtools-toplayer-demo) ### AS-IS https://github.com/user-attachments/assets/dc2e1281-969f-4f61-82c3-480153916969 ### TO-BE https://github.com/user-attachments/assets/dd52ce35-816c-42f0-819b-0d5d0a8a21e5 |
||
 Sebastian "Sebbie" Silbermann
|
bc6184dd99 | [devtools] Fix "View source" for sources with URLs that aren't normalized (#32951) | ||
 MU AOHUA
|
dc9b74647e |
[DevTools] Add fb local build command (#32644)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary 1. Having a development build for FB will be convenient for fb internal feature development 2. Add a new checkbox to toggle new internal features added to React Devtools. ## How did you test this change? 1. yarn test 2. set extra env variables in bash profile and build an internal version with the new script. 3. toggle on/off the new checkbox, the value is stored in local storage correctly. --------- Co-authored-by: Aohua Mu <muaohua@fb.com> |
||
|
Ruslan Lesiutin
|
ae3190c5e9 |
React DevTools 6.1.0 -> 6.1.1 (#32326)
Full list of changes: * DevTools: refactor NativeStyleEditor, don't use custom cache implementation ([hoxyq](https://github.com/hoxyq) in [#32298](https://github.com/facebook/react/pull/32298)) * fix[react-devtools-fusebox]: add extension globals to build ([hoxyq](https://github.com/hoxyq) in [#32297](https://github.com/facebook/react/pull/32297)) * DevTools: fix host component filter option title ([hoxyq](https://github.com/hoxyq) in [#32296](https://github.com/facebook/react/pull/32296)) * chore[DevTools]: make clipboardWrite optional for chromium ([hoxyq](https://github.com/hoxyq) in [#32262](https://github.com/facebook/react/pull/32262)) * DevTools: support useEffectEvent and forward-fix experimental prefix support ([hoxyq](https://github.com/hoxyq) in [#32106](https://github.com/facebook/react/pull/32106)) |
||
|
Ruslan Lesiutin
|
221f3002ca |
chore[DevTools]: make clipboardWrite optional for chromium (#32262)
Addresses https://github.com/facebook/react/issues/32244. ### Chromium We will use [chrome.permissions](https://developer.chrome.com/docs/extensions/reference/api/permissions) for checking / requesting `clipboardWrite` permission before copying something to the clipboard. ### Firefox We will keep `clipboardWrite` as a required permission, because there is no reliable and working API for requesting optional permissions for extensions that are extending browser DevTools: - `chrome.permissions` is unavailable for devtools pages - https://bugzilla.mozilla.org/show_bug.cgi?id=1796933 - You can't call `chrome.permissions.request` from background, because this instruction has to be executed inside user-event callback, basically only initiated by user. I don't really want to come up with solutions like opening a new tab with a button that user has to click. |
||
|
Ruslan Lesiutin
|
4749dcb7c5 |
React DevTools 6.0.1 -> 6.1.0 (#32090)
List of changes in this release: * fix[DevTools]: fix HostComponent naming in filters for Native ([hoxyq](https://github.com/hoxyq) in [#32086](https://github.com/facebook/react/pull/32086)) * Fix copy functionality in Firefox ([V3RON](https://github.com/V3RON) in [#32077](https://github.com/facebook/react/pull/32077)) * chore[DevTools]: don't use batchedUpdate ([hoxyq](https://github.com/hoxyq) in [#32074](https://github.com/facebook/react/pull/32074)) * Prevent crash when starting consecutive profiling sessions ([V3RON](https://github.com/V3RON) in [#32066](https://github.com/facebook/react/pull/32066)) * fix[DevTools/Tree]: only scroll to item when panel is visible ([hoxyq](https://github.com/hoxyq) in [#32018](https://github.com/facebook/react/pull/32018)) * feat[Tree]: set initial scroll offset when inspected element index is set ([hoxyq](https://github.com/hoxyq) in [#31968](https://github.com/facebook/react/pull/31968)) * DevTools: merge element fields in TreeStateContext ([hoxyq](https://github.com/hoxyq) in [#31956](https://github.com/facebook/react/pull/31956)) * DevTools: fix initial host instance selection ([hoxyq](https://github.com/hoxyq) in [#31892](https://github.com/facebook/react/pull/31892)) * chore[DevTools/Tree]: don't pre-select root element and remove unused code ([hoxyq](https://github.com/hoxyq) in [#32015](https://github.com/facebook/react/pull/32015)) * chore[DevTools/TraceUpdates]: display names by default ([hoxyq](https://github.com/hoxyq) in [#32019](https://github.com/facebook/react/pull/32019)) * Add ViewTransitionComponent to Stacks and DevTools ([sebmarkbage](https://github.com/sebmarkbage) in [#32034](https://github.com/facebook/react/pull/32034)) * Add <ViewTransition> Component ([sebmarkbage](https://github.com/sebmarkbage) in [#31975](https://github.com/facebook/react/pull/31975)) * chore[react-devtools-shell]: disable warnings in dev server overlay ([hoxyq](https://github.com/hoxyq) in [#32005](https://github.com/facebook/react/pull/32005)) * DevTools: fork FastRefresh test for <18 versions of React ([hoxyq](https://github.com/hoxyq) in [#31893](https://github.com/facebook/react/pull/31893)) * Show component names while highlighting renders ([piotrski](https://github.com/piotrski) in [#31577](https://github.com/facebook/react/pull/31577)) * allow non-coercible objects in formatConsoleArgumentsToSingleString ([henryqdineen](https://github.com/henryqdineen) in [#31444](https://github.com/facebook/react/pull/31444)) * Remove enableRefAsProp feature flag ([kassens](https://github.com/kassens) in [#30346](https://github.com/facebook/react/pull/30346)) * [flow] Eliminate usage of more than 1-arg `React.AbstractComponent` in React codebase ([SamChou19815](https://github.com/SamChou19815) in [#31314](https://github.com/facebook/react/pull/31314)) * Audit try/finally around console patching ([sebmarkbage](https://github.com/sebmarkbage) in [#31286](https://github.com/facebook/react/pull/31286)) * tests[react-devtools]: added tests for Compiler integration ([hoxyq](https://github.com/hoxyq) in [#31241](https://github.com/facebook/react/pull/31241)) * Add Bridge types for Fusebox ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31274](https://github.com/facebook/react/pull/31274)) |
||
 Szymon Chmal
|
f13abbbb44 |
Fix copy functionality in Firefox (#32077)
## Summary This pull request addresses an issue where the copy functionality was not working in Firefox. The root cause was the absence of the 'clipboardWrite' permission in the manifest. To ensure consistency across all supported browsers, the 'clipboardWrite' permission has been added to the manifests for Chrome, Edge, and Firefox extensions. Closes #31422 ## How did you test this change? I ran the modified extension in all browsers (MacOS) and verified that the copy functionality works in each. https://github.com/user-attachments/assets/a41ff14b-3d65-409c-ac7f-1ccd72fa944a |
||
|
Ruslan Lesiutin
|
d2a1b8854d |
fix[DevTools/Tree]: only scroll to item when panel is visible (#32018)
Stacked on https://github.com/facebook/react/pull/31968. See commit on top. Fixes an issue with bank tree view, when we are scrolling to an item while syncing user DOM selection. This should only have an effect on browser extension. Added events with `extension` prefix will only be emitted in browser extension implementation, for other implementations `useExtensionComponentsPanelVisibility` will return constant `true` value. Before: https://github.com/user-attachments/assets/82667c16-d495-4346-af0a-7ed22ff89cfc After: https://github.com/user-attachments/assets/a5d223fd-0328-44f0-af68-5c3863f1efee |
||
|
Ruslan Lesiutin
|
54cfa95d3a |
DevTools: fix initial host instance selection (#31892)
Related: https://github.com/facebook/react/pull/31342 This fixes RDT behaviour when some DOM element was pre-selected in built-in browser's Elements panel, and then Components panel of React DevTools was opened for the first time. With this change, React DevTools will correctly display the initial state of the Components Tree with the corresponding React Element (if possible) pre-selected. Previously, we would only subscribe listener when `TreeContext` is mounted, but this only happens when user opens one of React DevTools panels for the first time. With this change, we keep state inside `Store`, which is created when Browser DevTools are opened. Later, `TreeContext` will use it for initial state value. Planned next changes: 1. Merge `inspectedElementID` and `selectedElementID`, I have no idea why we need both. 2. Fix issue with `AutoSizer` rendering a blank container. |
||
|
Ruslan Lesiutin
|
c7c68ef842 |
React DevTools 6.0.0 -> 6.0.1 (#31263)
Changes in this release: * Fix React Compiler badging ([poteto](https://github.com/poteto) in [#31196](https://github.com/facebook/react/pull/31196)) * fix[react-devtools]: fixed timeline profiler tests ([hoxyq](https://github.com/hoxyq) in [#31261](https://github.com/facebook/react/pull/31261)) * fix[react-devtools]: record timeline data only when supported ([hoxyq](https://github.com/hoxyq) in [#31154](https://github.com/facebook/react/pull/31154)) * refactor[react-devtools]: flatten reload and profile config ([hoxyq](https://github.com/hoxyq) in [#31132](https://github.com/facebook/react/pull/31132)) * fix[react-devtools]: remove all listeners when Agent is shutdown ([hoxyq](https://github.com/hoxyq) in [#31151](https://github.com/facebook/react/pull/31151)) * fix[react-devtools]: removed redundant startProfiling call ([hoxyq](https://github.com/hoxyq) in [#31131](https://github.com/facebook/react/pull/31131)) * refactor[react-devtools/fiber/renderer]: optimize durations resolution ([hoxyq](https://github.com/hoxyq) in [#31118](https://github.com/facebook/react/pull/31118)) * fix[react-devtools]: update profiling status before receiving response from backend ([hoxyq](https://github.com/hoxyq) in [#31117](https://github.com/facebook/react/pull/31117)) * fix[react-devtools]: wrap key string in preformatted text html element ([hoxyq](https://github.com/hoxyq) in [#31153](https://github.com/facebook/react/pull/31153)) * chore[react-devtools]: drop legacy context tests ([hoxyq](https://github.com/hoxyq) in [#31059](https://github.com/facebook/react/pull/31059)) * chore[react-devtools]: add legacy mode error message to the ignore list for tests ([hoxyq](https://github.com/hoxyq) in [#31060](https://github.com/facebook/react/pull/31060)) * fix[react-devtools]: request hook initialization inside http server response ([hoxyq](https://github.com/hoxyq) in [#31102](https://github.com/facebook/react/pull/31102)) * [Flight] Serialize Server Components Props in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#31105](https://github.com/facebook/react/pull/31105)) * Add: reload to profile for Fusebox ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31021](https://github.com/facebook/react/pull/31021)) * refactor: allow custom impl of backend realod-to-profile support check ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31048](https://github.com/facebook/react/pull/31048)) * fix: use public instance in Fiber renderer and expose it from getInspectorDataForViewAtPoint ([hoxyq](https://github.com/hoxyq) in [#31068](https://github.com/facebook/react/pull/31068)) |
||
|
Ruslan Lesiutin
|
bfe91fbecf |
refactor[react-devtools]: flatten reload and profile config (#31132)
Stacked on https://github.com/facebook/react/pull/31131. See last commit. This is a clean-up and a pre-requisite for next changes: 1. `ReloadAndProfileConfig` is now split into boolean value and settings object. This is mainly because I will add one more setting soon, and also because settings might be persisted for a longer time than the flag which signals if the Backend was reloaded for profiling. Ideally, this settings should probably be moved to the global Hook object, same as we did for console patching. 2. Host is now responsible for reseting the cached values, Backend will execute provided `onReloadAndProfileFlagsReset` callback. |
||
|
Ruslan Lesiutin
|
1d8d12005f |
fix[react-devtools]: remove all listeners when Agent is shutdown (#31151)
Based on https://github.com/facebook/react/pull/31049, credits to @EdmondChuiHW. What is happening here: 1. Once Agent is destroyed, unsubscribe own listeners and bridge listeners. 2. [Browser extension only] Once Agent is destroyed, unsubscribe listeners from BackendManager. 3. [Browser extension only] I've discovered that `backendManager.js` content script can get injected multiple times by the browser. When Frontend is initializing, it will create Store first, and then execute a content script for bootstraping backend manager. If Frontend was destroyed somewhere between these 2 steps, Backend won't be notified, because it is not initialized yet, so it will not unsubscribe listeners correctly. We might end up duplicating listeners, and the next time Frontend is launched, it will report an issues "Cannot add / remove node ...", because same operations are emitted twice. To reproduce 3 you can do the following: 1. Click reload-to-profile 2. Right after when both app and Chrome DevTools panel are reloaded, close Chrome DevTools. 3. Open Chrome DevTools again, open Profiler panel and observe "Cannot add / remove node ..." error in the UI. |
||
 Edmond Chui
|
f8024b0686 |
refactor: allow custom impl of backend realod-to-profile support check (#31048)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary In preparation to support reload-to-profile in Fusebox (#31021), we need a way to check capability of different backends, e.g. web vs React Native. ## How did you test this change? <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> * Default, e.g. existing web impl = no-op * Custom impl: is called |
||
|
Ruslan Lesiutin
|
d2e9b9b4dc |
React DevTools 5.3.1 -> 6.0.0 (#31058)
Full list of changes: * refactor: data source for errors and warnings tracking is now in Store ([hoxyq](https://github.com/hoxyq) in [#31010](https://github.com/facebook/react/pull/31010)) * fix: consider alternate as a key for componentLogsEntry when inspecting raw fiber instance ([hoxyq](https://github.com/hoxyq) in [#31009](https://github.com/facebook/react/pull/31009)) * Fix: profiling crashes #30661 #28838 ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31024](https://github.com/facebook/react/pull/31024)) * chore: remove using local storage for persisting console settings on the frontend ([hoxyq](https://github.com/hoxyq) in [#31002](https://github.com/facebook/react/pull/31002)) * feat: display message if user ended up opening hook script ([hoxyq](https://github.com/hoxyq) in [#31000](https://github.com/facebook/react/pull/31000)) * feat: expose installHook with settings argument from react-devtools-core/backend ([hoxyq](https://github.com/hoxyq) in [#30987](https://github.com/facebook/react/pull/30987)) * chore: remove settings manager from react-devtools-core ([hoxyq](https://github.com/hoxyq) in [#30986](https://github.com/facebook/react/pull/30986)) * feat[react-devtools/extension]: use chrome.storage to persist settings across sessions ([hoxyq](https://github.com/hoxyq) in [#30636](https://github.com/facebook/react/pull/30636)) * refactor[react-devtools]: propagate settings from global hook object to frontend ([hoxyq](https://github.com/hoxyq) in [#30610](https://github.com/facebook/react/pull/30610)) * chore[react-devtools]: extract some utils into separate modules to unify implementations ([hoxyq](https://github.com/hoxyq) in [#30597](https://github.com/facebook/react/pull/30597)) * refactor[react-devtools]: move console patching to global hook ([hoxyq](https://github.com/hoxyq) in [#30596](https://github.com/facebook/react/pull/30596)) * refactor[react-devtools]: remove browserTheme from ConsolePatchSettings ([hoxyq](https://github.com/hoxyq) in [#30566](https://github.com/facebook/react/pull/30566)) * feat[react-devtools]: add settings to global hook object ([hoxyq](https://github.com/hoxyq) in [#30564](https://github.com/facebook/react/pull/30564)) * fix: add Error prefix to Error objects names ([hoxyq](https://github.com/hoxyq) in [#30969](https://github.com/facebook/react/pull/30969)) * Add enableComponentPerformanceTrack Flag ([sebmarkbage](https://github.com/sebmarkbage) in [#30960](https://github.com/facebook/react/pull/30960)) * fix[rdt/fiber/renderer.js]: getCurrentFiber can be injected as null ([hoxyq](https://github.com/hoxyq) in [#30968](https://github.com/facebook/react/pull/30968)) * disable `enableSiblingPrerendering` in experimental channel ([gnoff](https://github.com/gnoff) in [#30952](https://github.com/facebook/react/pull/30952)) * refactor[react-devtools]: initialize renderer interface early ([hoxyq](https://github.com/hoxyq) in [#30946](https://github.com/facebook/react/pull/30946)) * Start prerendering Suspense retries immediately ([acdlite](https://github.com/acdlite) in [#30934](https://github.com/facebook/react/pull/30934)) * refactor[Agent/Store]: Store to send messages only after Agent is initialized ([hoxyq](https://github.com/hoxyq) in [#30945](https://github.com/facebook/react/pull/30945)) * refactor[RendererInterface]: expose onErrorOrWarning and getComponentStack ([hoxyq](https://github.com/hoxyq) in [#30931](https://github.com/facebook/react/pull/30931)) * Implement getComponentStack and onErrorOrWarning for replayed Flight logs ([sebmarkbage](https://github.com/sebmarkbage) in [#30930](https://github.com/facebook/react/pull/30930)) * Use Unicode Atom Symbol instead of Atom Emoji ([sebmarkbage](https://github.com/sebmarkbage) in [#30832](https://github.com/facebook/react/pull/30832)) * Improve Layering Between Console and Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#30925](https://github.com/facebook/react/pull/30925)) * Add Map for Server Component Logs ([sebmarkbage](https://github.com/sebmarkbage) in [#30905](https://github.com/facebook/react/pull/30905)) * Delete fiberToFiberInstanceMap ([sebmarkbage](https://github.com/sebmarkbage) in [#30900](https://github.com/facebook/react/pull/30900)) * Add Flight Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#30906](https://github.com/facebook/react/pull/30906)) * Refactor Error / Warning Count Tracking ([sebmarkbage](https://github.com/sebmarkbage) in [#30899](https://github.com/facebook/react/pull/30899)) * [flow] Upgrade Flow to 0.245.2 ([SamChou19815](https://github.com/SamChou19815) in [#30919](https://github.com/facebook/react/pull/30919)) * Separate RDT Fusebox into single-panel entry points ([huntie](https://github.com/huntie) in [#30708](https://github.com/facebook/react/pull/30708)) * Build Updater List from the Commit instead of Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30897](https://github.com/facebook/react/pull/30897)) * Simplify Context Change Tracking in Profiler ([sebmarkbage](https://github.com/sebmarkbage) in [#30896](https://github.com/facebook/react/pull/30896)) * Remove use of .alternate in root and recordProfilingDurations ([sebmarkbage](https://github.com/sebmarkbage) in [#30895](https://github.com/facebook/react/pull/30895)) * Handle reordered contexts in Profiler ([sebmarkbage](https://github.com/sebmarkbage) in [#30887](https://github.com/facebook/react/pull/30887)) * Refactor Forcing Fallback / Error of Suspense / Error Boundaries ([sebmarkbage](https://github.com/sebmarkbage) in [#30870](https://github.com/facebook/react/pull/30870)) * Avoid getFiberIDUnsafe in debug() Helper ([sebmarkbage](https://github.com/sebmarkbage) in [#30878](https://github.com/facebook/react/pull/30878)) * Include some Filtered Fiber Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30865](https://github.com/facebook/react/pull/30865)) * Track root instances in a root Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30875](https://github.com/facebook/react/pull/30875)) * Track all public HostInstances in a Map ([sebmarkbage](https://github.com/sebmarkbage) in [#30831](https://github.com/facebook/react/pull/30831)) * Support VirtualInstances in findAllCurrentHostInstances ([sebmarkbage](https://github.com/sebmarkbage) in [#30853](https://github.com/facebook/react/pull/30853)) * Add Filtering of Environment Names ([sebmarkbage](https://github.com/sebmarkbage) in [#30850](https://github.com/facebook/react/pull/30850)) * Support secondary environment name when it changes ([sebmarkbage](https://github.com/sebmarkbage) in [#30842](https://github.com/facebook/react/pull/30842)) * Increase max payload for websocket in standalone app ([runeb](https://github.com/runeb) in [#30848](https://github.com/facebook/react/pull/30848)) * Filter Server Components ([sebmarkbage](https://github.com/sebmarkbage) in [#30839](https://github.com/facebook/react/pull/30839)) * Track virtual instances on the tracked path for selections ([sebmarkbage](https://github.com/sebmarkbage) in [#30802](https://github.com/facebook/react/pull/30802)) * Remove displayName from inspected data ([sebmarkbage](https://github.com/sebmarkbage) in [#30841](https://github.com/facebook/react/pull/30841)) * chore[react-devtools/hook]: remove unused native values ([hoxyq](https://github.com/hoxyq) in [#30827](https://github.com/facebook/react/pull/30827)) * chore[react-devtools/extensions]: remove unused storage permission ([hoxyq](https://github.com/hoxyq) in [#30826](https://github.com/facebook/react/pull/30826)) * fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup ([hoxyq](https://github.com/hoxyq) in [#30825](https://github.com/facebook/react/pull/30825)) * feat[react-devtools]: support Manifest v3 for Firefox extension ([hoxyq](https://github.com/hoxyq) in [#30824](https://github.com/facebook/react/pull/30824)) * Reconcile Fibers Against Previous Children Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30822](https://github.com/facebook/react/pull/30822)) * Remove findCurrentFiberUsingSlowPathByFiberInstance ([sebmarkbage](https://github.com/sebmarkbage) in [#30818](https://github.com/facebook/react/pull/30818)) * Track Tree Base Duration of Virtual Instances ([sebmarkbage](https://github.com/sebmarkbage) in [#30817](https://github.com/facebook/react/pull/30817)) * Use Owner Stacks to Implement View Source of a Server Component ([sebmarkbage](https://github.com/sebmarkbage) in [#30798](https://github.com/facebook/react/pull/30798)) * Make function inspection instant ([sebmarkbage](https://github.com/sebmarkbage) in [#30786](https://github.com/facebook/react/pull/30786)) * Make Functions Clickable to Jump to Definition ([sebmarkbage](https://github.com/sebmarkbage) in [#30769](https://github.com/facebook/react/pull/30769)) * Support REACT_LEGACY_ELEMENT_TYPE for formatting JSX ([sebmarkbage](https://github.com/sebmarkbage) in [#30779](https://github.com/facebook/react/pull/30779)) * Find owners from the parent path that matches the Fiber or ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30717](https://github.com/facebook/react/pull/30717)) * [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30703](https://github.com/facebook/react/pull/30703)) * Hide props section if it is null ([sebmarkbage](https://github.com/sebmarkbage) in [#30696](https://github.com/facebook/react/pull/30696)) * Support Server Components in Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30684](https://github.com/facebook/react/pull/30684)) * fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered ([hoxyq](https://github.com/hoxyq) in [#30676](https://github.com/facebook/react/pull/30676)) * Compute new reordered child set from the instance tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30668](https://github.com/facebook/react/pull/30668)) * Unmount instance by walking the instance tree instead of the fiber tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30665](https://github.com/facebook/react/pull/30665)) * Further Refactoring of Unmounts ([sebmarkbage](https://github.com/sebmarkbage) in [#30658](https://github.com/facebook/react/pull/30658)) * Remove lodash.throttle ([sebmarkbage](https://github.com/sebmarkbage) in [#30657](https://github.com/facebook/react/pull/30657)) * Unmount by walking previous nodes no longer in the new tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30644](https://github.com/facebook/react/pull/30644)) * Build up DevTools Instance Shadow Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30625](https://github.com/facebook/react/pull/30625)) * chore[packages/react-devtools]: remove unused index.js ([hoxyq](https://github.com/hoxyq) in [#30579](https://github.com/facebook/react/pull/30579)) * Track DOM nodes to Fiber map for HostHoistable Resources ([sebmarkbage](https://github.com/sebmarkbage) in [#30590](https://github.com/facebook/react/pull/30590)) * Rename mountFiberRecursively/updateFiberRecursively ([sebmarkbage](https://github.com/sebmarkbage) in [#30586](https://github.com/facebook/react/pull/30586)) * Allow Highlighting/Inspect HostSingletons/Hoistables and Resources ([sebmarkbage](https://github.com/sebmarkbage) in [#30584](https://github.com/facebook/react/pull/30584)) * chore[react-devtools]: add global for native and use it to fork backend implementation ([hoxyq](https://github.com/hoxyq) in [#30533](https://github.com/facebook/react/pull/30533)) * Enable pointEvents while scrolling ([sebmarkbage](https://github.com/sebmarkbage) in [#30560](https://github.com/facebook/react/pull/30560)) * Make Element Inspection Feel Snappy ([sebmarkbage](https://github.com/sebmarkbage) in [#30555](https://github.com/facebook/react/pull/30555)) * Track the parent DevToolsInstance while mounting a tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30542](https://github.com/facebook/react/pull/30542)) * Add DevToolsInstance to Store Stateful Information ([sebmarkbage](https://github.com/sebmarkbage) in [#30517](https://github.com/facebook/react/pull/30517)) * Implement "best renderer" by taking the inner most matched node ([sebmarkbage](https://github.com/sebmarkbage) in [#30494](https://github.com/facebook/react/pull/30494)) * Rename NativeElement to HostInstance in the Bridge ([sebmarkbage](https://github.com/sebmarkbage) in [#30491](https://github.com/facebook/react/pull/30491)) * Rename Fiber to Element in the Bridge Protocol and RendererInterface ([sebmarkbage](https://github.com/sebmarkbage) in [#30490](https://github.com/facebook/react/pull/30490)) * Stop filtering owner stacks ([sebmarkbage](https://github.com/sebmarkbage) in [#30438](https://github.com/facebook/react/pull/30438)) * [Fiber] Call life-cycles with a react-stack-bottom-frame stack frame ([sebmarkbage](https://github.com/sebmarkbage) in [#30429](https://github.com/facebook/react/pull/30429)) * [Flight] Prefix owner stacks added to the console.log with the current stack ([sebmarkbage](https://github.com/sebmarkbage) in [#30427](https://github.com/facebook/react/pull/30427)) * [BE] switch to hermes parser for prettier ([kassens](https://github.com/kassens) in [#30421](https://github.com/facebook/react/pull/30421)) * Implement Owner Stacks ([sebmarkbage](https://github.com/sebmarkbage) in [#30417](https://github.com/facebook/react/pull/30417)) * [BE] upgrade prettier to 3.3.3 ([kassens](https://github.com/kassens) in [#30420](https://github.com/facebook/react/pull/30420)) * [ci] Add yarn_test_build job to gh actions * [Fizz] Refactor Component Stack Nodes ([sebmarkbage](https://github.com/sebmarkbage) in [#30298](https://github.com/facebook/react/pull/30298)) * Print component stacks as error objects to get source mapping ([sebmarkbage](https://github.com/sebmarkbage) in [#30289](https://github.com/facebook/react/pull/30289)) * Upgrade flow to 0.235.0 ([kassens](https://github.com/kassens) in [#30118](https://github.com/facebook/react/pull/30118)) * fix: path handling in react devtools ([Jack-Works](https://github.com/Jack-Works) in [#29199](https://github.com/facebook/react/pull/29199)) |
||
|
Ruslan Lesiutin
|
c21ce4a396 |
feat: display message if user ended up opening hook script (#31000)
In https://github.com/facebook/react/pull/30596 we've moved console patching to the global hook. Generally speaking, the patching happens even before React is loaded on the page. If browser DevTools were opened after when `console.error` or `console.warn` were called, the source script will be `hook.js`, because of the patching.  This is because ignore listing is not applied retroactively by Chrome DevTools. If you had it open before console calls, Hook script would be correctly filtered out from the stack:  I had hopes that the fix for https://issues.chromium.org/issues/345248263 will also apply ignore listing retroactively, but looks like we need to open a separate feature request for the Chrome DevTools team. With these changes, if user attempts to open `hook.js` script, they are going to see this message:  |
||
|
Ruslan Lesiutin
|
f37c7bc653 |
feat[react-devtools/extension]: use chrome.storage to persist settings across sessions (#30636)
Stacked on https://github.com/facebook/react/pull/30610 and whats under it. See [last commit](https://github.com/facebook/react/pull/30636/commits/248ddba18608e1bb5ef14c823085a7ff9d7a54a3). Now, we are using [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage) to persist settings for the browser extension across different sessions. Once settings are updated from the UI, the `Store` will emit `settingsUpdated` event, and we are going to persist them via `chrome.storage.local.set` in `main/index.js`. When hook is being injected, we are going to pass a `Promise`, which is going to be resolved after the settings are read from the storage via `chrome.storage.local.get` in `hookSettingsInjector.js`. |
||
|
Ruslan Lesiutin
|
b521ef8a2a |
refactor[react-devtools]: remove browserTheme from ConsolePatchSettings (#30566)
Stacked on https://github.com/facebook/react/pull/30564. We are no longer using browser theme in our console patching, this was removed in unification of console patching for strict mode, we started using ansi escape symbols and forking based on browser theme is no longer required - https://github.com/facebook/react/pull/29869 The real browser theme initialization for frontend is happening at the other place and is not affected: https://github.com/facebook/react/blob/40be968257a7a10a267210670103f20dd0429ef3/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js#L117-L120 |
||
|
Ruslan Lesiutin
|
bb6b86ed59 |
refactor[react-devtools]: initialize renderer interface early (#30946)
The current state is that `rendererInterface`, which contains all the backend logic, like generating component stack or attaching errors to fibers, or traversing the Fiber tree, ..., is only mounted after the Frontend is created. For browser extension, this means that we don't patch console or track errors and warnings before Chrome DevTools is opened. With these changes, `rendererInterface` is created right after `renderer` is injected from React via global hook object (e. g. `__REACT_DEVTOOLS_GLOBAL_HOOK__.inject(...)`. Because of the current implementation, in case of multiple Reacts on the page, all of them will patch the console independently. This will be fixed in one of the next PRs, where I am moving console patching to the global Hook. This change of course makes `hook.js` script bigger, but I think it is a reasonable trade-off for better DevX. We later can add more heuristics to optimize the performance (if necessary) of `rendererInterface` for cases when Frontend was connected late and Backend is attempting to flush out too many recorded operations. This essentially reverts https://github.com/facebook/react/pull/26563. |
||
 Sebastian Markbåge
|
d160aa0fbb |
[DevTools] Use Unicode Atom Symbol instead of Atom Emoji (#30832)
This reverts #19603. Before: <img width="724" alt="Screenshot 2024-08-28 at 12 07 29 AM" src="https://github.com/user-attachments/assets/0613088f-c013-4f1c-92c3-fbdae8c1f109"> After: <img width="771" alt="Screenshot 2024-08-28 at 12 08 13 AM" src="https://github.com/user-attachments/assets/eef21bee-d11f-4f0a-9147-053a163f720f"> Consensus seems to be that while the purple on is a bit clearer and easier to read. The purple is not on brand so it doesn't look like React. It looks ugly. It's distracting (too eye catching). Taking away attention from other tabs in an unfair way. It also gets worse with more tabs added. We plan on both adding another tab and panes inside other tabs (elements/sources) soon. Each needs to be marked somehow as part of React but spelling it out is too long. Putting inside a second tab means two clicks and takes away real-estate from our extension and doesn't solve the problem with extension panes in other tabs. We also plan on adding multiple different tracks to the Performance tab which also needs a name other than just React and spelling out React as a prefix is too long. The Emoji is too distracting. So it seems best to uniformly apply the symbol - albeit it might just look like a dot to many. Dark mode looks close to on brand: <img width="1089" alt="Screenshot 2024-08-28 at 12 32 50 AM" src="https://github.com/user-attachments/assets/7175a540-4241-4c26-9e4d-4d367873af57"> |
||
|
Ruslan Lesiutin
|
a19a8ab44f |
chore[react-devtools/hook]: remove unused native values (#30827)
Stacked on https://github.com/facebook/react/pull/30826. See [this commit](https://github.com/facebook/react/pull/30827/commits/ec0e48ed7a47dbbdafb5e2530ccba1f2e5b17bad). This is unused. |
||
|
Ruslan Lesiutin
|
233d63c497 |
chore[react-devtools/extensions]: remove unused storage permission (#30826)
Stacked on https://github.com/facebook/react/pull/30825. See [this commit](https://github.com/facebook/react/pull/30826/commits/b2130701cf6b25d7a96c1e92b44f41affa56bb35). We are not using `storage` anywhere yet, but will be soon. This permission is not needed. |
||
|
Ruslan Lesiutin
|
795b3207ce |
fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup (#30825)
Stacked on https://github.com/facebook/react/pull/30824. See [this commit](https://github.com/facebook/react/pull/30825/commits/c9830d64749cf8fd592ea30a1cd65842cf83f6df). Turns out we should be listing `tabs` in our permissions, if we want to be able to receive tab url, once its updated. This also fixes `chrome.tabs.onCreated` event subscription, because [it should receive only tab object](https://developer.chrome.com/docs/extensions/reference/api/tabs#event-onCreated), and not 3 arguments, as expected in the previous implementation. |
||
|
Ruslan Lesiutin
|
537c74e16a |
feat[react-devtools]: support Manifest v3 for Firefox extension (#30824)
Firefox [finally supports `ExecutionWorld.MAIN`](https://bugzilla.mozilla.org/show_bug.cgi?id=1736575) in content scripts, which means we can migrate the browser extension to Manifest V3. This PR also removes a bunch of no longer required explicit branching for Firefox case, when we are using Manifest V3-only APIs. We are also removing XMLHttpRequest injection, which is no longer needed and restricted in Manifest V3. The new standardized approach (same as in Chromium) doesn't violate CSP rules, which means that extension can finally be used for apps running in production mode. |
||
|
Sebastian Markbåge
|
f65ac7bd4a |
[DevTools] Make function inspection instant (#30786)
I noticed that there is a delay due to the inspection being split into one part that gets the attribute and another eval that does the inspection. This is a bit hacky and uses temporary global names that are leaky. The timeout was presumably to ensure that the first step had fully propagated but it's slow. As we've learned, it can be throttled, and it isn't a guarantee either way. Instead, we can just consolidate these into a single operation that by-passes the bridge and goes straight to the renderer interface from the eval. I did the same for the viewElementSource helper even though that's not currently in use since #28471 but I think we probably should return to that technique when it's available since it's more reliable than the throw - at least in Chrome. I'm not sure about the status of React Native here. In Firefox, inspecting a function with source maps doesn't seem to work. It doesn't jump to original code. |
||
|
Ruslan Lesiutin
|
8269d55d23 |
chore[react-devtools]: add global for native and use it to fork backend implementation (#30533)
Adding `__IS_NATIVE__` global, which will be used for forking backend implementation. Will only be set to `true` for `react-devtools-core` package, which is used by `react-native`. Ideally, we should name it `react-devtools-native`, and keep `react-devtools-core` as host-agnostic. With this change, the next release of `react-devtools-core` should append component stack as Error object, not as string, and should add `(<anonymous>)` suffix to component stack frames. |
||
|
Sebastian Markbåge
|
33e54fa252 |
[DevTools] Rename NativeElement to HostInstance in the Bridge (#30491)
Stacked on #30490. This is in the same spirit but to clarify the difference between what is React Native vs part of any generic Host. We used to use "Native" to mean three different concepts. Now "Native" just means React Native. E.g. from the frontend's perspective the Host can be Highlighted/Inspected. However, that in turn can then be implemented as either direct DOM manipulation or commands to React Native. So frontend -> backend is "Host" but backend -> React Native is "Native" while backend -> DOM is "Web". Rename NativeElementsPanel to BuiltinElementsPanel. This isn't a React Native panel but one part of the surrounding DevTools. We refer to Host more as the thing running React itself. I.e. where the backend lives. The runtime you're inspecting. The DevTools itself needs a third term. So I went with "Builtin". |
||
|
Sebastian Markbåge
|
ec98d36c3a |
[DevTools] Rename Fiber to Element in the Bridge Protocol and RendererInterface (#30490)
I need to start clarifying where things are really actually Fibers and where they're not since I'm adding Server Components as a separate type of component instance which is not backed by a Fiber. Nothing in the front end should really know anything about what kind of renderer implementation we're inspecting and indeed it's already not always a "Fiber" in the legacy renderer. We typically refer to this as a "Component Instance" but the front end currently refers to it as an Element as it historically grew from the browser DevTools Elements tab. I also moved the renderer.js implementation into the `backend/fiber` folder. These are at the same level as `backend/legacy`. This clarifies that anything outside of this folder ideally shouldn't refer to a "Fiber". console.js and profilingHooks.js unfortunately use Fibers a lot which needs further refactoring. The profiler frontend also uses the term alot. |
||
|
Sebastian Markbåge
|
43dac1ee8d |
[DevTools] Implement Owner Stacks (#30417)
Stacked on #30410. Use "owner stacks" as the appended component stack if it is available on the Fiber. This will only be available if the enableOwnerStacks flag is on. Otherwise it fallback to parent stacks. In prod, there's no owner so it's never added there. I was going back and forth on whether to inject essentially `captureOwnerStack` as part of the DevTools hooks or replicate the implementation but decided to replicate the implementation. The DevTools needs all the same information from internals to implement owner views elsewhere in the UI anyway so we're not saving anything in terms of the scope of internals. Additionally, we really need this information for non-current components as well like "rendered by" views of the currently selected component. It can also be useful if we need to change the format after the fact like we did for parent stacks in: https://github.com/facebook/react/pull/30289 Injecting the implementation would lock us into specifics both in terms of what the core needs to provide and what the DevTools can use. The implementation depends on the technique used in #30369 which tags frames to strip out with `react-stack-bottom-frame`. That's how the implementation knows how to materialize the error if it hasn't already. Firefox: <img width="487" alt="Screenshot 2024-07-21 at 11 33 37 PM" src="https://github.com/user-attachments/assets/d3539b53-4578-4fdd-af25-25698b2bcc7d"> Follow up: One thing about this view is that it doesn't include the current actual synchronous stack. When I used to append these I would include both the real current stack and the owner stack. That's because the owner stack doesn't include the name of the currently executing component. I'll probably inject the current stack too in addition to the owner stack. This is similar to how native Async Stacks are basically just appended onto the current stack rather than its own. |
||
|
Ruslan Lesiutin
|
572ded3762 |
React DevTools 5.3.0 -> 5.3.1 (#30199)
## Summary Full list of changes, mostly fixes: * chore[react-devtools/renderer]: dont show strict mode warning for prod renderer builds ([hoxyq](https://github.com/hoxyq) in [#30158](https://github.com/facebook/react/pull/30158)) * chore[react-devtools/ui]: fix strict mode badge styles ([hoxyq](https://github.com/hoxyq) in [#30159](https://github.com/facebook/react/pull/30159)) * fix[react-devtools]: restore original args when recording errors ([hoxyq](https://github.com/hoxyq) in [#30091](https://github.com/facebook/react/pull/30091)) * Read constructor name more carefully ([LoganDark](https://github.com/LoganDark) in [#29954](https://github.com/facebook/react/pull/29954)) * refactor[react-devtools/extensions]: dont debounce cleanup logic on navigation ([hoxyq](https://github.com/hoxyq) in [#30027](https://github.com/facebook/react/pull/30027)) * lint: enable reportUnusedDisableDirectives and remove unused suppressions ([kassens](https://github.com/kassens) in [#28721](https://github.com/facebook/react/pull/28721)) * fix[react-devtools/extensions]: propagate globals from env ([hoxyq](https://github.com/hoxyq) in [#29963](https://github.com/facebook/react/pull/29963)) * refactor[react-devtools/tests]: use registered marks instead of cleared in tests ([hoxyq](https://github.com/hoxyq) in [#29929](https://github.com/facebook/react/pull/29929)) |
||
|
Ruslan Lesiutin
|
7608516479 |
refactor[react-devtools/extensions]: dont debounce cleanup logic on navigation (#30027)
## Summary There is a race condition in the way we poll if React is on the page and when we actually clear this polling instance. When user navigates to a different page, we will debounce a callback for 500ms, which will: 1. Cleanup previous React polling instance 2. Start a new React polling instance Since the cleanup logic is debounced, there is a small chance that by the time we are going to clean up this polling instance, it will be `eval`-ed on the page, that is using React. For example, when user is navigating from the page which doesn't have React running, to a page that has React running. Next, we incorrectly will try to mount React DevTools panels twice, which will result into conflicts in the Store, and the error will be shown to the user ## How did you test this change? Since this is a race condition, it is hard to reproduce consistently, but you can try this flow: 1. Open a page that is using React, open browser DevTools and React DevTools components panel 2. Open a page that is NOT using React, like google.com, wait ~5 seconds until you see `"Looks like this page doesn't have React, or it hasn't been loaded yet"` message in RDT panel 3. Open a page that is using React, observe the error `"Uncaught Error: Cannot add node "1" because a node with that id is already in the Store."` Couldn't been able to reproduce this with these changes. |
||
 Jan Kassens
|
b565373afd |
lint: enable reportUnusedDisableDirectives and remove unused suppressions (#28721)
This enables linting against unused suppressions and removes the ones that were unused. |
||
|
Ruslan Lesiutin
|
b15c8492ca |
fix[react-devtools/extensions]: propagate globals from env (#29963)
Somehow missed this while working on https://github.com/facebook/react/pull/29869. With these changes, manual inspection of the `react_devtools_backend_compact.js` doesn't have any occurences of `__IS_FIREFOX__` flag. |
||
|
Ruslan Lesiutin
|
1434af3d22 |
React DevTools 5.2.0 -> 5.3.0 (#29918)
Full list of changes: * chore[react-devtools]: improve console arguments formatting before passing it to original console ([hoxyq](https://github.com/hoxyq) in [#29873](https://github.com/facebook/react/pull/29873)) * chore[react-devtools]: unify console patching and default to ansi escape symbols ([hoxyq](https://github.com/hoxyq) in [#29869](https://github.com/facebook/react/pull/29869)) * chore[react-devtools/backend]: remove consoleManagedByDevToolsDuringStrictMode ([hoxyq](https://github.com/hoxyq) in [#29856](https://github.com/facebook/react/pull/29856)) * chore[react-devtools/extensions]: make source maps url relative ([hoxyq](https://github.com/hoxyq) in [#29886](https://github.com/facebook/react/pull/29886)) * fix[react-devtools] divided inspecting elements between inspecting do… ([vzaidman](https://github.com/vzaidman) in [#29885](https://github.com/facebook/react/pull/29885)) * [Fiber] Create virtual Fiber when an error occurs during reconcilation ([sebmarkbage](https://github.com/sebmarkbage) in [#29804](https://github.com/facebook/react/pull/29804)) * fix[react-devtools] component badge in light mode is now not invisible ([vzaidman](https://github.com/vzaidman) in [#29852](https://github.com/facebook/react/pull/29852)) * Remove Warning: prefix and toString on console Arguments ([sebmarkbage](https://github.com/sebmarkbage) in [#29839](https://github.com/facebook/react/pull/29839)) * Add jest lint rules ([rickhanlonii](https://github.com/rickhanlonii) in [#29760](https://github.com/facebook/react/pull/29760)) * [Fiber] Track the Real Fiber for Key Warnings ([sebmarkbage](https://github.com/sebmarkbage) in [#29791](https://github.com/facebook/react/pull/29791)) * fix[react-devtools/store-test]: fork the test to represent current be… ([hoxyq](https://github.com/hoxyq) in [#29777](https://github.com/facebook/react/pull/29777)) * Default native inspections config false ([vzaidman](https://github.com/vzaidman) in [#29784](https://github.com/facebook/react/pull/29784)) * fix[react-devtools] remove native inspection button when it can't be used ([vzaidman](https://github.com/vzaidman) in [#29779](https://github.com/facebook/react/pull/29779)) * chore[react-devtools]: ip => internal-ip ([hoxyq](https://github.com/hoxyq) in [#29772](https://github.com/facebook/react/pull/29772)) * Fix #29724: `ip` dependency update for CVE-2024-29415 ([Rekl0w](https://github.com/Rekl0w) in [#29725](https://github.com/facebook/react/pull/29725)) * cleanup[react-devtools]: remove unused supportsProfiling flag from store config ([hoxyq](https://github.com/hoxyq) in [#29193](https://github.com/facebook/react/pull/29193)) * [Fiber] Enable Native console.createTask Stacks When Available ([sebmarkbage](https://github.com/sebmarkbage) in [#29223](https://github.com/facebook/react/pull/29223)) * Move createElement/JSX Warnings into the Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#29088](https://github.com/facebook/react/pull/29088)) * Set the current fiber to the source of the error during error reporting ([sebmarkbage](https://github.com/sebmarkbage) in [#29044](https://github.com/facebook/react/pull/29044)) * Unify ReactFiberCurrentOwner and ReactCurrentFiber ([sebmarkbage](https://github.com/sebmarkbage) in [#29038](https://github.com/facebook/react/pull/29038)) * Dim `console` calls on additional Effect invocations due to `StrictMode` ([eps1lon](https://github.com/eps1lon) in [#29007](https://github.com/facebook/react/pull/29007)) * refactor[react-devtools]: rewrite context menus ([hoxyq](https://github.com/hoxyq) in [#29049](https://github.com/facebook/react/pull/29049)) |
||
|
Ruslan Lesiutin
|
ff6e05a705 |
chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869)
Stacked on https://github.com/facebook/react/pull/29856. ## Summary By default, React DevTools will apply dimming with ANSI escape symbols, so it works for both terminals and browser consoles. For Firefox, which doesn't support ANSI escape symbols console stylings, we fallback to css properties, like we used to do before. ## How did you test this change? | Environment | Dark mode | Light mode | |--------|--------|--------| | Terminal |  |  | | Fusebox console |  |  | | Firefox console |  |  | | Chrome console |  |  | |
||
|
Ruslan Lesiutin
|
d7bb6039de |
chore[react-devtools/extensions]: make source maps url relative (#29886)
This adds few changes: 1. We are going to ship source maps only for 2 artifacts: `installHook.js` and `react_devtools_backend_compact.js`, because it is only these modules that can patch console and be visible to the user via stack traces in console. We need to ship source maps to be able to use `ignoreList` feature in source maps, so we can actually hide these from stack traces. | Before | After | |--------|--------| |  |  | 2. The `"sources"` field in source map will have relative urls listed, instead of absolute with `webpack://` protocol. This will move the sources to the `React Developer Tools` frame in `Sources` panel, instead of `webpack://`. | Before | After | |--------|--------| |  |  | > [!NOTE] > I still have 1 unresolved issue with shipping source maps in extension build, and it is related to Firefox, which can't find them in the extension bundle and returns 404, even though urls are relative and I can actually open them via unique address like `moz-extension://<extension-id>/build/intallHook.js.map` ¯\\\_(ツ)\_/¯ |
||
 Vitali Zaidman
|
d9a5b6393a |
fix[react-devtools] divided inspecting elements between inspecting do… (#29885)
# **before** * nav to dom element from devtools * nav to devtools element from page are enabled on extension and disabled on the rest of the flavors. ## extension: * nav to dom element from devtools **enabled** and working * nav to devtools element from page **enabled** and working  ## inline: * nav to dom element from devtools **disabled** * nav to devtools element from page **disabled**  ## standalone: * nav to dom element from devtools **disabled** * nav to devtools element from page **disabled**  ## fusebox: * nav to dom element from devtools **disabled** * nav to devtools element from page **disabled**  # **after** same: * nav to dom element from devtools * nav to devtools element from page are enabled on extension and disabled on inline. change: standalone and fusebox can nav to devtools element from page ## extension: * nav to dom element from devtools **enabled** and working * nav to devtools element from page **enabled** and working  ## inline: * nav to dom element from devtools **disabled** * nav to devtools element from page **disabled**  ## standalone: * nav to dom element from devtools **disabled** * nav to devtools element from page **enabled** and working  ## fusebox: * nav to dom element from devtools **disabled** * nav to devtools element from page **enabled** and working  |
||
|
Vitali Zaidman
|
fd6e130b00 |
Default native inspections config false (#29784)
## Summary To make the config `supportsNativeInspection` explicit, set it to default to `false` and only allow it in the extension. ## How did you test this change? When disabled on **React DevTools extension** <img width="419" alt="Screenshot 2024-06-06 at 17 34 02" src="https://github.com/facebook/react/assets/5188459/0052b645-2214-475c-8b41-4f9207ca3343"> When enabled on **React DevTools extension** (the chosen config) <img width="425" alt="Screenshot 2024-06-06 at 17 34 53" src="https://github.com/facebook/react/assets/5188459/df34ec8e-2039-4984-86c8-74feaf89bbdd"> When enabled on **React DevTools in Fusebox** <img width="1170" alt="Screenshot 2024-06-06 at 17 29 24" src="https://github.com/facebook/react/assets/5188459/ae52274b-583d-463c-8482-2323d502f4c0"> When disabled on **React DevTools in Fusebox** (the chosen config) <img width="1453" alt="Screenshot 2024-06-06 at 17 30 31" src="https://github.com/facebook/react/assets/5188459/cba5b51b-c973-412d-8ad0-382a4f9bf115"> When enabled on **React DevTools Inline** <img width="915" alt="Screenshot 2024-06-06 at 17 24 20" src="https://github.com/facebook/react/assets/5188459/f0d61d99-2b75-4a87-a19e-db431be697e3"> When disabled on **React DevTools Inline** (the chosen config) <img width="844" alt="Screenshot 2024-06-06 at 17 19 39" src="https://github.com/facebook/react/assets/5188459/d3bcc8a7-535d-4656-844d-f9f89bb2b248"> When enabled on **React DevTools standalone** <img width="1227" alt="Screenshot 2024-06-06 at 17 23 16" src="https://github.com/facebook/react/assets/5188459/174fbae6-1412-4539-bbe6-e1d0e8baa7d5"> When disabled on **React DevTools standalone** (the chosen config) <img width="844" alt="Screenshot 2024-06-06 at 17 19 39" src="https://github.com/facebook/react/assets/5188459/00c46907-e3a6-4766-a1b4-dd088cac2157"> |
||
|
Ruslan Lesiutin
|
6f23540c7d |
cleanup[react-devtools]: remove unused supportsProfiling flag from store config (#29193)
Looks like this is unused |
||
|
Ruslan Lesiutin
|
1717ab0171 |
React DevTools 5.1.0 -> 5.2.0 (#29022)
Full list of changes (not a public changelog): * fix[react-devtools/ci]: fix configurations for e2e testing ([hoxyq](https://github.com/hoxyq) in [#29016](https://github.com/facebook/react/pull/29016)) * feat[react-devtools]: display forget badge for components in profiling session ([hoxyq](https://github.com/hoxyq) in [#29014](https://github.com/facebook/react/pull/29014)) * fix[react-devtools]: add backwards compat with legacy element type symbol ([hoxyq](https://github.com/hoxyq) in [#28982](https://github.com/facebook/react/pull/28982)) * Expose "view source" options to Fusebox integration ([motiz88](https://github.com/motiz88) in [#28973](https://github.com/facebook/react/pull/28973)) * Enable inspected element context menu in Fusebox ([motiz88](https://github.com/motiz88) in [#28972](https://github.com/facebook/react/pull/28972)) * Check in `frontend.d.ts` for react-devtools-fusebox, include in build output ([motiz88](https://github.com/motiz88) in [#28970](https://github.com/facebook/react/pull/28970)) * Devtools: Fix build-for-devtools ([eps1lon](https://github.com/eps1lon) in [#28976](https://github.com/facebook/react/pull/28976)) * Move useMemoCache hook to react/compiler-runtime ([kassens](https://github.com/kassens) in [#28954](https://github.com/facebook/react/pull/28954)) * warn -> error for Test Renderer deprecation ([acdlite](https://github.com/acdlite) in [#28904](https://github.com/facebook/react/pull/28904)) * [react-dom] move all client code to `react-dom/client` ([gnoff](https://github.com/gnoff) in [#28271](https://github.com/facebook/react/pull/28271)) * Rename the react.element symbol to react.transitional.element ([sebmarkbage](https://github.com/sebmarkbage) in [#28813](https://github.com/facebook/react/pull/28813)) * Rename Forget badge ([jbonta](https://github.com/jbonta) in [#28858](https://github.com/facebook/react/pull/28858)) * Devtools: Add support for useFormStatus ([eps1lon](https://github.com/eps1lon) in [#28413](https://github.com/facebook/react/pull/28413)) |
||
 Sebastian Silbermann
|
14f71db6b6 | Devtools: Fix build-for-devtools (#28976) | ||
|
Ruslan Lesiutin
|
2d128ff041 |
React DevTools 5.0.2 -> 5.1.0 (#28840)
Full list of changes: * Look for a ReactMemoCacheSentinel on state ([gsathya](https://github.com/gsathya) in [#28831](https://github.com/facebook/react/pull/28831)) * Use use() in the Cache if available ([sebmarkbage](https://github.com/sebmarkbage) in [#28793](https://github.com/facebook/react/pull/28793)) * feat[devtools-fusebox]: support theme option ([hoxyq](https://github.com/hoxyq) in [#28832](https://github.com/facebook/react/pull/28832)) * feat[devtools]: add package for fusebox integration ([hoxyq](https://github.com/hoxyq) in [#28553](https://github.com/facebook/react/pull/28553)) * feat[devtools]: add method for connecting backend with custom messaging protocol ([hoxyq](https://github.com/hoxyq) in [#28552](https://github.com/facebook/react/pull/28552)) * Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([sebmarkbage](https://github.com/sebmarkbage) in [#28789](https://github.com/facebook/react/pull/28789)) * Flatten ReactSharedInternals ([sebmarkbage](https://github.com/sebmarkbage) in [#28783](https://github.com/facebook/react/pull/28783)) * feat[devtools]: ship source maps for content scripts and ignore list installHook script ([hoxyq](https://github.com/hoxyq) in [#28730](https://github.com/facebook/react/pull/28730)) * Track Owner for Server Components in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28753](https://github.com/facebook/react/pull/28753)) * Move ReactDOMLegacy implementation into RootFB ([sebmarkbage](https://github.com/sebmarkbage) in [#28656](https://github.com/facebook/react/pull/28656)) * Reland #28672: Remove IndeterminateComponent ([gnoff](https://github.com/gnoff) in [#28681](https://github.com/facebook/react/pull/28681)) * Remove reference to deleted <Cache> in un-linted file ([josephsavona](https://github.com/josephsavona) in [#28715](https://github.com/facebook/react/pull/28715)) * [be] Remove unshipped experimental <Cache> element type ([josephsavona](https://github.com/josephsavona) in [#28698](https://github.com/facebook/react/pull/28698)) * Revert "Remove module pattern function component support" ([rickhanlonii](https://github.com/rickhanlonii) in [#28670](https://github.com/facebook/react/pull/28670)) * Remove module pattern function component support ([gnoff](https://github.com/gnoff) in [#27742](https://github.com/facebook/react/pull/27742)) * [RTR] Enable warning flag ([jackpope](https://github.com/jackpope) in [#28419](https://github.com/facebook/react/pull/28419)) * Update error messages ([rickhanlonii](https://github.com/rickhanlonii) in [#28652](https://github.com/facebook/react/pull/28652)) * fix[devtools/ci]: split profiling cache test for different react versions and toEqual checker ([hoxyq](https://github.com/hoxyq) in [#28628](https://github.com/facebook/react/pull/28628)) * Guard against legacy context not being supported in DevTools fixture ([eps1lon](https://github.com/eps1lon) in [#28596](https://github.com/facebook/react/pull/28596)) * Use `declare const` instead of `declare var` ([kassens](https://github.com/kassens) in [#28599](https://github.com/facebook/react/pull/28599)) * Update isConcurrent RTR option usage ([jackpope](https://github.com/jackpope) in [#28546](https://github.com/facebook/react/pull/28546)) * Disable legacy context ([kassens](https://github.com/kassens) in [#27991](https://github.com/facebook/react/pull/27991)) * Remove invokeGuardedCallback and replay trick ([sebmarkbage](https://github.com/sebmarkbage) in [#28515](https://github.com/facebook/react/pull/28515)) * Remove remaining usages of ReactTestUtils in tests unrelated to `react-dom/test-util` ([eps1lon](https://github.com/eps1lon) in [#28534](https://github.com/facebook/react/pull/28534)) * fix[devtools/e2e]: fixed source inspection in e2e tests ([hoxyq](https://github.com/hoxyq) in [#28518](https://github.com/facebook/react/pull/28518)) * Devtools: Display actual pending state when inspecting `useTransition` ([eps1lon](https://github.com/eps1lon) in [#28499](https://github.com/facebook/react/pull/28499)) |
||
|
Ruslan Lesiutin
|
6de7733e73 |
feat[devtools]: ship source maps for content scripts and ignore list installHook script (#28730)
## Summary 1. RDT browser extension's content scripts will now ship source maps (without source in prod, to save some bundle size). 2. `installHook` content script will be ignore listed via `ignoreList` field in the corresponding source map. 3. Previously, source map for backend file used `x_google_ignoreList` naming, now `ignoreList`. ## How did you test this change? 1. `ignoreList-test.js` 2. Tested manually that I don't see `installHook` in stack traces when `console.error` is called. |
||
|
Jan Kassens
|
6708115937 |
Use declare const instead of declare var (#28599)
Use `declare const` instead of `declare var` |
||
|
Ruslan Lesiutin
|
966d17483c |
React DevTools 5.0.1 -> 5.0.2 (#28496)
* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](https://github.com/facebook/react/pull/28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](https://github.com/facebook/react/pull/28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](https://github.com/facebook/react/pull/28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [#28468](https://github.com/facebook/react/pull/28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [#28321](https://github.com/facebook/react/pull/28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [#28477](https://github.com/facebook/react/pull/28477)) * [tests] add support for @gate pragma ([gnoff](https://github.com/gnoff) in [#28479](https://github.com/facebook/react/pull/28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](https://github.com/facebook/react/pull/28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [#24580](https://github.com/facebook/react/pull/24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](https://github.com/facebook/react/pull/28415)) |
||
|
Ruslan Lesiutin
|
e5287287aa |
feat[devtools]: symbolicate source for inspected element (#28471)
Stacked on https://github.com/facebook/react/pull/28351, please review only the last commit. Top-level description of the approach: 1. Once user selects an element from the tree, frontend asks backend to return the inspected element, this is where we simulate an error happening in `render` function of the component and then we parse the error stack. As an improvement, we should probably migrate from custom implementation of error stack parser to `error-stack-parser` from npm. 2. When frontend receives the inspected element and this object is being propagated, we create a Promise for symbolicated source, which is then passed down to all components, which are using `source`. 3. These components use `use` hook for this promise and are wrapped in Suspense. Caching: 1. For browser extension, we cache Promises based on requested resource + key + column, also added use of `chrome.devtools.inspectedWindow.getResource` API. 2. For standalone case (RN), we cache based on requested resource url, we cache the content of it. |
||
|
Ruslan Lesiutin
|
288cf747c9 |
React DevTools 5.0.0 -> 5.0.1 (#28418)
Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](https://github.com/facebook/react/pull/28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](https://github.com/facebook/react/pull/28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](https://github.com/facebook/react/pull/28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [#28348](https://github.com/facebook/react/pull/28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [#28320](https://github.com/facebook/react/pull/28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](https://github.com/facebook/react/pull/28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [#28318](https://github.com/facebook/react/pull/28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [#28226](https://github.com/facebook/react/pull/28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](https://github.com/facebook/react/pull/28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](https://github.com/facebook/react/pull/28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [#28296](https://github.com/facebook/react/pull/28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [#28273](https://github.com/facebook/react/pull/28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](https://github.com/facebook/react/pull/28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [#28265](https://github.com/facebook/react/pull/28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [#28246](https://github.com/facebook/react/pull/28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28218](https://github.com/facebook/react/pull/28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [#28254](https://github.com/facebook/react/pull/28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [#28219](https://github.com/facebook/react/pull/28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28216](https://github.com/facebook/react/pull/28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](https://github.com/facebook/react/pull/28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [#28241](https://github.com/facebook/react/pull/28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [#28243](https://github.com/facebook/react/pull/28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28236](https://github.com/facebook/react/pull/28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28237](https://github.com/facebook/react/pull/28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [#28242](https://github.com/facebook/react/pull/28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [#28240](https://github.com/facebook/react/pull/28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [#28239](https://github.com/facebook/react/pull/28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [#28245](https://github.com/facebook/react/pull/28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [#28244](https://github.com/facebook/react/pull/28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [#28238](https://github.com/facebook/react/pull/28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [#28235](https://github.com/facebook/react/pull/28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [#28221](https://github.com/facebook/react/pull/28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [#28215](https://github.com/facebook/react/pull/28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [#28214](https://github.com/facebook/react/pull/28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [#28213](https://github.com/facebook/react/pull/28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [#28212](https://github.com/facebook/react/pull/28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [#28211](https://github.com/facebook/react/pull/28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28210](https://github.com/facebook/react/pull/28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28186](https://github.com/facebook/react/pull/28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](https://github.com/facebook/react/pull/28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](https://github.com/facebook/react/pull/27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [#28160](https://github.com/facebook/react/pull/28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [#27871](https://github.com/facebook/react/pull/27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [#27842](https://github.com/facebook/react/pull/27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [#27804](https://github.com/facebook/react/pull/27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [#27805](https://github.com/facebook/react/pull/27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [#27790](https://github.com/facebook/react/pull/27790)) |
||
|
Ruslan Lesiutin
|
87cb0bf182 |
React DevTools 4.28.5 -> 5.0.0 (#27759)
### Breaking * refactor[devtools]: highlight an array of elements for native ([hoxyq](https://github.com/hoxyq) in [#27734](https://github.com/facebook/react/pull/27734)) ### Features * feat[devtools]: display Forget badge for the relevant components ([hoxyq](https://github.com/hoxyq) in [#27709](https://github.com/facebook/react/pull/27709)) ### Other * Added windows powershell syntax to build scripts ([PrathamLalwani](https://github.com/PrathamLalwani) in [#27692](https://github.com/facebook/react/pull/27692)) * refactor[react-devtools-shared]: minor parsing improvements and modifications ([hoxyq](https://github.com/hoxyq) in [#27661](https://github.com/facebook/react/pull/27661)) |