Fix AMD and Brunch issues (#8686)
* Add manual build fixtures * Inject ReactDOM into ReactWithAddons from ReactWithAddons 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. * Memoize ReactDOM to avoid going into require on every access * Add Brunch fixture * Inline requires to work around Brunch bug See #8556 and https://github.com/brunch/brunch/issues/1591#issuecomment-270742503 for context. This appears to be a Brunch bug but we can keep a temporary fix until the next major.
Dan Abramov committed
Jan 5, 2017 at 13:16 UTC
ca2c71c0c5e8bb9722b58b0309398c69d1b9642d
44 files changed
+586
-87
fixtures/README.md
new
+50
@@ -0,0 +1,50 @@
1
+# Manual Testing Fixtures
2
+
3
+This folder exists for **React contributors** only.
4
+If you use React you don't need to worry about it.
5
+
6
+These fixtures verify that the built React distributions are usable in different environments.
7
+**They are not running automatically.** (At least not yet, feel free to contribute to automate them.)
8
+
9
+Run them when you make changes to how we package React, ReactDOM, and addons.
10
+
11
+## How to Run
12
+
13
+First, build React and the fixtures:
14
+
15
+```
16
+cd react
17
+npm run build
18
+
19
+cd fixtures
20
+node build-all.js
21
+```
22
+
23
+Then run a local server at the root of the repo, e.g.
24
+
25
+```
26
+npm i -g pushstate-server
27
+cd ..
28
+pushstate-server .
29
+```
30
+
31
+(Too complicated? Send a PR to simplify this :-).
32
+
33
+Then open the corresponding URLs, for example:
34
+
35
+```
36
+open http://localhost:9000/fixtures/globals.html
37
+open http://localhost:9000/fixtures/requirejs.html
38
+open http://localhost:9000/fixtures/systemjs.html
39
+open http://localhost:9000/fixtures/browserify/index.html
40
+open http://localhost:9000/fixtures/brunch/index.html
41
+open http://localhost:9000/fixtures/rjs/index.html
42
+open http://localhost:9000/fixtures/systemjs-builder/index.html
43
+open http://localhost:9000/fixtures/webpack/index.html
44
+open http://localhost:9000/fixtures/webpack-alias/index.html
45
+```
46
+
47
+You should see two things:
48
+
49
+* "Hello World" fading in with an animation.
50
+* No errors in the console.
fixtures/browserify/.gitignore
new
+1
@@ -0,0 +1 @@
1
+output.js
fixtures/browserify/index.html
new
+16
@@ -0,0 +1,16 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="output.js"></script>
15
+ </body>
16
+</html>
\ No newline at end of file
fixtures/browserify/input.js
new
+16
@@ -0,0 +1,16 @@
1
+var React = require('react');
2
+var CSSTransitionGroup = require('react-addons-css-transition-group');
3
+var ReactDOM = require('react-dom');
4
+
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/browserify/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "webpack-test",
3
+ "private": true,
4
+ "dependencies": {
5
+ "browserify": "^13.3.0"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -f output.js && NODE_PATH=../../build/packages browserify ./input.js -o output.js"
9
+ }
10
+}
fixtures/brunch/.gitignore
new
+2
@@ -0,0 +1,2 @@
1
+output.js
2
+output.js.map
\ No newline at end of file
fixtures/brunch/app/initialize.js
new
+16
@@ -0,0 +1,16 @@
1
+var React = require('react');
2
+var CSSTransitionGroup = require('react-addons-css-transition-group');
3
+var ReactDOM = require('react-dom');
4
+
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/brunch/config.js
new
+10
@@ -0,0 +1,10 @@
1
+exports.config = {
2
+ paths: {
3
+ public: '.',
4
+ },
5
+ files: {
6
+ javascripts: {
7
+ joinTo: 'output.js',
8
+ },
9
+ },
10
+};
fixtures/brunch/index.html
new
+17
@@ -0,0 +1,17 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="output.js"></script>
15
+ <script>require('initialize');</script>
16
+ </body>
17
+</html>
\ No newline at end of file
fixtures/brunch/input.js
new
+16
@@ -0,0 +1,16 @@
1
+var React = require('react');
2
+var CSSTransitionGroup = require('react-addons-css-transition-group');
3
+var ReactDOM = require('react-dom');
4
+
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/brunch/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "brunch-test",
3
+ "devDependencies": {
4
+ "brunch": "^2.9.1",
5
+ "javascript-brunch": "^2.0.0"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -rf public && ln -fs ../../../build/packages/react node_modules/react && ln -fs ../../../build/packages/react-dom node_modules/react-dom && ln -fs ../../../build/packages/react-addons-css-transition-group node_modules/react-addons-css-transition-group && brunch build"
9
+ }
10
+}
\ No newline at end of file
fixtures/build-all.js
new
+30
@@ -0,0 +1,30 @@
1
+var fs = require('fs');
2
+var path = require('path');
3
+var { spawnSync } = require('child_process');
4
+
5
+var fixtureDirs = fs.readdirSync(__dirname).filter((file) => {
6
+ return fs.statSync(path.join(__dirname, file)).isDirectory();
7
+});
8
+
9
+var cmdArgs = [
10
+ {cmd: 'npm', args: ['install']},
11
+ {cmd: 'npm', args: ['run', 'build']},
12
+];
13
+
14
+for (const dir of fixtureDirs) {
15
+ for (const cmdArg of cmdArgs) {
16
+ const opts = {
17
+ cwd: path.join(__dirname, dir),
18
+ stdio: 'inherit',
19
+ };
20
+ let result = spawnSync(cmdArg.cmd, cmdArg.args, opts);
21
+ if (result.status !== 0) {
22
+ throw new Error('Failed to build fixtures.');
23
+ }
24
+ }
25
+}
26
+
27
+console.log('-------------------------');
28
+console.log('All fixtures were built!');
29
+console.log('Now make sure to open each HTML file in this directory and each index.html in subdirectories.');
30
+console.log('-------------------------');
fixtures/globals.html
new
+32
@@ -0,0 +1,32 @@
1
+<html>
2
+ <body>
3
+ <script src="../build/react-with-addons.js"></script>
4
+ <script src="../build/react-dom.js"></script>
5
+ <style>
6
+ .example-appear {
7
+ opacity: 0.01;
8
+ }
9
+
10
+ .example-appear.example-appear-active {
11
+ opacity: 1;
12
+ transition: opacity .5s ease-in;
13
+ }
14
+ </style>
15
+ <div id="container"></div>
16
+ <script>
17
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
18
+ ReactDOM.render(
19
+ React.createElement(CSSTransitionGroup, {
20
+ transitionName: 'example',
21
+ transitionAppear: true,
22
+ transitionAppearTimeout: 500,
23
+ transitionEnterTimeout: 0,
24
+ transitionLeaveTimeout: 0,
25
+ }, React.createElement('h1', null,
26
+ 'Hello World!'
27
+ )),
28
+ document.getElementById('container')
29
+ );
30
+ </script>
31
+ </body>
32
+</html>
\ No newline at end of file
fixtures/requirejs.html
new
+40
@@ -0,0 +1,40 @@
1
+<html>
2
+ <body>
3
+ <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
4
+ <style>
5
+ .example-appear {
6
+ opacity: 0.01;
7
+ }
8
+
9
+ .example-appear.example-appear-active {
10
+ opacity: 1;
11
+ transition: opacity .5s ease-in;
12
+ }
13
+ </style>
14
+ <div id="container"></div>
15
+ <script>
16
+ requirejs.config({
17
+ paths: {
18
+ react: '../build/react-with-addons',
19
+ 'react-dom': '../build/react-dom'
20
+ }
21
+ });
22
+
23
+ require(['react', 'react-dom'], function(React, ReactDOM) {
24
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
25
+ ReactDOM.render(
26
+ React.createElement(CSSTransitionGroup, {
27
+ transitionName: 'example',
28
+ transitionAppear: true,
29
+ transitionAppearTimeout: 500,
30
+ transitionEnterTimeout: 0,
31
+ transitionLeaveTimeout: 0,
32
+ }, React.createElement('h1', null,
33
+ 'Hello World!'
34
+ )),
35
+ document.getElementById('container')
36
+ );
37
+ });
38
+ </script>
39
+ </body>
40
+</html>
\ No newline at end of file
fixtures/rjs/.gitignore
new
+1
@@ -0,0 +1 @@
1
+output.js
\ No newline at end of file
fixtures/rjs/config.js
new
+10
@@ -0,0 +1,10 @@
1
+module.exports = {
2
+ baseUrl: '.',
3
+ name: 'input',
4
+ out: 'output.js',
5
+ optimize: 'none',
6
+ paths: {
7
+ react: '../../build/react-with-addons',
8
+ 'react-dom': '../../build/react-dom',
9
+ },
10
+};
fixtures/rjs/index.html
new
+17
@@ -0,0 +1,17 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
15
+ <script src="output.js"></script>
16
+ </body>
17
+</html>
\ No newline at end of file
fixtures/rjs/input.js
new
+15
@@ -0,0 +1,15 @@
1
+require(['react', 'react-dom'], function(React, ReactDOM) {
2
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
3
+ ReactDOM.render(
4
+ React.createElement(CSSTransitionGroup, {
5
+ transitionName: 'example',
6
+ transitionAppear: true,
7
+ transitionAppearTimeout: 500,
8
+ transitionEnterTimeout: 0,
9
+ transitionLeaveTimeout: 0,
10
+ }, React.createElement('h1', null,
11
+ 'Hello World!'
12
+ )),
13
+ document.getElementById('container')
14
+ );
15
+});
fixtures/rjs/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "rjs-test",
3
+ "private": true,
4
+ "dependencies": {
5
+ "requirejs": "^2.3.2"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -f output.js && r.js -o config.js"
9
+ }
10
+}
fixtures/systemjs-builder/.gitignore
new
+1
@@ -0,0 +1 @@
1
+output.js
\ No newline at end of file
fixtures/systemjs-builder/build.js
new
+12
@@ -0,0 +1,12 @@
1
+var Builder = require('systemjs-builder');
2
+
3
+var builder = new Builder('/', './config.js');
4
+builder
5
+ .buildStatic('./input.js', './output.js')
6
+ .then(function() {
7
+ console.log('Build complete');
8
+ })
9
+ .catch(function(err) {
10
+ console.log('Build error');
11
+ console.log(err);
12
+ });
fixtures/systemjs-builder/config.js
new
+6
@@ -0,0 +1,6 @@
1
+System.config({
2
+ paths: {
3
+ react: '../../build/react-with-addons.js',
4
+ 'react-dom': '../../build/react-dom.js',
5
+ },
6
+});
fixtures/systemjs-builder/index.html
new
+16
@@ -0,0 +1,16 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="output.js"></script>
15
+ </body>
16
+</html>
\ No newline at end of file
fixtures/systemjs-builder/input.js
new
+16
@@ -0,0 +1,16 @@
1
+import React from 'react';
2
+import ReactDOM from 'react-dom';
3
+
4
+var CSSTransitionGroup = React.addons.CSSTransitionGroup;
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/systemjs-builder/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "systemjs-builder-test",
3
+ "private": true,
4
+ "dependencies": {
5
+ "systemjs-builder": "^0.15.34"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -f output.js && node build.js"
9
+ }
10
+}
fixtures/systemjs.html
new
+46
@@ -0,0 +1,46 @@
1
+<html>
2
+ <body>
3
+ <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
4
+ <style>
5
+ .example-appear {
6
+ opacity: 0.01;
7
+ }
8
+
9
+ .example-appear.example-appear-active {
10
+ opacity: 1;
11
+ transition: opacity .5s ease-in;
12
+ }
13
+ </style>
14
+ <div id="container"></div>
15
+ <script>
16
+ System.config({
17
+ paths: {
18
+ react: '../build/react-with-addons.js',
19
+ 'react-dom': '../build/react-dom.js'
20
+ }
21
+ });
22
+
23
+ Promise.all([
24
+ System.import("react"),
25
+ System.import("react-dom")
26
+ ]).then(function (deps) {
27
+ var React = deps[0];
28
+ var ReactDOM = deps[1];
29
+
30
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
31
+ ReactDOM.render(
32
+ React.createElement(CSSTransitionGroup, {
33
+ transitionName: 'example',
34
+ transitionAppear: true,
35
+ transitionAppearTimeout: 500,
36
+ transitionEnterTimeout: 0,
37
+ transitionLeaveTimeout: 0,
38
+ }, React.createElement('h1', null,
39
+ 'Hello World!'
40
+ )),
41
+ document.getElementById('container')
42
+ );
43
+ });
44
+ </script>
45
+ </body>
46
+</html>
\ No newline at end of file
fixtures/webpack-alias/.gitignore
new
+1
@@ -0,0 +1 @@
1
+output.js
\ No newline at end of file
fixtures/webpack-alias/config.js
new
+13
@@ -0,0 +1,13 @@
1
+module.exports = {
2
+ entry: './input',
3
+ output: {
4
+ filename: 'output.js',
5
+ },
6
+ resolve: {
7
+ root: '../../build/packages',
8
+ alias: {
9
+ 'react': 'react/dist/react-with-addons',
10
+ 'react-dom': 'react-dom/dist/react-dom',
11
+ },
12
+ },
13
+};
fixtures/webpack-alias/index.html
new
+16
@@ -0,0 +1,16 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="output.js"></script>
15
+ </body>
16
+</html>
\ No newline at end of file
fixtures/webpack-alias/input.js
new
+16
@@ -0,0 +1,16 @@
1
+var React = require('react');
2
+var ReactDOM = require('react-dom');
3
+
4
+var CSSTransitionGroup = React.addons.CSSTransitionGroup;
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/webpack-alias/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "webpack-test",
3
+ "private": true,
4
+ "dependencies": {
5
+ "webpack": "^1.14.0"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -f output.js && webpack --config config.js"
9
+ }
10
+}
fixtures/webpack/.gitignore
new
+1
@@ -0,0 +1 @@
1
+output.js
\ No newline at end of file
fixtures/webpack/config.js
new
+9
@@ -0,0 +1,9 @@
1
+module.exports = {
2
+ entry: './input',
3
+ output: {
4
+ filename: 'output.js',
5
+ },
6
+ resolve: {
7
+ root: '../../build/packages',
8
+ },
9
+};
fixtures/webpack/index.html
new
+16
@@ -0,0 +1,16 @@
1
+<html>
2
+ <body>
3
+ <style>
4
+ .example-appear {
5
+ opacity: 0.01;
6
+ }
7
+
8
+ .example-appear.example-appear-active {
9
+ opacity: 1;
10
+ transition: opacity .5s ease-in;
11
+ }
12
+ </style>
13
+ <div id="container"></div>
14
+ <script src="output.js"></script>
15
+ </body>
16
+</html>
\ No newline at end of file
fixtures/webpack/input.js
new
+16
@@ -0,0 +1,16 @@
1
+var React = require('react');
2
+var CSSTransitionGroup = require('react-addons-css-transition-group');
3
+var ReactDOM = require('react-dom');
4
+
5
+ReactDOM.render(
6
+ React.createElement(CSSTransitionGroup, {
7
+ transitionName: 'example',
8
+ transitionAppear: true,
9
+ transitionAppearTimeout: 500,
10
+ transitionEnterTimeout: 0,
11
+ transitionLeaveTimeout: 0,
12
+ }, React.createElement('h1', null,
13
+ 'Hello World!'
14
+ )),
15
+ document.getElementById('container')
16
+);
fixtures/webpack/package.json
new
+10
@@ -0,0 +1,10 @@
1
+{
2
+ "name": "webpack-test",
3
+ "private": true,
4
+ "dependencies": {
5
+ "webpack": "^1.14.0"
6
+ },
7
+ "scripts": {
8
+ "build": "rm -f output.js && webpack --config config.js"
9
+ }
10
+}
scripts/fiber/tests-passing-except-dev.txt
-3
@@ -1,6 +1,3 @@
1
-src/addons/transitions/__tests__/ReactTransitionGroup-test.js
2
-* should warn for duplicated keys with component stack info
3
-
1
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
2
* should not warn when server-side rendering `onScroll`
3
* should warn about incorrect casing on properties (ssr)
scripts/fiber/tests-passing.txt
+1
@@ -105,6 +105,7 @@ src/addons/transitions/__tests__/ReactTransitionGroup-test.js
105
* should handle enter/leave/enter/leave correctly
106
* should handle enter/leave/enter correctly
107
* should handle entering/leaving several elements at once
108
+* should warn for duplicated keys
109
110
src/isomorphic/children/__tests__/ReactChildren-test.js
111
* should support identity for simple
src/addons/ReactAddonsDOMDependencies.js
+8
-7
@@ -12,25 +12,26 @@
12
'use strict';
13
14
var ReactDOM = require('ReactDOM');
15
-var ReactInstanceMap = require('ReactInstanceMap');
15
16
exports.getReactDOM = function() {
17
return ReactDOM;
18
};
19
21
-exports.getReactInstanceMap = function() {
22
- return ReactInstanceMap;
23
-};
24
-
20
if (__DEV__) {
26
- var ReactPerf = require('ReactPerf');
27
- var ReactTestUtils = require('ReactTestUtils');
21
+ var ReactPerf;
22
+ var ReactTestUtils;
23
24
exports.getReactPerf = function() {
25
+ if (!ReactPerf) {
26
+ ReactPerf = require('ReactPerf');
27
+ }
28
return ReactPerf;
29
};
30
31
exports.getReactTestUtils = function() {
32
+ if (!ReactTestUtils) {
33
+ ReactTestUtils = require('ReactTestUtils');
34
+ }
35
return ReactTestUtils;
36
};
37
}
src/addons/transitions/ReactTransitionGroup.js
+12
-45
@@ -12,7 +12,6 @@
12
'use strict';
13
14
var React = require('React');
15
-var ReactAddonsDOMDependencies = require('ReactAddonsDOMDependencies');
15
var ReactTransitionChildMapping = require('ReactTransitionChildMapping');
16
17
var emptyFunction = require('emptyFunction');
@@ -56,17 +55,9 @@ class ReactTransitionGroup extends React.Component {
55
}
56
57
componentWillReceiveProps(nextProps) {
59
- var nextChildMapping;
60
- if (__DEV__) {
61
- nextChildMapping = ReactTransitionChildMapping.getChildMapping(
62
- nextProps.children,
63
- ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
64
- );
65
- } else {
66
- nextChildMapping = ReactTransitionChildMapping.getChildMapping(
67
- nextProps.children
68
- );
69
- }
58
+ var nextChildMapping = ReactTransitionChildMapping.getChildMapping(
59
+ nextProps.children
60
+ );
61
var prevChildMapping = this.state.children;
62
63
this.setState({
@@ -129,17 +120,9 @@ class ReactTransitionGroup extends React.Component {
120
121
delete this.currentlyTransitioningKeys[key];
122
132
- var currentChildMapping;
133
- if (__DEV__) {
134
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
135
- this.props.children,
136
- ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
137
- );
138
- } else {
139
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
140
- this.props.children
141
- );
142
- }
123
+ var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
124
+ this.props.children
125
+ );
126
127
if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
128
// This was removed before it had fully appeared. Remove it.
@@ -169,17 +152,9 @@ class ReactTransitionGroup extends React.Component {
152
153
delete this.currentlyTransitioningKeys[key];
154
172
- var currentChildMapping;
173
- if (__DEV__) {
174
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
175
- this.props.children,
176
- ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
177
- );
178
- } else {
179
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
180
- this.props.children
181
- );
182
- }
155
+ var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
156
+ this.props.children
157
+ );
158
159
if (!currentChildMapping || !currentChildMapping.hasOwnProperty(key)) {
160
// This was removed before it had fully entered. Remove it.
@@ -210,17 +185,9 @@ class ReactTransitionGroup extends React.Component {
185
186
delete this.currentlyTransitioningKeys[key];
187
213
- var currentChildMapping;
214
- if (__DEV__) {
215
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
216
- this.props.children,
217
- ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
218
- );
219
- } else {
220
- currentChildMapping = ReactTransitionChildMapping.getChildMapping(
221
- this.props.children
222
- );
223
- }
188
+ var currentChildMapping = ReactTransitionChildMapping.getChildMapping(
189
+ this.props.children
190
+ );
191
192
if (currentChildMapping && currentChildMapping.hasOwnProperty(key)) {
193
// This entered again before it fully left. Add it again.
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+3
-9
@@ -20,10 +20,6 @@ var ReactTransitionGroup;
20
describe('ReactTransitionGroup', () => {
21
var container;
22
23
- function normalizeCodeLocInfo(str) {
24
- return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
25
- }
26
-
23
beforeEach(() => {
24
React = require('React');
25
ReactDOM = require('ReactDOM');
@@ -296,7 +292,7 @@ describe('ReactTransitionGroup', () => {
292
]);
293
});
294
299
- it('should warn for duplicated keys with component stack info', () => {
295
+ it('should warn for duplicated keys', () => {
296
spyOn(console, 'error');
297
298
class Component extends React.Component {
@@ -315,13 +311,11 @@ describe('ReactTransitionGroup', () => {
311
'Child keys must be unique; when two children share a key, ' +
312
'only the first child will be used.'
313
);
318
- expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
314
+ expectDev(console.error.calls.argsFor(1)[0]).toBe(
315
'Warning: flattenChildren(...): ' +
316
'Encountered two children with the same key, `1`. ' +
317
'Child keys must be unique; when two children share a key, ' +
322
- 'only the first child will be used.\n' +
323
- ' in ReactTransitionGroup (at **)\n' +
324
- ' in Component (at **)'
318
+ 'only the first child will be used.'
319
);
320
});
321
});
src/umd/ReactDOMUMDEntry.js
+14
-14
@@ -11,24 +11,24 @@
11
12
'use strict';
13
14
+var React = require('React');
15
var ReactDOM = require('ReactDOM');
16
16
-var ReactDOMUMDEntry = Object.assign({
17
- __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
18
- ReactInstanceMap: require('ReactInstanceMap'),
19
- },
20
-}, ReactDOM);
17
+var ReactDOMUMDEntry = ReactDOM;
18
19
if (__DEV__) {
23
- Object.assign(
24
- ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
25
- {
26
- // ReactPerf and ReactTestUtils currently only work with the DOM renderer
27
- // so we expose them from here, but only in DEV mode.
28
- ReactPerf: require('ReactPerf'),
29
- ReactTestUtils: require('ReactTestUtils'),
30
- }
31
- );
20
+ ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
21
+ // ReactPerf and ReactTestUtils currently only work with the DOM renderer
22
+ // so we expose them from here, but only in DEV mode.
23
+ ReactPerf: require('ReactPerf'),
24
+ ReactTestUtils: require('ReactTestUtils'),
25
+ };
26
+}
27
+
28
+// Inject ReactDOM into React for the addons UMD build that depends on ReactDOM (TransitionGroup).
29
+// We can remove this after we deprecate and remove the addons UMD build.
30
+if (React.addons) {
31
+ React.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOMUMDEntry;
32
}
33
34
module.exports = ReactDOMUMDEntry;
src/umd/ReactWithAddonsUMDEntry.js
+1
@@ -15,6 +15,7 @@ var ReactWithAddons = require('ReactWithAddons');
15
16
// `version` will be added here by the React module.
17
var ReactWithAddonsUMDEntry = Object.assign({
18
+ __SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: null, // Will be injected by ReactDOM UMD build.
19
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
20
ReactCurrentOwner: require('ReactCurrentOwner'),
21
},
src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js
+13
-9
@@ -9,24 +9,28 @@
9
* @providesModule ReactAddonsDOMDependenciesUMDShim
10
*/
11
12
-/* globals ReactDOM */
13
-
12
'use strict';
13
16
-exports.getReactDOM = function() {
14
+var ReactDOM;
15
+
16
+function getReactDOM() {
17
+ if (!ReactDOM) {
18
+ // This is safe to use because current module only exists in the addons build:
19
+ var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry');
20
+ // This is injected by the ReactDOM UMD build:
21
+ ReactDOM = ReactWithAddonsUMDEntry.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
22
+ }
23
return ReactDOM;
18
-};
24
+}
25
20
-exports.getReactInstanceMap = function() {
21
- return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap;
22
-};
26
+exports.getReactDOM = getReactDOM;
27
28
if (__DEV__) {
29
exports.getReactPerf = function() {
26
- return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
30
+ return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
31
};
32
33
exports.getReactTestUtils = function() {
30
- return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
34
+ return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
35
};
36
}