Simplify environment injections (#10175)
* Remove unnecessary injection guard * Remove inject() indirection for global injections It was necessary when they shared global state. But now these are flat bundles so we can inject as side effect. This feels a bit less convoluted to me. Ideally we can get rid of this somehow soon.
Dan Abramov committed
Jul 13, 2017 at 20:44 UTC
2dcdc3c633809d176ca6716dca1bddcd7d835be9
13 files changed
+105
-180
src/renderers/dom/ReactDOMNodeStreamEntry.js
+1
-2
@@ -11,11 +11,10 @@
11
12
'use strict';
13
14
-var ReactDOMInjection = require('ReactDOMInjection');
14
var ReactDOMNodeStreamRenderer = require('ReactDOMNodeStreamRenderer');
15
var ReactVersion = require('ReactVersion');
16
18
-ReactDOMInjection.inject();
17
+require('ReactDOMInjection');
18
19
module.exports = {
20
renderToStream: ReactDOMNodeStreamRenderer.renderToStream,
src/renderers/dom/ReactDOMServerEntry.js
+1
-2
@@ -11,11 +11,10 @@
11
12
'use strict';
13
14
-var ReactDOMInjection = require('ReactDOMInjection');
14
var ReactDOMStringRenderer = require('ReactDOMStringRenderer');
15
var ReactVersion = require('ReactVersion');
16
18
-ReactDOMInjection.inject();
17
+require('ReactDOMInjection');
18
19
module.exports = {
20
renderToString: ReactDOMStringRenderer.renderToString,
src/renderers/dom/ReactDOMServerStackEntry.js
+2
-4
@@ -11,13 +11,11 @@
11
12
'use strict';
13
14
-var ReactDOMInjection = require('ReactDOMInjection');
15
-var ReactDOMStackInjection = require('ReactDOMStackInjection');
14
var ReactServerRendering = require('ReactServerRendering');
15
var ReactVersion = require('ReactVersion');
16
19
-ReactDOMInjection.inject();
20
-ReactDOMStackInjection.inject();
17
+require('ReactDOMInjection');
18
+require('ReactDOMStackInjection');
19
20
var ReactDOMServerStack = {
21
renderToString: ReactServerRendering.renderToString,
src/renderers/dom/ReactDOMStackEntry.js
+3
-6
@@ -14,9 +14,6 @@
14
'use strict';
15
16
var ReactDOMComponentTree = require('ReactDOMComponentTree');
17
-var ReactDOMInjection = require('ReactDOMInjection');
18
-var ReactDOMClientInjection = require('ReactDOMClientInjection');
19
-var ReactDOMStackInjection = require('ReactDOMStackInjection');
17
var ReactGenericBatching = require('ReactGenericBatching');
18
var ReactMount = require('ReactMount');
19
var ReactUpdates = require('ReactUpdates');
@@ -27,9 +24,9 @@ var findDOMNode = require('findDOMNode');
24
var getHostComponentFromComposite = require('getHostComponentFromComposite');
25
var warning = require('fbjs/lib/warning');
26
30
-ReactDOMInjection.inject();
31
-ReactDOMClientInjection.inject();
32
-ReactDOMStackInjection.inject();
27
+require('ReactDOMInjection');
28
+require('ReactDOMClientInjection');
29
+require('ReactDOMStackInjection');
30
31
var ReactDOMStack = {
32
findDOMNode: findDOMNode,
src/renderers/dom/fiber/ReactDOMFiberEntry.js
+2
-4
@@ -22,8 +22,6 @@ var ReactFeatureFlags = require('ReactFeatureFlags');
22
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
23
var ReactDOMFiberComponent = require('ReactDOMFiberComponent');
24
var ReactDOMFrameScheduling = require('ReactDOMFrameScheduling');
25
-var ReactDOMClientInjection = require('ReactDOMClientInjection');
26
-var ReactDOMInjection = require('ReactDOMInjection');
25
var ReactGenericBatching = require('ReactGenericBatching');
26
var ReactFiberReconciler = require('ReactFiberReconciler');
27
var ReactInputSelection = require('ReactInputSelection');
@@ -65,8 +63,8 @@ if (__DEV__) {
63
var {updatedAncestorInfo} = validateDOMNesting;
64
}
65
68
-ReactDOMClientInjection.inject();
69
-ReactDOMInjection.inject();
66
+require('ReactDOMClientInjection');
67
+require('ReactDOMInjection');
68
ReactControlledComponent.injection.injectFiberControlledHostComponent(
69
ReactDOMFiberComponent,
70
);
src/renderers/dom/shared/ReactDOMClientInjection.js
+19
-35
@@ -23,40 +23,24 @@ var ReactDOMEventListener = require('ReactDOMEventListener');
23
var SelectEventPlugin = require('SelectEventPlugin');
24
var SimpleEventPlugin = require('SimpleEventPlugin');
25
26
-var alreadyInjected = false;
26
+ReactDOMEventListener.setHandleTopLevel(
27
+ ReactBrowserEventEmitter.handleTopLevel,
28
+);
29
28
-function inject() {
29
- if (alreadyInjected) {
30
- // TODO: This is currently true because these injections are shared between
31
- // the client and the server package. They should be built independently
32
- // and not share any injection state. Then this problem will be solved.
33
- return;
34
- }
35
- alreadyInjected = true;
36
-
37
- ReactDOMEventListener.setHandleTopLevel(
38
- ReactBrowserEventEmitter.handleTopLevel,
39
- );
40
-
41
- /**
42
- * Inject modules for resolving DOM hierarchy and plugin ordering.
43
- */
44
- EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);
45
- EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree);
46
-
47
- /**
48
- * Some important event plugins included by default (without having to require
49
- * them).
50
- */
51
- EventPluginHub.injection.injectEventPluginsByName({
52
- SimpleEventPlugin: SimpleEventPlugin,
53
- EnterLeaveEventPlugin: EnterLeaveEventPlugin,
54
- ChangeEventPlugin: ChangeEventPlugin,
55
- SelectEventPlugin: SelectEventPlugin,
56
- BeforeInputEventPlugin: BeforeInputEventPlugin,
57
- });
58
-}
30
+/**
31
+ * Inject modules for resolving DOM hierarchy and plugin ordering.
32
+ */
33
+EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);
34
+EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree);
35
60
-module.exports = {
61
- inject: inject,
62
-};
36
+/**
37
+ * Some important event plugins included by default (without having to require
38
+ * them).
39
+ */
40
+EventPluginHub.injection.injectEventPluginsByName({
41
+ SimpleEventPlugin: SimpleEventPlugin,
42
+ EnterLeaveEventPlugin: EnterLeaveEventPlugin,
43
+ ChangeEventPlugin: ChangeEventPlugin,
44
+ SelectEventPlugin: SelectEventPlugin,
45
+ BeforeInputEventPlugin: BeforeInputEventPlugin,
46
+});
src/renderers/dom/shared/ReactDOMInjection.js
+3
-19
@@ -16,22 +16,6 @@ var DOMProperty = require('DOMProperty');
16
var HTMLDOMPropertyConfig = require('HTMLDOMPropertyConfig');
17
var SVGDOMPropertyConfig = require('SVGDOMPropertyConfig');
18
19
-var alreadyInjected = false;
20
-
21
-function inject() {
22
- if (alreadyInjected) {
23
- // TODO: This is currently true because these injections are shared between
24
- // the client and the server package. They should be built independently
25
- // and not share any injection state. Then this problem will be solved.
26
- return;
27
- }
28
- alreadyInjected = true;
29
-
30
- DOMProperty.injection.injectDOMPropertyConfig(ARIADOMPropertyConfig);
31
- DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
32
- DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig);
33
-}
34
-
35
-module.exports = {
36
- inject: inject,
37
-};
19
+DOMProperty.injection.injectDOMPropertyConfig(ARIADOMPropertyConfig);
20
+DOMProperty.injection.injectDOMPropertyConfig(HTMLDOMPropertyConfig);
21
+DOMProperty.injection.injectDOMPropertyConfig(SVGDOMPropertyConfig);
src/renderers/dom/shared/__tests__/DOMPropertyOperations-test.js
+1
-2
@@ -18,8 +18,7 @@ describe('DOMPropertyOperations', () => {
18
19
beforeEach(() => {
20
jest.resetModules();
21
- var ReactDOMInjection = require('ReactDOMInjection');
22
- ReactDOMInjection.inject();
21
+ require('ReactDOMInjection');
22
23
// TODO: can we express this test with only public API?
24
DOMPropertyOperations = require('DOMPropertyOperations');
src/renderers/dom/stack/client/ReactDOMStackInjection.js
+19
-35
@@ -27,44 +27,28 @@ var ReactUpdates = require('ReactUpdates');
27
var findDOMNode = require('findDOMNode');
28
var getHostComponentFromComposite = require('getHostComponentFromComposite');
29
30
-var alreadyInjected = false;
30
+ReactGenericBatching.injection.injectStackBatchedUpdates(
31
+ ReactUpdates.batchedUpdates,
32
+);
33
32
-function inject() {
33
- if (alreadyInjected) {
34
- // TODO: This is currently true because these injections are shared between
35
- // the client and the server package. They should be built independently
36
- // and not share any injection state. Then this problem will be solved.
37
- return;
38
- }
39
- alreadyInjected = true;
34
+ReactHostComponent.injection.injectGenericComponentClass(ReactDOMComponent);
35
41
- ReactGenericBatching.injection.injectStackBatchedUpdates(
42
- ReactUpdates.batchedUpdates,
43
- );
36
+ReactHostComponent.injection.injectTextComponentClass(ReactDOMTextComponent);
37
45
- ReactHostComponent.injection.injectGenericComponentClass(ReactDOMComponent);
38
+ReactEmptyComponent.injection.injectEmptyComponentFactory(function(
39
+ instantiate,
40
+) {
41
+ return new ReactDOMEmptyComponent(instantiate);
42
+});
43
47
- ReactHostComponent.injection.injectTextComponentClass(ReactDOMTextComponent);
44
+ReactUpdates.injection.injectReconcileTransaction(ReactReconcileTransaction);
45
+ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
46
49
- ReactEmptyComponent.injection.injectEmptyComponentFactory(function(
50
- instantiate,
51
- ) {
52
- return new ReactDOMEmptyComponent(instantiate);
53
- });
47
+ReactComponentEnvironment.injection.injectEnvironment(
48
+ ReactComponentBrowserEnvironment,
49
+);
50
55
- ReactUpdates.injection.injectReconcileTransaction(ReactReconcileTransaction);
56
- ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
57
-
58
- ReactComponentEnvironment.injection.injectEnvironment(
59
- ReactComponentBrowserEnvironment,
60
- );
61
-
62
- findDOMNode._injectStack(function(inst) {
63
- inst = getHostComponentFromComposite(inst);
64
- return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
65
- });
66
-}
67
-
68
-module.exports = {
69
- inject: inject,
70
-};
51
+findDOMNode._injectStack(function(inst) {
52
+ inst = getHostComponentFromComposite(inst);
53
+ return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
54
+});
src/renderers/native/ReactNativeFiberEntry.js
+1
-2
@@ -15,7 +15,6 @@
15
const ReactFiberErrorLogger = require('ReactFiberErrorLogger');
16
const ReactGenericBatching = require('ReactGenericBatching');
17
const ReactNativeFiberErrorDialog = require('ReactNativeFiberErrorDialog');
18
-const ReactNativeInjection = require('ReactNativeInjection');
18
const ReactPortal = require('ReactPortal');
19
const ReactNativeComponentTree = require('ReactNativeComponentTree');
20
const ReactNativeFiberRenderer = require('ReactNativeFiberRenderer');
@@ -30,7 +29,7 @@ const {injectInternals} = require('ReactFiberDevToolsHook');
29
import type {ReactNativeType} from 'ReactNativeTypes';
30
import type {ReactNodeList} from 'ReactTypes';
31
33
-ReactNativeInjection.inject();
32
+require('ReactNativeInjection');
33
34
ReactGenericBatching.injection.injectFiberBatchedUpdates(
35
ReactNativeFiberRenderer.batchedUpdates,
src/renderers/native/ReactNativeInjection.js
+20
-26
@@ -29,32 +29,26 @@ var ReactNativeEventPluginOrder = require('ReactNativeEventPluginOrder');
29
var ReactNativeGlobalResponderHandler = require('ReactNativeGlobalResponderHandler');
30
var ResponderEventPlugin = require('ResponderEventPlugin');
31
32
-function inject() {
33
- /**
34
- * Register the event emitter with the native bridge
35
- */
36
- RCTEventEmitter.register(ReactNativeEventEmitter);
37
-
38
- /**
39
- * Inject module for resolving DOM hierarchy and plugin ordering.
40
- */
41
- EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder);
42
- EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
32
+/**
33
+ * Register the event emitter with the native bridge
34
+ */
35
+RCTEventEmitter.register(ReactNativeEventEmitter);
36
44
- ResponderEventPlugin.injection.injectGlobalResponderHandler(
45
- ReactNativeGlobalResponderHandler,
46
- );
37
+/**
38
+ * Inject module for resolving DOM hierarchy and plugin ordering.
39
+ */
40
+EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder);
41
+EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
42
48
- /**
49
- * Some important event plugins included by default (without having to require
50
- * them).
51
- */
52
- EventPluginHub.injection.injectEventPluginsByName({
53
- ResponderEventPlugin: ResponderEventPlugin,
54
- ReactNativeBridgeEventPlugin: ReactNativeBridgeEventPlugin,
55
- });
56
-}
43
+ResponderEventPlugin.injection.injectGlobalResponderHandler(
44
+ ReactNativeGlobalResponderHandler,
45
+);
46
58
-module.exports = {
59
- inject: inject,
60
-};
47
+/**
48
+ * Some important event plugins included by default (without having to require
49
+ * them).
50
+ */
51
+EventPluginHub.injection.injectEventPluginsByName({
52
+ ResponderEventPlugin: ResponderEventPlugin,
53
+ ReactNativeBridgeEventPlugin: ReactNativeBridgeEventPlugin,
54
+});
src/renderers/native/ReactNativeStackEntry.js
+2
-4
@@ -12,9 +12,7 @@
12
'use strict';
13
14
var ReactNativeComponentTree = require('ReactNativeComponentTree');
15
-var ReactNativeInjection = require('ReactNativeInjection');
15
var ReactNativeMount = require('ReactNativeMount');
17
-var ReactNativeStackInjection = require('ReactNativeStackInjection');
16
var ReactUpdates = require('ReactUpdates');
17
var ReactNativeStackInspector = require('ReactNativeStackInspector');
18
@@ -22,8 +20,8 @@ var findNumericNodeHandle = require('findNumericNodeHandleStack');
20
21
import type {ReactNativeType} from 'ReactNativeTypes';
22
25
-ReactNativeInjection.inject();
26
-ReactNativeStackInjection.inject();
23
+require('ReactNativeInjection');
24
+require('ReactNativeStackInjection');
25
26
var render = function(
27
element: ReactElement<any>,
src/renderers/native/ReactNativeStackInjection.js
+31
-39
@@ -32,48 +32,40 @@ var ReactUpdates = require('ReactUpdates');
32
33
var invariant = require('fbjs/lib/invariant');
34
35
-function inject() {
36
- ReactGenericBatching.injection.injectStackBatchedUpdates(
37
- ReactUpdates.batchedUpdates,
38
- );
39
-
40
- ReactUpdates.injection.injectReconcileTransaction(
41
- ReactNativeComponentEnvironment.ReactReconcileTransaction,
42
- );
43
-
44
- ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
35
+ReactGenericBatching.injection.injectStackBatchedUpdates(
36
+ ReactUpdates.batchedUpdates,
37
+);
38
46
- ReactComponentEnvironment.injection.injectEnvironment(
47
- ReactNativeComponentEnvironment,
48
- );
39
+ReactUpdates.injection.injectReconcileTransaction(
40
+ ReactNativeComponentEnvironment.ReactReconcileTransaction,
41
+);
42
50
- var EmptyComponent = instantiate => {
51
- // Can't import View at the top because it depends on React to make its composite
52
- var View = require('View');
53
- return new ReactSimpleEmptyComponent(
54
- React.createElement(View, {
55
- collapsable: true,
56
- style: {position: 'absolute'},
57
- }),
58
- instantiate,
59
- );
60
- };
43
+ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);
44
62
- ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);
45
+ReactComponentEnvironment.injection.injectEnvironment(
46
+ ReactNativeComponentEnvironment,
47
+);
48
64
- ReactHostComponent.injection.injectTextComponentClass(
65
- ReactNativeTextComponent,
49
+var EmptyComponent = instantiate => {
50
+ // Can't import View at the top because it depends on React to make its composite
51
+ var View = require('View');
52
+ return new ReactSimpleEmptyComponent(
53
+ React.createElement(View, {
54
+ collapsable: true,
55
+ style: {position: 'absolute'},
56
+ }),
57
+ instantiate,
58
);
67
- ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
68
- // Show a nicer error message for non-function tags
69
- var info = '';
70
- if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
71
- info += ' Each component name should start with an uppercase letter.';
72
- }
73
- invariant(false, 'Expected a component class, got %s.%s', tag, info);
74
- });
75
-}
76
-
77
-module.exports = {
78
- inject: inject,
59
};
60
+
61
+ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);
62
+
63
+ReactHostComponent.injection.injectTextComponentClass(ReactNativeTextComponent);
64
+ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
65
+ // Show a nicer error message for non-function tags
66
+ var info = '';
67
+ if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
68
+ info += ' Each component name should start with an uppercase letter.';
69
+ }
70
+ invariant(false, 'Expected a component class, got %s.%s', tag, info);
71
+});