mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
add svelte
This commit is contained in:
Aman Varshney
31
apps/cli/templates/api/orpc/web/svelte/src/lib/orpc.ts.hbs
Normal file
31
apps/cli/templates/api/orpc/web/svelte/src/lib/orpc.ts.hbs
Normal file
@@ -0,0 +1,31 @@
|
||||
import { PUBLIC_SERVER_URL } from "$env/static/public";
|
||||
import { createORPCClient } from "@orpc/client";
|
||||
import { RPCLink } from "@orpc/client/fetch";
|
||||
import type { RouterClient } from "@orpc/server";
|
||||
import { createORPCSvelteQueryUtils } from "@orpc/svelte-query";
|
||||
import { QueryCache, QueryClient } from "@tanstack/svelte-query";
|
||||
import type { appRouter } from "../../../server/src/routers/index";
|
||||
|
||||
export const queryClient = new QueryClient({
|
||||
queryCache: new QueryCache({
|
||||
onError: (error) => {
|
||||
console.error(`Error: ${error.message}`);
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
export const link = new RPCLink({
|
||||
url: `${PUBLIC_SERVER_URL}/rpc`,
|
||||
{{#if auth}}
|
||||
fetch(url, options) {
|
||||
return fetch(url, {
|
||||
...options,
|
||||
credentials: "include",
|
||||
});
|
||||
},
|
||||
{{/if}}
|
||||
});
|
||||
|
||||
export const client: RouterClient<typeof appRouter> = createORPCClient(link);
|
||||
|
||||
export const orpc = createORPCSvelteQueryUtils(client);
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { createForm } from '@tanstack/svelte-form';
|
||||
import { z } from 'zod';
|
||||
import { authClient } from '$lib/auth-client';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let { switchToSignUp } = $props<{ switchToSignUp: () => void }>();
|
||||
|
||||
const validationSchema = z.object({
|
||||
email: z.string().email('Invalid email address'),
|
||||
password: z.string().min(1, 'Password is required'),
|
||||
});
|
||||
|
||||
const form = createForm(() => ({
|
||||
defaultValues: { email: '', password: '' },
|
||||
onSubmit: async ({ value }) => {
|
||||
await authClient.signIn.email(
|
||||
{ email: value.email, password: value.password },
|
||||
{
|
||||
onSuccess: () => goto('/dashboard'),
|
||||
onError: (error) => {
|
||||
console.log(error.error.message || 'Sign in failed. Please try again.');
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
validators: {
|
||||
onSubmit: validationSchema,
|
||||
},
|
||||
}));
|
||||
</script>
|
||||
|
||||
<div class="mx-auto mt-10 w-full max-w-md p-6">
|
||||
<h1 class="mb-6 text-center font-bold text-3xl">Welcome Back</h1>
|
||||
|
||||
<form
|
||||
class="space-y-4"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.Field name="email">
|
||||
{#snippet children(field)}
|
||||
<div class="space-y-1">
|
||||
<label for={field.name}>Email</label>
|
||||
<input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="email"
|
||||
class="w-full border"
|
||||
onblur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
oninput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
field.handleChange(target.value)
|
||||
}} />
|
||||
{#if field.state.meta.isTouched}
|
||||
{#each field.state.meta.errors as error}
|
||||
<p class="text-sm text-red-500" role="alert">{error}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="password">
|
||||
{#snippet children(field)}
|
||||
<div class="space-y-1">
|
||||
<label for={field.name}>Password</label>
|
||||
<input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="password"
|
||||
class="w-full border"
|
||||
onblur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
oninput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
field.handleChange(target.value)
|
||||
}}
|
||||
/>
|
||||
{#if field.state.meta.isTouched}
|
||||
{#each field.state.meta.errors as error}
|
||||
<p class="text-sm text-red-500" role="alert">{error}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Subscribe selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}>
|
||||
{#snippet children(state)}
|
||||
<button type="submit" class="w-full" disabled={!state.canSubmit || state.isSubmitting}>
|
||||
{state.isSubmitting ? 'Submitting...' : 'Sign In'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<button type="button" class="text-indigo-600 hover:text-indigo-800" onclick={switchToSignUp}>
|
||||
Need an account? Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { createForm } from '@tanstack/svelte-form';
|
||||
import { z } from 'zod';
|
||||
import { authClient } from '$lib/auth-client';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let { switchToSignIn } = $props<{ switchToSignIn: () => void }>();
|
||||
|
||||
const validationSchema = z.object({
|
||||
name: z.string().min(2, 'Name must be at least 2 characters'),
|
||||
email: z.string().email('Invalid email address'),
|
||||
password: z.string().min(6, 'Password must be at least 6 characters'),
|
||||
});
|
||||
|
||||
|
||||
const form = createForm(() => ({
|
||||
defaultValues: { name: '', email: '', password: '' },
|
||||
onSubmit: async ({ value }) => {
|
||||
await authClient.signUp.email(
|
||||
{
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
name: value.name,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
goto('/dashboard');
|
||||
},
|
||||
onError: (error) => {
|
||||
console.log(error.error.message || 'Sign up failed. Please try again.');
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
},
|
||||
validators: {
|
||||
onSubmit: validationSchema,
|
||||
},
|
||||
}));
|
||||
</script>
|
||||
|
||||
<div class="mx-auto mt-10 w-full max-w-md p-6">
|
||||
<h1 class="mb-6 text-center font-bold text-3xl">Create Account</h1>
|
||||
|
||||
<form
|
||||
id="form"
|
||||
class="space-y-4"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.Field name="name">
|
||||
{#snippet children(field)}
|
||||
<div class="space-y-1">
|
||||
<label for={field.name}>Name</label>
|
||||
<input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
class="w-full border"
|
||||
onblur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
oninput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
field.handleChange(target.value)
|
||||
}}
|
||||
/>
|
||||
{#if field.state.meta.isTouched}
|
||||
{#each field.state.meta.errors as error}
|
||||
<p class="text-sm text-red-500" role="alert">{error}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="email">
|
||||
{#snippet children(field)}
|
||||
<div class="space-y-1">
|
||||
<label for={field.name}>Email</label>
|
||||
<input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="email"
|
||||
class="w-full border"
|
||||
onblur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
oninput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
field.handleChange(target.value)
|
||||
}}
|
||||
/>
|
||||
{#if field.state.meta.isTouched}
|
||||
{#each field.state.meta.errors as error}
|
||||
<p class="text-sm text-red-500" role="alert">{error}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Field name="password">
|
||||
{#snippet children(field)}
|
||||
<div class="space-y-1">
|
||||
<label for={field.name}>Password</label>
|
||||
<input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
type="password"
|
||||
class="w-full border"
|
||||
onblur={field.handleBlur}
|
||||
value={field.state.value}
|
||||
oninput={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
field.handleChange(target.value)
|
||||
}}
|
||||
/>
|
||||
{#if field.state.meta.errors}
|
||||
{#each field.state.meta.errors as error}
|
||||
<p class="text-sm text-red-500" role="alert">{error}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</form.Field>
|
||||
|
||||
<form.Subscribe selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}>
|
||||
{#snippet children(state)}
|
||||
<button type="submit" class="w-full" disabled={!state.canSubmit || state.isSubmitting}>
|
||||
{state.isSubmitting ? 'Submitting...' : 'Sign Up'}
|
||||
</button>
|
||||
{/snippet}
|
||||
</form.Subscribe>
|
||||
</form>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<button type="button" class="text-indigo-600 hover:text-indigo-800" onclick={switchToSignIn}>
|
||||
Already have an account? Sign In
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { authClient } from '$lib/auth-client';
|
||||
import { goto } from '$app/navigation';
|
||||
import { queryClient } from '$lib/orpc';
|
||||
|
||||
const sessionQuery = authClient.useSession();
|
||||
|
||||
async function handleSignOut() {
|
||||
await authClient.signOut({
|
||||
fetchOptions: {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries();
|
||||
goto('/');
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Sign out failed:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function goToLogin() {
|
||||
goto('/login');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="relative">
|
||||
{#if $sessionQuery.isPending}
|
||||
<div class="h-8 w-24 animate-pulse rounded bg-neutral-700"></div>
|
||||
{:else if $sessionQuery.data?.user}
|
||||
{@const user = $sessionQuery.data.user}
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-neutral-300 hidden sm:inline" title={user.email}>
|
||||
{user.name || user.email?.split('@')[0] || 'User'}
|
||||
</span>
|
||||
<button
|
||||
onclick={handleSignOut}
|
||||
class="rounded px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white transition-colors"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
onclick={goToLogin}
|
||||
class="rounded px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 text-white transition-colors"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { PUBLIC_SERVER_URL } from "$env/static/public";
|
||||
import { createAuthClient } from "better-auth/svelte";
|
||||
|
||||
export const authClient = createAuthClient({
|
||||
baseURL: PUBLIC_SERVER_URL,
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { authClient } from '$lib/auth-client';
|
||||
import { orpc } from '$lib/orpc';
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
const sessionQuery = authClient.useSession();
|
||||
|
||||
const privateDataQuery = createQuery(orpc.privateData.queryOptions());
|
||||
|
||||
onMount(() => {
|
||||
const { data: session, isPending } = get(sessionQuery);
|
||||
if (!session && !isPending) {
|
||||
goto('/login');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if $sessionQuery.isPending}
|
||||
<div>Loading...</div>
|
||||
{:else if !$sessionQuery.data}
|
||||
<!-- Redirecting... -->
|
||||
{:else}
|
||||
<div>
|
||||
<h1>Dashboard</h1>
|
||||
<p>Welcome {$sessionQuery.data.user.name}</p>
|
||||
<p>privateData: {$privateDataQuery.data?.message}</p>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,12 @@
|
||||
<script lang="ts">
|
||||
import SignInForm from '../../components/SignInForm.svelte';
|
||||
import SignUpForm from '../../components/SignUpForm.svelte';
|
||||
|
||||
let showSignIn = $state(true);
|
||||
</script>
|
||||
|
||||
{#if showSignIn}
|
||||
<SignInForm switchToSignUp={() => showSignIn = false} />
|
||||
{:else}
|
||||
<SignUpForm switchToSignIn={() => showSignIn = true} />
|
||||
{/if}
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import { useChat } from '@ai-sdk/vue'
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const serverUrl = config.public.serverURL
|
||||
@@ -16,7 +16,6 @@ watch(messages, async () => {
|
||||
messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||||
})
|
||||
|
||||
// Helper: Concatenate all text parts for a message
|
||||
function getMessageText(message: any) {
|
||||
return message.parts
|
||||
.filter((part: any) => part.type === 'text')
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
import { PUBLIC_SERVER_URL } from '$env/static/public';
|
||||
import { Chat } from '@ai-sdk/svelte';
|
||||
|
||||
const chat = new Chat({
|
||||
api: `${PUBLIC_SERVER_URL}/ai`,
|
||||
});
|
||||
|
||||
let messagesEndElement: HTMLDivElement | null = null;
|
||||
|
||||
$effect(() => {
|
||||
const messageCount = chat.messages.length;
|
||||
if (messageCount > 0) {
|
||||
setTimeout(() => {
|
||||
messagesEndElement?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4">
|
||||
<div class="mb-4 space-y-4 overflow-y-auto pb-4">
|
||||
{#if chat.messages.length === 0}
|
||||
<div class="mt-8 text-center text-neutral-500">Ask the AI anything to get started!</div>
|
||||
{/if}
|
||||
|
||||
{#each chat.messages as message (message.id)}
|
||||
<div
|
||||
class="w-fit max-w-[85%] rounded-lg p-3 text-sm md:text-base"
|
||||
class:ml-auto={message.role === 'user'}
|
||||
class:bg-indigo-600={message.role === 'user'}
|
||||
class:text-white={message.role === 'user'}
|
||||
class:bg-neutral-700={message.role === 'assistant'}
|
||||
class:text-neutral-100={message.role === 'assistant'}
|
||||
>
|
||||
<p
|
||||
class="mb-1 text-xs font-semibold uppercase tracking-wide"
|
||||
class:text-indigo-200={message.role === 'user'}
|
||||
class:text-neutral-400={message.role === 'assistant'}
|
||||
>
|
||||
{message.role === 'user' ? 'You' : 'AI Assistant'}
|
||||
</p>
|
||||
<div class="whitespace-pre-wrap break-words">
|
||||
{#each message.parts as part, partIndex (partIndex)}
|
||||
{#if part.type === 'text'}
|
||||
{part.text}
|
||||
{:else if part.type === 'tool-invocation'}
|
||||
<pre class="mt-2 rounded bg-neutral-800 p-2 text-xs text-neutral-300"
|
||||
>{JSON.stringify(part.toolInvocation, null, 2)}</pre
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<div bind:this={messagesEndElement}></div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onsubmit={chat.handleSubmit}
|
||||
class="flex w-full items-center space-x-2 border-t border-neutral-700 pt-4"
|
||||
>
|
||||
<input
|
||||
name="prompt"
|
||||
bind:value={chat.input}
|
||||
placeholder="Type your message..."
|
||||
class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
|
||||
autocomplete="off"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
chat.handleSubmit(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!chat.input.trim()}
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,150 @@
|
||||
<script lang="ts">
|
||||
import { orpc } from '$lib/orpc';
|
||||
import { createQuery, createMutation } from '@tanstack/svelte-query';
|
||||
|
||||
let newTodoText = $state('');
|
||||
|
||||
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);
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
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</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>
|
||||
23
apps/cli/templates/frontend/svelte/_gitignore
Normal file
23
apps/cli/templates/frontend/svelte/_gitignore
Normal file
@@ -0,0 +1,23 @@
|
||||
node_modules
|
||||
|
||||
# Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
/.svelte-kit
|
||||
/build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.test
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
1
apps/cli/templates/frontend/svelte/_npmrc
Normal file
1
apps/cli/templates/frontend/svelte/_npmrc
Normal file
@@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
31
apps/cli/templates/frontend/svelte/package.json
Normal file
31
apps/cli/templates/frontend/svelte/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^6.0.0",
|
||||
"@sveltejs/kit": "^2.20.7",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"svelte": "^5.28.2",
|
||||
"svelte-check": "^4.1.6",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"typescript": "^5.8.3",
|
||||
"@tanstack/svelte-query-devtools": "^5.74.6",
|
||||
"vite": "^6.3.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/svelte-form": "^1.7.0",
|
||||
"@tanstack/svelte-query": "^5.74.4",
|
||||
"zod": "^3.24.3"
|
||||
}
|
||||
}
|
||||
5
apps/cli/templates/frontend/svelte/src/app.css
Normal file
5
apps/cli/templates/frontend/svelte/src/app.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
body {
|
||||
@apply bg-neutral-950 text-neutral-100;
|
||||
}
|
||||
13
apps/cli/templates/frontend/svelte/src/app.d.ts
vendored
Normal file
13
apps/cli/templates/frontend/svelte/src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
apps/cli/templates/frontend/svelte/src/app.html
Normal file
12
apps/cli/templates/frontend/svelte/src/app.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
|
||||
{{#if auth}}
|
||||
import UserMenu from './UserMenu.svelte';
|
||||
{{/if}}
|
||||
const links = [
|
||||
{ to: "/", label: "Home" },
|
||||
{{#if auth}}
|
||||
{ to: "/dashboard", label: "Dashboard" },
|
||||
{{/if}}
|
||||
{{#if (includes examples "todo")}}
|
||||
{ to: "/todos", label: "Todos" },
|
||||
{{/if}}
|
||||
{{#if (includes examples "ai")}}
|
||||
{ to: "/ai", label: "AI Chat" },
|
||||
{{/if}}
|
||||
];
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-row items-center justify-between px-4 py-2 md:px-6">
|
||||
<nav class="flex gap-4 text-lg">
|
||||
{#each links as link (link.to)}
|
||||
<a
|
||||
href={link.to}
|
||||
class=""
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
<div class="flex items-center gap-2">
|
||||
{{#if auth}}
|
||||
<UserMenu />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-neutral-800" />
|
||||
</div>
|
||||
1
apps/cli/templates/frontend/svelte/src/lib/index.ts
Normal file
1
apps/cli/templates/frontend/svelte/src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { QueryClientProvider } from '@tanstack/svelte-query';
|
||||
import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
|
||||
import '../app.css';
|
||||
import { queryClient } from '$lib/orpc';
|
||||
import Header from '../components/Header.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<div class="grid h-svh grid-rows-[auto_1fr]">
|
||||
<Header />
|
||||
<main class="overflow-y-auto">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
<SvelteQueryDevtools />
|
||||
</QueryClientProvider>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { orpc } from "$lib/orpc";
|
||||
import { createQuery } from "@tanstack/svelte-query";
|
||||
|
||||
const healthCheck = createQuery(orpc.healthCheck.queryOptions());
|
||||
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
||||
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
||||
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
||||
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
||||
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
|
||||
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
||||
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
||||
`;
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto max-w-3xl px-4 py-2">
|
||||
<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
||||
<div class="grid gap-6">
|
||||
<section class="rounded-lg border p-4">
|
||||
<h2 class="mb-2 font-medium">API Status</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
||||
></div>
|
||||
<span class="text-muted-foreground text-sm">
|
||||
{$healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: $healthCheck.data
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
BIN
apps/cli/templates/frontend/svelte/static/favicon.png
Normal file
BIN
apps/cli/templates/frontend/svelte/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
18
apps/cli/templates/frontend/svelte/svelte.config.js
Normal file
18
apps/cli/templates/frontend/svelte/svelte.config.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://svelte.dev/docs/kit/integrations
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
19
apps/cli/templates/frontend/svelte/tsconfig.json
Normal file
19
apps/cli/templates/frontend/svelte/tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
7
apps/cli/templates/frontend/svelte/vite.config.ts
Normal file
7
apps/cli/templates/frontend/svelte/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), sveltekit()]
|
||||
});
|
||||
Reference in New Issue
Block a user