From a7948e834223ab010475cfe6fabfc55d24f38955 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Thu, 25 Jul 2019 16:45:59 +0100 Subject: [PATCH] [Flare] Remove the old EventComponent/EventTarget system (#354) --- .../inspectedElementContext-test.js.snap | 20 --- .../__snapshots__/inspectElement-test.js.snap | 8 -- src/backend/legacy/renderer.js | 3 - src/backend/renderer.js | 65 +-------- src/backend/types.js | 1 - src/devtools/views/Components/EventsTree.css | 31 ----- src/devtools/views/Components/EventsTree.js | 126 ------------------ .../Components/InspectedElementContext.js | 2 - .../views/Components/SelectedElement.js | 9 -- src/devtools/views/Components/types.js | 1 - .../views/Settings/ComponentsSettings.js | 2 - src/types.js | 2 - 12 files changed, 2 insertions(+), 268 deletions(-) delete mode 100644 src/devtools/views/Components/EventsTree.css delete mode 100644 src/devtools/views/Components/EventsTree.js diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap index 88d8e2dcea..a27a73527c 100644 --- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap +++ b/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, diff --git a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap index 40d3ab5ed9..1cfc30e884 100644 --- a/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap +++ b/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, diff --git a/src/backend/legacy/renderer.js b/src/backend/legacy/renderer.js index 96517385bc..461905a3b2 100644 --- a/src/backend/legacy/renderer.js +++ b/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, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 9f6f54d8f8..979eefd141 100644 --- a/src/backend/renderer.js +++ b/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): 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') diff --git a/src/backend/types.js b/src/backend/types.js index 6bc08d6e18..c0a2722950 100644 --- a/src/backend/types.js +++ b/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, diff --git a/src/devtools/views/Components/EventsTree.css b/src/devtools/views/Components/EventsTree.css deleted file mode 100644 index 686c5dc768..0000000000 --- a/src/devtools/views/Components/EventsTree.css +++ /dev/null @@ -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; -} diff --git a/src/devtools/views/Components/EventsTree.js b/src/devtools/views/Components/EventsTree.js deleted file mode 100644 index eda2a54c25..0000000000 --- a/src/devtools/views/Components/EventsTree.js +++ /dev/null @@ -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) => 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) => { - getInspectedElementPath(id, ['events', ...path]); - }, - [getInspectedElementPath, id] - ); - - return ( -
-
-
events
- { - - } -
- -
- ); -} - -type InnerEventsTreeViewProps = {| - events: Object, - inspectPath: InspectPath, -|}; - -function InnerEventsTreeView({ - events, - inspectPath, -}: InnerEventsTreeViewProps) { - return events.map((event, index) => ( - - )); -} - -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 ( -
-
- - {}} className={styles.Name}> - {displayName} - -
- -
- ); -} - -// $FlowFixMe -export default React.memo(EventsTreeView); diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js index 31841774eb..8ba1b7718a 100644 --- a/src/devtools/views/Components/InspectedElementContext.js +++ b/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), diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js index 5b404b3575..957d844421 100644 --- a/src/devtools/views/Components/SelectedElement.js +++ b/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 && ( - - )} diff --git a/src/devtools/views/Components/types.js b/src/devtools/views/Components/types.js index 6d88ce8fd8..bba0b300c9 100644 --- a/src/devtools/views/Components/types.js +++ b/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, diff --git a/src/devtools/views/Settings/ComponentsSettings.js b/src/devtools/views/Settings/ComponentsSettings.js index 39e516eb46..6b62b935f1 100644 --- a/src/devtools/views/Settings/ComponentsSettings.js +++ b/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(_: {||}) { > -