feat: added last booted simulator pick & iPhone 14 as fallback + doc …

…typos (#1701)

* docs: fix missing codeblock langs & typos

* feat: add iPhone 14 as fallback simulator

* feat: add last booted simulator pick, if no other matches the finder

docs/autolinking.md

@@ -152,7 +152,7 @@ correct location and update them accordingly:
 
 Dependencies are only linked if they are listed in the package.json of the mobile workspace, where "react-native" dependency is defined. For example, with this file structure:
 
-```
+```sh
 /root
   /packages
     /mobile

docs/commands.md

@@ -63,7 +63,7 @@ Alternatively if you want to run <code>react-native bundle</code> manually and t
 For react-native versions 0.57 and above the bundle output path should be:
 <code>android/app/build/generated/assets/react/debug/index.android.js</code>
 
-To find out the correct path for previous react-native versions, take a look at the <code>react.gradle</code> file here: https://github.com/facebook/react-native/blob/0.57-stable/react.gradle or inside your <code>node_modules/react-native</code> directory.
+To find out the correct path for previous react-native versions, take a look at the <code>react.gradle</code> file here: <https://github.com/facebook/react-native/blob/0.57-stable/react.gradle> or inside your <code>node_modules/react-native</code> directory.
 
 The expected path for the js bundle can be found on the line that starts with <code>jsBundleDir = </code>.
 
@@ -73,7 +73,7 @@ The expected path for the js bundle can be found on the line that starts with <c
 
 > default: utf8
 
-Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
+Encoding the bundle should be written in (<https://nodejs.org/api/buffer.html#buffer_buffer>).
 
 #### `--max-workers <number>`
 
@@ -85,7 +85,7 @@ File name where to store the sourcemap file for resulting bundle, ex. `/tmp/grou
 
 #### `--sourcemap-sources-root <string>`
 
-Path to make sourcemaps sources entries relative to, ex. `/root/dir`.
+Path to make sourcemap sources entries relative to, ex. `/root/dir`.
 
 #### `--sourcemap-use-absolute-path`
 
@@ -404,7 +404,7 @@ Notes: If selected simulator does not exist, cli will try to run fallback simula
 
 Notes: `simulator_name` must be a valid iOS simulator name. If in doubt, open your AwesomeApp/ios/AwesomeApp.xcodeproj folder on XCode and unroll the dropdown menu containing the simulator list. The dropdown menu is situated on the right hand side of the play button (top left corner).
 
-Example: this will launch your projet directly onto the iPhone XS Max simulator:
+Example: this will launch your project directly onto the iPhone XS Max simulator:
 
 ```sh
 react-native run-ios --simulator "iPhone XS Max"
@@ -444,7 +444,7 @@ Default: `process.env.RCT_METRO_PORT || 8081`
 
 Usage:
 
-```
+```sh
 react-native start [option]
 ```
 
@@ -555,7 +555,7 @@ The local path to your source map file if you generated it manually, ex. `/tmp/s
 
 Generate the JS bundle and source map in `os.tmpdir()`
 
-#### `--port <number>`,
+#### `--port <number>`
 
 The running metro server port number
 

docs/healthChecks.md

@@ -4,7 +4,6 @@ Plugins can be used to extend the health checks that `react-native doctor` runs.
 
 See [`Plugins`](./plugins.md) for information about how plugins work.  
 
-
 ## How does it work?
 
 To provide additional health checks, a package needs to have a `react-native.config.js` at the root folder in order to be discovered by the CLI as a plugin.
@@ -34,7 +33,6 @@ At the startup, React Native CLI reads configuration from all dependencies liste
 
 At the end, an array of health check categories is concatenated to be checked when `react-native doctor` is run.
 
-
 ## HealthCheckCategory interface
 
 ```ts
@@ -50,8 +48,7 @@ Name of the category for this health check. This will be used to group health ch
 
 ##### `healthChecks`
 
-Array of health checks to perorm in this category
-
+Array of health checks to perform in this category
 
 ## HealthCheckInterface interface
 
@@ -92,7 +89,6 @@ Is this health check required or optional?
 
 Longer description of this health check
 
-
 ##### `getDiagnostics`
 
 Functions which performs the actual check.  Simple checks can just return `needsToBeFixed`.  Checks which are looking at versions of an installed component (such as the version of node), can also return `version`, `versions` and `versionRange` to provide better information to be displayed in `react-native doctor` when running the check
@@ -113,7 +109,6 @@ This function will be used to try to fix the issue when `react-native doctor` is
 
 This function will be used to try to fix the issue when `react-native doctor` is run and no more platform specific automatic fix function was provided.
 
-
 ## RunAutomaticFix interface
 
 ```ts
@@ -146,7 +141,6 @@ If an automated fix cannot be performed, this function should be used to provide
 
 Provides information about the current system
 
-
 ### Examples of RunAutomaticFix implementations
 
 A health check that requires the user to manually go download/install something.  This check will immediately display a message to notify the user how to fix the issue.
@@ -165,7 +159,6 @@ async function needToInstallFoo({loader, logManualInstallation}) {
 A health check that runs some commands locally which may fix the issue.  This check will display a spinner while the exec commands are running.  Then once the commands are complete, the spinner will change to a checkmark.
 
 ```ts
-
 import { exec } from 'promisify-child-process';
 async function fixFoo({loader}) {
   await exec(`foo --install`);

docs/init.md

@@ -12,7 +12,7 @@ npx react-native init ProjectName
 
 > Note: If you have both `yarn` and `npm` installed on your machine, React Native CLI will always try to use `yarn`, so even if you use `npx` utility, only `react-native` executable will be installed using `npm` and the rest of the work will be delegated to `yarn`. You can force usage of `npm` adding `--npm` flag to the command.
 
-> Note: for Yarn users, `yarn dlx` command similar to `npx` will be featured in Yarn 2.0: https://github.com/yarnpkg/berry/pull/40 so we’ll be able to use it in a similar fashion.
+> Note: for Yarn users, `yarn dlx` command similar to `npx` will be featured in Yarn 2.0: <https://github.com/yarnpkg/berry/pull/40> so we’ll be able to use it in a similar fashion.
 
 #### Installing `react-native` and invoking `init` command:
 
@@ -32,19 +32,19 @@ npx react-native@${VERSION} init ProjectName
 
 #### Initializing project with custom template
 
-It is possible to initialise a new application with a custom template with
+It is possible to initialize a new application with a custom template with
 a `--template` option.
 
-It should point to a valid package that can be installed with `yarn` or `npm` (if you're using `--npm` option). 
+It should point to a valid package that can be installed with `yarn` or `npm` (if you're using `--npm` option).
 
 The most common options are:
+
 - Full package name, eg. `react-native-template-typescript`.
 - Absolute path to directory containing template, eg. `file:///Users/username/project/some-template`.
 - Absolute path to a tarball created using `npm pack`.
 
 For all available options, please check [Yarn documentation](https://classic.yarnpkg.com/en/docs/cli/add/#toc-adding-dependencies) and [Npm](https://docs.npmjs.com/cli/v6/commands/npm-install#synopsis).
 
-
 ```sh
 # This will initialize new project using template from `react-native-template-typescript` package
 npx react-native init ProjectName --template ${TEMPLATE_NAME}
@@ -70,7 +70,7 @@ react-native init ProjectName
 
 > Note: It is not recommended, but you can also use legacy `react-native-cli` package to initialize projects using latest `react-native` versions.
 
-# Creating custom template
+## Creating custom template
 
 Every custom template needs to have configuration file called `template.config.js` in the root of the project:
 
@@ -92,7 +92,8 @@ module.exports = {
 ```
 
 ## Post init script loading
-The responsibility of showing the user progress of the "Executing post init script" goes to the implementor. In the cli, the `ora` package is used to display progress. 
+
+The responsibility of showing the user progress of the "Executing post init script" goes to the implementor. In the cli, the `ora` package is used to display progress.
 For a simple usage in a custom template, `ora` can be used like this in a postInitScript :
 
 ```javascript

packages/cli-platform-ios/src/commands/runIOS/__tests__/findMatchingSimulator.test.ts

@@ -976,4 +976,48 @@ describe('findMatchingSimulator', () => {
       version: 'iOS 12.1',
     });
   });
+
+  it('should return last booted simulator in list if none is defined (multi ios versions)', () => {
+    expect(
+      findMatchingSimulator(
+        {
+          devices: {
+            'com.apple.CoreSimulator.SimRuntime.iOS-16-0': [
+              {
+                udid: 'E1C0E452-2671-4EB5-B875-58E3DDC6EE81',
+                isAvailable: false,
+                state: 'Shutdown',
+                name: 'iPhone SE (3rd generation)',
+              },
+              {
+                lastBootedAt: '2022-09-21T11:38:28Z',
+                udid: '3AA90A75-D9C3-41A6-8DE1-43BE74A0C32B',
+                isAvailable: true,
+                state: 'Shutdown',
+                name: 'iPhone 14',
+              },
+              {
+                udid: '6F2FA108-AC7D-4D3C-BD13-56C5E7FCEDFE',
+                isAvailable: true,
+                state: 'Shutdown',
+                name: 'iPhone 14 Plus',
+              },
+              {
+                udid: 'D87B6D9E-F5B0-486F-BBE3-6EEC5A6D0C22',
+                isAvailable: false,
+                state: 'Shutdown',
+                name: 'iPhone 14 Pro',
+              },
+            ],
+          },
+        },
+        null,
+      ),
+    ).toEqual({
+      udid: '3AA90A75-D9C3-41A6-8DE1-43BE74A0C32B',
+      name: 'iPhone 14',
+      booted: false,
+      version: 'iOS 16.0',
+    });
+  });
 });

packages/cli-platform-ios/src/commands/runIOS/findMatchingSimulator.ts

@@ -13,12 +13,19 @@ import {Device} from '../../types';
  * name can optionally include the iOS version in between parenthesis after the device name. Ex: "iPhone 6 (9.2)" in
  * which case it'll attempt to find a simulator with the exact version specified.
  *
- * If the simulatorString argument is null, we'll go into default mode and return the currently booted simulator, or if
- * none is booted, it will be the first in the list.
+ * If the simulatorString argument is null, we'll go into default mode and return the currently booted simulator,
+ * the last booted simulator or
+ * if none is booted, it will be the first in the list.
  *
  * @param simulators a parsed list from `xcrun simctl list --json devices` command
- * @param simulatorString the string with the name of desired simulator. If null, it will use the currently
- *        booted simulator, or if none are booted, the first in the list.
+ * @param findOptions null or an object containing:
+ * ```
+ * {
+ *    simulator: name of desired simulator
+ *    udid: udid of desired simulator
+ * }
+ * ```
+ * If null, it will use the currently booted simulator, or if none are booted, the first in the list.
  */
 function findMatchingSimulator(
   simulators: {devices: {[index: string]: Array<Device>}},
@@ -75,6 +82,7 @@ function findMatchingSimulator(
         continue;
       }
       const booted = simulator.state === 'Booted';
+      const lastBootedAt = simulator.lastBootedAt;
       const simulatorDescriptor = {
         udid: simulator.udid,
         name: simulator.name,
@@ -92,17 +100,19 @@ function findMatchingSimulator(
         if (simulator.name === simulatorName && !match) {
           match = simulatorDescriptor;
         }
+        // If no match found, use first available simulator that was booted before
+        if (!!lastBootedAt && !match) {
+          match = simulatorDescriptor;
+        }
         // Keeps track of the first available simulator for use if we can't find one above.
         if (simulatorName === null && !match) {
           match = simulatorDescriptor;
         }
       }
     }
   }
-  if (match) {
-    return match;
-  }
-  return null;
+
+  return match ?? null;
 }
 
 export default findMatchingSimulator;

packages/cli-platform-ios/src/commands/runIOS/index.ts

@@ -141,11 +141,17 @@ async function runOnSimulator(
 
   /**
    * If provided simulator does not exist, try simulators in following order
+   * - iPhone 14
    * - iPhone 13
    * - iPhone 12
    * - iPhone 11
    */
-  const fallbackSimulators = ['iPhone 13', 'iPhone 12', 'iPhone 11'];
+  const fallbackSimulators = [
+    'iPhone 14',
+    'iPhone 13',
+    'iPhone 12',
+    'iPhone 11',
+  ];
   const selectedSimulator = fallbackSimulators.reduce((simulator, fallback) => {
     return (
       simulator || findMatchingSimulator(simulators, {simulator: fallback})

packages/cli-platform-ios/src/types.ts

@@ -8,4 +8,5 @@ export interface Device {
   availabilityError?: string;
   type?: 'simulator' | 'device' | 'catalyst';
   booted?: boolean;
+  lastBootedAt?: string;
 }