[DevTools] Ensure the borders collapse collectly when props are not included #30667
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
CLA Signed
React Core Team
hoxyq
reviewed
Aug 13, 2024
Comment on lines
+10
to
+12
| .InspectedElementBadgesContainer { | ||
| padding: 0.25rem; | ||
| } |
There was a problem hiding this comment.
But this won't render border-bottom for InspectedElementBadges component, right?
There was a problem hiding this comment.
Yea it just renders the border as part of the top for everything else. If there's only badges and nothing below it then yea there's no separator but there's also nothing to separate it from.
sebmarkbage
added a commit
that referenced
this pull request
Aug 14, 2024
This adds VirtualInstances to the tree. Each Fiber has a list of its parent Server Components in `_debugInfo`. The algorithm is that when we enter a set of fibers, we actually traverse level 0 of all the `_debugInfo` in each fiber. Then level 1 of each `_debugInfo` and so on. It would be simpler if `_debugInfo` only contained Server Component since then we could just look at the index in the array but it actually contains other data as well which leads to multiple passes but we don't expect it to have a lot of levels before hitting a reified fiber. Finally when we hit the end a traverse the fiber itself. This lets us match consecutive `ReactComponentInfo` that are all the same at the same level. This creates a single VirtualInstance for each sequence. This lets the same Server Component instance that's a parent to multiple children appear as a single Instance instead of one per Fiber. Since a Server Component's result can be rendered in more than one place there's not a 1:1 mapping though. If it is in different parents or if the sequence is interrupted, then it gets split into two different instances with the same `ReactComponentInfo` data. The real interesting case is what happens during updates because this algorithm means that a Fiber can become reparented during an update to end up in a different VirtualInstance. The ideal would maybe be that the frontend could deal with this reparenting but instead I basically just unmount the previous instance (and its children) and mount a new instance which leads to some interesting scenarios. This is inline with the strategy I was intending to pursue anyway where instances are reconciled against the previous children of the same parent instead of the `fiberToFiberInstance` map - which would let us get rid of that map. In that case the model is resilient to Fiber being in more than one place at a time. However this unmount/remount does mean that we can lose selection when this happens. We could maybe do something like using the tracked path like I did for component filters. Ideally it's a weird edge case though because you'd typically not have it. The main case that it happens now is for reorders of list of server components. In that case basically all the children move between server components while the server components themselves stay in place. We should really include the key in server components so that we can reconcile them using the key to handle reorders which would solve the common case anyway. I convert the name to the `Env(Name)` pattern which allows the Environment Name to be used as a badge. <img width="1105" alt="Screenshot 2024-08-13 at 9 55 29 PM" src="https://github.com/user-attachments/assets/323c20ba-b655-4ee8-84fa-8233f55d2999"> (Screenshot is with #30667. I haven't tried it with the alternative fix.) --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I want to omit the
propssection all together on Server Components. At least for now.The previous fix to collapsing the borders didn't consider the top section being omitted so it ended up with a double border. This is just a little tweak to that.