tvi-cli 0.1.4

package/templates/examples/todo/web/svelte/src/routes/todos/+page.svelte.hbs

@@ -0,0 +1,317 @@
+{{#if (eq backend "convex")}}
+<script lang="ts">
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@{{projectName}}/backend/convex/_generated/api';
+	import type { Id } from '@{{projectName}}/backend/convex/_generated/dataModel';
+
+	let newTodoText = $state('');
+	let isAdding = $state(false);
+	let addError = $state<Error | null>(null);
+	let togglingId = $state<Id<'todos'> | null>(null);
+	let toggleError = $state<Error | null>(null);
+	let deletingId = $state<Id<'todos'> | null>(null);
+	let deleteError = $state<Error | null>(null);
+
+	const client = useConvexClient();
+
+	const todosQuery = useQuery(api.todos.getAll, {});
+
+	async function handleAddTodo(event: SubmitEvent) {
+		event.preventDefault();
+		const text = newTodoText.trim();
+		if (!text || isAdding) return;
+
+		isAdding = true;
+		addError = null;
+		try {
+			await client.mutation(api.todos.create, { text });
+			newTodoText = '';
+		} catch (err) {
+			console.error('Failed to add todo:', err);
+			addError = err instanceof Error ? err : new Error(String(err));
+		} finally {
+			isAdding = false;
+		}
+	}
+
+	async function handleToggleTodo(id: Id<'todos'>, completed: boolean) {
+		if (togglingId === id || deletingId === id) return;
+
+		togglingId = id;
+		toggleError = null;
+		try {
+			await client.mutation(api.todos.toggle, { id, completed: !completed });
+		} catch (err) {
+			console.error('Failed to toggle todo:', err);
+			toggleError = err instanceof Error ? err : new Error(String(err));
+		} finally {
+			if (togglingId === id) {
+				togglingId = null;
+			}
+		}
+	}
+
+	async function handleDeleteTodo(id: Id<'todos'>) {
+		if (togglingId === id || deletingId === id) return;
+
+		deletingId = id;
+		deleteError = null;
+		try {
+			await client.mutation(api.todos.deleteTodo, { id });
+		} catch (err) {
+			console.error('Failed to delete todo:', err);
+			deleteError = err instanceof Error ? err : new Error(String(err));
+		} finally {
+			if (deletingId === id) {
+				deletingId = null;
+			}
+		}
+	}
+
+	const canAdd = $derived(!isAdding && newTodoText.trim().length > 0);
+	const isLoadingTodos = $derived(todosQuery.isLoading);
+	const todos = $derived(todosQuery.data ?? []);
+	const hasTodos = $derived(todos.length > 0);
+
+</script>
+
+<div class="p-4">
+	<h1 class="text-xl mb-4">Todos (Convex)</h1>
+
+	<form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
+		<input
+			type="text"
+			bind:value={newTodoText}
+			placeholder="New task..."
+			disabled={isAdding}
+			class="p-1 flex-grow"
+		/>
+		<button
+			type="submit"
+			disabled={!canAdd}
+			class="bg-blue-500 text-white px-3 py-1 rounded disabled:opacity-50"
+		>
+			{#if isAdding}Adding...{:else}Add{/if}
+		</button>
+	</form>
+
+	{#if isLoadingTodos}
+		<p>Loading...</p>
+	{:else if !hasTodos}
+		<p>No todos yet.</p>
+	{:else}
+		<ul class="space-y-1">
+			{#each todos as todo (todo._id)}
+				{@const isTogglingThis = togglingId === todo._id}
+				{@const isDeletingThis = deletingId === todo._id}
+				{@const isDisabled = isTogglingThis || isDeletingThis}
+				<li
+					class="flex items-center justify-between p-2"
+					class:opacity-50={isDisabled}
+				>
+					<div class="flex items-center gap-2">
+						<input
+							type="checkbox"
+							id={`todo-${todo._id}`}
+							checked={todo.completed}
+							onchange={() => handleToggleTodo(todo._id, todo.completed)}
+							disabled={isDisabled}
+						/>
+						<label
+							for={`todo-${todo._id}`}
+							class:line-through={todo.completed}
+						>
+							{todo.text}
+						</label>
+					</div>
+					<button
+						type="button"
+						onclick={() => handleDeleteTodo(todo._id)}
+						disabled={isDisabled}
+						aria-label="Delete todo"
+						class="text-red-500 px-1 disabled:opacity-50"
+					>
+						{#if isDeletingThis}Deleting...{:else}X{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if todosQuery.error}
+		<p class="mt-4 text-red-500">
+			Error loading: {todosQuery.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if addError}
+		<p class="mt-4 text-red-500">
+			Error adding: {addError.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if toggleError}
+		<p class="mt-4 text-red-500">
+			Error updating: {toggleError.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if deleteError}
+		<p class="mt-4 text-red-500">
+			Error deleting: {deleteError.message ?? 'Unknown error'}
+		</p>
+	{/if}
+</div>
+{{else}}
+<script lang="ts">
+	{{#if (eq api "orpc")}}
+	import { orpc } from '$lib/orpc';
+	{{/if}}
+	import { createQuery, createMutation } from '@tanstack/svelte-query';
+
+	let newTodoText = $state('');
+
+	{{#if (eq api "orpc")}}
+	const todosQuery = createQuery(orpc.todo.getAll.queryOptions());
+
+	const addMutation = createMutation(
+		orpc.todo.create.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+				newTodoText = '';
+			},
+			onError: (error) => {
+				console.error('Failed to create todo:', error?.message ?? error);
+			},
+		})
+	);
+
+	const toggleMutation = createMutation(
+		orpc.todo.toggle.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+			},
+			onError: (error) => {
+				console.error('Failed to toggle todo:', error?.message ?? error);
+			},
+		})
+	);
+
+	const deleteMutation = createMutation(
+		orpc.todo.delete.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+			},
+			onError: (error) => {
+				console.error('Failed to delete todo:', error?.message ?? error);
+			},
+		})
+	);
+	{{/if}}
+
+	function handleAddTodo(event: SubmitEvent) {
+		event.preventDefault();
+		const text = newTodoText.trim();
+		if (text) {
+			$addMutation.mutate({ text });
+		}
+	}
+
+	function handleToggleTodo(id: number, completed: boolean) {
+		$toggleMutation.mutate({ id, completed: !completed });
+	}
+
+	function handleDeleteTodo(id: number) {
+		$deleteMutation.mutate({ id });
+	}
+
+	const isAdding = $derived($addMutation.isPending);
+	const canAdd = $derived(!isAdding && newTodoText.trim().length > 0);
+	const isLoadingTodos = $derived($todosQuery.isLoading);
+	const todos = $derived($todosQuery.data ?? []);
+	const hasTodos = $derived(todos.length > 0);
+
+</script>
+
+<div class="p-4">
+	<h1 class="text-xl mb-4">Todos{{#if (eq api "orpc")}} (oRPC){{/if}}</h1>
+
+	<form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
+		<input
+			type="text"
+			bind:value={newTodoText}
+			placeholder="New task..."
+			disabled={isAdding}
+			class=" p-1 flex-grow"
+		/>
+		<button
+			type="submit"
+			disabled={!canAdd}
+			class="bg-blue-500 text-white px-3 py-1 rounded disabled:opacity-50"
+		>
+			{#if isAdding}Adding...{:else}Add{/if}
+		</button>
+	</form>
+
+	{#if isLoadingTodos}
+		<p>Loading...</p>
+	{:else if !hasTodos}
+		<p>No todos yet.</p>
+	{:else}
+		<ul class="space-y-1">
+			{#each todos as todo (todo.id)}
+				{@const isToggling = $toggleMutation.isPending && $toggleMutation.variables?.id === todo.id}
+				{@const isDeleting = $deleteMutation.isPending && $deleteMutation.variables?.id === todo.id}
+				{@const isDisabled = isToggling || isDeleting}
+				<li
+					class="flex items-center justify-between p-2 "
+					class:opacity-50={isDisabled}
+				>
+					<div class="flex items-center gap-2">
+						<input
+							type="checkbox"
+							id={`todo-${todo.id}`}
+							checked={todo.completed}
+							onchange={() => handleToggleTodo(todo.id, todo.completed)}
+							disabled={isDisabled}
+						/>
+						<label
+							for={`todo-${todo.id}`}
+							class:line-through={todo.completed}
+						>
+							{todo.text}
+						</label>
+					</div>
+					<button
+						type="button"
+						onclick={() => handleDeleteTodo(todo.id)}
+						disabled={isDisabled}
+						aria-label="Delete todo"
+						class="text-red-500 px-1 disabled:opacity-50"
+					>
+						{#if isDeleting}Deleting...{:else}X{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if $todosQuery.isError}
+		<p class="mt-4 text-red-500">
+			Error loading: {$todosQuery.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $addMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error adding: {$addMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $toggleMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error updating: {$toggleMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $deleteMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error deleting: {$deleteMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+</div>
+{{/if}}

package/templates/extras/_npmrc.hbs

@@ -0,0 +1,5 @@
+node-linker=hoisted
+{{#if (includes frontend "nuxt")}}
+shamefully-hoist=true
+strict-peer-dependencies=false
+{{/if}}

package/templates/extras/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"

package/templates/frontend/native/nativewind/_gitignore

@@ -0,0 +1,25 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+# expo router
+expo-env.d.ts
+
+.env
+.cache
+
+ios
+android
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

package/templates/frontend/native/nativewind/app/(drawer)/(tabs)/_layout.tsx

@@ -0,0 +1,46 @@
+import { TabBarIcon } from "@/components/tabbar-icon";
+import { useColorScheme } from "@/lib/use-color-scheme";
+import { Tabs } from "expo-router";
+
+export default function TabLayout() {
+  const { isDarkColorScheme } = useColorScheme();
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: isDarkColorScheme
+          ? "hsl(217.2 91.2% 59.8%)"
+          : "hsl(221.2 83.2% 53.3%)",
+        tabBarInactiveTintColor: isDarkColorScheme
+          ? "hsl(215 20.2% 65.1%)"
+          : "hsl(215.4 16.3% 46.9%)",
+        tabBarStyle: {
+          backgroundColor: isDarkColorScheme
+            ? "hsl(222.2 84% 4.9%)"
+            : "hsl(0 0% 100%)",
+          borderTopColor: isDarkColorScheme
+            ? "hsl(217.2 32.6% 17.5%)"
+            : "hsl(214.3 31.8% 91.4%)",
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: "Explore",
+          tabBarIcon: ({ color }) => (
+            <TabBarIcon name="compass" color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

package/templates/frontend/native/nativewind/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,19 @@
+import { Container } from "@/components/container";
+import { ScrollView, Text, View } from "react-native";
+
+export default function TabOne() {
+  return (
+    <Container>
+      <ScrollView className="flex-1 p-6">
+        <View className="py-8">
+          <Text className="text-3xl font-bold text-foreground mb-2">
+            Tab One
+          </Text>
+          <Text className="text-lg text-muted-foreground">
+            Explore the first section of your app
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}

package/templates/frontend/native/nativewind/app/(drawer)/(tabs)/two.tsx

@@ -0,0 +1,19 @@
+import { Container } from "@/components/container";
+import { ScrollView, Text, View } from "react-native";
+
+export default function TabTwo() {
+  return (
+    <Container>
+      <ScrollView className="flex-1 p-6">
+        <View className="py-8">
+          <Text className="text-3xl font-bold text-foreground mb-2">
+            Tab Two
+          </Text>
+          <Text className="text-lg text-muted-foreground">
+            Discover more features and content
+          </Text>
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}

package/templates/frontend/native/nativewind/app/(drawer)/_layout.tsx.hbs

@@ -0,0 +1,67 @@
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { Link } from "expo-router";
+import { Drawer } from "expo-router/drawer";
+
+import { HeaderButton } from "@/components/header-button";
+
+const DrawerLayout = () => {
+  return (
+    <Drawer>
+      <Drawer.Screen
+        name="index"
+        options=\{{
+          headerTitle: "Home",
+          drawerLabel: "Home",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Drawer.Screen
+        name="(tabs)"
+        options=\{{
+          headerTitle: "Tabs",
+          drawerLabel: "Tabs",
+          drawerIcon: ({ size, color }) => (
+            <MaterialIcons name="border-bottom" size={size} color={color} />
+          ),
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <HeaderButton />
+            </Link>
+          ),
+        }}
+      />
+      {{#if (includes examples "todo")}}
+      <Drawer.Screen
+        name="todos"
+        options=\{{
+          headerTitle: "Todos",
+          drawerLabel: "Todos",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons name="checkbox-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      {{/if}}
+      {{#if (includes examples "ai")}}
+      <Drawer.Screen
+        name="ai"
+        options=\{{
+          headerTitle: "AI",
+          drawerLabel: "AI",
+          drawerIcon: ({ size, color }) => (
+            <Ionicons
+              name="chatbubble-ellipses-outline"
+              size={size}
+              color={color}
+            />
+          ),
+        }}
+      />
+      {{/if}}
+    </Drawer>
+  );
+};
+
+export default DrawerLayout;

package/templates/frontend/native/nativewind/app/(drawer)/index.tsx.hbs

@@ -0,0 +1,95 @@
+import { View, Text, ScrollView } from "react-native";
+import { Container } from "@/components/container";
+{{#if (eq api "orpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { orpc } from "@/utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { useQuery } from "@tanstack/react-query";
+import { trpc } from "@/utils/trpc";
+{{/if}}
+{{#if (eq backend "convex")}}
+import { useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+{{/if}}
+
+export default function Home() {
+  {{#if (eq api "orpc")}}
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "trpc")}}
+  const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq backend "convex")}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
+
+  return (
+    <Container>
+      <ScrollView showsVerticalScrollIndicator={false} className="flex-1">
+        <Text className="font-mono text-foreground text-3xl font-bold mb-4">
+			TVI
+		</Text>
+        <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
+          {{#if (eq backend "convex")}}
+          <View className="flex-row items-center gap-3">
+            <View
+              className={`h-3 w-3 rounded-full ${
+                  healthCheck ? "bg-green-500" : "bg-orange-500"
+              }`}
+            />
+            <View className="flex-1">
+              <Text className="text-sm font-medium text-card-foreground">
+                Convex
+              </Text>
+              <Text className="text-xs text-muted-foreground">
+                {healthCheck === undefined
+                  ? "Checking connection..."
+                  : healthCheck === "OK"
+                    ? "All systems operational"
+                    : "Service unavailable"}
+              </Text>
+            </View>
+          </View>
+          {{else}}
+            {{#unless (eq api "none")}}
+            <View className="flex-row items-center gap-3">
+              <View
+                className={`h-3 w-3 rounded-full ${
+                    healthCheck.data ? "bg-green-500" : "bg-orange-500"
+                }`}
+              />
+              <View className="flex-1">
+                <Text className="text-sm font-medium text-card-foreground">
+                  {{#if (eq api "orpc")}}
+                  ORPC
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  TRPC
+                  {{/if}}
+                </Text>
+                <Text className="text-xs text-muted-foreground">
+                  {{#if (eq api "orpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                  {{#if (eq api "trpc")}}
+                  {healthCheck.isLoading
+                    ? "Checking connection..."
+                    : healthCheck.data
+                      ? "All systems operational"
+                      : "Service unavailable"}
+                  {{/if}}
+                </Text>
+              </View>
+            </View>
+            {{/unless}}
+          {{/if}}
+        </View>
+      </ScrollView>
+    </Container>
+  );
+}

package/templates/frontend/native/nativewind/app/+html.tsx

@@ -0,0 +1,47 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+import { ReactNode } from 'react';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+          name="viewport"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

package/templates/frontend/native/nativewind/app/+not-found.tsx

@@ -0,0 +1,29 @@
+import { Container } from "@/components/container";
+import { Link, Stack } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Oops!" }} />
+      <Container>
+        <View className="flex-1 justify-center items-center p-6">
+          <View className="items-center">
+            <Text className="text-6xl mb-4">?</Text>
+            <Text className="text-2xl font-bold text-foreground mb-2 text-center">
+              Page Not Found
+            </Text>
+            <Text className="text-muted-foreground text-center mb-8 max-w-sm">
+              Sorry, the page you're looking for doesn't exist.
+            </Text>
+            <Link href="/" asChild>
+              <Text className="text-primary font-medium bg-primary/10 px-6 py-3 rounded-lg">
+                Go to Home
+              </Text>
+            </Link>
+          </View>
+        </View>
+      </Container>
+    </>
+  );
+}