Reorganized types shared between backend and frontend slightly.
Brian Vaughn committed
Apr 26, 2019 at 14:02 UTC
17c5feb66a625be8c6a3b223dedca29333de77db
9 files changed
+39
-33
src/backend/renderer.js
+13
-6
@@ -8,12 +8,13 @@ import {
8
ElementTypeEventComponent,
9
ElementTypeEventTarget,
10
ElementTypeForwardRef,
11
+ ElementTypeHost,
12
ElementTypeMemo,
13
ElementTypeOtherOrUnknown,
14
ElementTypeProfiler,
15
ElementTypeRoot,
16
ElementTypeSuspense,
16
-} from 'src/devtools/types';
17
+} from 'src/types';
18
import { getDisplayName, utfEncodeString } from '../utils';
19
import { cleanForBridge, copyWithSet, setInObject } from './utils';
20
import {
@@ -259,19 +260,21 @@ export function attach(
260
}
261
};
262
262
- // Keep this function in sync with getDataForFiber()
263
+ // NOTICE Keep in sync with getDataForFiber()
264
function shouldFilterFiber(fiber: Fiber): boolean {
265
const { tag } = fiber;
266
267
switch (tag) {
268
case ClassComponent:
269
case FunctionComponent:
270
+ case HostComponent:
271
case IncompleteClassComponent:
272
case IndeterminateComponent:
273
case ForwardRef:
274
case HostRoot:
275
case MemoComponent:
276
case SimpleMemoComponent:
277
+ // TODO (filtering) Check custom filters
278
return false;
279
case DehydratedSuspenseComponent:
280
// TODO: ideally we would show dehydrated Suspense immediately.
@@ -282,7 +285,6 @@ export function attach(
285
return true;
286
case EventComponent:
287
case HostPortal:
285
- case HostComponent:
288
case HostText:
289
case Fragment:
290
return true;
@@ -305,6 +307,7 @@ export function attach(
307
case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
308
case PROFILER_NUMBER:
309
case PROFILER_SYMBOL_STRING:
310
+ // TODO (filtering) Check custom filters
311
return false;
312
default:
313
return false;
@@ -321,8 +324,7 @@ export function attach(
324
: symbolOrNumber;
325
}
326
324
- // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
325
- // TODO: Keep in sync with getElementType()
327
+ // NOTICE Keep in sync with shouldFilterFiber()
328
function getDataForFiber(fiber: Fiber): FiberData {
329
const { elementType, type, key, tag } = fiber;
330
@@ -397,8 +399,13 @@ export function attach(
399
key: null,
400
type: ElementTypeRoot,
401
};
400
- case HostPortal:
402
case HostComponent:
403
+ return {
404
+ displayName: type,
405
+ key,
406
+ type: ElementTypeHost,
407
+ };
408
+ case HostPortal:
409
case HostText:
410
case Fragment:
411
return {
src/backend/types.js
+1
-1
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import type { ElementType } from 'src/devtools/types';
3
+import type { ElementType } from 'src/types';
4
import type { InspectedElement } from 'src/devtools/views/Components/types';
5
6
type BundleType =
src/devtools/store.js
+2
-3
@@ -9,19 +9,18 @@ import {
9
TREE_OPERATION_REORDER_CHILDREN,
10
TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
11
} from '../constants';
12
-import { ElementTypeRoot } from './types';
12
+import { ElementTypeRoot } from '../types';
13
import { utfDecodeString } from '../utils';
14
import { __DEBUG__ } from '../constants';
15
import ProfilingCache from './ProfilingCache';
16
import { printStore } from 'src/__tests__/storeSerializer';
17
18
-import type { ElementType } from './types';
18
import type { Element } from './views/Components/types';
19
import type {
20
ImportedProfilingData,
21
ProfilingSnapshotNode,
22
} from './views/Profiler/types';
24
-import type { Bridge } from '../types';
23
+import type { ElementType, Bridge } from '../types';
24
25
const debug = (methodName, ...args) => {
26
if (__DEBUG__) {
src/devtools/types.js
deleted
-18
@@ -1,18 +0,0 @@
1
-// @flow
2
-
3
-export const ElementTypeClass = 1;
4
-export const ElementTypeEventComponent = 2;
5
-export const ElementTypeEventTarget = 3;
6
-export const ElementTypeFunction = 4;
7
-export const ElementTypeContext = 5;
8
-export const ElementTypeForwardRef = 6;
9
-export const ElementTypeMemo = 7;
10
-export const ElementTypeOtherOrUnknown = 8;
11
-export const ElementTypeProfiler = 9;
12
-export const ElementTypeRoot = 10;
13
-export const ElementTypeSuspense = 11;
14
-
15
-// Different types of elements displayed in the Elements tree.
16
-// These types may be used to visually distinguish types,
17
-// or to enable/disable certain functionality.
18
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
src/devtools/views/Components/Element.js
+1
-1
@@ -9,7 +9,7 @@ import React, {
9
useRef,
10
useState,
11
} from 'react';
12
-import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
12
+import { ElementTypeClass, ElementTypeFunction } from 'src/types';
13
import Store from 'src/devtools/store';
14
import ButtonIcon from '../ButtonIcon';
15
import { createRegExp } from '../utils';
src/devtools/views/Components/SelectedElement.js
+1
-1
@@ -16,7 +16,7 @@ import {
16
ElementTypeFunction,
17
ElementTypeMemo,
18
ElementTypeSuspense,
19
-} from '../../types';
19
+} from 'src/types';
20
21
import type { Element, InspectedElement } from './types';
22
src/devtools/views/Components/types.js
+1
-1
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import type { ElementType } from '../../types';
3
+import type { ElementType } from 'src/types';
4
5
// Each element on the frontend corresponds to a Fiber on the backend.
6
// Some of its information (e.g. id, type, displayName) come from the backend.
src/devtools/views/Profiler/CommitTreeBuilder.js
+2
-2
@@ -8,10 +8,10 @@ import {
8
TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
9
} from 'src/constants';
10
import { utfDecodeString } from 'src/utils';
11
-import { ElementTypeRoot } from 'src/devtools/types';
11
+import { ElementTypeRoot } from 'src/types';
12
import Store from 'src/devtools/store';
13
14
-import type { ElementType } from 'src/devtools/types';
14
+import type { ElementType } from 'src/types';
15
import type {
16
CommitTreeFrontend,
17
CommitTreeNodeFrontend,
src/types.js
+18
@@ -11,3 +11,21 @@ export type Wall = {|
11
listen: (fn: Function) => Function,
12
send: (event: string, payload: any, transferable?: Array<any>) => void,
13
|};
14
+
15
+export const ElementTypeClass = 1;
16
+export const ElementTypeContext = 2;
17
+export const ElementTypeEventComponent = 3;
18
+export const ElementTypeEventTarget = 4;
19
+export const ElementTypeFunction = 5;
20
+export const ElementTypeForwardRef = 6;
21
+export const ElementTypeHost = 7;
22
+export const ElementTypeMemo = 8;
23
+export const ElementTypeOtherOrUnknown = 9;
24
+export const ElementTypeProfiler = 10;
25
+export const ElementTypeRoot = 11;
26
+export const ElementTypeSuspense = 12;
27
+
28
+// Different types of elements displayed in the Elements tree.
29
+// These types may be used to visually distinguish types,
30
+// or to enable/disable certain functionality.
31
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;