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
75 lines
2.1 KiB
JavaScript
75 lines
2.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 {OptionsContext} from '../context';
|
|
import EditableValue from './EditableValue';
|
|
import Store from '../../store';
|
|
import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
|
|
import styles from './InspectedElementSharedStyles.css';
|
|
|
|
import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
|
|
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
|
|
|
|
type Props = {
|
|
bridge: FrontendBridge,
|
|
inspectedElement: InspectedElement,
|
|
store: Store,
|
|
};
|
|
|
|
export default function InspectedElementSuspenseToggle({
|
|
bridge,
|
|
inspectedElement,
|
|
store,
|
|
}: Props): React.Node {
|
|
const {readOnly} = React.useContext(OptionsContext);
|
|
|
|
const {id, state, type} = inspectedElement;
|
|
const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense;
|
|
|
|
if (type !== ElementTypeSuspense) {
|
|
return null;
|
|
}
|
|
|
|
const isSuspended = state !== null;
|
|
|
|
const toggleSuspense = (path: any, value: boolean) => {
|
|
const rendererID = store.getRendererIDForElement(id);
|
|
if (rendererID !== null) {
|
|
bridge.send('overrideSuspense', {
|
|
id,
|
|
rendererID,
|
|
forceFallback: value,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.InspectedElementTree}>
|
|
<div className={styles.HeaderRow}>
|
|
<div className={styles.Header}>suspense</div>
|
|
</div>
|
|
<div className={styles.ToggleSuspenseRow}>
|
|
<span className={styles.Name}>Suspended</span>
|
|
{canToggleSuspense ? (
|
|
// key is required to keep <EditableValue> and header row toggle button in sync
|
|
<EditableValue
|
|
key={isSuspended}
|
|
overrideValue={toggleSuspense}
|
|
path={['suspense', 'Suspended']}
|
|
value={isSuspended}
|
|
/>
|
|
) : (
|
|
<span className={styles.Value}>{isSuspended ? 'true' : 'false'}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|