Add deprecation warnings to React module

packages/react/react.js

@@ -1,54 +1,3 @@
-/* eslint-disable comma-dangle */
 'use strict';
 
-var React = require('./lib/React');
-
-var assign = require('./lib/Object.assign');
-var deprecated = require('./lib/deprecated');
-
-// We want to warn once when any of these methods are used.
-if (process.env.NODE_ENV !== 'production') {
-  var deprecations = {
-    // ReactDOM
-    findDOMNode: deprecated(
-      'findDOMNode',
-      'react-dom',
-      React,
-      React.findDOMNode
-    ),
-    render: deprecated(
-      'render',
-      'react-dom',
-      React,
-      React.render
-    ),
-    unmountComponentAtNode: deprecated(
-      'unmountComponentAtNode',
-      'react-dom',
-      React,
-      React.unmountComponentAtNode
-    ),
-    // ReactDOMServer
-    renderToString: deprecated(
-      'renderToString',
-      'react-dom/server',
-      React,
-      React.renderToString
-    ),
-    renderToStaticMarkup: deprecated(
-      'renderToStaticMarkup',
-      'react-dom/server',
-      React,
-      React.renderToStaticMarkup
-    )
-  };
-  // Export a wrapped object. We'll use assign and take advantage of the fact
-  // that this will override the original methods in React.
-  module.exports = assign(
-    {},
-    React,
-    deprecations
-  );
-} else {
-  module.exports = React;
-}
+module.exports = require('./lib/React');

src/React.js

@@ -16,12 +16,52 @@ var ReactDOMServer = require('ReactDOMServer');
 var ReactIsomorphic = require('ReactIsomorphic');
 
 var assign = require('Object.assign');
+var deprecated = require('deprecated');
 
 var React = {};
 
 assign(React, ReactIsomorphic);
-assign(React, ReactDOM);
-assign(React, ReactDOMServer);
+
+assign(React, {
+  // ReactDOM
+  findDOMNode: deprecated(
+    'findDOMNode',
+    'ReactDOM',
+    'react-dom',
+    ReactDOM,
+    ReactDOM.findDOMNode
+  ),
+  render: deprecated(
+    'render',
+    'ReactDOM',
+    'react-dom',
+    ReactDOM,
+    ReactDOM.render
+  ),
+  unmountComponentAtNode: deprecated(
+    'unmountComponentAtNode',
+    'ReactDOM',
+    'react-dom',
+    ReactDOM,
+    ReactDOM.unmountComponentAtNode
+  ),
+
+  // ReactDOMServer
+  renderToString: deprecated(
+    'renderToString',
+    'ReactDOMServer',
+    'react-dom/server',
+    ReactDOMServer,
+    ReactDOMServer.renderToString
+  ),
+  renderToStaticMarkup: deprecated(
+    'renderToStaticMarkup',
+    'ReactDOMServer',
+    'react-dom/server',
+    ReactDOMServer,
+    ReactDOMServer.renderToStaticMarkup
+  ),
+});
 
 React.version = '0.14.0-beta3';
 

src/isomorphic/modern/class/__tests__/ReactCoffeeScriptClass-test.coffee

@@ -8,6 +8,7 @@ of patent rights can be found in the PATENTS file in the same directory.
 ###
 
 React = null
+ReactDOM = null
 
 describe 'ReactCoffeeScriptClass', ->
   div = null
@@ -19,6 +20,7 @@ describe 'ReactCoffeeScriptClass', ->
 
   beforeEach ->
     React = require 'React'
+    ReactDOM = require 'ReactDOM'
     container = document.createElement 'div'
     attachedListener = null
     renderedName = null
@@ -33,7 +35,7 @@ describe 'ReactCoffeeScriptClass', ->
     Inner = React.createFactory InnerComponent
 
   test = (element, expectedTag, expectedClassName) ->
-    instance = React.render(element, container)
+    instance = ReactDOM.render(element, container)
     expect(container.firstChild).not.toBeNull()
     expect(container.firstChild.tagName).toBe(expectedTag)
     expect(container.firstChild.className).toBe(expectedClassName)
@@ -47,7 +49,7 @@ describe 'ReactCoffeeScriptClass', ->
     spyOn console, 'error'
     class Foo extends React.Component
     expect(->
-      React.render React.createElement(Foo), container
+      ReactDOM.render React.createElement(Foo), container
     ).toThrow()
     expect(console.error.calls.length).toBe(1)
     expect(console.error.calls[0].args[0]).toContain('No `render` method found on the returned component instance')
@@ -262,7 +264,7 @@ describe 'ReactCoffeeScriptClass', ->
       'did-update',    { value: 'foo' }, {}
     ]
     lifeCycles = [] # reset
-    React.unmountComponentAtNode container
+    ReactDOM.unmountComponentAtNode container
     expect(lifeCycles).toEqual ['will-unmount']
 
   it 'warns when classic properties are defined on the instance,
@@ -394,5 +396,5 @@ describe 'ReactCoffeeScriptClass', ->
 
   it 'supports drilling through to the DOM using findDOMNode', ->
     instance = test Inner(name: 'foo'), 'DIV', 'foo'
-    node = React.findDOMNode(instance)
+    node = ReactDOM.findDOMNode(instance)
     expect(node).toBe container.firstChild

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -729,7 +729,7 @@ describe('ReactDOMComponent', function() {
       });
 
       expect(function() {
-        React.render(<Animal/>, container);
+        ReactDOM.render(<Animal/>, container);
       }).toThrow(
         'Invariant Violation: The `style` prop expects a mapping from style ' +
         'properties to values, not a string. For example, ' +

src/renderers/shared/reconciler/__tests__/ReactStatelessComponent-test.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React;
+var ReactDOM;
 var ReactTestUtils;
 
 function StatelessComponent(props) {
@@ -22,12 +23,13 @@ describe('ReactStatelessComponent', function() {
 
   beforeEach(function() {
     React = require('React');
+    ReactDOM = require('ReactDOM');
     ReactTestUtils = require('ReactTestUtils');
   });
 
   it('should render stateless component', function() {
     var el = document.createElement('div');
-    React.render(<StatelessComponent name="A" />, el);
+    ReactDOM.render(<StatelessComponent name="A" />, el);
 
     expect(el.textContent).toBe('A');
   });
@@ -40,20 +42,20 @@ describe('ReactStatelessComponent', function() {
     });
 
     var el = document.createElement('div');
-    React.render(<Parent name="A" />, el);
+    ReactDOM.render(<Parent name="A" />, el);
     expect(el.textContent).toBe('A');
 
-    React.render(<Parent name="B" />, el);
+    ReactDOM.render(<Parent name="B" />, el);
     expect(el.textContent).toBe('B');
   });
 
   it('should unmount stateless component', function() {
     var container = document.createElement('div');
 
-    React.render(<StatelessComponent name="A" />, container);
+    ReactDOM.render(<StatelessComponent name="A" />, container);
     expect(container.textContent).toBe('A');
 
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
     expect(container.textContent).toBe('');
   });
 
@@ -87,11 +89,11 @@ describe('ReactStatelessComponent', function() {
     });
 
     var el = document.createElement('div');
-    React.render(<GrandParent test="test" />, el);
+    ReactDOM.render(<GrandParent test="test" />, el);
 
     expect(el.textContent).toBe('test');
 
-    React.render(<GrandParent test="mest" />, el);
+    ReactDOM.render(<GrandParent test="mest" />, el);
 
     expect(el.textContent).toBe('mest');
   });
@@ -106,7 +108,7 @@ describe('ReactStatelessComponent', function() {
     }
 
     var el = document.createElement('div');
-    React.render(<Child test="test" />, el);
+    ReactDOM.render(<Child test="test" />, el);
 
     expect(el.textContent).toBe('test');
   });
@@ -178,7 +180,7 @@ describe('ReactStatelessComponent', function() {
     Child.contextTypes = {lang: React.PropTypes.string};
 
     var el = document.createElement('div');
-    React.render(<Parent />, el);
+    ReactDOM.render(<Parent />, el);
     expect(el.textContent).toBe('en');
   });
 });

src/shared/utils/deprecated.js

@@ -20,11 +20,12 @@ var warning = require('warning');
  *
  * @param {string} fnName The name of the function
  * @param {string} newModule The module that fn will exist in
+ * @param {string} newPackage The module that fn will exist in
  * @param {*} ctx The context this forwarded call should run in
  * @param {function} fn The function to forward on to
  * @return {function} The function that will warn once and then call fn
  */
-function deprecated(fnName, newModule, ctx, fn) {
+function deprecated(fnName, newModule, newPackage, ctx, fn) {
   var warned = false;
   if (__DEV__) {
     var newFn = function() {
@@ -33,11 +34,12 @@ function deprecated(fnName, newModule, ctx, fn) {
         // Require examples in this string must be split to prevent React's
         // build tools from mistaking them for real requires.
         // Otherwise the build tools will attempt to build a '%s' module.
-        '`require' + '("react").%s` is deprecated. Please use `require' + '("%s").%s` ' +
+        'React.%s is deprecated. Please use %s.%s from require' + '(\'%s\') ' +
         'instead.',
         fnName,
         newModule,
-        fnName
+        fnName,
+        newPackage
       );
       warned = true;
       return fn.apply(ctx, arguments);

src/test/__tests__/ReactTestUtils-test.js

@@ -338,9 +338,9 @@ describe('ReactTestUtils', function() {
   it('should change the value of an input field', function() {
     var handler = jasmine.createSpy('spy');
     var container = document.createElement('div');
-    var instance = React.render(<input type="text" onChange={handler} />, container);
+    var instance = ReactDOM.render(<input type="text" onChange={handler} />, container);
 
-    var node = React.findDOMNode(instance);
+    var node = ReactDOM.findDOMNode(instance);
     node.value = 'giraffe';
     ReactTestUtils.Simulate.change(node);
 
@@ -360,9 +360,9 @@ describe('ReactTestUtils', function() {
 
     var handler = jasmine.createSpy('spy');
     var container = document.createElement('div');
-    var instance = React.render(<SomeComponent handleChange={handler} />, container);
+    var instance = ReactDOM.render(<SomeComponent handleChange={handler} />, container);
 
-    var node = React.findDOMNode(instance.refs.input);
+    var node = ReactDOM.findDOMNode(instance.refs.input);
     node.value = 'zebra';
     ReactTestUtils.Simulate.change(node);