Display hook values for components that only use context
Brian Vaughn committed
Aug 16, 2019 at 11:33 UTC
f61661305964956c29d8ef147e5d1b33b7b701ec
4 files changed
+71
-1
src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+22
@@ -91,6 +91,28 @@ exports[`InspectedElementContext should include updates for nested values that w
91
}
92
`;
93
94
+exports[`InspectedElementContext should inspect hooks for components that only use context: 1: Inspected element 2 1`] = `
95
+{
96
+ "id": 2,
97
+ "owners": null,
98
+ "context": null,
99
+ "hooks": [
100
+ {
101
+ "id": null,
102
+ "isStateEditable": false,
103
+ "name": "Context",
104
+ "value": true,
105
+ "subHooks": []
106
+ }
107
+ ],
108
+ "props": {
109
+ "a": 1,
110
+ "b": "abc"
111
+ },
112
+ "state": null
113
+}
114
+`;
115
+
116
exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
117
{
118
"id": 2,
src/__tests__/inspectedElementContext-test.js
+43
@@ -856,4 +856,47 @@ describe('InspectedElementContext', () => {
856
857
done();
858
});
859
+
860
+ it('should inspect hooks for components that only use context', async done => {
861
+ const Context = React.createContext(true);
862
+ const Example = () => {
863
+ const value = React.useContext(Context);
864
+ return value;
865
+ };
866
+
867
+ const container = document.createElement('div');
868
+ await utils.actAsync(() =>
869
+ ReactDOM.render(<Example a={1} b="abc" />, container)
870
+ );
871
+
872
+ const id = ((store.getElementIDAtIndex(0): any): number);
873
+
874
+ let didFinish = false;
875
+
876
+ function Suspender({ target }) {
877
+ const { getInspectedElement } = React.useContext(InspectedElementContext);
878
+ const inspectedElement = getInspectedElement(id);
879
+ expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
880
+ didFinish = true;
881
+ return null;
882
+ }
883
+
884
+ await utils.actAsync(
885
+ () =>
886
+ TestRenderer.create(
887
+ <Contexts
888
+ defaultSelectedElementID={id}
889
+ defaultSelectedElementIndex={0}
890
+ >
891
+ <React.Suspense fallback={null}>
892
+ <Suspender target={id} />
893
+ </React.Suspense>
894
+ </Contexts>
895
+ ),
896
+ false
897
+ );
898
+ expect(didFinish).toBe(true);
899
+
900
+ done();
901
+ });
902
});
src/backend/renderer.js
+2
-1
@@ -2082,6 +2082,7 @@ export function attach(
2082
const {
2083
_debugOwner,
2084
_debugSource,
2085
+ dependencies,
2086
stateNode,
2087
memoizedProps,
2088
memoizedState,
@@ -2093,7 +2094,7 @@ export function attach(
2094
(tag === FunctionComponent ||
2095
tag === SimpleMemoComponent ||
2096
tag === ForwardRef) &&
2096
- !!memoizedState;
2097
+ (!!memoizedState || !!dependencies);
2098
2099
const typeSymbol = getTypeSymbol(type);
2100
src/backend/types.js
+4
@@ -18,6 +18,7 @@ export type Source = {|
18
fileName: string,
19
lineNumber: number,
20
|};
21
+
22
export type HookType =
23
| 'useState'
24
| 'useReducer'
@@ -38,6 +39,9 @@ export type Fiber = {|
39
40
key: null | string,
41
42
+ // Dependencies (contexts, events) for this fiber, if it has any
43
+ dependencies: mixed | null,
44
+
45
elementType: any,
46
47
type: any,