Reorganized types shared between backend and frontend slightly.

src/backend/renderer.js

@@ -8,12 +8,13 @@ import {
   ElementTypeEventComponent,
   ElementTypeEventTarget,
   ElementTypeForwardRef,
+  ElementTypeHost,
   ElementTypeMemo,
   ElementTypeOtherOrUnknown,
   ElementTypeProfiler,
   ElementTypeRoot,
   ElementTypeSuspense,
-} from 'src/devtools/types';
+} from 'src/types';
 import { getDisplayName, utfEncodeString } from '../utils';
 import { cleanForBridge, copyWithSet, setInObject } from './utils';
 import {
@@ -259,19 +260,21 @@ export function attach(
     }
   };
 
-  // Keep this function in sync with getDataForFiber()
+  // NOTICE Keep in sync with getDataForFiber()
   function shouldFilterFiber(fiber: Fiber): boolean {
     const { tag } = fiber;
 
     switch (tag) {
       case ClassComponent:
       case FunctionComponent:
+      case HostComponent:
       case IncompleteClassComponent:
       case IndeterminateComponent:
       case ForwardRef:
       case HostRoot:
       case MemoComponent:
       case SimpleMemoComponent:
+        // TODO (filtering) Check custom filters
         return false;
       case DehydratedSuspenseComponent:
         // TODO: ideally we would show dehydrated Suspense immediately.
@@ -282,7 +285,6 @@ export function attach(
         return true;
       case EventComponent:
       case HostPortal:
-      case HostComponent:
       case HostText:
       case Fragment:
         return true;
@@ -305,6 +307,7 @@ export function attach(
           case DEPRECATED_PLACEHOLDER_SYMBOL_STRING:
           case PROFILER_NUMBER:
           case PROFILER_SYMBOL_STRING:
+            // TODO (filtering) Check custom filters
             return false;
           default:
             return false;
@@ -321,8 +324,7 @@ export function attach(
       : symbolOrNumber;
   }
 
-  // TODO: we might want to change the data structure once we no longer suppport Stack versions of `getData`.
-  // TODO: Keep in sync with getElementType()
+  // NOTICE Keep in sync with shouldFilterFiber()
   function getDataForFiber(fiber: Fiber): FiberData {
     const { elementType, type, key, tag } = fiber;
 
@@ -397,8 +399,13 @@ export function attach(
           key: null,
           type: ElementTypeRoot,
         };
-      case HostPortal:
       case HostComponent:
+        return {
+          displayName: type,
+          key,
+          type: ElementTypeHost,
+        };
+      case HostPortal:
       case HostText:
       case Fragment:
         return {

src/backend/types.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from 'src/devtools/types';
+import type { ElementType } from 'src/types';
 import type { InspectedElement } from 'src/devtools/views/Components/types';
 
 type BundleType =

src/devtools/store.js

@@ -9,19 +9,18 @@ import {
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
-import { ElementTypeRoot } from './types';
+import { ElementTypeRoot } from '../types';
 import { utfDecodeString } from '../utils';
 import { __DEBUG__ } from '../constants';
 import ProfilingCache from './ProfilingCache';
 import { printStore } from 'src/__tests__/storeSerializer';
 
-import type { ElementType } from './types';
 import type { Element } from './views/Components/types';
 import type {
   ImportedProfilingData,
   ProfilingSnapshotNode,
 } from './views/Profiler/types';
-import type { Bridge } from '../types';
+import type { ElementType, Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {

src/devtools/types.js

@@ -1,18 +0,0 @@
-// @flow
-
-export const ElementTypeClass = 1;
-export const ElementTypeEventComponent = 2;
-export const ElementTypeEventTarget = 3;
-export const ElementTypeFunction = 4;
-export const ElementTypeContext = 5;
-export const ElementTypeForwardRef = 6;
-export const ElementTypeMemo = 7;
-export const ElementTypeOtherOrUnknown = 8;
-export const ElementTypeProfiler = 9;
-export const ElementTypeRoot = 10;
-export const ElementTypeSuspense = 11;
-
-// Different types of elements displayed in the Elements tree.
-// These types may be used to visually distinguish types,
-// or to enable/disable certain functionality.
-export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;

src/devtools/views/Components/Element.js

@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
+import { ElementTypeClass, ElementTypeFunction } from 'src/types';
 import Store from 'src/devtools/store';
 import ButtonIcon from '../ButtonIcon';
 import { createRegExp } from '../utils';

src/devtools/views/Components/SelectedElement.js

@@ -16,7 +16,7 @@ import {
   ElementTypeFunction,
   ElementTypeMemo,
   ElementTypeSuspense,
-} from '../../types';
+} from 'src/types';
 
 import type { Element, InspectedElement } from './types';
 

src/devtools/views/Components/types.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type { ElementType } from '../../types';
+import type { ElementType } from 'src/types';
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.

src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -8,10 +8,10 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from 'src/constants';
 import { utfDecodeString } from 'src/utils';
-import { ElementTypeRoot } from 'src/devtools/types';
+import { ElementTypeRoot } from 'src/types';
 import Store from 'src/devtools/store';
 
-import type { ElementType } from 'src/devtools/types';
+import type { ElementType } from 'src/types';
 import type {
   CommitTreeFrontend,
   CommitTreeNodeFrontend,

src/types.js

@@ -11,3 +11,21 @@ export type Wall = {|
   listen: (fn: Function) => Function,
   send: (event: string, payload: any, transferable?: Array<any>) => void,
 |};
+
+export const ElementTypeClass = 1;
+export const ElementTypeContext = 2;
+export const ElementTypeEventComponent = 3;
+export const ElementTypeEventTarget = 4;
+export const ElementTypeFunction = 5;
+export const ElementTypeForwardRef = 6;
+export const ElementTypeHost = 7;
+export const ElementTypeMemo = 8;
+export const ElementTypeOtherOrUnknown = 9;
+export const ElementTypeProfiler = 10;
+export const ElementTypeRoot = 11;
+export const ElementTypeSuspense = 12;
+
+// Different types of elements displayed in the Elements tree.
+// These types may be used to visually distinguish types,
+// or to enable/disable certain functionality.
+export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;