Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[DevTools] Filter Server Components #30839

Merged
merged 1 commit into from
Aug 29, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Aug 28, 2024

Support filtering Virtual Instances with existing filters.

Server Components are considered "Functions".

In a follow up I'll a new filter for "Environment" which will let you filter by Client vs Server (and more).

@sebmarkbage sebmarkbage requested a review from hoxyq August 28, 2024 20:35
Copy link

vercel bot commented Aug 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 28, 2024 8:37pm

@sebmarkbage sebmarkbage merged commit 61739a8 into facebook:main Aug 29, 2024
184 checks passed
gnoff pushed a commit to vercel/next.js that referenced this pull request Sep 12, 2024
**breaking change for canary users: Bumps peer dependency of React from
`19.0.0-rc-7771d3a7-20240827` to `19.0.0-rc-94e652d5-20240912`**

[diff
facebook/react@7771d3a7...94e652d5](facebook/react@7771d3a...94e652d)

<details>
<summary>React upstream changes</summary>

- facebook/react#30952
- facebook/react#30950
- facebook/react#30946
- facebook/react#30934
- facebook/react#30947
- facebook/react#30945
- facebook/react#30938
- facebook/react#30936
- facebook/react#30879
- facebook/react#30888
- facebook/react#30931
- facebook/react#30930
- facebook/react#30832
- facebook/react#30929
- facebook/react#30926
- facebook/react#30925
- facebook/react#30905
- facebook/react#30900
- facebook/react#30910
- facebook/react#30906
- facebook/react#30899
- facebook/react#30919
- facebook/react#30708
- facebook/react#30907
- facebook/react#30897
- facebook/react#30896
- facebook/react#30895
- facebook/react#30887
- facebook/react#30889
- facebook/react#30893
- facebook/react#30892
- facebook/react#30891
- facebook/react#30882
- facebook/react#30881
- facebook/react#30870
- facebook/react#30849
- facebook/react#30878
- facebook/react#30865
- facebook/react#30869
- facebook/react#30875
- facebook/react#30800
- facebook/react#30762
- facebook/react#30831
- facebook/react#30866
- facebook/react#30853
- facebook/react#30850
- facebook/react#30847
- facebook/react#30842
- facebook/react#30837
- facebook/react#30848
- facebook/react#30844
- facebook/react#30839
- facebook/react#30802
- facebook/react#30841
- facebook/react#30827
- facebook/react#30826
- facebook/react#30825
- facebook/react#30824
- facebook/react#30840
- facebook/react#30838
- facebook/react#30836
- facebook/react#30819
- facebook/react#30816
- facebook/react#30814
- facebook/react#30813
- facebook/react#30812
- facebook/react#30811

</details>

---------

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

Successfully merging this pull request may close these issues.

3 participants