Handle metro bundle configuration for direct debugging (#2221)

Author: lexie011

package.json

@@ -465,6 +465,12 @@
         "title": "Enable & Disable Expo Hermes",
         "category": "React Native",
         "enablement": "!config.security.workspace.trust.enabled || isWorkspaceTrusted"
+      },
+      {
+        "command": "reactNative.updateMetro",
+        "title": "Update metro bundler configure(from 0.76) -- Experimental",
+        "category": "React Native",
+        "enablement": "!config.security.workspace.trust.enabled || isWorkspaceTrusted"
       }
     ],
     "menus": {

src/common/error/errorStrings.ts

@@ -421,4 +421,5 @@ export const ERROR_STRINGS = {
     ),
     [InternalErrorCode.FailedToEnableHermes]: "Failed to make changes to Hermes",
     [InternalErrorCode.FailedToEnableExpoHermes]: "Failed to make changes to Expo Hermes",
+    [InternalErrorCode.FailedToUpdateMetro]: "Failed to update metro bundle configration",
 };

src/common/error/internalErrorCode.ts

@@ -34,6 +34,8 @@ export enum InternalErrorCode {
     FailedToReopenQRCode = 129,
     FailedToEnableHermes = 130,
     FailedToEnableExpoHermes = 131,
+    FailedToUpdateMetro = 132,
+
     // Device Deployer errors
     IOSDeployNotFound = 201,
 

src/common/packager.ts

@@ -27,7 +27,7 @@ import { FileSystem } from "./node/fileSystem";
 import { PromiseUtil } from "./node/promise";
 import { CONTEXT_VARIABLES_NAMES } from "./contextVariablesNames";
 import { getNodeVersion } from "./nodeHelper";
-import { getTSVersion } from "./utils";
+import { getTSVersion, switchBundleOptions } from "./utils";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
@@ -62,6 +62,7 @@ export class Packager {
     private static NODE_AVAIABLE = "18.0.0";
     private static RN_VERSION_WITH_PACKER_ISSUE = "0.73.0";
     private static TS_VERSION_SUPPORTED = "0.70.0";
+    private static RNVersion_Direct_Debug = "0.76.0";
     private static JS_INJECTOR_DIRPATH =
         findFileInFolderHierarchy(__dirname, "js-patched") || __dirname;
     private static NODE_MODULES_FODLER_NAME = "node_modules";
@@ -225,6 +226,9 @@ export class Packager {
 
             const versions = await ProjectVersionHelper.getReactNativeVersions(this.projectPath);
             rnVersion = versions.reactNativeVersion;
+            if (semver.gte(rnVersion, Packager.RNVersion_Direct_Debug)) {
+                await switchBundleOptions(this.projectPath, true);
+            }
             await this.monkeyPatchOpnForRNPackager(rnVersion);
 
             const args = await this.getPackagerArgs(this.projectPath, rnVersion, resetCache);

src/common/utils.ts

@@ -2,11 +2,13 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 import * as path from "path";
 import * as net from "net";
+import * as fs from "fs";
 import stripJsonComments = require("strip-json-comments");
 import { logger } from "@vscode/debugadapter";
 import { Address4, Address6 } from "ip-address";
 import { ChildProcess } from "./node/childProcess";
 import { HostPlatform } from "./hostPlatform";
+import { FileSystem } from "./node/fileSystem";
 import customRequire from "./customRequire";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -124,3 +126,57 @@ export function ipToBuffer(ip: string): Buffer {
     }
     throw new Error("Invalid IP address format.");
 }
+
+export async function switchBundleOptions(projectRootPath: string, flag: boolean) {
+    const splitBundleOptionsPath = path.resolve(
+        projectRootPath,
+        "node_modules",
+        "metro",
+        "src",
+        "lib",
+        "splitBundleOptions.js",
+    );
+    const splitBundleOptionsContent = fs.readFileSync(splitBundleOptionsPath, "utf-8");
+    let modifiedData;
+    if (flag) {
+        modifiedData = splitBundleOptionsContent.replace(
+            /excludeSource:\s*options\.excludeSource/,
+            "excludeSource: false",
+        );
+
+        modifiedData = modifiedData.replace(
+            /sourcePaths:\s*options\.sourcePaths/,
+            'sourcePaths: "absolute"',
+        );
+    } else {
+        modifiedData = splitBundleOptionsContent.replace(
+            /excludeSource:\s*false/,
+            "excludeSource: options.excludeSource",
+        );
+
+        modifiedData = modifiedData.replace(
+            /sourcePaths:\s*"absolute"/,
+            "sourcePaths: options.sourcePaths",
+        );
+    }
+    const nodeFileSystem = new FileSystem();
+    await nodeFileSystem.writeFile(splitBundleOptionsPath, modifiedData);
+}
+
+export function checkBundleOptions(projectRootPath: string): boolean {
+    const splitBundleOptionsPath = path.resolve(
+        projectRootPath,
+        "node_modules",
+        "metro",
+        "src",
+        "lib",
+        "splitBundleOptions.js",
+    );
+
+    const splitBundleOptionsContent = fs.readFileSync(splitBundleOptionsPath, "utf-8");
+
+    const excludeSourceRegex = /excludeSource\s*:\s*false/.test(splitBundleOptionsContent);
+    const sourcePathsRegex = /sourcePaths\s*:\s*"absolute"/.test(splitBundleOptionsContent);
+
+    return excludeSourceRegex && sourcePathsRegex;
+}

src/debugger/direct/directDebugSession.ts

@@ -5,6 +5,7 @@ import * as vscode from "vscode";
 import { logger } from "@vscode/debugadapter";
 import { DebugProtocol } from "vscode-debugprotocol";
 import * as nls from "vscode-nls";
+import * as semver from "semver";
 import { ProjectVersionHelper } from "../../common/projectVersionHelper";
 import { TelemetryHelper } from "../../common/telemetryHelper";
 import { HermesCDPMessageHandler } from "../../cdp-proxy/CDPMessageHandlers/hermesCDPMessageHandler";
@@ -26,6 +27,7 @@ import { RNSession } from "../debugSessionWrapper";
 import { SettingsHelper } from "../../extension/settingsHelper";
 import { ReactNativeProjectHelper } from "../../common/reactNativeProjectHelper";
 import { IWDPHelper } from "./IWDPHelper";
+import { checkBundleOptions } from "../../common/utils";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
@@ -40,6 +42,7 @@ export class DirectDebugSession extends DebugSessionBase {
     private appTargetConnectionClosedHandlerDescriptor?: vscode.Disposable;
     private attachSession: vscode.DebugSession | null;
     private iOSWKDebugProxyHelper: IWDPHelper;
+    private static RNVersion_Direct_Debug = "0.76.0";
 
     constructor(rnSession: RNSession) {
         super(rnSession);
@@ -175,6 +178,17 @@ export class DirectDebugSession extends DebugSessionBase {
                 this.projectRootPath,
                 ProjectVersionHelper.generateAdditionalPackagesToCheckByPlatform(attachArgs),
             );
+
+            if (
+                semver.gte(versions.reactNativeVersion, DirectDebugSession.RNVersion_Direct_Debug)
+            ) {
+                if (!checkBundleOptions(this.projectRootPath)) {
+                    logger.warn(
+                        "You are currently on react native >= 0.76.0, please use command React Native: Update metro bundler configure(from 0.76) -- Experimental -> Using react-native-tools debugger and then rebuild your application before Attach",
+                    );
+                }
+            }
+
             extProps = TelemetryHelper.addPlatformPropertiesToTelemetryProperties(
                 attachArgs,
                 versions,

src/extension/commands/index.ts

@@ -33,3 +33,4 @@ export * from "./prebuildClean";
 export * from "./reopenQRCode";
 export * from "./enableHermes";
 export * from "./enableExpoHemes";
+export * from "./updateMetro";

src/extension/commands/updateMetro.ts

@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+
+import * as vscode from "vscode";
+import * as assert from "assert";
+import * as semver from "semver";
+import { ErrorHelper } from "../../common/error/errorHelper";
+import { InternalErrorCode } from "../../common/error/internalErrorCode";
+import { Command } from "./util/command";
+import { ProjectVersionHelper } from "../../common/projectVersionHelper";
+import { switchBundleOptions } from "../../common/utils";
+import { OutputChannelLogger } from "../log/OutputChannelLogger";
+
+const logger = OutputChannelLogger.getMainChannel();
+
+export class updateMetro extends Command {
+    codeName = "updateMetro";
+    label = "Update metro bundler configure(from 0.76) -- Experimental";
+    error = ErrorHelper.getInternalError(InternalErrorCode.FailedToUpdateMetro);
+    private static RNVersion_Direct_Debug = "0.76.0";
+
+    async baseFn(): Promise<void> {
+        assert(this.project);
+
+        const type = await vscode.window.showQuickPick([
+            "Using react-native-tools debugger",
+            "Default",
+        ]);
+        const projectRootPath = this.project.getPackager().getProjectPath();
+        const versions = await ProjectVersionHelper.getReactNativeVersions(projectRootPath);
+        if (semver.lt(versions.reactNativeVersion, updateMetro.RNVersion_Direct_Debug)) return;
+        if (!type) return;
+        if (type === "Using react-native-tools debugger") {
+            logger.info("update metro bundle configuration to react-native-tools debugger");
+            await switchBundleOptions(projectRootPath, true);
+        }
+        if (type === "Default") {
+            logger.info("update metro bundle configuration to default");
+            await switchBundleOptions(projectRootPath, false);
+        }
+    }
+}