@samitouri / QOS-React-2 / commits / a7948e8342

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

Dominic Gannaway committed Jul 25, 2019 at 16:45 UTC a7948e834223ab010475cfe6fabfc55d24f38955
12 files changed +2 -268
src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
-20
@@ -5,7 +5,6 @@ exports[`InspectedElementContext should include updates for nested values that w
5 "id": 2,
6 "owners": null,
7 "context": null,
8 - "events": null,
8 "hooks": null,
9 "props": {
10 "nestedObject": {
@@ -22,7 +21,6 @@ exports[`InspectedElementContext should include updates for nested values that w
21 "id": 2,
22 "owners": null,
23 "context": null,
25 - "events": null,
24 "hooks": null,
25 "props": {
26 "nestedObject": {
@@ -44,7 +42,6 @@ exports[`InspectedElementContext should include updates for nested values that w
42 "id": 2,
43 "owners": null,
44 "context": null,
47 - "events": null,
45 "hooks": null,
46 "props": {
47 "nestedObject": {
@@ -72,7 +69,6 @@ exports[`InspectedElementContext should include updates for nested values that w
69 "id": 2,
70 "owners": null,
71 "context": null,
75 - "events": null,
72 "hooks": null,
73 "props": {
74 "nestedObject": {
@@ -100,7 +96,6 @@ exports[`InspectedElementContext should inspect the currently selected element:
96 "id": 2,
97 "owners": null,
98 "context": null,
103 - "events": null,
99 "hooks": [
100 {
101 "id": 0,
@@ -123,7 +118,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
118 "id": 2,
119 "owners": null,
120 "context": null,
126 - "events": null,
121 "hooks": [
122 {
123 "id": 0,
@@ -149,7 +143,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
143 "id": 2,
144 "owners": null,
145 "context": null,
152 - "events": null,
146 "hooks": [
147 {
148 "id": 0,
@@ -179,7 +172,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
172 "id": 2,
173 "owners": null,
174 "context": null,
182 - "events": null,
175 "hooks": [
176 {
177 "id": 0,
@@ -213,7 +205,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
205 "id": 2,
206 "owners": null,
207 "context": null,
216 - "events": null,
208 "hooks": [
209 {
210 "id": 0,
@@ -249,7 +240,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
240 "id": 2,
241 "owners": null,
242 "context": null,
252 - "events": null,
243 "hooks": [
244 {
245 "id": 0,
@@ -287,7 +277,6 @@ exports[`InspectedElementContext should not dehydrate nested values until explic
277 "id": 2,
278 "owners": null,
279 "context": null,
290 - "events": null,
280 "hooks": [
281 {
282 "id": 0,
@@ -327,7 +316,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
316 "id": 3,
317 "owners": null,
318 "context": null,
330 - "events": null,
319 "hooks": [
320 {
321 "id": 0,
@@ -350,7 +338,6 @@ exports[`InspectedElementContext should not re-render a function with hooks if i
338 "id": 3,
339 "owners": null,
340 "context": null,
353 - "events": null,
341 "hooks": [
342 {
343 "id": 0,
@@ -373,7 +360,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
360 "id": 2,
361 "owners": null,
362 "context": null,
376 - "events": null,
363 "hooks": null,
364 "props": {
365 "nestedObject": {
@@ -390,7 +376,6 @@ exports[`InspectedElementContext should not tear if hydration is requested after
376 "id": 2,
377 "owners": null,
378 "context": null,
393 - "events": null,
379 "hooks": null,
380 "props": {
381 "nestedObject": {
@@ -412,7 +397,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
397 "id": 2,
398 "owners": null,
399 "context": null,
415 - "events": null,
400 "hooks": null,
401 "props": {
402 "a": 1,
@@ -427,7 +411,6 @@ exports[`InspectedElementContext should poll for updates for the currently selec
411 "id": 2,
412 "owners": null,
413 "context": null,
430 - "events": null,
414 "hooks": null,
415 "props": {
416 "a": 2,
@@ -442,7 +425,6 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
425 "id": 2,
426 "owners": null,
427 "context": null,
445 - "events": null,
428 "hooks": null,
429 "props": {
430 "html_element": {},
@@ -462,7 +444,6 @@ exports[`InspectedElementContext should support custom objects with enumerable p
444 "id": 2,
445 "owners": null,
446 "context": null,
465 - "events": null,
447 "hooks": null,
448 "props": {
449 "data": {
@@ -479,7 +460,6 @@ exports[`InspectedElementContext should support simple data types: 1: Initial in
460 "id": 2,
461 "owners": null,
462 "context": null,
482 - "events": null,
463 "hooks": null,
464 "props": {
465 "boolean_false": false,
src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
-8
@@ -8,7 +8,6 @@ Object {
8 "id": 2,
9 "owners": null,
10 "context": {},
11 - "events": null,
11 "hooks": null,
12 "props": {
13 "a": 1,
@@ -27,7 +26,6 @@ Object {
26 "id": 2,
27 "owners": null,
28 "context": {},
30 - "events": null,
29 "hooks": null,
30 "props": {
31 "nestedObject": {
@@ -47,7 +45,6 @@ Object {
45 "id": 2,
46 "owners": null,
47 "context": {},
50 - "events": null,
48 "hooks": null,
49 "props": {
50 "nestedObject": {
@@ -71,7 +68,6 @@ Object {
68 "id": 2,
69 "owners": null,
70 "context": {},
74 - "events": null,
71 "hooks": null,
72 "props": {
73 "nestedObject": {
@@ -99,7 +95,6 @@ Object {
95 "id": 2,
96 "owners": null,
97 "context": {},
102 - "events": null,
98 "hooks": null,
99 "props": {
100 "nestedObject": {
@@ -129,7 +124,6 @@ Object {
124 "id": 2,
125 "owners": null,
126 "context": {},
132 - "events": null,
127 "hooks": null,
128 "props": {
129 "html_element": {},
@@ -153,7 +147,6 @@ Object {
147 "id": 2,
148 "owners": null,
149 "context": {},
156 - "events": null,
150 "hooks": null,
151 "props": {
152 "data": {
@@ -174,7 +167,6 @@ Object {
167 "id": 2,
168 "owners": null,
169 "context": {},
177 - "events": null,
170 "hooks": null,
171 "props": {
172 "boolean_false": false,
src/backend/legacy/renderer.js
-3
@@ -709,9 +709,6 @@ export function attach(
709
710 type: type,
711
712 - // New events system did not exist in legacy versions
713 - events: null,
714 -
712 // Inspectable properties.
713 context,
714 hooks: null,
src/backend/renderer.js
+2 -63
@@ -8,8 +8,6 @@ import {
8 ComponentFilterLocation,
9 ElementTypeClass,
10 ElementTypeContext,
11 - ElementTypeEventComponent,
12 - ElementTypeEventTarget,
11 ElementTypeFunction,
12 ElementTypeForwardRef,
13 ElementTypeHostComponent,
@@ -109,8 +107,6 @@ type ReactTypeOfWorkType = {|
107 CoroutineComponent: number,
108 CoroutineHandlerPhase: number,
109 DehydratedSuspenseComponent: number,
112 - EventComponent: number,
113 - EventTarget: number,
110 ForwardRef: number,
111 Fragment: number,
112 FunctionComponent: number,
@@ -213,8 +209,6 @@ export function getInternalReactConstants(
209 CoroutineComponent: -1, // Removed
210 CoroutineHandlerPhase: -1, // Removed
211 DehydratedSuspenseComponent: 18, // Behind a flag
216 - EventComponent: 19, // Added in 16.9
217 - EventTarget: 20, // Added in 16.9
212 ForwardRef: 11,
213 Fragment: 7,
214 FunctionComponent: 0,
@@ -240,8 +234,6 @@ export function getInternalReactConstants(
234 CoroutineComponent: -1, // Removed
235 CoroutineHandlerPhase: -1, // Removed
236 DehydratedSuspenseComponent: -1, // Doesn't exist yet
243 - EventComponent: -1, // Doesn't exist yet
244 - EventTarget: -1, // Doesn't exist yet
237 ForwardRef: 13,
238 Fragment: 9,
239 FunctionComponent: 0,
@@ -267,8 +259,6 @@ export function getInternalReactConstants(
259 CoroutineComponent: 7,
260 CoroutineHandlerPhase: 8,
261 DehydratedSuspenseComponent: -1, // Doesn't exist yet
270 - EventComponent: -1, // Doesn't exist yet
271 - EventTarget: -1, // Doesn't exist yet
262 ForwardRef: 14,
263 Fragment: 10,
264 FunctionComponent: 1,
@@ -305,8 +295,6 @@ export function getInternalReactConstants(
295 IncompleteClassComponent,
296 FunctionComponent,
297 IndeterminateComponent,
308 - EventComponent,
309 - EventTarget,
298 ForwardRef,
299 HostRoot,
300 HostComponent,
@@ -318,8 +306,6 @@ export function getInternalReactConstants(
306 } = ReactTypeOfWork;
307
308 const {
321 - EVENT_TARGET_TOUCH_HIT_NUMBER,
322 - EVENT_TARGET_TOUCH_HIT_STRING,
309 CONCURRENT_MODE_NUMBER,
310 CONCURRENT_MODE_SYMBOL_STRING,
311 DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
@@ -358,16 +344,6 @@ export function getInternalReactConstants(
344 case FunctionComponent:
345 case IndeterminateComponent:
346 return getDisplayName(resolvedType);
361 - case EventComponent:
362 - return type.responder.displayName || 'EventComponent';
363 - case EventTarget:
364 - switch (getTypeSymbol(elementType.type)) {
365 - case EVENT_TARGET_TOUCH_HIT_NUMBER:
366 - case EVENT_TARGET_TOUCH_HIT_STRING:
367 - return 'TouchHitTarget';
368 - default:
369 - return elementType.displayName || 'EventTarget';
370 - }
347 case ForwardRef:
348 return (
349 resolvedType.displayName ||
@@ -461,8 +437,6 @@ export function attach(
437 ClassComponent,
438 ContextConsumer,
439 DehydratedSuspenseComponent,
464 - EventComponent,
465 - EventTarget,
440 Fragment,
441 ForwardRef,
442 HostRoot,
@@ -649,7 +623,6 @@ export function attach(
623 // For now, ignore it, and only show it once it gets hydrated.
624 // https://github.com/bvaughn/react-devtools-experimental/issues/197
625 return true;
652 - case EventComponent:
626 case HostPortal:
627 case HostText:
628 case Fragment:
@@ -710,10 +683,6 @@ export function attach(
683 case FunctionComponent:
684 case IndeterminateComponent:
685 return ElementTypeFunction;
713 - case EventComponent:
714 - return ElementTypeEventComponent;
715 - case EventTarget:
716 - return ElementTypeEventTarget;
686 case ForwardRef:
687 return ElementTypeForwardRef;
688 case HostRoot:
@@ -2239,23 +2208,6 @@ export function attach(
2208 const isTimedOutSuspense =
2209 tag === SuspenseComponent && memoizedState !== null;
2210
2242 - let events = null;
2243 - let node = fiber;
2244 - while (node !== null) {
2245 - if (node.tag === EventComponent) {
2246 - if (events === null) {
2247 - events = [];
2248 - }
2249 - const eventComponentInstance = node.stateNode;
2250 - const currentFiber = eventComponentInstance.currentFiber;
2251 - events.push({
2252 - props: eventComponentInstance.props,
2253 - displayName: getDisplayNameForFiber(currentFiber),
2254 - });
2255 - }
2256 - node = node.return;
2257 - }
2258 -
2211 let hooks = null;
2212 if (usesHooks) {
2213 const originalConsoleMethods = {};
@@ -2311,7 +2263,6 @@ export function attach(
2263 // Inspectable properties.
2264 // TODO Review sanitization approach for the below inspectable values.
2265 context,
2314 - events,
2266 hooks,
2267 props: memoizedProps,
2268 state: usesHooks ? null : memoizedState,
@@ -2350,18 +2301,12 @@ export function attach(
2301
2302 function createIsPathWhitelisted(
2303 key: string | null,
2353 - secondaryCategory: 'events' | 'hooks' | null
2304 + secondaryCategory: 'hooks' | null
2305 ) {
2306 // This function helps prevent previously-inspected paths from being dehydrated in updates.
2307 // This is important to avoid a bad user experience where expanded toggles collapse on update.
2308 return function isPathWhitelisted(path: Array<string | number>): boolean {
2309 switch (secondaryCategory) {
2359 - case 'events':
2360 - if (path.length <= 2) {
2361 - // Never dehydrate the "hooks" object at the top level (becaues it's always just an array).
2362 - return true;
2363 - }
2364 - break;
2310 case 'hooks':
2311 if (path.length === 1) {
2312 // Never dehydrate the "hooks" object at the top levels.
@@ -2407,9 +2352,7 @@ export function attach(
2352 mergeInspectedPaths(path);
2353
2354 let secondaryCategory = null;
2410 - if (path[0] === 'events') {
2411 - secondaryCategory = 'events';
2412 - } else if (path[0] === 'hooks') {
2355 + if (path[0] === 'hooks') {
2356 secondaryCategory = 'hooks';
2357 }
2358
@@ -2466,10 +2409,6 @@ export function attach(
2409 cleanedInspectedElement.context,
2410 createIsPathWhitelisted('context', null)
2411 );
2469 - cleanedInspectedElement.events = cleanForBridge(
2470 - cleanedInspectedElement.events,
2471 - createIsPathWhitelisted('events', 'events')
2472 - );
2412 cleanedInspectedElement.hooks = cleanForBridge(
2413 cleanedInspectedElement.hooks,
2414 createIsPathWhitelisted('hooks', 'hooks')
src/backend/types.js
-1
@@ -227,7 +227,6 @@ export type InspectedElement = {|
227
228 // Inspectable properties.
229 context: Object | null,
230 - events: Object | null,
230 hooks: Object | null,
231 props: Object | null,
232 state: Object | null,
src/devtools/views/Components/EventsTree.css deleted
-31
@@ -1,31 +0,0 @@
1 -.EventsTree {
2 - padding: 0.25rem;
3 - border-top: 1px solid var(--color-border);
4 -}
5 -.EventsTree:first-of-type {
6 - border-top: none;
7 -}
8 -
9 -.HeaderRow {
10 - display: flex;
11 - align-items: center;
12 -}
13 -
14 -.Header {
15 - flex: 1 1;
16 - font-family: var(--font-family-sans);
17 -}
18 -
19 -.NameValueRow {
20 - display: flex;
21 -}
22 -
23 -.Name {
24 - user-select: none;
25 -}
26 -
27 -.Empty {
28 - color: var(--color-dimmer);
29 - font-style: italic;
30 - padding-left: 0.75rem;
31 -}
src/devtools/views/Components/EventsTree.js deleted
-126
@@ -1,126 +0,0 @@
1 -// @flow
2 -
3 -import { copy } from 'clipboard-js';
4 -import React, { useCallback, useState } from 'react';
5 -import styles from './EventsTree.css';
6 -import Button from '../Button';
7 -import ButtonIcon from '../ButtonIcon';
8 -import KeyValue from './KeyValue';
9 -import ExpandCollapseToggle from './ExpandCollapseToggle';
10 -import { serializeDataForCopy } from '../utils';
11 -
12 -import type { GetInspectedElementPath } from './InspectedElementContext';
13 -
14 -type InspectPath = (path: Array<string | number>) => void;
15 -
16 -type EventsTreeViewProps = {|
17 - events: Object,
18 - getInspectedElementPath: GetInspectedElementPath,
19 - id: number,
20 -|};
21 -
22 -function EventsTreeView({
23 - events,
24 - getInspectedElementPath,
25 - id,
26 -}: EventsTreeViewProps) {
27 - const handleCopy = useCallback(() => copy(serializeDataForCopy(events)), [
28 - events,
29 - ]);
30 -
31 - const inspectPath = useCallback(
32 - (path: Array<string | number>) => {
33 - getInspectedElementPath(id, ['events', ...path]);
34 - },
35 - [getInspectedElementPath, id]
36 - );
37 -
38 - return (
39 - <div className={styles.EventsTree}>
40 - <div className={styles.HeaderRow}>
41 - <div className={styles.Header}>events</div>
42 - {
43 - <Button onClick={handleCopy} title="Copy to clipboard">
44 - <ButtonIcon type="copy" />
45 - </Button>
46 - }
47 - </div>
48 - <InnerEventsTreeView events={events} inspectPath={inspectPath} />
49 - </div>
50 - );
51 -}
52 -
53 -type InnerEventsTreeViewProps = {|
54 - events: Object,
55 - inspectPath: InspectPath,
56 -|};
57 -
58 -function InnerEventsTreeView({
59 - events,
60 - inspectPath,
61 -}: InnerEventsTreeViewProps) {
62 - return events.map((event, index) => (
63 - <EventComponentView
64 - key={index}
65 - displayName={event.displayName}
66 - index={index}
67 - inspectPath={inspectPath}
68 - props={event.props}
69 - />
70 - ));
71 -}
72 -
73 -type EventComponentViewProps = {|
74 - displayName: string,
75 - index: number,
76 - inspectPath: InspectPath,
77 - props: null | Object,
78 -|};
79 -
80 -function EventComponentView({
81 - displayName,
82 - index,
83 - inspectPath,
84 - props,
85 -}: EventComponentViewProps) {
86 - const [isOpen, setIsOpen] = useState(false);
87 -
88 - let eventComponentProps = null;
89 - // eslint-disable-next-line no-unused-vars
90 - let children;
91 -
92 - if (props !== null) {
93 - // We don't want children, so extract it out
94 - ({ children, ...eventComponentProps } = props);
95 - }
96 -
97 - return (
98 - <div>
99 - <div className={styles.NameValueRow}>
100 - <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
101 - <span onClick={() => {}} className={styles.Name}>
102 - {displayName}
103 - </span>
104 - </div>
105 - <div className={styles.Children} hidden={!isOpen}>
106 - {eventComponentProps === null && (
107 - <div className={styles.Empty}>None</div>
108 - )}
109 - {eventComponentProps !== null &&
110 - Object.keys((eventComponentProps: any)).map(name => (
111 - <KeyValue
112 - key={name}
113 - depth={1}
114 - inspectPath={inspectPath}
115 - name={name}
116 - path={[index]}
117 - value={(eventComponentProps: any)[name]}
118 - />
119 - ))}
120 - </div>
121 - </div>
122 - );
123 -}
124 -
125 -// $FlowFixMe
126 -export default React.memo(EventsTreeView);
src/devtools/views/Components/InspectedElementContext.js
-2
@@ -155,7 +155,6 @@ function InspectedElementContextController({ children }: Props) {
155 type,
156 owners,
157 context,
158 - events,
158 hooks,
159 props,
160 state,
@@ -187,7 +186,6 @@ function InspectedElementContextController({ children }: Props) {
186 };
187 }),
188 context: hydrateHelper(context),
190 - events: hydrateHelper(events),
189 hooks: hydrateHelper(hooks),
190 props: hydrateHelper(props),
191 state: hydrateHelper(state),
src/devtools/views/Components/SelectedElement.js
-9
@@ -6,7 +6,6 @@ import { BridgeContext, StoreContext } from '../context';
6 import Button from '../Button';
7 import ButtonIcon from '../ButtonIcon';
8 import HooksTree from './HooksTree';
9 -import EventsTree from './EventsTree';
9 import { ModalDialogContext } from '../ModalDialog';
10 import HocBadges from './HocBadges';
11 import InspectedElementTree from './InspectedElementTree';
@@ -253,7 +252,6 @@ function InspectedElementView({
252 canEditHooks,
253 canToggleSuspense,
254 context,
256 - events,
255 hooks,
256 owners,
257 props,
@@ -367,13 +365,6 @@ function InspectedElementView({
365 inspectPath={inspectContextPath}
366 overrideValueFn={overrideContextFn}
367 />
370 - {events !== null && events.length > 0 && (
371 - <EventsTree
372 - events={events}
373 - getInspectedElementPath={getInspectedElementPath}
374 - id={id}
375 - />
376 - )}
368
369 <NativeStyleEditor />
370
src/devtools/views/Components/types.js
-1
@@ -66,7 +66,6 @@ export type InspectedElement = {|
66
67 // Inspectable properties.
68 context: Object | null,
69 - events: Object | null,
69 hooks: Object | null,
70 props: Object | null,
71 state: Object | null,
src/devtools/views/Settings/ComponentsSettings.js
-2
@@ -21,7 +21,6 @@ import {
21 ComponentFilterLocation,
22 ElementTypeClass,
23 ElementTypeContext,
24 - ElementTypeEventTarget,
24 ElementTypeFunction,
25 ElementTypeForwardRef,
26 ElementTypeHostComponent,
@@ -328,7 +327,6 @@ export default function ComponentsSettings(_: {||}) {
327 >
328 <option value={ElementTypeClass}>class</option>
329 <option value={ElementTypeContext}>context</option>
331 - <option value={ElementTypeEventTarget}>event</option>
330 <option value={ElementTypeFunction}>function</option>
331 <option value={ElementTypeForwardRef}>forward ref</option>
332 <option value={ElementTypeHostComponent}>
src/types.js
-2
@@ -12,8 +12,6 @@ export type Wall = {|
12 // If new element types are added, use new numbers rather than re-ordering existing ones.
13 export const ElementTypeClass = 1;
14 export const ElementTypeContext = 2;
15 -export const ElementTypeEventComponent = 3;
16 -export const ElementTypeEventTarget = 4;
15 export const ElementTypeFunction = 5;
16 export const ElementTypeForwardRef = 6;
17 export const ElementTypeHostComponent = 7;