feat(cli): expo-router option (#2727 by @frankcalise)

* feat(cli): experimental expo-router flag

* chore: todo notes for expo router screen gen

* fix(cli): always do expo install --fix check

* fix(cli): prompt about expo-router, fix exp flags output in buildCliCommand

* fix(expo-router): mst directives for template file

* fix(cli): updates for mst markup

* fix(cli): remove-mst src dir param

* fix(cli): update generators for expo-router and obey --mst

* fix(cli): clean up cmd with helpers

* docs: update cli docs for expo router flag

* fix(cli): remove unnecessary file patch for router conversion

* test(cli): add expo router tests

* fix(cli): router prompt grammar, tone down experimental barking

* fix(cli): reworks --mst to --state=mst (#2731 by @frankcalise)

* fix(cli): reworks --mst to --state=mst

* refactor(cli): tidy up MST removal

Author: frankcalise

boilerplate/.gitignore

@@ -71,6 +71,7 @@ buck-out/
 bin/Exponent.app
 /android
 /ios
+expo-env.d.ts
 
 ## Secrets
 npm-debug.*

boilerplate/app/components/ListItem.tsx

@@ -104,7 +104,10 @@ interface ListItemActionProps {
  * @param {ListItemProps} props - The props for the `ListItem` component.
  * @returns {JSX.Element} The rendered `ListItem` component.
  */
-export function ListItem(props: ListItemProps) {
+export const ListItem = React.forwardRef<View, ListItemProps>(function ListItem(
+  props: ListItemProps,
+  ref,
+) {
   const {
     bottomSeparator,
     children,
@@ -138,7 +141,7 @@ export function ListItem(props: ListItemProps) {
   const $touchableStyles = [$styles.row, $touchableStyle, { minHeight: height }, style]
 
   return (
-    <View style={themed($containerStyles)}>
+    <View ref={ref} style={themed($containerStyles)}>
       <TouchableOpacity {...TouchableOpacityProps} style={$touchableStyles}>
         <ListItemAction
           side="left"
@@ -162,7 +165,7 @@ export function ListItem(props: ListItemProps) {
       </TouchableOpacity>
     </View>
   )
-}
+})
 
 /**
  * @param {ListItemActionProps} props - The props for the `ListItemAction` component.

boilerplate/src/app/_layout.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { ViewStyle  } from "react-native"
+import { Slot, SplashScreen } from "expo-router"
+import { GestureHandlerRootView } from "react-native-gesture-handler"
+// @mst replace-next-line
+import { useInitialRootStore } from "src/models"
+import { useFonts } from "@expo-google-fonts/space-grotesk"
+import { customFontsToLoad } from "src/theme"
+
+SplashScreen.preventAutoHideAsync()
+
+if (__DEV__) {
+  // Load Reactotron configuration in development. We don't want to
+  // include this in our production bundle, so we are using `if (__DEV__)`
+  // to only execute this in development.
+  require("src/devtools/ReactotronConfig.ts")
+}
+
+export { ErrorBoundary } from "src/components/ErrorBoundary/ErrorBoundary"
+
+export default function Root() {
+  // @mst remove-block-start
+  // Wait for stores to load and render our layout inside of it so we have access
+  // to auth info etc
+  const { rehydrated } = useInitialRootStore()
+  // @mst remove-block-end
+
+  const [fontsLoaded, fontError] = useFonts(customFontsToLoad)
+
+  const loaded = fontsLoaded && rehydrated
+
+  React.useEffect(() => {
+    if (fontError) throw fontError
+  }, [fontError])
+
+  React.useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync()
+    }
+  }, [loaded])
+
+  if (!loaded) {
+    return null
+  }
+
+  return <GestureHandlerRootView style={$root}><Slot /></GestureHandlerRootView>
+}
+
+const $root: ViewStyle = { flex: 1 }

boilerplate/src/app/index.tsx

@@ -0,0 +1,79 @@
+// @mst replace-next-line
+import { observer } from "mobx-react-lite"
+import React from "react"
+import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
+import { Text } from "src/components"
+import { isRTL } from "../i18n"
+import { colors, spacing } from "../theme"
+import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
+
+const welcomeLogo = require("../../assets/images/logo.png")
+const welcomeFace = require("../../assets/images/welcome-face.png")
+
+// @mst replace-next-line export default function WelcomeScreen() {
+export default observer(function WelcomeScreen() {
+  const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+
+  return (
+    <View style={$container}>
+      <View style={$topContainer}>
+        <Image style={$welcomeLogo} source={welcomeLogo} resizeMode="contain" />
+        <Text
+          testID="welcome-heading"
+          style={$welcomeHeading}
+          tx="welcomeScreen.readyForLaunch"
+          preset="heading"
+        />
+        <Text tx="welcomeScreen.exciting" preset="subheading" />
+        <Image style={$welcomeFace} source={welcomeFace} resizeMode="contain" />
+      </View>
+
+      <View style={[$bottomContainer, $bottomContainerInsets]}>
+        <Text tx="welcomeScreen.postscript" size="md" />
+      </View>
+    </View>
+  )
+// @mst replace-next-line }
+})
+
+const $container: ViewStyle = {
+  flex: 1,
+  backgroundColor: colors.background,
+}
+
+const $topContainer: ViewStyle = {
+  flexShrink: 1,
+  flexGrow: 1,
+  flexBasis: "57%",
+  justifyContent: "center",
+  paddingHorizontal: spacing.lg,
+}
+
+const $bottomContainer: ViewStyle = {
+  flexShrink: 1,
+  flexGrow: 0,
+  flexBasis: "43%",
+  backgroundColor: colors.palette.neutral100,
+  borderTopLeftRadius: 16,
+  borderTopRightRadius: 16,
+  paddingHorizontal: spacing.lg,
+  justifyContent: "space-around",
+}
+const $welcomeLogo: ImageStyle = {
+  height: 88,
+  width: "100%",
+  marginBottom: spacing.xxl,
+}
+
+const $welcomeFace: ImageStyle = {
+  height: 169,
+  width: 269,
+  position: "absolute",
+  bottom: -47,
+  right: -80,
+  transform: [{ scaleX: isRTL ? -1 : 1 }],
+}
+
+const $welcomeHeading: TextStyle = {
+  marginBottom: spacing.md,
+}

boilerplate/tsconfig.json

@@ -32,6 +32,6 @@
       "module": "commonjs"
     }
   },
-  "include": ["index.js", "App.tsx", "app", "types", "plugins", "app.config.ts"],
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"],
   "exclude": ["node_modules", "test/**/*"]
 }

docs/cli/Ignite-CLI.md

@@ -98,12 +98,13 @@ Starts the interactive prompt for generating a new Ignite project. Any options n
 - `--overwrite` overwrite the target directory if it exists
 - `--targetPath` string, specify a target directory where the project should be created
 - `--removeDemo` will remove the boilerplate demo code after project creation
-- `--mst` flag to specify whether to include MobX-State-Tree in project (can only be set to `false` if `--removeDemo=true`)
+- `--state` string, one of `mst` or `none` to include MobX-State-Tree in project (can only be set to `none` if `--removeDemo=true`)
 - `--useCache` flag specifying to use dependency cache for quicker installs
 - `--no-timeout` flag to disable the timeout protection (useful for slow internet connections)
 - `--yes` accept all prompt defaults
-- `--workflow` string, one of `expo`, `cng` or `manual` for project initialization
+- `--workflow` string, one of `cng` or `manual` for project initialization
 - `--experimental` comma separated string, indicates experimental features (which may or may not be stable) to turn on during installation. **A CNG workflow is require for these flags** `--workflow=cng`
+  - `expo-router` converts the project to [Expo Router](https://docs.expo.dev/router/introduction/) from React Navigation
   - `new-arch` enables [The New Architecture](https://reactnative.dev/docs/new-architecture-intro)
   - `expo-canary` uses Expo's highly experimental canary release instead of the la test stable SDK
   - `expo-beta` uses Expo's latest beta SDK available instead of the latest stable SDK

docs/concept/MobX-State-Tree.md

@@ -41,10 +41,10 @@ We also recognize no state management solution is perfect. MST has some known do
 
 ### Remove MST Option
 
-We understand that state management is a highly opinionated topic with various options available. To accommodate this, we've added an option in Ignite CLI to remove MobX-State-Tree if you choose so! When Igniting a new project, provide `--mst=false` to remove MobX-State-Tree code from the boilerplate. This option only works when also removing demo code.
+We understand that state management is a highly opinionated topic with various options available. To accommodate this, we've added an option in Ignite CLI to remove MobX-State-Tree if you choose so! When Igniting a new project, provide `--state=none` to remove MobX-State-Tree code from the boilerplate. This option only works when also removing demo code.
 
 ```
-npx ignite-cli@latest new PizzaApp --removeDemo=true --mst=false
+npx ignite-cli@latest new PizzaApp --removeDemo=true --state=none
 ```
 
 ## Learning MobX-State-Tree