Skip to content

Commit 46b33e6

Browse files
author
Brian Vaughn
committed
Improve DevTools editing interface
This commit adds the ability to rename or delete keys in the props/state/hooks/context editor and adds tests to cover this functionality. DevTools will degrade gracefully for older versions of React that do not inject the new reconciler rename* or delete* methods. Specifically, this commit includes the following changes: * Adds unit tests (for modern and legacy renderers) to cover overriding props, renaming keys, and deleting keys. * Refactor backend override methods to reduce redundant Bridge/Agent listeners and methods. * Inject new (DEV-only) methods from reconciler into DevTools to rename and delete paths. * Refactor 'inspected element' UI components to improve readability. * Improve auto-size input to better mimic Chrome's Style editor panel. (See this Code Sandbox for a proof of concept.) It also contains the following code cleanup: * Additional unit tests have been added for modifying values as well as renaming or deleting paths. * Four new DEV-only methods have been added to the reconciler to be injected into the DevTools hook: overrideHookStateDeletePath, overrideHookStateRenamePath, overridePropsDeletePath, and overridePropsRenamePath. (DevTools will degrade gracefully for older renderers without these methods.) * I also took this as an opportunity to refactor some of the existing code in a few places: * Rather than the backend implementing separate methods for editing props, state, hooks, and context– there are now three methods: deletePath, renamePath, and overrideValueAtPath that accept a type argument to differentiate between props, state, context, or hooks. * The various UI components for the DevTools frontend have been refactored to remove some unnecessary repetition.
1 parent 6fddca2 commit 46b33e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+4223
-1258
lines changed

packages/react-devtools-shared/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@reach/menu-button": "^0.1.17",
1212
"@reach/tooltip": "^0.2.2",
1313
"clipboard-js": "^0.3.6",
14+
"json5": "^2.1.3",
1415
"local-storage-fallback": "^4.1.1",
1516
"lodash.throttle": "^4.1.1",
1617
"memoize-one": "^3.1.1",

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

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
4-
{
5-
"id": 2,
6-
"owners": null,
7-
"context": null,
8-
"hooks": [
9-
{
10-
"id": null,
11-
"isStateEditable": false,
12-
"name": "DebuggableHook",
13-
"value": {
14-
"foo": 2
15-
},
16-
"subHooks": [
17-
{
18-
"id": 0,
19-
"isStateEditable": true,
20-
"name": "State",
21-
"value": 1,
22-
"subHooks": []
23-
}
24-
]
25-
}
26-
],
27-
"props": {},
28-
"state": null
29-
}
30-
`;
31-
323
exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
334
{
345
"id": 2,
@@ -65,6 +36,35 @@ exports[`InspectedElementContext should dehydrate complex nested values when req
6536
}
6637
`;
6738

39+
exports[`InspectedElementContext should display complex values of useDebugValue: DisplayedComplexValue 1`] = `
40+
{
41+
"id": 2,
42+
"owners": null,
43+
"context": null,
44+
"hooks": [
45+
{
46+
"id": null,
47+
"isStateEditable": false,
48+
"name": "DebuggableHook",
49+
"value": {
50+
"foo": 2
51+
},
52+
"subHooks": [
53+
{
54+
"id": 0,
55+
"isStateEditable": true,
56+
"name": "State",
57+
"value": 1,
58+
"subHooks": []
59+
}
60+
]
61+
}
62+
],
63+
"props": {},
64+
"state": null
65+
}
66+
`;
67+
6868
exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
6969
{
7070
"id": 2,

0 commit comments

Comments
 (0)