Skip to content

Commit

Permalink
Refactor away some namespace imports (facebook#13427)
Browse files Browse the repository at this point in the history
* Replace some namespace imports

* Simplify the controlled component injection

* Simplify the batching injection

* Simplify the component tree injection
  • Loading branch information
gaearon authored Aug 17, 2018
1 parent d2f5c3f commit 4b32f52
Show file tree
Hide file tree
Showing 11 changed files with 109 additions and 86 deletions.
32 changes: 16 additions & 16 deletions packages/events/EventPluginUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@ export let getFiberCurrentPropsFromNode = null;
export let getInstanceFromNode = null;
export let getNodeFromInstance = null;

export const injection = {
injectComponentTree: function(Injected) {
({
getFiberCurrentPropsFromNode,
getInstanceFromNode,
getNodeFromInstance,
} = Injected);
if (__DEV__) {
warningWithoutStack(
getNodeFromInstance && getInstanceFromNode,
'EventPluginUtils.injection.injectComponentTree(...): Injected ' +
'module is missing getNodeFromInstance or getInstanceFromNode.',
);
}
},
};
export function setComponentTree(
getFiberCurrentPropsFromNodeImpl,
getInstanceFromNodeImpl,
getNodeFromInstanceImpl,
) {
getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
getInstanceFromNode = getInstanceFromNodeImpl;
getNodeFromInstance = getNodeFromInstanceImpl;
if (__DEV__) {
warningWithoutStack(
getNodeFromInstance && getInstanceFromNode,
'EventPluginUtils.setComponentTree(...): Injected ' +
'module is missing getNodeFromInstance or getInstanceFromNode.',
);
}
}

let validateEventDispatches;
if (__DEV__) {
Expand Down
26 changes: 7 additions & 19 deletions packages/events/ReactControlledComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,7 @@ import {

// Use to restore controlled state after a change event has fired.

let fiberHostComponent = null;

const ReactControlledComponentInjection = {
injectFiberControlledHostComponent: function(hostComponentImpl) {
// The fiber implementation doesn't use dynamic dispatch so we need to
// inject the implementation.
fiberHostComponent = hostComponentImpl;
},
};

let restoreImpl = null;
let restoreTarget = null;
let restoreQueue = null;

Expand All @@ -36,20 +27,17 @@ function restoreStateOfTarget(target) {
return;
}
invariant(
fiberHostComponent &&
typeof fiberHostComponent.restoreControlledState === 'function',
'Fiber needs to be injected to handle a fiber target for controlled ' +
typeof restoreImpl === 'function',
'setRestoreImplementation() needs to be called to handle a target for controlled ' +
'events. This error is likely caused by a bug in React. Please file an issue.',
);
const props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
fiberHostComponent.restoreControlledState(
internalInstance.stateNode,
internalInstance.type,
props,
);
restoreImpl(internalInstance.stateNode, internalInstance.type, props);
}

export const injection = ReactControlledComponentInjection;
export function setRestoreImplementation(impl) {
restoreImpl = impl;
}

export function enqueueStateRestore(target) {
if (restoreTarget) {
Expand Down
30 changes: 16 additions & 14 deletions packages/events/ReactGenericBatching.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import {
// scheduled work and instead do synchronous work.

// Defaults
let _batchedUpdates = function(fn, bookkeeping) {
let _batchedUpdatesImpl = function(fn, bookkeeping) {
return fn(bookkeeping);
};
let _interactiveUpdates = function(fn, a, b) {
let _interactiveUpdatesImpl = function(fn, a, b) {
return fn(a, b);
};
let _flushInteractiveUpdates = function() {};
let _flushInteractiveUpdatesImpl = function() {};

let isBatching = false;
export function batchedUpdates(fn, bookkeeping) {
Expand All @@ -34,7 +34,7 @@ export function batchedUpdates(fn, bookkeeping) {
}
isBatching = true;
try {
return _batchedUpdates(fn, bookkeeping);
return _batchedUpdatesImpl(fn, bookkeeping);
} finally {
// Here we wait until all updates have propagated, which is important
// when using controlled components within layers:
Expand All @@ -46,24 +46,26 @@ export function batchedUpdates(fn, bookkeeping) {
// If a controlled event was fired, we may need to restore the state of
// the DOM node back to the controlled value. This is necessary when React
// bails out of the update without touching the DOM.
_flushInteractiveUpdates();
_flushInteractiveUpdatesImpl();
restoreStateIfNeeded();
}
}
}

export function interactiveUpdates(fn, a, b) {
return _interactiveUpdates(fn, a, b);
return _interactiveUpdatesImpl(fn, a, b);
}

export function flushInteractiveUpdates() {
return _flushInteractiveUpdates();
return _flushInteractiveUpdatesImpl();
}

export const injection = {
injectRenderer(renderer) {
_batchedUpdates = renderer.batchedUpdates;
_interactiveUpdates = renderer.interactiveUpdates;
_flushInteractiveUpdates = renderer.flushInteractiveUpdates;
},
};
export function setBatchingImplementation(
batchedUpdatesImpl,
interactiveUpdatesImpl,
flushInteractiveUpdatesImpl,
) {
_batchedUpdatesImpl = batchedUpdatesImpl;
_interactiveUpdatesImpl = interactiveUpdatesImpl;
_flushInteractiveUpdatesImpl = flushInteractiveUpdatesImpl;
}
12 changes: 7 additions & 5 deletions packages/react-dom/src/client/ReactDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import lowPriorityWarning from 'shared/lowPriorityWarning';
import warningWithoutStack from 'shared/warningWithoutStack';

import * as ReactDOMComponentTree from './ReactDOMComponentTree';
import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';
import {restoreControlledState} from './ReactDOMFiberComponent';
import * as ReactDOMEventListener from '../events/ReactDOMEventListener';
import {
ELEMENT_NODE,
Expand Down Expand Up @@ -124,9 +124,7 @@ if (__DEV__) {
};
}

ReactControlledComponent.injection.injectFiberControlledHostComponent(
ReactDOMFiberComponent,
);
ReactControlledComponent.setRestoreImplementation(restoreControlledState);

type DOMContainer =
| (Element & {
Expand Down Expand Up @@ -450,7 +448,11 @@ function shouldHydrateDueToLegacyHeuristic(container) {
);
}

ReactGenericBatching.injection.injectRenderer(DOMRenderer);
ReactGenericBatching.setBatchingImplementation(
DOMRenderer.batchedUpdates,
DOMRenderer.interactiveUpdates,
DOMRenderer.flushInteractiveUpdates,
);

let warnedAboutHydrateAPI = false;

Expand Down
12 changes: 10 additions & 2 deletions packages/react-dom/src/client/ReactDOMClientInjection.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
import * as EventPluginHub from 'events/EventPluginHub';
import * as EventPluginUtils from 'events/EventPluginUtils';

import * as ReactDOMComponentTree from './ReactDOMComponentTree';
import {
getFiberCurrentPropsFromNode,
getInstanceFromNode,
getNodeFromInstance,
} from './ReactDOMComponentTree';
import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin';
import ChangeEventPlugin from '../events/ChangeEventPlugin';
import DOMEventPluginOrder from '../events/DOMEventPluginOrder';
Expand All @@ -20,7 +24,11 @@ import SimpleEventPlugin from '../events/SimpleEventPlugin';
* Inject modules for resolving DOM hierarchy and plugin ordering.
*/
EventPluginHub.injection.injectEventPluginOrder(DOMEventPluginOrder);
EventPluginUtils.injection.injectComponentTree(ReactDOMComponentTree);
EventPluginUtils.setComponentTree(
getFiberCurrentPropsFromNode,
getInstanceFromNode,
getNodeFromInstance,
);

/**
* Some important event plugins included by default (without having to require
Expand Down
43 changes: 20 additions & 23 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,21 @@
* @flow
*/

import * as ReactScheduler from 'shared/ReactScheduler';

import * as ReactDOMComponentTree from './ReactDOMComponentTree';
import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';
import {precacheFiberNode, updateFiberProps} from './ReactDOMComponentTree';
import {
createElement,
createTextNode,
setInitialProperties,
diffProperties,
updateProperties,
diffHydratedProperties,
diffHydratedText,
warnForUnmatchedText,
warnForDeletedHydratableElement,
warnForDeletedHydratableText,
warnForInsertedHydratedElement,
warnForInsertedHydratedText,
} from './ReactDOMFiberComponent';
import * as ReactInputSelection from './ReactInputSelection';
import setTextContent from './setTextContent';
import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
Expand Down Expand Up @@ -48,21 +59,11 @@ export type ChildSet = void; // Unused
export type TimeoutHandle = TimeoutID;
export type NoTimeout = -1;

const {
createElement,
createTextNode,
setInitialProperties,
diffProperties,
updateProperties,
diffHydratedProperties,
diffHydratedText,
warnForUnmatchedText,
warnForDeletedHydratableElement,
warnForDeletedHydratableText,
warnForInsertedHydratedElement,
warnForInsertedHydratedText,
} = ReactDOMFiberComponent;
const {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
export {
now,
scheduleWork as scheduleDeferredCallback,
cancelScheduledWork as cancelDeferredCallback,
} from 'shared/ReactScheduler';

let SUPPRESS_HYDRATION_WARNING;
if (__DEV__) {
Expand Down Expand Up @@ -272,11 +273,7 @@ export function createTextInstance(
return textNode;
}

export const now = ReactScheduler.now;
export const isPrimaryRenderer = true;
export const scheduleDeferredCallback = ReactScheduler.scheduleWork;
export const cancelDeferredCallback = ReactScheduler.cancelScheduledWork;

export const scheduleTimeout = setTimeout;
export const cancelTimeout = clearTimeout;
export const noTimeout = -1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,22 @@ import ResponderEventPlugin from 'events/ResponderEventPlugin';
import ResponderTouchHistoryStore from 'events/ResponderTouchHistoryStore';

// This is used by react-native-web.
export const injectComponentTree =
EventPluginUtils.injection.injectComponentTree;
export function injectComponentTree(ComponentTree) {
EventPluginUtils.setComponentTree(
ComponentTree.getFiberCurrentPropsFromNode,
ComponentTree.getInstanceFromNode,
ComponentTree.getNodeFromInstance,
);
}

export {ResponderEventPlugin, ResponderTouchHistoryStore};

// Inject react-dom's ComponentTree into this module.
const {
ReactDOMComponentTree,
} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
injectComponentTree(ReactDOMComponentTree);
EventPluginUtils.setComponentTree(
ReactDOMComponentTree.getFiberCurrentPropsFromNode,
ReactDOMComponentTree.getInstanceFromNode,
ReactDOMComponentTree.getNodeFromInstance,
);
6 changes: 5 additions & 1 deletion packages/react-native-renderer/src/ReactFabric.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,11 @@ function findNodeHandle(componentOrHandle: any): ?number {
return hostInstance._nativeTag;
}

ReactGenericBatching.injection.injectRenderer(ReactFabricRenderer);
ReactGenericBatching.setBatchingImplementation(
ReactFabricRenderer.batchedUpdates,
ReactFabricRenderer.interactiveUpdates,
ReactFabricRenderer.flushInteractiveUpdates,
);

const roots = new Map();

Expand Down
6 changes: 5 additions & 1 deletion packages/react-native-renderer/src/ReactFabricInjection.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import * as EventPluginUtils from 'events/EventPluginUtils';
import ReactFabricGlobalResponderHandler from './ReactFabricGlobalResponderHandler';
import ResponderEventPlugin from 'events/ResponderEventPlugin';

EventPluginUtils.injection.injectComponentTree(ReactFabricComponentTree);
EventPluginUtils.setComponentTree(
ReactFabricComponentTree.getFiberCurrentPropsFromNode,
ReactFabricComponentTree.getInstanceFromNode,
ReactFabricComponentTree.getNodeFromInstance,
);

ResponderEventPlugin.injection.injectGlobalResponderHandler(
ReactFabricGlobalResponderHandler,
Expand Down
6 changes: 5 additions & 1 deletion packages/react-native-renderer/src/ReactNativeInjection.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ import RCTEventEmitter from 'RCTEventEmitter';
*/
RCTEventEmitter.register(ReactNativeEventEmitter);

EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
EventPluginUtils.setComponentTree(
ReactNativeComponentTree.getFiberCurrentPropsFromNode,
ReactNativeComponentTree.getInstanceFromNode,
ReactNativeComponentTree.getNodeFromInstance,
);

ResponderEventPlugin.injection.injectGlobalResponderHandler(
ReactNativeGlobalResponderHandler,
Expand Down
6 changes: 5 additions & 1 deletion packages/react-native-renderer/src/ReactNativeRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ function findNodeHandle(componentOrHandle: any): ?number {
return hostInstance._nativeTag;
}

ReactGenericBatching.injection.injectRenderer(ReactNativeFiberRenderer);
ReactGenericBatching.setBatchingImplementation(
ReactNativeFiberRenderer.batchedUpdates,
ReactNativeFiberRenderer.interactiveUpdates,
ReactNativeFiberRenderer.flushInteractiveUpdates,
);

function computeComponentStackForErrorReporting(reactTag: number): string {
let fiber = ReactNativeComponentTree.getClosestInstanceFromNode(reactTag);
Expand Down

0 comments on commit 4b32f52

Please sign in to comment.