From 3c1dcd349a8e4205322c296b1db8c313ed06b5ce Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 3 Sep 2018 17:21:00 +0100 Subject: [PATCH] Expose less internals for TestUtils (#13539) * Expose less internals for TestUtils * Keep EventPluginHub for www * Reorder to simplify --- .../ResponderEventPlugin-test.internal.js | 5 +- packages/react-dom/src/client/ReactDOM.js | 22 +++++--- packages/react-dom/src/client/ReactDOMFB.js | 2 + .../src/test-utils/ReactTestUtils.js | 56 +++++++++---------- .../ReactDOMUnstableNativeDependencies.js | 15 +++-- 5 files changed, 51 insertions(+), 49 deletions(-) diff --git a/packages/events/__tests__/ResponderEventPlugin-test.internal.js b/packages/events/__tests__/ResponderEventPlugin-test.internal.js index 203fe71997d46..266037f8bf6ba 100644 --- a/packages/events/__tests__/ResponderEventPlugin-test.internal.js +++ b/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 = diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 9d410456109cc..9858bcc559fb7 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/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, + ], }, }; diff --git a/packages/react-dom/src/client/ReactDOMFB.js b/packages/react-dom/src/client/ReactDOMFB.js index f215da5530e52..cfa29d9b1fa31 100644 --- a/packages/react-dom/src/client/ReactDOMFB.js +++ b/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, diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js index d4b3ed8b6189f..edd8403286ce3 100644 --- a/packages/react-dom/src/test-utils/ReactTestUtils.js +++ b/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,8 +407,7 @@ 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; @@ -408,7 +415,7 @@ function makeSimulator(eventType) { // 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,18 +429,18 @@ 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(); }; } @@ -441,7 +448,7 @@ 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(); /** diff --git a/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js b/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js index 63f429b6d0a33..2bc1def74bb27 100644 --- a/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js +++ b/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, );