Fix for facebook#6062 : Show source line number on unknown property w…

…arning
troydemonbreun · Apr 1, 2016 · b587f4d · b587f4d
1 parent 599582c
commit b587f4d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
@@ -28,6 +28,7 @@ var pathToBabelrc = path.join(__dirname, '..', '..', '.babelrc');
 var babelOptions = {
   plugins: [
     [babelPluginModules, { map: moduleMap }],
+    'transform-react-jsx-source',
   ],
   retainLines: true,
 };

diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -29,6 +29,7 @@ var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMComponentFlags = require('ReactDOMComponentFlags');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var ReactDOMInput = require('ReactDOMInput');
+var ReactDOMInstrumentation = require('ReactDOMInstrumentation');
 var ReactDOMOption = require('ReactDOMOption');
 var ReactDOMSelect = require('ReactDOMSelect');
 var ReactDOMTextarea = require('ReactDOMTextarea');
@@ -651,6 +652,9 @@ ReactDOMComponent.Mixin = {
             markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
           }
         } else {
+          if (__DEV__) {
+            ReactDOMInstrumentation.debugTool.onCreateMarkupForProperty(propKey, propValue, this._currentElement);
+          }
           markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
         }
         if (markup) {

diff --git a/src/renderers/dom/shared/ReactDOMDebugTool.js b/src/renderers/dom/shared/ReactDOMDebugTool.js
@@ -50,8 +50,8 @@ var ReactDOMDebugTool = {
       }
     }
   },
-  onCreateMarkupForProperty(name, value) {
-    emitEvent('onCreateMarkupForProperty', name, value);
+  onCreateMarkupForProperty(name, value, element) {
+    emitEvent('onCreateMarkupForProperty', name, value, element);
   },
   onSetValueForProperty(node, name, value) {
     emitEvent('onSetValueForProperty', node, name, value);

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -1246,5 +1246,14 @@ describe('ReactDOMComponent', function() {
       ReactTestUtils.renderIntoDocument(<div onFocusOut={() => {}} />);
       expect(console.error.argsForCall.length).toBe(2);
     });
+
+    it('gives source code refs for unknown property warnings', function() {
+      spyOn(console, 'error');
+      ReactDOMServer.renderToString(<input type="text" onclick="1"/>);
+      ReactDOMServer.renderToString(<div class="muffins"/>);
+      expect(console.error.argsForCall.length).toBe(2);
+      expect(console.error.argsForCall[0][0]).toMatch(/.*\(.*:\d+\)/);
+      expect(console.error.argsForCall[1][0]).toMatch(/.*\(.*:\d+\)/);
+    });
   });
 });
diff --git a/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js b/src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js
@@ -13,6 +13,7 @@
 
 var DOMProperty = require('DOMProperty');
 var EventPluginRegistry = require('EventPluginRegistry');
+var ReactDOMComponentTree = require('ReactDOMComponentTree');
 
 var warning = require('warning');
 
@@ -25,7 +26,7 @@ if (__DEV__) {
   };
   var warnedProperties = {};
 
-  var warnUnknownProperty = function(name) {
+  var warnUnknownProperty = function(name, source) {
     if (DOMProperty.properties.hasOwnProperty(name) || DOMProperty.isCustomAttribute(name)) {
       return;
     }
@@ -50,9 +51,10 @@ if (__DEV__) {
     // logging too much when using transferPropsTo.
     warning(
       standardName == null,
-      'Unknown DOM property %s. Did you mean %s?',
+      'Unknown DOM property %s. Did you mean %s? %s',
       name,
-      standardName
+      standardName,
+      formatSource(source)
     );
 
     var registrationName = (
@@ -65,23 +67,41 @@ if (__DEV__) {
 
     warning(
       registrationName == null,
-      'Unknown event handler property %s. Did you mean `%s`?',
+      'Unknown event handler property %s. Did you mean `%s`? %s',
       name,
-      registrationName
+      registrationName,
+      formatSource(source)
     );
   };
+
+  var formatSource = function(source) {
+    return source ? `(${source.fileName.replace(/^.*[\\\/]/, '')}:${source.lineNumber})` : '';
+  };
 }
 
 var ReactDOMUnknownPropertyDevtool = {
-  onCreateMarkupForProperty(name, value) {
-    warnUnknownProperty(name);
+  onCreateMarkupForProperty(name, value, element) {
+    warnUnknownProperty(name, getSourceFromElement(element));
   },
   onSetValueForProperty(node, name, value) {
-    warnUnknownProperty(name);
+    warnUnknownProperty(name, getSourceFromNode(node));
   },
   onDeleteValueForProperty(node, name) {
-    warnUnknownProperty(name);
+    warnUnknownProperty(name, getSourceFromNode(node));
   },
 };
 
+var getSourceFromNode = function(node) {
+  var instance = ReactDOMComponentTree.getInstanceFromNode(node);
+  if (instance) {
+    return getSourceFromElement(instance._currentElement);
+  }
+};
+
+var getSourceFromElement = function(element) {
+  if (element) {
+    return element._source;
+  }
+};
+
 module.exports = ReactDOMUnknownPropertyDevtool;