Add rudimentary support for Cache to DevTools (#20458)
Brian Vaughn committed
Jan 4, 2021 at 06:32 UTC
6630c2de2a578aba0b61cb2e61e58a1466e80ca2
5 files changed
+31
-12
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+1
@@ -685,4 +685,5 @@ exports[`Store should show the right display names for special component types 1
685
<Baz> [withFoo][withBar]
686
<Baz> [Memo][withFoo][withBar]
687
<Baz> [ForwardRef][withFoo][withBar]
688
+ <Cache>
689
`;
packages/react-devtools-shared/src/__tests__/store-test.js
+1
@@ -888,6 +888,7 @@ describe('Store', () => {
888
<FakeHigherOrderComponent />
889
<MemoizedFakeHigherOrderComponent />
890
<ForwardRefFakeHigherOrderComponent />
891
+ <React.unstable_Cache />
892
</React.Fragment>
893
);
894
packages/react-devtools-shared/src/backend/renderer.js
+16
-3
@@ -176,6 +176,7 @@ export function getInternalReactConstants(
176
// Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released).
177
if (gt(version, '17.0.1')) {
178
ReactTypeOfWork = {
179
+ CacheComponent: 24, // Experimental
180
ClassComponent: 1,
181
ContextConsumer: 9,
182
ContextProvider: 10,
@@ -205,6 +206,7 @@ export function getInternalReactConstants(
206
};
207
} else if (gte(version, '17.0.0-alpha')) {
208
ReactTypeOfWork = {
209
+ CacheComponent: -1, // Doesn't exist yet
210
ClassComponent: 1,
211
ContextConsumer: 9,
212
ContextProvider: 10,
@@ -234,6 +236,7 @@ export function getInternalReactConstants(
236
};
237
} else if (gte(version, '16.6.0-beta.0')) {
238
ReactTypeOfWork = {
239
+ CacheComponent: -1, // Doens't exist yet
240
ClassComponent: 1,
241
ContextConsumer: 9,
242
ContextProvider: 10,
@@ -263,6 +266,7 @@ export function getInternalReactConstants(
266
};
267
} else if (gte(version, '16.4.3-alpha')) {
268
ReactTypeOfWork = {
269
+ CacheComponent: -1, // Doens't exist yet
270
ClassComponent: 2,
271
ContextConsumer: 11,
272
ContextProvider: 12,
@@ -292,6 +296,7 @@ export function getInternalReactConstants(
296
};
297
} else {
298
ReactTypeOfWork = {
299
+ CacheComponent: -1, // Doens't exist yet
300
ClassComponent: 2,
301
ContextConsumer: 12,
302
ContextProvider: 13,
@@ -335,6 +340,7 @@ export function getInternalReactConstants(
340
}
341
342
const {
343
+ CacheComponent,
344
ClassComponent,
345
IncompleteClassComponent,
346
FunctionComponent,
@@ -382,6 +388,8 @@ export function getInternalReactConstants(
388
let resolvedContext: any = null;
389
390
switch (tag) {
391
+ case CacheComponent:
392
+ return 'Cache';
393
case ClassComponent:
394
case IncompleteClassComponent:
395
return getDisplayName(resolvedType);
@@ -486,12 +494,13 @@ export function attach(
494
} = getInternalReactConstants(renderer.version);
495
const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
496
const {
489
- FunctionComponent,
497
+ CacheComponent,
498
ClassComponent,
499
ContextConsumer,
500
DehydratedSuspenseComponent,
493
- Fragment,
501
ForwardRef,
502
+ Fragment,
503
+ FunctionComponent,
504
HostRoot,
505
HostPortal,
506
HostComponent,
@@ -2518,6 +2527,10 @@ export function attach(
2527
tag === ForwardRef) &&
2528
(!!memoizedState || !!dependencies);
2529
2530
+ // TODO Show custom UI for Cache like we do for Suspense
2531
+ // For now, just hide state data entirely since it's not meant to be inspected.
2532
+ const showState = !usesHooks && tag !== CacheComponent;
2533
+
2534
const typeSymbol = getTypeSymbol(type);
2535
2536
let canViewSource = false;
@@ -2687,7 +2700,7 @@ export function attach(
2700
context,
2701
hooks,
2702
props: memoizedProps,
2690
- state: usesHooks ? null : memoizedState,
2703
+ state: showState ? memoizedState : null,
2704
errors: Array.from(errors.entries()),
2705
warnings: Array.from(warnings.entries()),
2706
packages/react-devtools-shared/src/backend/types.js
+1
@@ -26,6 +26,7 @@ export type WorkFlags = number;
26
export type ExpirationTime = number;
27
28
export type WorkTagMap = {|
29
+ CacheComponent: WorkTag,
30
ClassComponent: WorkTag,
31
ContextConsumer: WorkTag,
32
ContextProvider: WorkTag,
packages/react-devtools-shell/src/app/ElementTypes/index.js
+12
-9
@@ -19,6 +19,7 @@ import {
19
Profiler,
20
StrictMode,
21
Suspense,
22
+ unstable_Cache as Cache,
23
} from 'react';
24
25
const Context = createContext('abc');
@@ -61,15 +62,17 @@ export default function ElementTypes() {
62
<Context.Consumer>{value => null}</Context.Consumer>
63
</Context.Provider>
64
<StrictMode>
64
- <Suspense fallback={<div>Loading...</div>}>
65
- <ClassComponent />
66
- <FunctionComponent />
67
- <MemoFunctionComponent />
68
- <ForwardRefComponent />
69
- <ForwardRefComponentWithAnonymousFunction />
70
- <ForwardRefComponentWithCustomDisplayName />
71
- <LazyComponent />
72
- </Suspense>
65
+ <Cache>
66
+ <Suspense fallback={<div>Loading...</div>}>
67
+ <ClassComponent />
68
+ <FunctionComponent />
69
+ <MemoFunctionComponent />
70
+ <ForwardRefComponent />
71
+ <ForwardRefComponentWithAnonymousFunction />
72
+ <ForwardRefComponentWithCustomDisplayName />
73
+ <LazyComponent />
74
+ </Suspense>
75
+ </Cache>
76
</StrictMode>
77
</Fragment>
78
</Profiler>