expo-dev-launcher 1.2.1 → 1.3.0

package/bundle/screens/SettingsScreen.tsx

@@ -16,6 +16,7 @@ import * as React from 'react';
 import { ScrollView, Switch } from 'react-native';
 import { useQueryClient } from 'react-query';
 import { SafeAreaTop } from '../components/SafeAreaTop';
+import { ScreenContainer } from '../components/ScreenContainer';
 
 import { Toasts } from '../components/Toasts';
 import { copyToClipboardAsync, updatesConfig } from '../native-modules/DevLauncherInternal';
@@ -83,135 +84,137 @@ export function SettingsScreen() {
 
   return (
     <ScrollView testID="DevLauncherSettingsScreen" showsVerticalScrollIndicator={false}>
-      <SafeAreaTop />
-      <Spacer.Vertical size="medium" />
-
-      <View px="medium">
-        <Heading size="large">Settings</Heading>
-      </View>
-
-      <View py="large" px="medium">
-        <View bg="default" rounded="large">
-          <Row px="medium" py="small" align="center">
-            <ShowMenuIcon />
-            <Spacer.Horizontal size="small" />
-            <Text size="large">Show menu at launch</Text>
-            <Spacer.Horizontal />
-            <Switch
-              accessibilityRole="switch"
-              accessibilityLabel="Toggle showing menu at launch"
-              value={showsAtLaunch}
-              onValueChange={() => setShowsAtLaunch(!showsAtLaunch)}
-            />
-          </Row>
-        </View>
-
-        <Spacer.Vertical size="large" />
+      <ScreenContainer>
+        <SafeAreaTop />
+        <Spacer.Vertical size="medium" />
 
-        <View padding="medium">
-          <Heading color="secondary">Menu gestures</Heading>
+        <View px="medium">
+          <Heading size="large">Settings</Heading>
         </View>
 
-        <View>
-          <Button.ScaleOnPressContainer
-            bg="default"
-            roundedTop="large"
-            roundedBottom="none"
-            onPress={() => setMotionGestureEnabled(!motionGestureEnabled)}
-            accessibilityState={{ checked: motionGestureEnabled }}>
-            <Row px="medium" py="small" align="center" bg="default">
-              <ShakeDeviceIcon />
-              <Spacer.Horizontal size="small" />
-              <Text size="large" color="default">
-                Shake device
-              </Text>
-              <Spacer.Horizontal />
-              {motionGestureEnabled && <CheckIcon />}
-            </Row>
-          </Button.ScaleOnPressContainer>
-
-          <Divider />
-
-          <Button.ScaleOnPressContainer
-            bg="default"
-            roundedBottom="large"
-            roundedTop="none"
-            onPress={() => setTouchGestureEnabled(!touchGestureEnabled)}
-            accessibilityState={{ checked: touchGestureEnabled }}>
-            <Row px="medium" py="small" bg="default">
-              <ThreeFingerPressIcon />
+        <View py="large" px="medium">
+          <View bg="default" rounded="large">
+            <Row px="medium" py="small" align="center">
+              <ShowMenuIcon />
               <Spacer.Horizontal size="small" />
-              <Text size="large" color="default">
-                Three-finger long-press
-              </Text>
+              <Text size="large">Show menu at launch</Text>
               <Spacer.Horizontal />
-              {touchGestureEnabled && <CheckIcon />}
+              <Switch
+                accessibilityRole="switch"
+                accessibilityLabel="Toggle showing menu at launch"
+                value={showsAtLaunch}
+                onValueChange={() => setShowsAtLaunch(!showsAtLaunch)}
+              />
             </Row>
-          </Button.ScaleOnPressContainer>
-        </View>
-
-        <View padding="small">
-          <Text color="secondary" size="small" leading="large">
-            Selected gestures will toggle the developer menu while inside a preview. The menu allows
-            you to reload or return to home and exposes developer tools.
-          </Text>
-        </View>
+          </View>
 
-        <Spacer.Vertical size="medium" />
+          <Spacer.Vertical size="large" />
 
-        <View rounded="large" overflow="hidden">
-          <Row px="medium" py="small" align="center" bg="default">
-            <Text>Version</Text>
-            <Spacer.Horizontal />
-            <Text>{buildInfo?.appVersion}</Text>
-          </Row>
+          <View padding="medium">
+            <Heading color="secondary">Menu gestures</Heading>
+          </View>
 
-          {Boolean(buildInfo.runtimeVersion) && (
-            <>
-              <Divider />
+          <View>
+            <Button.ScaleOnPressContainer
+              bg="default"
+              roundedTop="large"
+              roundedBottom="none"
+              onPress={() => setMotionGestureEnabled(!motionGestureEnabled)}
+              accessibilityState={{ checked: motionGestureEnabled }}>
               <Row px="medium" py="small" align="center" bg="default">
-                <Text>Runtime Version</Text>
+                <ShakeDeviceIcon />
+                <Spacer.Horizontal size="small" />
+                <Text size="large" color="default">
+                  Shake device
+                </Text>
                 <Spacer.Horizontal />
-                <Text>{buildInfo.runtimeVersion}</Text>
+                {motionGestureEnabled && <CheckIcon />}
               </Row>
-            </>
-          )}
-
-          {Boolean(buildInfo.sdkVersion) && !buildInfo.runtimeVersion && (
-            <>
-              <Divider />
-              <Row px="medium" py="small" align="center" bg="default">
-                <Text>SDK Version</Text>
+            </Button.ScaleOnPressContainer>
+
+            <Divider />
+
+            <Button.ScaleOnPressContainer
+              bg="default"
+              roundedBottom="large"
+              roundedTop="none"
+              onPress={() => setTouchGestureEnabled(!touchGestureEnabled)}
+              accessibilityState={{ checked: touchGestureEnabled }}>
+              <Row px="medium" py="small" bg="default">
+                <ThreeFingerPressIcon />
+                <Spacer.Horizontal size="small" />
+                <Text size="large" color="default">
+                  Three-finger long-press
+                </Text>
                 <Spacer.Horizontal />
-                <Text>{buildInfo.sdkVersion}</Text>
+                {touchGestureEnabled && <CheckIcon />}
               </Row>
-            </>
-          )}
+            </Button.ScaleOnPressContainer>
+          </View>
+
+          <View padding="small">
+            <Text color="secondary" size="small" leading="large">
+              Selected gestures will toggle the developer menu while inside a preview. The menu
+              allows you to reload or return to home and exposes developer tools.
+            </Text>
+          </View>
 
-          <Divider />
+          <Spacer.Vertical size="medium" />
 
-          <Button.ScaleOnPressContainer
-            onPress={onCopyPress}
-            disabled={hasCopiedContent}
-            bg="default"
-            roundedTop="none"
-            roundedBottom="large">
+          <View rounded="large" overflow="hidden">
             <Row px="medium" py="small" align="center" bg="default">
-              <Text color="link" size="medium">
-                {hasCopiedContent ? 'Copied to clipboard!' : 'Tap to Copy All'}
-              </Text>
+              <Text>Version</Text>
+              <Spacer.Horizontal />
+              <Text>{buildInfo?.appVersion}</Text>
             </Row>
-          </Button.ScaleOnPressContainer>
-          {userData?.isExpoAdmin && (
-            <>
-              <Spacer.Vertical size="medium" />
-              <DebugSettings />
-              <Spacer.Vertical size="medium" />
-              <UpdatesDebugSettings />
-            </>
-          )}
+
+            {Boolean(buildInfo.runtimeVersion) && (
+              <>
+                <Divider />
+                <Row px="medium" py="small" align="center" bg="default">
+                  <Text>Runtime Version</Text>
+                  <Spacer.Horizontal />
+                  <Text>{buildInfo.runtimeVersion}</Text>
+                </Row>
+              </>
+            )}
+
+            {Boolean(buildInfo.sdkVersion) && !buildInfo.runtimeVersion && (
+              <>
+                <Divider />
+                <Row px="medium" py="small" align="center" bg="default">
+                  <Text>SDK Version</Text>
+                  <Spacer.Horizontal />
+                  <Text>{buildInfo.sdkVersion}</Text>
+                </Row>
+              </>
+            )}
+
+            <Divider />
+
+            <Button.ScaleOnPressContainer
+              onPress={onCopyPress}
+              disabled={hasCopiedContent}
+              bg="default"
+              roundedTop="none"
+              roundedBottom="large">
+              <Row px="medium" py="small" align="center" bg="default">
+                <Text color="link" size="medium">
+                  {hasCopiedContent ? 'Copied to clipboard!' : 'Tap to Copy All'}
+                </Text>
+              </Row>
+            </Button.ScaleOnPressContainer>
+            {userData?.isExpoAdmin && (
+              <>
+                <Spacer.Vertical size="medium" />
+                <DebugSettings />
+                <Spacer.Vertical size="medium" />
+                <UpdatesDebugSettings />
+              </>
+            )}
+          </View>
         </View>
-      </View>
+      </ScreenContainer>
     </ScrollView>
   );
 }

package/bundle/screens/UpdatesScreen.tsx

@@ -19,6 +19,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { BasicButton } from '../components/BasicButton';
 import { EASUpdateRow } from '../components/EASUpdatesRows';
 import { FlatList } from '../components/FlatList';
+import { ScreenContainer } from '../components/ScreenContainer';
 import { useOnUpdatePress } from '../hooks/useOnUpdatePress';
 import { useUpdatesConfig } from '../providers/UpdatesConfigProvider';
 import { useChannelsForApp } from '../queries/useChannelsForApp';
@@ -89,29 +90,31 @@ export function UpdatesScreen({ route }: UpdatesScreenProps) {
 
   function EmptyList() {
     return (
-      <View mt="large" mx="medium" bg="default" rounded="large" padding="medium">
-        <View>
-          <Heading>There are no updates available for this branch.</Heading>
-          <Spacer.Vertical size="small" />
-          <Text color="secondary" size="small">
-            Updates allow you to deliver code directly to your users.
-          </Text>
+      <ScreenContainer>
+        <View mt="large" mx="medium" bg="default" rounded="large" padding="medium">
+          <View>
+            <Heading>There are no updates available for this branch.</Heading>
+            <Spacer.Vertical size="small" />
+            <Text color="secondary" size="small">
+              Updates allow you to deliver code directly to your users.
+            </Text>
 
-          <View py="medium" align="centered">
-            <Button.ScaleOnPressContainer
-              bg="tertiary"
-              onPress={() => {
-                Linking.openURL(`https://docs.expo.dev/eas-update/how-eas-update-works/`);
-              }}>
-              <View px="2.5" py="2">
-                <Button.Text weight="medium" color="tertiary">
-                  Publish an update
-                </Button.Text>
-              </View>
-            </Button.ScaleOnPressContainer>
+            <View py="medium" align="centered">
+              <Button.ScaleOnPressContainer
+                bg="tertiary"
+                onPress={() => {
+                  Linking.openURL(`https://docs.expo.dev/eas-update/how-eas-update-works/`);
+                }}>
+                <View px="2.5" py="2">
+                  <Button.Text weight="medium" color="tertiary">
+                    Publish an update
+                  </Button.Text>
+                </View>
+              </Button.ScaleOnPressContainer>
+            </View>
           </View>
         </View>
-      </View>
+      </ScreenContainer>
     );
   }
 
@@ -137,25 +140,27 @@ export function UpdatesScreen({ route }: UpdatesScreenProps) {
   }
 
   return (
-    <View flex="1">
-      <BranchDetailsHeader
-        branchName={branchName}
-        updates={updates}
-        onOpenPress={() => onUpdatePress(updates[0])}
-      />
-      <FlatList
-        isLoading={isLoading}
-        isRefreshing={isRefreshing}
-        onRefresh={() => refetch()}
-        ListHeaderComponent={Header}
-        data={updates}
-        extraData={{ length: updates.length, loadingUpdateId }}
-        renderItem={renderUpdate}
-        keyExtractor={(item) => item.id}
-        ListFooterComponent={Footer}
-        ListEmptyComponent={EmptyList}
-      />
-    </View>
+    <ScreenContainer>
+      <View flex="1">
+        <BranchDetailsHeader
+          branchName={branchName}
+          updates={updates}
+          onOpenPress={() => onUpdatePress(updates[0])}
+        />
+        <FlatList
+          isLoading={isLoading}
+          isRefreshing={isRefreshing}
+          onRefresh={() => refetch()}
+          ListHeaderComponent={Header}
+          data={updates}
+          extraData={{ length: updates.length, loadingUpdateId }}
+          renderItem={renderUpdate}
+          keyExtractor={(item) => item.id}
+          ListFooterComponent={Footer}
+          ListEmptyComponent={EmptyList}
+        />
+      </View>
+    </ScreenContainer>
   );
 }
 

package/ios/EXDevLauncherController.m

@@ -404,6 +404,9 @@
     projectUrl = expoUrl;
   }
   
+  // Disable onboarding popup if "&disableOnboarding=1" is a param
+  [EXDevLauncherURLHelper disableOnboardingPopupIfNeeded:expoUrl];
+
   NSString *installationID = [_installationIDHelper getOrCreateInstallationID];
 
   NSDictionary *updatesConfiguration = [EXDevLauncherUpdatesHelper createUpdatesConfigurationWithURL:expoUrl

package/ios/EXDevLauncherURLHelper.swift

@@ -1,21 +1,22 @@
-  // Copyright 2015-present 650 Industries. All rights reserved.
+// Copyright 2015-present 650 Industries. All rights reserved.
 
 import Foundation
+import EXDevMenu
 
 @objc
 public class EXDevLauncherUrl: NSObject {
   @objc
   public var url: URL
-  
+
   @objc
   public var queryParams: [String: String]
-  
+
   @objc
   public init(_ url: URL) {
     self.queryParams = EXDevLauncherURLHelper.getQueryParamsForUrl(url)
     self.url = url
-    
-    if (EXDevLauncherURLHelper.isDevLauncherURL(url)) {
+
+    if EXDevLauncherURLHelper.isDevLauncherURL(url) {
       if let urlParam = self.queryParams["url"] {
         if let urlFromParam = URL.init(string: urlParam) {
           self.url = EXDevLauncherURLHelper.replaceEXPScheme(urlFromParam, to: "http")
@@ -24,7 +25,7 @@ public class EXDevLauncherUrl: NSObject {
     } else {
       self.url = EXDevLauncherURLHelper.replaceEXPScheme(self.url, to: "http")
     }
-    
+
     super.init()
   }
 }
@@ -35,41 +36,51 @@ public class EXDevLauncherURLHelper: NSObject {
   public static func isDevLauncherURL(_ url: URL?) -> Bool {
     return url?.host == "expo-development-client"
   }
-  
+
   @objc
   public static func hasUrlQueryParam(_ url: URL) -> Bool {
     var hasUrlQueryParam = false
-    
+
     let components = URLComponents.init(url: url, resolvingAgainstBaseURL: false)
-    
-    for queryItem in components?.queryItems ?? [] {
-      if queryItem.name == "url" && queryItem.value != nil {
-        hasUrlQueryParam = true
-        break
-      }
+
+    if ((components?.queryItems?.contains(where: {
+      $0.name == "url" && $0.value != nil
+    })) ?? false) {
+      hasUrlQueryParam = true
     }
-    
+
     return hasUrlQueryParam
   }
 
+  @objc
+  public static func disableOnboardingPopupIfNeeded(_ url: URL) {
+    let components = URLComponents.init(url: url, resolvingAgainstBaseURL: false)
+
+    if ((components?.queryItems?.contains(where: {
+      $0.name == "disableOnboarding" && ($0.value ?? "") == "1"
+    })) ?? false) {
+      DevMenuPreferences.isOnboardingFinished = true
+    }
+  }
+
   @objc
   public static func replaceEXPScheme(_ url: URL, to scheme: String) -> URL {
     var components = URLComponents.init(url: url, resolvingAgainstBaseURL: false)!
-    if (components.scheme == "exp") {
+    if components.scheme == "exp" {
       components.scheme = scheme
     }
     return components.url!
   }
-  
+
   @objc
   public static func getQueryParamsForUrl(_ url: URL) -> [String: String] {
     let components = URLComponents.init(url: url, resolvingAgainstBaseURL: false)
     var dict: [String: String] = [:]
-    
+
     for parameter in components?.queryItems ?? [] {
       dict[parameter.name] = parameter.value?.removingPercentEncoding ?? ""
     }
-  
+
     return dict
   }
 }

package/ios/Errors/EXDevLauncherUncaughtExceptionHandler.swift

@@ -40,7 +40,7 @@ public class EXDevLauncherUncaughtExceptionHandler: NSObject {
   static func tryToSendExceptionToBundler(_ exception: NSException) {
     let controller = EXDevLauncherController.sharedInstance()
     if (controller.isAppRunning()) {
-      guard let url = getLogsUrl(controller) else {
+      guard let url = getWebSocketUrl(controller) else {
         return
       }
       
@@ -50,18 +50,22 @@ public class EXDevLauncherUncaughtExceptionHandler: NSObject {
       logsManager.sendSync()
     }
   }
-  
-  static func getLogsUrl(_ controller: EXDevLauncherController) -> URL? {
-    let logsUrlFromManifest = controller.appManifest()?.logUrl()
-    if (logsUrlFromManifest != nil) {
-      return URL.init(string: logsUrlFromManifest!)
-    }
-    
+
+  static func getWebSocketUrl(_ controller: EXDevLauncherController) -> URL? {
+    // URL structure replicates
+    // https://github.com/facebook/react-native/blob/0.69-stable/Libraries/Utilities/HMRClient.js#L164
+    // but URLSessionWebSocketTask will crash if the scheme is not `ws` or `wss`
     guard let appUrl = controller.appBridge?.bundleURL else {
       return nil
     }
-    
-    return URL.init(string: "logs", relativeTo: appUrl)
+    guard let socketUrl = URL.init(string: "hot", relativeTo: appUrl) else {
+      return nil
+    }
+    guard var components = URLComponents(url: socketUrl, resolvingAgainstBaseURL: true) else {
+      return nil
+    }
+    components.scheme = "ws"
+    return components.url
   }
   
   static func tryToSaveException(_ exception: NSException) {

package/ios/Logs/EXDevLauncherRemoteLogsManager.swift

@@ -1,52 +1,57 @@
 import Foundation
 
 class EXDevLauncherRemoteLogsManager {
-  private var batch: [[String: Any]] = []
+  private var batch: [String] = []
   private let url: URL
-  
+
   init(withUrl url: URL) {
     self.url = url
   }
-  
+
   func deferError(exception: NSException) {
-    batch.append([
-      "level": "error",
-      "body": [
-        "message": exception.description,
-        "stack": exception.callStackSymbols.joined(separator: "\n")
-      ],
-      "includesStack": true
-    ])
+    batch.append("\(exception.name.rawValue): \(exception.reason ?? exception.description)")
+    batch.append("  \(exception.callStackSymbols.joined(separator: "\n  "))")
   }
-  
+
   func deferError(message: String) {
-    batch.append([
-      "level": "error",
-      "body": message,
-      "includesStack": false
-    ])
+    batch.append(message)
   }
-  
+
   func sendSync() {
-    guard let data = try? JSONSerialization.data(withJSONObject: batch, options: []) else {
+    // message format comes from
+    // https://github.com/facebook/react-native/blob/0.69-stable/Libraries/Utilities/HMRClient.js#L119-L134
+    let messageJson = [
+      "type": "log",
+      "level": "error",
+      "mode": "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.
+      "data": [batch.joined(separator: "\n")]
+    ] as [String: Any]
+    guard let data = try? JSONSerialization.data(withJSONObject: messageJson, options: []) else {
       batch.removeAll()
       return
     }
-    
+
     batch.removeAll()
-    
-    var request = URLRequest.init(url: self.url)
-    request.httpMethod = "POST"
-    request.httpBody = data
-    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
-    request.setValue(UIDevice.current.identifierForVendor?.uuidString ?? UIDevice.current.name , forHTTPHeaderField: "Device-Id")
-    request.setValue(UIDevice.current.name, forHTTPHeaderField: "Device-Name")
-    
-    let group = DispatchGroup()
-    group.enter()
-    URLSession.shared.dataTask(with: request) { data, response, error in
-      group.leave()
-    }.resume()
-    group.wait(timeout: DispatchTime.now() + .seconds(2))
+
+    if #available(iOS 13.0, *) {
+      let group = DispatchGroup()
+      group.enter()
+
+      let task = URLSession.shared.webSocketTask(with: self.url)
+      task.resume()
+
+      guard let dataString = String(data: data, encoding: .utf8) else {
+        group.leave()
+        return
+      }
+      let message = URLSessionWebSocketTask.Message.string(dataString)
+      task.send(message) { _ in
+        group.leave()
+      }
+      _ = group.wait(timeout: DispatchTime.now() + .seconds(2))
+    }
   }
 }