Skip to content

Commit b447ad1

Browse files
author
Brian Vaughn
committed
DevTools: Improve function props display for inspected elements
1 parent 24f8242 commit b447ad1

File tree

7 files changed

+75
-21
lines changed

7 files changed

+75
-21
lines changed

‎packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,11 +485,13 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
485485
"context": null,
486486
"hooks": null,
487487
"props": {
488+
"anonymous_fn": {},
488489
"array_buffer": {},
489490
"array_of_arrays": [
490491
{}
491492
],
492493
"big_int": {},
494+
"bound_fn": {},
493495
"data_view": {},
494496
"date": {},
495497
"fn": {},

‎packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -538,14 +538,21 @@ describe('InspectedElementContext', () => {
538538
},
539539
});
540540

541+
class Class {
542+
anonymousFunction = () => {};
543+
}
544+
const instance = new Class();
545+
541546
const container = document.createElement('div');
542547
await utils.actAsync(() =>
543548
ReactDOM.render(
544549
<Example
550+
anonymous_fn={instance.anonymousFunction}
545551
array_buffer={arrayBuffer}
546552
array_of_arrays={arrayOfArrays}
547553
// eslint-disable-next-line no-undef
548554
big_int={BigInt(123)}
555+
bound_fn={exampleFunction.bind(this)}
549556
data_view={dataView}
550557
date={new Date(exampleDateISO)}
551558
fn={exampleFunction}
@@ -593,9 +600,11 @@ describe('InspectedElementContext', () => {
593600
expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
594601

595602
const {
603+
anonymous_fn,
596604
array_buffer,
597605
array_of_arrays,
598606
big_int,
607+
bound_fn,
599608
data_view,
600609
date,
601610
fn,
@@ -612,6 +621,12 @@ describe('InspectedElementContext', () => {
612621
typed_array,
613622
} = (inspectedElement: any).props;
614623

624+
expect(anonymous_fn[meta.inspectable]).toBe(false);
625+
expect(anonymous_fn[meta.name]).toBe('function');
626+
expect(anonymous_fn[meta.type]).toBe('function');
627+
expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
628+
expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
629+
615630
expect(array_buffer[meta.size]).toBe(3);
616631
expect(array_buffer[meta.inspectable]).toBe(false);
617632
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
@@ -632,6 +647,12 @@ describe('InspectedElementContext', () => {
632647
expect(big_int[meta.preview_long]).toBe('123n');
633648
expect(big_int[meta.preview_short]).toBe('123n');
634649

650+
expect(bound_fn[meta.inspectable]).toBe(false);
651+
expect(bound_fn[meta.name]).toBe('bound exampleFunction');
652+
expect(bound_fn[meta.type]).toBe('function');
653+
expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
654+
expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
655+
635656
expect(data_view[meta.size]).toBe(3);
636657
expect(data_view[meta.inspectable]).toBe(false);
637658
expect(data_view[meta.name]).toBe('DataView');
@@ -651,8 +672,8 @@ describe('InspectedElementContext', () => {
651672
expect(fn[meta.inspectable]).toBe(false);
652673
expect(fn[meta.name]).toBe('exampleFunction');
653674
expect(fn[meta.type]).toBe('function');
654-
expect(fn[meta.preview_long]).toBe('exampleFunction');
655-
expect(fn[meta.preview_short]).toBe('exampleFunction');
675+
expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
676+
expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
656677

657678
expect(html_element[meta.inspectable]).toBe(false);
658679
expect(html_element[meta.name]).toBe('DIV');

‎packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,13 @@ Object {
126126
"context": {},
127127
"hooks": null,
128128
"props": {
129+
"anonymous_fn": {},
129130
"array_buffer": {},
130131
"array_of_arrays": [
131132
{}
132133
],
133134
"big_int": {},
135+
"bound_fn": {},
134136
"data_view": {},
135137
"date": {},
136138
"fn": {},

‎packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,13 +169,20 @@ describe('InspectedElementContext', () => {
169169
},
170170
});
171171

172+
class Class {
173+
anonymousFunction = () => {};
174+
}
175+
const instance = new Class();
176+
172177
act(() =>
173178
ReactDOM.render(
174179
<Example
180+
anonymous_fn={instance.anonymousFunction}
175181
array_buffer={arrayBuffer}
176182
array_of_arrays={arrayOfArrays}
177183
// eslint-disable-next-line no-undef
178184
big_int={BigInt(123)}
185+
bound_fn={exampleFunction.bind(this)}
179186
data_view={dataView}
180187
date={new Date(123)}
181188
fn={exampleFunction}
@@ -201,9 +208,11 @@ describe('InspectedElementContext', () => {
201208
expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
202209

203210
const {
211+
anonymous_fn,
204212
array_buffer,
205213
array_of_arrays,
206214
big_int,
215+
bound_fn,
207216
data_view,
208217
date,
209218
fn,
@@ -220,6 +229,12 @@ describe('InspectedElementContext', () => {
220229
typed_array,
221230
} = inspectedElement.value.props;
222231

232+
expect(anonymous_fn[meta.inspectable]).toBe(false);
233+
expect(anonymous_fn[meta.name]).toBe('function');
234+
expect(anonymous_fn[meta.type]).toBe('function');
235+
expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
236+
expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
237+
223238
expect(array_buffer[meta.size]).toBe(3);
224239
expect(array_buffer[meta.inspectable]).toBe(false);
225240
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
@@ -238,6 +253,12 @@ describe('InspectedElementContext', () => {
238253
expect(big_int[meta.name]).toBe('123');
239254
expect(big_int[meta.type]).toBe('bigint');
240255

256+
expect(bound_fn[meta.inspectable]).toBe(false);
257+
expect(bound_fn[meta.name]).toBe('bound exampleFunction');
258+
expect(bound_fn[meta.type]).toBe('function');
259+
expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
260+
expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
261+
241262
expect(data_view[meta.size]).toBe(3);
242263
expect(data_view[meta.inspectable]).toBe(false);
243264
expect(data_view[meta.name]).toBe('DataView');
@@ -249,6 +270,8 @@ describe('InspectedElementContext', () => {
249270
expect(fn[meta.inspectable]).toBe(false);
250271
expect(fn[meta.name]).toBe('exampleFunction');
251272
expect(fn[meta.type]).toBe('function');
273+
expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
274+
expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
252275

253276
expect(html_element[meta.inspectable]).toBe(false);
254277
expect(html_element[meta.name]).toBe('DIV');

‎packages/react-devtools-shared/src/hydration.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export function dehydrate(
151151
inspectable: false,
152152
preview_short: formatDataForPreview(data, false),
153153
preview_long: formatDataForPreview(data, true),
154-
name: data.name,
154+
name: data.name || 'function',
155155
type,
156156
};
157157

‎packages/react-devtools-shared/src/utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ export function formatDataForPreview(
502502
case 'html_element':
503503
return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
504504
case 'function':
505-
return truncateForDisplay(data.name);
505+
return truncateForDisplay(`ƒ ${data.name}() {}`);
506506
case 'string':
507507
return `"${data}"`;
508508
case 'bigint':

‎packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,32 @@
77
* @flow
88
*/
99

10-
import React from 'react';
10+
import React, {Component} from 'react';
1111

1212
function noop() {}
1313

14-
export default function SimpleValues() {
15-
return (
16-
<ChildComponent
17-
string="abc"
18-
emptyString=""
19-
number={123}
20-
undefined={undefined}
21-
null={null}
22-
nan={NaN}
23-
infinity={Infinity}
24-
true={true}
25-
false={false}
26-
function={noop}
27-
regex={/abc[123]+/i}
28-
/>
29-
);
14+
export default class SimpleValues extends Component {
15+
anonymousFunction = () => {};
16+
17+
render() {
18+
return (
19+
<ChildComponent
20+
string="abc"
21+
emptyString=""
22+
number={123}
23+
undefined={undefined}
24+
null={null}
25+
nan={NaN}
26+
infinity={Infinity}
27+
true={true}
28+
false={false}
29+
function={noop}
30+
anonymousFunction={this.anonymousFunction}
31+
boundFunction={noop.bind(this)}
32+
regex={/abc[123]+/i}
33+
/>
34+
);
35+
}
3036
}
3137

3238
function ChildComponent(props: any) {

0 commit comments

Comments
 (0)