From b1cb6c3dd47a236baf2aa2ec375ce7bf19746a3a Mon Sep 17 00:00:00 2001 From: Lizzi Lindboe Date: Thu, 12 Sep 2024 10:20:35 -0700 Subject: [PATCH] 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: https://github.com/jsx-eslint/eslint-plugin-react/pull/3821 --- .circleci/config.yml | 2 +- boilerplate/App.tsx | 2 +- boilerplate/app/components/Button.tsx | 4 +- boilerplate/app/components/Card.tsx | 4 +- boilerplate/app/components/EmptyState.tsx | 4 +- boilerplate/app/components/Header.tsx | 4 +- boilerplate/app/components/ListItem.tsx | 4 +- boilerplate/app/components/ListView.tsx | 2 +- boilerplate/app/components/Screen.tsx | 2 +- boilerplate/app/components/Text.tsx | 6 +- boilerplate/app/components/TextField.tsx | 4 +- .../app/components/Toggle/Checkbox.tsx | 2 +- boilerplate/app/components/Toggle/Radio.tsx | 2 +- boilerplate/app/components/Toggle/Switch.tsx | 10 +-- boilerplate/app/components/Toggle/Toggle.tsx | 4 +- boilerplate/app/devtools/ReactotronConfig.ts | 4 +- boilerplate/app/i18n/ar.ts | 2 +- boilerplate/app/i18n/en.ts | 2 +- boilerplate/app/i18n/fr.ts | 2 +- boilerplate/app/i18n/jp.ts | 2 +- boilerplate/app/i18n/ko.ts | 2 +- boilerplate/app/navigators/AppNavigator.tsx | 4 +- boilerplate/app/navigators/DemoNavigator.tsx | 4 +- .../app/screens/DemoCommunityScreen.tsx | 4 +- boilerplate/app/screens/DemoDebugScreen.tsx | 4 +- .../app/screens/DemoPodcastListScreen.tsx | 6 +- .../DemoShowroomScreen/DemoDivider.tsx | 4 +- .../DemoShowroomScreen/DemoShowroomScreen.tsx | 6 +- .../DemoShowroomScreen/DemoUseCase.tsx | 8 +-- .../DemoShowroomScreen/DrawerIconButton.tsx | 2 +- ...SectionListWithKeyboardAwareScrollView.tsx | 2 +- .../demos/DemoAutoImage.tsx | 2 +- .../DemoShowroomScreen/demos/DemoButton.tsx | 2 +- .../DemoShowroomScreen/demos/DemoHeader.tsx | 2 +- .../DemoShowroomScreen/demos/DemoIcon.tsx | 4 +- .../DemoShowroomScreen/demos/DemoListItem.tsx | 2 +- .../DemoShowroomScreen/demos/DemoText.tsx | 2 +- .../DemoShowroomScreen/demos/DemoToggle.tsx | 6 +- .../app/screens/ErrorScreen/ErrorDetails.tsx | 4 +- boilerplate/app/screens/LoginScreen.tsx | 4 +- boilerplate/app/screens/WelcomeScreen.tsx | 6 +- boilerplate/app/utils/formatDate.ts | 2 +- boilerplate/app/utils/useAppTheme.ts | 2 +- .../ignite/templates/component/NAME.tsx.ejs | 6 +- .../templates/navigator/NAMENavigator.tsx.ejs | 2 +- .../templates/screen/NAMEScreen.tsx.ejs | 6 +- boilerplate/package.json | 3 + boilerplate/src/app/_layout.tsx | 14 ++--- boilerplate/src/app/index.tsx | 9 ++- boilerplate/tsconfig.json | 2 +- docs/Guide.md | 4 +- docs/boilerplate/app/utils/useAppTheme.tsx.md | 2 +- docs/concept/Styling.md | 2 +- src/commands/new.ts | 12 +--- src/tools/react-native.ts | 6 +- test/_test-helpers.ts | 8 +-- test/vanilla/ignite-generate.test.ts | 16 ++--- test/vanilla/ignite-new-expo-router.test.ts | 63 +++++++++---------- test/vanilla/ignite-new.test.ts | 15 +++-- 59 files changed, 158 insertions(+), 164 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8cbe795ae..3706a641c 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/boilerplate/App.tsx b/boilerplate/App.tsx index 3b2114e8e..5b7bcbbfb 100644 --- a/boilerplate/App.tsx +++ b/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() diff --git a/boilerplate/app/components/Button.tsx b/boilerplate/app/components/Button.tsx index d78996ff3..8befa0fc5 100644 --- a/boilerplate/app/components/Button.tsx +++ b/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" diff --git a/boilerplate/app/components/Card.tsx b/boilerplate/app/components/Card.tsx index c89d4542f..39dbf7caf 100644 --- a/boilerplate/app/components/Card.tsx +++ b/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" diff --git a/boilerplate/app/components/EmptyState.tsx b/boilerplate/app/components/EmptyState.tsx index b3dc34c4e..d74a7d540 100644 --- a/boilerplate/app/components/EmptyState.tsx +++ b/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") diff --git a/boilerplate/app/components/Header.tsx b/boilerplate/app/components/Header.tsx index 87ac9e1fa..7a0ab7dd0 100644 --- a/boilerplate/app/components/Header.tsx +++ b/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 { /** diff --git a/boilerplate/app/components/ListItem.tsx b/boilerplate/app/components/ListItem.tsx index 4bf79a236..eefea1aff 100644 --- a/boilerplate/app/components/ListItem.tsx +++ b/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 { /** diff --git a/boilerplate/app/components/ListView.tsx b/boilerplate/app/components/ListView.tsx index 95bd53157..fc96ddd1b 100644 --- a/boilerplate/app/components/ListView.tsx +++ b/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 = FlashList | FlatList diff --git a/boilerplate/app/components/Screen.tsx b/boilerplate/app/components/Screen.tsx index 78d8b9340..9b20fd34f 100644 --- a/boilerplate/app/components/Screen.tsx +++ b/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 diff --git a/boilerplate/app/components/Text.tsx b/boilerplate/app/components/Text.tsx index a4939eea4..0f993bf5b 100644 --- a/boilerplate/app/components/Text.tsx +++ b/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 diff --git a/boilerplate/app/components/TextField.tsx b/boilerplate/app/components/TextField.tsx index 86c3a4bfd..236823a6c 100644 --- a/boilerplate/app/components/TextField.tsx +++ b/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 diff --git a/boilerplate/app/components/Toggle/Checkbox.tsx b/boilerplate/app/components/Toggle/Checkbox.tsx index 8c7ac1fec..74c7374f0 100644 --- a/boilerplate/app/components/Toggle/Checkbox.tsx +++ b/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, "ToggleInput"> { /** diff --git a/boilerplate/app/components/Toggle/Radio.tsx b/boilerplate/app/components/Toggle/Radio.tsx index 1720b5941..d0f53b608 100644 --- a/boilerplate/app/components/Toggle/Radio.tsx +++ b/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, "ToggleInput"> { /** diff --git a/boilerplate/app/components/Toggle/Switch.tsx b/boilerplate/app/components/Toggle/Switch.tsx index afb676fc3..4d5be39bf 100644 --- a/boilerplate/app/components/Toggle/Switch.tsx +++ b/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, "ToggleInput"> { /** diff --git a/boilerplate/app/components/Toggle/Toggle.tsx b/boilerplate/app/components/Toggle/Toggle.tsx index e5a3ac248..e14496de9 100644 --- a/boilerplate/app/components/Toggle/Toggle.tsx +++ b/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 extends Omit { /** diff --git a/boilerplate/app/devtools/ReactotronConfig.ts b/boilerplate/app/devtools/ReactotronConfig.ts index 7efe00b76..d8769fd10 100644 --- a/boilerplate/app/devtools/ReactotronConfig.ts +++ b/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" diff --git a/boilerplate/app/i18n/ar.ts b/boilerplate/app/i18n/ar.ts index 9ba002f5f..091f2f863 100644 --- a/boilerplate/app/i18n/ar.ts +++ b/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 = { diff --git a/boilerplate/app/i18n/en.ts b/boilerplate/app/i18n/en.ts index e0c23e7bf..105e6325d 100644 --- a/boilerplate/app/i18n/en.ts +++ b/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: { diff --git a/boilerplate/app/i18n/fr.ts b/boilerplate/app/i18n/fr.ts index 2c549a206..a6a436da6 100644 --- a/boilerplate/app/i18n/fr.ts +++ b/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 = { diff --git a/boilerplate/app/i18n/jp.ts b/boilerplate/app/i18n/jp.ts index 97442fc3d..7525a4a09 100644 --- a/boilerplate/app/i18n/jp.ts +++ b/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 = { diff --git a/boilerplate/app/i18n/ko.ts b/boilerplate/app/i18n/ko.ts index ff0e9f6fa..4143f094d 100644 --- a/boilerplate/app/i18n/ko.ts +++ b/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 = { diff --git a/boilerplate/app/navigators/AppNavigator.tsx b/boilerplate/app/navigators/AppNavigator.tsx index 79c88c49d..f05a8bdca 100644 --- a/boilerplate/app/navigators/AppNavigator.tsx +++ b/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" /** diff --git a/boilerplate/app/navigators/DemoNavigator.tsx b/boilerplate/app/navigators/DemoNavigator.tsx index 359f28c1c..416eb07e3 100644 --- a/boilerplate/app/navigators/DemoNavigator.tsx +++ b/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 diff --git a/boilerplate/app/screens/DemoCommunityScreen.tsx b/boilerplate/app/screens/DemoCommunityScreen.tsx index 28f690fe8..8f264264c 100644 --- a/boilerplate/app/screens/DemoCommunityScreen.tsx +++ b/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") diff --git a/boilerplate/app/screens/DemoDebugScreen.tsx b/boilerplate/app/screens/DemoDebugScreen.tsx index 4a2de9d02..4176f387c 100644 --- a/boilerplate/app/screens/DemoDebugScreen.tsx +++ b/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. diff --git a/boilerplate/app/screens/DemoPodcastListScreen.tsx b/boilerplate/app/screens/DemoPodcastListScreen.tsx index 25a7e73b2..143309c91 100644 --- a/boilerplate/app/screens/DemoPodcastListScreen.tsx +++ b/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 diff --git a/boilerplate/app/screens/DemoShowroomScreen/DemoDivider.tsx b/boilerplate/app/screens/DemoShowroomScreen/DemoDivider.tsx index 2ad15125f..aaf1e7074 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/DemoDivider.tsx +++ b/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" diff --git a/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx b/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx index 43abbe2f7..1b6e4787f 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx +++ b/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") diff --git a/boilerplate/app/screens/DemoShowroomScreen/DemoUseCase.tsx b/boilerplate/app/screens/DemoShowroomScreen/DemoUseCase.tsx index e7e1f149c..1041d2709 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/DemoUseCase.tsx +++ b/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 diff --git a/boilerplate/app/screens/DemoShowroomScreen/DrawerIconButton.tsx b/boilerplate/app/screens/DemoShowroomScreen/DrawerIconButton.tsx index 8d2780600..0bba5085c 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/DrawerIconButton.tsx +++ b/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 {} diff --git a/boilerplate/app/screens/DemoShowroomScreen/SectionListWithKeyboardAwareScrollView.tsx b/boilerplate/app/screens/DemoShowroomScreen/SectionListWithKeyboardAwareScrollView.tsx index 42862ae05..479dc09d5 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/SectionListWithKeyboardAwareScrollView.tsx +++ b/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" diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx index ac018584b..a72923f27 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx +++ b/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", diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx index 1603a9fa0..e02680d63 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx +++ b/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 = ({ colors }) => ({ diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx index 02f509c9f..863f29e15 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx +++ b/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", diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx index 2a9711c34..78f904c91 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx +++ b/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 = ({ spacing }) => ({ padding: spacing.xs, diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx index f989ec68b..d3f2fee33 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx +++ b/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` diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx index ae5732c50..be65e15f9 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx +++ b/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", diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx index fb555c667..420ee9eb7 100644 --- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx +++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx @@ -9,12 +9,12 @@ import { Switch, SwitchToggleProps, Text, -} from "app/components" +} from "@/components" import { Demo } from "../DemoShowroomScreen" import { DemoDivider } from "../DemoDivider" import { DemoUseCase } from "../DemoUseCase" -import type { ThemedStyle } from "app/theme" -import { translate } from "app/i18n" +import type { ThemedStyle } from "@/theme" +import { translate } from "@/i18n" function ControlledCheckbox(props: CheckboxToggleProps) { const [value, setValue] = useState(props.value || false) diff --git a/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx b/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx index f7d3d91d1..8a45dfd11 100644 --- a/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx +++ b/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx @@ -1,8 +1,8 @@ import { ErrorInfo } from "react" import { ScrollView, TextStyle, View, ViewStyle } from "react-native" import { Button, Icon, Screen, Text } from "../../components" -import type { ThemedStyle } from "app/theme" -import { useAppTheme } from "app/utils/useAppTheme" +import type { ThemedStyle } from "@/theme" +import { useAppTheme } from "@/utils/useAppTheme" export interface ErrorDetailsProps { error: Error diff --git a/boilerplate/app/screens/LoginScreen.tsx b/boilerplate/app/screens/LoginScreen.tsx index 275fd706a..bcac21fcd 100644 --- a/boilerplate/app/screens/LoginScreen.tsx +++ b/boilerplate/app/screens/LoginScreen.tsx @@ -4,8 +4,8 @@ import { TextInput, TextStyle, ViewStyle } from "react-native" import { Button, Icon, Screen, Text, TextField, TextFieldAccessoryProps } from "../components" import { useStores } from "../models" import { AppStackScreenProps } from "../navigators" -import type { ThemedStyle } from "app/theme" -import { useAppTheme } from "app/utils/useAppTheme" +import type { ThemedStyle } from "@/theme" +import { useAppTheme } from "@/utils/useAppTheme" interface LoginScreenProps extends AppStackScreenProps<"Login"> {} diff --git a/boilerplate/app/screens/WelcomeScreen.tsx b/boilerplate/app/screens/WelcomeScreen.tsx index a18c32cb3..a9c1de4a7 100644 --- a/boilerplate/app/screens/WelcomeScreen.tsx +++ b/boilerplate/app/screens/WelcomeScreen.tsx @@ -5,14 +5,14 @@ import { Button, // @demo remove-current-line Text, Screen, -} from "app/components" +} from "@/components" import { isRTL } from "../i18n" import { useStores } from "../models" // @demo remove-current-line import { AppStackScreenProps } from "../navigators" -import type { ThemedStyle } from "app/theme" +import type { ThemedStyle } from "@/theme" import { useHeader } from "../utils/useHeader" // @demo remove-current-line import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle" -import { useAppTheme } from "app/utils/useAppTheme" +import { useAppTheme } from "@/utils/useAppTheme" const welcomeLogo = require("../../assets/images/logo.png") const welcomeFace = require("../../assets/images/welcome-face.png") diff --git a/boilerplate/app/utils/formatDate.ts b/boilerplate/app/utils/formatDate.ts index 1e2a89ee3..213cfd13b 100644 --- a/boilerplate/app/utils/formatDate.ts +++ b/boilerplate/app/utils/formatDate.ts @@ -8,7 +8,7 @@ import parseISO from "date-fns/parseISO" import ar from "date-fns/locale/ar-SA" import ko from "date-fns/locale/ko" import en from "date-fns/locale/en-US" -import { i18n } from "app/i18n" +import { i18n } from "@/i18n" type Options = Parameters[2] diff --git a/boilerplate/app/utils/useAppTheme.ts b/boilerplate/app/utils/useAppTheme.ts index 674fb0ae6..991ddbef5 100644 --- a/boilerplate/app/utils/useAppTheme.ts +++ b/boilerplate/app/utils/useAppTheme.ts @@ -8,7 +8,7 @@ import { type ThemedStyleArray, lightTheme, darkTheme, -} from "app/theme" +} from "@/theme" import * as SystemUI from "expo-system-ui" type ThemeContextType = { diff --git a/boilerplate/ignite/templates/component/NAME.tsx.ejs b/boilerplate/ignite/templates/component/NAME.tsx.ejs index 2544e72d2..d2d961976 100644 --- a/boilerplate/ignite/templates/component/NAME.tsx.ejs +++ b/boilerplate/ignite/templates/component/NAME.tsx.ejs @@ -6,9 +6,9 @@ patch: --- import { StyleProp, TextStyle, View, ViewStyle } from "react-native" import { observer } from "mobx-react-lite" // @mst remove-current-line -import { useAppTheme } from "app/utils/useAppTheme" -import type { ThemedStyle } from "app/theme" -import { Text } from "app/components/Text" +import { useAppTheme } from "@/utils/useAppTheme" +import type { ThemedStyle } from "@/theme" +import { Text } from "@/components/Text" export interface <%= props.pascalCaseName %>Props { /** diff --git a/boilerplate/ignite/templates/navigator/NAMENavigator.tsx.ejs b/boilerplate/ignite/templates/navigator/NAMENavigator.tsx.ejs index a5c519e4d..0f9e6f3e9 100644 --- a/boilerplate/ignite/templates/navigator/NAMENavigator.tsx.ejs +++ b/boilerplate/ignite/templates/navigator/NAMENavigator.tsx.ejs @@ -8,7 +8,7 @@ patch: import { createNativeStackNavigator } from "@react-navigation/native-stack" import { WelcomeScreen -} from "app/screens" +} from "@/screens" export type <%= props.pascalCaseName %>NavigatorParamList = { Demo: undefined diff --git a/boilerplate/ignite/templates/screen/NAMEScreen.tsx.ejs b/boilerplate/ignite/templates/screen/NAMEScreen.tsx.ejs index 0241f79f3..19ab5825b 100644 --- a/boilerplate/ignite/templates/screen/NAMEScreen.tsx.ejs +++ b/boilerplate/ignite/templates/screen/NAMEScreen.tsx.ejs @@ -15,10 +15,10 @@ patches: import { FC } from "react" import { observer } from "mobx-react-lite" // @mst remove-current-line import { ViewStyle } from "react-native" -import { AppStackScreenProps } from "app/navigators" -import { Screen, Text } from "app/components" +import { AppStackScreenProps } from "@/navigators" +import { Screen, Text } from "@/components" // import { useNavigation } from "@react-navigation/native" -// import { useStores } from "app/models" // @mst remove-current-line +// import { useStores } from "@/models" // @mst remove-current-line interface <%= props.pascalCaseName %>ScreenProps extends AppStackScreenProps<"<%= props.pascalCaseName %>"> {} diff --git a/boilerplate/package.json b/boilerplate/package.json index ec020f9db..2e1cfaeb1 100644 --- a/boilerplate/package.json +++ b/boilerplate/package.json @@ -99,5 +99,8 @@ }, "engines": { "node": "^18.18.0 || >=20.0.0" + }, + "resolutions": { + "eslint-plugin-react": "7.35.2" } } diff --git a/boilerplate/src/app/_layout.tsx b/boilerplate/src/app/_layout.tsx index cf4c64523..4ad1bd9ce 100644 --- a/boilerplate/src/app/_layout.tsx +++ b/boilerplate/src/app/_layout.tsx @@ -1,11 +1,11 @@ -import React from "react" -import { ViewStyle } from "react-native" +import { useEffect } 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 { useInitialRootStore } from "@/models" import { useFonts } from "@expo-google-fonts/space-grotesk" -import { customFontsToLoad } from "src/theme" +import { customFontsToLoad } from "@/theme" SplashScreen.preventAutoHideAsync() @@ -16,7 +16,7 @@ if (__DEV__) { require("src/devtools/ReactotronConfig.ts") } -export { ErrorBoundary } from "src/components/ErrorBoundary/ErrorBoundary" +export { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary" export default function Root() { // @mst remove-block-start @@ -29,11 +29,11 @@ export default function Root() { const loaded = fontsLoaded && rehydrated - React.useEffect(() => { + useEffect(() => { if (fontError) throw fontError }, [fontError]) - React.useEffect(() => { + useEffect(() => { if (loaded) { SplashScreen.hideAsync() } diff --git a/boilerplate/src/app/index.tsx b/boilerplate/src/app/index.tsx index 3e5604017..d4850deaf 100644 --- a/boilerplate/src/app/index.tsx +++ b/boilerplate/src/app/index.tsx @@ -1,11 +1,10 @@ // @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" +import { Text } from "@/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") diff --git a/boilerplate/tsconfig.json b/boilerplate/tsconfig.json index 03814fdee..e6c483c80 100644 --- a/boilerplate/tsconfig.json +++ b/boilerplate/tsconfig.json @@ -17,7 +17,7 @@ "resolveJsonModule": true, "baseUrl": ".", "paths": { - "app/*": ["./app/*"], + "@/*": ["./app/*"], "assets/*": ["./assets/*"] }, "typeRoots": ["./node_modules/@types", "./types"], diff --git a/docs/Guide.md b/docs/Guide.md index 3dee7233c..6a53395b8 100644 --- a/docs/Guide.md +++ b/docs/Guide.md @@ -80,8 +80,8 @@ We instead use a strategy of constants, co-located with our components, camelCas ```tsx import { View, ViewStyle } from "react-native" -import { useAppTheme } from "app/utils/useAppTheme" -import type { ThemedStyle } from "app/theme" +import { useAppTheme } from "@/utils/useAppTheme" +import type { ThemedStyle } from "@/theme" // This is a themed style that you must wrap with `themed()` to pass the style object. const $container: ThemedStyle = ({ colors }) => ({ diff --git a/docs/boilerplate/app/utils/useAppTheme.tsx.md b/docs/boilerplate/app/utils/useAppTheme.tsx.md index f48f4de8d..71c4463ed 100644 --- a/docs/boilerplate/app/utils/useAppTheme.tsx.md +++ b/docs/boilerplate/app/utils/useAppTheme.tsx.md @@ -12,7 +12,7 @@ Example usage: ```tsx import { View, type ViewStyle } from "react-native" -import { useAppTheme } from "app/utils/useAppTheme" +import { useAppTheme } from "@/utils/useAppTheme" const MyComponent = () => { const { diff --git a/docs/concept/Styling.md b/docs/concept/Styling.md index b066e38b9..15815fc77 100644 --- a/docs/concept/Styling.md +++ b/docs/concept/Styling.md @@ -14,7 +14,7 @@ We instead use a strategy of bare JS objects and functions that take a theme par ```tsx import { View, type ViewStyle } from "react-native" -import { useAppTheme } from "app/utils/useAppTheme" +import { useAppTheme } from "@/utils/useAppTheme" const MyComponent = () => { const { themed } = useAppTheme() diff --git a/src/commands/new.ts b/src/commands/new.ts index 4078dd011..f74c34007 100644 --- a/src/commands/new.ts +++ b/src/commands/new.ts @@ -627,16 +627,6 @@ module.exports = { // replace "main" entry point from App.js to "expo-router/entry" packageJsonRaw = packageJsonRaw.replace(/"main": ".*",/g, `"main": "expo-router/entry",`) - - // replace format and lint scripts - packageJsonRaw = packageJsonRaw.replace( - /"format": ".*",/g, - `"format": "prettier --write \\"src/**/*.{js,jsx,json,md,ts,tsx}\\"",`, - ) - packageJsonRaw = packageJsonRaw.replace( - /"lint": ".*",/g, - `"lint": "eslint src test --fix --ext .js,.ts,.tsx && npm run format",`, - ) } // If we need native dirs, change up start scripts from Expo Go variation to expo run:platform. @@ -660,7 +650,7 @@ module.exports = { packageJsonRaw = findAndRemoveDependencies(packageJsonRaw, demoDependenciesToRemove) const patchesToRemove = findDemoPatches() log(`Removing demo patches... ${patchesToRemove}`) - patchesToRemove.forEach((patch) => filesystem.remove(patch)) + patchesToRemove.forEach((patch) => filesystem.cwd("./patches").remove(patch)) } if (stateMgmt === "none") { diff --git a/src/tools/react-native.ts b/src/tools/react-native.ts index aa8df43db..81bbbf817 100644 --- a/src/tools/react-native.ts +++ b/src/tools/react-native.ts @@ -309,10 +309,9 @@ export function updateExpoRouterSrcDir(toolbox: GluegunToolbox) { const TARGET_DIR = filesystem.path(process.cwd()) const expoRouterFilesToFix = [ "tsconfig.json", + // has its own tsconfig, needs updating separately "test/i18n.test.ts", - "src/devtools/ReactotronConfig.ts", - "src/components/Toggle/Switch.tsx", - "src/components/ListView.tsx", + "test/setup.ts", "ignite/templates/model/NAME.ts.ejs", "ignite/templates/component/NAME.tsx.ejs", ] @@ -343,6 +342,7 @@ export async function cleanupExpoRouterConversion(toolbox: GluegunToolbox) { \\rm src/app.tsx mkdir src/components/ErrorBoundary mv src/screens/ErrorScreen/* src/components/ErrorBoundary + rm App.tsx rm ignite/templates/screen/NAMEScreen.tsx.ejs rm -rf ignite/templates/navigator rm -rf src/screens diff --git a/test/_test-helpers.ts b/test/_test-helpers.ts index 99b8bf080..5f85517c8 100644 --- a/test/_test-helpers.ts +++ b/test/_test-helpers.ts @@ -58,10 +58,10 @@ patches: import React, { FC } from "react" import { observer } from "mobx-react-lite" import { ViewStyle } from "react-native" -import { AppStackScreenProps } from "app/navigators" -import { Screen, Text } from "app/components" +import { AppStackScreenProps } from "@/navigators" +import { Screen, Text } from "@/components" // import { useNavigation } from "@react-navigation/native" -// import { useStores } from "app/models" +// import { useStores } from "@/models" interface <%= props.pascalCaseName %>ScreenProps extends AppStackScreenProps<"<%= props.pascalCaseName %>"> {} @@ -91,7 +91,7 @@ export function copyExpoRouterScreenGenerator(tempBoilerplatePath: string): void const EXPO_ROUTER_SCREEN_TPL = `import React, { FC } from "react" import { observer } from "mobx-react-lite" import { ViewStyle } from "react-native" -import { Screen, Text } from "app/components" +import { Screen, Text } from "@/components" export default observer(function <%= props.pascalCaseName %>Screen() { return ( diff --git a/test/vanilla/ignite-generate.test.ts b/test/vanilla/ignite-generate.test.ts index cb65329df..82b54564f 100644 --- a/test/vanilla/ignite-generate.test.ts +++ b/test/vanilla/ignite-generate.test.ts @@ -249,9 +249,9 @@ describe("ignite-cli generate", () => { expect(read(`${TEMP_DIR}/app/components/Topping.tsx`)).toMatchInlineSnapshot(` "import { StyleProp, TextStyle, View, ViewStyle } from \\"react-native\\" import { observer } from \\"mobx-react-lite\\" // @mst remove-current-line - import { useAppTheme } from \\"app/utils/useAppTheme\\" - import type { ThemedStyle } from \\"app/theme\\" - import { Text } from \\"app/components/Text\\" + import { useAppTheme } from \\"@/utils/useAppTheme\\" + import type { ThemedStyle } from \\"@/theme\\" + import { Text } from \\"@/components/Text\\" export interface ToppingProps { /** @@ -319,9 +319,9 @@ describe("ignite-cli generate", () => { expect(read(`${TEMP_DIR}/app/components/sub/to/my/Topping.tsx`)).toMatchInlineSnapshot(` "import { StyleProp, TextStyle, View, ViewStyle } from \\"react-native\\" import { observer } from \\"mobx-react-lite\\" // @mst remove-current-line - import { useAppTheme } from \\"app/utils/useAppTheme\\" - import type { ThemedStyle } from \\"app/theme\\" - import { Text } from \\"app/components/Text\\" + import { useAppTheme } from \\"@/utils/useAppTheme\\" + import type { ThemedStyle } from \\"@/theme\\" + import { Text } from \\"@/components/Text\\" export interface ToppingProps { /** @@ -447,7 +447,7 @@ describe("ignite-cli generate screens expo-router style", () => { "import React, { FC } from \\"react\\" import { observer } from \\"mobx-react-lite\\" import { ViewStyle } from \\"react-native\\" - import { Screen, Text } from \\"app/components\\" + import { Screen, Text } from \\"@/components\\" export default observer(function LogInScreen() { return ( @@ -481,7 +481,7 @@ describe("ignite-cli generate screens expo-router style", () => { "import React, { FC } from \\"react\\" import { observer } from \\"mobx-react-lite\\" import { ViewStyle } from \\"react-native\\" - import { Screen, Text } from \\"app/components\\" + import { Screen, Text } from \\"@/components\\" export default observer(function IdScreen() { return ( diff --git a/test/vanilla/ignite-new-expo-router.test.ts b/test/vanilla/ignite-new-expo-router.test.ts index e00056edc..02f3aa216 100644 --- a/test/vanilla/ignite-new-expo-router.test.ts +++ b/test/vanilla/ignite-new-expo-router.test.ts @@ -1,25 +1,32 @@ import { filesystem } from "gluegun" import * as tempy from "tempy" -import { runIgnite } from "../_test-helpers" +import { run, runIgnite } from "../_test-helpers" const APP_NAME = "Foo" const originalDir = process.cwd() describe(`ignite new with expo-router`, () => { - describe(`ignite new ${APP_NAME} --debug --packager=bun --install-deps=false --experimental=expo-router --state=mst --yes`, () => { + describe(`ignite new ${APP_NAME} --debug --packager=bun --install-deps=true --experimental=expo-router --state=mst --yes`, () => { let tempDir: string let result: string let appPath: string beforeAll(async () => { tempDir = tempy.directory({ prefix: "ignite-" }) - result = await runIgnite( - `new ${APP_NAME} --debug --packager=bun --install-deps=false --experimental=expo-router --state=mst --yes`, - { - pre: `cd ${tempDir}`, - post: `cd ${originalDir}`, - }, - ) + try { + result = await runIgnite( + `new ${APP_NAME} --debug --packager=bun --install-deps=true --experimental=expo-router --state=mst --yes`, + { + pre: `cd ${tempDir}`, + post: `cd ${originalDir}`, + }, + ) + } catch (e) { + // Uncomment to debug tests. Leaving commented for now, because we were + // seeing issues with max buffer size exceeded. + // console.log("Ignite new output: \n", stripANSI(e.stdout)) + throw new Error("Ignite new failed") + } appPath = filesystem.path(tempDir, APP_NAME) }) @@ -46,10 +53,6 @@ describe(`ignite new with expo-router`, () => { expect(templates).toContain("screen") expect(templates).not.toContain("navigator") - // check tsconfig for path alias - const tsConfigJson = filesystem.read(`${appPath}/tsconfig.json`) - expect(tsConfigJson).toContain(`"src/*": ["./src/*"]`) - // check entry point const packageJson = filesystem.read(`${appPath}/package.json`) expect(packageJson).toContain("expo-router/entry") @@ -61,27 +64,6 @@ describe(`ignite new with expo-router`, () => { expect(appJson).toContain("expo-router") expect(appJson).toContain("typedRoutes") - // check generator templates for src/components and src/models - const componentGenerator = filesystem.read( - `${appPath}/ignite/templates/component/NAME.tsx.ejs`, - ) - expect(componentGenerator).toContain("src/components/index.ts") - expect(componentGenerator).toContain("src/theme") - expect(componentGenerator).not.toContain("app/components/index.ts") - expect(componentGenerator).not.toContain("app/theme") - const modelGenerator = filesystem.read(`${appPath}/ignite/templates/model/NAME.ts.ejs`) - expect(modelGenerator).toContain("src/models") - expect(modelGenerator).not.toContain("app/models") - - // check components for src/i18n - const listViewComponent = filesystem.read(`${appPath}/src/components/ListView.tsx`) - expect(listViewComponent).toContain("src/i18n") - expect(listViewComponent).not.toContain("app/i18n") - - const switchComponent = filesystem.read(`${appPath}/src/components/Toggle/Switch.tsx`) - expect(switchComponent).toContain("src/i18n") - expect(switchComponent).not.toContain("app/i18n") - // check ReactotronConfig for router.back etc const reactotronConfig = filesystem.read(`${appPath}/src/devtools/ReactotronConfig.ts`) expect(reactotronConfig).toContain("router.back()") @@ -97,6 +79,19 @@ describe(`ignite new with expo-router`, () => { const rootIndex = filesystem.read(`${appPath}/src/app/index.tsx`) expect(rootIndex).toContain("observer") }) + + it("should pass test, lint, and compile checks", async () => { + const runOpts = { + pre: `cd ${appPath}`, + post: `cd ${originalDir}`, + } + // #region Assert package.json Scripts Can Be Run + // run the tests; if they fail, run will raise and this test will fail + await run(`bun run test`, runOpts) + await run(`bun run lint`, runOpts) + await run(`bun run compile`, runOpts) + expect(await run("git diff HEAD --no-ext-diff", runOpts)).toBe("") + }) }) describe(`ignite new ${APP_NAME} --debug --packager=bun --install-deps=false --experimental=expo-router --state-none --yes`, () => { diff --git a/test/vanilla/ignite-new.test.ts b/test/vanilla/ignite-new.test.ts index e39064f01..49df3bdd7 100644 --- a/test/vanilla/ignite-new.test.ts +++ b/test/vanilla/ignite-new.test.ts @@ -31,10 +31,17 @@ describe("ignite new", () => { beforeAll(async () => { tempDir = tempy.directory({ prefix: "ignite-" }) - result = await runIgnite(`new ${APP_NAME} --debug --packager=bun --yes`, { - pre: `cd ${tempDir}`, - post: `cd ${originalDir}`, - }) + try { + result = await runIgnite(`new ${APP_NAME} --debug --packager=bun --yes`, { + pre: `cd ${tempDir}`, + post: `cd ${originalDir}`, + }) + } catch (e) { + // Uncomment to debug tests. Leaving commented for now, because we were + // seeing issues with max buffer size exceeded. + // console.log("Ignite new output: \n", stripANSI(e.stdout)) + throw new Error("Ignite new failed") + } appPath = filesystem.path(tempDir, APP_NAME) })