From b48107ed57cd9fa93fc85fb63b97de68734b7c46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Spie=C3=9F?= Date: Thu, 11 May 2017 02:05:38 +0200 Subject: [PATCH] Remove injectReactDOMEventListener from ReactBrowserEventEmitter (#9656) * Remove injectReactDOMEventListener from ReactBrowserEventEmitter This PR removes the injection of ReactDOMEventListener from ReactBrowserEventEmitter. Instead, the required initialization will happen directly in ReactDOMInjection. This injection was (probably) originally implemented for React Native but never used, so we can clean it up. * Mention how to see the full ouput of fiber tests --- docs/contributing/how-to-contribute.md | 2 +- scripts/rollup/results.json | 100 +++++++++--------- src/renderers/dom/ReactDOM.js | 2 +- src/renderers/dom/fiber/ReactDOMFiber.js | 2 +- .../dom/shared/ReactBrowserEventEmitter.js | 55 +++------- src/renderers/dom/shared/ReactDOMInjection.js | 4 +- src/renderers/dom/test/ReactTestUtils.js | 7 +- 7 files changed, 72 insertions(+), 100 deletions(-) diff --git a/docs/contributing/how-to-contribute.md b/docs/contributing/how-to-contribute.md index 3403ca379e..82591008e2 100644 --- a/docs/contributing/how-to-contribute.md +++ b/docs/contributing/how-to-contribute.md @@ -83,7 +83,7 @@ The core team is monitoring for pull requests. We will review your pull request 5. Make sure your code lints (`npm run lint`). 6. Format your code with [prettier](https://github.com/prettier/prettier) (`npm run prettier`). 7. Run the [Flow](https://flowtype.org/) typechecks (`npm run flow`). -8. If you added or removed any tests, run `./scripts/fiber/record-tests` before submitting the pull request, and commit the resulting changes. +8. If you added or removed any tests, run `./scripts/fiber/record-tests` before submitting the pull request, and commit the resulting changes. You can see the full output of fiber tests with `REACT_DOM_JEST_USE_FIBER=1 npm test`. 9. If you haven't already, complete the CLA. ### Contributor License Agreement (CLA) diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index f2fc8d6c74..a7d6f88cb6 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -9,28 +9,28 @@ "gzip": 5824 }, "react-dom.development.js (UMD_DEV)": { - "size": 591916, - "gzip": 136500 + "size": 592317, + "gzip": 136560 }, "react-dom.production.min.js (UMD_PROD)": { - "size": 122172, - "gzip": 38559 + "size": 121979, + "gzip": 38564 }, "react-dom-server.development.js (UMD_DEV)": { - "size": 499074, - "gzip": 120705 + "size": 498439, + "gzip": 120624 }, "react-dom-server.production.min.js (UMD_PROD)": { - "size": 107593, - "gzip": 33517 + "size": 107169, + "gzip": 33472 }, "react-art.development.js (UMD_DEV)": { - "size": 348302, - "gzip": 77888 + "size": 349177, + "gzip": 77902 }, "react-art.production.min.js (UMD_PROD)": { - "size": 96034, - "gzip": 29269 + "size": 96267, + "gzip": 29310 }, "react.development.js (NODE_DEV)": { "size": 70293, @@ -49,44 +49,44 @@ "gzip": 9216 }, "ReactDOMStack-dev.js (FB_DEV)": { - "size": 494710, - "gzip": 117992 + "size": 494069, + "gzip": 117876 }, "ReactDOMStack-prod.js (FB_PROD)": { - "size": 353169, - "gzip": 84692 + "size": 352489, + "gzip": 84575 }, "react-dom.development.js (NODE_DEV)": { - "size": 549492, - "gzip": 126720 + "size": 549893, + "gzip": 126464 }, "react-dom.production.min.js (NODE_PROD)": { - "size": 118381, - "gzip": 37204 + "size": 118192, + "gzip": 37224 }, "ReactDOMFiber-dev.js (FB_DEV)": { - "size": 550414, - "gzip": 127232 + "size": 550815, + "gzip": 126958 }, "ReactDOMFiber-prod.js (FB_PROD)": { - "size": 410323, - "gzip": 94077 + "size": 410570, + "gzip": 94005 }, "react-dom-server.development.js (NODE_DEV)": { - "size": 447685, - "gzip": 108152 + "size": 447050, + "gzip": 108025 }, "react-dom-server.production.min.js (NODE_PROD)": { - "size": 101966, - "gzip": 31470 + "size": 101542, + "gzip": 31424 }, "ReactDOMServerStack-dev.js (FB_DEV)": { - "size": 446371, - "gzip": 108003 + "size": 445736, + "gzip": 107878 }, "ReactDOMServerStack-prod.js (FB_PROD)": { - "size": 334124, - "gzip": 80394 + "size": 333450, + "gzip": 80260 }, "ReactARTStack-dev.js (FB_DEV)": { "size": 143166, @@ -97,20 +97,20 @@ "gzip": 23039 }, "react-art.development.js (NODE_DEV)": { - "size": 269626, - "gzip": 57755 + "size": 270501, + "gzip": 57767 }, "react-art.production.min.js (NODE_PROD)": { - "size": 57419, - "gzip": 17338 + "size": 57652, + "gzip": 17386 }, "ReactARTFiber-dev.js (FB_DEV)": { - "size": 268884, - "gzip": 57586 + "size": 269759, + "gzip": 57590 }, "ReactARTFiber-prod.js (FB_PROD)": { - "size": 207113, - "gzip": 43453 + "size": 208039, + "gzip": 43486 }, "ReactNativeStack.js (RN)": { "size": 233993, @@ -121,28 +121,28 @@ "gzip": 84001 }, "ReactTestRendererFiber-dev.js (FB_DEV)": { - "size": 266386, - "gzip": 56454 + "size": 267261, + "gzip": 56462 }, "ReactTestRendererStack-dev.js (FB_DEV)": { "size": 151770, "gzip": 34846 }, "react-noop-renderer.development.js (NODE_DEV)": { - "size": 258303, - "gzip": 54417 + "size": 259178, + "gzip": 54431 }, "react-test-renderer.development.js (NODE_DEV)": { - "size": 267137, - "gzip": 56637 + "size": 268012, + "gzip": 56651 }, "react-dom-test-utils.development.js (NODE_DEV)": { - "size": 52820, - "gzip": 13580 + "size": 52792, + "gzip": 13569 }, "ReactTestUtils-dev.js (FB_DEV)": { - "size": 52753, - "gzip": 13576 + "size": 52725, + "gzip": 13564 }, "react-test-renderer-stack.development.js (NODE_DEV)": { "size": 152686, diff --git a/src/renderers/dom/ReactDOM.js b/src/renderers/dom/ReactDOM.js index be14ffb1a8..a6cdc8b5ab 100644 --- a/src/renderers/dom/ReactDOM.js +++ b/src/renderers/dom/ReactDOM.js @@ -48,7 +48,7 @@ var ReactDOM = { EventPropagators: require('EventPropagators'), ReactControlledComponent: require('ReactControlledComponent'), ReactDOMComponentTree, - ReactBrowserEventEmitter: require('ReactBrowserEventEmitter'), + ReactDOMEventListener: require('ReactDOMEventListener'), ReactUpdates: ReactUpdates, }, }; diff --git a/src/renderers/dom/fiber/ReactDOMFiber.js b/src/renderers/dom/fiber/ReactDOMFiber.js index f142d0554f..f7856a4b13 100644 --- a/src/renderers/dom/fiber/ReactDOMFiber.js +++ b/src/renderers/dom/fiber/ReactDOMFiber.js @@ -554,7 +554,7 @@ var ReactDOM = { EventPropagators: require('EventPropagators'), ReactControlledComponent, ReactDOMComponentTree, - ReactBrowserEventEmitter, + ReactDOMEventListener: require('ReactDOMEventListener'), }, }; diff --git a/src/renderers/dom/shared/ReactBrowserEventEmitter.js b/src/renderers/dom/shared/ReactBrowserEventEmitter.js index 060584cdd2..1c2661b57f 100644 --- a/src/renderers/dom/shared/ReactBrowserEventEmitter.js +++ b/src/renderers/dom/shared/ReactBrowserEventEmitter.js @@ -12,6 +12,7 @@ 'use strict'; var EventPluginRegistry = require('EventPluginRegistry'); +var ReactDOMEventListener = require('ReactDOMEventListener'); var ReactEventEmitterMixin = require('ReactEventEmitterMixin'); var isEventSupported = require('isEventSupported'); @@ -92,31 +93,14 @@ function getListeningForDocument(mountAt) { } var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { - /** - * Injectable event backend - */ - ReactDOMEventListener: null, - - injection: { - /** - * @param {object} ReactDOMEventListener - */ - injectReactDOMEventListener: function(ReactDOMEventListener) { - ReactDOMEventListener.setHandleTopLevel( - ReactBrowserEventEmitter.handleTopLevel, - ); - ReactBrowserEventEmitter.ReactDOMEventListener = ReactDOMEventListener; - }, - }, - /** * Sets whether or not any created callbacks should be enabled. * * @param {boolean} enabled True if callbacks should be enabled. */ setEnabled: function(enabled) { - if (ReactBrowserEventEmitter.ReactDOMEventListener) { - ReactBrowserEventEmitter.ReactDOMEventListener.setEnabled(enabled); + if (ReactDOMEventListener) { + ReactDOMEventListener.setEnabled(enabled); } }, @@ -124,8 +108,7 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { * @return {boolean} True if callbacks are enabled. */ isEnabled: function() { - return !!(ReactBrowserEventEmitter.ReactDOMEventListener && - ReactBrowserEventEmitter.ReactDOMEventListener.isEnabled()); + return !!(ReactDOMEventListener && ReactDOMEventListener.isEnabled()); }, /** @@ -162,13 +145,13 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { ) { if (dependency === 'topWheel') { if (isEventSupported('wheel')) { - ReactBrowserEventEmitter.ReactDOMEventListener.trapBubbledEvent( + ReactDOMEventListener.trapBubbledEvent( 'topWheel', 'wheel', mountAt, ); } else if (isEventSupported('mousewheel')) { - ReactBrowserEventEmitter.ReactDOMEventListener.trapBubbledEvent( + ReactDOMEventListener.trapBubbledEvent( 'topWheel', 'mousewheel', mountAt, @@ -176,36 +159,28 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { } else { // Firefox needs to capture a different mouse scroll event. // @see http://www.quirksmode.org/dom/events/tests/scroll.html - ReactBrowserEventEmitter.ReactDOMEventListener.trapBubbledEvent( + ReactDOMEventListener.trapBubbledEvent( 'topWheel', 'DOMMouseScroll', mountAt, ); } } else if (dependency === 'topScroll') { - ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( + ReactDOMEventListener.trapCapturedEvent( 'topScroll', 'scroll', mountAt, ); } else if (dependency === 'topFocus' || dependency === 'topBlur') { - ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( - 'topFocus', - 'focus', - mountAt, - ); - ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( - 'topBlur', - 'blur', - mountAt, - ); + ReactDOMEventListener.trapCapturedEvent('topFocus', 'focus', mountAt); + ReactDOMEventListener.trapCapturedEvent('topBlur', 'blur', mountAt); // to make sure blur and focus event listeners are only attached once isListening.topBlur = true; isListening.topFocus = true; } else if (dependency === 'topCancel') { if (isEventSupported('cancel', true)) { - ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( + ReactDOMEventListener.trapCapturedEvent( 'topCancel', 'cancel', mountAt, @@ -214,7 +189,7 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { isListening.topCancel = true; } else if (dependency === 'topClose') { if (isEventSupported('close', true)) { - ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( + ReactDOMEventListener.trapCapturedEvent( 'topClose', 'close', mountAt, @@ -222,7 +197,7 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { } isListening.topClose = true; } else if (topLevelTypes.hasOwnProperty(dependency)) { - ReactBrowserEventEmitter.ReactDOMEventListener.trapBubbledEvent( + ReactDOMEventListener.trapBubbledEvent( dependency, topLevelTypes[dependency], mountAt, @@ -250,7 +225,7 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { }, trapBubbledEvent: function(topLevelType, handlerBaseName, handle) { - return ReactBrowserEventEmitter.ReactDOMEventListener.trapBubbledEvent( + return ReactDOMEventListener.trapBubbledEvent( topLevelType, handlerBaseName, handle, @@ -258,7 +233,7 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, { }, trapCapturedEvent: function(topLevelType, handlerBaseName, handle) { - return ReactBrowserEventEmitter.ReactDOMEventListener.trapCapturedEvent( + return ReactDOMEventListener.trapCapturedEvent( topLevelType, handlerBaseName, handle, diff --git a/src/renderers/dom/shared/ReactDOMInjection.js b/src/renderers/dom/shared/ReactDOMInjection.js index e3cad3e1b7..a66582de4d 100644 --- a/src/renderers/dom/shared/ReactDOMInjection.js +++ b/src/renderers/dom/shared/ReactDOMInjection.js @@ -38,8 +38,8 @@ function inject() { } alreadyInjected = true; - ReactBrowserEventEmitter.injection.injectReactDOMEventListener( - ReactDOMEventListener, + ReactDOMEventListener.setHandleTopLevel( + ReactBrowserEventEmitter.handleTopLevel, ); /** diff --git a/src/renderers/dom/test/ReactTestUtils.js b/src/renderers/dom/test/ReactTestUtils.js index 9437d6b91c..787dceec6c 100644 --- a/src/renderers/dom/test/ReactTestUtils.js +++ b/src/renderers/dom/test/ReactTestUtils.js @@ -28,9 +28,9 @@ var { EventPluginHub, EventPluginRegistry, EventPropagators, - ReactBrowserEventEmitter, ReactControlledComponent, ReactDOMComponentTree, + ReactDOMEventListener, } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; var topLevelTypes = BrowserEventConstants.topLevelTypes; @@ -395,10 +395,7 @@ var ReactTestUtils = { */ simulateNativeEventOnNode: function(topLevelType, node, fakeNativeEvent) { fakeNativeEvent.target = node; - ReactBrowserEventEmitter.ReactDOMEventListener.dispatchEvent( - topLevelType, - fakeNativeEvent, - ); + ReactDOMEventListener.dispatchEvent(topLevelType, fakeNativeEvent); }, /**