Move all commands to use message proxies (#575)

A while ago we introduced a new messaging mechanism that uses TypeScript
interface and JS proxies to provide a RPC-like experience. We still had
some leftover commands in the codebase, some of which were triggering
some abandoned and unused code sections. This PR migrates the remaining
commands to use the new RPC mechanism and cleans up dead code some of
the unused commands were accessing.

1. We are migrating error message and open URL commands to Utils
interface
2. We are updating relevant parts of the webview UI code to use Utils
interface instead of calling into vscode API directly
3. We are deleting "file follow" commands and related code that was only
updating some internal variables that we never used.

# Test plan
1. Open project with IDE
2. Click "report issue command" (which uses open URL)

packages/vscode-extension/src/common/utils.ts

@@ -4,5 +4,10 @@ export interface UtilsInterface {
   reportIssue(): Promise<void>;
 
   openFileAt(filePath: string, line0Based: number, column0Based: number): Promise<void>;
-  movePanelToNewWindow(): void;
+
+  movePanelToNewWindow(): Promise<void>;
+
+  showDismissableError(errorMessage: string): Promise<void>;
+
+  openExternalUrl(uriString: string): Promise<void>;
 }

packages/vscode-extension/src/panels/WebviewController.ts

@@ -17,15 +17,8 @@ type CallArgs = {
 };
 export type WebviewEvent =
   | {
-      command: "openExternalUrl";
-      url: string;
-    }
-  | { command: "startFollowing" }
-  | { command: "stopFollowing" }
-  | { command: "showDismissableError"; message: string }
-  | ({
       command: "call";
-    } & CallArgs);
+    } & CallArgs;
 
 export class WebviewController implements Disposable {
   private readonly dependencyManager: DependencyManager;
@@ -44,8 +37,6 @@ export class WebviewController implements Disposable {
     });
   });
 
-  private followEnabled = false;
-
   private readonly callableObjects: Map<string, object>;
 
   constructor(private webview: Webview) {
@@ -55,8 +46,6 @@ export class WebviewController implements Disposable {
     // Set the manager to listen and change the persisting storage for the extension.
     this.dependencyManager = new DependencyManager(webview);
 
-    this.setupEditorListeners();
-
     this.deviceManager = new DeviceManager();
     this.project = new Project(this.deviceManager, this.dependencyManager);
 
@@ -108,18 +97,6 @@ export class WebviewController implements Disposable {
           case "call":
             this.handleRemoteCall(message);
             return;
-          case "openExternalUrl":
-            openExternalUrl(message.url);
-            return;
-          case "stopFollowing":
-            this.followEnabled = false;
-            return;
-          case "startFollowing":
-            this.followEnabled = true;
-            return;
-          case "showDismissableError":
-            showDismissableError(message.message);
-            return;
         }
       },
       undefined,
@@ -181,23 +158,4 @@ export class WebviewController implements Disposable {
       }
     }
   }
-
-  private setupEditorListeners() {
-    extensionContext.subscriptions.push(
-      window.onDidChangeActiveTextEditor((editor) => {
-        if (editor) {
-          this.project.onActiveFileChange(editor.document.fileName, this.followEnabled);
-        }
-      })
-    );
-  }
-}
-
-// Open the url in the default user's browser.
-function openExternalUrl(url: string) {
-  vscode.env.openExternal(vscode.Uri.parse(url));
-}
-
-function showDismissableError(message: string) {
-  window.showErrorMessage(message, "Dismiss");
 }

packages/vscode-extension/src/project/deviceSession.ts

@@ -237,10 +237,6 @@ export class DeviceSession implements Disposable {
     this.devtools.send("RNIDE_openPreview", { previewId });
   }
 
-  public onActiveFileChange(filename: string, followEnabled: boolean) {
-    this.devtools.send("RNIDE_editorFileChanged", { filename, followEnabled });
-  }
-
   public async changeDeviceSettings(settings: DeviceSettings): Promise<boolean> {
     return this.device.changeSettings(settings);
   }

packages/vscode-extension/src/project/project.ts

@@ -446,10 +446,6 @@ export class Project
     }
   }
 
-  public onActiveFileChange(filename: string, followEnabled: boolean) {
-    this.deviceSession?.onActiveFileChange(filename, followEnabled);
-  }
-
   public async getDeviceSettings() {
     return this.deviceSettings;
   }

packages/vscode-extension/src/utilities/utils.ts

@@ -1,4 +1,4 @@
-import { commands, Disposable, env, Uri } from "vscode";
+import { commands, window, env, Uri } from "vscode";
 import { Logger } from "../Logger";
 import { homedir } from "node:os";
 import path from "path";
@@ -7,7 +7,6 @@ import fs from "fs";
 import { extensionContext } from "./extensionContext";
 import { openFileAtPosition } from "./openFileAtPosition";
 import { UtilsInterface } from "../common/utils";
-import { Platform } from "./platform";
 
 type keybindingType = {
   command: string;
@@ -71,7 +70,15 @@ export class Utils implements UtilsInterface {
     openFileAtPosition(filePath, line0Based, column0Based);
   }
 
-  public movePanelToNewWindow() {
+  public async movePanelToNewWindow() {
     commands.executeCommand("workbench.action.moveEditorToNewWindow");
   }
+
+  public async showDismissableError(errorMessage: string) {
+    window.showErrorMessage(errorMessage, "Dismiss");
+  }
+
+  public async openExternalUrl(uriString: string) {
+    env.openExternal(Uri.parse(uriString));
+  }
 }

packages/vscode-extension/src/webview/components/shared/Anchor.tsx

@@ -1,18 +1,16 @@
-import { vscode } from "../../utilities/vscode";
+import { useUtils } from "../../providers/UtilsProvider";
 
 interface AnchorProps {
-  url?: string;
+  url: string;
   children: React.ReactNode;
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 
 function Anchor({ url, children, onClick }: AnchorProps) {
+  const utils = useUtils();
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
-    vscode.postMessage({
-      command: "openExternalUrl",
-      url,
-    });
+    utils.openExternalUrl(url);
   };
 
   return (

packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx

@@ -10,7 +10,7 @@ import { AndroidSupportedDevices, iOSSupportedDevices } from "../utilities/const
 import { IOSDeviceTypeInfo, IOSRuntimeInfo } from "../../common/DeviceManager";
 import { useDependencies } from "../providers/DependenciesProvider";
 import { vscode } from "../utilities/vscode";
-import { Platform } from "../providers/UtilsProvider";
+import { Platform, useUtils } from "../providers/UtilsProvider";
 
 const firstIosDeviceName = iOSSupportedDevices[0].name;
 const firstAndroidDeviceName = AndroidSupportedDevices[0].name;
@@ -69,6 +69,7 @@ function DevicesNotFoundView() {
   const [isIOSCreating, withIosCreating] = useLoadingState();
   const [isAndroidCreating, withAndroidCreating] = useLoadingState();
   const { androidEmulatorError, iosSimulatorError } = useDependencies();
+  const utils = useUtils();
 
   function openCreateNewDeviceModal() {
     openModal(
@@ -79,7 +80,7 @@ function DevicesNotFoundView() {
 
   async function createAndroidDevice() {
     if (androidEmulatorError !== undefined) {
-      vscode.postMessage({ command: "showDismissableError", message: androidEmulatorError });
+      utils.showDismissableError(androidEmulatorError);
       return;
     }
 
@@ -99,7 +100,7 @@ function DevicesNotFoundView() {
 
   async function createIOSDevice() {
     if (iosSimulatorError !== undefined) {
-      vscode.postMessage({ command: "showDismissableError", message: iosSimulatorError });
+      utils.showDismissableError(iosSimulatorError);
       return;
     }