Ruslan Lesiutin and GitHub
3025d58379
[DevTools] Harden Bridge and Wall lifecycle types ( #37049 )
...
Builds on #37048 by replacing `any`-based Bridge and Wall boundaries
with typed `mixed` values and explicit runtime validation. Invalid
messages and post-shutdown operations now throw, while shutdown reliably
flushes queued messages even if cleanup fails.
Strengthens the DevTools Bridge and Wall contracts:
- Models event dictionaries as event-to-payload maps, using `void` for
events without payloads.
- Types `send(event, payload?)` directly, eliminating runtime
payload-arity handling.
- Replaces broad `any` transport types with `mixed` and boundary
validation.
- Throws on invalid lifecycle usage instead of warning or silently
returning.
- Ensures shutdown flushes queued messages even when Wall cleanup fails.
- Updates Wall implementations and adds Bridge lifecycle coverage.
2026-07-23 10:39:15 +01:00
BIKI DAS and GitHub
aa4358de54
[DevTools] Make component search results directly navigable ( #36786 )
...
## Summary
In a large react app, especially when components having similar starting
names like Table, TableColumn, TableCell, TableRow all together 100+
components when rendered in a virtualized table. Traversing the search
result is sometimes difficult with scroll
The component tree search only let you step through matches one at a
time (Enter / Shift+Enter). In large apps with many similarly-named
components (Table, TableRow, TableCell, ...) a search can return 100+
matches in a virtualized list, making a specific match tedious to reach.
- the result counter is an editable, live-scrubbing
index field: typing a number scrolls to that match as you type
(clamped to range)
- Fixes re-search getting stuck, clearing the box and retyping the same
term while a match was still selected snapped back to that same
component. It now advances to the next match (find-next semantics).
## How did you test this change?
Adds a SearchableTable example to the DevTools shell and unit tests for
the new action and the retype behavior.
https://github.com/user-attachments/assets/7ea9801a-7bcb-4e8f-bf73-a5307a0fdbae
cc @hoxyq Let me know what do you feel about this feature, if its
helpful for devtools.
2026-07-06 14:59:51 +01:00
Sebastian "Sebbie" Silbermann and GitHub
f8aaaaef11
Update required references to GitHub repo ( #36752 )
2026-06-12 09:50:15 +02:00
Sam Zhou and GitHub
4cc753e62f
[flow] Bump flow to v0.317.0 ( #36701 )
...
## Summary
Mostly changing the casting syntax from `(x: Y)` to `x as Y`, as the old
syntax was deprecated and always causing an error in Flow
## How did you test this change?
`yarn flow-ci`
2026-06-05 19:17:18 -04:00
Ruslan Lesiutin and GitHub
a3c56f2a29
[DevTools] Remove experimental __IS_INTERNAL_MCP_BUILD__ flag and related code ( #35755 )
...
This is unused.
2026-02-11 16:59:43 +00:00
Sebastian "Sebbie" Silbermann and GitHub
f49e0a25cb
[DevTools] Apply component filters on initial load ( #35587 )
2026-01-26 11:06:04 +01:00
Sebastian "Sebbie" Silbermann and GitHub
4337f132b1
[DevTools] Stop setting unused global variables ( #35532 )
2026-01-16 16:13:29 +01:00
7cdeeb16eb
Devtools disable log dimming strict mode setting ( #35207 )
...
<!--
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`).
-->
## Summary
Currently, every second console log is dimmed, receiving a special style
that indicates to user that it was raising because of [React Strict
Mode](https://react.dev/reference/react/StrictMode ) second rendering.
This introduces a setting to disable this.
## How did you test this change?
Test in console-test.js
https://github.com/user-attachments/assets/af6663ac-f79b-4824-95c0-d46b0c8dec12
Browser extension react devtools
https://github.com/user-attachments/assets/7e2ecb7a-fbdf-4c72-ab45-7e3a1c6e5e44
React native dev tools:
https://github.com/user-attachments/assets/d875b3ac-1f27-43f8-8d9d-12b2d65fa6e6
---------
Co-authored-by: Ruslan Lesiutin <[email protected]
2025-12-15 13:41:43 +00:00
Ruslan Lesiutin and GitHub
6e695c85ec
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 and GitHub
cda83764c5
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
Ruslan Lesiutin and GitHub
d04c006d0a
[DevTools] Switch sourcemap-codec dependency ( #34569 )
...
[sourcemap-codec](https://www.npmjs.com/package/sourcemap-codec )
(deprecated) ->
[@jridgewell/sourcemap-codec](https://www.npmjs.com/package/@jridgewell/sourcemap-codec )
Validated that symbolication still works.
2025-09-24 06:11:53 -07:00
Sebastian "Sebbie" Silbermann and GitHub
c93068f4bb
[DevTools] Don't inline workers for extensions ( #34508 )
2025-09-17 17:59:55 +02:00
Sebastian "Sebbie" Silbermann and GitHub
29bc70fcee
[DevTools] Stop polyfilling Buffer ( #34512 )
2025-09-17 15:36:21 +02:00
Sebastian "Sebbie" Silbermann and GitHub
d1dd72c62d
Fix some DevTools regression test actions and assertions ( #34459 )
2025-09-15 15:31:58 +02:00
Jan Kassens and GitHub
16a1f65d70
Update Flow to 0.266 ( #34271 )
...
- replace `$ElementType` and `$PropertyType` with `T[K]` accesses.
- Use component types
2025-08-22 15:46:41 -04:00
Sebastian Markbåge and GitHub
b42a225d63
[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.
2025-08-11 11:41:30 -04:00
Sebastian Markbåge and GitHub
296240f8c5
[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.
2025-08-04 09:28:31 -04:00
Ruslan Lesiutin and GitHub
bbaf75f26e
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 and GitHub
eb7de110c2
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 and GitHub
4c75f2a880
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 and GitHub
8d896329a4
[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 and GitHub
c7d2db9c62
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
lauren and GitHub
d0767a49f0
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
2025-04-15 12:52:43 -04:00
Ruslan Lesiutin and GitHub
67ff17a146
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 and GitHub
85d149f22f
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.
2025-02-05 12:52:48 +00:00
Ruslan Lesiutin and GitHub
5ca1348594
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 and GitHub
677e16ca76
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`.
2025-01-09 18:13:24 +00:00
Sam Zhou and GitHub
17ffa294b8
[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
2024-10-21 16:17:41 -07:00
Ruslan Lesiutin and GitHub
f27d7a0a60
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 and GitHub
08d2687d00
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
Edmond Chui and GitHub
6ef98cff25
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 and GitHub
d6a6e10ae5
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 and GitHub
b8e7ffed2e
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 and GitHub
6d3d0326e0
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.
2024-09-18 18:12:18 +01:00
Ruslan Lesiutin and GitHub
d4c92ecc61
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 and GitHub
682e21b4c4
[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 and GitHub
dfeb8c3fe6
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
Jan Kassens and GitHub
1e7da759a8
lint: enable reportUnusedDisableDirectives and remove unused suppressions ( #28721 )
...
This enables linting against unused suppressions and removes the ones
that were unused.
2024-06-21 12:24:32 -04:00
Ruslan Lesiutin and GitHub
83b41f29ca
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 and GitHub
a7b3372203
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
Ricky and GitHub
a8210b2a37
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
2024-06-10 14:31:37 -04:00
Vitali Zaidman and GitHub
e48b54c45d
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 and GitHub
dd689f316f
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 and GitHub
685346d50c
cleanup[react-devtools]: remove unused supportsProfiling flag from store config ( #29193 )
...
Looks like this is unused
2024-05-28 11:07:31 +01:00
Ruslan Lesiutin and GitHub
5e717e3943
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
2024-05-20 15:12:21 +01:00
Ruslan Lesiutin and GitHub
a5c9d54e1e
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 and GitHub
16e591d2aa
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 and GitHub
7f11f68d70
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/3b662bbc9ce7546168b5e778e7471de457f92084/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/3b662bbc9ce7546168b5e778e7471de457f92084/packages/react-devtools-inline/playwright.config.js#L15-L17
2024-03-07 17:59:37 +00:00
Ruslan Lesiutin and GitHub
dbdc0fb9eb
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 and GitHub
c90d686ec0
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
