@teardown/cli 2.0.72 → 2.0.74

package/package.json

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

package/src/cli/commands/dev.ts

@@ -4,9 +4,10 @@
 
 import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
-import { join } from "node:path";
+import { join, resolve } from "node:path";
 import chalk from "chalk";
 import { Command } from "commander";
+import { getNavigationConfig } from "../../utils/metro-config";
 
 /**
  * Check if a metro.config.js file exists in the project
@@ -48,6 +49,41 @@ export function createDevCommand(): Command {
 				console.log(chalk.gray("Tip: Add @teardown/metro-config for 36x faster builds\n"));
 			}
 
+			// Pre-generate routes if navigation-metro is installed
+			const navigationMetroPath = join(projectRoot, "node_modules/@teardown/navigation-metro");
+			const navConfig = getNavigationConfig(projectRoot);
+
+			if (existsSync(navigationMetroPath) && navConfig) {
+				const routesDir = resolve(projectRoot, navConfig.routesDir);
+				const generatedDir = resolve(projectRoot, navConfig.generatedDir);
+
+				if (existsSync(routesDir)) {
+					try {
+						// Dynamic require from user's node_modules
+						// eslint-disable-next-line @typescript-eslint/no-require-imports
+						const { generateAllRouteFiles } = require(navigationMetroPath) as {
+							generateAllRouteFiles: (opts: {
+								routesDir: string;
+								generatedDir: string;
+								prefixes: string[];
+								verbose: boolean;
+							}) => void;
+						};
+						generateAllRouteFiles({
+							routesDir,
+							generatedDir,
+							prefixes: [],
+							verbose: options.verbose,
+						});
+						if (options.verbose) {
+							console.log(chalk.gray("Generated route types\n"));
+						}
+					} catch {
+						// Ignore - Metro will regenerate
+					}
+				}
+			}
+
 			console.log(chalk.blue("Starting Metro bundler...\n"));
 
 			const args = ["react-native", "start", "--port", options.port];

package/src/cli/commands/run.ts

@@ -12,7 +12,7 @@
 
 import { type ChildProcess, exec, spawn } from "node:child_process";
 import { existsSync } from "node:fs";
-import { join } from "node:path";
+import { join, resolve } from "node:path";
 import { createInterface } from "node:readline";
 import { promisify } from "node:util";
 import chalk from "chalk";
@@ -20,6 +20,7 @@ import { Command } from "commander";
 import ora from "ora";
 import { attachBundlerToForeground, startBundlerBackground, waitForBundlerReady } from "../../utils/bundler";
 import { getAppScheme, launchAppWithBundler } from "../../utils/deep-link";
+import { getNavigationConfig } from "../../utils/metro-config";
 
 const execAsync = promisify(exec);
 
@@ -336,6 +337,40 @@ export function createRunCommand(): Command {
 
 				// Start Metro bundler FIRST (unless --no-bundler or --release)
 				if (options.bundler && !options.release) {
+					// Pre-generate routes if navigation-metro is installed
+					const projectRoot = process.cwd();
+					const navigationMetroPath = join(projectRoot, "node_modules/@teardown/navigation-metro");
+					const navConfig = getNavigationConfig(projectRoot);
+
+					if (existsSync(navigationMetroPath) && navConfig) {
+						const routesDir = resolve(projectRoot, navConfig.routesDir);
+						const generatedDir = resolve(projectRoot, navConfig.generatedDir);
+
+						if (existsSync(routesDir)) {
+							try {
+								// Dynamic require from user's node_modules
+								// eslint-disable-next-line @typescript-eslint/no-require-imports
+								const { generateAllRouteFiles } = require(navigationMetroPath) as {
+									generateAllRouteFiles: (opts: {
+										routesDir: string;
+										generatedDir: string;
+										prefixes: string[];
+										verbose: boolean;
+									}) => void;
+								};
+								const slug = getAppScheme(projectRoot) || "app";
+								generateAllRouteFiles({
+									routesDir,
+									generatedDir,
+									prefixes: [`${slug}://`],
+									verbose: false,
+								});
+							} catch {
+								// Ignore - Metro will regenerate
+							}
+						}
+					}
+
 					metroProcess = await startMetroAndWait(options.port, platform);
 				}
 

package/src/utils/bundler.ts

@@ -85,7 +85,7 @@ export function startBundlerBackground(options: StartBundlerOptions = {}): Child
 	const proc = spawn("npx", args, {
 		cwd,
 		shell: true,
-		stdio: ["ignore", "pipe", "pipe"],
+		stdio: ["pipe", "pipe", "pipe"],
 		detached: false,
 		env: {
 			...process.env,
@@ -239,16 +239,41 @@ export async function killBundler(proc: ChildProcess, timeoutMs = 5000): Promise
 }
 
 /**
- * Attach bundler process to foreground (pipe stdout/stderr)
+ * Attach bundler process to foreground (pipe stdin/stdout/stderr)
+ *
+ * Enables keyboard shortcuts like 'r' for reload and 'j' for debugger.
  *
  * @param proc - Metro process
  */
 export function attachBundlerToForeground(proc: ChildProcess): void {
+	// Pipe output
 	proc.stdout?.pipe(process.stdout);
 	proc.stderr?.pipe(process.stderr);
 
+	// Connect stdin for keyboard shortcuts (r, j, d, etc.)
+	if (proc.stdin && process.stdin.isTTY) {
+		// Set raw mode to capture single keypresses
+		process.stdin.setRawMode(true);
+		process.stdin.resume();
+		process.stdin.pipe(proc.stdin);
+
+		// Handle Ctrl+C to exit gracefully
+		process.stdin.on("data", (data) => {
+			// Check for Ctrl+C (0x03)
+			if (data[0] === 0x03) {
+				proc.kill("SIGTERM");
+				process.exit(0);
+			}
+		});
+	}
+
 	// Handle process exit
 	proc.on("close", (code) => {
+		// Restore terminal settings
+		if (process.stdin.isTTY) {
+			process.stdin.setRawMode(false);
+		}
+
 		if (code !== 0 && code !== null) {
 			console.error(chalk.red(`Metro bundler exited with code ${code}`));
 		}

package/src/utils/index.ts

@@ -41,5 +41,7 @@ export {
 	formatKeyValue,
 	formatList,
 } from "./logger";
+export type { NavigationConfig } from "./metro-config";
+export { getNavigationConfig, parseNavigationConfig } from "./metro-config";
 export type { ReporterStep, StepStatus, TerminalReporterConfig } from "./terminal-reporter";
 export { createReporter, TerminalReporter } from "./terminal-reporter";

package/src/utils/metro-config.ts

@@ -0,0 +1,107 @@
+/**
+ * Metro Config Parser
+ *
+ * Extracts navigation configuration from metro.config.js
+ */
+
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+/**
+ * Navigation options extracted from metro.config.js
+ */
+export interface NavigationConfig {
+	routesDir: string;
+	generatedDir: string;
+}
+
+/**
+ * Default navigation configuration
+ */
+const DEFAULT_CONFIG: NavigationConfig = {
+	routesDir: "./src/routes",
+	generatedDir: "./.teardown",
+};
+
+/**
+ * Finds metro.config.js in the project
+ */
+function findMetroConfig(projectRoot: string): string | null {
+	const configNames = ["metro.config.js", "metro.config.cjs", "metro.config.mjs"];
+
+	for (const name of configNames) {
+		const configPath = join(projectRoot, name);
+		if (existsSync(configPath)) {
+			return configPath;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Parses metro.config.js to extract withTeardownNavigation options
+ *
+ * This uses simple regex parsing since we can't safely evaluate the JS file.
+ * It looks for patterns like:
+ *   withTeardownNavigation(config, { routesDir: "./src/_routes", generatedDir: "./.teardown" })
+ */
+export function parseNavigationConfig(projectRoot: string): NavigationConfig | null {
+	const configPath = findMetroConfig(projectRoot);
+	if (!configPath) {
+		return null;
+	}
+
+	try {
+		const content = readFileSync(configPath, "utf-8");
+
+		// Check if withTeardownNavigation is used
+		if (!content.includes("withTeardownNavigation")) {
+			return null;
+		}
+
+		// Extract routesDir using regex
+		// Matches: routesDir: "./src/_routes" or routesDir: './src/_routes'
+		const routesDirMatch = content.match(/routesDir:\s*['"]([^'"]+)['"]/);
+		const routesDir = routesDirMatch ? routesDirMatch[1] : DEFAULT_CONFIG.routesDir;
+
+		// Extract generatedDir using regex
+		const generatedDirMatch = content.match(/generatedDir:\s*['"]([^'"]+)['"]/);
+		const generatedDir = generatedDirMatch ? generatedDirMatch[1] : DEFAULT_CONFIG.generatedDir;
+
+		return {
+			routesDir,
+			generatedDir,
+		};
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Gets navigation config for a project, with fallbacks
+ */
+export function getNavigationConfig(projectRoot: string): NavigationConfig | null {
+	// Try to parse from metro.config.js first
+	const parsedConfig = parseNavigationConfig(projectRoot);
+	if (parsedConfig) {
+		return parsedConfig;
+	}
+
+	// Fallback: check if default routes dir exists
+	const defaultRoutesPath = join(projectRoot, DEFAULT_CONFIG.routesDir);
+	if (existsSync(defaultRoutesPath)) {
+		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/.teardown/linking.generated.ts

@@ -0,0 +1,11 @@
+// Auto-generated by @teardown/navigation
+import type { LinkingOptions } from "@react-navigation/native";
+import type { RouteParams } from "./routes.generated";
+
+export const generatedLinkingConfig: LinkingOptions<RouteParams>["config"] = {
+	screens: {
+		"/home": "home",
+	},
+};
+
+export const defaultPrefixes: string[] = ["app://"];

package/templates/.teardown/manifest.json

@@ -0,0 +1,18 @@
+{
+  "generatedAt": "2026-01-31T19:48:52.201Z",
+  "routeCount": 1,
+  "routes": [
+    {
+      "path": "",
+      "file": "_layout.tsx",
+      "params": [],
+      "layoutType": "stack"
+    },
+    {
+      "path": "/home",
+      "file": "home.tsx",
+      "params": [],
+      "layoutType": "none"
+    }
+  ]
+}

package/templates/.teardown/register.d.ts

@@ -0,0 +1,9 @@
+// Auto-generated by @teardown/navigation
+import type { RouteParams, RoutePath } from "./routes.generated";
+
+declare module '@teardown/navigation' {
+	interface Register {
+		routeParams: RouteParams;
+		routePath: RoutePath;
+	}
+}

package/templates/.teardown/routeTree.generated.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+// @ts-nocheck
+
+// Auto-generated by @teardown/navigation
+// Do not edit this file directly
+// Generated at: 2026-01-31T19:48:52.202Z
+
+import type { NavigatorNode } from "@teardown/navigation";
+
+import layout from "../src/_routes/_layout";
+import home from "../src/_routes/home";
+
+export const routeTree: NavigatorNode =
+{
+	type: "stack",
+	layout: layout,
+	screens: {
+		"home": {
+			screen: home,
+			path: "/home",
+		},
+	},
+};
+
+// Flat screens export for backwards compatibility
+export const screens = {
+	"/home": home,
+} as const;
+
+export const layouts = {
+	"src__routes": layout,
+} as const;
+
+export type Screens = typeof screens;
+export type Layouts = typeof layouts;
+export type RouteTreeType = typeof routeTree;
+
+export const routePaths = [
+	"/home",
+] as const;
+
+export type RoutePath = (typeof routePaths)[number];

package/templates/.teardown/routes.generated.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @teardown/navigation
+// Do not edit this file directly
+// Generated at: 2026-01-31T19:48:52.201Z
+
+export interface RouteParams {
+	"/home": undefined;
+}
+
+export type RoutePath = keyof RouteParams;
+
+export type ParamsFor<T extends RoutePath> = RouteParams[T];
+
+export type RouteWithParams = {
+	[K in RoutePath]: RouteParams[K] extends undefined
+		? { path: K }
+		: { path: K; params: RouteParams[K] };
+}[RoutePath];
+
+export type NavigatorType = "stack" | "tabs" | "drawer";

package/templates/src/_routes/home.tsx

@@ -5,13 +5,12 @@
  */
 
 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 {
+function HomeScreen() {
 	return (
 		<ScrollView className="flex-1 bg-background" contentContainerClassName="p-6 gap-6">
 			{/* Hero Section */}
@@ -20,12 +19,8 @@ function HomeScreen(): React.JSX.Element {
 					<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>
+					<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>
 
@@ -45,21 +40,9 @@ function HomeScreen(): React.JSX.Element {
 			{/* 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"
-				/>
+				<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 */}
@@ -78,15 +61,7 @@ function HomeScreen(): React.JSX.Element {
 	);
 }
 
-function FeatureCard({
-	icon,
-	title,
-	description,
-}: {
-	icon: string;
-	title: string;
-	description: string;
-}): React.JSX.Element {
+function FeatureCard({ icon, title, description }: { icon: string; title: string; description: string }) {
 	return (
 		<Card>
 			<Card.Body className="flex-row items-center gap-4">

package/templates/src/app/index.tsx

@@ -10,13 +10,11 @@
 
 import "../global.css";
 
-import type React from "react";
-import { StatusBar, View } from "react-native";
-import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Router } from "@/navigation";
 import { AppProviders } from "@/providers";
 
-export function App(): React.JSX.Element {
+export function App() {
 	return (
 		<SafeAreaProvider>
 			<AppProviders>

package/templates/src/components/ui/text.tsx

@@ -97,17 +97,13 @@ const Text = (props: TextProps) => {
 				invert: invert,
 			}),
 			textClassName,
-			className,
+			className
 		);
 	}, [variant, color, invert, textClassName, className]);
 
 	return (
 		<TextClassContext.Provider value={classNames}>
-			<Animated.Text
-				{...otherProps}
-				className={classNames}
-				allowFontScaling={false}
-			/>
+			<Animated.Text {...otherProps} className={classNames} allowFontScaling={false} />
 		</TextClassContext.Provider>
 	);
 };

package/templates/src/providers/app.provider.tsx

@@ -6,14 +6,14 @@
  */
 
 import { HeroUINativeProvider } from "heroui-native";
-import type React from "react";
+import type { ReactNode } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 interface AppProvidersProps {
-	children: React.ReactNode;
+	children: ReactNode;
 }
 
-export function AppProviders({ children }: AppProvidersProps): React.JSX.Element {
+export function AppProviders({ children }: AppProvidersProps) {
 	return (
 		<GestureHandlerRootView style={{ flex: 1 }}>
 			<HeroUINativeProvider>{children}</HeroUINativeProvider>

package/templates/src/routes/home.tsx

@@ -0,0 +1,94 @@
+/**
+ * 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",
+	},
+});