Further pre-requisite changes to plugin event system (#18083)
Dominic Gannaway committed
Feb 20, 2020 at 00:46 UTC
3f85d53ca6f2af8a711daae6322e6bdda862f660
7 files changed
+48
-39
packages/legacy-events/PluginModuleType.js
+1
-1
@@ -29,7 +29,7 @@ export type PluginModule<NativeEvent> = {
29
nativeTarget: NativeEvent,
30
nativeEventTarget: null | EventTarget,
31
eventSystemFlags: EventSystemFlags,
32
+ container?: Document | Element | Node,
33
) => ?ReactSyntheticEvent,
34
tapMoveThreshold?: number,
34
- ...
35
};
packages/legacy-events/ReactSyntheticEventType.js
+1
-1
@@ -31,4 +31,4 @@ export type ReactSyntheticEvent = {|
31
nativeEventTarget: EventTarget,
32
) => ReactSyntheticEvent,
33
isPersistent: () => boolean,
34
-|} & SyntheticEvent<>;
34
+|};
packages/react-dom/src/client/ReactDOMRoot.js
+1
-1
@@ -123,7 +123,7 @@ function createRootImpl(
123
container.nodeType === DOCUMENT_NODE
124
? container
125
: container.ownerDocument;
126
- eagerlyTrapReplayableEvents(doc);
126
+ eagerlyTrapReplayableEvents(container, doc);
127
}
128
return root;
129
}
packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
+4
-4
@@ -264,7 +264,7 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
264
}
265
}
266
267
-export function dispatchEventForPluginEventSystem(
267
+export function dispatchEventForLegacyPluginEventSystem(
268
topLevelType: DOMTopLevelEventType,
269
eventSystemFlags: EventSystemFlags,
270
nativeEvent: AnyNativeEvent,
@@ -311,16 +311,16 @@ export function legacyListenToEvent(
311
registrationName: string,
312
mountAt: Document | Element | Node,
313
): void {
314
- const listeningSet = getListenerMapForElement(mountAt);
314
+ const listenerMap = getListenerMapForElement(mountAt);
315
const dependencies = registrationNameDependencies[registrationName];
316
317
for (let i = 0; i < dependencies.length; i++) {
318
const dependency = dependencies[i];
319
- listenToTopLevelEvent(dependency, mountAt, listeningSet);
319
+ legacyListenToTopLevelEvent(dependency, mountAt, listenerMap);
320
}
321
}
322
323
-export function listenToTopLevelEvent(
323
+export function legacyListenToTopLevelEvent(
324
topLevelType: DOMTopLevelEventType,
325
mountAt: Document | Element | Node,
326
listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
packages/react-dom/src/events/ReactDOMEventListener.js
+10
-10
@@ -60,7 +60,7 @@ import {
60
DiscreteEvent,
61
} from 'shared/ReactTypes';
62
import {getEventPriorityForPluginSystem} from './DOMEventProperties';
63
-import {dispatchEventForPluginEventSystem} from './DOMLegacyEventPluginSystem';
63
+import {dispatchEventForLegacyPluginEventSystem} from './DOMLegacyEventPluginSystem';
64
65
const {
66
unstable_UserBlockingPriority: UserBlockingPriority,
@@ -242,8 +242,8 @@ export function dispatchEvent(
242
null, // Flags that we're not actually blocked on anything as far as we know.
243
topLevelType,
244
eventSystemFlags,
245
- nativeEvent,
245
container,
246
+ nativeEvent,
247
);
248
return;
249
}
@@ -251,8 +251,8 @@ export function dispatchEvent(
251
const blockedOn = attemptToDispatchEvent(
252
topLevelType,
253
eventSystemFlags,
254
- nativeEvent,
254
container,
255
+ nativeEvent,
256
);
257
258
if (blockedOn === null) {
@@ -267,8 +267,8 @@ export function dispatchEvent(
267
blockedOn,
268
topLevelType,
269
eventSystemFlags,
270
- nativeEvent,
270
container,
271
+ nativeEvent,
272
);
273
return;
274
}
@@ -278,8 +278,8 @@ export function dispatchEvent(
278
blockedOn,
279
topLevelType,
280
eventSystemFlags,
281
- nativeEvent,
281
container,
282
+ nativeEvent,
283
)
284
) {
285
return;
@@ -293,7 +293,7 @@ export function dispatchEvent(
293
// in case the event system needs to trace it.
294
if (enableDeprecatedFlareAPI) {
295
if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
296
- dispatchEventForPluginEventSystem(
296
+ dispatchEventForLegacyPluginEventSystem(
297
topLevelType,
298
eventSystemFlags,
299
nativeEvent,
@@ -311,7 +311,7 @@ export function dispatchEvent(
311
);
312
}
313
} else {
314
- dispatchEventForPluginEventSystem(
314
+ dispatchEventForLegacyPluginEventSystem(
315
topLevelType,
316
eventSystemFlags,
317
nativeEvent,
@@ -324,8 +324,8 @@ export function dispatchEvent(
324
export function attemptToDispatchEvent(
325
topLevelType: DOMTopLevelEventType,
326
eventSystemFlags: EventSystemFlags,
327
- nativeEvent: AnyNativeEvent,
327
container: Document | Element | Node,
328
+ nativeEvent: AnyNativeEvent,
329
): null | Container | SuspenseInstance {
330
// TODO: Warn if _enabled is false.
331
@@ -372,7 +372,7 @@ export function attemptToDispatchEvent(
372
373
if (enableDeprecatedFlareAPI) {
374
if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
375
- dispatchEventForPluginEventSystem(
375
+ dispatchEventForLegacyPluginEventSystem(
376
topLevelType,
377
eventSystemFlags,
378
nativeEvent,
@@ -390,7 +390,7 @@ export function attemptToDispatchEvent(
390
);
391
}
392
} else {
393
- dispatchEventForPluginEventSystem(
393
+ dispatchEventForLegacyPluginEventSystem(
394
topLevelType,
395
eventSystemFlags,
396
nativeEvent,
packages/react-dom/src/events/ReactDOMEventReplaying.js
+24
-20
@@ -12,6 +12,7 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
12
import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
13
import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
14
import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
15
+import type {DOMContainer} from '../client/ReactDOM';
16
17
import {
18
enableDeprecatedFlareAPI,
@@ -117,7 +118,7 @@ import {
118
TOP_BLUR,
119
} from './DOMTopLevelEventTypes';
120
import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
120
-import {listenToTopLevelEvent} from './DOMLegacyEventPluginSystem';
121
+import {legacyListenToTopLevelEvent} from './DOMLegacyEventPluginSystem';
122
123
type QueuedReplayableEvent = {|
124
blockedOn: null | Container | SuspenseInstance,
@@ -211,12 +212,12 @@ export function isReplayableDiscreteEvent(
212
return discreteReplayableEvents.indexOf(eventType) > -1;
213
}
214
214
-function trapReplayableEvent(
215
+function trapReplayableEventForDocument(
216
topLevelType: DOMTopLevelEventType,
217
document: Document,
218
listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
219
) {
219
- listenToTopLevelEvent(topLevelType, document, listenerMap);
220
+ legacyListenToTopLevelEvent(topLevelType, document, listenerMap);
221
if (enableDeprecatedFlareAPI) {
222
// Trap events for the responder system.
223
const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);
@@ -236,15 +237,18 @@ function trapReplayableEvent(
237
}
238
}
239
239
-export function eagerlyTrapReplayableEvents(document: Document) {
240
- const listenerMap = getListenerMapForElement(document);
240
+export function eagerlyTrapReplayableEvents(
241
+ container: DOMContainer,
242
+ document: Document,
243
+) {
244
+ const listenerMapForDoc = getListenerMapForElement(document);
245
// Discrete
246
discreteReplayableEvents.forEach(topLevelType => {
243
- trapReplayableEvent(topLevelType, document, listenerMap);
247
+ trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
248
});
249
// Continuous
250
continuousReplayableEvents.forEach(topLevelType => {
247
- trapReplayableEvent(topLevelType, document, listenerMap);
251
+ trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
252
});
253
}
254
@@ -252,8 +256,8 @@ function createQueuedReplayableEvent(
256
blockedOn: null | Container | SuspenseInstance,
257
topLevelType: DOMTopLevelEventType,
258
eventSystemFlags: EventSystemFlags,
255
- nativeEvent: AnyNativeEvent,
259
container: Document | Element | Node,
260
+ nativeEvent: AnyNativeEvent,
261
): QueuedReplayableEvent {
262
return {
263
blockedOn,
@@ -268,15 +272,15 @@ export function queueDiscreteEvent(
272
blockedOn: null | Container | SuspenseInstance,
273
topLevelType: DOMTopLevelEventType,
274
eventSystemFlags: EventSystemFlags,
271
- nativeEvent: AnyNativeEvent,
275
container: Document | Element | Node,
276
+ nativeEvent: AnyNativeEvent,
277
): void {
278
const queuedEvent = createQueuedReplayableEvent(
279
blockedOn,
280
topLevelType,
281
eventSystemFlags,
278
- nativeEvent,
282
container,
283
+ nativeEvent,
284
);
285
queuedDiscreteEvents.push(queuedEvent);
286
if (enableSelectiveHydration) {
@@ -343,8 +347,8 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
347
blockedOn: null | Container | SuspenseInstance,
348
topLevelType: DOMTopLevelEventType,
349
eventSystemFlags: EventSystemFlags,
346
- nativeEvent: AnyNativeEvent,
350
container: Document | Element | Node,
351
+ nativeEvent: AnyNativeEvent,
352
): QueuedReplayableEvent {
353
if (
354
existingQueuedEvent === null ||
@@ -354,8 +358,8 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
358
blockedOn,
359
topLevelType,
360
eventSystemFlags,
357
- nativeEvent,
361
container,
362
+ nativeEvent,
363
);
364
if (blockedOn !== null) {
365
let fiber = getInstanceFromNode(blockedOn);
@@ -378,8 +382,8 @@ export function queueIfContinuousEvent(
382
blockedOn: null | Container | SuspenseInstance,
383
topLevelType: DOMTopLevelEventType,
384
eventSystemFlags: EventSystemFlags,
381
- nativeEvent: AnyNativeEvent,
385
container: Document | Element | Node,
386
+ nativeEvent: AnyNativeEvent,
387
): boolean {
388
// These set relatedTarget to null because the replayed event will be treated as if we
389
// moved from outside the window (no target) onto the target once it hydrates.
@@ -392,8 +396,8 @@ export function queueIfContinuousEvent(
396
blockedOn,
397
topLevelType,
398
eventSystemFlags,
395
- focusEvent,
399
container,
400
+ focusEvent,
401
);
402
return true;
403
}
@@ -404,8 +408,8 @@ export function queueIfContinuousEvent(
408
blockedOn,
409
topLevelType,
410
eventSystemFlags,
407
- dragEvent,
411
container,
412
+ dragEvent,
413
);
414
return true;
415
}
@@ -416,8 +420,8 @@ export function queueIfContinuousEvent(
420
blockedOn,
421
topLevelType,
422
eventSystemFlags,
419
- mouseEvent,
423
container,
424
+ mouseEvent,
425
);
426
return true;
427
}
@@ -431,8 +435,8 @@ export function queueIfContinuousEvent(
435
blockedOn,
436
topLevelType,
437
eventSystemFlags,
434
- pointerEvent,
438
container,
439
+ pointerEvent,
440
),
441
);
442
return true;
@@ -447,8 +451,8 @@ export function queueIfContinuousEvent(
451
blockedOn,
452
topLevelType,
453
eventSystemFlags,
450
- pointerEvent,
454
container,
455
+ pointerEvent,
456
),
457
);
458
return true;
@@ -524,8 +528,8 @@ function attemptReplayContinuousQueuedEvent(
528
let nextBlockedOn = attemptToDispatchEvent(
529
queuedEvent.topLevelType,
530
queuedEvent.eventSystemFlags,
527
- queuedEvent.nativeEvent,
531
queuedEvent.container,
532
+ queuedEvent.nativeEvent,
533
);
534
if (nextBlockedOn !== null) {
535
// We're still blocked. Try again later.
@@ -567,8 +571,8 @@ function replayUnblockedEvents() {
571
let nextBlockedOn = attemptToDispatchEvent(
572
nextDiscreteEvent.topLevelType,
573
nextDiscreteEvent.eventSystemFlags,
570
- nextDiscreteEvent.nativeEvent,
574
nextDiscreteEvent.container,
575
+ nextDiscreteEvent.nativeEvent,
576
);
577
if (nextBlockedOn !== null) {
578
// We're still blocked. Try again later.
packages/react-dom/src/events/SelectEventPlugin.js
+7
-2
@@ -166,11 +166,16 @@ const SelectEventPlugin = {
166
nativeEvent,
167
nativeEventTarget,
168
eventSystemFlags,
169
+ container,
170
) {
170
- const doc = getEventTargetDocument(nativeEventTarget);
171
+ const containerOrDoc =
172
+ container || getEventTargetDocument(nativeEventTarget);
173
// Track whether all listeners exists for this plugin. If none exist, we do
174
// not extract events. See #3639.
173
- if (!doc || !isListeningToAllDependencies('onSelect', doc)) {
175
+ if (
176
+ !containerOrDoc ||
177
+ !isListeningToAllDependencies('onSelect', containerOrDoc)
178
+ ) {
179
return null;
180
}
181