create-better-t-stack 3.13.2 → 3.14.0

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

@@ -1,317 +0,0 @@
-{{#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

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

package/templates/extras/bunfig.toml.hbs

@@ -1,6 +0,0 @@
-[install]
-{{#if (or (includes frontend "nuxt"))}}
-linker = "hoisted" # having issues with Nuxt when linker is isolated
-{{else}}
-linker = "isolated"
-{{/if}}

package/templates/extras/pnpm-workspace.yaml

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

package/templates/frontend/native/bare/_gitignore

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

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

@@ -1,41 +0,0 @@
-import { TabBarIcon } from "@/components/tabbar-icon";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { Tabs } from "expo-router";
-import { NAV_THEME } from "@/lib/constants";
-
-export default function TabLayout() {
-  const { isDarkColorScheme } = useColorScheme();
-  const theme = isDarkColorScheme ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Tabs
-      screenOptions=\{{
-        headerShown: false,
-        tabBarActiveTintColor: theme.primary,
-        tabBarInactiveTintColor: theme.text,
-        tabBarStyle: {
-          backgroundColor: theme.background,
-          borderTopColor: theme.border,
-        },
-      }}
-    >
-      <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/bare/app/(drawer)/(tabs)/index.tsx.hbs

@@ -1,43 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View, StyleSheet } from "react-native";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-export default function TabOne() {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Container>
-      <ScrollView style={styles.scrollView}>
-        <View style={styles.content}>
-          <Text style={[styles.title, { color: theme.text }]}>
-            Tab One
-          </Text>
-          <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
-            Explore the first section of your app
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-    padding: 16,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-  },
-});
-

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

@@ -1,43 +0,0 @@
-import { Container } from "@/components/container";
-import { ScrollView, Text, View, StyleSheet } from "react-native";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-export default function TabTwo() {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Container>
-      <ScrollView style={styles.scrollView}>
-        <View style={styles.content}>
-          <Text style={[styles.title, { color: theme.text }]}>
-            Tab Two
-          </Text>
-          <Text style={[styles.subtitle, { color: theme.text, opacity: 0.7 }]}>
-            Discover more features and content
-          </Text>
-        </View>
-      </ScrollView>
-    </Container>
-  );
-}
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flex: 1,
-    padding: 16,
-  },
-  content: {
-    paddingVertical: 16,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "bold",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-  },
-});
-

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

@@ -1,90 +0,0 @@
-import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import { Link } from "expo-router";
-import { Drawer } from "expo-router/drawer";
-import { useColorScheme } from "@/lib/use-color-scheme";
-import { NAV_THEME } from "@/lib/constants";
-
-import { HeaderButton } from "@/components/header-button";
-
-const DrawerLayout = () => {
-  const { colorScheme } = useColorScheme();
-  const theme = colorScheme === "dark" ? NAV_THEME.dark : NAV_THEME.light;
-
-  return (
-    <Drawer
-      screenOptions=\{{
-        headerStyle: {
-          backgroundColor: theme.background,
-        },
-        headerTitleStyle: {
-          color: theme.text,
-        },
-        headerTintColor: theme.text,
-        drawerStyle: {
-          backgroundColor: theme.background,
-        },
-        drawerLabelStyle: {
-          color: theme.text,
-        },
-        drawerInactiveTintColor: theme.text,
-      }}
-    >
-      <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;
-