New approach for 6062 fix : Show source line number on unknown proper…

…ty warning

scripts/jest/preprocessor.js

@@ -36,6 +36,7 @@ var babelOptions = {
         }
       ),
     }],
+    'transform-react-jsx-source',
   ],
   retainLines: true,
 };

src/renderers/dom/shared/ReactDOMDebugTool.js

@@ -59,6 +59,9 @@ var ReactDOMDebugTool = {
   onDeleteValueForProperty(node, name) {
     emitEvent('onDeleteValueForProperty', node, name);
   },
+  onInstantiateReactComponent(instance) {
+    emitEvent('onInstantiateReactComponent', instance);
+  },
 };
 
 ReactDOMDebugTool.addDevtool(ReactDOMUnknownPropertyDevtool);

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

@@ -1245,5 +1245,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+\)/);
+    });
   });
 });

src/renderers/dom/shared/devtools/ReactDOMUnknownPropertyDevtool.js

@@ -17,6 +17,7 @@ var EventPluginRegistry = require('EventPluginRegistry');
 var warning = require('warning');
 
 if (__DEV__) {
+  var cachedSource;
   var reactProps = {
     children: true,
     dangerouslySetInnerHTML: true,
@@ -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,22 +67,31 @@ 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);
+    warnUnknownProperty(name, cachedSource);
   },
   onSetValueForProperty(node, name, value) {
-    warnUnknownProperty(name);
+    warnUnknownProperty(name, cachedSource);
   },
   onDeleteValueForProperty(node, name) {
-    warnUnknownProperty(name);
+    warnUnknownProperty(name, cachedSource);
+  },
+  onInstantiateReactComponent(instance) {
+    //Get JSX _source for use in warnings
+    cachedSource = instance._currentElement ? instance._currentElement._source : null;
   },
 };
 

src/renderers/shared/reconciler/instantiateReactComponent.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDOMInstrumentation = require('ReactDOMInstrumentation');
 var ReactEmptyComponent = require('ReactEmptyComponent');
 var ReactNativeComponent = require('ReactNativeComponent');
 
@@ -129,6 +130,10 @@ function instantiateReactComponent(node) {
     }
   }
 
+  if (__DEV__) {
+    ReactDOMInstrumentation.debugTool.onInstantiateReactComponent(instance);
+  }
+
   return instance;
 }