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.
22 lines
493 B
JavaScript
22 lines
493 B
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 styles from './Badge.css';
|
|
|
|
type Props = {
|
|
className?: string,
|
|
children: React$Node,
|
|
};
|
|
|
|
export default function Badge({className = '', children}: Props): React.Node {
|
|
return <div className={`${styles.Badge} ${className}`}>{children}</div>;
|
|
}
|