@teardown/cli 2.0.74 → 2.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@teardown/cli",
-	"version": "2.0.74",
+	"version": "2.0.76",
 	"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.76",
 		"@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 { startBundlerBackground } from "../../utils/bundler";
 import { getNavigationConfig } from "../../utils/metro-config";
 
 /**
@@ -86,37 +86,18 @@ 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,
+			// Start Metro with interactive mode enabled - inherits stdio directly
+			// so Metro receives the TTY and keyboard shortcuts (r, j, d) work
+			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",
-				},
+				interactive: true,
 			});
 
-			proc.on("error", (error) => {
-				console.error(chalk.red(`Failed to start Metro: ${error.message}`));
-				process.exit(1);
-			});
-
-			proc.on("close", (code) => {
-				if (code !== 0 && code !== null) {
-					process.exit(code);
-				}
-			});
+			// With inherited stdio, the process handles its own signals
+			// We just need to keep the parent process alive
 		});
 
 	return dev;

package/src/cli/commands/run.ts

@@ -409,10 +409,13 @@ async function startMetroAndWait(port: string, _platform: "ios" | "android"): Pr
 
 	console.log(chalk.blue(`\nStarting Metro bundler on port ${port}...`));
 
+	// Start bundler in non-interactive mode (CI=true suppresses warning)
+	// We'll attach to foreground later after build completes
 	const metroProcess = startBundlerBackground({
 		port,
 		resetCache: true,
 		cwd: process.cwd(),
+		interactive: false,
 	});
 
 	// Wait for bundler to be ready with progress updates

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/bundler.ts

@@ -47,6 +47,8 @@ export interface StartBundlerOptions {
 	cwd?: string;
 	/** Whether to enable verbose logging */
 	verbose?: boolean;
+	/** Whether to run in interactive mode (inherit TTY for keyboard shortcuts) */
+	interactive?: boolean;
 }
 
 /**
@@ -70,7 +72,13 @@ export interface StartBundlerOptions {
  * ```
  */
 export function startBundlerBackground(options: StartBundlerOptions = {}): ChildProcess {
-	const { port = DEFAULT_BUNDLER_PORT, resetCache = false, cwd = process.cwd(), verbose = false } = options;
+	const {
+		port = DEFAULT_BUNDLER_PORT,
+		resetCache = false,
+		cwd = process.cwd(),
+		verbose = false,
+		interactive = false,
+	} = options;
 
 	const args = ["react-native", "start", "--port", String(port)];
 
@@ -82,17 +90,27 @@ export function startBundlerBackground(options: StartBundlerOptions = {}): Child
 		args.push("--verbose");
 	}
 
+	// Build environment variables
+	const env: NodeJS.ProcessEnv = {
+		...process.env,
+		LANG: "en_US.UTF-8",
+		// Force colors in Metro output
+		FORCE_COLOR: "1",
+	};
+
+	// When not interactive, set CI=true to suppress "Interactive mode is not supported" warning
+	if (!interactive) {
+		env.CI = "true";
+	}
+
 	const proc = spawn("npx", args, {
 		cwd,
 		shell: true,
-		stdio: ["pipe", "pipe", "pipe"],
+		// When interactive, inherit stdio to pass TTY directly to Metro for keyboard shortcuts
+		// When not interactive, use pipes so we can capture output and attach later
+		stdio: interactive ? "inherit" : ["pipe", "pipe", "pipe"],
 		detached: false,
-		env: {
-			...process.env,
-			LANG: "en_US.UTF-8",
-			// Force colors in Metro output
-			FORCE_COLOR: "1",
-		},
+		env,
 	});
 
 	// Handle process errors

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/navigation/router.tsx

@@ -6,8 +6,8 @@
  */
 
 import { createTeardownRouter } from "@teardown/navigation";
+import { defaultPrefixes, generatedLinkingConfig } from "../../.teardown/linking.generated";
 import { routeTree } from "../../.teardown/routeTree.generated";
-import { generatedLinkingConfig, defaultPrefixes } from "../../.teardown/linking.generated";
 
 /**
  * Theme colors for navigation styling

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",
-	},
-});