Skip to content

Commit

Permalink
DevTools: Improve function props display for inspected elements (#17789)
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn authored Jan 6, 2020
1 parent 24f8242 commit 2bb227e
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -485,11 +485,13 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
"context": null,
"hooks": null,
"props": {
"anonymous_fn": {},
"array_buffer": {},
"array_of_arrays": [
{}
],
"big_int": {},
"bound_fn": {},
"data_view": {},
"date": {},
"fn": {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -538,14 +538,21 @@ describe('InspectedElementContext', () => {
},
});

class Class {
anonymousFunction = () => {};
}
const instance = new Class();

const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
<Example
anonymous_fn={instance.anonymousFunction}
array_buffer={arrayBuffer}
array_of_arrays={arrayOfArrays}
// eslint-disable-next-line no-undef
big_int={BigInt(123)}
bound_fn={exampleFunction.bind(this)}
data_view={dataView}
date={new Date(exampleDateISO)}
fn={exampleFunction}
Expand Down Expand Up @@ -593,9 +600,11 @@ describe('InspectedElementContext', () => {
expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);

const {
anonymous_fn,
array_buffer,
array_of_arrays,
big_int,
bound_fn,
data_view,
date,
fn,
Expand All @@ -612,6 +621,12 @@ describe('InspectedElementContext', () => {
typed_array,
} = (inspectedElement: any).props;

expect(anonymous_fn[meta.inspectable]).toBe(false);
expect(anonymous_fn[meta.name]).toBe('function');
expect(anonymous_fn[meta.type]).toBe('function');
expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');

expect(array_buffer[meta.size]).toBe(3);
expect(array_buffer[meta.inspectable]).toBe(false);
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
Expand All @@ -632,6 +647,12 @@ describe('InspectedElementContext', () => {
expect(big_int[meta.preview_long]).toBe('123n');
expect(big_int[meta.preview_short]).toBe('123n');

expect(bound_fn[meta.inspectable]).toBe(false);
expect(bound_fn[meta.name]).toBe('bound exampleFunction');
expect(bound_fn[meta.type]).toBe('function');
expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');

expect(data_view[meta.size]).toBe(3);
expect(data_view[meta.inspectable]).toBe(false);
expect(data_view[meta.name]).toBe('DataView');
Expand All @@ -651,8 +672,8 @@ describe('InspectedElementContext', () => {
expect(fn[meta.inspectable]).toBe(false);
expect(fn[meta.name]).toBe('exampleFunction');
expect(fn[meta.type]).toBe('function');
expect(fn[meta.preview_long]).toBe('exampleFunction');
expect(fn[meta.preview_short]).toBe('exampleFunction');
expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');

expect(html_element[meta.inspectable]).toBe(false);
expect(html_element[meta.name]).toBe('DIV');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,13 @@ Object {
"context": {},
"hooks": null,
"props": {
"anonymous_fn": {},
"array_buffer": {},
"array_of_arrays": [
{}
],
"big_int": {},
"bound_fn": {},
"data_view": {},
"date": {},
"fn": {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,20 @@ describe('InspectedElementContext', () => {
},
});

class Class {
anonymousFunction = () => {};
}
const instance = new Class();

act(() =>
ReactDOM.render(
<Example
anonymous_fn={instance.anonymousFunction}
array_buffer={arrayBuffer}
array_of_arrays={arrayOfArrays}
// eslint-disable-next-line no-undef
big_int={BigInt(123)}
bound_fn={exampleFunction.bind(this)}
data_view={dataView}
date={new Date(123)}
fn={exampleFunction}
Expand All @@ -201,9 +208,11 @@ describe('InspectedElementContext', () => {
expect(inspectedElement).toMatchSnapshot('1: Initial inspection');

const {
anonymous_fn,
array_buffer,
array_of_arrays,
big_int,
bound_fn,
data_view,
date,
fn,
Expand All @@ -220,6 +229,12 @@ describe('InspectedElementContext', () => {
typed_array,
} = inspectedElement.value.props;

expect(anonymous_fn[meta.inspectable]).toBe(false);
expect(anonymous_fn[meta.name]).toBe('function');
expect(anonymous_fn[meta.type]).toBe('function');
expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');

expect(array_buffer[meta.size]).toBe(3);
expect(array_buffer[meta.inspectable]).toBe(false);
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
Expand All @@ -238,6 +253,12 @@ describe('InspectedElementContext', () => {
expect(big_int[meta.name]).toBe('123');
expect(big_int[meta.type]).toBe('bigint');

expect(bound_fn[meta.inspectable]).toBe(false);
expect(bound_fn[meta.name]).toBe('bound exampleFunction');
expect(bound_fn[meta.type]).toBe('function');
expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');

expect(data_view[meta.size]).toBe(3);
expect(data_view[meta.inspectable]).toBe(false);
expect(data_view[meta.name]).toBe('DataView');
Expand All @@ -249,6 +270,8 @@ describe('InspectedElementContext', () => {
expect(fn[meta.inspectable]).toBe(false);
expect(fn[meta.name]).toBe('exampleFunction');
expect(fn[meta.type]).toBe('function');
expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');

expect(html_element[meta.inspectable]).toBe(false);
expect(html_element[meta.name]).toBe('DIV');
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/hydration.js
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export function dehydrate(
inspectable: false,
preview_short: formatDataForPreview(data, false),
preview_long: formatDataForPreview(data, true),
name: data.name,
name: data.name || 'function',
type,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ export function formatDataForPreview(
case 'html_element':
return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
case 'function':
return truncateForDisplay(data.name);
return truncateForDisplay(${data.name}() {}`);
case 'string':
return `"${data}"`;
case 'bigint':
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,32 @@
* @flow
*/

import React from 'react';
import React, {Component} from 'react';

function noop() {}

export default function SimpleValues() {
return (
<ChildComponent
string="abc"
emptyString=""
number={123}
undefined={undefined}
null={null}
nan={NaN}
infinity={Infinity}
true={true}
false={false}
function={noop}
regex={/abc[123]+/i}
/>
);
export default class SimpleValues extends Component {
anonymousFunction = () => {};

render() {
return (
<ChildComponent
string="abc"
emptyString=""
number={123}
undefined={undefined}
null={null}
nan={NaN}
infinity={Infinity}
true={true}
false={false}
function={noop}
anonymousFunction={this.anonymousFunction}
boundFunction={noop.bind(this)}
regex={/abc[123]+/i}
/>
);
}
}

function ChildComponent(props: any) {
Expand Down

0 comments on commit 2bb227e

Please sign in to comment.