Handle & render the _source property

README.md

@@ -25,6 +25,10 @@ Tools or use a pre-prelease version.
 
 ## Usage
 
+### Supporting tools
+
+- The babel plugin [trasnform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) is required if you want react devtools to tell you the source file & line number of created react elements. It's display in the bottom of the right panel if the information is present.
+
 ### Tree View
 
 - Arrow keys or hjkl for navigation

backend/getData.js

@@ -26,6 +26,7 @@ function getData(element: Object): DataType {
   var type = null;
   var key = null;
   var ref = null;
+  var source = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -65,6 +66,7 @@ function getData(element: Object): DataType {
     if (element._currentElement.key) {
       key = String(element._currentElement.key);
     }
+    source = element._currentElement._source;
     ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
@@ -111,6 +113,7 @@ function getData(element: Object): DataType {
     type,
     key,
     ref,
+    source,
     name,
     props,
     state,

backend/getData012.js

@@ -91,6 +91,7 @@ function getData012(element: Object): DataType {
     type,
     key,
     ref,
+    source: null,
     name,
     props,
     state,

backend/types.js

@@ -15,6 +15,7 @@ export type DataType = {
   type: ?(string | AnyFn),
   key: ?string,
   ref: ?(string | AnyFn),
+  source: ?Object,
   name: ?string,
   props: ?Object,
   state: ?Object,

frontend/PropState.js

@@ -20,6 +20,18 @@ var React = require('react');
 var decorate = require('./decorate');
 var invariant = require('./invariant');
 
+/**
+ * Shorten a file path to something reasonable.
+ * - if it has `/src/` in it, assume that's the project root
+ * - if it starts w/ `/Users/name/`, replace that with `~/`
+ */
+var shortFilePath = text => {
+  if (text.match(/\/src\//)) {
+    return 'src/' + text.split(/\/src\//)[1];
+  }
+  return text.replace(/^\/Users\/[^\/]+\//, '~/');
+};
+
 class PropState extends React.Component {
   getChildContext() {
     return {
@@ -29,6 +41,23 @@ class PropState extends React.Component {
     };
   }
 
+  renderSource(): ?React.Element {
+    var source = this.props.node.get('source');
+    if (!source) {
+      return null;
+    }
+    return (
+      <div style={styles.source}>
+        <div style={styles.sourceName}>
+          {shortFilePath(source.fileName)}
+        </div>
+        <div style={styles.sourcePos}>
+          :{source.lineNumber}
+        </div>
+      </div>
+    );
+  }
+
   render(): React.Element {
     if (!this.props.node) {
       // TODO(jared): style this
@@ -129,6 +158,8 @@ class PropState extends React.Component {
           </DetailPaneSection>}
         {this.props.extraPanes &&
           this.props.extraPanes.map(fn => fn && fn(this.props.node, this.props.id))}
+        <div style={{flex: 1}} />
+        {this.renderSource()}
       </DetailPane>
     );
   }
@@ -171,4 +202,20 @@ var WrappedPropState = decorate({
   },
 }, PropState);
 
+var styles = {
+  source: {
+    padding: '5px 10px',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+
+  sourceName: {
+    color: 'blue',
+  },
+
+  sourcePos: {
+    color: '#777',
+  },
+};
+
 module.exports = WrappedPropState;