expo-dev-launcher 1.2.0 → 1.3.0

package/android/src/main/AndroidManifest.xml

@@ -4,7 +4,6 @@
   <application>
     <activity
       android:name="expo.modules.devlauncher.launcher.DevLauncherActivity"
-      android:screenOrientation="portrait"
       android:theme="@style/Theme.DevLauncher.LauncherActivity"
       android:launchMode="singleTask"
       android:exported="true"

package/android/src/main/java/expo/modules/devlauncher/helpers/DevLauncherReactUtils.kt

@@ -9,13 +9,15 @@ import com.facebook.react.bridge.JSBundleLoader
 import expo.interfaces.devmenu.annotations.ContainsDevMenuExtension
 import expo.modules.devlauncher.react.DevLauncherDevSupportManagerSwapper
 import expo.modules.devlauncher.react.DevLauncherInternalSettings
+import okhttp3.HttpUrl
 
 fun injectReactInterceptor(
   context: Context,
   reactNativeHost: ReactNativeHost,
   url: Uri
 ): Boolean {
-  val debugServerHost = url.host + ":" + url.port
+  val port = if (url.port != -1) url.port else HttpUrl.defaultPort(url.scheme)
+  val debugServerHost = url.host + ":" + port
   // We need to remove "/" which is added to begin of the path by the Uri
   // and the bundle type
   val appBundleName = if (url.path.isNullOrEmpty()) {

package/android/src/main/java/expo/modules/devlauncher/launcher/errors/DevLauncherUncaughtExceptionHandler.kt

@@ -109,28 +109,25 @@ class DevLauncherUncaughtExceptionHandler(
     }
 
     try {
-      val url = getLogsUrl()
+      val url = getWebSocketUrl()
       val remoteLogManager = DevLauncherRemoteLogManager(DevLauncherKoinContext.app.koin.get(), url)
         .apply {
           deferError("Your app just crashed. See the error below.")
           deferError(exception)
         }
-      remoteLogManager.sendSync()
+      remoteLogManager.sendViaWebSocket()
     } catch (e: Throwable) {
       Log.e("DevLauncher", "Couldn't send an exception to bundler. $e", e)
     }
   }
 
-  private fun getLogsUrl(): Uri {
-    val logsUrlFromManifest = controller.manifest?.getLogUrl()
-    if (logsUrlFromManifest.isNullOrEmpty()) {
-      return Uri.parse(logsUrlFromManifest)
-    }
-
+  private fun getWebSocketUrl(): Uri {
+    // URL structure replicates
+    // https://github.com/facebook/react-native/blob/0.69-stable/Libraries/Utilities/HMRClient.js#L164
     return Uri
       .parse(controller.appHost.reactInstanceManager.devSupportManager.sourceUrl)
       .buildUpon()
-      .path("logs")
+      .path("hot")
       .clearQuery()
       .build()
   }

package/android/src/main/java/expo/modules/devlauncher/logs/DevLauncherRemoteLog.kt

@@ -1,39 +1,27 @@
 package expo.modules.devlauncher.logs
 
-import com.google.gson.Gson
 import com.google.gson.GsonBuilder
 import com.google.gson.annotations.Expose
 
-internal interface DevLauncherRemoteLogBody {
-  val message: String
-  val stack: String?
-
-  override fun toString(): String
-}
-
-internal class DevLauncherSimpleRemoteLogBody(override val message: String) : DevLauncherRemoteLogBody {
-  override val stack: String? = null
-
-  override fun toString(): String = message
-}
-
-internal class DevLauncherExceptionRemoteLogBody(exception: Throwable) : DevLauncherRemoteLogBody {
-  override val message: String = exception.toString()
-  override val stack: String = exception.stackTraceToRemoteLogString()
-
-  override fun toString(): String = Gson().toJson(this)
-}
-
+/**
+ * object format comes from
+ * https://github.com/facebook/react-native/blob/0.69-stable/Libraries/Utilities/HMRClient.js#L119-L134
+ */
 @Suppress("UNUSED")
 internal data class DevLauncherRemoteLog(
-  val logBody: DevLauncherRemoteLogBody,
-  @Expose val level: String = "error"
+  val messages: List<String>,
+  @Expose val level: String = "error",
+  @Expose val mode: String = "BRIDGE"
 ) {
+  /**
+   * `data` is an array whose members are simply concatenated with a space before printing to the
+   * console, so we join messages with a newline and send an array consisting of just a single item.
+   */
   @Expose
-  val includesStack = logBody.stack !== null
+  private val data = arrayOf(messages.joinToString("\n"))
 
   @Expose
-  private val body = logBody.toString()
+  private val type = "log"
 
   fun toJson(): String {
     return GsonBuilder()
@@ -42,15 +30,3 @@ internal data class DevLauncherRemoteLog(
       .toJson(this)
   }
 }
-
-internal fun Throwable.stackTraceToRemoteLogString(): String {
-  val baseTrace = stackTrace.joinToString(separator = "\n") {
-    it.toString()
-  }
-
-  cause?.let {
-    return baseTrace + "\nCaused By ${it.stackTraceToRemoteLogString()}"
-  }
-
-  return baseTrace
-}

package/android/src/main/java/expo/modules/devlauncher/logs/DevLauncherRemoteLogManager.kt

@@ -1,49 +1,45 @@
 package expo.modules.devlauncher.logs
 
 import android.net.Uri
-import android.os.Build
-import expo.modules.devlauncher.helpers.await
-import expo.modules.devlauncher.helpers.post
-import kotlinx.coroutines.runBlocking
-import okhttp3.MediaType
 import okhttp3.OkHttpClient
-import okhttp3.RequestBody
+import okhttp3.Request
+import okhttp3.Response
+import okhttp3.WebSocket
+import okhttp3.WebSocketListener
 
-class DevLauncherRemoteLogManager(private val httpClient: OkHttpClient, private val url: Uri) {
-  private val batch: MutableList<DevLauncherRemoteLog> = mutableListOf()
+class DevLauncherRemoteLogManager(private val httpClient: OkHttpClient, private val url: Uri) : WebSocketListener() {
+  private val batch: MutableList<String> = mutableListOf()
 
   fun deferError(throwable: Throwable) {
-    addToBatch(
-      DevLauncherRemoteLog(
-        DevLauncherExceptionRemoteLogBody(throwable)
-      )
-    )
+    batch.add(throwable.toRemoteLogString())
   }
 
   fun deferError(message: String) {
-    addToBatch(
-      DevLauncherRemoteLog(
-        DevLauncherSimpleRemoteLogBody(message)
-      )
-    )
+    batch.add(message)
   }
 
-  private fun addToBatch(log: DevLauncherRemoteLog) {
-    batch.add(log)
+  fun sendViaWebSocket() {
+    val request = Request.Builder().url(url.toString()).build()
+    httpClient.newWebSocket(request, this)
   }
 
-  fun sendSync() = runBlocking {
-    val content = batch.joinToString(separator = ",") { it.toJson() }
-    val requestBody = RequestBody.create(MediaType.get("application/json"), "[$content]")
+  override fun onOpen(webSocket: WebSocket, response: Response) {
+    webSocket.send(DevLauncherRemoteLog(batch).toJson())
+    webSocket.close(1000, null)
+    batch.clear()
+  }
+}
 
-    val postRequest = post(
-      url,
-      requestBody,
-      "Device-Id" to Build.ID,
-      "Device-Name" to Build.DISPLAY
-    )
-    postRequest.await(httpClient)
+internal fun Throwable.toRemoteLogString(): String {
+  val separator = "\n  "
+  val baseTrace = stackTrace.joinToString(separator) {
+    it.toString()
+  }
+  val remoteLogString = "$this$separator$baseTrace"
 
-    batch.clear()
+  cause?.let {
+    return "$remoteLogString\nCaused by ${it.toRemoteLogString()}"
   }
+
+  return remoteLogString
 }

package/android/src/react-native-64/expo/modules/devlauncher/rncompatibility/DevLauncherReactNativeHostHandler.kt

@@ -25,6 +25,11 @@ class DevLauncherReactNativeHostHandler(context: Context) : ReactNativeHostHandl
     val applicationContext = context.applicationContext
 
     SoLoader.init(applicationContext, /* native exopackage */ false)
+    if (SoLoader.getLibraryPath("libv8android.so") != null) {
+      // Assuming V8 overrides the `getJavaScriptExecutorFactory` in the main ReactNativeHost,
+      // return null here to use the default value.
+      return null
+    }
     if (SoLoader.getLibraryPath("libjsc.so") != null) {
       return JSCExecutorFactory(applicationContext.packageName, AndroidInfoHelpers.getFriendlyDeviceName())
     }

package/android/src/react-native-65/expo/modules/devlauncher/rncompatibility/DevLauncherReactNativeHostHandler.kt

@@ -25,6 +25,11 @@ class DevLauncherReactNativeHostHandler(context: Context) : ReactNativeHostHandl
     val applicationContext = context.applicationContext
 
     SoLoader.init(applicationContext, /* native exopackage */ false)
+    if (SoLoader.getLibraryPath("libv8android.so") != null) {
+      // Assuming V8 overrides the `getJavaScriptExecutorFactory` in the main ReactNativeHost,
+      // return null here to use the default value.
+      return null
+    }
     if (SoLoader.getLibraryPath("libjsc.so") != null) {
       return JSCExecutorFactory(applicationContext.packageName, AndroidInfoHelpers.getFriendlyDeviceName())
     }

package/android/src/react-native-66/expo/modules/devlauncher/rncompatibility/DevLauncherReactNativeHostHandler.kt

@@ -25,6 +25,11 @@ class DevLauncherReactNativeHostHandler(context: Context) : ReactNativeHostHandl
     val applicationContext = context.applicationContext
 
     SoLoader.init(applicationContext, /* native exopackage */ false)
+    if (SoLoader.getLibraryPath("libv8android.so") != null) {
+      // Assuming V8 overrides the `getJavaScriptExecutorFactory` in the main ReactNativeHost,
+      // return null here to use the default value.
+      return null
+    }
     if (SoLoader.getLibraryPath("libjsc.so") != null) {
       return JSCExecutorFactory(applicationContext.packageName, AndroidInfoHelpers.getFriendlyDeviceName())
     }

package/android/src/react-native-67/expo/modules/devlauncher/rncompatibility/DevLauncherReactNativeHostHandler.kt

@@ -26,6 +26,11 @@ class DevLauncherReactNativeHostHandler(context: Context) : ReactNativeHostHandl
     val applicationContext = context.applicationContext
 
     SoLoader.init(applicationContext, /* native exopackage */ false)
+    if (SoLoader.getLibraryPath("libv8android.so") != null) {
+      // Assuming V8 overrides the `getJavaScriptExecutorFactory` in the main ReactNativeHost,
+      // return null here to use the default value.
+      return null
+    }
     if (SoLoader.getLibraryPath("libjsc.so") != null) {
       return JSCExecutorFactory(applicationContext.packageName, AndroidInfoHelpers.getFriendlyDeviceName())
     }

package/android/src/react-native-69/expo/modules/devlauncher/rncompatibility/DevLauncherReactNativeHostHandler.kt

@@ -26,6 +26,11 @@ class DevLauncherReactNativeHostHandler(context: Context) : ReactNativeHostHandl
     val applicationContext = context.applicationContext
 
     SoLoader.init(applicationContext, /* native exopackage */ false)
+    if (SoLoader.getLibraryPath("libv8android.so") != null) {
+      // Assuming V8 overrides the `getJavaScriptExecutorFactory` in the main ReactNativeHost,
+      // return null here to use the default value.
+      return null
+    }
     if (SoLoader.getLibraryPath("libjsc.so") != null) {
       return JSCExecutorFactory(applicationContext.packageName, AndroidInfoHelpers.getFriendlyDeviceName())
     }

package/bundle/components/AppHeader.tsx

@@ -11,6 +11,7 @@ import {
   scale,
 } from 'expo-dev-client-components';
 import * as React from 'react';
+import { useWindowDimensions } from 'react-native';
 
 import { SafeAreaTop } from '../components/SafeAreaTop';
 import { useBuildInfo } from '../providers/BuildInfoProvider';
@@ -18,6 +19,7 @@ import { useUser } from '../providers/UserContextProvider';
 
 export function AppHeader({ navigation }) {
   const buildInfo = useBuildInfo();
+  const { width } = useWindowDimensions();
   const { appName, appIcon } = buildInfo;
 
   const { userData, selectedAccount } = useUser();
@@ -31,7 +33,11 @@ export function AppHeader({ navigation }) {
 
   return (
     <>
-      <View bg="default" pt="small" pb="small">
+      <View
+        bg="default"
+        pt="small"
+        pb="small"
+        style={{ paddingHorizontal: width > 650 ? scale[14] : 0 }}>
         <SafeAreaTop />
         <Row align="center">
           <Spacer.Horizontal size="medium" />

package/bundle/components/ScreenContainer.tsx

@@ -0,0 +1,8 @@
+import { scale, View } from 'expo-dev-client-components';
+import * as React from 'react';
+import { useWindowDimensions } from 'react-native';
+
+export function ScreenContainer({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowDimensions();
+  return <View style={{ flex: 1, marginHorizontal: width > 650 ? scale[14] : 0 }}>{children}</View>;
+}

package/bundle/native-modules/DevLauncherAuth.ts

@@ -1,8 +1,16 @@
-import { NativeModules, AppState, Linking, Platform } from 'react-native';
+import {
+  AppState,
+  EmitterSubscription,
+  Linking,
+  Platform,
+  NativeEventSubscription,
+  NativeModules,
+} from 'react-native';
 
 const DevLauncherAuth = NativeModules.EXDevLauncherAuth;
 
-let redirectHandler: ((event: any) => void) | null = null;
+let appStateSubscription: NativeEventSubscription | null = null;
+let redirectSubscription: EmitterSubscription | null = null;
 let onWebBrowserCloseAndroid: null | (() => void) = null;
 let isAppStateAvailable: boolean = AppState.currentState !== null;
 
@@ -18,20 +26,20 @@ function onAppStateChangeAndroid(state: any) {
 }
 
 function stopWaitingForRedirect() {
-  if (!redirectHandler) {
+  if (!redirectSubscription) {
     throw new Error(
       `The WebBrowser auth session is in an invalid state with no redirect handler when one should be set`
     );
   }
 
-  Linking.removeEventListener('url', redirectHandler);
-  redirectHandler = null;
+  redirectSubscription.remove();
+  redirectSubscription = null;
 }
 
 async function openBrowserAndWaitAndroidAsync(startUrl: string): Promise<any> {
   const appStateChangedToActive = new Promise<void>((resolve) => {
     onWebBrowserCloseAndroid = resolve;
-    AppState.addEventListener('change', onAppStateChangeAndroid);
+    appStateSubscription = AppState.addEventListener('change', onAppStateChangeAndroid);
   });
 
   let result = { type: 'cancel' };
@@ -43,25 +51,28 @@ async function openBrowserAndWaitAndroidAsync(startUrl: string): Promise<any> {
     result = { type: 'dismiss' };
   }
 
-  AppState.removeEventListener('change', onAppStateChangeAndroid);
+  if (appStateSubscription != null) {
+    appStateSubscription.remove();
+    appStateSubscription = null;
+  }
   onWebBrowserCloseAndroid = null;
   return result;
 }
 
 function waitForRedirectAsync(returnUrl: string): Promise<any> {
   return new Promise((resolve) => {
-    redirectHandler = (event: any) => {
+    const redirectHandler = (event: any) => {
       if (event.url.startsWith(returnUrl)) {
         resolve({ url: event.url, type: 'success' });
       }
     };
 
-    Linking.addEventListener('url', redirectHandler);
+    redirectSubscription = Linking.addEventListener('url', redirectHandler);
   });
 }
 
 async function openAuthSessionPolyfillAsync(startUrl: string, returnUrl: string): Promise<any> {
-  if (redirectHandler) {
+  if (redirectSubscription) {
     throw new Error(
       `The WebBrowser's auth session is in an invalid state with a redirect handler set when it should not be`
     );

package/bundle/screens/BranchesScreen.tsx

@@ -6,6 +6,7 @@ import { BasicButton } from '../components/BasicButton';
 import { EASBranchRow, EASEmptyBranchRow } from '../components/EASUpdatesRows';
 import { EmptyBranchesMessage } from '../components/EmptyBranchesMessage';
 import { FlatList } from '../components/FlatList';
+import { ScreenContainer } from '../components/ScreenContainer';
 import { getRecentRuntime } from '../functions/getRecentRuntime';
 import { useOnUpdatePress } from '../hooks/useOnUpdatePress';
 import { useUpdatesConfig } from '../providers/UpdatesConfigProvider';
@@ -127,21 +128,23 @@ export function BranchesScreen({ navigation }: BranchesScreenProps) {
   }
 
   return (
-    <View flex="1" px="medium">
-      <FlatList
-        isLoading={isLoading}
-        isRefreshing={isRefreshing}
-        onRefresh={() => refetch()}
-        ListHeaderComponent={Header}
-        extraData={{ length: branches.length, hasNextPage, loadingUpdateId }}
-        data={branches}
-        ItemSeparatorComponent={Divider}
-        renderItem={renderBranch}
-        keyExtractor={(item) => item?.id}
-        ListFooterComponent={Footer}
-        ListEmptyComponent={EmptyList}
-      />
-    </View>
+    <ScreenContainer>
+      <View flex="1" px="medium">
+        <FlatList
+          isLoading={isLoading}
+          isRefreshing={isRefreshing}
+          onRefresh={() => refetch()}
+          ListHeaderComponent={Header}
+          extraData={{ length: branches.length, hasNextPage, loadingUpdateId }}
+          data={branches}
+          ItemSeparatorComponent={Divider}
+          renderItem={renderBranch}
+          keyExtractor={(item) => item?.id}
+          ListFooterComponent={Footer}
+          ListEmptyComponent={EmptyList}
+        />
+      </View>
+    </ScreenContainer>
   );
 }
 

package/bundle/screens/ExtensionsScreen.tsx

@@ -20,6 +20,7 @@ import { AppHeader } from '../components/AppHeader';
 import { EASBranchRow, EASEmptyBranchRow } from '../components/EASUpdatesRows';
 import { EmptyBranchesMessage } from '../components/EmptyBranchesMessage';
 import { ListButton } from '../components/ListButton';
+import { ScreenContainer } from '../components/ScreenContainer';
 import { useThrottle } from '../hooks/useDebounce';
 import { useOnUpdatePress } from '../hooks/useOnUpdatePress';
 import { useUpdatesConfig } from '../providers/UpdatesConfigProvider';
@@ -72,7 +73,7 @@ export function ExtensionsScreen({ navigation }: ExtensionsScreenProps) {
             <RefreshControl refreshing={throttledRefreshing} onRefresh={() => refetch()} />
           ) : null
         }>
-        <View flex="1">
+        <ScreenContainer>
           {compatibleExtensions.length === 0 && (
             <>
               <Spacer.Vertical size="medium" />
@@ -208,7 +209,7 @@ export function ExtensionsScreen({ navigation }: ExtensionsScreenProps) {
               <ActivityIndicator />
             </View>
           )}
-        </View>
+        </ScreenContainer>
       </ScrollView>
     </View>
   );
@@ -298,43 +299,41 @@ function EASUpdatesPreview({
 
   // some compatible branches, possible some empty branches
   return (
-    <View>
-      <View mx="medium">
-        <View py="small" px="small">
-          <Heading size="small" color="secondary">
-            EAS Updates
-          </Heading>
-        </View>
-        {branches?.slice(0, 2).map((branch, index, arr) => {
-          const isFirst = index === 0;
-          const isLast = index === arr.length - 1 && branchCount <= 1;
-          const isLoading = branch.updates[0]?.id === loadingUpdateId;
-
-          return (
-            <View key={branch.name}>
-              <EASBranchRow
-                branch={branch}
-                isFirst={isFirst}
-                isLast={isLast}
-                navigation={navigation}
-                isLoading={isLoading}
-                onUpdatePress={onUpdatePress}
-              />
-              <Divider />
-            </View>
-          );
-        })}
-
-        {branchCount > 1 && (
-          <ListButton onPress={onSeeAllBranchesPress} isLast>
-            <Row>
-              <Text size="medium">See all branches</Text>
-              <Spacer.Horizontal />
-              <ChevronRightIcon />
-            </Row>
-          </ListButton>
-        )}
+    <View mx="medium">
+      <View py="small" px="small">
+        <Heading size="small" color="secondary">
+          EAS Updates
+        </Heading>
       </View>
+      {branches?.slice(0, 2).map((branch, index, arr) => {
+        const isFirst = index === 0;
+        const isLast = index === arr.length - 1 && branchCount <= 1;
+        const isLoading = branch.updates[0]?.id === loadingUpdateId;
+
+        return (
+          <View key={branch.name}>
+            <EASBranchRow
+              branch={branch}
+              isFirst={isFirst}
+              isLast={isLast}
+              navigation={navigation}
+              isLoading={isLoading}
+              onUpdatePress={onUpdatePress}
+            />
+            <Divider />
+          </View>
+        );
+      })}
+
+      {branchCount > 1 && (
+        <ListButton onPress={onSeeAllBranchesPress} isLast>
+          <Row>
+            <Text size="medium">See all branches</Text>
+            <Spacer.Horizontal />
+            <ChevronRightIcon />
+          </Row>
+        </ListButton>
+      )}
     </View>
   );
 }

package/bundle/screens/ExtensionsStack.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { createStackNavigator } from '@react-navigation/stack';
 
 import { BranchesScreen } from './BranchesScreen';

package/bundle/screens/HomeScreen.tsx

@@ -17,13 +17,14 @@ import {
   BranchIcon,
 } from 'expo-dev-client-components';
 import * as React from 'react';
-import { Animated, ScrollView } from 'react-native';
+import { Animated, ScrollView, useWindowDimensions } from 'react-native';
 
 import { AppHeader } from '../components/AppHeader';
 import { DevServerExplainerModal } from '../components/DevServerExplainerModal';
 import { useLoadingContainerStyle } from '../components/EASUpdatesRows';
 import { LoadAppErrorModal } from '../components/LoadAppErrorModal';
 import { PulseIndicator } from '../components/PulseIndicator';
+import { ScreenContainer } from '../components/ScreenContainer';
 import { Toasts } from '../components/Toasts';
 import { UrlDropdown } from '../components/UrlDropdown';
 import { formatUpdateUrl } from '../functions/formatUpdateUrl';
@@ -114,7 +115,12 @@ export function HomeScreen({
   return (
     <View testID="DevLauncherMainScreen">
       <AppHeader navigation={navigation} />
-      <ScrollView contentContainerStyle={{ paddingBottom: scale['48'] }}>
+      <ScrollView
+        style={{}}
+        contentContainerStyle={{
+          paddingBottom: scale['48'],
+        }}>
+          <ScreenContainer>
         {crashReport && (
           <View px="medium" py="small" mt="small">
             <Button.ScaleOnPressContainer onPress={onCrashReportPress} bg="default" rounded="large">
@@ -197,6 +203,7 @@ export function HomeScreen({
 
           <RecentlyOpenedApps onRecentAppPress={onRecentAppPress} loadingUrl={loadingUrl} />
         </View>
+        </ScreenContainer>
       </ScrollView>
     </View>
   );