Fixes for expo-router app generation and issues with master merge up (#2772)

* Initial change of imports to use a unified alias

* More import updates to fix router app generation

* Lint fix

* Update test

* Fix demo removal for i18n

These lines weren't getting removed in demo and failed tests. Did we not
have a test for removing demo and compiling?

* Need to also transform test setup file

* Lint fix

* Print command output when it fails for easier debugging

* Need to remove App.tsx when using expo-router

* Fix patch removal

I'm confused about this one, it appeared to work and printed
`patches/patch.patch` originally, but now the path isn't including the
directory. So added a new CWD to make sure the file gets deleted,
otherwise bun fails.

* This only applied for the splashscreen changes

...from the test it was copied from

* Add error output to ignite-new test as well

* Remove test output change for now

Potential issue with buffer size. Update to use spawn later so we can
stream output.

* Make sure test doesn't time out

* Pin eslint react plugin version

They added a bug, there's a fix but it's unreleased: jsx-eslint/eslint-plugin-react#3821

Author: lindboe

.circleci/config.yml

@@ -63,7 +63,7 @@ jobs:
       - run:
           name: Run jest tests
           command: yarn test
-          no_output_timeout: 5m
+          no_output_timeout: 10m
       - save_cache:
           name: Save ignite dependency cache
           paths:

boilerplate/App.tsx

@@ -1,6 +1,6 @@
 import "@expo/metro-runtime"
 import * as SplashScreen from "expo-splash-screen"
-import App from "./app/app"
+import App from "@/app"
 
 SplashScreen.preventAutoHideAsync()
 

boilerplate/app/components/Button.tsx

@@ -7,10 +7,10 @@ import {
   TextStyle,
   ViewStyle,
 } from "react-native"
-import type { ThemedStyle, ThemedStyleArray } from "app/theme"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme"
 import { $styles } from "../theme"
 import { Text, TextProps } from "./Text"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 type Presets = "default" | "filled" | "reversed"
 

boilerplate/app/components/Card.tsx

@@ -8,10 +8,10 @@ import {
   ViewProps,
   ViewStyle,
 } from "react-native"
-import type { ThemedStyle, ThemedStyleArray } from "app/theme"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme"
 import { $styles } from "../theme"
 import { Text, TextProps } from "./Text"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 type Presets = "default" | "reversed"
 

boilerplate/app/components/EmptyState.tsx

@@ -2,8 +2,8 @@ import { Image, ImageProps, ImageStyle, StyleProp, TextStyle, View, ViewStyle }
 import { translate } from "../i18n"
 import { Button, ButtonProps } from "./Button"
 import { Text, TextProps } from "./Text"
-import { useAppTheme } from "app/utils/useAppTheme"
-import type { ThemedStyle } from "app/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
 
 const sadFace = require("../../assets/images/sad-face.png")
 

boilerplate/app/components/Header.tsx

@@ -12,8 +12,8 @@ import { $styles } from "../theme"
 import { ExtendedEdge, useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
 import { Icon, IconTypes } from "./Icon"
 import { Text, TextProps } from "./Text"
-import { useAppTheme } from "app/utils/useAppTheme"
-import type { ThemedStyle } from "app/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
 
 export interface HeaderProps {
   /**

boilerplate/app/components/ListItem.tsx

@@ -10,8 +10,8 @@ import {
 import { $styles } from "../theme"
 import { Icon, IconTypes } from "./Icon"
 import { Text, TextProps } from "./Text"
-import type { ThemedStyle } from "app/theme"
-import { useAppTheme } from "app/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export interface ListItemProps extends TouchableOpacityProps {
   /**

boilerplate/app/components/ListView.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef, PropsWithoutRef, ReactElement, RefObject } from "react"
 import { FlatList } from "react-native"
-import { isRTL } from "app/i18n"
+import { isRTL } from "@/i18n"
 import { FlashList, FlashListProps } from "@shopify/flash-list"
 
 export type ListViewRef<T> = FlashList<T> | FlatList<T>

boilerplate/app/components/Screen.tsx

@@ -15,7 +15,7 @@ import {
 import { $styles } from "../theme"
 import { ExtendedEdge, useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export const DEFAULT_BOTTOM_OFFSET = 50
 

boilerplate/app/components/Text.tsx

@@ -1,9 +1,9 @@
 import i18n from "i18n-js"
 import { StyleProp, Text as RNText, TextProps as RNTextProps, TextStyle } from "react-native"
 import { isRTL, translate, TxKeyPath } from "../i18n"
-import type { ThemedStyle, ThemedStyleArray } from "app/theme"
-import { useAppTheme } from "app/utils/useAppTheme"
-import { typography } from "app/theme/typography"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import { typography } from "@/theme/typography"
 import { ReactNode } from "react"
 
 type Sizes = keyof typeof $sizeStyles

boilerplate/app/components/TextField.tsx

@@ -10,10 +10,10 @@ import {
   ViewStyle,
 } from "react-native"
 import { isRTL, translate } from "../i18n"
-import type { ThemedStyle, ThemedStyleArray } from "app/theme"
+import type { ThemedStyle, ThemedStyleArray } from "@/theme"
 import { $styles } from "../theme"
 import { Text, TextProps } from "./Text"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export interface TextFieldAccessoryProps {
   style: StyleProp<ViewStyle | TextStyle | ImageStyle>

boilerplate/app/components/Toggle/Checkbox.tsx

@@ -3,7 +3,7 @@ import { Image, ImageStyle, Animated, StyleProp, View, ViewStyle } from "react-n
 import { $styles } from "../../theme"
 import { iconRegistry, IconTypes } from "../Icon"
 import { $inputOuterBase, BaseToggleInputProps, ToggleProps, Toggle } from "./Toggle"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export interface CheckboxToggleProps extends Omit<ToggleProps<CheckboxInputProps>, "ToggleInput"> {
   /**

boilerplate/app/components/Toggle/Radio.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react"
 import { StyleProp, View, ViewStyle, Animated } from "react-native"
 import { $styles } from "../../theme"
 import { $inputOuterBase, BaseToggleInputProps, ToggleProps, Toggle } from "./Toggle"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export interface RadioToggleProps extends Omit<ToggleProps<RadioInputProps>, "ToggleInput"> {
   /**

boilerplate/app/components/Toggle/Switch.tsx

@@ -10,12 +10,12 @@ import {
   ViewStyle,
 } from "react-native"
 
-import { $styles } from "../../theme"
-import { iconRegistry } from "../Icon"
-import { isRTL } from "app/i18n"
+import { $styles } from "@/theme"
+import { iconRegistry } from "@/components/Icon"
+import { isRTL } from "@/i18n"
 import { $inputOuterBase, BaseToggleInputProps, Toggle, ToggleProps } from "./Toggle"
-import { useAppTheme } from "app/utils/useAppTheme"
-import type { ThemedStyle } from "app/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
 
 export interface SwitchToggleProps extends Omit<ToggleProps<SwitchInputProps>, "ToggleInput"> {
   /**

boilerplate/app/components/Toggle/Toggle.tsx

@@ -14,8 +14,8 @@ import {
 } from "react-native"
 import { $styles } from "../../theme"
 import { Text, TextProps } from "../Text"
-import { useAppTheme } from "app/utils/useAppTheme"
-import type { ThemedStyle } from "app/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
 
 export interface ToggleProps<T> extends Omit<TouchableOpacityProps, "style"> {
   /**

boilerplate/app/devtools/ReactotronConfig.ts

@@ -9,8 +9,8 @@ import { ArgType } from "reactotron-core-client"
 import { mst } from "reactotron-mst" // @mst remove-current-line
 import mmkvPlugin from "reactotron-react-native-mmkv"
 
-import { storage, clear } from "app/utils/storage"
-import { goBack, resetRoot, navigate } from "app/navigators/navigationUtilities"
+import { storage, clear } from "@/utils/storage"
+import { goBack, resetRoot, navigate } from "@/navigators/navigationUtilities"
 
 import { Reactotron } from "./ReactotronClient"
 import { ReactotronReactNative } from "reactotron-react-native"

boilerplate/app/i18n/ar.ts

@@ -1,4 +1,4 @@
-import demoAr from "./demo-ar"
+import demoAr from "./demo-ar" // @demo remove-current-line
 import { Translations } from "./en"
 
 const ar: Translations = {

boilerplate/app/i18n/en.ts

@@ -1,4 +1,4 @@
-import demoEn from "./demo-en"
+import demoEn from "./demo-en" // @demo remove-current-line
 
 const en = {
   common: {

boilerplate/app/i18n/fr.ts

@@ -1,4 +1,4 @@
-import demoFr from "./demo-fr"
+import demoFr from "./demo-fr" // @demo remove-current-line
 import { Translations } from "./en"
 
 const fr: Translations = {

boilerplate/app/i18n/jp.ts

@@ -1,4 +1,4 @@
-import demoJp from "./demo-jp"
+import demoJp from "./demo-jp" // @demo remove-current-line
 import { Translations } from "./en"
 
 const jp: Translations = {

boilerplate/app/i18n/ko.ts

@@ -1,4 +1,4 @@
-import demoKo from "./demo-ko"
+import demoKo from "./demo-ko" // @demo remove-current-line
 import { Translations } from "./en"
 
 const ko: Translations = {

boilerplate/app/navigators/AppNavigator.tsx

@@ -10,12 +10,12 @@ import {
 } from "@react-navigation/native"
 import { createNativeStackNavigator, NativeStackScreenProps } from "@react-navigation/native-stack"
 import { observer } from "mobx-react-lite" // @mst remove-current-line
-import * as Screens from "app/screens"
+import * as Screens from "@/screens"
 import Config from "../config"
 import { useStores } from "../models" // @demo remove-current-line
 import { DemoNavigator, DemoTabParamList } from "./DemoNavigator" // @demo remove-current-line
 import { navigationRef, useBackButtonHandler } from "./navigationUtilities"
-import { useAppTheme, useThemeProvider } from "app/utils/useAppTheme"
+import { useAppTheme, useThemeProvider } from "@/utils/useAppTheme"
 import { ComponentProps } from "react"
 
 /**

boilerplate/app/navigators/DemoNavigator.tsx

@@ -6,9 +6,9 @@ import { Icon } from "../components"
 import { translate } from "../i18n"
 import { DemoCommunityScreen, DemoShowroomScreen, DemoDebugScreen } from "../screens"
 import { DemoPodcastListScreen } from "../screens/DemoPodcastListScreen"
-import type { ThemedStyle } from "app/theme"
+import type { ThemedStyle } from "@/theme"
 import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 export type DemoTabParamList = {
   DemoCommunity: undefined

boilerplate/app/screens/DemoCommunityScreen.tsx

@@ -5,8 +5,8 @@ import { DemoTabScreenProps } from "../navigators/DemoNavigator"
 import { $styles } from "../theme"
 import { openLinkInBrowser } from "../utils/openLinkInBrowser"
 import { isRTL } from "../i18n"
-import type { ThemedStyle } from "app/theme"
-import { useAppTheme } from "app/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 const chainReactLogo = require("../../assets/images/demo/cr-logo.png")
 const reactNativeLiveLogo = require("../../assets/images/demo/rnl-logo.png")

boilerplate/app/screens/DemoDebugScreen.tsx

@@ -11,11 +11,11 @@ import {
 } from "react-native"
 import { Button, ListItem, Screen, Text } from "../components"
 import { DemoTabScreenProps } from "../navigators/DemoNavigator"
-import type { ThemedStyle } from "app/theme"
+import type { ThemedStyle } from "@/theme"
 import { $styles } from "../theme"
 import { isRTL } from "../i18n"
 import { useStores } from "../models"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 /**
  * @param {string} url - The URL to open in the browser.

boilerplate/app/screens/DemoPodcastListScreen.tsx

@@ -30,16 +30,16 @@ import {
   Screen,
   Switch,
   Text,
-} from "app/components"
+} from "@/components"
 import { isRTL, translate } from "../i18n"
 import { useStores } from "../models"
 import { Episode } from "../models/Episode"
 import { DemoTabScreenProps } from "../navigators/DemoNavigator"
-import type { ThemedStyle } from "app/theme"
+import type { ThemedStyle } from "@/theme"
 import { $styles } from "../theme"
 import { delay } from "../utils/delay"
 import { openLinkInBrowser } from "../utils/openLinkInBrowser"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 const ICON_SIZE = 14
 

boilerplate/app/screens/DemoShowroomScreen/DemoDivider.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable  react-native/no-inline-styles */
 import { StyleProp, View, ViewStyle } from "react-native"
-import type { ThemedStyle } from "app/theme"
-import { useAppTheme } from "app/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 interface DemoDividerProps {
   type?: "vertical" | "horizontal"

boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx

@@ -6,13 +6,13 @@ import { type ContentStyle } from "@shopify/flash-list"
 import { ListItem, ListView, ListViewRef, Screen, Text } from "../../components"
 import { TxKeyPath, isRTL, translate } from "../../i18n"
 import { DemoTabParamList, DemoTabScreenProps } from "../../navigators/DemoNavigator"
-import type { Theme, ThemedStyle } from "app/theme"
-import { $styles } from "app/theme"
+import type { Theme, ThemedStyle } from "@/theme"
+import { $styles } from "@/theme"
 import { useSafeAreaInsetsStyle } from "../../utils/useSafeAreaInsetsStyle"
 import * as Demos from "./demos"
 import { DrawerIconButton } from "./DrawerIconButton"
 import SectionListWithKeyboardAwareScrollView from "./SectionListWithKeyboardAwareScrollView"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 const logo = require("../../../assets/images/logo.png")
 

boilerplate/app/screens/DemoShowroomScreen/DemoUseCase.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from "react"
 import { TextStyle, View, ViewStyle } from "react-native"
-import { TxKeyPath, translate } from "app/i18n"
+import { TxKeyPath, translate } from "@/i18n"
 import { Text } from "../../components"
-import type { ThemedStyle } from "app/theme"
-import { useAppTheme } from "app/utils/useAppTheme"
-import { $styles } from "app/theme"
+import type { ThemedStyle } from "@/theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import { $styles } from "@/theme"
 
 interface DemoUseCaseProps {
   name: TxKeyPath

boilerplate/app/screens/DemoShowroomScreen/DrawerIconButton.tsx

@@ -2,7 +2,7 @@ import { Pressable, PressableProps, ViewStyle, Platform } from "react-native"
 import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated"
 import { useDrawerProgress } from "react-native-drawer-layout"
 import { isRTL } from "../../i18n"
-import { useAppTheme } from "app/utils/useAppTheme"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 interface DrawerIconButtonProps extends PressableProps {}
 

boilerplate/app/screens/DemoShowroomScreen/SectionListWithKeyboardAwareScrollView.tsx

@@ -1,4 +1,4 @@
-import { DEFAULT_BOTTOM_OFFSET } from "app/components"
+import { DEFAULT_BOTTOM_OFFSET } from "@/components"
 import { forwardRef, ReactElement, ReactNode, useCallback } from "react"
 import { ScrollViewProps, SectionList, SectionListProps } from "react-native"
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller"

boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx

@@ -6,7 +6,7 @@ import { $styles } from "../../../theme"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoDivider } from "../DemoDivider"
 import { DemoUseCase } from "../DemoUseCase"
-import { translate } from "app/i18n"
+import { translate } from "@/i18n"
 
 const $imageContainer: ViewStyle = {
   alignItems: "center",

boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx

@@ -5,7 +5,7 @@ import type { ThemedStyle } from "../../../theme"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoDivider } from "../DemoDivider"
 import { DemoUseCase } from "../DemoUseCase"
-import { translate } from "app/i18n"
+import { translate } from "@/i18n"
 
 const $iconStyle: ImageStyle = { width: 30, height: 30 }
 const $customButtonStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({

boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx

@@ -5,7 +5,7 @@ import { $styles } from "../../../theme"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoDivider } from "../DemoDivider"
 import { DemoUseCase } from "../DemoUseCase"
-import type { ThemedStyle } from "app/theme"
+import type { ThemedStyle } from "@/theme"
 
 const $rightAlignTitle: TextStyle = {
   textAlign: "right",

boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx

@@ -3,8 +3,8 @@ import { ImageStyle, TextStyle, View, ViewStyle } from "react-native"
 import { Icon, iconRegistry, IconTypes, Text } from "../../../components"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoUseCase } from "../DemoUseCase"
-import type { ThemedStyle } from "app/theme"
-import { $styles } from "app/theme"
+import type { ThemedStyle } from "@/theme"
+import { $styles } from "@/theme"
 
 const $demoIconContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   padding: spacing.xs,

boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx

@@ -6,7 +6,7 @@ import { $styles } from "../../../theme"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoDivider } from "../DemoDivider"
 import { DemoUseCase } from "../DemoUseCase"
-import { translate } from "app/i18n"
+import { translate } from "@/i18n"
 
 const listData =
   `Tempor Id Ea Aliqua Pariatur Aliquip. Irure Minim Voluptate Consectetur Consequat Sint Esse Proident Irure. Nostrud Elit Veniam Nostrud Excepteur Minim Deserunt Quis Dolore Velit Nulla Irure Voluptate Tempor. Occaecat Amet Laboris Nostrud Qui Do Quis Lorem Ex Elit Fugiat Deserunt. In Pariatur Excepteur Exercitation Ex Incididunt Qui Mollit Dolor Sit Non. Culpa Officia Minim Cillum Exercitation Voluptate Proident Laboris Et Est Reprehenderit Quis Pariatur Nisi`

boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx

@@ -3,7 +3,7 @@ import { Text } from "../../../components"
 import { Demo } from "../DemoShowroomScreen"
 import { DemoDivider } from "../DemoDivider"
 import { DemoUseCase } from "../DemoUseCase"
-import { translate } from "app/i18n"
+import { translate } from "@/i18n"
 
 export const DemoText: Demo = {
   name: "Text",