Local React Native Cli support

package.json

@@ -345,6 +345,11 @@
 								"type": "string",
 								"description": "%reactNative.launch.debuggerWorkerUrlPath.description%",
 								"default": "debugger-ui/"
+							},
+							"useGlobalReactNativeCLI": {
+								"type": "boolean",
+								"description": "%reactNative.launch.useGlobalReactNativeCLI.description%",
+								"default": true
 							}
 						}
 					}

package.nls.json

@@ -44,6 +44,7 @@
     "reactNative.launch.skipFiles.description":"An array of file or folder names, or glob patterns, to skip when debugging.",
     "reactNative.launch.trace.description":"Logging level in debugger process. May be useful for diagnostics. If set to \"Trace\" all debugger process logs will be available in 'Debug Console' output window.",
     "reactNative.launch.debuggerWorkerUrlPath.description": "Path to the app debugger worker to override. For example, if debugger tries to attach to http://localhost:8081/debugger-ui/debuggerWorker.js and you get 404 error from packager output then you may want to change debuggerWorkerUrlPath to another value suitable for your packager (\"debugger-ui\" will be replaced with the value you provide).",
+    "reactNative.launch.useGlobalReactNativeCLI.description": "Whether to use React Native CLI installed globally",
     "reactNative.configuration.title":"React-Native configuration",
     "reactNative.configuration.properties.react-native.ios.runArguments.simulator.description":"Run arguments to be passed to 'react-native run-ios' command",
     "reactNative.configuration.properties.react-native.ios.runArguments.device.description":"Run arguments to be passed to 'react-native run-ios' command",

src/common/commandExecutor.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 
+import * as os from "os";
+import { Package } from "./node/package";
 import * as Q from "q";
 import {ChildProcess} from "child_process";
 import {ILogger} from "../extension/log/LogHelper";
@@ -37,13 +39,24 @@ export enum CommandStatus {
 export class CommandExecutor {
 
     private static ReactNativeCommand = "react-native";
-    private static ReactNativeVersionCommand = "-v";
+    private static CommandLauncher = "node";
     private childProcess = new Node.ChildProcess();
+    private static UseGlobalReactNativeCLI: boolean = false;
 
     constructor(
         private currentWorkingDirectory: string = process.cwd(),
         private logger: ILogger = new NullLogger()
-    ) { }
+    ) {
+        if (!CommandExecutor.UseGlobalReactNativeCLI) {
+            CommandExecutor.ReactNativeCommand = `${this.currentWorkingDirectory}/node_modules/.bin/react-native`;
+        } else {
+            CommandExecutor.ReactNativeCommand = "react-native";
+        }
+    }
+
+    public static setUseGlobalReactNativeCLI(setUseGlobalReactNativeCLI: boolean) {
+        CommandExecutor.UseGlobalReactNativeCLI = setUseGlobalReactNativeCLI;
+    }
 
     public execute(command: string, options: Options = {}): Q.Promise<void> {
         this.logger.debug(CommandExecutor.getCommandStatusString(command, CommandStatus.Start));
@@ -74,29 +87,18 @@ export class CommandExecutor {
         return this.spawnReactCommand("start", args, options);
     }
 
-    /**
-     * Uses the `react-native -v` command to get the version used on the project.
-     * Returns null if the workspace is not a react native project
-     */
     public getReactNativeVersion(): Q.Promise<string> {
-        let deferred = Q.defer<string>();
-        const reactCommand = HostPlatform.getNpmCliCommand(CommandExecutor.ReactNativeCommand);
-        let output = "";
-
-        const result = this.childProcess.spawn(reactCommand,
-            [CommandExecutor.ReactNativeVersionCommand],
-            { cwd: this.currentWorkingDirectory });
-
-        result.stdout.on("data", (data: Buffer) => {
-            output += data.toString();
-        });
-
-        result.stdout.on("end", () => {
-            const match = output.match(/react-native: ([\d\.]+)/);
-            deferred.resolve(match && match[1] || "");
-        });
-
-        return deferred.promise;
+        let curPackage = new Package(this.currentWorkingDirectory);
+        return curPackage.dependencyPackage("react-native").version()
+            .catch(err => {
+                return curPackage.dependencies()
+                    .then(dependencies => {
+                        if (dependencies["react-native"] && dependencies["react-native"].match(/[\d\.]+/)) {
+                            this.logger.debug("It seems that 'react-native' package is not installed. Please run 'npm install' to install the package.");
+                        }
+                        return "";
+                    });
+            });
     }
 
     /**
@@ -125,8 +127,13 @@ export class CommandExecutor {
      * Executes a react native command and waits for its completion.
      */
     public spawnReactCommand(command: string, args: string[] = [], options: Options = {}): ISpawnResult {
-        const reactCommand = HostPlatform.getNpmCliCommand(CommandExecutor.ReactNativeCommand);
-        return this.spawnChildProcess(reactCommand, [command, ...args], options);
+        if (CommandExecutor.UseGlobalReactNativeCLI || os.platform() === "win32") {
+            const reactCommand = HostPlatform.getNpmCliCommand(CommandExecutor.ReactNativeCommand);
+            return this.spawnChildProcess(reactCommand, [command, ...args], options);
+        } else {
+            const reactCommand = HostPlatform.getNpmCliCommand(CommandExecutor.ReactNativeCommand);
+            return this.spawnChildProcess(CommandExecutor.CommandLauncher, [reactCommand, command, ...args], options);
+        }
     }
 
     /**
@@ -138,7 +145,7 @@ export class CommandExecutor {
      */
     public spawnWithProgress(command: string, args: string[], options: Options = { verbosity: CommandVerbosity.OUTPUT }): Q.Promise<void> {
         let deferred = Q.defer<void>();
-        const spawnOptions = Object.assign({}, { cwd: this.currentWorkingDirectory }, options);
+        const spawnOptions = Object.assign({}, options);
         const commandWithArgs = command + " " + args.join(" ");
         const timeBetweenDots = 1500;
         let lastDotTime = 0;

src/common/reactNativeProjectHelper.ts

@@ -5,6 +5,7 @@ import * as Q from "q";
 import * as fs from "fs";
 import * as path from "path";
 import {CommandExecutor} from "./commandExecutor";
+import {ILogger} from "../extension/log/LogHelper";
 
 export class ReactNativeProjectHelper {
 
@@ -13,8 +14,8 @@ export class ReactNativeProjectHelper {
         return ["0.54.0", "0.54.1", "0.54.2", "0.54.3", "0.54.4"];
     }
 
-    public static getReactNativeVersion(projectRoot: string) {
-        return new CommandExecutor(projectRoot).getReactNativeVersion();
+    public static getReactNativeVersion(projectRoot: string, logger?: ILogger) {
+        return new CommandExecutor(projectRoot, logger).getReactNativeVersion();
     }
 
     /**

src/extension/extensionServer.ts

@@ -20,6 +20,7 @@ import * as rpc from "noice-json-rpc";
 import * as WebSocket from "ws";
 import WebSocketServer = WebSocket.Server;
 import * as nls from "vscode-nls";
+import { CommandExecutor } from "../common/commandExecutor";
 const localize = nls.loadMessageBundle();
 
 export class ExtensionServer implements vscode.Disposable {
@@ -277,6 +278,12 @@ function requestSetup(args: any): any {
         target: args.target || "simulator",
     };
 
+    if (!isNullOrUndefined(args.useGlobalReactNativeCLI)) {
+        CommandExecutor.setUseGlobalReactNativeCLI(args.useGlobalReactNativeCLI);
+    } else {
+        CommandExecutor.setUseGlobalReactNativeCLI(false);
+    }
+
     if (!args.runArguments) {
         let runArgs = SettingsHelper.getRunArgs(args.platform, args.target || "simulator", workspaceFolder.uri);
         mobilePlatformOptions.runArguments = runArgs;

src/extension/rn-extension.ts

@@ -126,7 +126,7 @@ function onFolderAdded(context: vscode.ExtensionContext, folder: vscode.Workspac
     let rootPath = folder.uri.fsPath;
     let projectRootPath = SettingsHelper.getReactNativeProjectRoot(rootPath);
     outputChannelLogger.debug(`Add project: ${projectRootPath}`);
-    return ReactNativeProjectHelper.getReactNativeVersion(projectRootPath)
+    return ReactNativeProjectHelper.getReactNativeVersion(projectRootPath, outputChannelLogger)
         .then(version => {
             outputChannelLogger.debug(`React Native version: ${version}`);
             let promises = [];