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
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