[DevTools] Support secondary environment name when it changes #30842

sebmarkbage · 2024-08-28T23:19:57Z

We currently support the Environment Name change within a Component. #29867

If this happens, we give it two HoCs. The problem with this is that we only show one followed by +1 in the list.

Before:

After:

I could potentially instead badge this case as A/B in a single badge.

vercel · 2024-08-28T23:20:02Z

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 11:22pm

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -2220,6 +2221,9 @@ export function attach(
    let displayName = componentInfo.name || '';
    if (typeof env === 'string') {
      // We model environment as an HoC name for now.
+      if (secondaryEnv !== null) {
+        displayName = secondaryEnv + '(' + displayName + ')';


hoxyq · 2024-08-29T08:52:26Z

packages/react-devtools-shared/src/backend/fiber/renderer.js

+          // If the next environment is different then this component was the boundary
+          // and it changed before entering the next component. So we assign this
+          // component a secondary environment.
+          return componentInfo.env !== debugEntry.env ? debugEntry.env : null;


What if componentInfo.env is nullish, but debugEntry.env is not? Like when VirtualInstance is a descendant of FiberInstance.

There's no instances here. This is just walking the debugInfo array and comparing it to other entires in that array.

componentInfo.env really can't be nullish right now since there's always an environment for a server component. It's mainly just defensive in case we support other types of virtual components in the future. If it differs, then it's a change in environment so should specify the secondary if available.

However, I don't actually use the secondary environment later on if the first one isn't specified. I assume that then it was just a client component or something that was inlined. But that case doesn't really exist yet.

Stacked on #30842. This adds a filter to be able to exclude Components from a certain environment. Default to Client or Server. The available options are computed into a dropdown based on the names that are currently used on the page (or an option that were previously used). In addition to the hardcoded "Client". Meaning that if you have Server Components on the page you see "Server" or "Client" as possible options but it can be anything if there are multiple RSC environments on the page. "Client" in this case means Function and Class Components in Fiber - excluding built-ins. If a Server Component has two environments (primary and secondary) then both have to be filtered to exclude it. We don't show the option at all if there are no Server Components used in the page to avoid confusing existing users that are just using Client Components and wouldn't know the difference between Server vs Client. <img width="815" alt="Screenshot 2024-08-30 at 12 56 42 AM" src="https://github.com/user-attachments/assets/e06b225a-e85d-4cdc-8707-d4630fede19e">

Support secondary environment name when it changes

18d1602

sebmarkbage requested review from gnoff and eps1lon August 28, 2024 23:19

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 28, 2024

vercel bot deployed to Preview August 28, 2024 23:22 View deployment

anandfresh reviewed Aug 29, 2024

View reviewed changes

hoxyq reviewed Aug 29, 2024

View reviewed changes

sebmarkbage mentioned this pull request Aug 30, 2024

[DevTools] Add Filtering of Environment Names #30850

Merged

hoxyq approved these changes Aug 30, 2024

View reviewed changes

eps1lon approved these changes Aug 30, 2024

View reviewed changes

sebmarkbage merged commit e56f4ae into facebook:main Aug 30, 2024
184 checks passed

This was referenced Aug 30, 2024

Upgrade React from 7771d3a7-20240827 to e56f4ae3-20240830 vercel/next.js#69500

Closed

Upgrade React from 7771d3a7-20240827 to 4f604941-20240830 vercel/next.js#69578

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools] Support secondary environment name when it changes #30842

[DevTools] Support secondary environment name when it changes #30842

sebmarkbage commented Aug 28, 2024

vercel bot commented Aug 28, 2024 •

edited

Loading

This comment was marked as off-topic.

hoxyq Aug 29, 2024

sebmarkbage Aug 29, 2024

[DevTools] Support secondary environment name when it changes #30842

[DevTools] Support secondary environment name when it changes #30842

Conversation

sebmarkbage commented Aug 28, 2024

vercel bot commented Aug 28, 2024 • edited Loading

This comment was marked as off-topic.

hoxyq Aug 29, 2024

Choose a reason for hiding this comment

sebmarkbage Aug 29, 2024

Choose a reason for hiding this comment

vercel bot commented Aug 28, 2024 •

edited

Loading