Upgrade prettier (#26081)
The old version of prettier we were using didn't support the Flow syntax to access properties in a type using `SomeType['prop']`. This updates `prettier` and `rollup-plugin-prettier` to the latest versions. I added the prettier config `arrowParens: "avoid"` to reduce the diff size as the default has changed in Prettier 2.0. The largest amount of changes comes from function expressions now having a space. This doesn't have an option to preserve the old behavior, so we have to update this.
This commit is contained in:
parent
1f5ce59dd7
commit
6b30832666
|
@ -8,8 +8,8 @@ module.exports = {
|
|||
jsxBracketSameLine: true,
|
||||
trailingComma: 'es5',
|
||||
printWidth: 80,
|
||||
parser: 'babel',
|
||||
|
||||
parser: 'flow',
|
||||
arrowParens: 'avoid',
|
||||
overrides: [
|
||||
{
|
||||
files: esNextPaths,
|
||||
|
|
|
@ -241,8 +241,9 @@ Comparing: ${baseSha}...${headSha}
|
|||
|
||||
## Critical size changes
|
||||
|
||||
Includes critical production bundles, as well as any change greater than ${CRITICAL_THRESHOLD *
|
||||
100}%:
|
||||
Includes critical production bundles, as well as any change greater than ${
|
||||
CRITICAL_THRESHOLD * 100
|
||||
}%:
|
||||
|
||||
${header}
|
||||
${criticalResults.join('\n')}
|
||||
|
|
|
@ -902,8 +902,9 @@ class App extends React.Component {
|
|||
|
||||
let log = '';
|
||||
for (let attribute of attributes) {
|
||||
log += `## \`${attribute.name}\` (on \`<${attribute.tagName ||
|
||||
'div'}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
|
||||
log += `## \`${attribute.name}\` (on \`<${
|
||||
attribute.tagName || 'div'
|
||||
}>\` inside \`<${attribute.containerTagName || 'div'}>\`)\n`;
|
||||
log += '| Test Case | Flags | Result |\n';
|
||||
log += '| --- | --- | --- |\n';
|
||||
|
||||
|
|
|
@ -319,9 +319,7 @@ it('should give context for PropType errors in nested components.', () => {
|
|||
return <MyComp color={123} />;
|
||||
}
|
||||
}
|
||||
expect(() =>
|
||||
ReactTestUtils.renderIntoDocument(<ParentComp />)
|
||||
).toErrorDev(
|
||||
expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
|
||||
'Warning: Failed prop type: ' +
|
||||
'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
|
||||
'expected `string`.',
|
||||
|
@ -334,9 +332,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
const Null = null;
|
||||
const True = true;
|
||||
const Div = 'div';
|
||||
expect(
|
||||
() => void (<Undefined />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Undefined />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: undefined. You likely forgot to export your ' +
|
||||
|
@ -347,9 +343,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<Null />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Null />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: null.' +
|
||||
|
@ -358,9 +352,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<True />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<True />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: boolean.' +
|
||||
|
@ -721,9 +713,7 @@ it('should warn when `key` is being accessed on composite element', () => {
|
|||
);
|
||||
}
|
||||
}
|
||||
expect(() =>
|
||||
ReactDOM.render(<Parent />, container)
|
||||
).toErrorDev(
|
||||
expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
|
||||
'Child: `key` is not a prop. Trying to access it will result ' +
|
||||
'in `undefined` being returned. If you need to access the same ' +
|
||||
'value within the child component, you should pass it as a different ' +
|
||||
|
@ -748,9 +738,7 @@ it('should warn when `ref` is being accessed', () => {
|
|||
);
|
||||
}
|
||||
}
|
||||
expect(() =>
|
||||
ReactDOM.render(<Parent />, container)
|
||||
).toErrorDev(
|
||||
expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
|
||||
'Child: `ref` is not a prop. Trying to access it will result ' +
|
||||
'in `undefined` being returned. If you need to access the same ' +
|
||||
'value within the child component, you should pass it as a different ' +
|
||||
|
|
|
@ -330,9 +330,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
const Null = null;
|
||||
const True = true;
|
||||
const Div = 'div';
|
||||
expect(
|
||||
() => void (<Undefined />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Undefined />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: undefined. You likely forgot to export your ' +
|
||||
|
@ -343,9 +341,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<Null />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Null />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: null.' +
|
||||
|
@ -354,9 +350,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<True />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<True />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: boolean.' +
|
||||
|
@ -716,9 +710,7 @@ it('should warn when `key` is being accessed on composite element', () => {
|
|||
);
|
||||
}
|
||||
}
|
||||
expect(() =>
|
||||
ReactDOM.render(<Parent />, container)
|
||||
).toErrorDev(
|
||||
expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
|
||||
'Child: `key` is not a prop. Trying to access it will result ' +
|
||||
'in `undefined` being returned. If you need to access the same ' +
|
||||
'value within the child component, you should pass it as a different ' +
|
||||
|
@ -743,9 +735,7 @@ it('should warn when `ref` is being accessed', () => {
|
|||
);
|
||||
}
|
||||
}
|
||||
expect(() =>
|
||||
ReactDOM.render(<Parent />, container)
|
||||
).toErrorDev(
|
||||
expect(() => ReactDOM.render(<Parent />, container)).toErrorDev(
|
||||
'Child: `ref` is not a prop. Trying to access it will result ' +
|
||||
'in `undefined` being returned. If you need to access the same ' +
|
||||
'value within the child component, you should pass it as a different ' +
|
||||
|
|
|
@ -330,9 +330,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
const Null = null;
|
||||
const True = true;
|
||||
const Div = 'div';
|
||||
expect(
|
||||
() => void (<Undefined />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Undefined />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: undefined. You likely forgot to export your ' +
|
||||
|
@ -343,9 +341,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<Null />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Null />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: null.' +
|
||||
|
@ -354,9 +350,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<True />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<True />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: boolean.' +
|
||||
|
|
|
@ -330,9 +330,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
const Null = null;
|
||||
const True = true;
|
||||
const Div = 'div';
|
||||
expect(
|
||||
() => void (<Undefined />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Undefined />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: undefined. You likely forgot to export your ' +
|
||||
|
@ -343,9 +341,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<Null />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<Null />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: null.' +
|
||||
|
@ -354,9 +350,7 @@ it('gives a helpful error when passing null, undefined, or boolean', () => {
|
|||
: ''),
|
||||
{withoutStack: true}
|
||||
);
|
||||
expect(
|
||||
() => void (<True />)
|
||||
).toErrorDev(
|
||||
expect(() => void (<True />)).toErrorDev(
|
||||
'Warning: React.jsx: type is invalid -- expected a string ' +
|
||||
'(for built-in components) or a class/function (for composite ' +
|
||||
'components) but got: boolean.' +
|
||||
|
|
|
@ -19,8 +19,9 @@ export default function lazyLegacyRoot(getLegacyComponent) {
|
|||
};
|
||||
|
||||
return function Wrapper(props) {
|
||||
const createLegacyRoot = readModule(rendererModule, () =>
|
||||
import('../legacy/createLegacyRoot')
|
||||
const createLegacyRoot = readModule(
|
||||
rendererModule,
|
||||
() => import('../legacy/createLegacyRoot')
|
||||
).default;
|
||||
const Component = readModule(componentModule, getLegacyComponent).default;
|
||||
const containerRef = useRef(null);
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
"mkdirp": "^0.5.1",
|
||||
"ncp": "^2.0.0",
|
||||
"pacote": "^10.3.0",
|
||||
"prettier": "1.19.1",
|
||||
"prettier": "2.8.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"random-seed": "^0.3.0",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
|
@ -88,7 +88,7 @@
|
|||
"rollup-plugin-babel": "^4.0.1",
|
||||
"rollup-plugin-commonjs": "^9.3.4",
|
||||
"rollup-plugin-node-resolve": "^2.1.1",
|
||||
"rollup-plugin-prettier": "^0.6.0",
|
||||
"rollup-plugin-prettier": "^3.0.0",
|
||||
"rollup-plugin-replace": "^2.2.0",
|
||||
"rollup-plugin-strip-banner": "^0.2.0",
|
||||
"semver": "^7.1.1",
|
||||
|
|
|
@ -1525,8 +1525,7 @@ const tests = {
|
|||
'Either include it or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.foo?.bar?.baz]',
|
||||
desc: 'Update the dependencies array to be: [props.foo?.bar?.baz]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
useCallback(() => {
|
||||
|
@ -2662,8 +2661,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.bar, props.foo]',
|
||||
desc: 'Update the dependencies array to be: [props.bar, props.foo]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const local = {};
|
||||
|
@ -2819,8 +2817,7 @@ const tests = {
|
|||
'Either include it or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [color, props.foo.bar.baz]',
|
||||
desc: 'Update the dependencies array to be: [color, props.foo.bar.baz]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let color = {}
|
||||
|
@ -2884,8 +2881,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.foo.bar.baz, props.foo.fizz.bizz]',
|
||||
desc: 'Update the dependencies array to be: [props.foo.bar.baz, props.foo.fizz.bizz]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const fn = useCallback(() => {
|
||||
|
@ -3095,8 +3091,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.bar, props.foo]',
|
||||
desc: 'Update the dependencies array to be: [props.bar, props.foo]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
useEffect(() => {
|
||||
|
@ -3127,8 +3122,7 @@ const tests = {
|
|||
// Don't alphabetize if it wasn't alphabetized in the first place.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [c, a, g, b, e, d, f]',
|
||||
desc: 'Update the dependencies array to be: [c, a, g, b, e, d, f]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let a, b, c, d, e, f, g;
|
||||
|
@ -3159,8 +3153,7 @@ const tests = {
|
|||
// Alphabetize if it was alphabetized.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [a, b, c, d, e, f, g]',
|
||||
desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let a, b, c, d, e, f, g;
|
||||
|
@ -3191,8 +3184,7 @@ const tests = {
|
|||
// Alphabetize if it was empty.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [a, b, c, d, e, f, g]',
|
||||
desc: 'Update the dependencies array to be: [a, b, c, d, e, f, g]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let a, b, c, d, e, f, g;
|
||||
|
@ -3224,8 +3216,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [local, props.bar, props.foo]',
|
||||
desc: 'Update the dependencies array to be: [local, props.bar, props.foo]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const local = {};
|
||||
|
@ -3812,8 +3803,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.color, props.someOtherRefs]',
|
||||
desc: 'Update the dependencies array to be: [props.color, props.someOtherRefs]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const ref1 = useRef();
|
||||
|
@ -3853,8 +3843,7 @@ const tests = {
|
|||
"because mutating them doesn't re-render the component.",
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.someOtherRefs, props.color]',
|
||||
desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const ref1 = useRef();
|
||||
|
@ -3894,8 +3883,7 @@ const tests = {
|
|||
"because mutating them doesn't re-render the component.",
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.someOtherRefs, props.color]',
|
||||
desc: 'Update the dependencies array to be: [props.someOtherRefs, props.color]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const ref1 = useRef();
|
||||
|
@ -4287,8 +4275,7 @@ const tests = {
|
|||
`props inside useEffect.`,
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [skillsCount, props.isEditMode, props.toggleEditMode, props]',
|
||||
desc: 'Update the dependencies array to be: [skillsCount, props.isEditMode, props.toggleEditMode, props]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const [skillsCount] = useState();
|
||||
|
@ -4719,8 +4706,7 @@ const tests = {
|
|||
'Either include it or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [local1, local3, local4]',
|
||||
desc: 'Update the dependencies array to be: [local1, local3, local4]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent() {
|
||||
const local1 = 42;
|
||||
|
@ -5562,8 +5548,7 @@ const tests = {
|
|||
// the easy fix and you can't just move it into effect.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let [, setState] = useState();
|
||||
|
@ -5737,8 +5722,7 @@ const tests = {
|
|||
// because they are only referenced outside the effect.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext2' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext2' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
function handleNext1() {
|
||||
|
@ -5787,8 +5771,7 @@ const tests = {
|
|||
// because they are only referenced outside the effect.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext3' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext3' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
function handleNext1() {
|
||||
|
@ -5862,8 +5845,7 @@ const tests = {
|
|||
"definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const handleNext1 = useCallback(() => {
|
||||
|
@ -5892,8 +5874,7 @@ const tests = {
|
|||
"definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext1' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
const handleNext1 = useCallback(() => {
|
||||
|
@ -5959,8 +5940,7 @@ const tests = {
|
|||
// it only wraps the first definition. But seems ok.
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
"Wrap the definition of 'handleNext' in its own useCallback() Hook.",
|
||||
desc: "Wrap the definition of 'handleNext' in its own useCallback() Hook.",
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let handleNext = useCallback(() => {
|
||||
|
@ -6493,8 +6473,7 @@ const tests = {
|
|||
`find the parent component that defines it and wrap that definition in useCallback.`,
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [fetchPodcasts, fetchPodcasts2, id]',
|
||||
desc: 'Update the dependencies array to be: [fetchPodcasts, fetchPodcasts2, id]',
|
||||
output: normalizeIndent`
|
||||
function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
|
||||
let [podcasts, setPodcasts] = useState(null);
|
||||
|
@ -7135,8 +7114,7 @@ const tests = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [foo.bar, props.foo.bar]',
|
||||
desc: 'Update the dependencies array to be: [foo.bar, props.foo.bar]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent(props) {
|
||||
let foo = {}
|
||||
|
@ -7845,8 +7823,7 @@ const testsTypescript = {
|
|||
'Either include them or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',
|
||||
desc: 'Update the dependencies array to be: [pizza.crust, pizza?.toppings]',
|
||||
output: normalizeIndent`
|
||||
function MyComponent() {
|
||||
const pizza = {};
|
||||
|
@ -7981,8 +7958,7 @@ const testsTypescript = {
|
|||
'Either include it or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props.upperViewHeight]',
|
||||
desc: 'Update the dependencies array to be: [props.upperViewHeight]',
|
||||
output: normalizeIndent`
|
||||
function Example(props) {
|
||||
useEffect(() => {
|
||||
|
@ -8013,8 +7989,7 @@ const testsTypescript = {
|
|||
'Either include it or remove the dependency array.',
|
||||
suggestions: [
|
||||
{
|
||||
desc:
|
||||
'Update the dependencies array to be: [props?.upperViewHeight]',
|
||||
desc: 'Update the dependencies array to be: [props?.upperViewHeight]',
|
||||
output: normalizeIndent`
|
||||
function Example(props) {
|
||||
useEffect(() => {
|
||||
|
|
|
@ -383,9 +383,8 @@ export default {
|
|||
|
||||
// This is a valid code path for React hooks if we are directly in a React
|
||||
// function component or we are in a hook function.
|
||||
const isSomewhereInsideComponentOrHook = isInsideComponentOrHook(
|
||||
codePathNode,
|
||||
);
|
||||
const isSomewhereInsideComponentOrHook =
|
||||
isInsideComponentOrHook(codePathNode);
|
||||
const isDirectlyInsideComponentOrHook = codePathFunctionName
|
||||
? isComponentName(codePathFunctionName) ||
|
||||
isHook(codePathFunctionName)
|
||||
|
|
|
@ -58,10 +58,8 @@ describe('ReactHooksInspectionIntegration', () => {
|
|||
},
|
||||
]);
|
||||
|
||||
const {
|
||||
onMouseDown: setStateA,
|
||||
onMouseUp: setStateB,
|
||||
} = renderer.root.findByType('div').props;
|
||||
const {onMouseDown: setStateA, onMouseUp: setStateB} =
|
||||
renderer.root.findByType('div').props;
|
||||
|
||||
act(() => setStateA('Hi'));
|
||||
|
||||
|
|
|
@ -42,7 +42,8 @@ installHook(window);
|
|||
|
||||
const hook: ?DevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
|
||||
let savedComponentFilters: Array<ComponentFilter> = getDefaultComponentFilters();
|
||||
let savedComponentFilters: Array<ComponentFilter> =
|
||||
getDefaultComponentFilters();
|
||||
|
||||
function debug(methodName: string, ...args: Array<mixed>) {
|
||||
if (__DEBUG__) {
|
||||
|
|
|
@ -33,7 +33,8 @@ function initializeConsolePatchSettings(
|
|||
if (devToolsSettingsManager.getConsolePatchSettings == null) {
|
||||
return;
|
||||
}
|
||||
const consolePatchSettingsString = devToolsSettingsManager.getConsolePatchSettings();
|
||||
const consolePatchSettingsString =
|
||||
devToolsSettingsManager.getConsolePatchSettings();
|
||||
if (consolePatchSettingsString == null) {
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -27,10 +27,7 @@ const main = async buildId => {
|
|||
const json = JSON.parse(file);
|
||||
const alias = json.alias[0];
|
||||
|
||||
const commit = execSync('git rev-parse HEAD')
|
||||
.toString()
|
||||
.trim()
|
||||
.substr(0, 7);
|
||||
const commit = execSync('git rev-parse HEAD').toString().trim().substr(0, 7);
|
||||
|
||||
let date = new Date();
|
||||
date = `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`;
|
||||
|
|
|
@ -51,8 +51,8 @@ function setup(hook: any) {
|
|||
const Agent = require('react-devtools-shared/src/backend/agent').default;
|
||||
const Bridge = require('react-devtools-shared/src/bridge').default;
|
||||
const {initBackend} = require('react-devtools-shared/src/backend');
|
||||
const setupNativeStyleEditor = require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor')
|
||||
.default;
|
||||
const setupNativeStyleEditor =
|
||||
require('react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor').default;
|
||||
|
||||
const bridge = new Bridge({
|
||||
listen(fn) {
|
||||
|
|
|
@ -5,9 +5,9 @@ if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
|
|||
installHook(window);
|
||||
|
||||
// detect react
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({
|
||||
reactBuildType,
|
||||
}) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on(
|
||||
'renderer',
|
||||
function ({reactBuildType}) {
|
||||
window.postMessage(
|
||||
{
|
||||
source: 'react-devtools-detector',
|
||||
|
@ -15,7 +15,8 @@ if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
|
|||
},
|
||||
'*',
|
||||
);
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
// save native values
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
|
||||
|
|
|
@ -61,10 +61,8 @@ test.describe('Components', () => {
|
|||
// Then read the inspected values.
|
||||
const [propName, propValue, sourceText] = await page.evaluate(
|
||||
isEditable => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
// Get name of first prop
|
||||
|
@ -150,10 +148,8 @@ test.describe('Components', () => {
|
|||
// Make sure the expected hook names are parsed and displayed eventually.
|
||||
await page.waitForFunction(
|
||||
hookNames => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const hooksTree = findAllNodes(container, [
|
||||
|
@ -181,10 +177,8 @@ test.describe('Components', () => {
|
|||
test('should allow searching for component by name', async () => {
|
||||
async function getComponentSearchResultsCount() {
|
||||
return await page.evaluate(() => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const element = findAllNodes(container, [
|
||||
|
|
|
@ -16,11 +16,8 @@ async function clickButton(page, buttonTestName) {
|
|||
|
||||
async function getElementCount(page, displayName) {
|
||||
return await page.evaluate(listItemText => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
createTextSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, createTextSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
const rows = findAllNodes(container, [
|
||||
createTestNameSelector('ComponentTreeListItem'),
|
||||
|
@ -32,11 +29,8 @@ async function getElementCount(page, displayName) {
|
|||
|
||||
async function selectElement(page, displayName, waitForOwnersText) {
|
||||
await page.evaluate(listItemText => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
createTextSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, createTextSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const listItem = findAllNodes(container, [
|
||||
|
@ -50,10 +44,8 @@ async function selectElement(page, displayName, waitForOwnersText) {
|
|||
// Wait for selected element's props to load.
|
||||
await page.waitForFunction(
|
||||
({titleText, ownersListText}) => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const title = findAllNodes(container, [
|
||||
|
|
|
@ -27,10 +27,8 @@ test.describe('Profiler', () => {
|
|||
runOnlyForReactRange('>=16.5');
|
||||
async function getSnapshotSelectorText() {
|
||||
return await page.evaluate(() => {
|
||||
const {
|
||||
createTestNameSelector,
|
||||
findAllNodes,
|
||||
} = window.REACT_DOM_DEVTOOLS;
|
||||
const {createTestNameSelector, findAllNodes} =
|
||||
window.REACT_DOM_DEVTOOLS;
|
||||
const container = document.getElementById('devtools');
|
||||
|
||||
const input = findAllNodes(container, [
|
||||
|
|
|
@ -24,11 +24,15 @@ function startActivation(contentWindow: any, bridge: BackendBridge) {
|
|||
hideConsoleLogsInStrictMode,
|
||||
} = data;
|
||||
|
||||
contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
|
||||
contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
|
||||
contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ =
|
||||
appendComponentStack;
|
||||
contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ =
|
||||
breakOnConsoleErrors;
|
||||
contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
|
||||
contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
|
||||
contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
|
||||
contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ =
|
||||
showInlineWarningsAndErrors;
|
||||
contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ =
|
||||
hideConsoleLogsInStrictMode;
|
||||
|
||||
// TRICKY
|
||||
// The backend entry point may be required in the context of an iframe or the parent window.
|
||||
|
@ -40,8 +44,10 @@ function startActivation(contentWindow: any, bridge: BackendBridge) {
|
|||
window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
|
||||
window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
|
||||
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
|
||||
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
|
||||
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
|
||||
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ =
|
||||
showInlineWarningsAndErrors;
|
||||
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ =
|
||||
hideConsoleLogsInStrictMode;
|
||||
}
|
||||
|
||||
finishActivation(contentWindow, bridge);
|
||||
|
|
|
@ -112,8 +112,8 @@ describe('Timeline profiler', () => {
|
|||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
|
||||
.setPerformanceMock_ONLY_FOR_TESTING;
|
||||
setPerformanceMock =
|
||||
require('react-devtools-shared/src/backend/profilingHooks').setPerformanceMock_ONLY_FOR_TESTING;
|
||||
setPerformanceMock(createUserTimingPolyfill());
|
||||
});
|
||||
|
||||
|
|
|
@ -11,9 +11,8 @@
|
|||
export function test(maybeDehydratedValue) {
|
||||
const {meta} = require('react-devtools-shared/src/hydration');
|
||||
|
||||
const hasOwnProperty = Object.prototype.hasOwnProperty.bind(
|
||||
maybeDehydratedValue,
|
||||
);
|
||||
const hasOwnProperty =
|
||||
Object.prototype.hasOwnProperty.bind(maybeDehydratedValue);
|
||||
return (
|
||||
maybeDehydratedValue !== null &&
|
||||
typeof maybeDehydratedValue === 'object' &&
|
||||
|
|
|
@ -59,18 +59,18 @@ describe('InspectedElement', () => {
|
|||
TestRenderer = utils.requireTestRenderer();
|
||||
TestRendererAct = require('jest-react').act;
|
||||
|
||||
BridgeContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.BridgeContext;
|
||||
InspectedElementContext = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
|
||||
.InspectedElementContext;
|
||||
InspectedElementContextController = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
|
||||
.InspectedElementContextController;
|
||||
SettingsContextController = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext')
|
||||
.SettingsContextController;
|
||||
StoreContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.StoreContext;
|
||||
TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
|
||||
.TreeContextController;
|
||||
BridgeContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').BridgeContext;
|
||||
InspectedElementContext =
|
||||
require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext').InspectedElementContext;
|
||||
InspectedElementContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext').InspectedElementContextController;
|
||||
SettingsContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Settings/SettingsContext').SettingsContextController;
|
||||
StoreContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').StoreContext;
|
||||
TreeContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeContextController;
|
||||
|
||||
// Used by inspectElementAtIndex() helper function
|
||||
utils.act(() => {
|
||||
|
@ -1777,7 +1777,8 @@ describe('InspectedElement', () => {
|
|||
),
|
||||
);
|
||||
|
||||
let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
|
||||
let copyPath: CopyInspectedElementPath =
|
||||
((null: any): CopyInspectedElementPath);
|
||||
|
||||
const id = ((store.getElementIDAtIndex(0): any): number);
|
||||
await inspectElementAtIndex(0, () => {
|
||||
|
@ -1864,7 +1865,8 @@ describe('InspectedElement', () => {
|
|||
|
||||
const id = ((store.getElementIDAtIndex(0): any): number);
|
||||
|
||||
let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
|
||||
let copyPath: CopyInspectedElementPath =
|
||||
((null: any): CopyInspectedElementPath);
|
||||
|
||||
await inspectElementAtIndex(0, () => {
|
||||
copyPath = (path: Array<string | number>) => {
|
||||
|
|
|
@ -39,16 +39,16 @@ describe('OwnersListContext', () => {
|
|||
React = require('react');
|
||||
TestRenderer = utils.requireTestRenderer();
|
||||
|
||||
BridgeContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.BridgeContext;
|
||||
OwnersListContext = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
|
||||
.OwnersListContext;
|
||||
OwnersListContextController = require('react-devtools-shared/src/devtools/views/Components/OwnersListContext')
|
||||
.OwnersListContextController;
|
||||
StoreContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.StoreContext;
|
||||
TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
|
||||
.TreeContextController;
|
||||
BridgeContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').BridgeContext;
|
||||
OwnersListContext =
|
||||
require('react-devtools-shared/src/devtools/views/Components/OwnersListContext').OwnersListContext;
|
||||
OwnersListContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Components/OwnersListContext').OwnersListContextController;
|
||||
StoreContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').StoreContext;
|
||||
TreeContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeContextController;
|
||||
});
|
||||
|
||||
const Contexts = ({children, defaultOwnerID = null}) => (
|
||||
|
|
|
@ -82,8 +82,8 @@ describe('Timeline profiler', () => {
|
|||
ReactDOMClient = require('react-dom/client');
|
||||
Scheduler = require('scheduler');
|
||||
|
||||
setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
|
||||
.setPerformanceMock_ONLY_FOR_TESTING;
|
||||
setPerformanceMock =
|
||||
require('react-devtools-shared/src/backend/profilingHooks').setPerformanceMock_ONLY_FOR_TESTING;
|
||||
setPerformanceMock(createUserTimingPolyfill());
|
||||
|
||||
const store = global.store;
|
||||
|
@ -105,8 +105,8 @@ describe('Timeline profiler', () => {
|
|||
let getLanesFromTransportDecimalBitmask;
|
||||
|
||||
beforeEach(() => {
|
||||
getLanesFromTransportDecimalBitmask = require('react-devtools-timeline/src/import-worker/preprocessData')
|
||||
.getLanesFromTransportDecimalBitmask;
|
||||
getLanesFromTransportDecimalBitmask =
|
||||
require('react-devtools-timeline/src/import-worker/preprocessData').getLanesFromTransportDecimalBitmask;
|
||||
});
|
||||
|
||||
// @reactVersion >= 18.0
|
||||
|
@ -115,11 +115,7 @@ describe('Timeline profiler', () => {
|
|||
expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);
|
||||
expect(getLanesFromTransportDecimalBitmask('3')).toEqual([0, 1]);
|
||||
expect(getLanesFromTransportDecimalBitmask('1234')).toEqual([
|
||||
1,
|
||||
4,
|
||||
6,
|
||||
7,
|
||||
10,
|
||||
1, 4, 6, 7, 10,
|
||||
]); // 2 + 16 + 64 + 128 + 1024
|
||||
expect(
|
||||
getLanesFromTransportDecimalBitmask('1073741824'), // 0b1000000000000000000000000000000
|
||||
|
@ -139,8 +135,8 @@ describe('Timeline profiler', () => {
|
|||
|
||||
// @reactVersion >= 18.0
|
||||
it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
|
||||
const REACT_TOTAL_NUM_LANES = require('react-devtools-timeline/src/constants')
|
||||
.REACT_TOTAL_NUM_LANES;
|
||||
const REACT_TOTAL_NUM_LANES =
|
||||
require('react-devtools-timeline/src/constants').REACT_TOTAL_NUM_LANES;
|
||||
|
||||
// Sanity check; this test may need to be updated when the no. of fiber lanes are changed.
|
||||
expect(REACT_TOTAL_NUM_LANES).toBe(31);
|
||||
|
@ -157,8 +153,8 @@ describe('Timeline profiler', () => {
|
|||
let preprocessData;
|
||||
|
||||
beforeEach(() => {
|
||||
preprocessData = require('react-devtools-timeline/src/import-worker/preprocessData')
|
||||
.default;
|
||||
preprocessData =
|
||||
require('react-devtools-timeline/src/import-worker/preprocessData').default;
|
||||
});
|
||||
|
||||
// These should be dynamic to mimic a real profile,
|
||||
|
@ -177,8 +173,8 @@ describe('Timeline profiler', () => {
|
|||
}
|
||||
|
||||
function createProfilerVersionEntry() {
|
||||
const SCHEDULING_PROFILER_VERSION = require('react-devtools-timeline/src/constants')
|
||||
.SCHEDULING_PROFILER_VERSION;
|
||||
const SCHEDULING_PROFILER_VERSION =
|
||||
require('react-devtools-timeline/src/constants').SCHEDULING_PROFILER_VERSION;
|
||||
return createUserTimingEntry({
|
||||
cat: 'blink.user_timing',
|
||||
name: '--profiler-version-' + SCHEDULING_PROFILER_VERSION,
|
||||
|
@ -195,8 +191,7 @@ describe('Timeline profiler', () => {
|
|||
function createLaneLabelsEntry() {
|
||||
return createUserTimingEntry({
|
||||
cat: 'blink.user_timing',
|
||||
name:
|
||||
'--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen',
|
||||
name: '--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -45,20 +45,20 @@ describe('ProfilerContext', () => {
|
|||
ReactDOM = require('react-dom');
|
||||
TestRenderer = utils.requireTestRenderer();
|
||||
|
||||
BridgeContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.BridgeContext;
|
||||
ProfilerContext = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
|
||||
.ProfilerContext;
|
||||
ProfilerContextController = require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext')
|
||||
.ProfilerContextController;
|
||||
StoreContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.StoreContext;
|
||||
TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
|
||||
.TreeContextController;
|
||||
TreeDispatcherContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
|
||||
.TreeDispatcherContext;
|
||||
TreeStateContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
|
||||
.TreeStateContext;
|
||||
BridgeContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').BridgeContext;
|
||||
ProfilerContext =
|
||||
require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext').ProfilerContext;
|
||||
ProfilerContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Profiler/ProfilerContext').ProfilerContextController;
|
||||
StoreContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').StoreContext;
|
||||
TreeContextController =
|
||||
require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeContextController;
|
||||
TreeDispatcherContext =
|
||||
require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeDispatcherContext;
|
||||
TreeStateContext =
|
||||
require('react-devtools-shared/src/devtools/views/Components/TreeContext').TreeStateContext;
|
||||
});
|
||||
|
||||
const Contexts = ({
|
||||
|
|
|
@ -182,14 +182,14 @@ describe('ProfilingCache', () => {
|
|||
|
||||
const rootID = store.roots[0];
|
||||
|
||||
const prevCommitData = store.profilerStore.getDataForRoot(rootID)
|
||||
.commitData;
|
||||
const prevCommitData =
|
||||
store.profilerStore.getDataForRoot(rootID).commitData;
|
||||
expect(prevCommitData).toHaveLength(4);
|
||||
|
||||
utils.exportImportHelper(bridge, store);
|
||||
|
||||
const nextCommitData = store.profilerStore.getDataForRoot(rootID)
|
||||
.commitData;
|
||||
const nextCommitData =
|
||||
store.profilerStore.getDataForRoot(rootID).commitData;
|
||||
expect(nextCommitData).toHaveLength(4);
|
||||
nextCommitData.forEach((commitData, index) => {
|
||||
expect(commitData).toEqual(prevCommitData[index]);
|
||||
|
@ -1094,8 +1094,10 @@ describe('ProfilingCache', () => {
|
|||
utils.act(() => setChildUnmounted(true));
|
||||
utils.act(() => store.profilerStore.stopProfiling());
|
||||
|
||||
const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
|
||||
.updaters;
|
||||
const updaters = store.profilerStore.getCommitData(
|
||||
store.roots[0],
|
||||
0,
|
||||
).updaters;
|
||||
expect(updaters.length).toEqual(1);
|
||||
expect(updaters[0].displayName).toEqual('App');
|
||||
});
|
||||
|
@ -1129,8 +1131,10 @@ describe('ProfilingCache', () => {
|
|||
utils.act(() => setChildUnmounted(true));
|
||||
utils.act(() => store.profilerStore.stopProfiling());
|
||||
|
||||
const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
|
||||
.updaters;
|
||||
const updaters = store.profilerStore.getCommitData(
|
||||
store.roots[0],
|
||||
0,
|
||||
).updaters;
|
||||
expect(updaters.length).toEqual(1);
|
||||
expect(updaters[0].displayName).toEqual('App');
|
||||
});
|
||||
|
@ -1159,8 +1163,10 @@ describe('ProfilingCache', () => {
|
|||
utils.act(() => setChildUnmounted(true));
|
||||
utils.act(() => store.profilerStore.stopProfiling());
|
||||
|
||||
const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
|
||||
.updaters;
|
||||
const updaters = store.profilerStore.getCommitData(
|
||||
store.roots[0],
|
||||
0,
|
||||
).updaters;
|
||||
expect(updaters.length).toEqual(1);
|
||||
expect(updaters[0].displayName).toEqual('App');
|
||||
});
|
||||
|
|
|
@ -1444,9 +1444,8 @@ describe('Store', () => {
|
|||
<MyComponent2 />
|
||||
));
|
||||
const MyComponent3 = (props, ref) => null;
|
||||
const ForwardRefComponentWithCustomDisplayName = React.forwardRef(
|
||||
MyComponent3,
|
||||
);
|
||||
const ForwardRefComponentWithCustomDisplayName =
|
||||
React.forwardRef(MyComponent3);
|
||||
ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
|
||||
const MyComponent4 = (props, ref) => null;
|
||||
const MemoComponent = React.memo(MyComponent4);
|
||||
|
@ -1467,9 +1466,8 @@ describe('Store', () => {
|
|||
);
|
||||
MemoizedFakeHigherOrderComponentWithDisplayNameOverride.displayName =
|
||||
'memoRefOverride';
|
||||
const ForwardRefFakeHigherOrderComponentWithDisplayNameOverride = React.forwardRef(
|
||||
FakeHigherOrderComponent,
|
||||
);
|
||||
const ForwardRefFakeHigherOrderComponentWithDisplayNameOverride =
|
||||
React.forwardRef(FakeHigherOrderComponent);
|
||||
ForwardRefFakeHigherOrderComponentWithDisplayNameOverride.displayName =
|
||||
'forwardRefOverride';
|
||||
|
||||
|
|
|
@ -47,10 +47,10 @@ describe('TreeListContext', () => {
|
|||
ReactDOM = require('react-dom');
|
||||
TestRenderer = utils.requireTestRenderer();
|
||||
|
||||
BridgeContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.BridgeContext;
|
||||
StoreContext = require('react-devtools-shared/src/devtools/views/context')
|
||||
.StoreContext;
|
||||
BridgeContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').BridgeContext;
|
||||
StoreContext =
|
||||
require('react-devtools-shared/src/devtools/views/context').StoreContext;
|
||||
TreeContext = require('react-devtools-shared/src/devtools/views/Components/TreeContext');
|
||||
});
|
||||
|
||||
|
|
|
@ -190,9 +190,9 @@ describe('utils', () => {
|
|||
|
||||
// The last letter isn't gray here but I think it's not a big
|
||||
// deal, since there is a string substituion but it's incorrect
|
||||
expect(
|
||||
formatWithStyles(['%s %s', 'a', 'b', 'c'], 'color: gray'),
|
||||
).toEqual(['%c%s %s', 'color: gray', 'a', 'b', 'c']);
|
||||
expect(formatWithStyles(['%s %s', 'a', 'b', 'c'], 'color: gray')).toEqual(
|
||||
['%c%s %s', 'color: gray', 'a', 'b', 'c'],
|
||||
);
|
||||
});
|
||||
|
||||
// @reactVersion >= 16.0
|
||||
|
|
|
@ -203,7 +203,8 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
|
|||
|
||||
expect(profilerStore.profilingData).not.toBeNull();
|
||||
|
||||
const profilingDataFrontendInitial = ((profilerStore.profilingData: any): ProfilingDataFrontend);
|
||||
const profilingDataFrontendInitial =
|
||||
((profilerStore.profilingData: any): ProfilingDataFrontend);
|
||||
expect(profilingDataFrontendInitial.imported).toBe(false);
|
||||
|
||||
const profilingDataExport = prepareProfilingDataExport(
|
||||
|
|
|
@ -569,9 +569,8 @@ export default class Agent extends EventEmitter<{
|
|||
}
|
||||
};
|
||||
|
||||
reloadAndProfile: (
|
||||
recordChangeDescriptions: boolean,
|
||||
) => void = recordChangeDescriptions => {
|
||||
reloadAndProfile: (recordChangeDescriptions: boolean) => void =
|
||||
recordChangeDescriptions => {
|
||||
sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
|
||||
sessionStorageSetItem(
|
||||
SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
|
||||
|
@ -628,9 +627,8 @@ export default class Agent extends EventEmitter<{
|
|||
}
|
||||
}
|
||||
|
||||
setTraceUpdatesEnabled: (
|
||||
traceUpdatesEnabled: boolean,
|
||||
) => void = traceUpdatesEnabled => {
|
||||
setTraceUpdatesEnabled: (traceUpdatesEnabled: boolean) => void =
|
||||
traceUpdatesEnabled => {
|
||||
this._traceUpdatesEnabled = traceUpdatesEnabled;
|
||||
|
||||
setTraceUpdatesEnabled(traceUpdatesEnabled);
|
||||
|
@ -656,9 +654,8 @@ export default class Agent extends EventEmitter<{
|
|||
this.emit('shutdown');
|
||||
};
|
||||
|
||||
startProfiling: (
|
||||
recordChangeDescriptions: boolean,
|
||||
) => void = recordChangeDescriptions => {
|
||||
startProfiling: (recordChangeDescriptions: boolean) => void =
|
||||
recordChangeDescriptions => {
|
||||
this._recordChangeDescriptions = recordChangeDescriptions;
|
||||
this._isProfiling = true;
|
||||
for (const rendererID in this._rendererInterfaces) {
|
||||
|
@ -726,9 +723,8 @@ export default class Agent extends EventEmitter<{
|
|||
});
|
||||
};
|
||||
|
||||
updateComponentFilters: (
|
||||
componentFilters: Array<ComponentFilter>,
|
||||
) => void = componentFilters => {
|
||||
updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void =
|
||||
componentFilters => {
|
||||
for (const rendererID in this._rendererInterfaces) {
|
||||
const renderer = ((this._rendererInterfaces[
|
||||
(rendererID: any)
|
||||
|
|
|
@ -354,8 +354,10 @@ export function patchForStrictMode() {
|
|||
}
|
||||
};
|
||||
|
||||
overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod;
|
||||
originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod;
|
||||
overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ =
|
||||
originalMethod;
|
||||
originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ =
|
||||
overrideMethod;
|
||||
|
||||
targetConsole[method] = overrideMethod;
|
||||
} catch (error) {}
|
||||
|
|
|
@ -137,16 +137,13 @@ export function attach(
|
|||
global: Object,
|
||||
): RendererInterface {
|
||||
const idToInternalInstanceMap: Map<number, InternalInstance> = new Map();
|
||||
const internalInstanceToIDMap: WeakMap<
|
||||
InternalInstance,
|
||||
number,
|
||||
> = new WeakMap();
|
||||
const internalInstanceToRootIDMap: WeakMap<
|
||||
InternalInstance,
|
||||
number,
|
||||
> = new WeakMap();
|
||||
const internalInstanceToIDMap: WeakMap<InternalInstance, number> =
|
||||
new WeakMap();
|
||||
const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
|
||||
new WeakMap();
|
||||
|
||||
let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
|
||||
let getInternalIDForNative: GetFiberIDForNative =
|
||||
((null: any): GetFiberIDForNative);
|
||||
let findNativeNodeForInternalID: (id: number) => ?NativeType;
|
||||
let getFiberForNative = (node: NativeType) => {
|
||||
// Not implemented.
|
||||
|
@ -155,9 +152,8 @@ export function attach(
|
|||
|
||||
if (renderer.ComponentTree) {
|
||||
getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
|
||||
const internalInstance = renderer.ComponentTree.getClosestInstanceFromNode(
|
||||
node,
|
||||
);
|
||||
const internalInstance =
|
||||
renderer.ComponentTree.getClosestInstanceFromNode(node);
|
||||
return internalInstanceToIDMap.get(internalInstance) || null;
|
||||
};
|
||||
findNativeNodeForInternalID = (id: number) => {
|
||||
|
|
|
@ -237,10 +237,8 @@ export function createProfilingHooks({
|
|||
currentReactMeasuresStack.push(reactMeasure);
|
||||
|
||||
if (currentTimelineData) {
|
||||
const {
|
||||
batchUIDToMeasuresMap,
|
||||
laneToReactMeasureMap,
|
||||
} = currentTimelineData;
|
||||
const {batchUIDToMeasuresMap, laneToReactMeasureMap} =
|
||||
currentTimelineData;
|
||||
|
||||
let reactMeasures = batchUIDToMeasuresMap.get(currentBatchUID);
|
||||
if (reactMeasures != null) {
|
||||
|
|
|
@ -154,9 +154,7 @@ const getCurrentTime =
|
|||
? () => performance.now()
|
||||
: () => Date.now();
|
||||
|
||||
export function getInternalReactConstants(
|
||||
version: string,
|
||||
): {
|
||||
export function getInternalReactConstants(version: string): {
|
||||
getDisplayNameForFiber: getDisplayNameForFiberType,
|
||||
getTypeSymbol: getTypeSymbolType,
|
||||
ReactPriorityLevels: ReactPriorityLevelsType,
|
||||
|
@ -843,12 +841,7 @@ export function attach(
|
|||
'color: purple;',
|
||||
'color: black;',
|
||||
);
|
||||
console.log(
|
||||
new Error().stack
|
||||
.split('\n')
|
||||
.slice(1)
|
||||
.join('\n'),
|
||||
);
|
||||
console.log(new Error().stack.split('\n').slice(1).join('\n'));
|
||||
console.groupEnd();
|
||||
}
|
||||
};
|
||||
|
@ -2072,9 +2065,8 @@ export function attach(
|
|||
|
||||
// If we have the tree selection from previous reload, try to match this Fiber.
|
||||
// Also remember whether to do the same for siblings.
|
||||
const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
|
||||
fiber,
|
||||
);
|
||||
const mightSiblingsBeOnTrackedPath =
|
||||
updateTrackedPathStateBeforeMount(fiber);
|
||||
|
||||
const shouldIncludeInTree = !shouldFilterFiber(fiber);
|
||||
if (shouldIncludeInTree) {
|
||||
|
@ -2232,7 +2224,8 @@ export function attach(
|
|||
// Note that we should do this for any fiber we performed work on, regardless of its actualDuration value.
|
||||
// In some cases actualDuration might be 0 for fibers we worked on (particularly if we're using Date.now)
|
||||
// In other cases (e.g. Memo) actualDuration might be greater than 0 even if we "bailed out".
|
||||
const metadata = ((currentCommitProfilingMetadata: any): CommitProfilingData);
|
||||
const metadata =
|
||||
((currentCommitProfilingMetadata: any): CommitProfilingData);
|
||||
metadata.durations.push(id, actualDuration, selfDuration);
|
||||
metadata.maxActualDuration = Math.max(
|
||||
metadata.maxActualDuration,
|
||||
|
@ -2633,13 +2626,13 @@ export function attach(
|
|||
function handlePostCommitFiberRoot(root: any) {
|
||||
if (isProfiling && rootSupportsProfiling(root)) {
|
||||
if (currentCommitProfilingMetadata !== null) {
|
||||
const {effectDuration, passiveEffectDuration} = getEffectDurations(
|
||||
root,
|
||||
);
|
||||
const {effectDuration, passiveEffectDuration} =
|
||||
getEffectDurations(root);
|
||||
// $FlowFixMe[incompatible-use] found when upgrading Flow
|
||||
currentCommitProfilingMetadata.effectDuration = effectDuration;
|
||||
// $FlowFixMe[incompatible-use] found when upgrading Flow
|
||||
currentCommitProfilingMetadata.passiveEffectDuration = passiveEffectDuration;
|
||||
currentCommitProfilingMetadata.passiveEffectDuration =
|
||||
passiveEffectDuration;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2719,7 +2712,8 @@ export function attach(
|
|||
|
||||
if (isProfiling && isProfilingSupported) {
|
||||
if (!shouldBailoutWithPendingOperations()) {
|
||||
const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
|
||||
const commitProfilingMetadata =
|
||||
((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
|
||||
currentRootID,
|
||||
);
|
||||
|
||||
|
@ -3964,7 +3958,8 @@ export function attach(
|
|||
let isProfiling: boolean = false;
|
||||
let profilingStartTime: number = 0;
|
||||
let recordChangeDescriptions: boolean = false;
|
||||
let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null = null;
|
||||
let rootToCommitProfilingMetadataMap: CommitProfilingMetadataMap | null =
|
||||
null;
|
||||
|
||||
function getProfilingData(): ProfilingDataBackend {
|
||||
const dataForRoots: Array<ProfilingDataForRootBackend> = [];
|
||||
|
|
|
@ -119,9 +119,10 @@ export function copyWithSet(
|
|||
return updated;
|
||||
}
|
||||
|
||||
export function getEffectDurations(
|
||||
root: Object,
|
||||
): {effectDuration: any | null, passiveEffectDuration: any | null} {
|
||||
export function getEffectDurations(root: Object): {
|
||||
effectDuration: any | null,
|
||||
passiveEffectDuration: any | null,
|
||||
} {
|
||||
// Profiling durations are only available for certain builds.
|
||||
// If available, they'll be stored on the HostRoot.
|
||||
let effectDuration = null;
|
||||
|
|
|
@ -233,9 +233,8 @@ export default class Overlay {
|
|||
name = elements[0].nodeName.toLowerCase();
|
||||
|
||||
const node = elements[0];
|
||||
const rendererInterface = this.agent.getBestMatchingRendererInterface(
|
||||
node,
|
||||
);
|
||||
const rendererInterface =
|
||||
this.agent.getBestMatchingRendererInterface(node);
|
||||
if (rendererInterface) {
|
||||
const id = rendererInterface.getFiberIDForNative(node, true);
|
||||
if (id) {
|
||||
|
|
|
@ -108,9 +108,7 @@ export function getNestedBoundingClientRect(
|
|||
}
|
||||
}
|
||||
|
||||
export function getElementDimensions(
|
||||
domElement: Element,
|
||||
): {
|
||||
export function getElementDimensions(domElement: Element): {
|
||||
borderBottom: number,
|
||||
borderLeft: number,
|
||||
borderRight: number,
|
||||
|
|
|
@ -54,9 +54,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function ContextMenu({children, id}: Props): React.Node {
|
||||
const {hideMenu, registerMenu} = useContext<RegistryContextType>(
|
||||
RegistryContext,
|
||||
);
|
||||
const {hideMenu, registerMenu} =
|
||||
useContext<RegistryContextType>(RegistryContext);
|
||||
|
||||
const [state, setState] = useState(HIDDEN_STATE);
|
||||
|
||||
|
|
|
@ -83,10 +83,9 @@ export type RegistryContextType = {
|
|||
registerMenu: typeof registerMenu,
|
||||
};
|
||||
|
||||
export const RegistryContext: ReactContext<RegistryContextType> = createContext<RegistryContextType>(
|
||||
{
|
||||
export const RegistryContext: ReactContext<RegistryContextType> =
|
||||
createContext<RegistryContextType>({
|
||||
hideMenu,
|
||||
showMenu,
|
||||
registerMenu,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
|
@ -249,9 +249,8 @@ export default class ProfilerStore extends EventEmitter<{
|
|||
}
|
||||
};
|
||||
|
||||
onBridgeProfilingData: (
|
||||
dataBackend: ProfilingDataBackend,
|
||||
) => void = dataBackend => {
|
||||
onBridgeProfilingData: (dataBackend: ProfilingDataBackend) => void =
|
||||
dataBackend => {
|
||||
if (this._isProfiling) {
|
||||
// This should never happen, but if it does- ignore previous profiling data.
|
||||
return;
|
||||
|
|
|
@ -117,10 +117,8 @@ export default class Store extends EventEmitter<{
|
|||
_componentFilters: Array<ComponentFilter>;
|
||||
|
||||
// Map of ID to number of recorded error and warning message IDs.
|
||||
_errorsAndWarnings: Map<
|
||||
number,
|
||||
{errorCount: number, warningCount: number},
|
||||
> = new Map();
|
||||
_errorsAndWarnings: Map<number, {errorCount: number, warningCount: number}> =
|
||||
new Map();
|
||||
|
||||
// At least one of the injected renderers contains (DEV only) owner metadata.
|
||||
_hasOwnerMetadata: boolean = false;
|
||||
|
@ -584,9 +582,10 @@ export default class Store extends EventEmitter<{
|
|||
}
|
||||
}
|
||||
|
||||
getErrorAndWarningCountForElementID(
|
||||
id: number,
|
||||
): {errorCount: number, warningCount: number} {
|
||||
getErrorAndWarningCountForElementID(id: number): {
|
||||
errorCount: number,
|
||||
warningCount: number,
|
||||
} {
|
||||
return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
|
||||
}
|
||||
|
||||
|
@ -1029,10 +1028,8 @@ export default class Store extends EventEmitter<{
|
|||
): any): Element);
|
||||
parentElement.children.push(id);
|
||||
|
||||
const [
|
||||
displayNameWithoutHOCs,
|
||||
hocDisplayNames,
|
||||
] = separateDisplayNameAndHOCs(displayName, type);
|
||||
const [displayNameWithoutHOCs, hocDisplayNames] =
|
||||
separateDisplayNameAndHOCs(displayName, type);
|
||||
|
||||
const element: Element = {
|
||||
children: [],
|
||||
|
@ -1280,8 +1277,8 @@ export default class Store extends EventEmitter<{
|
|||
|
||||
if (haveRootsChanged) {
|
||||
const prevRootSupportsProfiling = this._rootSupportsBasicProfiling;
|
||||
const prevRootSupportsTimelineProfiling = this
|
||||
._rootSupportsTimelineProfiling;
|
||||
const prevRootSupportsTimelineProfiling =
|
||||
this._rootSupportsTimelineProfiling;
|
||||
|
||||
this._hasOwnerMetadata = false;
|
||||
this._rootSupportsBasicProfiling = false;
|
||||
|
@ -1399,9 +1396,8 @@ export default class Store extends EventEmitter<{
|
|||
this.emit('backendVersion');
|
||||
};
|
||||
|
||||
onBridgeProtocol: (
|
||||
bridgeProtocol: BridgeProtocol,
|
||||
) => void = bridgeProtocol => {
|
||||
onBridgeProtocol: (bridgeProtocol: BridgeProtocol) => void =
|
||||
bridgeProtocol => {
|
||||
if (this._onBridgeProtocolTimeoutID !== null) {
|
||||
clearTimeout(this._onBridgeProtocolTimeoutID);
|
||||
this._onBridgeProtocolTimeoutID = null;
|
||||
|
|
|
@ -40,8 +40,9 @@ export function printElement(
|
|||
suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
|
||||
}
|
||||
|
||||
return `${' '.repeat(element.depth + 1)}${prefix} <${element.displayName ||
|
||||
'null'}${key}>${hocs}${suffix}`;
|
||||
return `${' '.repeat(element.depth + 1)}${prefix} <${
|
||||
element.displayName || 'null'
|
||||
}${key}>${hocs}${suffix}`;
|
||||
}
|
||||
|
||||
export function printOwnersList(
|
||||
|
@ -70,10 +71,8 @@ export function printStore(
|
|||
}
|
||||
|
||||
function printErrorsAndWarnings(element: Element): string {
|
||||
const {
|
||||
errorCount,
|
||||
warningCount,
|
||||
} = store.getErrorAndWarningCountForElementID(element.id);
|
||||
const {errorCount, warningCount} =
|
||||
store.getErrorAndWarningCountForElementID(element.id);
|
||||
if (errorCount === 0 && warningCount === 0) {
|
||||
return '';
|
||||
}
|
||||
|
|
|
@ -34,9 +34,8 @@ type Props = {
|
|||
|
||||
export default function Element({data, index, style}: Props): React.Node {
|
||||
const store = useContext(StoreContext);
|
||||
const {ownerFlatTree, ownerID, selectedElementID} = useContext(
|
||||
TreeStateContext,
|
||||
);
|
||||
const {ownerFlatTree, ownerID, selectedElementID} =
|
||||
useContext(TreeStateContext);
|
||||
const dispatch = useContext(TreeDispatcherContext);
|
||||
const {showInlineWarningsAndErrors} = React.useContext(SettingsContext);
|
||||
|
||||
|
|
|
@ -14,9 +14,8 @@ import {createContext} from 'react';
|
|||
export type FetchFileWithCaching = (url: string) => Promise<string>;
|
||||
export type Context = FetchFileWithCaching | null;
|
||||
|
||||
const FetchFileWithCachingContext: ReactContext<Context> = createContext<Context>(
|
||||
null,
|
||||
);
|
||||
const FetchFileWithCachingContext: ReactContext<Context> =
|
||||
createContext<Context>(null);
|
||||
FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
|
||||
|
||||
export default FetchFileWithCachingContext;
|
||||
|
|
|
@ -14,13 +14,13 @@ import type {Thenable} from 'shared/ReactTypes';
|
|||
import {createContext} from 'react';
|
||||
import typeof * as ParseHookNamesModule from 'react-devtools-shared/src/hooks/parseHookNames';
|
||||
|
||||
export type HookNamesModuleLoaderFunction = () => Thenable<ParseHookNamesModule>;
|
||||
export type HookNamesModuleLoaderFunction =
|
||||
() => Thenable<ParseHookNamesModule>;
|
||||
export type Context = HookNamesModuleLoaderFunction | null;
|
||||
|
||||
// TODO (Webpack 5) Hopefully we can remove this context entirely once the Webpack 5 upgrade is completed.
|
||||
const HookNamesModuleLoaderContext: ReactContext<Context> = createContext<Context>(
|
||||
null,
|
||||
);
|
||||
const HookNamesModuleLoaderContext: ReactContext<Context> =
|
||||
createContext<Context>(null);
|
||||
HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
|
||||
|
||||
export default HookNamesModuleLoaderContext;
|
||||
|
|
|
@ -48,12 +48,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
|
|||
} = useContext(OptionsContext);
|
||||
const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
|
||||
|
||||
const {
|
||||
hookNames,
|
||||
inspectedElement,
|
||||
parseHookNames,
|
||||
toggleParseHookNames,
|
||||
} = useContext(InspectedElementContext);
|
||||
const {hookNames, inspectedElement, parseHookNames, toggleParseHookNames} =
|
||||
useContext(InspectedElementContext);
|
||||
|
||||
const element =
|
||||
inspectedElementID !== null
|
||||
|
|
|
@ -57,9 +57,8 @@ type Context = {
|
|||
toggleParseHookNames: ToggleParseHookNames,
|
||||
};
|
||||
|
||||
export const InspectedElementContext: ReactContext<Context> = createContext<Context>(
|
||||
((null: any): Context),
|
||||
);
|
||||
export const InspectedElementContext: ReactContext<Context> =
|
||||
createContext<Context>(((null: any): Context));
|
||||
|
||||
const POLL_INTERVAL = 1000;
|
||||
|
||||
|
@ -134,10 +133,8 @@ export function InspectedElementContextController({
|
|||
if (parseHookNames || alreadyLoadedHookNames) {
|
||||
const hookNamesModule = loadModule(hookNamesModuleLoader);
|
||||
if (hookNamesModule !== null) {
|
||||
const {
|
||||
parseHookNames: loadHookNamesFunction,
|
||||
purgeCachedMetadata,
|
||||
} = hookNamesModule;
|
||||
const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} =
|
||||
hookNamesModule;
|
||||
|
||||
purgeCachedMetadataRef.current = purgeCachedMetadata;
|
||||
|
||||
|
@ -159,7 +156,8 @@ export function InspectedElementContextController({
|
|||
}
|
||||
}
|
||||
|
||||
const toggleParseHookNames: ToggleParseHookNames = useCallback<ToggleParseHookNames>(() => {
|
||||
const toggleParseHookNames: ToggleParseHookNames =
|
||||
useCallback<ToggleParseHookNames>(() => {
|
||||
startTransition(() => {
|
||||
setParseHookNames(value => !value);
|
||||
refresh();
|
||||
|
|
|
@ -40,10 +40,8 @@ export default function InspectedElementErrorsAndWarningsTree({
|
|||
}: Props): React.Node {
|
||||
const refresh = useCacheRefresh();
|
||||
|
||||
const [
|
||||
isErrorsTransitionPending,
|
||||
startClearErrorsTransition,
|
||||
] = useTransition();
|
||||
const [isErrorsTransitionPending, startClearErrorsTransition] =
|
||||
useTransition();
|
||||
const clearErrorsForInspectedElement = () => {
|
||||
const {id} = inspectedElement;
|
||||
const rendererID = store.getRendererIDForElement(id);
|
||||
|
@ -59,10 +57,8 @@ export default function InspectedElementErrorsAndWarningsTree({
|
|||
}
|
||||
};
|
||||
|
||||
const [
|
||||
isWarningsTransitionPending,
|
||||
startClearWarningsTransition,
|
||||
] = useTransition();
|
||||
const [isWarningsTransitionPending, startClearWarningsTransition] =
|
||||
useTransition();
|
||||
const clearWarningsForInspectedElement = () => {
|
||||
const {id} = inspectedElement;
|
||||
const rendererID = store.getRendererIDForElement(id);
|
||||
|
|
|
@ -59,9 +59,8 @@ export function InspectedElementHooksTree({
|
|||
|
||||
// Changing parseHookNames is done in a transition, because it suspends.
|
||||
// This value is done outside of the transition, so the UI toggle feels responsive.
|
||||
const [parseHookNamesOptimistic, setParseHookNamesOptimistic] = useState(
|
||||
parseHookNames,
|
||||
);
|
||||
const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
|
||||
useState(parseHookNames);
|
||||
const handleChange = () => {
|
||||
setParseHookNamesOptimistic(!parseHookNames);
|
||||
toggleParseHookNames();
|
||||
|
@ -168,11 +167,8 @@ function HookView({
|
|||
inspectedElement,
|
||||
path,
|
||||
}: HookViewProps) {
|
||||
const {
|
||||
canEditHooks,
|
||||
canEditHooksAndDeletePaths,
|
||||
canEditHooksAndRenamePaths,
|
||||
} = inspectedElement;
|
||||
const {canEditHooks, canEditHooksAndDeletePaths, canEditHooksAndRenamePaths} =
|
||||
inspectedElement;
|
||||
const {id: hookID, isStateEditable, subHooks, value} = hook;
|
||||
|
||||
const isReadOnly = hookID == null || !isStateEditable;
|
||||
|
|
|
@ -61,13 +61,8 @@ export default function InspectedElementView({
|
|||
toggleParseHookNames,
|
||||
}: Props): React.Node {
|
||||
const {id} = element;
|
||||
const {
|
||||
owners,
|
||||
rendererPackageName,
|
||||
rendererVersion,
|
||||
rootType,
|
||||
source,
|
||||
} = inspectedElement;
|
||||
const {owners, rendererPackageName, rendererVersion, rootType, source} =
|
||||
inspectedElement;
|
||||
|
||||
const bridge = useContext(BridgeContext);
|
||||
const store = useContext(StoreContext);
|
||||
|
@ -297,10 +292,8 @@ function OwnerView({
|
|||
type,
|
||||
}: OwnerViewProps) {
|
||||
const dispatch = useContext(TreeDispatcherContext);
|
||||
const {
|
||||
highlightNativeElement,
|
||||
clearHighlightNativeElement,
|
||||
} = useHighlightNativeElement();
|
||||
const {highlightNativeElement, clearHighlightNativeElement} =
|
||||
useHighlightNativeElement();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
logEvent({
|
||||
|
|
|
@ -55,11 +55,8 @@ type InProgressRequest = {
|
|||
};
|
||||
|
||||
const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
|
||||
const resource: Resource<
|
||||
Element,
|
||||
Element,
|
||||
StyleAndLayoutFrontend,
|
||||
> = createResource(
|
||||
const resource: Resource<Element, Element, StyleAndLayoutFrontend> =
|
||||
createResource(
|
||||
(element: Element) => {
|
||||
const request = inProgressRequests.get(element);
|
||||
if (request != null) {
|
||||
|
@ -108,10 +105,8 @@ function NativeStyleContextController({children}: Props): React.Node {
|
|||
// would itself be blocked by the same render that suspends (waiting for the data).
|
||||
const {selectedElementID} = useContext<StateContext>(TreeStateContext);
|
||||
|
||||
const [
|
||||
currentStyleAndLayout,
|
||||
setCurrentStyleAndLayout,
|
||||
] = useState<StyleAndLayoutFrontend | null>(null);
|
||||
const [currentStyleAndLayout, setCurrentStyleAndLayout] =
|
||||
useState<StyleAndLayoutFrontend | null>(null);
|
||||
|
||||
// This effect handler invalidates the suspense cache and schedules rendering updates with React.
|
||||
useEffect(() => {
|
||||
|
|
|
@ -102,10 +102,8 @@ function OwnersListContextController({children}: Props): React.Node {
|
|||
ownersList.owners === null
|
||||
? null
|
||||
: ownersList.owners.map(owner => {
|
||||
const [
|
||||
displayNameWithoutHOCs,
|
||||
hocDisplayNames,
|
||||
] = separateDisplayNameAndHOCs(owner.displayName, owner.type);
|
||||
const [displayNameWithoutHOCs, hocDisplayNames] =
|
||||
separateDisplayNameAndHOCs(owner.displayName, owner.type);
|
||||
|
||||
return {
|
||||
...owner,
|
||||
|
|
|
@ -64,13 +64,10 @@ export default function Tree(props: Props): React.Node {
|
|||
const bridge = useContext(BridgeContext);
|
||||
const store = useContext(StoreContext);
|
||||
const {hideSettings} = useContext(OptionsContext);
|
||||
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
|
||||
false,
|
||||
);
|
||||
const {
|
||||
highlightNativeElement,
|
||||
clearHighlightNativeElement,
|
||||
} = useHighlightNativeElement();
|
||||
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
|
||||
useState(false);
|
||||
const {highlightNativeElement, clearHighlightNativeElement} =
|
||||
useHighlightNativeElement();
|
||||
const treeRef = useRef<HTMLDivElement | null>(null);
|
||||
const focusTargetRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
|
|
|
@ -150,14 +150,12 @@ type Action =
|
|||
|
||||
export type DispatcherContext = (action: Action) => void;
|
||||
|
||||
const TreeStateContext: ReactContext<StateContext> = createContext<StateContext>(
|
||||
((null: any): StateContext),
|
||||
);
|
||||
const TreeStateContext: ReactContext<StateContext> =
|
||||
createContext<StateContext>(((null: any): StateContext));
|
||||
TreeStateContext.displayName = 'TreeStateContext';
|
||||
|
||||
const TreeDispatcherContext: ReactContext<DispatcherContext> = createContext<DispatcherContext>(
|
||||
((null: any): DispatcherContext),
|
||||
);
|
||||
const TreeDispatcherContext: ReactContext<DispatcherContext> =
|
||||
createContext<DispatcherContext>(((null: any): DispatcherContext));
|
||||
TreeDispatcherContext.displayName = 'TreeDispatcherContext';
|
||||
|
||||
type State = {
|
||||
|
@ -379,7 +377,8 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
|
|||
}
|
||||
break;
|
||||
case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
|
||||
const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
|
||||
const elementIndicesWithErrorsOrWarnings =
|
||||
store.getElementsWithErrorsAndWarnings();
|
||||
if (elementIndicesWithErrorsOrWarnings.length === 0) {
|
||||
return state;
|
||||
}
|
||||
|
@ -420,7 +419,8 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
|
|||
break;
|
||||
}
|
||||
case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
|
||||
const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
|
||||
const elementIndicesWithErrorsOrWarnings =
|
||||
store.getElementsWithErrorsAndWarnings();
|
||||
if (elementIndicesWithErrorsOrWarnings.length === 0) {
|
||||
return state;
|
||||
}
|
||||
|
@ -522,10 +522,8 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
|
|||
break;
|
||||
case 'HANDLE_STORE_MUTATION':
|
||||
if (searchText !== '') {
|
||||
const [
|
||||
addedElementIDs,
|
||||
removedElementIDs,
|
||||
] = (action: ACTION_HANDLE_STORE_MUTATION).payload;
|
||||
const [addedElementIDs, removedElementIDs] =
|
||||
(action: ACTION_HANDLE_STORE_MUTATION).payload;
|
||||
|
||||
removedElementIDs.forEach((parentID, id) => {
|
||||
// Prune this item from the search results.
|
||||
|
@ -847,7 +845,8 @@ function TreeContextController({
|
|||
// The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,
|
||||
// so it's okay for the reducer to have an empty dependencies array.
|
||||
const reducer = useMemo(
|
||||
() => (state: State, action: Action): State => {
|
||||
() =>
|
||||
(state: State, action: Action): State => {
|
||||
const {type} = action;
|
||||
switch (type) {
|
||||
case 'GO_TO_NEXT_SEARCH_RESULT':
|
||||
|
|
|
@ -56,9 +56,7 @@ const InitialState: State = {
|
|||
export default class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = InitialState;
|
||||
|
||||
static getDerivedStateFromError(
|
||||
error: any,
|
||||
): {
|
||||
static getDerivedStateFromError(error: any): {
|
||||
callStack: string | null,
|
||||
errorMessage: string | null,
|
||||
hasError: boolean,
|
||||
|
@ -84,10 +82,7 @@ export default class ErrorBoundary extends Component<Props, State> {
|
|||
typeof error === 'object' &&
|
||||
error !== null &&
|
||||
typeof error.stack === 'string'
|
||||
? error.stack
|
||||
.split('\n')
|
||||
.slice(1)
|
||||
.join('\n')
|
||||
? error.stack.split('\n').slice(1).join('\n')
|
||||
: null;
|
||||
|
||||
return {
|
||||
|
|
|
@ -93,7 +93,8 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
|
|||
}
|
||||
|
||||
if (maybeItem) {
|
||||
const resolvedRecord = ((newRecord: any): ResolvedRecord<GitHubIssue>);
|
||||
const resolvedRecord =
|
||||
((newRecord: any): ResolvedRecord<GitHubIssue>);
|
||||
resolvedRecord.status = Resolved;
|
||||
resolvedRecord.value = maybeItem;
|
||||
} else {
|
||||
|
|
|
@ -56,9 +56,8 @@ type ModalDialogContextType = {
|
|||
dispatch: Dispatch,
|
||||
};
|
||||
|
||||
const ModalDialogContext: ReactContext<ModalDialogContextType> = createContext<ModalDialogContextType>(
|
||||
((null: any): ModalDialogContextType),
|
||||
);
|
||||
const ModalDialogContext: ReactContext<ModalDialogContextType> =
|
||||
createContext<ModalDialogContextType>(((null: any): ModalDialogContextType));
|
||||
ModalDialogContext.displayName = 'ModalDialogContext';
|
||||
|
||||
function dialogReducer(state: State, action: Action) {
|
||||
|
|
|
@ -40,9 +40,8 @@ export type ItemData = {
|
|||
|
||||
export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
|
||||
const {profilerStore} = useContext(StoreContext);
|
||||
const {rootID, selectedCommitIndex, selectFiber} = useContext(
|
||||
ProfilerContext,
|
||||
);
|
||||
const {rootID, selectedCommitIndex, selectFiber} =
|
||||
useContext(ProfilerContext);
|
||||
const {profilingCache} = profilerStore;
|
||||
|
||||
const deselectCurrentFiber = useCallback(
|
||||
|
@ -98,16 +97,12 @@ type Props = {
|
|||
};
|
||||
|
||||
function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
|
||||
const [
|
||||
hoveredFiberData,
|
||||
setHoveredFiberData,
|
||||
] = useState<TooltipFiberData | null>(null);
|
||||
const [hoveredFiberData, setHoveredFiberData] =
|
||||
useState<TooltipFiberData | null>(null);
|
||||
const {lineHeight} = useContext(SettingsContext);
|
||||
const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
|
||||
const {
|
||||
highlightNativeElement,
|
||||
clearHighlightNativeElement,
|
||||
} = useHighlightNativeElement();
|
||||
const {highlightNativeElement, clearHighlightNativeElement} =
|
||||
useHighlightNativeElement();
|
||||
|
||||
const selectedChartNodeIndex = useMemo<number>(() => {
|
||||
if (selectedFiberID === null) {
|
||||
|
|
|
@ -40,9 +40,8 @@ export type ItemData = {
|
|||
|
||||
export default function CommitRankedAutoSizer(_: {}): React.Node {
|
||||
const {profilerStore} = useContext(StoreContext);
|
||||
const {rootID, selectedCommitIndex, selectFiber} = useContext(
|
||||
ProfilerContext,
|
||||
);
|
||||
const {rootID, selectedCommitIndex, selectFiber} =
|
||||
useContext(ProfilerContext);
|
||||
const {profilingCache} = profilerStore;
|
||||
|
||||
const deselectCurrentFiber = useCallback(
|
||||
|
@ -96,16 +95,12 @@ type Props = {
|
|||
};
|
||||
|
||||
function CommitRanked({chartData, commitTree, height, width}: Props) {
|
||||
const [
|
||||
hoveredFiberData,
|
||||
setHoveredFiberData,
|
||||
] = useState<TooltipFiberData | null>(null);
|
||||
const [hoveredFiberData, setHoveredFiberData] =
|
||||
useState<TooltipFiberData | null>(null);
|
||||
const {lineHeight} = useContext(SettingsContext);
|
||||
const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
|
||||
const {
|
||||
highlightNativeElement,
|
||||
clearHighlightNativeElement,
|
||||
} = useHighlightNativeElement();
|
||||
const {highlightNativeElement, clearHighlightNativeElement} =
|
||||
useHighlightNativeElement();
|
||||
|
||||
const selectedFiberIndex = useMemo(
|
||||
() => getNodeIndex(chartData, selectedFiberID),
|
||||
|
|
|
@ -71,13 +71,8 @@ export function getChartData({
|
|||
throw Error(`Could not find node with id "${id}" in commit tree`);
|
||||
}
|
||||
|
||||
const {
|
||||
children,
|
||||
displayName,
|
||||
hocDisplayNames,
|
||||
key,
|
||||
treeBaseDuration,
|
||||
} = node;
|
||||
const {children, displayName, hocDisplayNames, key, treeBaseDuration} =
|
||||
node;
|
||||
|
||||
const actualDuration = fiberActualDurations.get(id) || 0;
|
||||
const selfDuration = fiberSelfDurations.get(id) || 0;
|
||||
|
|
|
@ -44,10 +44,8 @@ export default function HoveredFiberInfo({fiberData}: Props): React.Node {
|
|||
for (i = 0; i < commitIndices.length; i++) {
|
||||
const commitIndex = commitIndices[i];
|
||||
if (selectedCommitIndex === commitIndex) {
|
||||
const {
|
||||
fiberActualDurations,
|
||||
fiberSelfDurations,
|
||||
} = profilerStore.getCommitData(((rootID: any): number), commitIndex);
|
||||
const {fiberActualDurations, fiberSelfDurations} =
|
||||
profilerStore.getCommitData(((rootID: any): number), commitIndex);
|
||||
const actualDuration = fiberActualDurations.get(id) || 0;
|
||||
const selfDuration = fiberSelfDurations.get(id) || 0;
|
||||
|
||||
|
|
|
@ -50,9 +50,8 @@ function Profiler(_: {}) {
|
|||
supportsProfiling,
|
||||
} = useContext(ProfilerContext);
|
||||
|
||||
const {file: timelineTraceEventData, searchInputContainerRef} = useContext(
|
||||
TimelineContext,
|
||||
);
|
||||
const {file: timelineTraceEventData, searchInputContainerRef} =
|
||||
useContext(TimelineContext);
|
||||
|
||||
const {supportsTimeline} = useContext(StoreContext);
|
||||
|
||||
|
|
|
@ -125,10 +125,8 @@ function ProfilerContextController({children}: Props): React.Node {
|
|||
supportsProfiling,
|
||||
} = useSubscription<StoreProfilingState>(subscription);
|
||||
|
||||
const [
|
||||
prevProfilingData,
|
||||
setPrevProfilingData,
|
||||
] = useState<ProfilingDataFrontend | null>(null);
|
||||
const [prevProfilingData, setPrevProfilingData] =
|
||||
useState<ProfilingDataFrontend | null>(null);
|
||||
const [rootID, setRootID] = useState<number | null>(null);
|
||||
const [selectedFiberID, selectFiberID] = useState<number | null>(null);
|
||||
const [selectedFiberName, selectFiberName] = useState<string | null>(null);
|
||||
|
@ -179,9 +177,8 @@ function ProfilerContextController({children}: Props): React.Node {
|
|||
if (rootID === null || !dataForRoots.has(rootID)) {
|
||||
let selectedElementRootID = null;
|
||||
if (selectedElementID !== null) {
|
||||
selectedElementRootID = store.getRootIDForElement(
|
||||
selectedElementID,
|
||||
);
|
||||
selectedElementRootID =
|
||||
store.getRootIDForElement(selectedElementID);
|
||||
}
|
||||
if (
|
||||
selectedElementRootID !== null &&
|
||||
|
@ -196,10 +193,8 @@ function ProfilerContextController({children}: Props): React.Node {
|
|||
});
|
||||
}
|
||||
|
||||
const [
|
||||
isCommitFilterEnabled,
|
||||
setIsCommitFilterEnabled,
|
||||
] = useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
|
||||
const [isCommitFilterEnabled, setIsCommitFilterEnabled] =
|
||||
useLocalStorage<boolean>('React::DevTools::isCommitFilterEnabled', false);
|
||||
const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
|
||||
'minCommitDuration',
|
||||
0,
|
||||
|
@ -228,9 +223,10 @@ function ProfilerContextController({children}: Props): React.Node {
|
|||
});
|
||||
store.profilerStore.startProfiling();
|
||||
}, [store, selectedTabID]);
|
||||
const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
|
||||
store,
|
||||
]);
|
||||
const stopProfiling = useCallback(
|
||||
() => store.profilerStore.stopProfiling(),
|
||||
[store],
|
||||
);
|
||||
|
||||
if (isProfiling) {
|
||||
batchedUpdates(() => {
|
||||
|
|
|
@ -96,9 +96,8 @@ export default function ProfilingImportExportButtons(): React.Node {
|
|||
|
||||
try {
|
||||
const profilingDataExport = ((json: any): ProfilingDataExport);
|
||||
profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
|
||||
profilingDataExport,
|
||||
);
|
||||
profilerStore.profilingData =
|
||||
prepareProfilingDataFrontendFromExport(profilingDataExport);
|
||||
} catch (error) {
|
||||
modalDialogDispatch({
|
||||
id: 'ProfilingImportExportButtons',
|
||||
|
|
|
@ -20,9 +20,8 @@ export type Props = {
|
|||
};
|
||||
|
||||
export default function RecordToggle({disabled}: Props): React.Node {
|
||||
const {isProfiling, startProfiling, stopProfiling} = useContext(
|
||||
ProfilerContext,
|
||||
);
|
||||
const {isProfiling, startProfiling, stopProfiling} =
|
||||
useContext(ProfilerContext);
|
||||
|
||||
let className = styles.InactiveRecordToggle;
|
||||
if (disabled) {
|
||||
|
|
|
@ -44,10 +44,8 @@ export default function ReloadAndProfileButton({
|
|||
}),
|
||||
[store],
|
||||
);
|
||||
const {
|
||||
recordChangeDescriptions,
|
||||
supportsReloadAndProfile,
|
||||
} = useSubscription<SubscriptionData>(subscription);
|
||||
const {recordChangeDescriptions, supportsReloadAndProfile} =
|
||||
useSubscription<SubscriptionData>(subscription);
|
||||
|
||||
const reloadAndProfile = useCallback(() => {
|
||||
// TODO If we want to support reload-and-profile for e.g. React Native,
|
||||
|
|
|
@ -63,14 +63,8 @@ export default function WhatChanged({fiberID}: Props): React.Node {
|
|||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
context,
|
||||
didHooksChange,
|
||||
hooks,
|
||||
isFirstMount,
|
||||
props,
|
||||
state,
|
||||
} = changeDescription;
|
||||
const {context, didHooksChange, hooks, isFirstMount, props, state} =
|
||||
changeDescription;
|
||||
|
||||
if (isFirstMount) {
|
||||
return (
|
||||
|
|
|
@ -250,7 +250,8 @@ export function prepareProfilingDataFrontendFromExport(
|
|||
export function prepareProfilingDataExport(
|
||||
profilingDataFrontend: ProfilingDataFrontend,
|
||||
): ProfilingDataExport {
|
||||
const timelineData: Array<TimelineDataExport> = profilingDataFrontend.timelineData.map(
|
||||
const timelineData: Array<TimelineDataExport> =
|
||||
profilingDataFrontend.timelineData.map(
|
||||
({
|
||||
batchUIDToMeasuresMap,
|
||||
componentMeasures,
|
||||
|
@ -373,15 +374,14 @@ export const formatPercentage = (percentage: number): number =>
|
|||
export const formatTime = (timestamp: number): number =>
|
||||
Math.round(Math.round(timestamp) / 100) / 10;
|
||||
|
||||
export const scale = (
|
||||
export const scale =
|
||||
(
|
||||
minValue: number,
|
||||
maxValue: number,
|
||||
minRange: number,
|
||||
maxRange: number,
|
||||
): ((value: number, fallbackValue: number) => number) => (
|
||||
value: number,
|
||||
fallbackValue: number,
|
||||
) =>
|
||||
): ((value: number, fallbackValue: number) => number) =>
|
||||
(value: number, fallbackValue: number) =>
|
||||
maxValue - minValue === 0
|
||||
? fallbackValue
|
||||
: ((value - minValue) / (maxValue - minValue)) * (maxRange - minRange);
|
||||
|
|
|
@ -107,10 +107,8 @@ function SettingsContextController({
|
|||
}: Props): React.Node {
|
||||
const bridge = useContext(BridgeContext);
|
||||
|
||||
const [
|
||||
displayDensity,
|
||||
setDisplayDensity,
|
||||
] = useLocalStorageWithLog<DisplayDensity>(
|
||||
const [displayDensity, setDisplayDensity] =
|
||||
useLocalStorageWithLog<DisplayDensity>(
|
||||
'React::DevTools::displayDensity',
|
||||
'compact',
|
||||
);
|
||||
|
@ -118,17 +116,13 @@ function SettingsContextController({
|
|||
LOCAL_STORAGE_BROWSER_THEME,
|
||||
'auto',
|
||||
);
|
||||
const [
|
||||
appendComponentStack,
|
||||
setAppendComponentStack,
|
||||
] = useLocalStorageWithLog<boolean>(
|
||||
const [appendComponentStack, setAppendComponentStack] =
|
||||
useLocalStorageWithLog<boolean>(
|
||||
LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
|
||||
true,
|
||||
);
|
||||
const [
|
||||
breakOnConsoleErrors,
|
||||
setBreakOnConsoleErrors,
|
||||
] = useLocalStorageWithLog<boolean>(
|
||||
const [breakOnConsoleErrors, setBreakOnConsoleErrors] =
|
||||
useLocalStorageWithLog<boolean>(
|
||||
LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
|
||||
false,
|
||||
);
|
||||
|
@ -136,24 +130,18 @@ function SettingsContextController({
|
|||
LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
|
||||
false,
|
||||
);
|
||||
const [
|
||||
hideConsoleLogsInStrictMode,
|
||||
setHideConsoleLogsInStrictMode,
|
||||
] = useLocalStorageWithLog<boolean>(
|
||||
const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
|
||||
useLocalStorageWithLog<boolean>(
|
||||
LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
|
||||
false,
|
||||
);
|
||||
const [
|
||||
showInlineWarningsAndErrors,
|
||||
setShowInlineWarningsAndErrors,
|
||||
] = useLocalStorageWithLog<boolean>(
|
||||
const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
|
||||
useLocalStorageWithLog<boolean>(
|
||||
LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
|
||||
true,
|
||||
);
|
||||
const [
|
||||
traceUpdatesEnabled,
|
||||
setTraceUpdatesEnabled,
|
||||
] = useLocalStorageWithLog<boolean>(
|
||||
const [traceUpdatesEnabled, setTraceUpdatesEnabled] =
|
||||
useLocalStorageWithLog<boolean>(
|
||||
LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
|
||||
false,
|
||||
);
|
||||
|
|
|
@ -59,9 +59,10 @@ export default function SettingsModal(_: {}): React.Node {
|
|||
|
||||
function SettingsModalImpl(_: {}) {
|
||||
const {setIsModalShowing} = useContext(SettingsModalContext);
|
||||
const dismissModal = useCallback(() => setIsModalShowing(false), [
|
||||
setIsModalShowing,
|
||||
]);
|
||||
const dismissModal = useCallback(
|
||||
() => setIsModalShowing(false),
|
||||
[setIsModalShowing],
|
||||
);
|
||||
|
||||
const [selectedTabID, selectTab] = useLocalStorage<TabID>(
|
||||
'React::DevTools::selectedSettingsTabID',
|
||||
|
|
|
@ -33,10 +33,10 @@ function SettingsModalContextController({
|
|||
}): React.Node {
|
||||
const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
|
||||
|
||||
const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
|
||||
isModalShowing,
|
||||
setIsModalShowing,
|
||||
]);
|
||||
const value = useMemo(
|
||||
() => ({isModalShowing, setIsModalShowing}),
|
||||
[isModalShowing, setIsModalShowing],
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingsModalContext.Provider value={value}>
|
||||
|
|
|
@ -20,9 +20,10 @@ export default function SettingsModalContextToggle(): React.Node {
|
|||
const store = useContext(StoreContext);
|
||||
const {profilerStore} = store;
|
||||
|
||||
const showFilterModal = useCallback(() => setIsModalShowing(true), [
|
||||
setIsModalShowing,
|
||||
]);
|
||||
const showFilterModal = useCallback(
|
||||
() => setIsModalShowing(true),
|
||||
[setIsModalShowing],
|
||||
);
|
||||
|
||||
// Updating preferences while profiling is in progress could break things (e.g. filtering)
|
||||
// Explicitly disallow it for now.
|
||||
|
|
|
@ -42,10 +42,10 @@ export default function Toggle({
|
|||
defaultClassName = styles.ToggleOff;
|
||||
}
|
||||
|
||||
const handleClick = useCallback(() => onChange(!isChecked), [
|
||||
isChecked,
|
||||
onChange,
|
||||
]);
|
||||
const handleClick = useCallback(
|
||||
() => onChange(!isChecked),
|
||||
[isChecked, onChange],
|
||||
);
|
||||
|
||||
let toggle = (
|
||||
<button
|
||||
|
|
|
@ -14,9 +14,8 @@ import Store from '../store';
|
|||
import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views/DevTools';
|
||||
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
|
||||
|
||||
export const BridgeContext: ReactContext<FrontendBridge> = createContext<FrontendBridge>(
|
||||
((null: any): FrontendBridge),
|
||||
);
|
||||
export const BridgeContext: ReactContext<FrontendBridge> =
|
||||
createContext<FrontendBridge>(((null: any): FrontendBridge));
|
||||
BridgeContext.displayName = 'BridgeContext';
|
||||
|
||||
export const StoreContext: ReactContext<Store> = createContext<Store>(
|
||||
|
@ -29,12 +28,11 @@ export type ContextMenuContextType = {
|
|||
viewAttributeSourceFunction: ViewAttributeSource | null,
|
||||
};
|
||||
|
||||
export const ContextMenuContext: ReactContext<ContextMenuContextType> = createContext<ContextMenuContextType>(
|
||||
{
|
||||
export const ContextMenuContext: ReactContext<ContextMenuContextType> =
|
||||
createContext<ContextMenuContextType>({
|
||||
isEnabledForInspectedElement: false,
|
||||
viewAttributeSourceFunction: null,
|
||||
},
|
||||
);
|
||||
});
|
||||
ContextMenuContext.displayName = 'ContextMenuContext';
|
||||
|
||||
export type OptionsContextType = {
|
||||
|
@ -46,13 +44,12 @@ export type OptionsContextType = {
|
|||
hideViewSourceAction: boolean,
|
||||
};
|
||||
|
||||
export const OptionsContext: ReactContext<OptionsContextType> = createContext<OptionsContextType>(
|
||||
{
|
||||
export const OptionsContext: ReactContext<OptionsContextType> =
|
||||
createContext<OptionsContextType>({
|
||||
readOnly: false,
|
||||
hideSettings: false,
|
||||
hideToggleErrorAction: false,
|
||||
hideToggleSuspenseAction: false,
|
||||
hideLogAction: false,
|
||||
hideViewSourceAction: false,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
|
@ -40,10 +40,8 @@ type ModuleLoaderFunction = () => Thenable<Module>;
|
|||
// This is intentionally a module-level Map, rather than a React-managed one.
|
||||
// Otherwise, refreshing the inspected element cache would also clear this cache.
|
||||
// Modules are static anyway.
|
||||
const moduleLoaderFunctionToModuleMap: Map<
|
||||
ModuleLoaderFunction,
|
||||
Module,
|
||||
> = new Map();
|
||||
const moduleLoaderFunctionToModuleMap: Map<ModuleLoaderFunction, Module> =
|
||||
new Map();
|
||||
|
||||
function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
|
||||
if (record.status === Resolved) {
|
||||
|
|
|
@ -303,8 +303,10 @@ export function installHook(target: any): DevToolsHook | null {
|
|||
}
|
||||
};
|
||||
|
||||
overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod;
|
||||
originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod;
|
||||
overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ =
|
||||
originalMethod;
|
||||
originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ =
|
||||
overrideMethod;
|
||||
|
||||
targetConsole[method] = overrideMethod;
|
||||
} catch (error) {}
|
||||
|
@ -555,7 +557,8 @@ export function installHook(target: any): DevToolsHook | null {
|
|||
};
|
||||
|
||||
if (__TEST__) {
|
||||
hook.dangerous_setTargetConsoleForTesting = dangerous_setTargetConsoleForTesting;
|
||||
hook.dangerous_setTargetConsoleForTesting =
|
||||
dangerous_setTargetConsoleForTesting;
|
||||
}
|
||||
|
||||
Object.defineProperty(
|
||||
|
|
|
@ -143,7 +143,8 @@ export function loadHookNames(
|
|||
}
|
||||
|
||||
if (hookNames) {
|
||||
const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
|
||||
const resolvedRecord =
|
||||
((newRecord: any): ResolvedRecord<HookNames>);
|
||||
resolvedRecord.status = Resolved;
|
||||
resolvedRecord.value = hookNames;
|
||||
} else {
|
||||
|
|
|
@ -56,16 +56,16 @@ describe('parseHookNames', () => {
|
|||
|
||||
fetchMock = initFetchMock();
|
||||
|
||||
inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
|
||||
.inspectHooks;
|
||||
inspectHooks =
|
||||
require('react-debug-tools/src/ReactDebugHooks').inspectHooks;
|
||||
|
||||
// Jest can't run the workerized version of this module.
|
||||
const {
|
||||
flattenHooksList,
|
||||
loadSourceAndMetadata,
|
||||
} = require('../parseHookNames/loadSourceAndMetadata');
|
||||
const parseSourceAndMetadata = require('../parseHookNames/parseSourceAndMetadata')
|
||||
.parseSourceAndMetadata;
|
||||
const parseSourceAndMetadata =
|
||||
require('../parseHookNames/parseSourceAndMetadata').parseSourceAndMetadata;
|
||||
parseHookNames = async hooksTree => {
|
||||
const hooksList = flattenHooksList(hooksTree);
|
||||
|
||||
|
@ -105,22 +105,22 @@ describe('parseHookNames', () => {
|
|||
}
|
||||
|
||||
it('should parse names for useState()', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithUseState')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithUseState').Component;
|
||||
const hookNames = await getHookNamesForComponent(Component);
|
||||
expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz', null]);
|
||||
});
|
||||
|
||||
it('should parse names for useReducer()', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithUseReducer')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithUseReducer').Component;
|
||||
const hookNames = await getHookNamesForComponent(Component);
|
||||
expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
|
||||
});
|
||||
|
||||
it('should skip loading source files for unnamed hooks like useEffect', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithUseEffect')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithUseEffect').Component;
|
||||
|
||||
// Since this component contains only unnamed hooks, the source code should not even be loaded.
|
||||
fetchMock.mockIf(/.+$/, request => {
|
||||
|
@ -132,8 +132,8 @@ describe('parseHookNames', () => {
|
|||
});
|
||||
|
||||
it('should skip loading source files for unnamed hooks like useEffect (alternate)', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithExternalUseEffect')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithExternalUseEffect').Component;
|
||||
|
||||
fetchMock.mockIf(/.+$/, request => {
|
||||
// Since the custom hook contains only unnamed hooks, the source code should not be loaded.
|
||||
|
@ -148,8 +148,8 @@ describe('parseHookNames', () => {
|
|||
});
|
||||
|
||||
it('should parse names for custom hooks', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithNamedCustomHooks')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithNamedCustomHooks').Component;
|
||||
const hookNames = await getHookNamesForComponent(Component);
|
||||
expectHookNamesToEqual(hookNames, [
|
||||
'foo',
|
||||
|
@ -159,15 +159,15 @@ describe('parseHookNames', () => {
|
|||
});
|
||||
|
||||
it('should parse names for code using hooks indirectly', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentUsingHooksIndirectly')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentUsingHooksIndirectly').Component;
|
||||
const hookNames = await getHookNamesForComponent(Component);
|
||||
expectHookNamesToEqual(hookNames, ['count', 'darkMode', 'isDarkMode']);
|
||||
});
|
||||
|
||||
it('should parse names for code using nested hooks', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithNestedHooks')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithNestedHooks').Component;
|
||||
let InnerComponent;
|
||||
const hookNames = await getHookNamesForComponent(Component, {
|
||||
callback: innerComponent => {
|
||||
|
@ -180,8 +180,8 @@ describe('parseHookNames', () => {
|
|||
});
|
||||
|
||||
it('should return null for custom hooks without explicit names', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithUnnamedCustomHooks')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithUnnamedCustomHooks').Component;
|
||||
const hookNames = await getHookNamesForComponent(Component);
|
||||
expectHookNamesToEqual(hookNames, [
|
||||
null, // Custom hooks can have names, but this one does not even return a value.
|
||||
|
@ -923,8 +923,8 @@ describe('parseHookNames worker', () => {
|
|||
};
|
||||
});
|
||||
|
||||
inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
|
||||
.inspectHooks;
|
||||
inspectHooks =
|
||||
require('react-debug-tools/src/ReactDebugHooks').inspectHooks;
|
||||
parseHookNames = require('../parseHookNames').parseHookNames;
|
||||
});
|
||||
|
||||
|
@ -935,8 +935,8 @@ describe('parseHookNames worker', () => {
|
|||
}
|
||||
|
||||
it('should use worker', async () => {
|
||||
const Component = require('./__source__/__untransformed__/ComponentWithUseState')
|
||||
.Component;
|
||||
const Component =
|
||||
require('./__source__/__untransformed__/ComponentWithUseState').Component;
|
||||
|
||||
window.Worker = true;
|
||||
|
||||
|
|
|
@ -244,8 +244,9 @@ function getHookNameFromNode(
|
|||
// const flagState = useState(true); -> later referenced as
|
||||
// const flag = flagState[0];
|
||||
// const setFlag = flagState[1];
|
||||
nodesAssociatedWithReactHookASTNode = nodesAssociatedWithReactHookASTNode.filter(
|
||||
hookPath => filterMemberWithHookVariableName(hookPath),
|
||||
nodesAssociatedWithReactHookASTNode =
|
||||
nodesAssociatedWithReactHookASTNode.filter(hookPath =>
|
||||
filterMemberWithHookVariableName(hookPath),
|
||||
);
|
||||
|
||||
if (nodesAssociatedWithReactHookASTNode.length !== 1) {
|
||||
|
|
|
@ -17,7 +17,8 @@ import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
|
|||
import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
|
||||
import {flattenHooksList, loadSourceAndMetadata} from './loadSourceAndMetadata';
|
||||
|
||||
const workerizedParseHookNames: ParseSourceAndMetadataModule = WorkerizedParseSourceAndMetadata();
|
||||
const workerizedParseHookNames: ParseSourceAndMetadataModule =
|
||||
WorkerizedParseSourceAndMetadata();
|
||||
|
||||
export function parseSourceAndMetadata(
|
||||
hooksList: Array<HooksNode>,
|
||||
|
|
|
@ -149,7 +149,8 @@ function extractAndLoadSourceMapJSON(
|
|||
const setterPromises = [];
|
||||
locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
|
||||
const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
|
||||
const runtimeSourceCode = ((hookSourceAndMetadata.runtimeSourceCode: any): string);
|
||||
const runtimeSourceCode =
|
||||
((hookSourceAndMetadata.runtimeSourceCode: any): string);
|
||||
|
||||
// TODO (named hooks) Search for our custom metadata first.
|
||||
// If it's found, we should use it rather than source maps.
|
||||
|
@ -415,7 +416,8 @@ function initializeHookSourceAndMetadata(
|
|||
hooksList: Array<HooksNode>,
|
||||
): LocationKeyToHookSourceAndMetadata {
|
||||
// Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
|
||||
const locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata = new Map();
|
||||
const locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata =
|
||||
new Map();
|
||||
for (let i = 0; i < hooksList.length; i++) {
|
||||
const hook = hooksList[i];
|
||||
|
||||
|
|
|
@ -64,22 +64,21 @@ type CachedRuntimeCodeMetadata = {
|
|||
sourceMapConsumer: SourceMapConsumerType | null,
|
||||
};
|
||||
|
||||
const runtimeURLToMetadataCache: LRUCache<
|
||||
string,
|
||||
CachedRuntimeCodeMetadata,
|
||||
> = new LRU({max: 50});
|
||||
const runtimeURLToMetadataCache: LRUCache<string, CachedRuntimeCodeMetadata> =
|
||||
new LRU({max: 50});
|
||||
|
||||
type CachedSourceCodeMetadata = {
|
||||
originalSourceAST: AST,
|
||||
originalSourceCode: string,
|
||||
};
|
||||
|
||||
const originalURLToMetadataCache: LRUCache<
|
||||
string,
|
||||
CachedSourceCodeMetadata,
|
||||
> = new LRU({
|
||||
const originalURLToMetadataCache: LRUCache<string, CachedSourceCodeMetadata> =
|
||||
new LRU({
|
||||
max: 50,
|
||||
dispose: (originalSourceURL: string, metadata: CachedSourceCodeMetadata) => {
|
||||
dispose: (
|
||||
originalSourceURL: string,
|
||||
metadata: CachedSourceCodeMetadata,
|
||||
) => {
|
||||
if (__DEBUG__) {
|
||||
console.log(
|
||||
`originalURLToMetadataCache.dispose() Evicting cached metadata for "${originalSourceURL}"`,
|
||||
|
@ -196,7 +195,8 @@ function initializeHookParsedMetadata(
|
|||
locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
|
||||
) {
|
||||
// Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
|
||||
const locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata = new Map();
|
||||
const locationKeyToHookParsedMetadata: LocationKeyToHookParsedMetadata =
|
||||
new Map();
|
||||
locationKeyToHookSourceAndMetadata.forEach(
|
||||
(hookSourceAndMetadata, locationKey) => {
|
||||
const hookParsedMetadata: HookParsedMetadata = {
|
||||
|
@ -222,9 +222,8 @@ function parseSourceAST(
|
|||
): void {
|
||||
locationKeyToHookSourceAndMetadata.forEach(
|
||||
(hookSourceAndMetadata, locationKey) => {
|
||||
const hookParsedMetadata = locationKeyToHookParsedMetadata.get(
|
||||
locationKey,
|
||||
);
|
||||
const hookParsedMetadata =
|
||||
locationKeyToHookParsedMetadata.get(locationKey);
|
||||
if (hookParsedMetadata == null) {
|
||||
throw Error(`Expected to find HookParsedMetadata for "${locationKey}"`);
|
||||
}
|
||||
|
@ -250,7 +249,8 @@ function parseSourceAST(
|
|||
}
|
||||
|
||||
const {metadataConsumer, sourceMapConsumer} = hookParsedMetadata;
|
||||
const runtimeSourceCode = ((hookSourceAndMetadata.runtimeSourceCode: any): string);
|
||||
const runtimeSourceCode =
|
||||
((hookSourceAndMetadata.runtimeSourceCode: any): string);
|
||||
let hasHookMap = false;
|
||||
let originalSourceURL;
|
||||
let originalSourceCode;
|
||||
|
@ -268,12 +268,8 @@ function parseSourceAST(
|
|||
// Namespace them?
|
||||
originalSourceURL = hookSourceAndMetadata.runtimeSourceURL;
|
||||
} else {
|
||||
const {
|
||||
column,
|
||||
line,
|
||||
sourceContent,
|
||||
sourceURL,
|
||||
} = sourceMapConsumer.originalPositionFor({
|
||||
const {column, line, sourceContent, sourceURL} =
|
||||
sourceMapConsumer.originalPositionFor({
|
||||
columnNumber,
|
||||
lineNumber,
|
||||
});
|
||||
|
@ -287,7 +283,8 @@ function parseSourceAST(
|
|||
hookParsedMetadata.originalSourceCode = originalSourceCode;
|
||||
hookParsedMetadata.originalSourceURL = originalSourceURL;
|
||||
hookParsedMetadata.originalSourceLineNumber = originalSourceLineNumber;
|
||||
hookParsedMetadata.originalSourceColumnNumber = originalSourceColumnNumber;
|
||||
hookParsedMetadata.originalSourceColumnNumber =
|
||||
originalSourceColumnNumber;
|
||||
|
||||
if (
|
||||
metadataConsumer != null &&
|
||||
|
@ -381,9 +378,8 @@ function parseSourceMaps(
|
|||
) {
|
||||
locationKeyToHookSourceAndMetadata.forEach(
|
||||
(hookSourceAndMetadata, locationKey) => {
|
||||
const hookParsedMetadata = locationKeyToHookParsedMetadata.get(
|
||||
locationKey,
|
||||
);
|
||||
const hookParsedMetadata =
|
||||
locationKeyToHookParsedMetadata.get(locationKey);
|
||||
if (hookParsedMetadata == null) {
|
||||
throw Error(`Expected to find HookParsedMetadata for "${locationKey}"`);
|
||||
}
|
||||
|
|
|
@ -132,7 +132,8 @@ export function inspectElement(
|
|||
InspectedElementFrontend,
|
||||
InspectedElementResponseType,
|
||||
]) => {
|
||||
const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
|
||||
const resolvedRecord =
|
||||
((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
|
||||
resolvedRecord.status = Resolved;
|
||||
resolvedRecord.value = inspectedElement;
|
||||
|
||||
|
|
|
@ -39,10 +39,8 @@ import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError'
|
|||
// This doens't work properly though when component filters are changed,
|
||||
// because this will cause the Store to dump all roots and re-initialize the tree (recreating the Element objects).
|
||||
// So instead we key on Element ID (which is stable in this case) and use an LRU for eviction.
|
||||
const inspectedElementCache: LRUCache<
|
||||
number,
|
||||
InspectedElementFrontend,
|
||||
> = new LRU({
|
||||
const inspectedElementCache: LRUCache<number, InspectedElementFrontend> =
|
||||
new LRU({
|
||||
max: 25,
|
||||
});
|
||||
|
||||
|
|
|
@ -39,9 +39,10 @@ type StatefulFunctionProps = {name: string};
|
|||
function StatefulFunction({name}: StatefulFunctionProps) {
|
||||
const [count, updateCount] = useState(0);
|
||||
const debouncedCount = useDebounce(count, 1000);
|
||||
const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
|
||||
count,
|
||||
]);
|
||||
const handleUpdateCountClick = useCallback(
|
||||
() => updateCount(count + 1),
|
||||
[count],
|
||||
);
|
||||
|
||||
const [data, dispatch] = useReducer(reducer, initialData);
|
||||
const handleUpdateReducerClick = useCallback(
|
||||
|
@ -109,9 +110,10 @@ const ForwardRef = forwardRef<{name: string}, HTMLUListElement>(
|
|||
({name}, ref) => {
|
||||
const [count, updateCount] = useState(0);
|
||||
const debouncedCount = useDebounce(count, 1000);
|
||||
const handleUpdateCountClick = useCallback(() => updateCount(count + 1), [
|
||||
count,
|
||||
]);
|
||||
const handleUpdateCountClick = useCallback(
|
||||
() => updateCount(count + 1),
|
||||
[count],
|
||||
);
|
||||
return (
|
||||
<ul ref={ref}>
|
||||
<li>Name: {name}</li>
|
||||
|
|
|
@ -24,9 +24,9 @@ export default function LargeSubtree(): React.Node {
|
|||
window.requestAnimationFrame(() => {
|
||||
const afterRenderTime = performance.now();
|
||||
console.log(
|
||||
`Time spent on ${
|
||||
showList ? 'unmounting' : 'mounting'
|
||||
} the subtree: ${afterRenderTime - startTime}ms`,
|
||||
`Time spent on ${showList ? 'unmounting' : 'mounting'} the subtree: ${
|
||||
afterRenderTime - startTime
|
||||
}ms`,
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
@ -794,9 +794,9 @@ function AutoSizedCanvas({
|
|||
<ContextMenuItem
|
||||
onClick={() =>
|
||||
copy(
|
||||
`line ${flamechartStackFrame.locationLine ??
|
||||
''}, column ${flamechartStackFrame.locationColumn ??
|
||||
''}`,
|
||||
`line ${
|
||||
flamechartStackFrame.locationLine ?? ''
|
||||
}, column ${flamechartStackFrame.locationColumn ?? ''}`,
|
||||
)
|
||||
}
|
||||
title="Copy location">
|
||||
|
|
|
@ -33,13 +33,8 @@ import {TimelineSearchContextController} from './TimelineSearchContext';
|
|||
import styles from './Timeline.css';
|
||||
|
||||
export function Timeline(_: {}): React.Node {
|
||||
const {
|
||||
file,
|
||||
inMemoryTimelineData,
|
||||
isTimelineSupported,
|
||||
setFile,
|
||||
viewState,
|
||||
} = useContext(TimelineContext);
|
||||
const {file, inMemoryTimelineData, isTimelineSupported, setFile, viewState} =
|
||||
useContext(TimelineContext);
|
||||
const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
|
||||
|
||||
const ref = useRef(null);
|
||||
|
|
|
@ -82,8 +82,10 @@ function TimelineContextController({children}: Props): React.Node {
|
|||
|
||||
// Recreate view state any time new profiling data is imported.
|
||||
const viewState = useMemo<ViewState>(() => {
|
||||
const horizontalScrollStateChangeCallbacks: Set<HorizontalScrollStateChangeCallback> = new Set();
|
||||
const searchRegExpStateChangeCallbacks: Set<SearchRegExpStateChangeCallback> = new Set();
|
||||
const horizontalScrollStateChangeCallbacks: Set<HorizontalScrollStateChangeCallback> =
|
||||
new Set();
|
||||
const searchRegExpStateChangeCallbacks: Set<SearchRegExpStateChangeCallback> =
|
||||
new Set();
|
||||
|
||||
const horizontalScrollState = {
|
||||
offset: 0,
|
||||
|
|
|
@ -92,13 +92,8 @@ export class ComponentMeasuresView extends View {
|
|||
showHoverHighlight: boolean,
|
||||
): boolean {
|
||||
const {frame} = this;
|
||||
const {
|
||||
componentName,
|
||||
duration,
|
||||
timestamp,
|
||||
type,
|
||||
warning,
|
||||
} = componentMeasure;
|
||||
const {componentName, duration, timestamp, type, warning} =
|
||||
componentMeasure;
|
||||
|
||||
const xStart = timestampToPosition(timestamp, scaleFactor, frame);
|
||||
const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
|
||||
|
|
|
@ -203,13 +203,8 @@ export class ReactMeasuresView extends View {
|
|||
}
|
||||
|
||||
draw(context: CanvasRenderingContext2D): void {
|
||||
const {
|
||||
frame,
|
||||
_hoveredMeasure,
|
||||
_lanesToRender,
|
||||
_profilerData,
|
||||
visibleArea,
|
||||
} = this;
|
||||
const {frame, _hoveredMeasure, _lanesToRender, _profilerData, visibleArea} =
|
||||
this;
|
||||
|
||||
context.fillStyle = COLORS.PRIORITY_BACKGROUND;
|
||||
context.fillRect(
|
||||
|
|
|
@ -27,18 +27,7 @@ export const TEXT_PADDING = 3;
|
|||
export const SNAPSHOT_SCRUBBER_SIZE = 3;
|
||||
|
||||
export const INTERVAL_TIMES = [
|
||||
1,
|
||||
2,
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
50,
|
||||
100,
|
||||
200,
|
||||
500,
|
||||
1000,
|
||||
2000,
|
||||
5000,
|
||||
1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000,
|
||||
];
|
||||
export const MIN_INTERVAL_SIZE_PX = 70;
|
||||
|
||||
|
|
|
@ -552,13 +552,9 @@ function processTimelineEvent(
|
|||
type: 'thrown-error',
|
||||
});
|
||||
} else if (name.startsWith('--suspense-suspend-')) {
|
||||
const [
|
||||
id,
|
||||
componentName,
|
||||
phase,
|
||||
laneBitmaskString,
|
||||
promiseName,
|
||||
] = name.substr(19).split('-');
|
||||
const [id, componentName, phase, laneBitmaskString, promiseName] = name
|
||||
.substr(19)
|
||||
.split('-');
|
||||
const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
|
||||
|
||||
const availableDepths = new Array(
|
||||
|
@ -978,14 +974,22 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
|
|||
});
|
||||
|
||||
const flamechart: Flamechart = speedscopeFlamechart.getLayers().map(layer =>
|
||||
layer.map(({start, end, node: {frame: {name, file, line, col}}}) => ({
|
||||
layer.map(
|
||||
({
|
||||
start,
|
||||
end,
|
||||
node: {
|
||||
frame: {name, file, line, col},
|
||||
},
|
||||
}) => ({
|
||||
name,
|
||||
timestamp: start / 1000,
|
||||
duration: (end - start) / 1000,
|
||||
scriptUrl: file,
|
||||
locationLine: line,
|
||||
locationColumn: col,
|
||||
})),
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
return flamechart;
|
||||
|
|
|
@ -79,7 +79,8 @@ export function importFile(file: File): TimelineData | Error {
|
|||
importFileWorker(file).then(data => {
|
||||
switch (data.status) {
|
||||
case 'SUCCESS':
|
||||
const resolvedRecord = ((newRecord: any): ResolvedRecord<TimelineData>);
|
||||
const resolvedRecord =
|
||||
((newRecord: any): ResolvedRecord<TimelineData>);
|
||||
resolvedRecord.status = Resolved;
|
||||
resolvedRecord.value = data.processedData;
|
||||
break;
|
||||
|
|
|
@ -44,9 +44,9 @@ export default function useSmartTooltip({
|
|||
// mouse cursor or finally aligned with the window's top edge.
|
||||
if (mouseY - TOOLTIP_OFFSET_TOP - element.offsetHeight > 0) {
|
||||
// We position the tooltip above the mouse cursor if it fits there.
|
||||
element.style.top = `${mouseY -
|
||||
element.offsetHeight -
|
||||
TOOLTIP_OFFSET_TOP}px`;
|
||||
element.style.top = `${
|
||||
mouseY - element.offsetHeight - TOOLTIP_OFFSET_TOP
|
||||
}px`;
|
||||
} else {
|
||||
// Otherwise we align the tooltip with the window's top edge.
|
||||
element.style.top = '0px';
|
||||
|
@ -64,9 +64,9 @@ export default function useSmartTooltip({
|
|||
if (mouseX - TOOLTIP_OFFSET_TOP - element.offsetWidth > 0) {
|
||||
// We position the tooltip at the left of the mouse cursor if it fits
|
||||
// there.
|
||||
element.style.left = `${mouseX -
|
||||
element.offsetWidth -
|
||||
TOOLTIP_OFFSET_TOP}px`;
|
||||
element.style.left = `${
|
||||
mouseX - element.offsetWidth - TOOLTIP_OFFSET_TOP
|
||||
}px`;
|
||||
} else {
|
||||
// Otherwise, align the tooltip with the window's left edge.
|
||||
element.style.left = '0px';
|
||||
|
|
|
@ -142,12 +142,10 @@ if (__DEV__) {
|
|||
if (didWarnInvalidHydration) {
|
||||
return;
|
||||
}
|
||||
const normalizedClientValue = normalizeMarkupForTextOrAttribute(
|
||||
clientValue,
|
||||
);
|
||||
const normalizedServerValue = normalizeMarkupForTextOrAttribute(
|
||||
serverValue,
|
||||
);
|
||||
const normalizedClientValue =
|
||||
normalizeMarkupForTextOrAttribute(clientValue);
|
||||
const normalizedServerValue =
|
||||
normalizeMarkupForTextOrAttribute(serverValue);
|
||||
if (normalizedServerValue === normalizedClientValue) {
|
||||
return;
|
||||
}
|
||||
|
@ -387,9 +385,8 @@ export function createElement(
|
|||
|
||||
// We create tags in the namespace of their parent container, except HTML
|
||||
// tags get no namespace.
|
||||
const ownerDocument: Document = getOwnerDocumentFromRootContainer(
|
||||
rootContainerElement,
|
||||
);
|
||||
const ownerDocument: Document =
|
||||
getOwnerDocumentFromRootContainer(rootContainerElement);
|
||||
let domElement: Element;
|
||||
let namespaceURI = parentNamespace;
|
||||
if (namespaceURI === HTML_NAMESPACE) {
|
||||
|
|
|
@ -39,9 +39,7 @@ import {
|
|||
enableHostSingletons,
|
||||
} from 'shared/ReactFeatureFlags';
|
||||
|
||||
const randomKey = Math.random()
|
||||
.toString(36)
|
||||
.slice(2);
|
||||
const randomKey = Math.random().toString(36).slice(2);
|
||||
const internalInstanceKey = '__reactFiber$' + randomKey;
|
||||
const internalPropsKey = '__reactProps$' + randomKey;
|
||||
const internalContainerInstanceKey = '__reactContainer$' + randomKey;
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue