Skip to content

Commit

Permalink
Event Replaying (#16725)
Browse files Browse the repository at this point in the history
* Add Event Replaying Infra

* Wire up Roots and Suspense boundaries, to retry events, after they commit

* Replay discrete events in order in a separate scheduler callback

* Add continuous events

These events only replay their last target if the target is not yet
hydrated. That way we don't have to wait for a previously hovered
boundary before invoking the current target.

* Enable tests from before

These tests were written with replaying in mind and now we can properly
enable them.

* Unify replaying and dispatching

* Mark system flags as a replay and pass to legacy events

That way we can check if this is a replay and therefore needs a special
case. One such special case is "mouseover" where we check the
relatedTarget.

* Eagerly listen to all replayable events

To minimize breakages in a minor, I only do this for the new root APIs
since replaying only matters there anyway. Only if hydrating.

For Flare, I have to attach all active listeners since the current
system has one DOM listener for each. In a follow up I plan on optimizing
that by only attaching one if there's at least one active listener
which would allow us to start with only passive and then upgrade.

* Desperate attempt to save bytese

* Add test for mouseover replaying

We need to check if the "relatedTarget" is mounted due to how the old
event system dispatches from the "out" event.

* Fix for nested boundaries and suspense in root container

This is a follow up to #16673 which didn't have a test because it wasn't
observable yet. This shows that it had a bug.

* Rename RESPONDER_EVENT_SYSTEM to PLUGIN_EVENT_SYSTEM
  • Loading branch information
sebmarkbage authored Sep 23, 2019
1 parent a87d245 commit 0a52770
Show file tree
Hide file tree
Showing 25 changed files with 1,270 additions and 131 deletions.
5 changes: 5 additions & 0 deletions packages/legacy-events/EventPluginHub.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
import type {Fiber} from 'react-reconciler/src/ReactFiber';
import type {AnyNativeEvent} from './PluginModuleType';
import type {TopLevelType} from './TopLevelEventTypes';
import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';

function isInteractive(tag) {
return (
Expand Down Expand Up @@ -131,6 +132,7 @@ export function getListener(inst: Fiber, registrationName: string) {
*/
function extractPluginEvents(
topLevelType: TopLevelType,
eventSystemFlags: EventSystemFlags,
targetInst: null | Fiber,
nativeEvent: AnyNativeEvent,
nativeEventTarget: EventTarget,
Expand All @@ -142,6 +144,7 @@ function extractPluginEvents(
if (possiblePlugin) {
const extractedEvents = possiblePlugin.extractEvents(
topLevelType,
eventSystemFlags,
targetInst,
nativeEvent,
nativeEventTarget,
Expand All @@ -156,12 +159,14 @@ function extractPluginEvents(

export function runExtractedPluginEventsInBatch(
topLevelType: TopLevelType,
eventSystemFlags: EventSystemFlags,
targetInst: null | Fiber,
nativeEvent: AnyNativeEvent,
nativeEventTarget: EventTarget,
) {
const events = extractPluginEvents(
topLevelType,
eventSystemFlags,
targetInst,
nativeEvent,
nativeEventTarget,
Expand Down
1 change: 1 addition & 0 deletions packages/legacy-events/EventSystemFlags.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ export const RESPONDER_EVENT_SYSTEM = 1 << 1;
export const IS_PASSIVE = 1 << 2;
export const IS_ACTIVE = 1 << 3;
export const PASSIVE_NOT_SUPPORTED = 1 << 4;
export const IS_REPLAYED = 1 << 5;
2 changes: 2 additions & 0 deletions packages/legacy-events/PluginModuleType.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type {
ReactSyntheticEvent,
} from './ReactSyntheticEventType';
import type {TopLevelType} from './TopLevelEventTypes';
import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';

export type EventTypes = {[key: string]: DispatchConfig};

Expand All @@ -24,6 +25,7 @@ export type PluginModule<NativeEvent> = {
eventTypes: EventTypes,
extractEvents: (
topLevelType: TopLevelType,
eventSystemFlags: EventSystemFlags,
targetInst: null | Fiber,
nativeTarget: NativeEvent,
nativeEventTarget: EventTarget,
Expand Down
1 change: 1 addition & 0 deletions packages/legacy-events/ResponderEventPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,7 @@ const ResponderEventPlugin = {
*/
extractEvents: function(
topLevelType,
eventSystemFlags,
targetInst,
nativeEvent,
nativeEventTarget,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
'use strict';

const {HostComponent} = require('shared/ReactWorkTags');
const {PLUGIN_EVENT_SYSTEM} = require('legacy-events/EventSystemFlags');

let EventBatching;
let EventPluginUtils;
Expand Down Expand Up @@ -313,6 +314,7 @@ const run = function(config, hierarchyConfig, nativeEventConfig) {
// Trigger the event
const extractedEvents = ResponderEventPlugin.extractEvents(
nativeEventConfig.topLevelType,
PLUGIN_EVENT_SYSTEM,
nativeEventConfig.targetInst,
nativeEventConfig.nativeEvent,
nativeEventConfig.target,
Expand Down
Loading

0 comments on commit 0a52770

Please sign in to comment.