Expose less internals for TestUtils (#13539)

* Expose less internals for TestUtils

* Keep EventPluginHub for www

* Reorder to simplify

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

@@ -393,11 +393,8 @@ describe('ResponderEventPlugin', () => {
  beforeEach(() => {
  jest.resetModules();
 
- const ReactDOM = require('react-dom');
  const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies');
- EventPluginHub =
- ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
- .EventPluginHub;
+ EventPluginHub = require('events/EventPluginHub');
  const injectComponentTree =
  ReactDOMUnstableNativeDependencies.injectComponentTree;
  ResponderEventPlugin =

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

@@ -739,14 +739,20 @@ const ReactDOM: Object = {
  unstable_flushControlled: DOMRenderer.flushControlled,
 
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
- // For TapEventPlugin which is popular in open source
- EventPluginHub,
- // Used by test-utils
- EventPluginRegistry,
- EventPropagators,
- ReactControlledComponent,
- ReactDOMComponentTree,
- ReactDOMEventListener,
+ // Keep in sync with ReactDOMUnstableNativeDependencies.js
+ // and ReactTestUtils.js. This is an array for better minification.
+ Events: [
+ ReactDOMComponentTree.getInstanceFromNode,
+ ReactDOMComponentTree.getNodeFromInstance,
+ ReactDOMComponentTree.getFiberCurrentPropsFromNode,
+ EventPluginRegistry.eventNameDispatchConfigs,
+ EventPropagators.accumulateTwoPhaseDispatches,
+ EventPropagators.accumulateDirectDispatches,
+ ReactControlledComponent.enqueueStateRestore,
+ ReactControlledComponent.restoreStateIfNeeded,
+ ReactDOMEventListener.dispatchEvent,
+ EventPluginHub.runEventsInBatch,
+ ],
  },
 };
 

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

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import * as EventPluginHub from 'events/EventPluginHub';
 import * as ReactFiberTreeReflection from 'react-reconciler/reflection';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import {addUserTimingListener} from 'shared/ReactFeatureFlags';
@@ -25,6 +26,7 @@ Object.assign(
  ReactDOMComponentTree,
  ReactInstanceMap,
  // Used by www msite:
+ EventPluginHub,
  TapEventPlugin,
  // Perf experiment
  addUserTimingListener,

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -24,14 +24,22 @@ import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import * as DOMTopLevelEventTypes from '../events/DOMTopLevelEventTypes';
 
 const {findDOMNode} = ReactDOM;
-const {
- EventPluginHub,
- EventPluginRegistry,
- EventPropagators,
- ReactControlledComponent,
- ReactDOMComponentTree,
- ReactDOMEventListener,
-} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+// Keep in sync with ReactDOMUnstableNativeDependencies.js
+// and ReactDOM.js:
+const [
+ getInstanceFromNode,
+ /* eslint-disable no-unused-vars */
+ getNodeFromInstance,
+ getFiberCurrentPropsFromNode,
+ /* eslint-enable no-unused-vars */
+ eventNameDispatchConfigs,
+ accumulateTwoPhaseDispatches,
+ accumulateDirectDispatches,
+ enqueueStateRestore,
+ restoreStateIfNeeded,
+ dispatchEvent,
+ runEventsInBatch,
+] = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
 
 function Event(suffix) {}
 
@@ -50,7 +58,7 @@ let hasWarnedAboutDeprecatedMockComponent = false;
  */
 function simulateNativeEventOnNode(topLevelType, node, fakeNativeEvent) {
  fakeNativeEvent.target = node;
- ReactDOMEventListener.dispatchEvent(topLevelType, fakeNativeEvent);
+ dispatchEvent(topLevelType, fakeNativeEvent);
 }
 
 /**
@@ -399,16 +407,15 @@ function makeSimulator(eventType) {
  'a component instance. Pass the DOM node you wish to simulate the event on instead.',
  );
 
- const dispatchConfig =
- EventPluginRegistry.eventNameDispatchConfigs[eventType];
+ const dispatchConfig = eventNameDispatchConfigs[eventType];
 
  const fakeNativeEvent = new Event();
  fakeNativeEvent.target = domNode;
  fakeNativeEvent.type = eventType.toLowerCase();
 
  // We don't use SyntheticEvent.getPooled in order to not have to worry about
  // properly destroying any properties assigned from `eventData` upon release
- const targetInst = ReactDOMComponentTree.getInstanceFromNode(domNode);
+ const targetInst = getInstanceFromNode(domNode);
  const event = new SyntheticEvent(
  dispatchConfig,
  targetInst,
@@ -422,26 +429,26 @@ function makeSimulator(eventType) {
  Object.assign(event, eventData);
 
  if (dispatchConfig.phasedRegistrationNames) {
- EventPropagators.accumulateTwoPhaseDispatches(event);
+ accumulateTwoPhaseDispatches(event);
  } else {
- EventPropagators.accumulateDirectDispatches(event);
+ accumulateDirectDispatches(event);
  }
 
  ReactDOM.unstable_batchedUpdates(function() {
  // Normally extractEvent enqueues a state restore, but we'll just always
  // do that since we we're by-passing it here.
- ReactControlledComponent.enqueueStateRestore(domNode);
- EventPluginHub.runEventsInBatch(event, true);
+ enqueueStateRestore(domNode);
+ runEventsInBatch(event, true);
  });
- ReactControlledComponent.restoreStateIfNeeded();
+ restoreStateIfNeeded();
  };
 }
 
 function buildSimulators() {
  ReactTestUtils.Simulate = {};
 
  let eventType;
- for (eventType in EventPluginRegistry.eventNameDispatchConfigs) {
+ for (eventType in eventNameDispatchConfigs) {
  /**
  * @param {!Element|ReactDOMComponent} domComponentOrNode
  * @param {?object} eventData Fake event data to use in SyntheticEvent.
@@ -450,19 +457,6 @@ function buildSimulators() {
  }
 }
 
-// Rebuild ReactTestUtils.Simulate whenever event plugins are injected
-const oldInjectEventPluginOrder =
- EventPluginHub.injection.injectEventPluginOrder;
-EventPluginHub.injection.injectEventPluginOrder = function() {
- oldInjectEventPluginOrder.apply(this, arguments);
- buildSimulators();
-};
-const oldInjectEventPlugins = EventPluginHub.injection.injectEventPluginsByName;
-EventPluginHub.injection.injectEventPluginsByName = function() {
- oldInjectEventPlugins.apply(this, arguments);
- buildSimulators();
-};
-
 buildSimulators();
 
 /**

packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js

@@ -22,11 +22,14 @@ export function injectComponentTree(ComponentTree) {
 export {ResponderEventPlugin, ResponderTouchHistoryStore};
 
 // Inject react-dom's ComponentTree into this module.
-const {
- ReactDOMComponentTree,
-} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+// Keep in sync with ReactDOM.js and ReactTestUtils.js:
+const [
+ getInstanceFromNode,
+ getNodeFromInstance,
+ getFiberCurrentPropsFromNode,
+] = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
 EventPluginUtils.setComponentTree(
- ReactDOMComponentTree.getFiberCurrentPropsFromNode,
- ReactDOMComponentTree.getInstanceFromNode,
- ReactDOMComponentTree.getNodeFromInstance,
+ getFiberCurrentPropsFromNode,
+ getInstanceFromNode,
+ getNodeFromInstance,
 );