@teardown/cli 2.0.74 → 2.0.75

package/package.json

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

package/src/cli/commands/dev.ts

@@ -2,11 +2,11 @@
  * Dev command - starts the Metro bundler
  */
 
-import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
 import { join, resolve } from "node:path";
 import chalk from "chalk";
 import { Command } from "commander";
+import { attachBundlerToForeground, startBundlerBackground } from "../../utils/bundler";
 import { getNavigationConfig } from "../../utils/metro-config";
 
 /**
@@ -86,37 +86,23 @@ export function createDevCommand(): Command {
 
 			console.log(chalk.blue("Starting Metro bundler...\n"));
 
-			const args = ["react-native", "start", "--port", options.port];
-
-			if (options.resetCache) {
-				args.push("--reset-cache");
-			}
-
-			if (options.verbose) {
-				args.push("--verbose");
-			}
-
-			const proc = spawn("npx", args, {
-				stdio: "inherit",
-				shell: true,
+			const metroProcess = startBundlerBackground({
+				port: options.port,
+				resetCache: options.resetCache,
+				verbose: options.verbose,
 				cwd: projectRoot,
-				env: {
-					...process.env,
-					// Ensure proper encoding for CocoaPods compatibility
-					LANG: "en_US.UTF-8",
-				},
 			});
 
-			proc.on("error", (error) => {
-				console.error(chalk.red(`Failed to start Metro: ${error.message}`));
-				process.exit(1);
-			});
+			// Handle cleanup on SIGINT/SIGTERM
+			const cleanup = () => {
+				metroProcess.kill("SIGTERM");
+				process.exit(0);
+			};
+			process.on("SIGINT", cleanup);
+			process.on("SIGTERM", cleanup);
 
-			proc.on("close", (code) => {
-				if (code !== 0 && code !== null) {
-					process.exit(code);
-				}
-			});
+			// Attach to foreground with interactive input (r, j, d, etc.)
+			attachBundlerToForeground(metroProcess);
 		});
 
 	return dev;

package/src/config/loader.ts

@@ -358,6 +358,11 @@ export default defineConfig({
     backgroundColor: '#FFFFFF',
   },
 
+  navigation: {
+    routesDir: './src/_routes',
+    generatedDir: './.teardown',
+  },
+
   plugins: [
     // Add your plugins here
   ],

package/src/config/schema.ts

@@ -108,6 +108,20 @@ export const PluginEntrySchema = z.union([
 	z.tuple([z.any()]),
 ]);
 
+/**
+ * Navigation configuration schema
+ */
+export const NavigationConfigSchema = z.object({
+	/** Path to routes directory relative to project root */
+	routesDir: z.string().optional().default("./src/_routes"),
+
+	/** Path for generated type files */
+	generatedDir: z.string().optional().default("./.teardown"),
+
+	/** Auto-populate new route files with template content */
+	autoTemplate: z.boolean().optional().default(true),
+});
+
 /**
  * Main Teardown configuration schema
  */
@@ -150,6 +164,9 @@ export const TeardownConfigSchema = z.object({
 
 	/** Environment variables to inject */
 	env: z.record(z.string(), z.string()).optional(),
+
+	/** Navigation configuration */
+	navigation: NavigationConfigSchema.optional(),
 });
 
 /**
@@ -241,3 +258,4 @@ export type TeardownConfig = z.infer<typeof TeardownConfigSchema>;
 export type iOSConfig = z.infer<typeof iOSConfigSchema>;
 export type AndroidConfig = z.infer<typeof AndroidConfigSchema>;
 export type SplashConfig = z.infer<typeof SplashConfigSchema>;
+export type NavigationConfig = z.infer<typeof NavigationConfigSchema>;

package/src/utils/metro-config.ts

@@ -1,14 +1,14 @@
 /**
  * Metro Config Parser
  *
- * Extracts navigation configuration from metro.config.js
+ * Extracts navigation configuration from teardown.config.ts or metro.config.js
  */
 
 import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 
 /**
- * Navigation options extracted from metro.config.js
+ * Navigation options extracted from config files
  */
 export interface NavigationConfig {
 	routesDir: string;
@@ -19,10 +19,20 @@ export interface NavigationConfig {
  * Default navigation configuration
  */
 const DEFAULT_CONFIG: NavigationConfig = {
-	routesDir: "./src/routes",
+	routesDir: "./src/_routes",
 	generatedDir: "./.teardown",
 };
 
+/**
+ * Config file names to search for teardown config (in order of priority)
+ */
+const TEARDOWN_CONFIG_FILES = [
+	"teardown.config.ts",
+	"teardown.config.js",
+	"teardown.config.mjs",
+	"launchpad.config.ts",
+];
+
 /**
  * Finds metro.config.js in the project
  */
@@ -78,14 +88,61 @@ export function parseNavigationConfig(projectRoot: string): NavigationConfig | n
 	}
 }
 
+/**
+ * Parses teardown.config.ts to extract navigation options
+ *
+ * This uses simple regex parsing since we can't safely evaluate the TS file at runtime.
+ */
+function parseTeardownConfig(projectRoot: string): NavigationConfig | null {
+	for (const fileName of TEARDOWN_CONFIG_FILES) {
+		const configPath = join(projectRoot, fileName);
+		if (existsSync(configPath)) {
+			try {
+				const content = readFileSync(configPath, "utf-8");
+
+				// Check if navigation config exists
+				if (!content.includes("navigation:") && !content.includes("navigation :")) {
+					continue;
+				}
+
+				// Extract routesDir using regex
+				const routesDirMatch = content.match(/routesDir:\s*['"]([^'"]+)['"]/);
+				const generatedDirMatch = content.match(/generatedDir:\s*['"]([^'"]+)['"]/);
+
+				// Only return if we found at least one navigation property
+				if (routesDirMatch || generatedDirMatch) {
+					return {
+						routesDir: routesDirMatch?.[1] ?? DEFAULT_CONFIG.routesDir,
+						generatedDir: generatedDirMatch?.[1] ?? DEFAULT_CONFIG.generatedDir,
+					};
+				}
+			} catch {
+				// Ignore read errors and try next config file
+			}
+		}
+	}
+	return null;
+}
+
 /**
  * Gets navigation config for a project, with fallbacks
+ *
+ * Priority:
+ * 1. teardown.config.ts navigation section
+ * 2. metro.config.js withTeardownNavigation options
+ * 3. Default config if routes directory exists
  */
 export function getNavigationConfig(projectRoot: string): NavigationConfig | null {
-	// Try to parse from metro.config.js first
-	const parsedConfig = parseNavigationConfig(projectRoot);
-	if (parsedConfig) {
-		return parsedConfig;
+	// Try to parse from teardown.config.ts first (single source of truth)
+	const teardownConfig = parseTeardownConfig(projectRoot);
+	if (teardownConfig) {
+		return teardownConfig;
+	}
+
+	// Fallback: parse from metro.config.js (backwards compatibility)
+	const metroConfig = parseNavigationConfig(projectRoot);
+	if (metroConfig) {
+		return metroConfig;
 	}
 
 	// Fallback: check if default routes dir exists
@@ -94,14 +151,5 @@ export function getNavigationConfig(projectRoot: string): NavigationConfig | nul
 		return DEFAULT_CONFIG;
 	}
 
-	// Try alternate common location
-	const altRoutesPath = join(projectRoot, "src/_routes");
-	if (existsSync(altRoutesPath)) {
-		return {
-			routesDir: "./src/_routes",
-			generatedDir: "./.teardown",
-		};
-	}
-
 	return null;
 }

package/templates/metro.config.js

@@ -11,12 +11,11 @@ const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
  * - Monorepo/workspace detection and watch folder configuration
  * - Bun-specific handling (.bun directory blocking)
  *
- *
  * withTeardownNavigation() automatically handles:
  * - Type-safe route generation from file-based routes
  * - Deep linking configuration generation
  * - Hot-reload support via file watching in development
- *
+ * - Reads routesDir/generatedDir from teardown.config.ts navigation section
  *
  * withUniwindConfig() enables:
  * - Tailwind CSS 4 support for React Native
@@ -29,11 +28,8 @@ const config = {};
 
 const teardownConfig = withTeardown(mergeConfig(getDefaultConfig(__dirname), config));
 
-const navigationConfig = withTeardownNavigation(teardownConfig, {
-	routesDir: "./src/_routes",
-	generatedDir: "./.teardown",
-	verbose: false,
-});
+// Navigation config is read from teardown.config.ts navigation section
+const navigationConfig = withTeardownNavigation(teardownConfig);
 
 module.exports = withUniwindConfig(navigationConfig, {
 	cssEntryFile: "./src/global.css",

package/templates/src/_routes/home.tsx

@@ -51,7 +51,7 @@ function HomeScreen() {
 					<Card.Title>Getting Started</Card.Title>
 					<Card.Description>
 						1. Explore the components in src/components/ui/{"\n"}
-						2. Add new routes in src/routes/{"\n"}
+						2. Add new routes in src/_routes/{"\n"}
 						3. Customize the theme in global.css{"\n"}
 						4. Build your app!
 					</Card.Description>

package/templates/src/routes/home.tsx

@@ -1,94 +0,0 @@
-/**
- * Home Screen
- *
- * The main landing screen of the app.
- */
-
-import { defineScreen } from "@teardown/navigation/primitives";
-import type React from "react";
-import { ScrollView, Text, View } from "react-native";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { APP_NAME } from "@/core/constants";
-
-function HomeScreen(): React.JSX.Element {
-	return (
-		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
-			{/* Hero Section */}
-			<View className="items-center gap-4 py-8">
-				<View className="h-20 w-20 items-center justify-center rounded-2xl bg-primary">
-					<Text className="text-3xl font-bold text-primary-foreground">T</Text>
-				</View>
-				<View className="items-center gap-2">
-					<Text className="text-2xl font-bold text-foreground text-center">Welcome to {APP_NAME}</Text>
-					<Text className="text-base text-muted-foreground text-center">Your React Native app is ready to go</Text>
-				</View>
-			</View>
-
-			{/* Quick Actions */}
-			<Card>
-				<Card.Body className="gap-3">
-					<Card.Title>Quick Actions</Card.Title>
-					<Button onPress={() => console.log("Primary action")} fullWidth>
-						Get Started
-					</Button>
-					<Button variant="bordered" onPress={() => console.log("Secondary action")} fullWidth>
-						Learn More
-					</Button>
-				</Card.Body>
-			</Card>
-
-			{/* Features */}
-			<View className="gap-4">
-				<Text className="text-lg font-semibold text-foreground">Features</Text>
-				<FeatureCard icon="🔒" title="Type-Safe Navigation" description="Routes are fully typed with TypeScript" />
-				<FeatureCard icon="📁" title="File-Based Routing" description="Routes generated from file structure" />
-				<FeatureCard icon="🎨" title="HeroUI Components" description="Beautiful pre-built UI components" />
-			</View>
-
-			{/* Getting Started */}
-			<Card className="bg-primary/5 border-primary/20">
-				<Card.Body className="py-4">
-					<Card.Title>Getting Started</Card.Title>
-					<Card.Description>
-						1. Explore the components in src/components/ui/{"\n"}
-						2. Add new routes in src/routes/{"\n"}
-						3. Customize the theme in global.css{"\n"}
-						4. Build your app!
-					</Card.Description>
-				</Card.Body>
-			</Card>
-		</ScrollView>
-	);
-}
-
-function FeatureCard({
-	icon,
-	title,
-	description,
-}: {
-	icon: string;
-	title: string;
-	description: string;
-}): React.JSX.Element {
-	return (
-		<Card>
-			<Card.Body className="flex-row items-center gap-4">
-				<View className="h-12 w-12 items-center justify-center rounded-xl bg-muted">
-					<Text className="text-2xl">{icon}</Text>
-				</View>
-				<View className="flex-1">
-					<Card.Title>{title}</Card.Title>
-					<Card.Description>{description}</Card.Description>
-				</View>
-			</Card.Body>
-		</Card>
-	);
-}
-
-export default defineScreen({
-	component: HomeScreen,
-	options: {
-		title: "Home",
-	},
-});