dillon1000/react

Commit

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.
Browse files
Changed paths29 files
First-parent comparison
M packages/react-devtools-shared/src/__tests__/inspectedElement-test.js ModifiedM packages/react-devtools-shared/src/__tests__/profilingCache-test.js ModifiedM packages/react-devtools-shared/src/backend/renderer.js ModifiedM packages/react-devtools-shared/src/backendAPI.js ModifiedM packages/react-devtools-shared/src/devtools/constants.js ModifiedM packages/react-devtools-shared/src/devtools/store.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Badge.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Badge.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Element.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Element.js ModifiedA packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.css AddedA packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js AddedA packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css AddedA packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js AddedD packages/react-devtools-shared/src/devtools/views/Components/HocBadges.css DeletedD packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js DeletedA packages/react-devtools-shared/src/devtools/views/Components/IndexableDisplayName.js AddedA packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.css AddedA packages/react-devtools-shared/src/devtools/views/Components/IndexableElementBadges.js AddedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css AddedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js AddedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/utils.js ModifiedM packages/react-devtools-shared/src/frontend/types.js ModifiedM packages/react-devtools-shared/src/utils.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…