react/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.css at fbcda19a23da819889afdd7164b29c556fbcfc7a - react - Gitea: Git with a cup of tea

Facebook/react

mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00

Files

T

Ruslan Lesiutin 6c7b41da3d feat[devtools]: display Forget badge for the relevant components (#27709 )

Adds `Forget` badge to all relevant components.

Changes:
- If component is compiled with Forget and using a built-in
`useMemoCache` hook, it will have a `Forget` badge next to its display
name in:
  - components tree
  - inspected element view
  - owners list
- Such badges are indexable, so Forget components can be searched using
search bar.

Fixes:
- Displaying the badges for owners list inside the inspected component
view

Implementation:
- React DevTools backend is responsible for identifying if component is
compiled with Forget, based on `fiber.updateQueue.memoCache`. It will
wrap component's display name with `Forget(...)` prefix before passing
operations to the frontend. On the frontend side, we will parse the
display name and strip Forget prefix, marking the corresponding element
by setting `compiledWithForget` field. Almost the same logic is
currently used for HOC display names.

2023-11-23 18:37:21 +00:00

15 lines

266 B

CSS

Raw Blame History

 .Root {
   display: inline-flex;
   align-items: center;
 }
 .Root *:not(:first-child) {
   margin-left: 0.25rem;
 }
 .ExtraLabel {
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
   color: var(--color-component-badge-count);
 }