Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 90e90ac

Browse files
acdliteacdlite
authored
Revert useEvent PRs (facebook#18438)
* Revert "ReactDOM.useEvent: enable on internal www and add inspection test (facebook#18395)" This reverts commit e0ab1a4. * Revert "ReactDOM.useEvent: Add support for experimental scopes API (facebook#18375)" This reverts commit a16b349. * ReactDOM.useEvent: Add support for experimental scopes API
1 parent da54641 commit 90e90ac

12 files changed

+48
-357
lines changed

‎packages/react-debug-tools/src/ReactDebugHooks.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import type {
1515
ReactProviderType,
1616
ReactEventResponder,
1717
ReactEventResponderListener,
18-
ReactScopeMethods,
1918
} from 'shared/ReactTypes';
2019
import type {Fiber} from 'react-reconciler/src/ReactFiber';
2120
import type {Hook, TimeoutConfig} from 'react-reconciler/src/ReactFiberHooks';
@@ -45,10 +44,7 @@ type HookLogEntry = {
4544

4645
type ReactDebugListenerMap = {|
4746
clear: () => void,
48-
setListener: (
49-
target: EventTarget | ReactScopeMethods,
50-
callback: ?(Event) => void,
51-
) => void,
47+
setListener: (target: EventTarget, callback: ?(Event) => void) => void,
5248
|};
5349

5450
let hookLog: Array<HookLogEntry> = [];

‎packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.internal.js

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,14 @@
1111
'use strict';
1212

1313
let React;
14-
let ReactDOM;
1514
let ReactDebugTools;
1615

1716
describe('ReactHooksInspection', () => {
1817
beforeEach(() => {
1918
jest.resetModules();
2019
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
2120
ReactFeatureFlags.enableDeprecatedFlareAPI = true;
22-
ReactFeatureFlags.enableUseEventAPI = true;
2321
React = require('react');
24-
ReactDOM = require('react-dom');
2522
ReactDebugTools = require('react-debug-tools');
2623
});
2724

@@ -50,44 +47,4 @@ describe('ReactHooksInspection', () => {
5047
},
5148
]);
5249
});
53-
54-
it('should inspect a simple ReactDOM.useEvent hook', () => {
55-
let clickHandle;
56-
let ref;
57-
58-
const effect = () => {
59-
clickHandle.setListener(ref.current, () => {});
60-
};
61-
62-
function Foo(props) {
63-
ref = React.useRef(null);
64-
clickHandle = ReactDOM.unstable_useEvent('click');
65-
React.useEffect(effect);
66-
return <div ref={ref}>Hello world</div>;
67-
}
68-
let tree = ReactDebugTools.inspectHooks(Foo, {});
69-
expect(tree).toEqual([
70-
{
71-
isStateEditable: false,
72-
id: 0,
73-
name: 'Ref',
74-
subHooks: [],
75-
value: null,
76-
},
77-
{
78-
isStateEditable: false,
79-
id: 1,
80-
name: 'Event',
81-
value: {capture: false, passive: undefined, priority: 0, type: 'click'},
82-
subHooks: [],
83-
},
84-
{
85-
isStateEditable: false,
86-
id: 2,
87-
name: 'Effect',
88-
value: effect,
89-
subHooks: [],
90-
},
91-
]);
92-
});
9350
});

‎packages/react-dom/src/client/ReactDOMComponent.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1348,10 +1348,6 @@ export function listenToEventResponderEventTypes(
13481348
const targetEventType = isPassive
13491349
? eventType
13501350
: eventType.substring(0, eventType.length - 7);
1351-
// We don't listen to this as we actually emulate it in the host config
1352-
if (targetEventType === 'beforeblur') {
1353-
continue;
1354-
}
13551351
if (!listenerMap.has(eventKey)) {
13561352
if (isPassive) {
13571353
const activeKey = targetEventType + '_active';

‎packages/react-dom/src/client/ReactDOMHostConfig.js

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,6 @@
99

1010
import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
1111
import type {RootType} from './ReactDOMRoot';
12-
import type {
13-
ReactDOMEventResponder,
14-
ReactDOMEventResponderInstance,
15-
ReactDOMFundamentalComponentInstance,
16-
ReactDOMListener,
17-
ReactDOMListenerEvent,
18-
ReactDOMListenerMap,
19-
} from '../shared/ReactDOMTypes';
20-
import type {ReactScopeMethods} from 'shared/ReactTypes';
2112

2213
import {
2314
precacheFiberNode,
@@ -58,6 +49,14 @@ import {
5849
} from '../shared/HTMLNodeType';
5950
import dangerousStyleValue from '../shared/dangerousStyleValue';
6051

52+
import type {
53+
ReactDOMEventResponder,
54+
ReactDOMEventResponderInstance,
55+
ReactDOMFundamentalComponentInstance,
56+
ReactDOMListener,
57+
ReactDOMListenerEvent,
58+
ReactDOMListenerMap,
59+
} from '../shared/ReactDOMTypes';
6160
import {
6261
mountEventResponder,
6362
unmountEventResponder,
@@ -70,7 +69,6 @@ import {
7069
enableDeprecatedFlareAPI,
7170
enableFundamentalAPI,
7271
enableUseEventAPI,
73-
enableScopeAPI,
7472
} from 'shared/ReactFeatureFlags';
7573
import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
7674
import {
@@ -81,13 +79,10 @@ import {
8179
isManagedDOMElement,
8280
isValidEventTarget,
8381
listenToTopLevelEvent,
84-
attachListenerToManagedDOMElement,
8582
detachListenerFromManagedDOMElement,
86-
attachTargetEventListener,
83+
attachListenerFromManagedDOMElement,
8784
detachTargetEventListener,
88-
isReactScope,
89-
attachListenerToReactScope,
90-
detachListenerFromReactScope,
85+
attachTargetEventListener,
9186
} from '../events/DOMModernPluginEventSystem';
9287
import {getListenerMapForElement} from '../events/DOMEventListenerMap';
9388
import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
@@ -1165,9 +1160,7 @@ export function mountEventListener(listener: ReactDOMListener): void {
11651160
if (enableUseEventAPI) {
11661161
const {target} = listener;
11671162
if (isManagedDOMElement(target)) {
1168-
attachListenerToManagedDOMElement(listener);
1169-
} else if (enableScopeAPI && isReactScope(target)) {
1170-
attachListenerToReactScope(listener);
1163+
attachListenerFromManagedDOMElement(listener);
11711164
} else {
11721165
attachTargetEventListener(listener);
11731166
}
@@ -1179,24 +1172,20 @@ export function unmountEventListener(listener: ReactDOMListener): void {
11791172
const {target} = listener;
11801173
if (isManagedDOMElement(target)) {
11811174
detachListenerFromManagedDOMElement(listener);
1182-
} else if (enableScopeAPI && isReactScope(target)) {
1183-
detachListenerFromReactScope(listener);
11841175
} else {
11851176
detachTargetEventListener(listener);
11861177
}
11871178
}
11881179
}
11891180

11901181
export function validateEventListenerTarget(
1191-
target: EventTarget | ReactScopeMethods,
1182+
target: EventTarget,
11921183
listener: ?(Event) => void,
11931184
): boolean {
11941185
if (enableUseEventAPI) {
11951186
if (
11961187
target != null &&
1197-
(isManagedDOMElement(target) ||
1198-
isValidEventTarget(target) ||
1199-
isReactScope(target))
1188+
(isManagedDOMElement(target) || isValidEventTarget(target))
12001189
) {
12011190
if (listener == null || typeof listener === 'function') {
12021191
return true;

‎packages/react-dom/src/events/DOMModernPluginEventSystem.js

Lines changed: 22 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type {
1414
ElementListenerMapEntry,
1515
} from '../events/DOMEventListenerMap';
1616
import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
17-
import type {EventPriority, ReactScopeMethods} from 'shared/ReactTypes';
17+
import type {EventPriority} from 'shared/ReactTypes';
1818
import type {Fiber} from 'react-reconciler/src/ReactFiber';
1919
import type {PluginModule} from 'legacy-events/PluginModuleType';
2020
import type {
@@ -142,11 +142,8 @@ const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {
142142

143143
const isArray = Array.isArray;
144144

145-
// TODO: we should remove the FlowFixMes and the casting to figure out how to make
146-
// these patterns work properly.
147-
// $FlowFixMe: Flow struggles with this pattern, so we also have to cast it.
148-
const PossiblyWeakMap = ((typeof WeakMap === 'function' ? WeakMap : Map): any);
149-
145+
// $FlowFixMe: Flow struggles with this pattern
146+
const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
150147
// $FlowFixMe: Flow cannot handle polymorphic WeakMaps
151148
export const eventTargetEventListenerStore: WeakMap<
152149
EventTarget,
@@ -156,15 +153,6 @@ export const eventTargetEventListenerStore: WeakMap<
156153
>,
157154
> = new PossiblyWeakMap();
158155

159-
// $FlowFixMe: Flow cannot handle polymorphic WeakMaps
160-
export const reactScopeListenerStore: WeakMap<
161-
ReactScopeMethods,
162-
Map<
163-
DOMTopLevelEventType,
164-
{bubbled: Set<ReactDOMListener>, captured: Set<ReactDOMListener>},
165-
>,
166-
> = new PossiblyWeakMap();
167-
168156
function dispatchEventsForPlugins(
169157
topLevelType: DOMTopLevelEventType,
170158
eventSystemFlags: EventSystemFlags,
@@ -318,20 +306,12 @@ function isMatchingRootContainer(
318306
);
319307
}
320308

321-
export function isManagedDOMElement(
322-
target: EventTarget | ReactScopeMethods,
323-
): boolean {
309+
export function isManagedDOMElement(target: EventTarget): boolean {
324310
return getClosestInstanceFromNode(((target: any): Node)) !== null;
325311
}
326312

327-
export function isValidEventTarget(
328-
target: EventTarget | ReactScopeMethods,
329-
): boolean {
330-
return typeof (target: Object).addEventListener === 'function';
331-
}
332-
333-
export function isReactScope(target: EventTarget | ReactScopeMethods): boolean {
334-
return typeof (target: Object).getChildContextValues === 'function';
313+
export function isValidEventTarget(target: EventTarget): boolean {
314+
return typeof target.addEventListener === 'function';
335315
}
336316

337317
export function dispatchEventForPluginEventSystem(
@@ -466,16 +446,18 @@ function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
466446
}
467447
}
468448

469-
export function attachListenerToManagedDOMElement(
449+
export function attachListenerFromManagedDOMElement(
470450
listener: ReactDOMListener,
471451
): void {
472452
const {event, target} = listener;
473453
const {passive, priority, type} = event;
474-
475-
const managedTargetElement = ((target: any): Element);
476-
const containerEventTarget = getNearestRootOrPortalContainer(
477-
managedTargetElement,
478-
);
454+
const possibleManagedTarget = ((target: any): Element);
455+
let containerEventTarget = target;
456+
if (getClosestInstanceFromNode(possibleManagedTarget)) {
457+
containerEventTarget = getNearestRootOrPortalContainer(
458+
possibleManagedTarget,
459+
);
460+
}
479461
const listenerMap = getListenerMapForElement(containerEventTarget);
480462
// Add the event listener to the target container (falling back to
481463
// the target if we didn't find one).
@@ -487,11 +469,11 @@ export function attachListenerToManagedDOMElement(
487469
priority,
488470
);
489471
// Get the internal listeners Set from the target instance.
490-
let listeners = getListenersFromTarget(managedTargetElement);
472+
let listeners = getListenersFromTarget(target);
491473
// If we don't have any listeners, then we need to init them.
492474
if (listeners === null) {
493475
listeners = new Set();
494-
initListenersSet(managedTargetElement, listeners);
476+
initListenersSet(target, listeners);
495477
}
496478
// Add our listener to the listeners Set.
497479
listeners.add(listener);
@@ -503,9 +485,8 @@ export function detachListenerFromManagedDOMElement(
503485
listener: ReactDOMListener,
504486
): void {
505487
const {target} = listener;
506-
const managedTargetElement = ((target: any): Element);
507488
// Get the internal listeners Set from the target instance.
508-
const listeners = getListenersFromTarget(managedTargetElement);
489+
const listeners = getListenersFromTarget(target);
509490
if (listeners !== null) {
510491
// Remove out listener from the listeners Set.
511492
listeners.delete(listener);
@@ -515,21 +496,13 @@ export function detachListenerFromManagedDOMElement(
515496
export function attachTargetEventListener(listener: ReactDOMListener): void {
516497
const {event, target} = listener;
517498
const {capture, passive, priority, type} = event;
518-
const eventTarget = ((target: any): EventTarget);
519-
const listenerMap = getListenerMapForElement(eventTarget);
499+
const listenerMap = getListenerMapForElement(target);
520500
// Add the event listener to the TargetEvent object.
521-
listenToTopLevelEvent(
522-
type,
523-
eventTarget,
524-
listenerMap,
525-
passive,
526-
priority,
527-
capture,
528-
);
529-
let eventTypeMap = eventTargetEventListenerStore.get(eventTarget);
501+
listenToTopLevelEvent(type, target, listenerMap, passive, priority, capture);
502+
let eventTypeMap = eventTargetEventListenerStore.get(target);
530503
if (eventTypeMap === undefined) {
531504
eventTypeMap = new Map();
532-
eventTargetEventListenerStore.set(eventTarget, eventTypeMap);
505+
eventTargetEventListenerStore.set(target, eventTypeMap);
533506
}
534507
// Get the listeners by the event type
535508
let listeners = eventTypeMap.get(type);
@@ -550,51 +523,7 @@ export function attachTargetEventListener(listener: ReactDOMListener): void {
550523
export function detachTargetEventListener(listener: ReactDOMListener): void {
551524
const {event, target} = listener;
552525
const {capture, type} = event;
553-
const validEventTarget = ((target: any): EventTarget);
554-
const eventTypeMap = eventTargetEventListenerStore.get(validEventTarget);
555-
if (eventTypeMap !== undefined) {
556-
const listeners = eventTypeMap.get(type);
557-
if (listeners !== undefined) {
558-
// Remove out listener from the listeners Set.
559-
if (capture) {
560-
listeners.captured.delete(listener);
561-
} else {
562-
listeners.bubbled.delete(listener);
563-
}
564-
}
565-
}
566-
}
567-
568-
export function attachListenerToReactScope(listener: ReactDOMListener): void {
569-
const {event, target} = listener;
570-
const {capture, type} = event;
571-
const reactScope = ((target: any): ReactScopeMethods);
572-
let eventTypeMap = reactScopeListenerStore.get(reactScope);
573-
if (eventTypeMap === undefined) {
574-
eventTypeMap = new Map();
575-
reactScopeListenerStore.set(reactScope, eventTypeMap);
576-
}
577-
// Get the listeners by the event type
578-
let listeners = eventTypeMap.get(type);
579-
if (listeners === undefined) {
580-
listeners = {captured: new Set(), bubbled: new Set()};
581-
eventTypeMap.set(type, listeners);
582-
}
583-
// Add our listener to the listeners Set.
584-
if (capture) {
585-
listeners.captured.add(listener);
586-
} else {
587-
listeners.bubbled.add(listener);
588-
}
589-
// Finally, add the event to our known event types list.
590-
addEventTypeToDispatchConfig(type);
591-
}
592-
593-
export function detachListenerFromReactScope(listener: ReactDOMListener): void {
594-
const {event, target} = listener;
595-
const {capture, type} = event;
596-
const reactScope = ((target: any): ReactScopeMethods);
597-
const eventTypeMap = reactScopeListenerStore.get(reactScope);
526+
const eventTypeMap = eventTargetEventListenerStore.get(target);
598527
if (eventTypeMap !== undefined) {
599528
const listeners = eventTypeMap.get(type);
600529
if (listeners !== undefined) {

0 commit comments

Comments
 (0)