mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ruslan Lesiutin
6c7b41da3d
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.
49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
|
|
import Badge from './Badge';
|
|
import ForgetBadge from './ForgetBadge';
|
|
|
|
import styles from './ElementBadges.css';
|
|
|
|
type Props = {
|
|
hocDisplayNames: Array<string> | null,
|
|
compiledWithForget: boolean,
|
|
className?: string,
|
|
};
|
|
|
|
export default function ElementBadges({
|
|
compiledWithForget,
|
|
hocDisplayNames,
|
|
className = '',
|
|
}: Props): React.Node {
|
|
if (
|
|
!compiledWithForget &&
|
|
(hocDisplayNames == null || hocDisplayNames.length === 0)
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={`${styles.Root} ${className}`}>
|
|
{compiledWithForget && <ForgetBadge indexable={false} />}
|
|
|
|
{hocDisplayNames != null && hocDisplayNames.length > 0 && (
|
|
<Badge>{hocDisplayNames[0]}</Badge>
|
|
)}
|
|
|
|
{hocDisplayNames != null && hocDisplayNames.length > 1 && (
|
|
<div className={styles.ExtraLabel}>+{hocDisplayNames.length - 1}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|