@teardown/cli 2.0.64 → 2.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teardown/cli",
-	"version": "2.0.64",
+	"version": "2.0.66",
 	"private": false,
 	"type": "module",
 	"main": "./src/index.ts",
@@ -71,7 +71,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.11",
-		"@teardown/tsconfig": "2.0.64",
+		"@teardown/tsconfig": "2.0.66",
 		"@types/bun": "1.3.5",
 		"@types/ejs": "^3.1.5",
 		"typescript": "5.9.3"

package/src/templates/generator.ts

@@ -144,7 +144,7 @@ export class TemplateGenerator {
 	 * Check if src folder exists
 	 */
 	async srcFolderExists(): Promise<boolean> {
-		const srcPath = join(this.options.projectRoot, "src", "index.ts");
+		const srcPath = join(this.options.projectRoot, "src");
 		try {
 			await stat(srcPath);
 			return true;
@@ -180,62 +180,87 @@ export class TemplateGenerator {
 			"tsconfig.json",
 			"babel.config.js",
 			"metro.config.js",
-			"index.js",
+			"index.tsx",
 			"react-native.config.js",
 			"Gemfile",
 		];
 
 		for (const file of configFiles) {
-			const templatePath = join(getTemplatesPath(), file);
-			const outputPath = join(this.options.projectRoot, file);
+			const fileResult = await this.processConfigFile(file);
+			if (fileResult.created) {
+				result.filesCreated.push(fileResult.path);
+			} else if (fileResult.skipped) {
+				result.filesSkipped.push(fileResult.path);
+			} else if (fileResult.error) {
+				result.errors.push(fileResult.error);
+			}
+		}
 
-			try {
-				// Check if template file exists
-				try {
-					await stat(templatePath);
-				} catch {
-					// Template doesn't exist, skip
-					continue;
-				}
+		if (result.errors.length > 0) {
+			result.success = false;
+		}
 
-				// Check if output file already exists
-				if (!this.options.force) {
-					try {
-						await stat(outputPath);
-						result.filesSkipped.push(outputPath);
-						this.logger?.debug(`${file} already exists, skipping`);
-						continue;
-					} catch {
-						// File doesn't exist, continue
-					}
-				}
+		return result;
+	}
 
-				const content = await readFile(templatePath, "utf-8");
-				let processedContent = content;
+	/**
+	 * Process a single config file from template
+	 */
+	private async processConfigFile(
+		file: string
+	): Promise<{ path: string; created?: boolean; skipped?: boolean; error?: string }> {
+		const templatePath = join(getTemplatesPath(), file);
+		const outputPath = join(this.options.projectRoot, file);
+
+		// Check if template file exists
+		if (!(await this.fileExists(templatePath))) {
+			return { path: outputPath };
+		}
 
-				// Process EJS if the file contains EJS tags
-				if (content.includes("<%=") || content.includes("<%")) {
-					processedContent = ejs.render(content, this.options.variables, {
-						filename: templatePath,
-					});
-				}
+		// Check if output file already exists
+		if (!this.options.force && (await this.fileExists(outputPath))) {
+			this.logger?.debug(`${file} already exists, skipping`);
+			return { path: outputPath, skipped: true };
+		}
 
-				if (!this.options.dryRun) {
-					await writeFile(outputPath, processedContent, "utf-8");
-				}
+		try {
+			const content = await readFile(templatePath, "utf-8");
+			const processedContent = this.processEjsContent(content, templatePath);
 
-				result.filesCreated.push(outputPath);
-				this.logger?.debug(`Created: ${outputPath}`);
-			} catch (error) {
-				result.errors.push(`Failed to generate ${file}: ${error instanceof Error ? error.message : String(error)}`);
+			if (!this.options.dryRun) {
+				await writeFile(outputPath, processedContent, "utf-8");
 			}
+
+			this.logger?.debug(`Created: ${outputPath}`);
+			return { path: outputPath, created: true };
+		} catch (error) {
+			return {
+				path: outputPath,
+				error: `Failed to generate ${file}: ${error instanceof Error ? error.message : String(error)}`,
+			};
 		}
+	}
 
-		if (result.errors.length > 0) {
-			result.success = false;
+	/**
+	 * Check if a file exists
+	 */
+	private async fileExists(filePath: string): Promise<boolean> {
+		try {
+			await stat(filePath);
+			return true;
+		} catch {
+			return false;
 		}
+	}
 
-		return result;
+	/**
+	 * Process EJS content if it contains EJS tags
+	 */
+	private processEjsContent(content: string, templatePath: string): string {
+		if (content.includes("<%=") || content.includes("<%")) {
+			return ejs.render(content, this.options.variables, { filename: templatePath });
+		}
+		return content;
 	}
 
 	/**

package/templates/{src/index.tsx → index.tsx}

@@ -7,8 +7,8 @@
 
 import { DevClientProvider } from "@teardown/dev-client";
 import { AppRegistry } from "react-native";
-import { devClientConfig } from "../dev-client.config";
-import { App } from "./app";
+import { devClientConfig } from "./dev-client.config";
+import { App } from "./src/app";
 
 /**
  * Root component with development client wrapper
@@ -20,3 +20,5 @@ export function Root() {
 		</DevClientProvider>
 	);
 }
+
+AppRegistry.registerComponent("<%= appName %>", () => Root);

package/templates/ios/AppName/AppDelegate.swift

@@ -1,11 +1,13 @@
 import UIKit
 import React
 import React_RCTAppDelegate
+import ReactAppDependencyProvider
 
 @main
 class AppDelegate: RCTAppDelegate {
   override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
     self.moduleName = "<%= appName %>"
+    self.dependencyProvider = RCTAppDependencyProvider()
     self.initialProps = [:]
 
     return super.application(application, didFinishLaunchingWithOptions: launchOptions)

package/templates/package.json

@@ -41,10 +41,10 @@
 		"@react-native-community/cli": "20.0.0",
 		"@react-native-community/cli-platform-android": "20.0.0",
 		"@react-native-community/cli-platform-ios": "20.0.0",
-		"@react-native/babel-preset": "0.78.2",
-		"@react-native/eslint-config": "0.78.2",
-		"@react-native/metro-config": "0.78.2",
-		"@react-native/typescript-config": "0.78.2",
+		"@react-native/babel-preset": "0.83.1",
+		"@react-native/eslint-config": "0.83.1",
+		"@react-native/metro-config": "0.83.1",
+		"@react-native/typescript-config": "0.83.1",
 		"@teardown/cli": "<%= cliVersion %>",
 		"@teardown/metro-config": "<%= cliVersion %>",
 		"@teardown/navigation-metro": "<%= cliVersion %>",
@@ -60,4 +60,4 @@
 	"engines": {
 		"node": ">=18"
 	}
-}
+}

package/templates/src/navigation/hooks.ts

@@ -0,0 +1,46 @@
+/**
+ * Navigation Hooks
+ *
+ * Properly initialized typed navigation hooks for use in screens.
+ * These wrap the @teardown/navigation factories with React Navigation's hooks.
+ */
+
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { createUseTypedNavigation, createUseTypedParams, createUseTypedRoute } from "@teardown/navigation/hooks";
+
+/**
+ * Type-safe navigation hook.
+ * Use this to navigate between screens with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const navigation = useTypedNavigation();
+ * navigation.navigate("/settings");
+ * navigation.navigate("/(tabs)/home");
+ * ```
+ */
+export const useTypedNavigation = createUseTypedNavigation(useNavigation);
+
+/**
+ * Type-safe route params hook.
+ * Use this to access route parameters with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const params = useTypedParams<"/users/:userId">();
+ * console.log(params.userId);
+ * ```
+ */
+export const useTypedParams = createUseTypedParams(useRoute);
+
+/**
+ * Type-safe route hook.
+ * Use this to access the current route with full TypeScript support.
+ *
+ * @example
+ * ```tsx
+ * const route = useTypedRoute<"/users/:userId">();
+ * console.log(route.name, route.params.userId);
+ * ```
+ */
+export const useTypedRoute = createUseTypedRoute(useRoute);

package/templates/src/navigation/index.ts

@@ -4,5 +4,6 @@
  * Exports navigation components and utilities.
  */
 
+export { useTypedNavigation, useTypedParams, useTypedRoute } from "./hooks";
 export { NavigationProvider } from "./navigation-provider";
 export { Router } from "./router";

package/templates/src/routes/(tabs)/home.tsx

@@ -4,20 +4,20 @@
  * The main landing screen of the app.
  */
 
-import React from "react";
-import { View, ScrollView, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
+import type React from "react";
+import { Pressable, ScrollView, View } from "react-native";
 import {
-	Text,
+	Badge,
 	Button,
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
-	Badge,
+	Text,
 } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function HomeScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();

package/templates/src/routes/(tabs)/profile.tsx

@@ -4,19 +4,11 @@
  * User profile and account management screen.
  */
 
-import React from "react";
-import { View, ScrollView, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
-import {
-	Text,
-	Button,
-	Avatar,
-	Card,
-	CardContent,
-	Badge,
-	Separator,
-} from "@/components/ui";
+import type React from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Avatar, Badge, Button, Card, CardContent, Separator, Text } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function ProfileScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();
@@ -49,52 +41,32 @@ function ProfileScreen(): React.JSX.Element {
 
 			{/* Account Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">ACCOUNT</Text>
+				<Text variant="label" className="px-1">
+					ACCOUNT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
-						<MenuItem
-							icon="⚙️"
-							title="Settings"
-							onPress={() => navigation.navigate("/settings")}
-						/>
+						<MenuItem icon="⚙️" title="Settings" onPress={() => navigation.navigate("/settings")} />
 						<Separator />
-						<MenuItem
-							icon="🔒"
-							title="Privacy"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="🔒" title="Privacy" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="🔔"
-							title="Notifications"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="🔔" title="Notifications" onPress={() => {}} />
 					</CardContent>
 				</Card>
 			</View>
 
 			{/* Support Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">SUPPORT</Text>
+				<Text variant="label" className="px-1">
+					SUPPORT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
-						<MenuItem
-							icon="❓"
-							title="Help Center"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="❓" title="Help Center" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="💬"
-							title="Contact Us"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="💬" title="Contact Us" onPress={() => {}} />
 						<Separator />
-						<MenuItem
-							icon="📝"
-							title="Send Feedback"
-							onPress={() => {}}
-						/>
+						<MenuItem icon="📝" title="Send Feedback" onPress={() => {}} />
 					</CardContent>
 				</Card>
 			</View>
@@ -121,22 +93,13 @@ function StatItem({ label, value }: { label: string; value: string }): React.JSX
 	);
 }
 
-function MenuItem({
-	icon,
-	title,
-	onPress,
-}: {
-	icon: string;
-	title: string;
-	onPress: () => void;
-}): React.JSX.Element {
+function MenuItem({ icon, title, onPress }: { icon: string; title: string; onPress: () => void }): React.JSX.Element {
 	return (
-		<Pressable
-			className="flex-row items-center px-4 py-3 active:bg-muted/50"
-			onPress={onPress}
-		>
+		<Pressable className="flex-row items-center px-4 py-3 active:bg-muted/50" onPress={onPress}>
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text className="text-muted-foreground">›</Text>
 		</Pressable>
 	);

package/templates/src/routes/settings.tsx

@@ -5,19 +5,11 @@
  * This is a stack screen outside of the tab navigator.
  */
 
-import React from "react";
-import { View, ScrollView, Switch, Pressable } from "react-native";
 import { defineScreen } from "@teardown/navigation/primitives";
-import { useTypedNavigation } from "@teardown/navigation/hooks";
-import {
-	Text,
-	Button,
-	Card,
-	CardHeader,
-	CardTitle,
-	CardContent,
-	Separator,
-} from "@/components/ui";
+import React from "react";
+import { Pressable, ScrollView, Switch, View } from "react-native";
+import { Button, Card, CardContent, CardHeader, CardTitle, Separator, Text } from "@/components/ui";
+import { useTypedNavigation } from "@/navigation";
 
 function SettingsScreen(): React.JSX.Element {
 	const navigation = useTypedNavigation();
@@ -30,7 +22,9 @@ function SettingsScreen(): React.JSX.Element {
 		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
 			{/* Preferences Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">PREFERENCES</Text>
+				<Text variant="label" className="px-1">
+					PREFERENCES
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<SettingRow
@@ -70,7 +64,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* Storage Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">STORAGE</Text>
+				<Text variant="label" className="px-1">
+					STORAGE
+				</Text>
 				<Card>
 					<CardContent className="gap-4 py-4">
 						<View className="flex-row justify-between">
@@ -86,7 +82,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* About Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">ABOUT</Text>
+				<Text variant="label" className="px-1">
+					ABOUT
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<InfoRow icon="📱" title="Version" value="1.0.0" />
@@ -100,7 +98,9 @@ function SettingsScreen(): React.JSX.Element {
 
 			{/* Legal Section */}
 			<View className="gap-2">
-				<Text variant="label" className="px-1">LEGAL</Text>
+				<Text variant="label" className="px-1">
+					LEGAL
+				</Text>
 				<Card>
 					<CardContent className="p-0">
 						<LinkRow icon="📄" title="Terms of Service" />
@@ -150,35 +150,25 @@ function SettingRow({
 	);
 }
 
-function InfoRow({
-	icon,
-	title,
-	value,
-}: {
-	icon: string;
-	title: string;
-	value: string;
-}): React.JSX.Element {
+function InfoRow({ icon, title, value }: { icon: string; title: string; value: string }): React.JSX.Element {
 	return (
 		<View className="flex-row items-center px-4 py-3">
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text variant="muted">{value}</Text>
 		</View>
 	);
 }
 
-function LinkRow({
-	icon,
-	title,
-}: {
-	icon: string;
-	title: string;
-}): React.JSX.Element {
+function LinkRow({ icon, title }: { icon: string; title: string }): React.JSX.Element {
 	return (
 		<Pressable className="flex-row items-center px-4 py-3 active:bg-muted/50">
 			<Text className="text-xl mr-3">{icon}</Text>
-			<Text variant="large" className="flex-1">{title}</Text>
+			<Text variant="large" className="flex-1">
+				{title}
+			</Text>
 			<Text className="text-muted-foreground">›</Text>
 		</Pressable>
 	);

package/templates/index.ts

@@ -1,11 +0,0 @@
-/**
- * App Entry Point
- *
- * This file registers the root component with React Native's AppRegistry.
- * The app is wrapped with DevClientProvider for development tools.
- */
-
-import { AppRegistry } from "react-native";
-import { Root } from "./src";
-
-AppRegistry.registerComponent("<%= appName %>", () => Root);