Local React Native Cli support

package.json

@@ -621,6 +621,11 @@
 					"default": 8081,
 					"scope": "resource"
 				},
+				"react-native-tools.reactNativeGlobalCommandName": {
+					"description": "%reactNative.configuration.properties.react-native-tools.reactNativeGlobalCommandName.description%",
+					"type": "string",
+					"scope": "resource"
+				},
 				"react-native-tools.projectRoot": {
 					"description": "%reactNative.configuration.properties.react-native-tools.projectRoot.description%",
 					"type": "string",

package.nls.json

@@ -63,5 +63,6 @@
     "reactNative.configuration.properties.react-native.android.envFile.device.description":"Absolute path to a file containing environment variable definitions.",
     "reactNative.configuration.properties.react-native.packager.port.description":"React-native packager port",
     "reactNative.configuration.properties.react-native-tools.projectRoot.description":"Subfolder in which the react-native project is located",
-    "reactNative.configuration.properties.react-native-tools.logLevel.description":"Logging level in extension"
+    "reactNative.configuration.properties.react-native-tools.logLevel.description":"Logging level in extension",
+    "reactNative.configuration.properties.react-native-tools.reactNativeGlobalCommandName.description": "The command name to be used to execute React Native CLI commands."
 }

src/common/commandExecutor.ts

@@ -2,9 +2,11 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 
 import * as Q from "q";
+import * as path from "path";
 import {ChildProcess} from "child_process";
 import {ILogger} from "../extension/log/LogHelper";
-import { NullLogger } from "../extension/log/NullLogger";
+import {NullLogger} from "../extension/log/NullLogger";
+import {ReactNativeProjectHelper} from "../common/reactNativeProjectHelper";
 import {Node} from "./node/node";
 import {ISpawnResult} from "./node/childProcess";
 import {HostPlatform, HostPlatformId} from "./hostPlatform";
@@ -36,8 +38,7 @@ export enum CommandStatus {
 
 export class CommandExecutor {
 
-    private static ReactNativeCommand = "react-native";
-    private static ReactNativeVersionCommand = "--version";
+    public static ReactNativeCommand: string | null;
     private childProcess = new Node.ChildProcess();
 
     constructor(
@@ -74,29 +75,8 @@ export class CommandExecutor {
         return this.spawnReactCommand("start", args, options);
     }
 
-    /**
-     * Uses the `react-native --version` 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;
+        return ReactNativeProjectHelper.getReactNativeVersion(this.currentWorkingDirectory);
     }
 
     /**
@@ -125,7 +105,7 @@ 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);
+        const reactCommand = HostPlatform.getNpmCliCommand(this.selectReactNativeCLI());
         return this.spawnChildProcess(reactCommand, [command, ...args], options);
     }
 
@@ -188,6 +168,10 @@ export class CommandExecutor {
         return deferred.promise;
     }
 
+    public selectReactNativeCLI(): string {
+        return CommandExecutor.ReactNativeCommand || path.resolve(this.currentWorkingDirectory, "node_modules", ".bin", "react-native");
+    }
+
     private spawnChildProcess(command: string, args: string[], options: Options = {}): ISpawnResult {
         const spawnOptions = Object.assign({}, { cwd: this.currentWorkingDirectory }, options);
         const commandWithArgs = command + " " + args.join(" ");

src/common/error/errorStrings.ts

@@ -41,6 +41,7 @@ export const ERROR_STRINGS = {
     [InternalErrorCode.RNTempFolderDeletionFailed]: localize("RNTempFolderDeletionFailed", "Couldn't delete the temporary folder {0}"),
     [InternalErrorCode.CouldNotFindLocationOfNodeDebugger]: localize("CouldNotFindLocationOfNodeDebugger", "Couldn't find the location of the node-debugger extension"),
     [InternalErrorCode.CouldNotFindWorkspace]: localize("CouldNotFindWorkspace", "Couldn't find any workspace or React Native project folder"),
+    [InternalErrorCode.ReactNativePackageIsNotInstalled]: localize("ReactNativePackageIsNotInstalled", "Couldn't find react-native package in node_modules. Please, run \"npm install\" inside your project to install it."),
     [InternalErrorCode.PackagerRunningInDifferentPort]: localize("PackagerRunningInDifferentPort", "A packager cannot be started on port {0} because a packager process is already running on port {1}"),
     [InternalErrorCode.ErrorWhileProcessingMessageInIPMSServer]: localize("ErrorWhileProcessingMessageInIPMSServer", "An error ocurred while handling message: {0}"),
     [InternalErrorCode.ErrorNoPipeFound]: localize("ErrorNoPipeFound", "Unable to set up communication with VSCode react-native extension. Is this a react-native project, and have you made sure that the react-native npm package is installed at the root?"),

src/common/error/internalErrorCode.ts

@@ -43,6 +43,7 @@ export enum InternalErrorCode {
         ProjectVersionNotReadable = 603,
         NotInReactNativeFolderError = 604,
         CouldNotFindProjectVersion = 605,
+        ReactNativePackageIsNotInstalled = 606,
 
         // Miscellaneous errors
         TelemetryInitializationFailed = 701,

src/common/node/package.ts

@@ -47,6 +47,10 @@ export class Package {
         return this.parseProperty("dependencies");
     }
 
+    public devDependencies(): Q.Promise<IPackageDependencyDict> {
+        return this.parseProperty("devDependencies");
+    }
+
     public version(): Q.Promise<string> {
         return this.parseProperty("version").then(version =>
             typeof version === "string"

src/common/reactNativeProjectHelper.ts

@@ -4,7 +4,9 @@
 import * as Q from "q";
 import * as fs from "fs";
 import * as path from "path";
-import {CommandExecutor} from "./commandExecutor";
+import {Package} from "./node/package";
+import {ErrorHelper} from "../common/error/errorHelper";
+import {InternalErrorCode} from "../common/error/internalErrorCode";
 
 export class ReactNativeProjectHelper {
 
@@ -13,8 +15,38 @@ 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): Q.Promise<string> {
+        return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(projectRoot)
+            .catch(err => {
+                return ReactNativeProjectHelper.getReactNativeVersionFromProjectPackage(projectRoot);
+            });
+    }
+
+    public static getReactNativePackageVersionFromNodeModules(projectRoot: string): Q.Promise<string> {
+        return new Package(projectRoot).dependencyPackage("react-native").version()
+            .catch(err => {
+                throw ErrorHelper.getInternalError(InternalErrorCode.ReactNativePackageIsNotInstalled);
+            });
+    }
+
+    public static getReactNativeVersionFromProjectPackage(cwd: string): Q.Promise<string> {
+        const rootProjectPackageJson = new Package(cwd);
+        return rootProjectPackageJson.dependencies()
+            .then(dependencies => {
+                if (dependencies["react-native"]) {
+                    return dependencies["react-native"];
+                }
+                return rootProjectPackageJson.devDependencies()
+                    .then(devDependencies => {
+                        if (devDependencies["react-native"]) {
+                            return devDependencies["react-native"];
+                        }
+                        return "";
+                    });
+            })
+            .catch(err => {
+                return "";
+            });
     }
 
     /**

src/extension/commandPaletteHandler.ts

@@ -20,9 +20,10 @@ import {IAndroidRunOptions, IIOSRunOptions} from "./launchArgs";
 import {ExponentPlatform} from "./exponent/exponentPlatform";
 import {spawn, ChildProcess} from "child_process";
 import {HostPlatform} from "../common/hostPlatform";
+import {CommandExecutor} from "../common/commandExecutor";
 import * as nls from "vscode-nls";
-import { ErrorHelper } from "../common/error/errorHelper";
-import { InternalErrorCode } from "../common/error/internalErrorCode";
+import {ErrorHelper} from "../common/error/errorHelper";
+import {InternalErrorCode} from "../common/error/internalErrorCode";
 const localize = nls.loadMessageBundle();
 
 interface IReactNativeStuff {
@@ -63,13 +64,16 @@ export class CommandPaletteHandler {
     public static startPackager(): Q.Promise<void> {
         return this.selectProject()
             .then((project: IReactNativeProject) => {
-                return this.executeCommandInContext("startPackager", project.workspaceFolder, () => {
-                    return project.packager.isRunning()
-                        .then((running) => {
-                            return running ? project.packager.stop() : Q.resolve(void 0);
-                        });
-                })
-                .then(() => project.packager.start());
+                return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(project.workspaceFolder.uri.path)
+                    .then(version => {
+                        return this.executeCommandInContext("startPackager", project.workspaceFolder, () => {
+                            return project.packager.isRunning()
+                                .then((running) => {
+                                    return running ? project.packager.stop() : Q.resolve(void 0);
+                                });
+                        })
+                        .then(() => project.packager.start());
+                    });
             });
     }
 
@@ -100,8 +104,11 @@ export class CommandPaletteHandler {
     public static restartPackager(): Q.Promise<void> {
         return this.selectProject()
             .then((project: IReactNativeProject) => {
-                return this.executeCommandInContext("restartPackager", project.workspaceFolder, () =>
-                    this.runRestartPackagerCommandAndUpdateStatus(project));
+                return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(project.workspaceFolder.uri.path)
+                    .then(version => {
+                        return this.executeCommandInContext("restartPackager", project.workspaceFolder, () =>
+                            this.runRestartPackagerCommandAndUpdateStatus(project));
+                    });
             });
     }
 
@@ -128,19 +135,22 @@ export class CommandPaletteHandler {
         return this.selectProject()
             .then((project: IReactNativeProject) => {
                 TargetPlatformHelper.checkTargetPlatformSupport("android");
-                return this.executeCommandInContext("runAndroid", project.workspaceFolder, () => {
-                    const platform = <AndroidPlatform>this.createPlatform(project, "android", AndroidPlatform, target);
-                    return platform.beforeStartPackager()
-                        .then(() => {
-                            return platform.startPackager();
-                        })
-                        .then(() => {
-                            return platform.runApp(/*shouldLaunchInAllDevices*/true);
-                        })
-                        .then(() => {
-                            return platform.disableJSDebuggingMode();
+                return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(project.workspaceFolder.uri.path)
+                    .then(version => {
+                        return this.executeCommandInContext("runAndroid", project.workspaceFolder, () => {
+                            const platform = <AndroidPlatform>this.createPlatform(project, "android", AndroidPlatform, target);
+                            return platform.beforeStartPackager()
+                                .then(() => {
+                                    return platform.startPackager();
+                                })
+                                .then(() => {
+                                    return platform.runApp(/*shouldLaunchInAllDevices*/true);
+                                })
+                                .then(() => {
+                                    return platform.disableJSDebuggingMode();
+                                });
                         });
-                });
+                    });
             });
     }
 
@@ -150,21 +160,24 @@ export class CommandPaletteHandler {
     public static runIos(target: TargetType = "simulator"): Q.Promise<void> {
         return this.selectProject()
             .then((project: IReactNativeProject) => {
-                TargetPlatformHelper.checkTargetPlatformSupport("ios");
-                return this.executeCommandInContext("runIos", project.workspaceFolder, () => {
-                    const platform = <IOSPlatform>this.createPlatform(project, "ios", IOSPlatform, target);
-                    return platform.beforeStartPackager()
-                        .then(() => {
-                            return platform.startPackager();
-                        })
-                        .then(() => {
-                            // Set the Debugging setting to disabled, because in iOS it's persisted across runs of the app
-                            return platform.disableJSDebuggingMode();
-                        })
-                        .catch(() => { }) // If setting the debugging mode fails, we ignore the error and we run the run ios command anyways
-                        .then(() => {
-                            return platform.runApp();
-                        });
+                return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(project.workspaceFolder.uri.path)
+                    .then(version => {
+                    TargetPlatformHelper.checkTargetPlatformSupport("ios");
+                    return this.executeCommandInContext("runIos", project.workspaceFolder, () => {
+                        const platform = <IOSPlatform>this.createPlatform(project, "ios", IOSPlatform, target);
+                        return platform.beforeStartPackager()
+                            .then(() => {
+                                return platform.startPackager();
+                            })
+                            .then(() => {
+                                // Set the Debugging setting to disabled, because in iOS it's persisted across runs of the app
+                                return platform.disableJSDebuggingMode();
+                            })
+                            .catch(() => { }) // If setting the debugging mode fails, we ignore the error and we run the run ios command anyways
+                            .then(() => {
+                                return platform.runApp();
+                            });
+                    });
                 });
             });
     }
@@ -175,18 +188,21 @@ export class CommandPaletteHandler {
     public static runExponent(): Q.Promise<void> {
         return this.selectProject()
             .then((project: IReactNativeProject) => {
-                return this.loginToExponent(project)
-                    .then(() => {
-                        return this.executeCommandInContext("runExponent", project.workspaceFolder, () => {
-                            const platform = <ExponentPlatform>this.createPlatform(project, "exponent", ExponentPlatform);
-                            return platform.beforeStartPackager()
-                                .then(() => {
-                                    return platform.startPackager();
-                                })
-                                .then(() => {
-                                    return platform.runApp();
+                return ReactNativeProjectHelper.getReactNativePackageVersionFromNodeModules(project.workspaceFolder.uri.path)
+                    .then(version => {
+                        return this.loginToExponent(project)
+                            .then(() => {
+                                return this.executeCommandInContext("runExponent", project.workspaceFolder, () => {
+                                    const platform = <ExponentPlatform>this.createPlatform(project, "exponent", ExponentPlatform);
+                                    return platform.beforeStartPackager()
+                                        .then(() => {
+                                            return platform.startPackager();
+                                        })
+                                        .then(() => {
+                                            return platform.runApp();
+                                        });
                                 });
-                        });
+                            });
                     });
             });
     }
@@ -394,6 +410,7 @@ export class CommandPaletteHandler {
         const envArgs = SettingsHelper.getEnvArgs(platform, target, project.workspaceFolder.uri);
         const envFile = SettingsHelper.getEnvFile(platform, target, project.workspaceFolder.uri);
         const projectRoot = SettingsHelper.getReactNativeProjectRoot(project.workspaceFolder.uri.fsPath);
+        const reactNativeGlobalCommandName = SettingsHelper.getReactNativeGlobalCommandName(project.workspaceFolder.uri);
         const runOptions: IAndroidRunOptions | IIOSRunOptions = {
             platform: platform,
             workspaceRoot: project.workspaceFolder.uri.fsPath,
@@ -404,6 +421,8 @@ export class CommandPaletteHandler {
             envFile: envFile,
         };
 
+        CommandExecutor.ReactNativeCommand = reactNativeGlobalCommandName;
+
         return runOptions;
     }
 }