Refactor expo launch request using expo-cli (#2260)

lexie011 · EzioLi01 · web-flow · commit 7a4506dc64e6 · 2025-03-17T15:29:00.000+08:00
* Refactor expo launch request using expo-cli

* Add log in excute expo cli process

* import logger in packager

* Ignore unused tests

* Update foramt

---------

Co-authored-by: Ezio Li &lt;v-yukl@microsoft.com&gt;
diff --git a/i18n/chs/src/common/configurationProviderHelper.i18n.json b/i18n/chs/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
     "ApplicationTypeSelectionPrompt": "React Native 应用程序的类型",
     "UseHermesEnginePrompt": "使用Hermes引擎直接调试？",
     "UseHermesEngineInvalid": "使用 Hermes 引擎尚未确认",
+    "ExpoPlatformTypeSelection": "选择要运行的平台",
+    "ExpoPlatformTypeSelectionPrompt": "运行的平台类型",
     "ExpoHostTypeSelectionTitle": "选择Expo主机参数类型",
     "ExpoHostTypeSelectionPrompt": "Expo主机参数类型",
     "BrowserTypeSelectionTitle": "选择浏览器类型",
diff --git a/i18n/cht/src/common/configurationProviderHelper.i18n.json b/i18n/cht/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "React Native 應用程式的類型",
 	"UseHermesEnginePrompt": "使用Hermes引擎直接調試？",
 	"UseHermesEngineInvalid": "使用 Hermes 引擎尚未確認",
+	"ExpoPlatformTypeSelection": "選擇要運行的平台",
+  	"ExpoPlatformTypeSelectionPrompt": "運行的平台類型",
 	"ExpoHostTypeSelectionTitle": "選擇Expo主機參數類型",
 	"ExpoHostTypeSelectionPrompt": "Expo主機參數類型",
 	"BrowserTypeSelectionTitle": "選擇瀏覽器類型",
diff --git a/i18n/csy/src/common/configurationProviderHelper.i18n.json b/i18n/csy/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Typ aplikace React Native",
 	"UseHermesEnginePrompt": "Použít Hermes engine pro přímé ladění?",
 	"UseHermesEngineInvalid": "Použití enginu Hermes není potvrzeno",
+	"ExpoPlatformTypeSelection": "Vyberte platformu, na které chcete spustit",
+  	"ExpoPlatformTypeSelectionPrompt": "Typ platformy pro provoz",
 	"ExpoHostTypeSelectionTitle": "Vyberte typ parametru hostitele Expo",
 	"ExpoHostTypeSelectionPrompt": "Typ parametru hostitele Expo",
 	"BrowserTypeSelectionTitle": "Vyberte typ prohlížeče",
diff --git a/i18n/deu/src/common/configurationProviderHelper.i18n.json b/i18n/deu/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Art der React Native-Anwendung",
 	"UseHermesEnginePrompt": "Hermes-Engine zum direkten Debuggen verwenden?",
 	"UseHermesEngineInvalid": "Die Verwendung der Hermes-Engine ist nicht bestätigt",
+	"ExpoPlatformTypeSelection": "Wählen Sie die Plattform zur Ausführung aus",
+  	"ExpoPlatformTypeSelectionPrompt": "Art der Plattform, auf der ausgeführt werden soll",
 	"ExpoHostTypeSelectionTitle": "Wählen Sie den Typ des Expo-Host-Parameters aus",
 	"ExpoHostTypeSelectionPrompt": "Typ des Expo-Hostparameters",
 	"BrowserTypeSelectionTitle": "Wählen Sie den Browsertyp aus",
diff --git a/i18n/esn/src/common/configurationProviderHelper.i18n.json b/i18n/esn/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Tipo de aplicación React Native",
 	"UseHermesEnginePrompt": "¿Utilizar el motor Hermes para la depuración directa?",
 	"UseHermesEngineInvalid": "El uso del motor Hermes no está confirmado.",
+	"ExpoPlatformTypeSelection": "Seleccione la plataforma para ejecutar",
+  	"ExpoPlatformTypeSelectionPrompt": "Tipo de plataforma para correr",
 	"ExpoHostTypeSelectionTitle": "Seleccione el tipo de parámetro del anfitrión de la Expo",
 	"ExpoHostTypeSelectionPrompt": "Tipo de parámetro del anfitrión de la Expo",
 	"BrowserTypeSelectionTitle": "Seleccione tipo de navegador",
diff --git a/i18n/fra/src/common/configurationProviderHelper.i18n.json b/i18n/fra/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Type d'application React Native",
 	"UseHermesEnginePrompt": "Utiliser le moteur Hermes pour le débogage direct ?",
 	"UseHermesEngineInvalid": "L'utilisation du moteur Hermes n'est pas confirmée",
+	"ExpoPlatformTypeSelection": "Sélectionnez la plate-forme sur laquelle exécuter",
+  	"ExpoPlatformTypeSelectionPrompt": "Type de plateforme sur laquelle fonctionner",
 	"ExpoHostTypeSelectionTitle": "Sélectionnez le type de paramètre d'hôte Expo",
 	"ExpoHostTypeSelectionPrompt": "Type de paramètre d'hôte Expo",
 	"BrowserTypeSelectionTitle": "Sélectionnez le type de navigateur",
diff --git a/i18n/ita/src/common/configurationProviderHelper.i18n.json b/i18n/ita/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Tipo di applicazione React Native",
 	"UseHermesEnginePrompt": "Utilizzare il motore Hermes per il debug diretto?",
 	"UseHermesEngineInvalid": "L'utilizzo del motore Hermes non è confermato",
+	"ExpoPlatformTypeSelection": "Seleziona la piattaforma su cui eseguire",
+  	"ExpoPlatformTypeSelectionPrompt": "Tipo di piattaforma su cui eseguire",
 	"ExpoHostTypeSelectionTitle": "Seleziona il tipo di parametro host Expo",
 	"ExpoHostTypeSelectionPrompt": "Tipo di parametro host dell'Expo",
 	"BrowserTypeSelectionTitle": "Seleziona il tipo di browser",
diff --git a/i18n/jpn/src/common/configurationProviderHelper.i18n.json b/i18n/jpn/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "React Native アプリケーションの種類",
 	"UseHermesEnginePrompt": "直接デバッグにHermesエンジンを使用しますか?",
 	"UseHermesEngineInvalid": "ヘルメスエンジンの使用は未確認",
+	"ExpoPlatformTypeSelection": "実行するプラットフォームを選択してください",
+  	"ExpoPlatformTypeSelectionPrompt": "実行するプラットフォームの種類",
 	"ExpoHostTypeSelectionTitle": "Expo ホストパラメータのタイプを選択してください",
 	"ExpoHostTypeSelectionPrompt": "Expo ホストパラメータのタイプ",
 	"BrowserTypeSelectionTitle": "ブラウザの種類を選択してください",
diff --git a/i18n/kor/src/common/configurationProviderHelper.i18n.json b/i18n/kor/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "React Native 애플리케이션 유형",
 	"UseHermesEnginePrompt": "직접 디버깅을 위해 Hermes 엔진을 사용하시겠습니까?",
 	"UseHermesEngineInvalid": "Hermes 엔진 사용 여부는 확인되지 않았습니다.",
+	"ExpoPlatformTypeSelection": "실행할 플랫폼 선택",
+  	"ExpoPlatformTypeSelectionPrompt": "실행할 플랫폼 유형",
 	"ExpoHostTypeSelectionTitle": "Expo 호스트 매개변수 유형 선택",
 	"ExpoHostTypeSelectionPrompt": "Expo 호스트 매개변수 유형",
 	"BrowserTypeSelectionTitle": "브라우저 유형 선택",
diff --git a/i18n/plk/src/common/configurationProviderHelper.i18n.json b/i18n/plk/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Typ aplikacji React Native",
 	"UseHermesEnginePrompt": "Używać silnika Hermes do bezpośredniego debugowania?",
 	"UseHermesEngineInvalid": "Korzystanie z silnika Hermes nie zostało potwierdzone",
+	"ExpoPlatformTypeSelection": "Wybierz platformę, na której chcesz uruchomić",
+  	"ExpoPlatformTypeSelectionPrompt": "Typ platformy, na której można uruchomić",
 	"ExpoHostTypeSelectionTitle": "Wybierz typ parametru gospodarza Expo",
 	"ExpoHostTypeSelectionPrompt": "Typ parametru gospodarza Expo",
 	"BrowserTypeSelectionTitle": "Wybierz typ przeglądarki",
diff --git a/i18n/ptb/src/common/configurationProviderHelper.i18n.json b/i18n/ptb/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Tipo de aplicativo React Native",
 	"UseHermesEnginePrompt": "Usar o mecanismo Hermes para depuração direta?",
 	"UseHermesEngineInvalid": "O uso do motor Hermes não está confirmado",
+	"ExpoPlatformTypeSelection": "Selecione a plataforma para rodar",
+  	"ExpoPlatformTypeSelectionPrompt": "Tipo de plataforma para rodar",
 	"ExpoHostTypeSelectionTitle": "Selecione o tipo de parâmetro de host da Expo",
 	"ExpoHostTypeSelectionPrompt": "Tipo de parâmetro de host da Expo",
 	"BrowserTypeSelectionTitle": "Selecione o tipo de navegador",
diff --git a/i18n/rus/src/common/configurationProviderHelper.i18n.json b/i18n/rus/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "Тип приложения React Native",
 	"UseHermesEnginePrompt": "Использовать движок Hermes для прямой отладки?",
 	"UseHermesEngineInvalid": "Использование двигателя Hermes не подтверждено",
+	"ExpoPlatformTypeSelection": "Выберите платформу для запуска",
+  	"ExpoPlatformTypeSelectionPrompt": "Тип платформы для запуска",
 	"ExpoHostTypeSelectionTitle": "Выберите тип параметра хоста Expo",
 	"ExpoHostTypeSelectionPrompt": "Тип параметра хоста Expo",
 	"BrowserTypeSelectionTitle": "Выберите тип браузера",
diff --git a/i18n/trk/src/common/configurationProviderHelper.i18n.json b/i18n/trk/src/common/configurationProviderHelper.i18n.json
@@ -10,6 +10,8 @@
 	"ApplicationTypeSelectionPrompt": "React Native uygulamasının türü",
 	"UseHermesEnginePrompt": "Doğrudan hata ayıklama için Hermes motoru kullanılsın mı?",
 	"UseHermesEngineInvalid": "Hermes motorunun kullanılması onaylanmadı",
+	"ExpoPlatformTypeSelection": "Çalıştırılacak platformu seçin",
+  	"ExpoPlatformTypeSelectionPrompt": "Çalıştırılacak platform türü",
 	"ExpoHostTypeSelectionTitle": "Expo ana bilgisayar parametresi türünü seçin",
 	"ExpoHostTypeSelectionPrompt": "Expo ana bilgisayar parametresi türü",
 	"BrowserTypeSelectionTitle": "Tarayıcı türünü seçin",
diff --git a/package.json b/package.json
@@ -1038,6 +1038,13 @@
                 ],
                 "description": "%reactNative.launch.direct.platform.description%"
               },
+              "expoPlatformType": {
+                "type": "string",
+                "enum": [
+                  "Android",
+                  "iOS"
+                ]
+              },
               "expoHostType": {
                 "type": "string",
                 "enum": [
diff --git a/src/common/configurationProviderHelper.ts b/src/common/configurationProviderHelper.ts
@@ -7,11 +7,12 @@ import {
     IQuickPickParameters,
 } from "../extension/debuggingConfiguration/multiStepInput";
 import { ILaunchRequestArgs } from "../debugger/debugSessionBase";
-import { ExpoHostType, PlatformType } from "../extension/launchArgs";
+import { ExpoHostType, PlatformType, ExpoPlatform } from "../extension/launchArgs";
 import {
     DebugConfigurationState,
     DebugConfigurationQuickPickItem,
     appTypePickConfig,
+    expoPlatform,
     expoHostTypePickConfig,
     shouldUseHermesEngine,
     DEBUG_TYPES,
@@ -119,6 +120,32 @@ export class ConfigurationProviderHelper {
         return config;
     }
 
+    public async selectExpoPlatform(
+        input: MultiStepInput<DebugConfigurationState>,
+        config: Partial<ILaunchRequestArgs>,
+        step: number,
+        totalSteps: number,
+    ): Promise<Partial<ILaunchRequestArgs>> {
+        const pick = await input.showQuickPick<
+            DebugConfigurationQuickPickItem,
+            IQuickPickParameters<DebugConfigurationQuickPickItem>
+        >({
+            title: localize("ExpoPlatformTypeSelection", "Select platform to run on"),
+            placeholder: localize("ExpoPlatformTypeSelectionPrompt", "Type of platform to run on"),
+            step,
+            totalSteps,
+            items: expoPlatform,
+            activeItem: expoPlatform[0],
+        });
+
+        if (!pick) {
+            throw new Error("Expo platform is not selected");
+        }
+
+        config.expoPlatformType = pick.label as ExpoPlatform;
+        return config;
+    }
+
     public async selectExpoHostType(
         input: MultiStepInput<DebugConfigurationState>,
         config: Partial<ILaunchRequestArgs>,
diff --git a/src/common/packager.ts b/src/common/packager.ts
@@ -8,6 +8,7 @@ import * as semver from "semver";
 import * as vscode from "vscode";
 import * as nls from "vscode-nls";
 import * as WebSocket from "ws";
+import { logger } from "@vscode/debugadapter";
 import { GeneralPlatform } from "../extension/generalPlatform";
 import { ExponentHelper } from "../extension/exponent/exponentHelper";
 import { OutputChannelLogger } from "../extension/log/OutputChannelLogger";
@@ -274,6 +275,10 @@ export class Packager {
                     this.logger,
                 ).spawnReactPackager(args, spawnOptions);
             } else if (this.runOptions?.platform == "exponent") {
+                args.push(`--${this.runOptions?.expoPlatformType?.toLowerCase()}`);
+                logger.log(
+                    "It may take a while to install Expo Go if it is not installed on your device...",
+                );
                 packagerSpawnResult = new CommandExecutor(
                     nodeModulesRoot,
                     this.projectPath,
diff --git a/src/common/telemetryHelper.ts b/src/common/telemetryHelper.ts
@@ -99,6 +99,11 @@ export class TelemetryHelper {
                 "expoHostType",
                 properties,
             );
+            properties = TelemetryHelper.addPropertyToTelemetryProperties(
+                args.expoPlatformType,
+                "expoPlatformType",
+                properties,
+            );
         }
 
         return properties;
diff --git a/src/extension/appLauncher.ts b/src/extension/appLauncher.ts
@@ -332,7 +332,9 @@ export class AppLauncher {
                             "Building and running application.",
                         ),
                     );
-                    await this.mobilePlatform.runApp();
+                    if (launchArgs.platform !== "exponent") {
+                        await this.mobilePlatform.runApp();
+                    }
 
                     if (mobilePlatformOptions.isDirect) {
                         if (launchArgs.useHermesEngine) {
@@ -595,6 +597,7 @@ export class AppLauncher {
 
         if (args.platform === PlatformType.Exponent) {
             mobilePlatformOptions.expoHostType = args.expoHostType || "lan";
+            mobilePlatformOptions.expoPlatformType = args.expoPlatformType || "Android";
             mobilePlatformOptions.openExpoQR =
                 typeof args.openExpoQR !== "boolean" ? true : args.openExpoQR;
         }
diff --git a/src/extension/commands/killPort.ts b/src/extension/commands/killPort.ts
@@ -7,8 +7,8 @@ import { ErrorHelper } from "../../common/error/errorHelper";
 import { InternalErrorCode } from "../../common/error/internalErrorCode";
 import { ChildProcess } from "../../common/node/childProcess";
 import { OutputChannelLogger } from "../log/OutputChannelLogger";
-import { ReactNativeCommand } from "./util/reactNativeCommand";
 import { wait } from "../../common/utils";
+import { ReactNativeCommand } from "./util/reactNativeCommand";
 
 const logger = OutputChannelLogger.getMainChannel();
 export class killPort extends ReactNativeCommand {
diff --git a/src/extension/commands/revertOpenModule.ts b/src/extension/commands/revertOpenModule.ts
@@ -11,8 +11,8 @@ import { ErrorHelper } from "../../common/error/errorHelper";
 import { InternalErrorCode } from "../../common/error/internalErrorCode";
 import { ProjectVersionHelper } from "../../common/projectVersionHelper";
 import { findFileInFolderHierarchy } from "../../common/extensionHelper";
-import { ReactNativeCommand } from "./util/reactNativeCommand";
 import { SettingsHelper } from "../settingsHelper";
+import { ReactNativeCommand } from "./util/reactNativeCommand";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
diff --git a/src/extension/debuggingConfiguration/configurationProviders/debugConfigProvider.ts b/src/extension/debuggingConfiguration/configurationProviders/debugConfigProvider.ts
@@ -64,6 +64,9 @@ export class DebugConfigProvider extends BaseConfigProvider {
         } else if (state.config.platform === PlatformType.Exponent) {
             return async () => {
                 await this.configureApplicationType(input, state.config);
+                if (state.config.type === "reactnativedirect") {
+                    await this.configureExpoPlatform(input, state.config);
+                }
                 await this.configureExpoHostType(input, state.config);
             };
         } else if (state.config.platform === PlatformType.ExpoWeb) {
@@ -92,12 +95,14 @@ export class DebugConfigProvider extends BaseConfigProvider {
         input: MultiStepInput<DebugConfigurationState>,
         config: Partial<ILaunchRequestArgs>,
     ): Promise<InputStep<DebugConfigurationState> | void> {
-        await this.configurationProviderHelper.selectExpoHostType(
-            input,
-            config,
-            2,
-            this.maxStepCount,
-        );
+        await this.configurationProviderHelper.selectExpoHostType(input, config, 4, 4);
+    }
+
+    private async configureExpoPlatform(
+        input: MultiStepInput<DebugConfigurationState>,
+        config: Partial<ILaunchRequestArgs>,
+    ): Promise<InputStep<DebugConfigurationState> | void> {
+        await this.configurationProviderHelper.selectExpoPlatform(input, config, 3, 4);
     }
 
     private async configureUseHermesEngine(
diff --git a/src/extension/debuggingConfiguration/debugConfigTypesAndConstants.ts b/src/extension/debuggingConfiguration/debugConfigTypesAndConstants.ts
@@ -113,6 +113,17 @@ export const shouldUseHermesEngine: DebugConfigurationQuickPickItem[] = [
     },
 ];
 
+export const expoPlatform: DebugConfigurationQuickPickItem[] = [
+    {
+        label: "Android",
+        type: PlatformType.Android,
+    },
+    {
+        label: "iOS",
+        type: PlatformType.iOS,
+    },
+];
+
 export const expoHostTypePickConfig: DebugConfigurationQuickPickItem[] = [
     {
         label: "Tunnel",
diff --git a/src/extension/debuggingConfiguration/debugScenarioNameGenerator.ts b/src/extension/debuggingConfiguration/debugScenarioNameGenerator.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 
-import { PlatformType } from "../launchArgs";
+import { PlatformType, ExpoPlatform } from "../launchArgs";
 import { DebugScenarioType, DEBUG_TYPES } from "./debugConfigTypesAndConstants";
 
 interface DebugScenarioName {
@@ -10,6 +10,7 @@ interface DebugScenarioName {
     platformType?: string;
     postPlatformTypeDescription?: string;
     experimentalDescription?: string;
+    expoPlatformType?: ExpoPlatform;
 }
 
 export class DebugScenarioNameGenerator {
@@ -19,10 +20,16 @@ export class DebugScenarioNameGenerator {
         platformType?: PlatformType | string,
         useHermesEngine: boolean = false,
         isExperimental: boolean = false,
+        expoPlatformType?: ExpoPlatform,
     ): string {
         const debugScenarioName: DebugScenarioName =
             this.createScenarioAccordingToDebugScenarioType(debugScenarioType);
         debugScenarioName.platformType = this.getPlatformTypeName(platformType);
+
+        if (platformType === PlatformType.Exponent) {
+            debugScenarioName.expoPlatformType = expoPlatformType;
+        }
+
         if (debugType === DEBUG_TYPES.REACT_NATIVE) {
             this.configureNotDirectModeScenario(
                 debugScenarioName,
@@ -131,6 +138,9 @@ export class DebugScenarioNameGenerator {
         if (debugScenarioName.platformType) {
             debugScenarioNameStr += ` ${debugScenarioName.platformType}`;
         }
+        if (debugScenarioName.expoPlatformType) {
+            debugScenarioNameStr += ` ${debugScenarioName.expoPlatformType}`;
+        }
         if (debugScenarioName.postPlatformTypeDescription) {
             debugScenarioNameStr += ` ${debugScenarioName.postPlatformTypeDescription}`;
         }
diff --git a/src/extension/debuggingConfiguration/reactNativeDebugConfigProvider.ts b/src/extension/debuggingConfiguration/reactNativeDebugConfigProvider.ts
@@ -226,6 +226,15 @@ export class ReactNativeDebugConfigProvider implements vscode.DebugConfiguration
                         state.config.platform,
                         state.config.useHermesEngine !== false,
                     );
+                } else if (state.config.platform === "exponent") {
+                    state.config.name = DebugScenarioNameGenerator.createScenarioName(
+                        state.scenarioType,
+                        state.config.type,
+                        state.config.platform,
+                        state.config.useHermesEngine !== false,
+                        false,
+                        state.config.expoPlatformType,
+                    );
                 } else {
                     state.config.name = DebugScenarioNameGenerator.createScenarioName(
                         state.scenarioType,
diff --git a/src/extension/ios/plistBuddy.ts b/src/extension/ios/plistBuddy.ts
@@ -14,7 +14,7 @@ import { getFileNameWithoutExtension } from "../../common/utils";
 import customRequire from "../../common/customRequire";
 import { PlatformType } from "../launchArgs";
 import { AppLauncher } from "../appLauncher";
-import { SettingsHelper } from "../../extension/settingsHelper";
+import { SettingsHelper } from "../settingsHelper";
 
 export interface ConfigurationData {
     fullProductName: string;
diff --git a/src/extension/launchArgs.ts b/src/extension/launchArgs.ts
@@ -38,6 +38,8 @@ export enum PlatformType {
 
 export type ExpoHostType = "tunnel" | "lan" | "local";
 
+export type ExpoPlatform = "Android" | "iOS";
+
 /**
  * Defines the options needed to start debugging a project.
  */
@@ -61,6 +63,7 @@ export interface IIOSRunOptions extends ImacOSRunOptions {
 export interface IExponentRunOptions extends IAndroidRunOptions, IIOSRunOptions {
     expoHostType?: ExpoHostType;
     openExpoQR?: boolean;
+    expoPlatformType?: ExpoPlatform;
 }
 
 export type IWindowsRunOptions = ILaunchArgs;
diff --git a/test/extension/mobileTargetManager.test.ts b/test/extension/mobileTargetManager.test.ts
