@samitouri / QOS-React-2 / commits / 4b32f525e1

Refactor away some namespace imports (#13427)

* Replace some namespace imports * Simplify the controlled component injection * Simplify the batching injection * Simplify the component tree injection

Dan Abramov committed Aug 17, 2018 at 21:17 UTC 4b32f525e1233df1bd90cbd1df7da1cd329ca44a
11 files changed +109 -86
packages/events/EventPluginUtils.js
+16 -16
@@ -13,22 +13,22 @@ export let getFiberCurrentPropsFromNode = null;
13 export let getInstanceFromNode = null;
14 export let getNodeFromInstance = null;
15
16 -export const injection = {
17 - injectComponentTree: function(Injected) {
18 - ({
19 - getFiberCurrentPropsFromNode,
20 - getInstanceFromNode,
21 - getNodeFromInstance,
22 - } = Injected);
23 - if (__DEV__) {
24 - warningWithoutStack(
25 - getNodeFromInstance && getInstanceFromNode,
26 - 'EventPluginUtils.injection.injectComponentTree(...): Injected ' +
27 - 'module is missing getNodeFromInstance or getInstanceFromNode.',
28 - );
29 - }
30 - },
31 -};
16 +export function setComponentTree(
17 + getFiberCurrentPropsFromNodeImpl,
18 + getInstanceFromNodeImpl,
19 + getNodeFromInstanceImpl,
20 +) {
21 + getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
22 + getInstanceFromNode = getInstanceFromNodeImpl;
23 + getNodeFromInstance = getNodeFromInstanceImpl;
24 + if (__DEV__) {
25 + warningWithoutStack(
26 + getNodeFromInstance && getInstanceFromNode,
27 + 'EventPluginUtils.setComponentTree(...): Injected ' +
28 + 'module is missing getNodeFromInstance or getInstanceFromNode.',
29 + );
30 + }
31 +}
32
33 let validateEventDispatches;
34 if (__DEV__) {
packages/events/ReactControlledComponent.js
+7 -19
@@ -14,16 +14,7 @@ import {
14
15 // Use to restore controlled state after a change event has fired.
16
17 -let fiberHostComponent = null;
18 -
19 -const ReactControlledComponentInjection = {
20 - injectFiberControlledHostComponent: function(hostComponentImpl) {
21 - // The fiber implementation doesn't use dynamic dispatch so we need to
22 - // inject the implementation.
23 - fiberHostComponent = hostComponentImpl;
24 - },
25 -};
26 -
17 +let restoreImpl = null;
18 let restoreTarget = null;
19 let restoreQueue = null;
20
@@ -36,20 +27,17 @@ function restoreStateOfTarget(target) {
27 return;
28 }
29 invariant(
39 - fiberHostComponent &&
40 - typeof fiberHostComponent.restoreControlledState === 'function',
41 - 'Fiber needs to be injected to handle a fiber target for controlled ' +
30 + typeof restoreImpl === 'function',
31 + 'setRestoreImplementation() needs to be called to handle a target for controlled ' +
32 'events. This error is likely caused by a bug in React. Please file an issue.',
33 );
34 const props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
45 - fiberHostComponent.restoreControlledState(
46 - internalInstance.stateNode,
47 - internalInstance.type,
48 - props,
49 - );
35 + restoreImpl(internalInstance.stateNode, internalInstance.type, props);
36 }
37
52 -export const injection = ReactControlledComponentInjection;
38 +export function setRestoreImplementation(impl) {
39 + restoreImpl = impl;
40 +}
41
42 export function enqueueStateRestore(target) {
43 if (restoreTarget) {
packages/events/ReactGenericBatching.js
+16 -14
@@ -17,13 +17,13 @@ import {
17 // scheduled work and instead do synchronous work.
18
19 // Defaults
20 -let _batchedUpdates = function(fn, bookkeeping) {
20 +let _batchedUpdatesImpl = function(fn, bookkeeping) {
21 return fn(bookkeeping);
22 };
23 -let _interactiveUpdates = function(fn, a, b) {
23 +let _interactiveUpdatesImpl = function(fn, a, b) {
24 return fn(a, b);
25 };
26 -let _flushInteractiveUpdates = function() {};
26 +let _flushInteractiveUpdatesImpl = function() {};
27
28 let isBatching = false;
29 export function batchedUpdates(fn, bookkeeping) {
@@ -34,7 +34,7 @@ export function batchedUpdates(fn, bookkeeping) {
34 }
35 isBatching = true;
36 try {
37 - return _batchedUpdates(fn, bookkeeping);
37 + return _batchedUpdatesImpl(fn, bookkeeping);
38 } finally {
39 // Here we wait until all updates have propagated, which is important
40 // when using controlled components within layers:
@@ -46,24 +46,26 @@ export function batchedUpdates(fn, bookkeeping) {
46 // If a controlled event was fired, we may need to restore the state of
47 // the DOM node back to the controlled value. This is necessary when React
48 // bails out of the update without touching the DOM.
49 - _flushInteractiveUpdates();
49 + _flushInteractiveUpdatesImpl();
50 restoreStateIfNeeded();
51 }
52 }
53 }
54
55 export function interactiveUpdates(fn, a, b) {
56 - return _interactiveUpdates(fn, a, b);
56 + return _interactiveUpdatesImpl(fn, a, b);
57 }
58
59 export function flushInteractiveUpdates() {
60 - return _flushInteractiveUpdates();
60 + return _flushInteractiveUpdatesImpl();
61 }
62
63 -export const injection = {
64 - injectRenderer(renderer) {
65 - _batchedUpdates = renderer.batchedUpdates;
66 - _interactiveUpdates = renderer.interactiveUpdates;
67 - _flushInteractiveUpdates = renderer.flushInteractiveUpdates;
68 - },
69 -};
63 +export function setBatchingImplementation(
64 + batchedUpdatesImpl,
65 + interactiveUpdatesImpl,
66 + flushInteractiveUpdatesImpl,
67 +) {
68 + _batchedUpdatesImpl = batchedUpdatesImpl;
69 + _interactiveUpdatesImpl = interactiveUpdatesImpl;
70 + _flushInteractiveUpdatesImpl = flushInteractiveUpdatesImpl;
71 +}
packages/react-dom/src/client/ReactDOM.js
+7 -5
@@ -36,7 +36,7 @@ import lowPriorityWarning from 'shared/lowPriorityWarning';
36 import warningWithoutStack from 'shared/warningWithoutStack';
37
38 import * as ReactDOMComponentTree from './ReactDOMComponentTree';
39 -import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';
39 +import {restoreControlledState} from './ReactDOMFiberComponent';
40 import * as ReactDOMEventListener from '../events/ReactDOMEventListener';
41 import {
42 ELEMENT_NODE,
@@ -124,9 +124,7 @@ if (__DEV__) {
124 };
125 }
126
127 -ReactControlledComponent.injection.injectFiberControlledHostComponent(
128 - ReactDOMFiberComponent,
129 -);
127 +ReactControlledComponent.setRestoreImplementation(restoreControlledState);
128
129 type DOMContainer =
130 | (Element & {
@@ -450,7 +448,11 @@ function shouldHydrateDueToLegacyHeuristic(container) {
448 );
449 }
450
453 -ReactGenericBatching.injection.injectRenderer(DOMRenderer);
451 +ReactGenericBatching.setBatchingImplementation(
452 + DOMRenderer.batchedUpdates,
453 + DOMRenderer.interactiveUpdates,
454 + DOMRenderer.flushInteractiveUpdates,
455 +);
456
457 let warnedAboutHydrateAPI = false;
458
packages/react-dom/src/client/ReactDOMClientInjection.js
+10 -2
@@ -8,7 +8,11 @@
8 import * as EventPluginHub from 'events/EventPluginHub';
9 import * as EventPluginUtils from 'events/EventPluginUtils';
10
11 -import * as ReactDOMComponentTree from './ReactDOMComponentTree';
11 +import {
12 + getFiberCurrentPropsFromNode,
13 + getInstanceFromNode,
14 + getNodeFromInstance,
15 +} from './ReactDOMComponentTree';
16 import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin';
17 import ChangeEventPlugin from '../events/ChangeEventPlugin';
18 import DOMEventPluginOrder from '../events/DOMEventPluginOrder';
@@ -20,7 +24,11 @@ import SimpleEventPlugin from '../events/SimpleEventPlugin';
24 * Inject modules for resolving DOM hierarchy and plugin ordering.
25 */
26 EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);
23 -EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree);
27 +EventPluginUtils.setComponentTree(
28 + getFiberCurrentPropsFromNode,
29 + getInstanceFromNode,
30 + getNodeFromInstance,
31 +);
32
33 /**
34 * Some important event plugins included by default (without having to require
packages/react-dom/src/client/ReactDOMHostConfig.js
+20 -23
@@ -7,10 +7,21 @@
7 * @flow
8 */
9
10 -import * as ReactScheduler from 'shared/ReactScheduler';
11 -
12 -import * as ReactDOMComponentTree from './ReactDOMComponentTree';
13 -import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';
10 +import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
11 +import {
12 + createElement,
13 + createTextNode,
14 + setInitialProperties,
15 + diffProperties,
16 + updateProperties,
17 + diffHydratedProperties,
18 + diffHydratedText,
19 + warnForUnmatchedText,
20 + warnForDeletedHydratableElement,
21 + warnForDeletedHydratableText,
22 + warnForInsertedHydratedElement,
23 + warnForInsertedHydratedText,
24 +} from './ReactDOMFiberComponent';
25 import * as ReactInputSelection from './ReactInputSelection';
26 import setTextContent from './setTextContent';
27 import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
@@ -48,21 +59,11 @@ export type ChildSet = void; // Unused
59 export type TimeoutHandle = TimeoutID;
60 export type NoTimeout = -1;
61
51 -const {
52 - createElement,
53 - createTextNode,
54 - setInitialProperties,
55 - diffProperties,
56 - updateProperties,
57 - diffHydratedProperties,
58 - diffHydratedText,
59 - warnForUnmatchedText,
60 - warnForDeletedHydratableElement,
61 - warnForDeletedHydratableText,
62 - warnForInsertedHydratedElement,
63 - warnForInsertedHydratedText,
64 -} = ReactDOMFiberComponent;
65 -const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
62 +export {
63 + now,
64 + scheduleWork as scheduleDeferredCallback,
65 + cancelScheduledWork as cancelDeferredCallback,
66 +} from 'shared/ReactScheduler';
67
68 let SUPPRESS_HYDRATION_WARNING;
69 if (__DEV__) {
@@ -272,11 +273,7 @@ export function createTextInstance(
273 return textNode;
274 }
275
275 -export const now = ReactScheduler.now;
276 export const isPrimaryRenderer = true;
277 -export const scheduleDeferredCallback = ReactScheduler.scheduleWork;
278 -export const cancelDeferredCallback = ReactScheduler.cancelScheduledWork;
279 -
277 export const scheduleTimeout = setTimeout;
278 export const cancelTimeout = clearTimeout;
279 export const noTimeout = -1;
packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.js
+13 -3
@@ -11,12 +11,22 @@ import ResponderEventPlugin from 'events/ResponderEventPlugin';
11 import ResponderTouchHistoryStore from 'events/ResponderTouchHistoryStore';
12
13 // This is used by react-native-web.
14 -export const injectComponentTree =
15 - EventPluginUtils.injection.injectComponentTree;
14 +export function injectComponentTree(ComponentTree) {
15 + EventPluginUtils.setComponentTree(
16 + ComponentTree.getFiberCurrentPropsFromNode,
17 + ComponentTree.getInstanceFromNode,
18 + ComponentTree.getNodeFromInstance,
19 + );
20 +}
21 +
22 export {ResponderEventPlugin, ResponderTouchHistoryStore};
23
24 // Inject react-dom's ComponentTree into this module.
25 const {
26 ReactDOMComponentTree,
27 } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
22 -injectComponentTree(ReactDOMComponentTree);
28 +EventPluginUtils.setComponentTree(
29 + ReactDOMComponentTree.getFiberCurrentPropsFromNode,
30 + ReactDOMComponentTree.getInstanceFromNode,
31 + ReactDOMComponentTree.getNodeFromInstance,
32 +);
packages/react-native-renderer/src/ReactFabric.js
+5 -1
@@ -73,7 +73,11 @@ function findNodeHandle(componentOrHandle: any): ?number {
73 return hostInstance._nativeTag;
74 }
75
76 -ReactGenericBatching.injection.injectRenderer(ReactFabricRenderer);
76 +ReactGenericBatching.setBatchingImplementation(
77 + ReactFabricRenderer.batchedUpdates,
78 + ReactFabricRenderer.interactiveUpdates,
79 + ReactFabricRenderer.flushInteractiveUpdates,
80 +);
81
82 const roots = new Map();
83
packages/react-native-renderer/src/ReactFabricInjection.js
+5 -1
@@ -14,7 +14,11 @@ import * as EventPluginUtils from 'events/EventPluginUtils';
14 import ReactFabricGlobalResponderHandler from './ReactFabricGlobalResponderHandler';
15 import ResponderEventPlugin from 'events/ResponderEventPlugin';
16
17 -EventPluginUtils.injection.injectComponentTree(ReactFabricComponentTree);
17 +EventPluginUtils.setComponentTree(
18 + ReactFabricComponentTree.getFiberCurrentPropsFromNode,
19 + ReactFabricComponentTree.getInstanceFromNode,
20 + ReactFabricComponentTree.getNodeFromInstance,
21 +);
22
23 ResponderEventPlugin.injection.injectGlobalResponderHandler(
24 ReactFabricGlobalResponderHandler,
packages/react-native-renderer/src/ReactNativeInjection.js
+5 -1
@@ -23,7 +23,11 @@ import RCTEventEmitter from 'RCTEventEmitter';
23 */
24 RCTEventEmitter.register(ReactNativeEventEmitter);
25
26 -EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
26 +EventPluginUtils.setComponentTree(
27 + ReactNativeComponentTree.getFiberCurrentPropsFromNode,
28 + ReactNativeComponentTree.getInstanceFromNode,
29 + ReactNativeComponentTree.getNodeFromInstance,
30 +);
31
32 ResponderEventPlugin.injection.injectGlobalResponderHandler(
33 ReactNativeGlobalResponderHandler,
packages/react-native-renderer/src/ReactNativeRenderer.js
+5 -1
@@ -74,7 +74,11 @@ function findNodeHandle(componentOrHandle: any): ?number {
74 return hostInstance._nativeTag;
75 }
76
77 -ReactGenericBatching.injection.injectRenderer(ReactNativeFiberRenderer);
77 +ReactGenericBatching.setBatchingImplementation(
78 + ReactNativeFiberRenderer.batchedUpdates,
79 + ReactNativeFiberRenderer.interactiveUpdates,
80 + ReactNativeFiberRenderer.flushInteractiveUpdates,
81 +);
82
83 function computeComponentStackForErrorReporting(reactTag: number): string {
84 let fiber = ReactNativeComponentTree.getClosestInstanceFromNode(reactTag);