Skip to content

Commit

Permalink
Inject ReactDOM into ReactWithAddons from ReactWithAddons
Browse files Browse the repository at this point in the history
We used to read ReactDOM as a global inside ReactAddonsDOMDependenciesUMDShim.
This didn't work in AMD environments such as RequireJS and SystemJS.

Instead, I changed it so that ReactDOM gets injected into ReactWithAddons by ReactDOM itself.
This way we don't have to try to require it (which wouldn't work because AMD doesn't handle circular dependencies well).

This means you have to load ReactDOM first before using ReactDOM-dependent addons, but this was already the case before.

This commit makes all build fixtures pass.
  • Loading branch information
gaearon committed Jan 5, 2017
1 parent cebff96 commit ce864e3
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 74 deletions.
5 changes: 0 additions & 5 deletions src/addons/ReactAddonsDOMDependencies.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,11 @@
'use strict';

var ReactDOM = require('ReactDOM');
var ReactInstanceMap = require('ReactInstanceMap');

exports.getReactDOM = function() {
return ReactDOM;
};

exports.getReactInstanceMap = function() {
return ReactInstanceMap;
};

if (__DEV__) {
var ReactPerf = require('ReactPerf');
var ReactTestUtils = require('ReactTestUtils');
Expand Down
57 changes: 12 additions & 45 deletions src/addons/transitions/ReactTransitionGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
'use strict';

var React = require('React');
var ReactAddonsDOMDependencies = require('ReactAddonsDOMDependencies');
var ReactTransitionChildMapping = require('ReactTransitionChildMapping');

var emptyFunction = require('emptyFunction');
Expand Down Expand Up @@ -56,17 +55,9 @@ class ReactTransitionGroup extends React.Component {
}

componentWillReceiveProps(nextProps) {
var nextChildMapping;
if (__DEV__) {
nextChildMapping = ReactTransitionChildMapping.getChildMapping(
nextProps.children,
ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
);
} else {
nextChildMapping = ReactTransitionChildMapping.getChildMapping(
nextProps.children
);
}
var nextChildMapping = ReactTransitionChildMapping.getChildMapping(
nextProps.children
);
var prevChildMapping = this.state.children;

this.setState({
Expand Down Expand Up @@ -129,17 +120,9 @@ class ReactTransitionGroup extends React.Component {

delete this.currentlyTransitioningKeys[key];

var currentChildMapping;
if (__DEV__) {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children,
ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
);
} else {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);
}
var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);

if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
// This was removed before it had fully appeared. Remove it.
Expand Down Expand Up @@ -169,17 +152,9 @@ class ReactTransitionGroup extends React.Component {

delete this.currentlyTransitioningKeys[key];

var currentChildMapping;
if (__DEV__) {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children,
ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
);
} else {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);
}
var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);

if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
// This was removed before it had fully entered. Remove it.
Expand Down Expand Up @@ -210,17 +185,9 @@ class ReactTransitionGroup extends React.Component {

delete this.currentlyTransitioningKeys[key];

var currentChildMapping;
if (__DEV__) {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children,
ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
);
} else {
currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);
}
var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
this.props.children
);

if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
// This entered again before it fully left. Add it again.
Expand Down
28 changes: 14 additions & 14 deletions src/umd/ReactDOMUMDEntry.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@

'use strict';

var React = require('React');
var ReactDOM = require('ReactDOM');

var ReactDOMUMDEntry = Object.assign({
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
ReactInstanceMap: require('ReactInstanceMap'),
},
}, ReactDOM);
var ReactDOMUMDEntry = ReactDOM;

if (__DEV__) {
Object.assign(
ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
{
// ReactPerf and ReactTestUtils currently only work with the DOM renderer
// so we expose them from here, but only in DEV mode.
ReactPerf: require('ReactPerf'),
ReactTestUtils: require('ReactTestUtils'),
}
);
ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
// ReactPerf and ReactTestUtils currently only work with the DOM renderer
// so we expose them from here, but only in DEV mode.
ReactPerf: require('ReactPerf'),
ReactTestUtils: require('ReactTestUtils'),
};
}

// Inject ReactDOM into React for the addons UMD build that depends on ReactDOM (TransitionGroup).
// We can remove this after we deprecate and remove the addons UMD build.
if (React.addons) {
React.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOMUMDEntry;
}

module.exports = ReactDOMUMDEntry;
1 change: 1 addition & 0 deletions src/umd/ReactWithAddonsUMDEntry.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var ReactWithAddons = require('ReactWithAddons');

// `version` will be added here by the React module.
var ReactWithAddonsUMDEntry = Object.assign({
__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: null, // Will be injected by ReactDOM UMD build.
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
ReactCurrentOwner: require('ReactCurrentOwner'),
},
Expand Down
18 changes: 8 additions & 10 deletions src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,22 @@
* @providesModule ReactAddonsDOMDependenciesUMDShim
*/

/* globals ReactDOM */

'use strict';

exports.getReactDOM = function() {
return ReactDOM;
};
function getReactDOM() {
var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry');
// This is injected by the ReactDOM UMD build:
return ReactWithAddonsUMDEntry.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
}

exports.getReactInstanceMap = function() {
return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap;
};
exports.getReactDOM = getReactDOM;

if (__DEV__) {
exports.getReactPerf = function() {
return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
};

exports.getReactTestUtils = function() {
return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
};
}

0 comments on commit ce864e3

Please sign in to comment.