diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap index db5ec4a25a8ac..0c7b024dffb81 100644 --- a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap +++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap @@ -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": {}, diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js index 2aed0bb3ca38a..f8691a5f39c20 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js @@ -538,14 +538,21 @@ describe('InspectedElementContext', () => { }, }); + class Class { + anonymousFunction = () => {}; + } + const instance = new Class(); + const container = document.createElement('div'); await utils.actAsync(() => ReactDOM.render( { expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`); const { + anonymous_fn, array_buffer, array_of_arrays, big_int, + bound_fn, data_view, date, fn, @@ -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'); @@ -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'); @@ -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'); diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap index 088b03395e6a9..18ff7483c3f5e 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap +++ b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap @@ -126,11 +126,13 @@ Object { "context": {}, "hooks": null, "props": { + "anonymous_fn": {}, "array_buffer": {}, "array_of_arrays": [ {} ], "big_int": {}, + "bound_fn": {}, "data_view": {}, "date": {}, "fn": {}, diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js index 724993b23e77e..90b835ad235bd 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js @@ -169,13 +169,20 @@ describe('InspectedElementContext', () => { }, }); + class Class { + anonymousFunction = () => {}; + } + const instance = new Class(); + act(() => ReactDOM.render( { expect(inspectedElement).toMatchSnapshot('1: Initial inspection'); const { + anonymous_fn, array_buffer, array_of_arrays, big_int, + bound_fn, data_view, date, fn, @@ -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'); @@ -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'); @@ -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'); diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js index c3a82d15b98d9..5e00b1b619e6e 100644 --- a/packages/react-devtools-shared/src/hydration.js +++ b/packages/react-devtools-shared/src/hydration.js @@ -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, }; diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 785099f39ba35..5eb54b99aedee 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -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': diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js index c6daa3172ffcb..1a748d926d0fc 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js @@ -7,26 +7,32 @@ * @flow */ -import React from 'react'; +import React, {Component} from 'react'; function noop() {} -export default function SimpleValues() { - return ( - - ); +export default class SimpleValues extends Component { + anonymousFunction = () => {}; + + render() { + return ( + + ); + } } function ChildComponent(props: any) {