From 4e5543965d9d126415791750a2056d14277f3cdc Mon Sep 17 00:00:00 2001 From: Jim Date: Tue, 10 Feb 2015 13:42:44 -0800 Subject: [PATCH] Flip console.warn to use warning module so users can intercept all warnings by shimming the warning module. The two remaining console.warns are: /Users/jsproch/react/src/test/mock-modules.js: 19 return mocks.generateFromMetadata(mocks.getMetadata(exports)); 20 } catch (err) { 21: console.warn(err); 22 return exports; 23 } /Users/jsproch/react/src/vendor/core/warning.js: 39 var argIndex = 0; 40 var message = 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]); 41: console.warn(message); 42 try { 43 // --- Welcome to debugging React --- --- .../ReactCSSTransitionGroupChild.js | 9 +++-- src/browser/ui/ReactDOMComponent.js | 25 ++++++------- src/browser/ui/ReactMount.js | 12 ++++--- .../ui/__tests__/ReactDOMComponent-test.js | 2 +- src/classic/class/ReactClass.js | 35 +++++++++---------- .../class/__tests__/ReactClass-test.js | 4 +-- src/classic/element/ReactElementValidator.js | 10 ++---- src/core/ReactCompositeComponent.js | 13 ++++--- .../__tests__/ReactCompositeComponent-test.js | 2 +- 9 files changed, 53 insertions(+), 59 deletions(-) diff --git a/src/addons/transitions/ReactCSSTransitionGroupChild.js b/src/addons/transitions/ReactCSSTransitionGroupChild.js index 3f96607022..573a30aaa4 100644 --- a/src/addons/transitions/ReactCSSTransitionGroupChild.js +++ b/src/addons/transitions/ReactCSSTransitionGroupChild.js @@ -18,6 +18,7 @@ var CSSCore = require('CSSCore'); var ReactTransitionEvents = require('ReactTransitionEvents'); var onlyChild = require('onlyChild'); +var warning = require('warning'); // We don't remove the element from the DOM until we receive an animationend or // transitionend event. If the user screws up and forgets to add an animation @@ -31,11 +32,13 @@ var noEventListener = null; if (__DEV__) { noEventListener = function() { - console.warn( + warning( + false, 'transition(): tried to perform an animation without ' + 'an animationend or transitionend event after timeout (' + - NO_EVENT_TIMEOUT + 'ms). You should either disable this ' + - 'transition in JS or add a CSS animation/transition.' + '%sms). You should either disable this ' + + 'transition in JS or add a CSS animation/transition.', + NO_EVENT_TIMEOUT ); }; } diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js index 7beeebd2bd..3d2c2332b8 100644 --- a/src/browser/ui/ReactDOMComponent.js +++ b/src/browser/ui/ReactDOMComponent.js @@ -29,7 +29,6 @@ var escapeTextContentForBrowser = require('escapeTextContentForBrowser'); var invariant = require('invariant'); var isEventSupported = require('isEventSupported'); var keyOf = require('keyOf'); -var monitorCodeUse = require('monitorCodeUse'); var warning = require('warning'); var deleteListener = ReactBrowserEventEmitter.deleteListener; @@ -74,14 +73,13 @@ function assertValidProps(props) { 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.' ); - if (props.contentEditable && props.children != null) { - console.warn( - 'A component is `contentEditable` and contains `children` managed by ' + - 'React. It is now your responsibility to guarantee that none of ' + - 'those nodes are unexpectedly modified or duplicated. This is ' + - 'probably not intentional.' - ); - } + warning( + !props.contentEditable || props.children == null, + 'A component is `contentEditable` and contains `children` managed by ' + + 'React. It is now your responsibility to guarantee that none of ' + + 'those nodes are unexpectedly modified or duplicated. This is ' + + 'probably not intentional.' + ); } invariant( props.style == null || typeof props.style === 'object', @@ -95,11 +93,10 @@ function putListener(id, registrationName, listener, transaction) { if (__DEV__) { // IE8 has no API for event capturing and the `onScroll` event doesn't // bubble. - if (registrationName === 'onScroll' && - !isEventSupported('scroll', true)) { - monitorCodeUse('react_no_scroll_event'); - console.warn('This browser doesn\'t support the `onScroll` event'); - } + warning( + registrationName !== 'onScroll' || isEventSupported('scroll', true), + 'This browser doesn\'t support the `onScroll` event' + ); } var container = ReactMount.findReactContainerForID(id); if (container) { diff --git a/src/browser/ui/ReactMount.js b/src/browser/ui/ReactMount.js index 29e611d220..b1bc592806 100644 --- a/src/browser/ui/ReactMount.js +++ b/src/browser/ui/ReactMount.js @@ -473,7 +473,8 @@ var ReactMount = { var rootElementSibling = reactRootElement; while (rootElementSibling) { if (ReactMount.isRenderedByReact(rootElementSibling)) { - console.warn( + warning( + false, 'render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.' @@ -648,7 +649,8 @@ var ReactMount = { // warning is when the container is empty. rootElementsByReactRootID[reactRootID] = containerChild; } else { - console.warn( + warning( + false, 'ReactMount: Root element has been removed from its original ' + 'container. New container:', rootElement.parentNode ); @@ -828,7 +830,8 @@ var ReactMount = { ); if (__DEV__) { - console.warn( + warning( + false, 'React attempted to reuse markup in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the markup generated on the ' + @@ -836,7 +839,8 @@ var ReactMount = { 'new markup to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the markup being generated is different on the client ' + - 'or server:\n' + difference + 'or server:\n%s', + difference ); } } diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js index a03d074196..26054d91ad 100644 --- a/src/browser/ui/__tests__/ReactDOMComponent-test.js +++ b/src/browser/ui/__tests__/ReactDOMComponent-test.js @@ -494,7 +494,7 @@ describe('ReactDOMComponent', function() { ReactTestUtils.renderIntoDocument(
); expect(console.warn.calls.length).toBe(1); expect(console.warn.mostRecentCall.args[0]).toBe( - 'This browser doesn\'t support the `onScroll` event' + 'Warning: This browser doesn\'t support the `onScroll` event' ); }); }); diff --git a/src/classic/class/ReactClass.js b/src/classic/class/ReactClass.js index 28595325b2..e8136d909a 100644 --- a/src/classic/class/ReactClass.js +++ b/src/classic/class/ReactClass.js @@ -24,7 +24,6 @@ var assign = require('Object.assign'); var invariant = require('invariant'); var keyMirror = require('keyMirror'); var keyOf = require('keyOf'); -var monitorCodeUse = require('monitorCodeUse'); var warning = require('warning'); var MIXINS_KEY = keyOf({mixins: null}); @@ -659,17 +658,19 @@ function bindAutoBindMethod(component, method) { // ignore the value of "this" that the user is trying to use, so // let's warn. if (newThis !== component && newThis !== null) { - monitorCodeUse('react_bind_warning', { component: componentName }); - console.warn( + warning( + false, 'bind(): React component methods may only be bound to the ' + - 'component instance. See ' + componentName + 'component instance. See %s', + componentName ); } else if (!args.length) { - monitorCodeUse('react_bind_warning', { component: componentName }); - console.warn( + warning( + false, 'bind(): You are binding a component method to the component. ' + 'React does this for you automatically in a high-performance ' + - 'way, so you can safely remove this call. See ' + componentName + 'way, so you can safely remove this call. See ', + componentName ); return boundMethod; } @@ -874,18 +875,14 @@ var ReactClass = { ); if (__DEV__) { - if (Constructor.prototype.componentShouldUpdate) { - monitorCodeUse( - 'react_component_should_update_warning', - { component: spec.displayName } - ); - console.warn( - (spec.displayName || 'A component') + ' has a method called ' + - 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + - 'The name is phrased as a question because the function is ' + - 'expected to return a value.' - ); - } + warning( + !Constructor.prototype.componentShouldUpdate, + '%s has a method called ' + + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + + 'The name is phrased as a question because the function is ' + + 'expected to return a value.', + spec.displayName || 'A component' + ); } // Reduce time spent doing lookups by setting these on the prototype. diff --git a/src/classic/class/__tests__/ReactClass-test.js b/src/classic/class/__tests__/ReactClass-test.js index 563171a0f4..cbc85528b4 100644 --- a/src/classic/class/__tests__/ReactClass-test.js +++ b/src/classic/class/__tests__/ReactClass-test.js @@ -170,7 +170,7 @@ describe('ReactClass-spec', function() { }); expect(console.warn.argsForCall.length).toBe(1); expect(console.warn.argsForCall[0][0]).toBe( - 'A component has a method called componentShouldUpdate(). Did you ' + + 'Warning: A component has a method called componentShouldUpdate(). Did you ' + 'mean shouldComponentUpdate()? The name is phrased as a question ' + 'because the function is expected to return a value.' ); @@ -185,7 +185,7 @@ describe('ReactClass-spec', function() { }); expect(console.warn.argsForCall.length).toBe(2); expect(console.warn.argsForCall[1][0]).toBe( - 'NamedComponent has a method called componentShouldUpdate(). Did you ' + + 'Warning: NamedComponent has a method called componentShouldUpdate(). Did you ' + 'mean shouldComponentUpdate()? The name is phrased as a question ' + 'because the function is expected to return a value.' ); diff --git a/src/classic/element/ReactElementValidator.js b/src/classic/element/ReactElementValidator.js index 07a8d4f044..b5eeffd57d 100644 --- a/src/classic/element/ReactElementValidator.js +++ b/src/classic/element/ReactElementValidator.js @@ -26,7 +26,6 @@ var ReactCurrentOwner = require('ReactCurrentOwner'); var ReactNativeComponent = require('ReactNativeComponent'); var getIteratorFn = require('getIteratorFn'); -var monitorCodeUse = require('monitorCodeUse'); var invariant = require('invariant'); var warning = require('warning'); @@ -157,22 +156,17 @@ function warnAndMonitorForKeyUse(warningID, message, element, parentType) { // Usually the current owner is the offender, but if it accepts children as a // property, it may be the creator of the child that's responsible for // assigning it a key. - var childOwnerName = null; if (element && element._owner && element._owner !== ReactCurrentOwner.current) { // Name of the component that originally created this child. - childOwnerName = getName(element._owner); + var childOwnerName = getName(element._owner); message += ` It was passed a child from ${childOwnerName}.`; } message += ' See http://fb.me/react-warning-keys for more information.'; - monitorCodeUse(warningID, { - component: useName, - componentOwner: childOwnerName - }); - console.warn(message); + warning(false, '%s', warningID + ': ' + message); } /** diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js index ae06ef29c6..f3407e02cd 100644 --- a/src/core/ReactCompositeComponent.js +++ b/src/core/ReactCompositeComponent.js @@ -588,13 +588,12 @@ var ReactCompositeComponentMixin = { inst.shouldComponentUpdate(nextProps, nextState, nextContext); if (__DEV__) { - if (typeof shouldUpdate === 'undefined') { - console.warn( - (this.getName() || 'ReactCompositeComponent') + - '.shouldComponentUpdate(): Returned undefined instead of a ' + - 'boolean value. Make sure to return true or false.' - ); - } + warning( + typeof shouldUpdate !== 'undefined', + '%s.shouldComponentUpdate(): Returned undefined instead of a ' + + 'boolean value. Make sure to return true or false.', + this.getName() || 'ReactCompositeComponent' + ); } if (shouldUpdate) { diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js index f08b08fa78..f6068cc06d 100644 --- a/src/core/__tests__/ReactCompositeComponent-test.js +++ b/src/core/__tests__/ReactCompositeComponent-test.js @@ -490,7 +490,7 @@ describe('ReactCompositeComponent', function() { expect(console.warn.argsForCall.length).toBe(1); expect(console.warn.argsForCall[0][0]).toBe( - 'Component.shouldComponentUpdate(): Returned undefined instead of a ' + + 'Warning: Component.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.' ); });