Move eventSystemFlags to last argument in event plugin extractors (#16978)

Fix for necolas/react-native-web#1443

packages/legacy-events/EventPluginHub.js

@@ -132,10 +132,10 @@ export function getListener(inst: Fiber, registrationName: string) {
  */
 function extractPluginEvents(
   topLevelType: TopLevelType,
-  eventSystemFlags: EventSystemFlags,
   targetInst: null | Fiber,
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: EventTarget,
+  eventSystemFlags: EventSystemFlags,
 ): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
   let events = null;
   for (let i = 0; i < plugins.length; i++) {
@@ -144,10 +144,10 @@ function extractPluginEvents(
     if (possiblePlugin) {
       const extractedEvents = possiblePlugin.extractEvents(
         topLevelType,
-        eventSystemFlags,
         targetInst,
         nativeEvent,
         nativeEventTarget,
+        eventSystemFlags,
       );
       if (extractedEvents) {
         events = accumulateInto(events, extractedEvents);
@@ -159,17 +159,17 @@ function extractPluginEvents(
 
 export function runExtractedPluginEventsInBatch(
   topLevelType: TopLevelType,
-  eventSystemFlags: EventSystemFlags,
   targetInst: null | Fiber,
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: EventTarget,
+  eventSystemFlags: EventSystemFlags,
 ) {
   const events = extractPluginEvents(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   );
   runEventsInBatch(events);
 }

packages/legacy-events/PluginModuleType.js

@@ -25,10 +25,10 @@ export type PluginModule<NativeEvent> = {
   eventTypes: EventTypes,
   extractEvents: (
     topLevelType: TopLevelType,
-    eventSystemFlags: EventSystemFlags,
     targetInst: null | Fiber,
     nativeTarget: NativeEvent,
     nativeEventTarget: EventTarget,
+    eventSystemFlags: EventSystemFlags,
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
 };

packages/legacy-events/ResponderEventPlugin.js

@@ -504,10 +504,10 @@ const ResponderEventPlugin = {
    */
   extractEvents: function(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     if (isStartish(topLevelType)) {
       trackedTouchCount += 1;

packages/legacy-events/__tests__/ResponderEventPlugin-test.internal.js

@@ -314,10 +314,10 @@ const run = function(config, hierarchyConfig, nativeEventConfig) {
   // Trigger the event
   const extractedEvents = ResponderEventPlugin.extractEvents(
     nativeEventConfig.topLevelType,
-    PLUGIN_EVENT_SYSTEM,
     nativeEventConfig.targetInst,
     nativeEventConfig.nativeEvent,
     nativeEventConfig.target,
+    PLUGIN_EVENT_SYSTEM,
   );
 
   // At this point the negotiation events have been dispatched as part of the

packages/react-devtools-shell/src/app/ReactNativeWeb/index.js

@@ -11,7 +11,7 @@ import React, {Fragment, useState} from 'react';
 import {Button, Text, View} from 'react-native-web';
 
 export default function ReactNativeWeb() {
-  const [backgroundColor, setBackgroundColor] = useState('blue');
+  const [backgroundColor, setBackgroundColor] = useState('purple');
   const toggleColor = () =>
     setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
   return (
@@ -29,8 +29,8 @@ export default function ReactNativeWeb() {
           left
         </Text>
         <Button
+          color={backgroundColor}
           onPress={toggleColor}
-          style={{backgroundColor}}
           title={`Switch background color to "${
             backgroundColor === 'purple' ? 'green' : 'purple'
           }"`}

packages/react-dom/src/events/BeforeInputEventPlugin.js

@@ -464,10 +464,10 @@ const BeforeInputEventPlugin = {
 
   extractEvents: function(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const composition = extractCompositionEvent(
       topLevelType,

packages/react-dom/src/events/ChangeEventPlugin.js

@@ -262,10 +262,10 @@ const ChangeEventPlugin = {
 
   extractEvents: function(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
 

packages/react-dom/src/events/EnterLeaveEventPlugin.js

@@ -54,10 +54,10 @@ const EnterLeaveEventPlugin = {
    */
   extractEvents: function(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const isOverEvent =
       topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -178,10 +178,10 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
 
     runExtractedPluginEventsInBatch(
       topLevelType,
-      bookKeeping.eventSystemFlags,
       targetInst,
       nativeEvent,
       eventTarget,
+      bookKeeping.eventSystemFlags,
     );
   }
 }

packages/react-dom/src/events/SelectEventPlugin.js

@@ -162,10 +162,10 @@ const SelectEventPlugin = {
 
   extractEvents: function(
     topLevelType,
-    eventSystemFlags,
     targetInst,
     nativeEvent,
     nativeEventTarget,
+    eventSystemFlags,
   ) {
     const doc = getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do

packages/react-dom/src/events/SimpleEventPlugin.js

@@ -248,10 +248,10 @@ const SimpleEventPlugin: PluginModule<MouseEvent> & {
 
   extractEvents: function(
     topLevelType: TopLevelType,
-    eventSystemFlags: EventSystemFlags,
     targetInst: null | Fiber,
     nativeEvent: MouseEvent,
     nativeEventTarget: EventTarget,
+    eventSystemFlags: EventSystemFlags,
   ): null | ReactSyntheticEvent {
     const dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
     if (!dispatchConfig) {

packages/react-native-renderer/src/ReactFabricEventEmitter.js

@@ -42,10 +42,10 @@ export function dispatchEvent(
     // Heritage plugin event system
     runExtractedPluginEventsInBatch(
       topLevelType,
-      PLUGIN_EVENT_SYSTEM,
       targetFiber,
       nativeEvent,
       nativeEvent.target,
+      PLUGIN_EVENT_SYSTEM,
     );
   });
   // React Native doesn't use ReactControlledComponent but if it did, here's

packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js

@@ -33,10 +33,10 @@ const ReactNativeBridgeEventPlugin = {
    */
   extractEvents: function(
     topLevelType: TopLevelType,
-    eventSystemFlags: EventSystemFlags,
     targetInst: null | Object,
     nativeEvent: AnyNativeEvent,
     nativeEventTarget: Object,
+    eventSystemFlags: EventSystemFlags,
   ): ?Object {
     if (targetInst == null) {
       // Probably a node belonging to another renderer's tree.

packages/react-native-renderer/src/ReactNativeEventEmitter.js

@@ -101,10 +101,10 @@ function _receiveRootNodeIDEvent(
   batchedUpdates(function() {
     runExtractedPluginEventsInBatch(
       topLevelType,
-      PLUGIN_EVENT_SYSTEM,
       inst,
       nativeEvent,
       nativeEvent.target,
+      PLUGIN_EVENT_SYSTEM,
     );
   });
   // React Native doesn't use ReactControlledComponent but if it did, here's