[DevTools] Clean Up DevTools Code (#24782)
This PR cleans up the DevTools codebase by: * Consolidating `normalizeCodeLocInfo` into one place * Remove unused source argument in the DevTools component stacks code
Luna Ruan committed
Jun 23, 2022 at 18:47 UTC
955cad9bcc6d755b2a672f8038fe9754e0fe5108
7 files changed
+29
-59
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+1
-8
@@ -9,14 +9,7 @@
9
10
'use strict';
11
12
-function normalizeCodeLocInfo(str) {
13
- return (
14
- typeof str === 'string' &&
15
- str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
16
- return '\n in ' + name + ' (at **)';
17
- })
18
- );
19
-}
12
+import {normalizeCodeLocInfo} from './utils';
13
14
describe('Timeline profiler', () => {
15
let React;
packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+1
-15
@@ -7,21 +7,7 @@
7
* @flow
8
*/
9
10
-function normalizeCodeLocInfo(str) {
11
- if (typeof str !== 'string') {
12
- return str;
13
- }
14
- // This special case exists only for the special source location in
15
- // ReactElementValidator. That will go away if we remove source locations.
16
- str = str.replace(/Check your code at .+?:\d+/g, 'Check your code at **');
17
- // V8 format:
18
- // at Component (/path/filename.js:123:45)
19
- // React format:
20
- // in Component (at filename.js:123)
21
- return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
22
- return '\n in ' + name + ' (at **)';
23
- });
24
-}
10
+import {normalizeCodeLocInfo} from './utils';
11
12
describe('component stack', () => {
13
let React;
packages/react-devtools-shared/src/__tests__/console-test.js
+3
-9
@@ -6,6 +6,9 @@
6
*
7
* @flow
8
*/
9
+
10
+import {normalizeCodeLocInfo} from './utils';
11
+
12
let React;
13
let ReactDOMClient;
14
let act;
@@ -60,15 +63,6 @@ describe('console', () => {
63
legacyRender = utils.legacyRender;
64
});
65
63
- function normalizeCodeLocInfo(str) {
64
- return (
65
- str &&
66
- str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
67
- return '\n in ' + name + ' (at **)';
68
- })
69
- );
70
- }
71
-
66
// @reactVersion >=18.0
67
it('should not patch console methods that are not explicitly overridden', () => {
68
expect(fakeConsole.error).not.toBe(mockError);
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+1
-8
@@ -9,14 +9,7 @@
9
10
'use strict';
11
12
-function normalizeCodeLocInfo(str) {
13
- return (
14
- typeof str === 'string' &&
15
- str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
16
- return '\n in ' + name + ' (at **)';
17
- })
18
- );
19
-}
12
+import {normalizeCodeLocInfo} from './utils';
13
14
describe('Timeline profiler', () => {
15
let React;
packages/react-devtools-shared/src/__tests__/utils.js
+16
@@ -289,3 +289,19 @@ export function overrideFeatureFlags(overrideFlags) {
289
};
290
});
291
}
292
+
293
+export function normalizeCodeLocInfo(str) {
294
+ if (typeof str !== 'string') {
295
+ return str;
296
+ }
297
+ // This special case exists only for the special source location in
298
+ // ReactElementValidator. That will go away if we remove source locations.
299
+ str = str.replace(/Check your code at .+?:\d+/g, 'Check your code at **');
300
+ // V8 format:
301
+ // at Component (/path/filename.js:123:45)
302
+ // React format:
303
+ // in Component (at filename.js:123)
304
+ return str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
305
+ return '\n in ' + name + ' (at **)';
306
+ });
307
+}
packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+3
-11
@@ -12,7 +12,6 @@
12
// while still maintaining support for multiple renderer versions
13
// (which use different values for ReactTypeOfWork).
14
15
-import type {Source} from 'shared/ReactElementType';
15
import type {LazyComponent} from 'react/src/ReactLazy';
16
import type {CurrentDispatcherRef} from './types';
17
@@ -36,7 +35,6 @@ import {disableLogs, reenableLogs} from './DevToolsConsolePatching';
35
let prefix;
36
export function describeBuiltInComponentFrame(
37
name: string,
39
- source: void | null | Source,
38
ownerFn: void | null | Function,
39
): string {
40
if (prefix === undefined) {
@@ -204,7 +202,6 @@ export function describeNativeComponentFrame(
202
203
export function describeClassComponentFrame(
204
ctor: Function,
207
- source: void | null | Source,
205
ownerFn: void | null | Function,
206
currentDispatcherRef: CurrentDispatcherRef,
207
): string {
@@ -213,7 +210,6 @@ export function describeClassComponentFrame(
210
211
export function describeFunctionComponentFrame(
212
fn: Function,
216
- source: void | null | Source,
213
ownerFn: void | null | Function,
214
currentDispatcherRef: CurrentDispatcherRef,
215
): string {
@@ -227,7 +223,6 @@ function shouldConstruct(Component: Function) {
223
224
export function describeUnknownElementTypeFrameInDEV(
225
type: any,
230
- source: void | null | Source,
226
ownerFn: void | null | Function,
227
currentDispatcherRef: CurrentDispatcherRef,
228
): string {
@@ -245,15 +240,15 @@ export function describeUnknownElementTypeFrameInDEV(
240
);
241
}
242
if (typeof type === 'string') {
248
- return describeBuiltInComponentFrame(type, source, ownerFn);
243
+ return describeBuiltInComponentFrame(type, ownerFn);
244
}
245
switch (type) {
246
case SUSPENSE_NUMBER:
247
case SUSPENSE_SYMBOL_STRING:
253
- return describeBuiltInComponentFrame('Suspense', source, ownerFn);
248
+ return describeBuiltInComponentFrame('Suspense', ownerFn);
249
case SUSPENSE_LIST_NUMBER:
250
case SUSPENSE_LIST_SYMBOL_STRING:
256
- return describeBuiltInComponentFrame('SuspenseList', source, ownerFn);
251
+ return describeBuiltInComponentFrame('SuspenseList', ownerFn);
252
}
253
if (typeof type === 'object') {
254
switch (type.$$typeof) {
@@ -261,7 +256,6 @@ export function describeUnknownElementTypeFrameInDEV(
256
case FORWARD_REF_SYMBOL_STRING:
257
return describeFunctionComponentFrame(
258
type.render,
264
- source,
259
ownerFn,
260
currentDispatcherRef,
261
);
@@ -270,7 +264,6 @@ export function describeUnknownElementTypeFrameInDEV(
264
// Memo may contain any component type so we recursively resolve it.
265
return describeUnknownElementTypeFrameInDEV(
266
type.type,
273
- source,
267
ownerFn,
268
currentDispatcherRef,
269
);
@@ -283,7 +276,6 @@ export function describeUnknownElementTypeFrameInDEV(
276
// Lazy may contain any component type so we recursively resolve it.
277
return describeUnknownElementTypeFrameInDEV(
278
init(payload),
286
- source,
279
ownerFn,
280
currentDispatcherRef,
281
);
packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
+4
-8
@@ -43,36 +43,32 @@ export function describeFiber(
43
? workInProgress._debugOwner.type
44
: null
45
: null;
46
- const source = __DEV__ ? workInProgress._debugSource : null;
46
switch (workInProgress.tag) {
47
case HostComponent:
49
- return describeBuiltInComponentFrame(workInProgress.type, source, owner);
48
+ return describeBuiltInComponentFrame(workInProgress.type, owner);
49
case LazyComponent:
51
- return describeBuiltInComponentFrame('Lazy', source, owner);
50
+ return describeBuiltInComponentFrame('Lazy', owner);
51
case SuspenseComponent:
53
- return describeBuiltInComponentFrame('Suspense', source, owner);
52
+ return describeBuiltInComponentFrame('Suspense', owner);
53
case SuspenseListComponent:
55
- return describeBuiltInComponentFrame('SuspenseList', source, owner);
54
+ return describeBuiltInComponentFrame('SuspenseList', owner);
55
case FunctionComponent:
56
case IndeterminateComponent:
57
case SimpleMemoComponent:
58
return describeFunctionComponentFrame(
59
workInProgress.type,
61
- source,
60
owner,
61
currentDispatcherRef,
62
);
63
case ForwardRef:
64
return describeFunctionComponentFrame(
65
workInProgress.type.render,
68
- source,
66
owner,
67
currentDispatcherRef,
68
);
69
case ClassComponent:
70
return describeClassComponentFrame(
71
workInProgress.type,
75
- source,
72
owner,
73
currentDispatcherRef,
74
);