diff --git a/src/renderers/dom/ReactDOM.js b/src/renderers/dom/ReactDOM.js index ff39dc5aa4..ac5ce44168 100644 --- a/src/renderers/dom/ReactDOM.js +++ b/src/renderers/dom/ReactDOM.js @@ -14,7 +14,8 @@ 'use strict'; var ReactDOMComponentTree = require('ReactDOMComponentTree'); -var ReactDefaultInjection = require('ReactDefaultInjection'); +var ReactDOMInjection = require('ReactDOMInjection'); +var ReactDOMStackInjection = require('ReactDOMStackInjection'); var ReactMount = require('ReactMount'); var ReactReconciler = require('ReactReconciler'); var ReactUpdates = require('ReactUpdates'); @@ -25,7 +26,8 @@ var getHostComponentFromComposite = require('getHostComponentFromComposite'); var renderSubtreeIntoContainer = require('renderSubtreeIntoContainer'); var warning = require('warning'); -ReactDefaultInjection.inject(); +ReactDOMInjection.inject(); +ReactDOMStackInjection.inject(); var ReactDOM = { findDOMNode: findDOMNode, diff --git a/src/renderers/dom/ReactDOMServer.js b/src/renderers/dom/ReactDOMServer.js index 35337083e7..1ab1687096 100644 --- a/src/renderers/dom/ReactDOMServer.js +++ b/src/renderers/dom/ReactDOMServer.js @@ -11,11 +11,13 @@ 'use strict'; -var ReactDefaultInjection = require('ReactDefaultInjection'); +var ReactDOMInjection = require('ReactDOMInjection'); +var ReactDOMStackInjection = require('ReactDOMStackInjection'); var ReactServerRendering = require('ReactServerRendering'); var ReactVersion = require('ReactVersion'); -ReactDefaultInjection.inject(); +ReactDOMInjection.inject(); +ReactDOMStackInjection.inject(); var ReactDOMServer = { renderToString: ReactServerRendering.renderToString, diff --git a/src/renderers/dom/shared/ReactDefaultInjection.js b/src/renderers/dom/shared/ReactDOMInjection.js similarity index 67% rename from src/renderers/dom/shared/ReactDefaultInjection.js rename to src/renderers/dom/shared/ReactDOMInjection.js index 1c385b1af6..5e21e281b8 100644 --- a/src/renderers/dom/shared/ReactDefaultInjection.js +++ b/src/renderers/dom/shared/ReactDOMInjection.js @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * - * @providesModule ReactDefaultInjection + * @providesModule ReactDOMInjection */ 'use strict'; @@ -21,20 +21,9 @@ var EventPluginHub = require('EventPluginHub'); var EventPluginUtils = require('EventPluginUtils'); var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig'); var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter'); -var ReactComponentEnvironment = require('ReactComponentEnvironment'); -var ReactComponentBrowserEnvironment = - require('ReactComponentBrowserEnvironment'); -var ReactDOMComponent = require('ReactDOMComponent'); var ReactDOMComponentTree = require('ReactDOMComponentTree'); -var ReactDOMEmptyComponent = require('ReactDOMEmptyComponent'); var ReactDOMTreeTraversal = require('ReactDOMTreeTraversal'); -var ReactDOMTextComponent = require('ReactDOMTextComponent'); -var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy'); -var ReactEmptyComponent = require('ReactEmptyComponent'); var ReactEventListener = require('ReactEventListener'); -var ReactHostComponent = require('ReactHostComponent'); -var ReactReconcileTransaction = require('ReactReconcileTransaction'); -var ReactUpdates = require('ReactUpdates'); var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig'); var SelectEventPlugin = require('SelectEventPlugin'); var SimpleEventPlugin = require('SimpleEventPlugin'); @@ -73,32 +62,9 @@ function inject() { BeforeInputEventPlugin: BeforeInputEventPlugin, }); - ReactHostComponent.injection.injectGenericComponentClass( - ReactDOMComponent - ); - - ReactHostComponent.injection.injectTextComponentClass( - ReactDOMTextComponent - ); - DOMProperty.injection.injectDOMPropertyConfig(ARIADOMPropertyConfig); DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig); DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig); - - ReactEmptyComponent.injection.injectEmptyComponentFactory( - function(instantiate) { - return new ReactDOMEmptyComponent(instantiate); - } - ); - - ReactUpdates.injection.injectReconcileTransaction( - ReactReconcileTransaction - ); - ReactUpdates.injection.injectBatchingStrategy( - ReactDefaultBatchingStrategy - ); - - ReactComponentEnvironment.injection.injectEnvironment(ReactComponentBrowserEnvironment); } module.exports = { diff --git a/src/renderers/dom/shared/ReactDOMStackInjection.js b/src/renderers/dom/shared/ReactDOMStackInjection.js new file mode 100644 index 0000000000..7da0618673 --- /dev/null +++ b/src/renderers/dom/shared/ReactDOMStackInjection.js @@ -0,0 +1,63 @@ +/** + * Copyright 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ReactDOMStackInjection + */ + +'use strict'; + +var ReactComponentEnvironment = require('ReactComponentEnvironment'); +var ReactComponentBrowserEnvironment = + require('ReactComponentBrowserEnvironment'); +var ReactDOMComponent = require('ReactDOMComponent'); +var ReactDOMEmptyComponent = require('ReactDOMEmptyComponent'); +var ReactDOMTextComponent = require('ReactDOMTextComponent'); +var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy'); +var ReactEmptyComponent = require('ReactEmptyComponent'); +var ReactHostComponent = require('ReactHostComponent'); +var ReactReconcileTransaction = require('ReactReconcileTransaction'); +var ReactUpdates = require('ReactUpdates'); + +var alreadyInjected = false; + +function inject() { + if (alreadyInjected) { + // TODO: This is currently true because these injections are shared between + // the client and the server package. They should be built independently + // and not share any injection state. Then this problem will be solved. + return; + } + alreadyInjected = true; + + ReactHostComponent.injection.injectGenericComponentClass( + ReactDOMComponent + ); + + ReactHostComponent.injection.injectTextComponentClass( + ReactDOMTextComponent + ); + + ReactEmptyComponent.injection.injectEmptyComponentFactory( + function(instantiate) { + return new ReactDOMEmptyComponent(instantiate); + } + ); + + ReactUpdates.injection.injectReconcileTransaction( + ReactReconcileTransaction + ); + ReactUpdates.injection.injectBatchingStrategy( + ReactDefaultBatchingStrategy + ); + + ReactComponentEnvironment.injection.injectEnvironment(ReactComponentBrowserEnvironment); +} + +module.exports = { + inject: inject, +}; diff --git a/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js index 972ef0b71b..7ece100249 100644 --- a/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js +++ b/src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js @@ -18,8 +18,8 @@ describe('DOMPropertyOperations', () => { beforeEach(() => { jest.resetModuleRegistry(); - var ReactDefaultInjection = require('ReactDefaultInjection'); - ReactDefaultInjection.inject(); + var ReactDOMInjection = require('ReactDOMInjection'); + ReactDOMInjection.inject(); DOMPropertyOperations = require('DOMPropertyOperations'); DOMProperty = require('DOMProperty'); diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index aceb8925a8..3e0b4bbc9f 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -626,8 +626,10 @@ describe('ReactDOMComponent', () => { } beforeEach(() => { - var ReactDefaultInjection = require('ReactDefaultInjection'); - ReactDefaultInjection.inject(); + var ReactDOMInjection = require('ReactDOMInjection'); + ReactDOMInjection.inject(); + var ReactDOMStackInjection = require('ReactDOMInjection'); + ReactDOMStackInjection.inject(); var ReactDOMComponent = require('ReactDOMComponent'); var ReactReconcileTransaction = require('ReactReconcileTransaction'); diff --git a/src/renderers/native/ReactNative.js b/src/renderers/native/ReactNative.js index 23648da925..6112e9045b 100644 --- a/src/renderers/native/ReactNative.js +++ b/src/renderers/native/ReactNative.js @@ -14,14 +14,16 @@ // Require ReactNativeDefaultInjection first for its side effects of setting up // the JS environment var ReactNativeComponentTree = require('ReactNativeComponentTree'); -var ReactNativeDefaultInjection = require('ReactNativeDefaultInjection'); +var ReactNativeInjection = require('ReactNativeInjection'); +var ReactNativeStackInjection = require('ReactNativeStackInjection'); var ReactNativeMount = require('ReactNativeMount'); var ReactUpdates = require('ReactUpdates'); var findNodeHandle = require('findNodeHandle'); -ReactNativeDefaultInjection.inject(); +ReactNativeInjection.inject(); +ReactNativeStackInjection.inject(); var render = function( element: ReactElement, diff --git a/src/renderers/native/ReactNativeInjection.js b/src/renderers/native/ReactNativeInjection.js new file mode 100644 index 0000000000..6f6293fde3 --- /dev/null +++ b/src/renderers/native/ReactNativeInjection.js @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule ReactNativeInjection + * @flow + */ +'use strict'; + +/** + * Make sure essential globals are available and are patched correctly. Please don't remove this + * line. Bundles created by react-packager `require` it before executing any application code. This + * ensures it exists in the dependency graph and can be `require`d. + * TODO: require this in packager, not in React #10932517 + */ +require('InitializeJavaScriptAppEngine'); + +var EventPluginHub = require('EventPluginHub'); +var EventPluginUtils = require('EventPluginUtils'); +var RCTEventEmitter = require('RCTEventEmitter'); +var ReactNativeBridgeEventPlugin = require('ReactNativeBridgeEventPlugin'); +var ReactNativeComponentTree = require('ReactNativeComponentTree'); +var ReactNativeEventEmitter = require('ReactNativeEventEmitter'); +var ReactNativeEventPluginOrder = require('ReactNativeEventPluginOrder'); +var ReactNativeGlobalResponderHandler = require('ReactNativeGlobalResponderHandler'); +var ReactNativeTreeTraversal = require('ReactNativeTreeTraversal'); +var ResponderEventPlugin = require('ResponderEventPlugin'); + +function inject() { + /** + * Register the event emitter with the native bridge + */ + RCTEventEmitter.register(ReactNativeEventEmitter); + + /** + * Inject module for resolving DOM hierarchy and plugin ordering. + */ + EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder); + EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree); + EventPluginUtils.injection.injectTreeTraversal(ReactNativeTreeTraversal); + + ResponderEventPlugin.injection.injectGlobalResponderHandler( + ReactNativeGlobalResponderHandler + ); + + /** + * Some important event plugins included by default (without having to require + * them). + */ + EventPluginHub.injection.injectEventPluginsByName({ + 'ResponderEventPlugin': ResponderEventPlugin, + 'ReactNativeBridgeEventPlugin': ReactNativeBridgeEventPlugin, + }); +} + +module.exports = { + inject: inject, +}; diff --git a/src/renderers/native/ReactNativeDefaultInjection.js b/src/renderers/native/ReactNativeStackInjection.js similarity index 62% rename from src/renderers/native/ReactNativeDefaultInjection.js rename to src/renderers/native/ReactNativeStackInjection.js index 4d15ab5771..01181a65f8 100644 --- a/src/renderers/native/ReactNativeDefaultInjection.js +++ b/src/renderers/native/ReactNativeStackInjection.js @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * - * @providesModule ReactNativeDefaultInjection + * @providesModule ReactNativeStackInjection * @flow */ 'use strict'; @@ -19,54 +19,19 @@ */ require('InitializeJavaScriptAppEngine'); -var EventPluginHub = require('EventPluginHub'); -var EventPluginUtils = require('EventPluginUtils'); -var RCTEventEmitter = require('RCTEventEmitter'); var React = require('React'); var ReactComponentEnvironment = require('ReactComponentEnvironment'); var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy'); var ReactEmptyComponent = require('ReactEmptyComponent'); -var ReactNativeBridgeEventPlugin = require('ReactNativeBridgeEventPlugin'); var ReactHostComponent = require('ReactHostComponent'); var ReactNativeComponentEnvironment = require('ReactNativeComponentEnvironment'); -var ReactNativeComponentTree = require('ReactNativeComponentTree'); -var ReactNativeEventEmitter = require('ReactNativeEventEmitter'); -var ReactNativeEventPluginOrder = require('ReactNativeEventPluginOrder'); -var ReactNativeGlobalResponderHandler = require('ReactNativeGlobalResponderHandler'); var ReactNativeTextComponent = require('ReactNativeTextComponent'); -var ReactNativeTreeTraversal = require('ReactNativeTreeTraversal'); var ReactSimpleEmptyComponent = require('ReactSimpleEmptyComponent'); var ReactUpdates = require('ReactUpdates'); -var ResponderEventPlugin = require('ResponderEventPlugin'); var invariant = require('invariant'); function inject() { - /** - * Register the event emitter with the native bridge - */ - RCTEventEmitter.register(ReactNativeEventEmitter); - - /** - * Inject module for resolving DOM hierarchy and plugin ordering. - */ - EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder); - EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree); - EventPluginUtils.injection.injectTreeTraversal(ReactNativeTreeTraversal); - - ResponderEventPlugin.injection.injectGlobalResponderHandler( - ReactNativeGlobalResponderHandler - ); - - /** - * Some important event plugins included by default (without having to require - * them). - */ - EventPluginHub.injection.injectEventPluginsByName({ - 'ResponderEventPlugin': ResponderEventPlugin, - 'ReactNativeBridgeEventPlugin': ReactNativeBridgeEventPlugin, - }); - ReactUpdates.injection.injectReconcileTransaction( ReactNativeComponentEnvironment.ReactReconcileTransaction ); diff --git a/src/test/ReactShallowRenderer.js b/src/test/ReactShallowRenderer.js index d8f10f2f8f..1517d49cff 100644 --- a/src/test/ReactShallowRenderer.js +++ b/src/test/ReactShallowRenderer.js @@ -13,7 +13,8 @@ 'use strict'; var React = require('React'); -var ReactDefaultInjection = require('ReactDefaultInjection'); +var ReactDOMInjection = require('ReactDOMInjection'); +var ReactDOMStackInjection = require('ReactDOMStackInjection'); var ReactCompositeComponent = require('ReactCompositeComponent'); var ReactReconciler = require('ReactReconciler'); var ReactUpdates = require('ReactUpdates'); @@ -84,7 +85,8 @@ class ReactShallowRenderer { // Ensure we've done the default injections. This might not be true in the // case of a simple test that only requires React and the TestUtils in // conjunction with an inline-requires transform. - ReactDefaultInjection.inject(); + ReactDOMInjection.inject(); + ReactDOMStackInjection.inject(); invariant( React.isValidElement(element),