Refactor DOM plugin system to single module

Author: trueadm

packages/legacy-events/EventPluginHub.js

@@ -193,7 +193,6 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);
  *
  * @param {array} InjectedEventPluginOrder
  * @internal
- * @see {EventPluginHub.injection.injectEventPluginOrder}
  */
 export function injectEventPluginOrder(
   injectedEventPluginOrder: EventPluginOrder,
@@ -209,14 +208,13 @@ export function injectEventPluginOrder(
 }
 
 /**
- * Injects plugins to be used by `EventPluginHub`. The plugin names must be
+ * Injects plugins to be used by plugin event system. The plugin names must be
  * in the ordering injected by `injectEventPluginOrder`.
  *
  * Plugins can be injected as part of page initialization or on-the-fly.
  *
  * @param {object} injectedNamesToPlugins Map from names to plugin modules.
  * @internal
- * @see {EventPluginHub.injection.injectEventPluginsByName}
  */
 export function injectEventPluginsByName(
   injectedNamesToPlugins: NamesToPlugins,

packages/legacy-events/EventPluginRegistry.js

@@ -11,7 +11,7 @@ import {
   traverseEnterLeave,
 } from 'shared/ReactTreeTraversal';
 
-import {getListener} from './EventPluginHub';
+import getListener from 'legacy-events/getListener';
 import accumulateInto from './accumulateInto';
 import forEachAccumulated from './forEachAccumulated';
 

packages/legacy-events/EventPropagators.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @flow
+ */
+
+import type {Fiber} from 'react-reconciler/src/ReactFiber';
+
+import invariant from 'shared/invariant';
+
+import {getFiberCurrentPropsFromNode} from './EventPluginUtils';
+
+function isInteractive(tag) {
+  return (
+    tag === 'button' ||
+    tag === 'input' ||
+    tag === 'select' ||
+    tag === 'textarea'
+  );
+}
+
+function shouldPreventMouseEvent(name, type, props) {
+  switch (name) {
+    case 'onClick':
+    case 'onClickCapture':
+    case 'onDoubleClick':
+    case 'onDoubleClickCapture':
+    case 'onMouseDown':
+    case 'onMouseDownCapture':
+    case 'onMouseMove':
+    case 'onMouseMoveCapture':
+    case 'onMouseUp':
+    case 'onMouseUpCapture':
+    case 'onMouseEnter':
+      return !!(props.disabled && isInteractive(type));
+    default:
+      return false;
+  }
+}
+
+/**
+ * @param {object} inst The instance, which is the source of events.
+ * @param {string} registrationName Name of listener (e.g. `onClick`).
+ * @return {?function} The stored callback.
+ */
+export default function getListener(inst: Fiber, registrationName: string) {
+  let listener;
+
+  // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
+  // live here; needs to be moved to a better place soon
+  const stateNode = inst.stateNode;
+  if (!stateNode) {
+    // Work in progress (ex: onload events in incremental mode).
+    return null;
+  }
+  const props = getFiberCurrentPropsFromNode(stateNode);
+  if (!props) {
+    // Work in progress.
+    return null;
+  }
+  listener = props[registrationName];
+  if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
+    return null;
+  }
+  invariant(
+    !listener || typeof listener === 'function',
+    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
+    registrationName,
+    typeof listener,
+  );
+  return listener;
+}

packages/legacy-events/getListener.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-let EventPluginHub;
+let EventPluginGetListener;
 let EventPluginRegistry;
 let React;
 let ReactDOM;
@@ -58,7 +58,7 @@ describe('ReactBrowserEventEmitter', () => {
     LISTENER.mockClear();
 
     // TODO: can we express this test with only public API?
-    EventPluginHub = require('legacy-events/EventPluginHub');
+    EventPluginGetListener = require('legacy-events/getListener').default;
     EventPluginRegistry = require('legacy-events/EventPluginRegistry');
     React = require('react');
     ReactDOM = require('react-dom');
@@ -100,7 +100,7 @@ describe('ReactBrowserEventEmitter', () => {
 
     getListener = function(node, eventName) {
       const inst = ReactDOMComponentTree.getInstanceFromNode(node);
-      return EventPluginHub.getListener(inst, eventName);
+      return EventPluginGetListener(inst, eventName);
     };
     putListener = function(node, eventName, listener) {
       switch (node) {

packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js

@@ -45,9 +45,11 @@ import {
   enqueueStateRestore,
   restoreStateIfNeeded,
 } from 'legacy-events/ReactControlledComponent';
-import {injection as EventPluginHubInjection} from 'legacy-events/EventPluginHub';
 import {runEventsInBatch} from 'legacy-events/EventBatching';
-import {eventNameDispatchConfigs} from 'legacy-events/EventPluginRegistry';
+import {
+  eventNameDispatchConfigs,
+  injectEventPluginsByName,
+} from 'legacy-events/EventPluginRegistry';
 import {
   accumulateTwoPhaseDispatches,
   accumulateDirectDispatches,
@@ -150,7 +152,7 @@ const ReactDOM: Object = {
       getInstanceFromNode,
       getNodeFromInstance,
       getFiberCurrentPropsFromNode,
-      EventPluginHubInjection.injectEventPluginsByName,
+      injectEventPluginsByName,
       eventNameDispatchConfigs,
       accumulateTwoPhaseDispatches,
       accumulateDirectDispatches,

packages/react-dom/src/client/ReactDOM.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {injection as EventPluginHubInjection} from 'legacy-events/EventPluginHub';
 import {setComponentTree} from 'legacy-events/EventPluginUtils';
 
 import {
@@ -15,15 +14,35 @@ import {
 } from './ReactDOMComponentTree';
 import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin';
 import ChangeEventPlugin from '../events/ChangeEventPlugin';
-import DOMEventPluginOrder from '../events/DOMEventPluginOrder';
 import EnterLeaveEventPlugin from '../events/EnterLeaveEventPlugin';
 import SelectEventPlugin from '../events/SelectEventPlugin';
 import SimpleEventPlugin from '../events/SimpleEventPlugin';
+import {
+  injectEventPluginOrder,
+  injectEventPluginsByName,
+} from 'legacy-events/EventPluginRegistry';
+
+/**
+ * Specifies a deterministic ordering of `EventPlugin`s. A convenient way to
+ * reason about plugins, without having to package every one of them. This
+ * is better than having plugins be ordered in the same order that they
+ * are injected because that ordering would be influenced by the packaging order.
+ * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
+ * preventing default on events is convenient in `SimpleEventPlugin` handlers.
+ */
+const DOMEventPluginOrder = [
+  'ResponderEventPlugin',
+  'SimpleEventPlugin',
+  'EnterLeaveEventPlugin',
+  'ChangeEventPlugin',
+  'SelectEventPlugin',
+  'BeforeInputEventPlugin',
+];
 
 /**
  * Inject modules for resolving DOM hierarchy and plugin ordering.
  */
-EventPluginHubInjection.injectEventPluginOrder(DOMEventPluginOrder);
+injectEventPluginOrder(DOMEventPluginOrder);
 setComponentTree(
   getFiberCurrentPropsFromNode,
   getInstanceFromNode,
@@ -34,7 +53,7 @@ setComponentTree(
  * Some important event plugins included by default (without having to require
  * them).
  */
-EventPluginHubInjection.injectEventPluginsByName({
+injectEventPluginsByName({
   SimpleEventPlugin: SimpleEventPlugin,
   EnterLeaveEventPlugin: EnterLeaveEventPlugin,
   ChangeEventPlugin: ChangeEventPlugin,