dillon1000/react
Commit
Browse files 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.
Changed paths29 files
First-parent comparisonpackages/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 ModifiedPatch
Files changed
Rendering syntax-highlighted changes…