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 a03353f commit baac473
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 71 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
10 changes: 3 additions & 7 deletions src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,12 @@
* @providesModule ReactAddonsDOMDependenciesUMDShim
*/

/* globals ReactDOM */

'use strict';

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

exports.getReactInstanceMap = function() {
return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap;
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;
};

if (__DEV__) {
Expand Down

0 comments on commit baac473

Please sign in to comment.