Fix small problems (#605)

This PR fixes a few small problems: 
1) it formats files added in #585
2) awaits isExpoGoProject in dependencyManager, before it was always
false causing useDiagnosticAlert in expo go projects
3) adds new checks for android and ios native directories; before this
change users that did not run `expo prebuild` were met with a generic
build error alert that did not point them to the problem, now the
information about the problem is added to the diagnostics panel, Radon
IDE logs and a new message is added to build error alert to point user
in the right direction


Test plan: 
- run expo go project to test if IDE shows any unnecessary alerts 
- run non expo go application and remove android directory, then run
android emulator and see the alerts that are shown by IDE

packages/vscode-extension/src/builders/BuildManager.ts

@@ -69,7 +69,8 @@ export class BuildManager {
           forceCleanBuild,
           cancelToken,
           this.buildOutputChannel,
-          progressListener
+          progressListener,
+          this.dependencyManager
         );
       } else {
         this.buildOutputChannel = window.createOutputChannel("Radon IDE (iOS build)", {
@@ -93,6 +94,7 @@ export class BuildManager {
           cancelToken,
           this.buildOutputChannel,
           progressListener,
+          this.dependencyManager,
           installPodsIfNeeded
         );
       }

packages/vscode-extension/src/builders/buildAndroid.ts

@@ -15,6 +15,7 @@ import { DevicePlatform } from "../common/DeviceManager";
 import { getReactNativeVersion } from "../utilities/reactNative";
 import { runExternalBuild } from "./customBuild";
 import { fetchEasBuild } from "./eas";
+import { DependencyManager } from "../dependency/DependencyManager";
 
 export type AndroidBuildResult = {
   platform: DevicePlatform.Android;
@@ -76,7 +77,8 @@ export async function buildAndroid(
   forceCleanBuild: boolean,
   cancelToken: CancelToken,
   outputChannel: OutputChannel,
-  progressListener: (newProgress: number) => void
+  progressListener: (newProgress: number) => void,
+  dependencyManager: DependencyManager
 ): Promise<AndroidBuildResult> {
   const { customBuild, eas, env, android } = getLaunchConfiguration();
 
@@ -117,6 +119,12 @@ export async function buildAndroid(
     return { apkPath, packageName: EXPO_GO_PACKAGE_NAME, platform: DevicePlatform.Android };
   }
 
+  if (!(await dependencyManager.isInstalled("android"))) {
+    throw new Error(
+      "Android directory does not exist, configure build source in launch configuration or use expo prebuild to generate the directory"
+    );
+  }
+
   const androidSourceDir = getAndroidSourceDir(appRootFolder);
   const productFlavor = android?.productFlavor || "";
   const buildType = android?.buildType || "debug";

packages/vscode-extension/src/builders/buildIOS.ts

@@ -11,6 +11,7 @@ import { findXcodeProject, findXcodeScheme, IOSProjectInfo } from "../utilities/
 import { runExternalBuild } from "./customBuild";
 import { fetchEasBuild } from "./eas";
 import { getXcodebuildArch } from "../utilities/common";
+import { DependencyManager } from "../dependency/DependencyManager";
 
 export type IOSBuildResult = {
   platform: DevicePlatform.IOS;
@@ -76,6 +77,7 @@ export async function buildIos(
   cancelToken: CancelToken,
   outputChannel: OutputChannel,
   progressListener: (newProgress: number) => void,
+  dependencyManager: DependencyManager,
   installPodsIfNeeded: () => Promise<void>
 ): Promise<IOSBuildResult> {
   const { customBuild, eas, ios: buildOptions, env } = getLaunchConfiguration();
@@ -119,6 +121,12 @@ export async function buildIos(
     return { appPath, bundleID: EXPO_GO_BUNDLE_ID, platform: DevicePlatform.IOS };
   }
 
+  if (!(await dependencyManager.isInstalled("ios"))) {
+    throw new Error(
+      "Ios directory does not exist, configure build source in launch configuration or use expo prebuild to generate the directory"
+    );
+  }
+
   const sourceDir = getIosSourceDir(appRootFolder);
 
   await installPodsIfNeeded();

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

@@ -12,6 +12,8 @@ export type Dependency =
   | "cocoaPods"
   | "nodejs"
   | "nodeModules"
+  | "android"
+  | "ios"
   | "pods"
   | "reactNative"
   | "expo"

packages/vscode-extension/src/dependency/DependencyManager.ts

@@ -27,6 +27,7 @@ import {
 } from "../common/DependencyManager";
 import { shouldUseExpoCLI } from "../utilities/expoCli";
 import { CancelToken } from "../builders/cancelToken";
+import { getAndroidSourceDir } from "../builders/buildAndroid";
 
 const STALE_PODS = "stalePods";
 
@@ -67,11 +68,19 @@ export class DependencyManager implements Disposable, DependencyManagerInterface
           case "nodeModules":
             return { status: await this.nodeModulesStatus(), isOptional: false };
           case "pods":
-            return { status: await this.podsStatus(), isOptional: !isExpoGoProject() };
+            return { status: await this.podsStatus(), isOptional: await isExpoGoProject() };
           case "reactNative": {
             const status = dependencyStatus("react-native", MinSupportedVersion.reactNative);
             return { status, isOptional: false };
           }
+          case "android": {
+            const status = this.androidDirectoryExits() ? "installed" : "notInstalled";
+            return { status, isOptional: await areNativeDirectoriesOptional() };
+          }
+          case "ios": {
+            const status = this.iosDirectoryExits() ? "installed" : "notInstalled";
+            return { status, isOptional: await areNativeDirectoriesOptional() };
+          }
           case "expo": {
             const status = dependencyStatus("expo", MinSupportedVersion.expo);
             return { status, isOptional: !shouldUseExpoCLI() };
@@ -98,6 +107,24 @@ export class DependencyManager implements Disposable, DependencyManagerInterface
     return diagnostics;
   }
 
+  androidDirectoryExits() {
+    const appRootFolder = getAppRootFolder();
+    const androidDirPath = getAndroidSourceDir(appRootFolder);
+    if (fs.existsSync(androidDirPath)) {
+      return true;
+    }
+    return false;
+  }
+
+  iosDirectoryExits() {
+    const appRootFolder = getAppRootFolder();
+    const iosDirPath = getIosSourceDir(appRootFolder);
+    if (fs.existsSync(iosDirPath)) {
+      return true;
+    }
+    return false;
+  }
+
   public async isInstalled(dependency: Dependency) {
     const status = await this.getStatus([dependency]);
     return status[dependency].status === "installed";
@@ -321,3 +348,9 @@ function isUsingExpoRouter() {
     return false;
   }
 }
+async function areNativeDirectoriesOptional(): Promise<boolean> {
+  const isExpoGo = await isExpoGoProject();
+  const launchConfiguration = getLaunchConfiguration();
+
+  return isExpoGo && !!launchConfiguration.eas && !!launchConfiguration.customBuild;
+}

packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.css

@@ -41,4 +41,4 @@
 .icons-container {
   display: flex;
   align-items: center;
-}
+}

packages/vscode-extension/src/webview/components/DimensionsBox.tsx

@@ -20,9 +20,9 @@ type DimensionsBoxProps = {
   wrapperDivRef: React.RefObject<HTMLDivElement>;
 };
 
-type DimensionsBoxPosition = 'above' | 'below' | 'left' | 'right' | 'inside';
+type DimensionsBoxPosition = "above" | "below" | "left" | "right" | "inside";
 
-function DimensionsBox({ device, frame, wrapperDivRef } : DimensionsBoxProps) {
+function DimensionsBox({ device, frame, wrapperDivRef }: DimensionsBoxProps) {
   if (!device) {
     return;
   }
@@ -32,55 +32,62 @@ function DimensionsBox({ device, frame, wrapperDivRef } : DimensionsBoxProps) {
 
   const previewDiv = wrapperDivRef.current?.childNodes?.[0] as unknown;
 
-  if (!previewDiv || typeof previewDiv !== 'object' 
-    || !('clientHeight' in previewDiv) 
-    || typeof previewDiv.clientHeight !== 'number'
+  if (
+    !previewDiv ||
+    typeof previewDiv !== "object" ||
+    !("clientHeight" in previewDiv) ||
+    typeof previewDiv.clientHeight !== "number"
   ) {
     return;
   }
 
   const { clientHeight: previewHeight } = previewDiv;
 
   const boxPosition: DimensionsBoxPosition = (() => {
-    if (frame.y >= VERTICAL_POSITION_THRESHOLD) {return 'above';}
-    else if (frame.y + frame.height <= 1 - VERTICAL_POSITION_THRESHOLD) {return 'below';}
-    else if (frame.x + frame.width <= HORIZONTAL_POSITION_THRESHOLD) {return 'right';}
-    else if (frame.x >= 1 - HORIZONTAL_POSITION_THRESHOLD) {return 'left';}
-    return 'inside';
+    if (frame.y >= VERTICAL_POSITION_THRESHOLD) {
+      return "above";
+    } else if (frame.y + frame.height <= 1 - VERTICAL_POSITION_THRESHOLD) {
+      return "below";
+    } else if (frame.x + frame.width <= HORIZONTAL_POSITION_THRESHOLD) {
+      return "right";
+    } else if (frame.x >= 1 - HORIZONTAL_POSITION_THRESHOLD) {
+      return "left";
+    }
+    return "inside";
   })();
 
   const positionalProps = (() => {
     switch (boxPosition) {
-      case 'above': 
+      case "above":
         return {
           "--top": `${(frame.y - VERTICAL_ARROW_MARGIN) * 100}%`,
-          "--left": `${(frame.x + frame.width/2) * 100}%`,
-          "--box-transform": 'translate(-50%, -100%)'
+          "--left": `${(frame.x + frame.width / 2) * 100}%`,
+          "--box-transform": "translate(-50%, -100%)",
         };
-      case 'below':
+      case "below":
         return {
           "--top": `${(frame.y + frame.height + VERTICAL_ARROW_MARGIN) * 100}%`,
-          "--left": `${(frame.x + frame.width/2) * 100}%`,
-          "--box-transform": 'translate(-50%, 0%)'
+          "--left": `${(frame.x + frame.width / 2) * 100}%`,
+          "--box-transform": "translate(-50%, 0%)",
         };
-      case 'right':
+      case "right":
         return {
-          "--top": `${(frame.y + frame.height/2) * 100}%`,
+          "--top": `${(frame.y + frame.height / 2) * 100}%`,
           "--left": `${(frame.x + frame.width + HORIZONTAL_ARROW_MARGIN) * 100}%`,
-          "--box-transform": 'translate(0%, -50%)'
+          "--box-transform": "translate(0%, -50%)",
         };
-      case 'left':
+      case "left":
         return {
-          "--top": `${(frame.y + frame.height/2) * 100}%`,
+          "--top": `${(frame.y + frame.height / 2) * 100}%`,
           "--left": `${(frame.x - HORIZONTAL_ARROW_MARGIN) * 100}%`,
-          "--box-transform": 'translate(-100%, -50%)'
+          "--box-transform": "translate(-100%, -50%)",
         };
-      default: 
+      default:
         return {
-          "--top": `${(frame.y + frame.height/2) * 100}%`,
-          "--left": `${(frame.x + frame.width/2) * 100}%`,
-          "--box-transform": 'translate(-50%, -50%)'
-        }; 
+          "--top": `${(frame.y + frame.height / 2) * 100}%`,
+          "--left": `${(frame.x + frame.width / 2) * 100}%`,
+          "--box-transform": "translate(-50%, -50%)",
+        };
     }
   })();
 
@@ -92,17 +99,17 @@ function DimensionsBox({ device, frame, wrapperDivRef } : DimensionsBoxProps) {
     "--border-radius": `${boxHeight * BORDER_RADIUS_FRACTION}px`,
     "--horizontal-padding": `${boxHeight * HORIZONTAL_PADDING_FRACTION}px`,
     "--arrow-size": `${boxHeight * ARROW_SIZE_FRACTION}px`,
-    ...positionalProps
+    ...positionalProps,
   };
 
   return (
     <div style={cssPropertiesForDimensionsBox}>
-      { boxPosition !== 'inside' && <div className="arrow" /> }
+      {boxPosition !== "inside" && <div className="arrow" />}
       <div className="dimensions-box">
-        { width } × { height }
-      </div> 
+        {width} × {height}
+      </div>
     </div>
   );
-};
+}
 
 export default DimensionsBox;

packages/vscode-extension/src/webview/components/Preview.tsx

@@ -14,12 +14,7 @@ import PreviewLoader from "./PreviewLoader";
 import { useBuildErrorAlert, useBundleErrorAlert } from "../hooks/useBuildErrorAlert";
 import Debugger from "./Debugger";
 import { useNativeRebuildAlert } from "../hooks/useNativeRebuildAlert";
-import {
-  Frame,
-  InspectDataStackItem,
-  RecordingData,
-  ZoomLevelType,
-} from "../../common/Project";
+import { Frame, InspectDataStackItem, RecordingData, ZoomLevelType } from "../../common/Project";
 import { InspectDataMenu } from "./InspectDataMenu";
 import { useResizableProps } from "../hooks/useResizableProps";
 import ZoomControls from "./ZoomControls";
@@ -589,7 +584,7 @@ function Preview({
                     />
                     <DimensionsBox
                       device={device}
-                      frame={inspectFrame} 
+                      frame={inspectFrame}
                       wrapperDivRef={wrapperDivRef}
                     />
                   </div>