diff --git a/packages/react-devtools-core/src/launchEditor.js b/packages/react-devtools-core/src/launchEditor.js index 7277c83bcc..78d48e89a6 100644 --- a/packages/react-devtools-core/src/launchEditor.js +++ b/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; } diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index a0e6790543..529759dcec 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/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; diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html index 0b0d06b516..74a5979257 100644 --- a/packages/react-devtools/app.html +++ b/packages/react-devtools/app.html @@ -101,6 +101,7 @@

React DOM

'\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) { diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js index 97e2d03580..bd7c80d570 100644 --- a/packages/react-devtools/app.js +++ b/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() { diff --git a/packages/react-devtools/bin.js b/packages/react-devtools/bin.js index ea4b3470cc..170b6ff315 100755 --- a/packages/react-devtools/bin.js +++ b/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);