Support relative paths for JSX source

packages/react-devtools-core/src/launchEditor.js

@@ -105,8 +105,18 @@ function guessEditor() {
 }
 
 var _childProcess = null;
-function launchEditor(filePath, lineNumber) {
-  if (!fs.existsSync(filePath)) {
+function launchEditor(maybeRelativePath, lineNumber, absoluteProjectRoots) {
+  // We use relative paths at Facebook we deterministic builds.
+  // This is why our internal tooling calls React DevTools with absoluteProjectRoots.
+  // If the filename is absolute then we don't need to care about this.
+  var filePath = [maybeRelativePath]
+    .concat(
+      absoluteProjectRoots.map(root => path.join(root, maybeRelativePath))
+    ).find(combinedPath =>
+      fs.existsSync(combinedPath)
+    );
+
+  if (!filePath) {
     return;
   }
 

packages/react-devtools-core/src/standalone.js

@@ -22,6 +22,7 @@ var ReactDOM = require('react-dom');
 
 var node = null;
 var onStatusChange = function noop() {};
+var projectRoots = [];
 var wall = null;
 
 var config = {
@@ -31,7 +32,7 @@ var config = {
     done(wall);
   },
   showElementSource(source) {
-    launchEditor(source.fileName, source.lineNumber);
+    launchEditor(source.fileName, source.lineNumber, projectRoots);
   },
 };
 
@@ -170,6 +171,10 @@ var DevtoolsUI = {
     return DevtoolsUI;
   },
 
+  setProjectRoots(_projectRoots) {
+    projectRoots = _projectRoots;
+  },
+
   setStatusListener(_listener) {
     onStatusChange = _listener;
     return DevtoolsUI;

packages/react-devtools/app.html

@@ -101,6 +101,7 @@ <h4>React DOM</h4>
                     '\n\nDid you run `npm run build` and `npm install` in packages/react-devtools-core?'
                 );
             }
+            window.devtools = devtools;
             window.server = devtools
                 .setContentDOMNode(document.getElementById('container'))
                 .setStatusListener(function(status) {

packages/react-devtools/app.js

@@ -15,6 +15,7 @@ var updateNotifier = require('update-notifier');
 var pkg = require('./package.json');
 
 var mainWindow = null;
+var argv = process.argv.slice(2);
 
 app.on('window-all-closed', function() {
   app.quit();
@@ -29,6 +30,12 @@ app.on('ready', function() {
 
   // and load the index.html of the app.
   mainWindow.loadURL('file://' + __dirname + '/app.html'); // eslint-disable-line no-path-concat
+  mainWindow.webContents.executeJavaScript(
+    // We use this so that RN can keep relative JSX __source filenames
+    // but "click to open in editor" still works. js1 passes project roots
+    // as the argument to DevTools.
+    'window.devtools.setProjectRoots(' + JSON.stringify(argv) + ')'
+  );
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function() {

packages/react-devtools/bin.js

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 var electron = require('electron');
 var spawn = require('cross-spawn');
+var argv = process.argv.slice(2);
 
 var result = spawn.sync(
   electron,
-  [require.resolve('./app')],
+  [require.resolve('./app')].concat(argv),
   {stdio: 'inherit'}
 );
 process.exit(result.status);