[Flare] Remove the old EventComponent/EventTarget system (#354)

src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -5,7 +5,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -22,7 +21,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -44,7 +42,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -72,7 +69,6 @@ exports[`InspectedElementContext should include updates for nested values that w
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -100,7 +96,6 @@ exports[`InspectedElementContext should inspect the currently selected element:
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -123,7 +118,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -149,7 +143,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -179,7 +172,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -213,7 +205,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -249,7 +240,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -287,7 +277,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -327,7 +316,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
   "id": 3,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -350,7 +338,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
   "id": 3,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": [
     {
       "id": 0,
@@ -373,7 +360,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -390,7 +376,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -412,7 +397,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "a": 1,
@@ -427,7 +411,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "a": 2,
@@ -442,7 +425,6 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "html_element": {},
@@ -462,7 +444,6 @@ exports[`InspectedElementContext should support custom objects with enumerable p
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "data": {
@@ -479,7 +460,6 @@ exports[`InspectedElementContext should support simple data types: 1: Initial in
   "id": 2,
   "owners": null,
   "context": null,
-  "events": null,
   "hooks": null,
   "props": {
     "boolean_false": false,

src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap

@@ -8,7 +8,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "a": 1,
@@ -27,7 +26,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -47,7 +45,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -71,7 +68,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -99,7 +95,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "nestedObject": {
@@ -129,7 +124,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "html_element": {},
@@ -153,7 +147,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "data": {
@@ -174,7 +167,6 @@ Object {
   "id": 2,
   "owners": null,
   "context": {},
-  "events": null,
   "hooks": null,
   "props": {
     "boolean_false": false,

src/backend/legacy/renderer.js

@@ -709,9 +709,6 @@ export function attach(
 
       type: type,
 
-      // New events system did not exist in legacy versions
-      events: null,
-
       // Inspectable properties.
       context,
       hooks: null,

src/backend/renderer.js

@@ -8,8 +8,6 @@ import {
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
-  ElementTypeEventComponent,
-  ElementTypeEventTarget,
   ElementTypeFunction,
   ElementTypeForwardRef,
   ElementTypeHostComponent,
@@ -109,8 +107,6 @@ type ReactTypeOfWorkType = {|
   CoroutineComponent: number,
   CoroutineHandlerPhase: number,
   DehydratedSuspenseComponent: number,
-  EventComponent: number,
-  EventTarget: number,
   ForwardRef: number,
   Fragment: number,
   FunctionComponent: number,
@@ -213,8 +209,6 @@ export function getInternalReactConstants(
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
       DehydratedSuspenseComponent: 18, // Behind a flag
-      EventComponent: 19, // Added in 16.9
-      EventTarget: 20, // Added in 16.9
       ForwardRef: 11,
       Fragment: 7,
       FunctionComponent: 0,
@@ -240,8 +234,6 @@ export function getInternalReactConstants(
       CoroutineComponent: -1, // Removed
       CoroutineHandlerPhase: -1, // Removed
       DehydratedSuspenseComponent: -1, // Doesn't exist yet
-      EventComponent: -1, // Doesn't exist yet
-      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 13,
       Fragment: 9,
       FunctionComponent: 0,
@@ -267,8 +259,6 @@ export function getInternalReactConstants(
       CoroutineComponent: 7,
       CoroutineHandlerPhase: 8,
       DehydratedSuspenseComponent: -1, // Doesn't exist yet
-      EventComponent: -1, // Doesn't exist yet
-      EventTarget: -1, // Doesn't exist yet
       ForwardRef: 14,
       Fragment: 10,
       FunctionComponent: 1,
@@ -305,8 +295,6 @@ export function getInternalReactConstants(
     IncompleteClassComponent,
     FunctionComponent,
     IndeterminateComponent,
-    EventComponent,
-    EventTarget,
     ForwardRef,
     HostRoot,
     HostComponent,
@@ -318,8 +306,6 @@ export function getInternalReactConstants(
   } = ReactTypeOfWork;
 
   const {
-    EVENT_TARGET_TOUCH_HIT_NUMBER,
-    EVENT_TARGET_TOUCH_HIT_STRING,
     CONCURRENT_MODE_NUMBER,
     CONCURRENT_MODE_SYMBOL_STRING,
     DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
@@ -358,16 +344,6 @@ export function getInternalReactConstants(
       case FunctionComponent:
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
-      case EventComponent:
-        return type.responder.displayName || 'EventComponent';
-      case EventTarget:
-        switch (getTypeSymbol(elementType.type)) {
-          case EVENT_TARGET_TOUCH_HIT_NUMBER:
-          case EVENT_TARGET_TOUCH_HIT_STRING:
-            return 'TouchHitTarget';
-          default:
-            return elementType.displayName || 'EventTarget';
-        }
       case ForwardRef:
         return (
           resolvedType.displayName ||
@@ -461,8 +437,6 @@ export function attach(
     ClassComponent,
     ContextConsumer,
     DehydratedSuspenseComponent,
-    EventComponent,
-    EventTarget,
     Fragment,
     ForwardRef,
     HostRoot,
@@ -649,7 +623,6 @@ export function attach(
         // For now, ignore it, and only show it once it gets hydrated.
         // https://github.com/bvaughn/react-devtools-experimental/issues/197
         return true;
-      case EventComponent:
       case HostPortal:
       case HostText:
       case Fragment:
@@ -710,10 +683,6 @@ export function attach(
       case FunctionComponent:
       case IndeterminateComponent:
         return ElementTypeFunction;
-      case EventComponent:
-        return ElementTypeEventComponent;
-      case EventTarget:
-        return ElementTypeEventTarget;
       case ForwardRef:
         return ElementTypeForwardRef;
       case HostRoot:
@@ -2239,23 +2208,6 @@ export function attach(
     const isTimedOutSuspense =
       tag === SuspenseComponent && memoizedState !== null;
 
-    let events = null;
-    let node = fiber;
-    while (node !== null) {
-      if (node.tag === EventComponent) {
-        if (events === null) {
-          events = [];
-        }
-        const eventComponentInstance = node.stateNode;
-        const currentFiber = eventComponentInstance.currentFiber;
-        events.push({
-          props: eventComponentInstance.props,
-          displayName: getDisplayNameForFiber(currentFiber),
-        });
-      }
-      node = node.return;
-    }
-
     let hooks = null;
     if (usesHooks) {
       const originalConsoleMethods = {};
@@ -2311,7 +2263,6 @@ export function attach(
       // Inspectable properties.
       // TODO Review sanitization approach for the below inspectable values.
       context,
-      events,
       hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
@@ -2350,18 +2301,12 @@ export function attach(
 
   function createIsPathWhitelisted(
     key: string | null,
-    secondaryCategory: 'events' | 'hooks' | null
+    secondaryCategory: 'hooks' | null
   ) {
     // This function helps prevent previously-inspected paths from being dehydrated in updates.
     // This is important to avoid a bad user experience where expanded toggles collapse on update.
     return function isPathWhitelisted(path: Array<string | number>): boolean {
       switch (secondaryCategory) {
-        case 'events':
-          if (path.length <= 2) {
-            // Never dehydrate the "hooks" object at the top level (becaues it's always just an array).
-            return true;
-          }
-          break;
         case 'hooks':
           if (path.length === 1) {
             // Never dehydrate the "hooks" object at the top levels.
@@ -2407,9 +2352,7 @@ export function attach(
         mergeInspectedPaths(path);
 
         let secondaryCategory = null;
-        if (path[0] === 'events') {
-          secondaryCategory = 'events';
-        } else if (path[0] === 'hooks') {
+        if (path[0] === 'hooks') {
           secondaryCategory = 'hooks';
         }
 
@@ -2466,10 +2409,6 @@ export function attach(
         cleanedInspectedElement.context,
         createIsPathWhitelisted('context', null)
       );
-      cleanedInspectedElement.events = cleanForBridge(
-        cleanedInspectedElement.events,
-        createIsPathWhitelisted('events', 'events')
-      );
       cleanedInspectedElement.hooks = cleanForBridge(
         cleanedInspectedElement.hooks,
         createIsPathWhitelisted('hooks', 'hooks')

src/backend/types.js

@@ -227,7 +227,6 @@ export type InspectedElement = {|
 
   // Inspectable properties.
   context: Object | null,
-  events: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,

src/devtools/views/Components/EventsTree.css

@@ -1,31 +0,0 @@
-.EventsTree {
-  padding: 0.25rem;
-  border-top: 1px solid var(--color-border);
-}
-.EventsTree:first-of-type {
-  border-top: none;
-}
-
-.HeaderRow {
-  display: flex;
-  align-items: center;
-}
-
-.Header {
-  flex: 1 1;
-  font-family: var(--font-family-sans);
-}
-
-.NameValueRow {
-  display: flex;
-}
-
-.Name {
-  user-select: none;
-}
-
-.Empty {
-  color: var(--color-dimmer);
-  font-style: italic;
-  padding-left: 0.75rem;
-}

src/devtools/views/Components/EventsTree.js

@@ -1,126 +0,0 @@
-// @flow
-
-import { copy } from 'clipboard-js';
-import React, { useCallback, useState } from 'react';
-import styles from './EventsTree.css';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import KeyValue from './KeyValue';
-import ExpandCollapseToggle from './ExpandCollapseToggle';
-import { serializeDataForCopy } from '../utils';
-
-import type { GetInspectedElementPath } from './InspectedElementContext';
-
-type InspectPath = (path: Array<string | number>) => void;
-
-type EventsTreeViewProps = {|
-  events: Object,
-  getInspectedElementPath: GetInspectedElementPath,
-  id: number,
-|};
-
-function EventsTreeView({
-  events,
-  getInspectedElementPath,
-  id,
-}: EventsTreeViewProps) {
-  const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [
-    events,
-  ]);
-
-  const inspectPath = useCallback(
-    (path: Array<string | number>) => {
-      getInspectedElementPath(id, ['events', ...path]);
-    },
-    [getInspectedElementPath, id]
-  );
-
-  return (
-    <div className={styles.EventsTree}>
-      <div className={styles.HeaderRow}>
-        <div className={styles.Header}>events</div>
-        {
-          <Button onClick={handleCopy} title="Copy to clipboard">
-            <ButtonIcon type="copy" />
-          </Button>
-        }
-      </div>
-      <InnerEventsTreeView events={events} inspectPath={inspectPath} />
-    </div>
-  );
-}
-
-type InnerEventsTreeViewProps = {|
-  events: Object,
-  inspectPath: InspectPath,
-|};
-
-function InnerEventsTreeView({
-  events,
-  inspectPath,
-}: InnerEventsTreeViewProps) {
-  return events.map((event, index) => (
-    <EventComponentView
-      key={index}
-      displayName={event.displayName}
-      index={index}
-      inspectPath={inspectPath}
-      props={event.props}
-    />
-  ));
-}
-
-type EventComponentViewProps = {|
-  displayName: string,
-  index: number,
-  inspectPath: InspectPath,
-  props: null | Object,
-|};
-
-function EventComponentView({
-  displayName,
-  index,
-  inspectPath,
-  props,
-}: EventComponentViewProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  let eventComponentProps = null;
-  // eslint-disable-next-line no-unused-vars
-  let children;
-
-  if (props !== null) {
-    // We don't want children, so extract it out
-    ({ children, ...eventComponentProps } = props);
-  }
-
-  return (
-    <div>
-      <div className={styles.NameValueRow}>
-        <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
-        <span onClick={() => {}} className={styles.Name}>
-          {displayName}
-        </span>
-      </div>
-      <div className={styles.Children} hidden={!isOpen}>
-        {eventComponentProps === null && (
-          <div className={styles.Empty}>None</div>
-        )}
-        {eventComponentProps !== null &&
-          Object.keys((eventComponentProps: any)).map(name => (
-            <KeyValue
-              key={name}
-              depth={1}
-              inspectPath={inspectPath}
-              name={name}
-              path={[index]}
-              value={(eventComponentProps: any)[name]}
-            />
-          ))}
-      </div>
-    </div>
-  );
-}
-
-// $FlowFixMe
-export default React.memo(EventsTreeView);

src/devtools/views/Components/InspectedElementContext.js

@@ -155,7 +155,6 @@ function InspectedElementContextController({ children }: Props) {
             type,
             owners,
             context,
-            events,
             hooks,
             props,
             state,
@@ -187,7 +186,6 @@ function InspectedElementContextController({ children }: Props) {
                     };
                   }),
             context: hydrateHelper(context),
-            events: hydrateHelper(events),
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),

src/devtools/views/Components/SelectedElement.js

@@ -6,7 +6,6 @@ import { BridgeContext, StoreContext } from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import HooksTree from './HooksTree';
-import EventsTree from './EventsTree';
 import { ModalDialogContext } from '../ModalDialog';
 import HocBadges from './HocBadges';
 import InspectedElementTree from './InspectedElementTree';
@@ -253,7 +252,6 @@ function InspectedElementView({
     canEditHooks,
     canToggleSuspense,
     context,
-    events,
     hooks,
     owners,
     props,
@@ -367,13 +365,6 @@ function InspectedElementView({
         inspectPath={inspectContextPath}
         overrideValueFn={overrideContextFn}
       />
-      {events !== null && events.length > 0 && (
-        <EventsTree
-          events={events}
-          getInspectedElementPath={getInspectedElementPath}
-          id={id}
-        />
-      )}
 
       <NativeStyleEditor />
 

src/devtools/views/Components/types.js

@@ -66,7 +66,6 @@ export type InspectedElement = {|
 
   // Inspectable properties.
   context: Object | null,
-  events: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,

src/devtools/views/Settings/ComponentsSettings.js

@@ -21,7 +21,6 @@ import {
   ComponentFilterLocation,
   ElementTypeClass,
   ElementTypeContext,
-  ElementTypeEventTarget,
   ElementTypeFunction,
   ElementTypeForwardRef,
   ElementTypeHostComponent,
@@ -328,7 +327,6 @@ export default function ComponentsSettings(_: {||}) {
                   >
                     <option value={ElementTypeClass}>class</option>
                     <option value={ElementTypeContext}>context</option>
-                    <option value={ElementTypeEventTarget}>event</option>
                     <option value={ElementTypeFunction}>function</option>
                     <option value={ElementTypeForwardRef}>forward ref</option>
                     <option value={ElementTypeHostComponent}>

src/types.js

@@ -12,8 +12,6 @@ export type Wall = {|
 // If new element types are added, use new numbers rather than re-ordering existing ones.
 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 ElementTypeHostComponent = 7;