Ruslan Lesiutin
3cde211b0c
React DevTools 7.0.0 -> 7.0.1 ( #34926 )
...
Full list of changes:
* Text layout fixes for stack traces with badges
([eps1lon](https://github.com/eps1lon ) in
[#34925 ](https://github.com/facebook/react/pull/34925 ))
* chore: read from build/COMMIT_SHA fle as fallback for commit hash
([hoxyq](https://github.com/hoxyq ) in
[#34915 ](https://github.com/facebook/react/pull/34915 ))
* fix: dont ship source maps for css in prod builds
([hoxyq](https://github.com/hoxyq ) in
[#34913 ](https://github.com/facebook/react/pull/34913 ))
* Lower case "rsc stream" debug info
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34921 ](https://github.com/facebook/react/pull/34921 ))
* BuiltInCallSite should have padding-left
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34922 ](https://github.com/facebook/react/pull/34922 ))
* Show the Suspense boundary name in the rect if there's no overlap
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34918 ](https://github.com/facebook/react/pull/34918 ))
* Don't attach filtered IO to grandparent Suspense
([eps1lon](https://github.com/eps1lon ) in
[#34916 ](https://github.com/facebook/react/pull/34916 ))
* Infer name from stack if it's the generic "lazy" name
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34907 ](https://github.com/facebook/react/pull/34907 ))
* Use same Suspense naming heuristics when reconnecting
([eps1lon](https://github.com/eps1lon ) in
[#34898 ](https://github.com/facebook/react/pull/34898 ))
* Assign a different color and label based on environment
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34893 ](https://github.com/facebook/react/pull/34893 ))
* Compute environment names for the timeline
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34892 ](https://github.com/facebook/react/pull/34892 ))
* Don't highlight the root rect if no roots has unique suspenders
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34885 ](https://github.com/facebook/react/pull/34885 ))
* Highlight the rect when the corresponding timeline bean is hovered
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34881 ](https://github.com/facebook/react/pull/34881 ))
* Repeat the "name" if there's no short description in groups
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34894 ](https://github.com/facebook/react/pull/34894 ))
* Tweak the rects design and create multi-environment color scheme
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34880 ](https://github.com/facebook/react/pull/34880 ))
* Adjust the rects size by one pixel smaller
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34876 ](https://github.com/facebook/react/pull/34876 ))
* Remove steps title from scrubber
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34878 ](https://github.com/facebook/react/pull/34878 ))
* Include some sub-pixel precision in rects
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34873 ](https://github.com/facebook/react/pull/34873 ))
* Don't pluralize if already plural
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34870 ](https://github.com/facebook/react/pull/34870 ))
* Don't try to load anonymous or empty urls
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34869 ](https://github.com/facebook/react/pull/34869 ))
* Add inspection button to Suspense tab
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34867 ](https://github.com/facebook/react/pull/34867 ))
* Don't select on hover ([sebmarkbage](https://github.com/sebmarkbage )
in [#34860 ](https://github.com/facebook/react/pull/34860 ))
* Don't highlight on timeline
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34861 ](https://github.com/facebook/react/pull/34861 ))
* The bridge event types should only be defined in one direction
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34859 ](https://github.com/facebook/react/pull/34859 ))
* Attempt at a better "unique suspender" text
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34854 ](https://github.com/facebook/react/pull/34854 ))
* Track whether a boundary is currently suspended and make transparent
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34853 ](https://github.com/facebook/react/pull/34853 ))
* Don't hide overflow rectangles
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34852 ](https://github.com/facebook/react/pull/34852 ))
* Measure text nodes ([sebmarkbage](https://github.com/sebmarkbage ) in
[#34851 ](https://github.com/facebook/react/pull/34851 ))
* Don't measure fallbacks when suspended
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34850 ](https://github.com/facebook/react/pull/34850 ))
* Filter out built-in stack frames
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34828 ](https://github.com/facebook/react/pull/34828 ))
* Exclude Suspense boundaries in hidden Activity
([eps1lon](https://github.com/eps1lon ) in
[#34756 ](https://github.com/facebook/react/pull/34756 ))
* Group consecutive suspended by rows by the same name
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34830 ](https://github.com/facebook/react/pull/34830 ))
* Preserve the original index when sorting suspended by
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34829 ](https://github.com/facebook/react/pull/34829 ))
* Don't show the root as being non-compliant
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34827 ](https://github.com/facebook/react/pull/34827 ))
* Ignore suspense boundaries, without visual representation, in the
timeline ([sebmarkbage](https://github.com/sebmarkbage ) in
[#34824 ](https://github.com/facebook/react/pull/34824 ))
* Explicitly say which id to scroll to and only once
([sebmarkbage](https://github.com/sebmarkbage ) in
[#34823 ](https://github.com/facebook/react/pull/34823 ))
* devtools: fix ellipsis truncation for key values
([sophiebits](https://github.com/sophiebits ) in
[#34796 ](https://github.com/facebook/react/pull/34796 ))
* fix(devtools): remove duplicated "Display density" field in General
settings ([Anatole-Godard](https://github.com/Anatole-Godard ) in
[#34792 ](https://github.com/facebook/react/pull/34792 ))
* Gate SuspenseTab ([hoxyq](https://github.com/hoxyq ) in
[#34754 ](https://github.com/facebook/react/pull/34754 ))
* Release `<ViewTransition />` to Canary
([eps1lon](https://github.com/eps1lon ) in
[#34712 ](https://github.com/facebook/react/pull/34712 ))
2025-10-20 18:39:28 +01:00
Sebastian "Sebbie" Silbermann
614a945d9d
React DevTools 7.0.0 ( #34692 )
...
[Preview](https://github.com/eps1lon/react/blob/sebbie/09-28-react_devtools_7.0.0/packages/react-devtools/CHANGELOG.md#700 )
Suspense tab is omitted since that's gated on Canary or 19.3.
Will draft a separate blog post for suspended by and open-in-editor
instructions while the extension is in review.
2025-10-03 18:48:28 +01:00
Sebastian "Sebbie" Silbermann
128abcfa01
[DevTools] Don't inline workers for extensions ( #34508 )
2025-09-17 17:59:55 +02:00
Sebastian Markbåge
142fd27bf6
[DevTools] Add Option to Open Local Files directly in External Editor ( #33983 )
...
The `useOpenResource` hook is now used to open links. Currently, the
`<>` icon for the component stacks and the link in the bottom of the
components stack. But it'll also be used for many new links like stacks.
If this new option is configured, and this is a local file then this is
opened directly in the external editor. Otherwise it fallbacks to open
in the Sources tab or whatever the standalone or inline is configured to
use.
<img width="453" height="252" alt="Screenshot 2025-07-24 at 4 09 09 PM"
src="https://github.com/user-attachments/assets/04cae170-dd30-4485-a9ee-e8fe1612978e "
/>
I prominently surface this option in the Source pane to make it
discoverable.
<img width="588" height="144" alt="Screenshot 2025-07-24 at 4 03 48 PM"
src="https://github.com/user-attachments/assets/0f3a7da9-2fae-4b5b-90ec-769c5a9c5361 "
/>
When this is configured, the "Open in Editor" is hidden since that's
just the default. I plan on deprecating this button to avoid having the
two buttons going forward.
Notably there's one exception where this doesn't work. When you click an
Action or Event listener it takes you to the Sources tab and you have to
open in editor from there. That's because we use the `inspect()`
mechanism instead of extracting the source location. That's because we
can't do the "throw trick" since these can have side-effects. The Chrome
debugger protocol would solve this but it pops up an annoying dialog. We
could maybe only attach the debugger only for that case. Especially if
the dialog disappears before you focus on the browser again.
2025-07-25 10:16:43 -04:00
Sebastian Markbåge
7513996f20
[DevTools] Unify by using ReactFunctionLocation type instead of Source ( #33955 )
...
In RSC and other stacks now we use a lot of `ReactFunctionLocation` type
to represent the location of a function. I.e. the location of the
beginning of the function (the enclosing line/col) that is represented
by the "Source" of the function. This is also what the parent Component
Stacks represents.
As opposed to `ReactCallSite` which is what normal stack traces and
owner stacks represent. I.e. the line/column number of the callsite into
the next function.
We can start sharing more code by using the `ReactFunctionLocation` type
to represent the component source location and it also helps clarify
which ones are function locations and which ones are callsites as we
start adding more stack traces (e.g. for async debug info and owner
stack traces).
2025-07-22 10:53:08 -04:00
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 ))
2025-07-04 16:31:00 +01:00
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 ))
2025-07-04 12:55:53 +01:00
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 ))
2025-06-27 16:17:08 +01:00
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
2025-06-02 21:42:34 -07:00
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 ))
2025-05-08 08:01:17 +01:00
Ruslan Lesiutin
44c3d3d665
fix[react-devtools-standalone]: define missing globals ( #32327 )
...
Same as what we did for `react-devtools-fusebox` in
https://github.com/facebook/react/pull/32297 .
2025-02-07 11:07:46 +00:00
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 ))
2025-02-07 10:54:44 +00:00
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 ))
2025-01-16 17:07:03 +00:00
Ruslan Lesiutin
89dbd487fc
fix[DevTools]: fix HostComponent naming in filters for Native ( #32086 )
...
Right now we mention DOM elements as Host elements for React Native,
which doesn't make sense.
2025-01-16 14:17:06 +00:00
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 ))
2024-10-15 14:15:26 +01:00
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.
2024-10-09 13:57:02 +01:00
Ruslan Lesiutin
40357fe630
fix[react-devtools]: request hook initialization inside http server response ( #31102 )
...
Fixes https://github.com/facebook/react/issues/31100 .
There are 2 things:
1. In https://github.com/facebook/react/pull/30987 , we've introduced a
breaking change: importing `react-devtools-core` is no longer enough for
installing React DevTools global Hook. You need to call `initialize`, in
which you may provide initial settings. I am not adding settings here,
because it is not implemented, and there are no plans for supporting
this.
2. Calling `installHook` is not necessary inside `standalone.js`,
because this script is running inside Electron wrapper (which is just a
UI, not the app that we are debugging). We will loose the ability to use
React DevTools on this React application, but I guess thats fine.
2024-10-01 14:03:48 +01:00
Edmond Chui
204a551eae
Add: reload to profile for Fusebox ( #31021 )
...
## Summary
Add reload to profile for Fusebox
Stacked on #31048 . See
6be1977112https://www.internalfb.com/diff/D63233256 )
2024-09-26 16:39:51 +01:00
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
2024-09-26 12:39:28 +01:00
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 ))
2024-09-25 14:38:34 +01:00
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`.
2024-09-19 15:47:25 +01:00
Ruslan Lesiutin
a86afe8e56
feat: expose installHook with settings argument from react-devtools-core/backend ( #30987 )
...
Stacked on https://github.com/facebook/react/pull/30986 .
Previously, we would call `installHook` at a top level of the JavaScript
module. Because of this, having `require` statement for
`react-devtools-core` package was enough to initialize the React
DevTools global hook on the `window`.
Now, the Hook can actually receive an argument - initial user settings
for console patching. We expose this as a function `initialize`, which
can be used by third parties (including React Native) to provide the
persisted settings.
The README was also updated to reflect the changes.
2024-09-19 13:55:08 +01:00
Ruslan Lesiutin
f2c57a31e9
chore: remove settings manager from react-devtools-core ( #30986 )
...
Stacked on https://github.com/facebook/react/pull/30636 . See [this
commit](20cec76c44
2024-09-18 18:30:32 +01:00
Ruslan Lesiutin
e33acfd67f
refactor[react-devtools]: propagate settings from global hook object to frontend ( #30610 )
...
Stacked on https://github.com/facebook/react/pull/30597 and whats under
it. See [this
commit](59b4efa723https://github.com/facebook/react/pull/30596 ) to the UI. Instead of
reading from `localStorage` the frontend is now requesting it from the
hook. This happens when settings modal is rendered, and wrapped in a
transition. Also, this is happening even if settings modal is not opened
yet, so we have enough time to fetch this data without displaying loader
or similar UI.
2024-09-18 18:19:01 +01:00
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](374fd737e4
2024-09-18 18:12:18 +01:00
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:
40be968257/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js (L117-L120)
2024-09-18 18:02:13 +01:00
Rune Botten
394e75d9a9
[DevTools] Increase max payload for websocket in standalone app ( #30848 )
...
<!--
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
<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->
When debugging applications that are experiencing runaway re-rendering,
it is helpful to profile them in the React Developer Tools.
Unfortunately there is a size limit on the captured profile which can
make them impossible to inspect or save. The limitations I have found
are in `postMessage` for the Chrome extension and in the `ws` websocket
server for the standalone app.
Profiling an app that produces a large profile artifact will simply show
that no profiling data was captured and output an error in the console,
here shown for the standalone app:
```text
standalone.js:92 [React DevTools] Error with websocket connection i {target: H, type: 'error', message: 'Max payload size exceeded', error: RangeError: Max payload size exceeded
at e.exports.haveLength (/Users/rune/.npm/_npx/8ea6ac5c50…}error: RangeError: Max payload size exceeded
```
This change simply increases the max payload of the websocket server in
the standalone app so that larger profiles may be captured and
inspected.
## 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.
-->
I verified that I could capture and inspect profiling data that
previously exceeded the default limitation for a particular app
2024-08-30 10:34:27 +01:00
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.
2024-08-02 10:51:15 +01:00
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.
2024-07-08 18:42:58 -04:00
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 ))
2024-07-03 11:46:46 +01:00
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 ))
2024-06-18 12:12:27 +01:00
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 | 
| 
|
2024-06-17 16:31:36 +01:00
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
2024-06-13 15:37:51 +01:00
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 ">
2024-06-06 17:48:44 +01:00
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 ">
2024-06-06 17:10:40 +01:00
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 ))
2024-05-08 13:26:14 +01:00
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 ))
2024-04-15 14:56:57 +01:00
Ruslan Lesiutin
d012a32f84
feat[devtools]: add method for connecting backend with custom messaging protocol ( #28552 )
...
## Summary
RDT backend will now expose method `connectWithCustomMessagingProtocol`,
which will be similar to the classic `connectToDevTools` one, but with
few differences:
1. It delegates the communication management between frontend and
backend to the owner (whos injecting RDT backend). Unlike the
`connectToDevTools`, which is relying on websocket connection and
receives host and port as an arguments.
2. It returns a callback, which can be used for unsubscribing the
current backend instance from the global DevTools hook.
This is a prerequisite for any non-browser RDT integration, which is not
designed to be based on websocket.
2024-04-12 15:17:07 +01:00
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 ))
2024-03-05 14:11:30 +00:00
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.
2024-03-05 12:32:11 +00:00
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.
2024-03-05 12:10:36 +00:00
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 ))
2024-02-22 19:45:55 +00:00
Jan Kassens
f498aa2992
Flow: make more objects exact ( #27790 )
...
This makes a couple objects more exact. Nothing critical, just noticed
this old branch I had created when doing some Flow upgrades in the past.
2023-12-04 16:10:36 -05:00
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 ))
2023-11-29 18:27:53 +00:00
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 ))
2023-10-18 14:08:23 +01:00
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.
af8beeebf6/packages/react-devtools-shared/src/backendAPI.js (L96)
2023-10-10 18:10:17 +01:00
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 ))
2023-09-25 13:24:52 -04:00
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 ))
2023-09-05 18:58:27 +01:00
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 ))
2023-08-30 19:47:08 +01:00
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 ))
2023-08-29 13:37:35 +01:00
