mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ruslan Lesiutin
77ec61885f
There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In https://github.com/facebook/react/pull/27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96
58 lines
1.7 KiB
JavaScript
58 lines
1.7 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 type {CommitTree} from './types';
|
|
import type {SerializedElement} from 'react-devtools-shared/src/frontend/types';
|
|
|
|
import * as React from 'react';
|
|
import {useContext} from 'react';
|
|
import {ProfilerContext} from './ProfilerContext';
|
|
import styles from './Updaters.css';
|
|
import {ElementTypeRoot} from '../../../frontend/types';
|
|
|
|
export type Props = {
|
|
commitTree: CommitTree,
|
|
updaters: Array<SerializedElement>,
|
|
};
|
|
|
|
export default function Updaters({commitTree, updaters}: Props): React.Node {
|
|
const {selectFiber} = useContext(ProfilerContext);
|
|
|
|
const children =
|
|
updaters.length > 0 ? (
|
|
updaters.map((serializedElement: SerializedElement): React$Node => {
|
|
const {displayName, id, key, type} = serializedElement;
|
|
const isVisibleInTree =
|
|
commitTree.nodes.has(id) && type !== ElementTypeRoot;
|
|
if (isVisibleInTree) {
|
|
return (
|
|
<button
|
|
key={id}
|
|
className={styles.Updater}
|
|
onClick={() => selectFiber(id, displayName)}>
|
|
{displayName} {key ? `key="${key}"` : ''}
|
|
</button>
|
|
);
|
|
} else {
|
|
return (
|
|
<div key={id} className={styles.UnmountedUpdater}>
|
|
{displayName} {key ? `key="${key}"` : ''}
|
|
</div>
|
|
);
|
|
}
|
|
})
|
|
) : (
|
|
<div key="none" className={styles.NoUpdaters}>
|
|
(unknown)
|
|
</div>
|
|
);
|
|
|
|
return <div className={styles.Updaters}>{children}</div>;
|
|
}
|