mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
pr34276
202 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Jan Kassens
|
05addfc663 |
Update Flow to 0.266 (#34271)
- replace `$ElementType` and `$PropertyType` with `T[K]` accesses. - Use component types |
||
 Sebastian Markbåge
|
7a934a16b8 |
[DevTools] Show Owner Stacks in "rendered by" View (#34130)
This shows the stack trace of the JSX at each level so now you can also jump to the code location for the JSX callsite. The visual is similar to the owner stacks with `createTask` except when you click the `<...>` you jump to the Instance in the Components panel. <img width="593" height="450" alt="Screenshot 2025-08-08 at 12 19 21 AM" src="https://github.com/user-attachments/assets/dac35faf-9d99-46ce-8b41-7c6fe24625d2" /> I'm not sure it's really necessary to have all the JSX stacks of every owner. We could just have it for the current component and then the rest of the owners you could get to if you just click that owner instance. As a bonus, I also use the JSX callsite as the fallback for the "View Source" button. This is primarily useful for built-ins like `<div>` and `<Suspense>` that don't have any implementation to jump to anyway. It's useful to be able to jump to where a boundary was defined. |
||
|
Sebastian Markbåge
|
d3f800d47a |
[DevTools] Style clickable Owner components with angle brackets and bold (#34096)
We have two type of links that appear next to each other now. One type of link jumps to a Component instance in the DevTools. The other opens a source location - e.g. in your editor. This clarifies that something will jump to the Component instance by marking it as bold and using angle brackets around the name. This can be seen in the "rendered by" list of owner as well as in the async stack traces when the stack was in a different owner than the one currently selected. <img width="516" height="387" alt="Screenshot 2025-08-03 at 11 27 38 PM" src="https://github.com/user-attachments/assets/5da50262-1e74-4e46-a6f8-96b4c1e4db31" /> The idea is to connect this styling to the owner stacks using `createTask` where this same pattern occurs (albeit the task name is not clickable): <img width="454" height="188" alt="Screenshot 2025-08-03 at 11 23 45 PM" src="https://github.com/user-attachments/assets/81a55c8f-963a-4fda-846a-97f49ef0c469" /> In fact, I was going to add the stack traces to the "rendered by" list to give the ability to jump to the JSX location in the owner stack so that it becomes this same view. |
||
 Ruslan Lesiutin
|
5d87cd2244 |
React DevTools 6.1.4 -> 6.1.5 (#33702)
Same as 6.1.4, but with 2 hotfixes: * fix: check if profiling for all profiling hooks ([hoxyq](https://github.com/hoxyq) in [#33701](https://github.com/facebook/react/pull/33701)) * fix: fallback to reading string stack trace when failed ([hoxyq](https://github.com/hoxyq) in [#33700](https://github.com/facebook/react/pull/33700)) |
||
|
Ruslan Lesiutin
|
9fd4c09d68 |
React DevTools 6.1.3 -> 6.1.4 (#33699)
Changes from 6.1.3: * feat: static Components panel layout ([hoxyq](https://github.com/hoxyq) in [#33696](https://github.com/facebook/react/pull/33696)) * fix: support optionality of structured stack trace function name ([hoxyq](https://github.com/hoxyq) in [#33697](https://github.com/facebook/react/pull/33697)) * fix: rename bottom stack frame ([hoxyq](https://github.com/hoxyq) in [#33680](https://github.com/facebook/react/pull/33680)) |
||
|
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)) |
||
 lauren
|
2ed34eba0d |
Update @playwright/test (#32917)
Routine update. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/32917). * #32918 * __->__ #32917 |
||
|
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
|
d85cf3e5ab |
DevTools: refactor NativeStyleEditor, don't use custom cache implementation (#32298)
We have this really old (5+ years) feature for inspecting native styles of React Native Host components. We also have a custom Cache implementation in React DevTools, which was forked from React at some point. We know that this should be removed, but it spans through critical parts of the application, like fetching and caching inspected element. Before this PR, this was also used for caching native style and layouts of RN Host components. This approach is out of date, and was based on the presence of Suspense boundary around inspected element View, which we have removed to speed up element inspection - https://github.com/facebook/react/pull/30555. Looks like I've introduced a regression in https://github.com/facebook/react/pull/31956: - Custom Cache implementation will throw thenables and suspend. - Because of this, some descendant Suspense boundaries will not resolve for a long time, and React will throw an error https://react.dev/errors/482. I've switched from a usage of this custom Cache implementation to a naive fetching in effect and keeping the layout and style in a local state of a Context, which will be propagated downwards. The race should be impossible, this is guaranteed by the mechanism for queueing messages through microtasks queue. The only downside is the UI. If you quickly switch between 2 elements, and one of them has native style, while the other doesn't, UI will feel jumpy. We can address this later with a Suspense boundary, if needed. |
||
|
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)) |
||
|
Ruslan Lesiutin
|
d634548243 |
DevTools: merge element fields in TreeStateContext (#31956)
Stacked on https://github.com/facebook/react/pull/31892, see commit on top. For some reason, there were 2 fields different fields for essentially same thing: `selectedElementID` and `inspectedElementID`. Basically, the change is: ``` selectedElementID -> inspectedElementID selectedElementIndex -> inspectedElementIndex ``` I have a theory that it was due to previously used async approach around element inspection, and the whole `InspectedElementView` was wrapped in `Suspense`. |
||
 Sam Zhou
|
45804af18d |
[flow] Eliminate usage of more than 1-arg React.AbstractComponent in React codebase (#31314)
<!-- 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 order to adopt react 19's ref-as-prop model, Flow needs to eliminate all the places where they are treated differently. `React.AbstractComponent` is the worst example of this, and we need to eliminate it. This PR eliminates them from the react repo, and only keeps the one that has 1 argument of props. ## How did you test this change? yarn flow |
||
|
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. |
||
 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
|
e740d4b14b |
chore: remove using local storage for persisting console settings on the frontend (#31002)
After https://github.com/facebook/react/pull/30636 and https://github.com/facebook/react/pull/30986 we no longer store settings on the Frontend side via `localStorage`. This PR removes all occurrences of it from `react-devtools-core/standalone` and `react-devtools-inline`. |
||
|
Ruslan Lesiutin
|
3cac0875dc |
refactor[react-devtools]: move console patching to global hook (#30596)
Stacked on https://github.com/facebook/react/pull/30566 and whats under it. See [this commit](https://github.com/facebook/react/pull/30596/commits/374fd737e4b0b7028afb765838db7c0e22def865). It is mostly copying code from one place to another and updating tests. With these changes, for every console method that we patch, there is going to be a single applied patch: - For `error`, `warn`, and `trace` we are patching when hook is installed. This guarantees that component stacks are going to be appended even if browser DevTools are not opened. We pay some price for it, though: if user has browser DevTools closed and if at this point some warning or error is emitted (logged), the next time user opens browser DevTools, they are going to see `hook.js` as the source frame. Unfortunately, ignore listing from source maps is not applied retroactively, and I don't know if its a bug or just a design limitations. Once browser DevTools are opened, source maps will be loaded and ignore listing will be applied for all emitted logs in the future. - For `log`, `info`, `group`, `groupCollapsed` we are only patching when React notifies React DevTools about running in StrictMode. We unpatch the methods right after it. |
||
|
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
|
491a4eacce |
[DevTools] Print component stacks as error objects to get source mapping (#30289)
Before: <img width="844" alt="Screenshot 2024-07-04 at 3 20 34 PM" src="https://github.com/facebook/react/assets/63648/0fd8a53f-538a-4429-a4cf-c22f85a09aa8"> After: <img width="845" alt="Screenshot 2024-07-05 at 6 08 28 PM" src="https://github.com/facebook/react/assets/63648/7b9da13a-fa97-4581-9899-06de6fface65"> Firefox: <img width="1338" alt="Screenshot 2024-07-05 at 6 09 50 PM" src="https://github.com/facebook/react/assets/63648/f2eb9f2a-2251-408f-86d0-b081279ba378"> The first log doesn't get a stack because it's logged before DevTools boots up and connects which is unfortunate. The second log already has a stack printed by React (this is on stable) it gets replaced by our object now. The third and following logs don't have a stack and get one appended. I only turn the stack into an error object if it matches what we would emit from DevTools anyway. Otherwise we assume it's not React. Since I had to change the format slightly to make this work, I first normalize the stack slightly before doing a comparison since it won't be 1:1. |
||
|
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)) |
||
|
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
|
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 |  |  | |
||
 Ricky
|
d172bdaf95 |
Add jest lint rules (#29760)
## Overview Updates `eslint-plugin-jest` and enables the recommended rules with some turned off that are unhelpful. The main motivations is: a) we have a few duplicated tests, which this found an I deleted b) making sure we don't accidentally commit skipped tests |
||
 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"> |
||
|
Vitali Zaidman
|
99da76f23a |
fix[react-devtools] remove native inspection button when it can't be used (#29779)
## Summary There's no native inspection available in any of the React-Native devtools: * **React DevTools in Fusebox** * **React DevTools standalone** Besides, **React DevTools Inline** can't really open the devtools and point to the native inspector because of lack of an API to do that. Only **React DevTools extension** can actually do that. That's why I've disabled it for the first 3 flavours of React DevTools mentioned above. ## How did you test this change? Still enabled on **React DevTools extension** <img width="1355" alt="Screenshot 2024-06-06 at 16 09 21" src="https://github.com/facebook/react/assets/5188459/a9b658a6-eafe-443c-9298-280bb9f4ed72"> Disabled on **React DevTools in Fusebox** <img width="1670" alt="Screenshot 2024-06-06 at 16 04 28" src="https://github.com/facebook/react/assets/5188459/a2ded76f-2aaf-47ce-b581-611494ca33bd"> Disabled on **React DevTools standalone** <img width="1268" alt="Screenshot 2024-06-06 at 16 15 08" src="https://github.com/facebook/react/assets/5188459/eb2f308d-32cb-43ea-921b-3503aa874d64"> Disabled on **React DevTools Inline** <img width="1206" alt="Screenshot 2024-06-06 at 16 09 26" src="https://github.com/facebook/react/assets/5188459/03da741a-66bf-4414-91f7-2f344c78a880"> |
||
|
Ruslan Lesiutin
|
6f23540c7d |
cleanup[react-devtools]: remove unused supportsProfiling flag from store config (#29193)
Looks like this is unused |
||
|
Ruslan Lesiutin
|
d14ce51327 |
refactor[react-devtools]: rewrite context menus (#29049)
## Summary - While rolling out RDT 5.2.0 on Fusebox, we've discovered that context menus don't work well with this environment. The reason for it is the context menu state implementation - in a global context we define a map of registered context menus, basically what is shown at the moment (see deleted Contexts.js file). These maps are not invalidated on each re-initialization of DevTools frontend, since the bundle (react-devtools-fusebox module) is not reloaded, and this results into RDT throwing an error that some context menu was already registered. - We should not keep such data in a global state, since there is no guarantee that this will be invalidated with each re-initialization of DevTools (like with browser extension, for example). - The new implementation is based on a `ContextMenuContainer` component, which will add all required `contextmenu` event listeners to the anchor-element. This component will also receive a list of `items` that will be displayed in the shown context menu. - The `ContextMenuContainer` component is also using `useImperativeHandle` hook to extend the instance of the component, so context menus can be managed imperatively via `ref`: `contextMenu.current?.hide()`, for example. - **Changed**: The option for copying value to clipboard is now hidden for functions. The reasons for it are: - It is broken in the current implementation, because we call `JSON.stringify` on the value, see `packages/react-devtools-shared/src/backend/utils.js`. - I don't see any reasonable value in doing this for the user, since `Go to definition` option is available and you can inspect the real code and then copy it. - We already filter out fields from objects, if their value is a function, because the whole object is passed to `JSON.stringify`. ## How did you test this change? ### Works with element props and hooks: - All context menu items work reliably for props items - All context menu items work reliably or hooks items https://github.com/facebook/react/assets/28902667/5e2d58b0-92fa-4624-ad1e-2bbd7f12678f ### Works with timeline profiler: - All context menu items work reliably: copying, zooming, ... - Context menu automatically closes on the scroll event https://github.com/facebook/react/assets/28902667/de744cd0-372a-402a-9fa0-743857048d24 ### Works with Fusebox: - Produces no errors - Copy to clipboard context menu item works reliably https://github.com/facebook/react/assets/28902667/0288f5bf-0d44-435c-8842-6b57bc8a7a24 |
||
|
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)) |
||
|
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
|
447fc27e36 |
fix[devtools/e2e]: fixed source inspection in e2e tests (#28518)
DevTools e2e tests started to fail after landing https://github.com/facebook/react/pull/28471: - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798270 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798275 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798271 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798274 - https://app.circleci.com/pipelines/github/facebook/react/50984/workflows/a7be25ed-9547-40e9-87bd-b14d9d2e87da/jobs/798269 There are 2 reasons for that: 1. Versions 16.0 and 16.5 use legacy renderer, which doesn't support source inspection by design: https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-shared/src/backend/legacy/renderer.js#L831 The corresponding e2e test is now gated for versions >=16.8 2. For other versions (>=16.8), the source is actually `e2e-app-regression.js`, because these regression tests open a different page (not the one we open for tests against React from source) https://github.com/facebook/react/blob/850fac4915864a487e7cb9ecae8a75dbac144174/packages/react-devtools-inline/playwright.config.js#L15-L17 |
||
|
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
|
61bd00498d |
refactor[devtools]: lazily define source for fiber based on component stacks (#28351)
`_debugSource` was removed in https://github.com/facebook/react/pull/28265. This PR migrates DevTools to define `source` for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree. `DevToolsComponentStackFrame.js` was just copy-pasted from the implementation in `ReactComponentStackFrame`. Symbolication part is done in https://github.com/facebook/react/pull/28471 and stacked on this commit. |
||
|
Ruslan Lesiutin
|
aa4eae6b99 |
fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly (#28486)
There is a weird behaviour in all shells of RDT: when user opens `Components` tab and scrolls down a tree (without any prior click or focus event), and then clicks on some element, the `click` event will not be fired. Because `click` event hasn't been fired, the `focus` event is fired for the whole list and we pre-select the first (root) element in the tree: https://github.com/facebook/react/blob/034130c02ffb47b0026059b57d17e9b080976ff3/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L217-L226 Check the demo (before) what is happening. I don't know exactly why `click` event is not fired there, but it only happens: 1. For elements, which were not previously rendered (for virtualization purposes). 2. When HTML-element (div), which represents the container for the tree was not focused previously. Unlike the `click` event, the `mousedown` event is fired consistently. ### Before https://github.com/facebook/react/assets/28902667/9f3ad75d-55d0-4c99-b2d0-ead63a120ea0 ### After https://github.com/facebook/react/assets/28902667/e34816be-644c-444c-8e32-562a79494e44 Tested that it works in all shells, including the select / deselect features (with `metaKey` param in event). |
||
|
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)) |
||
|
Sebastian Markbåge
|
37d901e2b8 |
Remove __self and __source location from elements (#28265)
Along with all the places using it like the `_debugSource` on Fiber. This still lets them be passed into `createElement` (and JSX dev runtime) since those can still be used in existing already compiled code and we don't want that to start spreading to DOM attributes. We used to have a DEV mode that compiles the source location of JSX into the compiled output. This was nice because we could get the actual call site of the JSX (instead of just somewhere in the component). It had a bunch of issues though: - It only works with JSX. - The way this source location is compiled is different in all the pipelines along the way. It relies on this transform being first and the source location we want to extract but it doesn't get preserved along source maps and don't have a way to be connected to the source hosted by the source maps. Ideally it should just use the mechanism other source maps use. - Since it's expensive it only works in DEV so if it's used for component stacks it would vary between dev and prod. - It only captures the callsite of the JSX and not the stack between the component and that callsite. In the happy case it's in the component but not always. Instead, we have another zero-cost trick to extract the call site of each component lazily only if it's needed. This ensures that component stacks are the same in DEV and PROD. At the cost of worse line number information. The better way to get the JSX call site would be to get it from `new Error()` or `console.createTask()` inside the JSX runtime which can capture the whole stack in a consistent way with other source mappings. We might explore that in the future. This removes source location info from React DevTools and React Native Inspector. The "jump to source code" feature or inspection can be made lazy instead by invoking the lazy component stack frame generation. That way it can be made to work in prod too. The filtering based on file path is a bit trickier. When redesigned this UI should ideally also account for more than one stack frame. With this change the DEV only Babel transforms are effectively deprecated since they're not necessary for anything. |
||
|
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)) |
||
|
Ruslan Lesiutin
|
20c91b6534 |
React DevTools 4.28.4 -> 4.28.5 (#27538)
Changes: * fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [#27472](https://github.com/facebook/react/pull/27472)) * useDeferredValue should skip initialValue if it suspends ([acdlite](https://github.com/acdlite) in [#27509](https://github.com/facebook/react/pull/27509)) * feat[react-devtools-extensions/logging]: initialize session id on the client for logging ([hoxyq](https://github.com/hoxyq) in [#27517](https://github.com/facebook/react/pull/27517)) * refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [#27516](https://github.com/facebook/react/pull/27516)) * fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [#27488](https://github.com/facebook/react/pull/27488)) |
||
|
Ruslan Lesiutin
|
77ec61885f |
fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs (#27488)
There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In https://github.com/facebook/react/pull/27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96 |
||
|
Ruslan Lesiutin
|
94d5b5b2bf |
React DevTools 4.28.3 -> 4.28.4 (#27419)
* refactor[devtools/extension]: refactored messaging logic across different parts of the extension ([hoxyq](https://github.com/hoxyq) in [#27417](https://github.com/facebook/react/pull/27417)) * fix[devtools/extension]: added a workaround for proxy content script injection in firefox ([hoxyq](https://github.com/hoxyq) in [#27375](https://github.com/facebook/react/pull/27375)) * fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful ([hoxyq](https://github.com/hoxyq) in [#27365](https://github.com/facebook/react/pull/27365)) * feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic ([hoxyq](https://github.com/hoxyq) in [#27373](https://github.com/facebook/react/pull/27373)) * feat:-Added a delete all filters action and added title to the add filter a… ([Biki-das](https://github.com/Biki-das) in [#27332](https://github.com/facebook/react/pull/27332)) * fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering ([hoxyq](https://github.com/hoxyq) in [#27369](https://github.com/facebook/react/pull/27369)) * refactor[devtools/extension]: more stable element updates polling to avoid timed out errors ([hoxyq](https://github.com/hoxyq) in [#27357](https://github.com/facebook/react/pull/27357)) * feat[devtools/extension]: add dark theme for popup ([rakleed](https://github.com/rakleed) in [#27330](https://github.com/facebook/react/pull/27330)) |
||
|
Ruslan Lesiutin
|
a374287fea |
React DevTools 4.28.2 -> 4.28.3 (#27337)
This is a patch version to fix some bugs in a previous internal release. I am expecting this one also to be internal-only, need to make sure that extension is stable in Chrome. Some changes and improvements are expected for Firefox, though, before going public. * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](https://github.com/facebook/react/pull/27336)) * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](https://github.com/facebook/react/pull/27323)) * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](https://github.com/facebook/react/pull/27320)) |
||
|
Ruslan Lesiutin
|
3808b01b3a |
React DevTools 4.28.1 -> 4.28.2 (#27318)
List of changes: * fix[devtools/extension]: handle tab navigation events before react is loaded ([hoxyq](https://github.com/hoxyq) in [#27316](https://github.com/facebook/react/pull/27316)) |
||
|
Ruslan Lesiutin
|
2f368725fb |
React DevTools 4.28.0 -> 4.28.1 (#27305)
List of changes: * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [#27215](https://github.com/facebook/react/pull/27215)) * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [#27304](https://github.com/facebook/react/pull/27304)) * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [#27067](https://github.com/facebook/react/pull/27067)) * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [#27179](https://github.com/facebook/react/pull/27179)) * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [#27147](https://github.com/facebook/react/pull/27147)) * Feat:-Added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [#26949](https://github.com/facebook/react/pull/26949)) * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [#27057](https://github.com/facebook/react/pull/27057)) * rename SuspenseList export to unstable_SuspenseList ([noahlemen](https://github.com/noahlemen) in [#27061](https://github.com/facebook/react/pull/27061)) |
||
|
Ruslan Lesiutin
|
035a41c4e2 |
React DevTools 4.27.8 -> 4.28.0 (#27051)
List of changes: * Devtools:-Removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](https://github.com/facebook/react/pull/27032)) * fix[devtools/profilingCache-test]: specify correct version gate for test ([hoxyq](https://github.com/hoxyq) in [#27008](https://github.com/facebook/react/pull/27008)) * fix[devtools/ci]: fixed incorrect condition calculation for @reactVersion annotation ([hoxyq](https://github.com/hoxyq) in [#26997](https://github.com/facebook/react/pull/26997)) * fix[ci]: fixed jest configuration not to skip too many devtools tests ([hoxyq](https://github.com/hoxyq) in [#26955](https://github.com/facebook/react/pull/26955)) * fix[devtools/standalone]: update webpack configurations ([hoxyq](https://github.com/hoxyq) in [#26963](https://github.com/facebook/react/pull/26963)) * fix[devtools]: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](https://github.com/facebook/react/pull/26983)) * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](https://github.com/facebook/react/pull/26951)) * chore[devtools]: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](https://github.com/facebook/react/pull/26887)) * fix[devtools]: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](https://github.com/facebook/react/pull/26947)) * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](https://github.com/facebook/react/pull/25510)) * Fix:- Fixed dev tools inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](https://github.com/facebook/react/pull/26888)) * Updated copyright text to Copyright (c) Meta Platforms, Inc. and its … ([denmo530](https://github.com/denmo530) in [#26830](https://github.com/facebook/react/pull/26830)) * Fix strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](https://github.com/facebook/react/pull/26825)) |
||
|
Ruslan Lesiutin
|
4ddc019aca |
chore[devtools]: upgrade to webpack v5 (#26887)
## Summary - Updated `webpack` (and all related packages) to v5 in `react-devtools-*` packages. - I haven't touched any `TODO (Webpack 5)`. Tried to poke it, but each my attempt failed and parsing hook names feature stopped working. I will work on this in a separate PR. - This work is one of prerequisites for updating Firefox extension to manifests v3 related PRs: https://github.com/facebook/react/pull/22267 https://github.com/facebook/react/pull/26506 ## How did you test this change? Tested on all surfaces, explicitly checked that parsing hook names feature still works. |
||
|
Ruslan Lesiutin
|
2468a87358 |
React DevTools 4.27.7 -> 4.27.8 (#26823)
Closes https://github.com/facebook/react/issues/26787, https://github.com/facebook/react/issues/26793 Includes these changes: * fix[devtools]: fixed duplicated backend activation with multiple renderers ([hoxyq](https://github.com/hoxyq) in [#26807](https://github.com/facebook/react/pull/26807)) |
||
|
Ruslan Lesiutin
|
783e7fcfa3 |
React DevTools 4.27.6 -> 4.27.7 (#26780)
List of changes: * DevTools: fix backend activation ([hoxyq](https://github.com/hoxyq) in [#26779](https://github.com/facebook/react/pull/26779)) * fix[dynamic-scripts-injection]: unregister content scripts before registration ([hoxyq](https://github.com/hoxyq) in [#26765](https://github.com/facebook/react/pull/26765)) |