Skip to content

Commit

Permalink
DevTools bug fix: Proxied methods should be safely dehydrated for dis…
Browse files Browse the repository at this point in the history
…play
  • Loading branch information
pfongkye authored Aug 12, 2020
1 parent b8ed6a1 commit b6e1d08
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/react-devtools-extensions/src/backend.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function setup(hook) {
initBackend(hook, agent, window);

// Let the frontend know that the backend has attached listeners and is ready for messages.
// This covers the case of of syncing saved values after reloading/navigating while DevTools remain open.
// This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
bridge.send('extensionBackendInitialized');

// Setup React Native style editor if a renderer like react-native-web has injected it.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
"object_of_objects": {
"inner": {}
},
"proxy": {},
"react_element": {},
"regexp": {},
"set": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -549,6 +549,14 @@ describe('InspectedElementContext', () => {
}
const instance = new Class();

const proxyInstance = new Proxy(() => {}, {
get: function(_, name) {
return function() {
return null;
};
},
});

const container = document.createElement('div');
await utils.actAsync(() =>
ReactDOM.render(
Expand All @@ -567,6 +575,7 @@ describe('InspectedElementContext', () => {
map={mapShallow}
map_of_maps={mapOfMaps}
object_of_objects={objectOfObjects}
proxy={proxyInstance}
react_element={<span />}
regexp={/abc/giu}
set={setShallow}
Expand Down Expand Up @@ -619,6 +628,7 @@ describe('InspectedElementContext', () => {
map,
map_of_maps,
object_of_objects,
proxy,
react_element,
regexp,
set,
Expand Down Expand Up @@ -722,6 +732,12 @@ describe('InspectedElementContext', () => {
);
expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');

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

expect(react_element[meta.inspectable]).toBe(false);
expect(react_element[meta.name]).toBe('span');
expect(react_element[meta.type]).toBe('react_element');
Expand Down
5 changes: 4 additions & 1 deletion packages/react-devtools-shared/src/hydration.js
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,10 @@ export function dehydrate(
inspectable: false,
preview_short: formatDataForPreview(data, false),
preview_long: formatDataForPreview(data, true),
name: data.name || 'function',
name:
typeof data.name === 'function' || !data.name
? 'function'
: data.name,
type,
};

Expand Down
4 changes: 3 additions & 1 deletion packages/react-devtools-shared/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -539,7 +539,9 @@ export function formatDataForPreview(
case 'html_element':
return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;
case 'function':
return truncateForDisplay(${data.name}() {}`);
return truncateForDisplay(
${typeof data.name === 'function' ? '' : data.name}() {}`,
);
case 'string':
return `"${data}"`;
case 'bigint':
Expand Down

0 comments on commit b6e1d08

Please sign in to comment.