bosia 0.2.3 → 0.3.0

package/templates/demo/src/routes/actions-test/+page.svelte

@@ -1,60 +1,60 @@
 <script lang="ts">
-  import type { PageData, ActionData } from './$types';
-  let { data, form }: { data: PageData; form: ActionData } = $props();
+	import type { PageData, ActionData } from "./$types";
+	let { data, form }: { data: PageData; form: ActionData } = $props();
 </script>
 
 <div class="max-w-md mx-auto mt-10 p-6">
-  <h1 class="text-2xl font-bold mb-4">{data.greeting}</h1>
+	<h1 class="text-2xl font-bold mb-4">{data.greeting}</h1>
 
-  {#if form?.success}
-    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-      Welcome, {form.name} ({form.email})!
-    </div>
-  {/if}
+	{#if form?.success}
+		<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+			Welcome, {form.name} ({form.email})!
+		</div>
+	{/if}
 
-  {#if form?.cleared}
-    <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
-      Form cleared.
-    </div>
-  {/if}
+	{#if form?.cleared}
+		<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
+			Form cleared.
+		</div>
+	{/if}
 
-  <form method="POST" class="space-y-4">
-    <div>
-      <label for="name" class="block text-sm font-medium">Name</label>
-      <input
-        id="name"
-        name="name"
-        type="text"
-        value={form?.name ?? ''}
-        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
-      />
-      {#if form?.errors?.name}
-        <p class="text-red-500 text-sm mt-1">{form.errors.name}</p>
-      {/if}
-    </div>
+	<form method="POST" class="space-y-4">
+		<div>
+			<label for="name" class="block text-sm font-medium">Name</label>
+			<input
+				id="name"
+				name="name"
+				type="text"
+				value={form?.name ?? ""}
+				class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
+			/>
+			{#if form?.errors?.name}
+				<p class="text-red-500 text-sm mt-1">{form.errors.name}</p>
+			{/if}
+		</div>
 
-    <div>
-      <label for="email" class="block text-sm font-medium">Email</label>
-      <input
-        id="email"
-        name="email"
-        type="text"
-        value={form?.email ?? ''}
-        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
-      />
-      {#if form?.errors?.email}
-        <p class="text-red-500 text-sm mt-1">{form.errors.email}</p>
-      {/if}
-    </div>
+		<div>
+			<label for="email" class="block text-sm font-medium">Email</label>
+			<input
+				id="email"
+				name="email"
+				type="text"
+				value={form?.email ?? ""}
+				class="mt-1 block w-full rounded border border-gray-300 px-3 py-2"
+			/>
+			{#if form?.errors?.email}
+				<p class="text-red-500 text-sm mt-1">{form.errors.email}</p>
+			{/if}
+		</div>
 
-    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
-      Submit
-    </button>
-  </form>
+		<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+			Submit
+		</button>
+	</form>
 
-  <form method="POST" action="?/reset" class="mt-4">
-    <button type="submit" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
-      Reset (named action)
-    </button>
-  </form>
+	<form method="POST" action="?/reset" class="mt-4">
+		<button type="submit" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
+			Reset (named action)
+		</button>
+	</form>
 </div>

package/templates/demo/src/routes/api/hello/+server.ts

@@ -1,44 +1,44 @@
 import type { RequestEvent } from "bosia";
 
 export function GET({ params, locals }: RequestEvent) {
-    return Response.json({
-        method: "GET",
-        message: "Hello from Bosia API!",
-        params,
-        locals: {
-            requestTime: locals.requestTime ?? null,
-            user: locals.user ?? null,
-        },
-    });
+	return Response.json({
+		method: "GET",
+		message: "Hello from Bosia API!",
+		params,
+		locals: {
+			requestTime: locals.requestTime ?? null,
+			user: locals.user ?? null,
+		},
+	});
 }
 
 export async function POST({ request, locals }: RequestEvent) {
-    const body = await request.json().catch(() => ({}));
-    return Response.json({ method: "POST", received: body, locals });
+	const body = await request.json().catch(() => ({}));
+	return Response.json({ method: "POST", received: body, locals });
 }
 
 export async function PUT({ request, locals }: RequestEvent) {
-    const body = await request.json().catch(() => ({}));
-    return Response.json({ method: "PUT", received: body, locals });
+	const body = await request.json().catch(() => ({}));
+	return Response.json({ method: "PUT", received: body, locals });
 }
 
 export async function PATCH({ request, locals }: RequestEvent) {
-    const body = await request.json().catch(() => ({}));
-    return Response.json({ method: "PATCH", received: body, locals });
+	const body = await request.json().catch(() => ({}));
+	return Response.json({ method: "PATCH", received: body, locals });
 }
 
 export function DELETE({ params, locals }: RequestEvent) {
-    return Response.json({ method: "DELETE", deleted: true, params, locals });
+	return Response.json({ method: "DELETE", deleted: true, params, locals });
 }
 
 export function OPTIONS() {
-    return new Response(null, {
-        status: 204,
-        headers: {
-            Allow: "GET, POST, PUT, PATCH, DELETE, OPTIONS",
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
-            "Access-Control-Allow-Headers": "Content-Type, Authorization",
-        },
-    });
+	return new Response(null, {
+		status: 204,
+		headers: {
+			Allow: "GET, POST, PUT, PATCH, DELETE, OPTIONS",
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
+			"Access-Control-Allow-Headers": "Content-Type, Authorization",
+		},
+	});
 }

package/templates/demo/tsconfig.json

@@ -1,22 +1,22 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
-    "verbatimModuleSyntax": true,
-    "types": ["bun-types"],
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "rootDirs": [".", ".bosia/types"],
-    "paths": {
-      "$lib": ["./src/lib"],
-      "$lib/*": ["./src/lib/*"]
-    }
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"allowImportingTsExtensions": true,
+		"noEmit": true,
+		"verbatimModuleSyntax": true,
+		"types": ["bun-types"],
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"rootDirs": [".", ".bosia/types"],
+		"paths": {
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"]
+		}
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
 }

package/templates/todo/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+build
+.bosia
+bun.lock

package/templates/todo/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"singleQuote": false,
+	"trailingComma": "all",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/templates/todo/README.md

@@ -27,16 +27,16 @@ Visit [http://localhost:9000](http://localhost:9000) to see the app.
 
 ## Scripts
 
-| Command | Description |
-|---------|-------------|
-| `bun x bosia dev` | Start dev server with HMR |
-| `bun x bosia build` | Production build |
-| `bun x bosia start` | Start production server |
+| Command               | Description                            |
+| --------------------- | -------------------------------------- |
+| `bun x bosia dev`     | Start dev server with HMR              |
+| `bun x bosia build`   | Production build                       |
+| `bun x bosia start`   | Start production server                |
 | `bun run db:generate` | Generate migration from schema changes |
-| `bun run db:migrate` | Apply pending migrations |
-| `bun run db:push` | Push schema directly (dev shortcut) |
-| `bun run db:studio` | Open Drizzle Studio GUI |
-| `bun run db:seed` | Run pending seed files |
+| `bun run db:migrate`  | Apply pending migrations               |
+| `bun run db:push`     | Push schema directly (dev shortcut)    |
+| `bun run db:studio`   | Open Drizzle Studio GUI                |
+| `bun run db:seed`     | Run pending seed files                 |
 
 ## Project Structure
 

package/templates/todo/package.json

@@ -1,19 +1,24 @@
 {
-  "name": "{{PROJECT_NAME}}",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "bosia dev",
-    "build": "bosia build",
-    "start": "bosia start"
-  },
-  "dependencies": {
-    "bosia": "^{{BOSIA_VERSION}}",
-    "svelte": "^5.20.0",
-    "tailwind-merge": "^3.5.0"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "typescript": "^5"
-  }
+	"name": "{{PROJECT_NAME}}",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "bosia dev",
+		"build": "bosia build",
+		"start": "bosia start",
+		"check": "tsc --noEmit && prettier --check .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
+	},
+	"dependencies": {
+		"bosia": "^{{BOSIA_VERSION}}",
+		"svelte": "^5.20.0",
+		"tailwind-merge": "^3.5.0"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"prettier": "^3.3.0",
+		"prettier-plugin-svelte": "^3.2.0",
+		"typescript": "^5"
+	}
 }

package/templates/todo/src/app.css

@@ -8,125 +8,125 @@
  */
 
 @theme {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
 
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
 
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
 
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
 
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
 
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
 
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
 
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
 
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
 
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
 }
 
 /* ─── Light Theme (Default) ─────────────────────────────── */
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
+	--background: 0 0% 100%;
+	--foreground: 222.2 84% 4.9%;
 
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
+	--card: 0 0% 100%;
+	--card-foreground: 222.2 84% 4.9%;
 
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
+	--popover: 0 0% 100%;
+	--popover-foreground: 222.2 84% 4.9%;
 
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
+	--primary: 222.2 47.4% 11.2%;
+	--primary-foreground: 210 40% 98%;
 
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
+	--secondary: 210 40% 96.1%;
+	--secondary-foreground: 222.2 47.4% 11.2%;
 
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+	--muted: 210 40% 96.1%;
+	--muted-foreground: 215.4 16.3% 46.9%;
 
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
+	--accent: 210 40% 96.1%;
+	--accent-foreground: 222.2 47.4% 11.2%;
 
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
+	--destructive: 0 84.2% 60.2%;
+	--destructive-foreground: 210 40% 98%;
 
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
+	--border: 214.3 31.8% 91.4%;
+	--input: 214.3 31.8% 91.4%;
+	--ring: 222.2 84% 4.9%;
 
-  --radius: 0.5rem;
+	--radius: 0.5rem;
 }
 
 /* ─── Dark Theme ─────────────────────────────────────────── */
 
 .dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
+	--background: 222.2 84% 4.9%;
+	--foreground: 210 40% 98%;
 
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
+	--card: 222.2 84% 4.9%;
+	--card-foreground: 210 40% 98%;
 
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
+	--popover: 222.2 84% 4.9%;
+	--popover-foreground: 210 40% 98%;
 
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
+	--primary: 210 40% 98%;
+	--primary-foreground: 222.2 47.4% 11.2%;
 
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
+	--secondary: 217.2 32.6% 17.5%;
+	--secondary-foreground: 210 40% 98%;
 
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
+	--muted: 217.2 32.6% 17.5%;
+	--muted-foreground: 215 20.2% 65.1%;
 
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
+	--accent: 217.2 32.6% 17.5%;
+	--accent-foreground: 210 40% 98%;
 
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
+	--destructive: 0 62.8% 30.6%;
+	--destructive-foreground: 210 40% 98%;
 
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
+	--border: 217.2 32.6% 17.5%;
+	--input: 217.2 32.6% 17.5%;
+	--ring: 212.7 26.8% 83.9%;
 }
 
 /* ─── Base Styles ────────────────────────────────────────── */
 
 @layer base {
-  * {
-    border-color: theme(--color-border);
-  }
-
-  body {
-    background-color: theme(--color-background);
-    color: theme(--color-foreground);
-    font-family:
-      "Inter",
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      "Helvetica Neue",
-      Arial,
-      sans-serif;
-  }
+	* {
+		border-color: theme(--color-border);
+	}
+
+	body {
+		background-color: theme(--color-background);
+		color: theme(--color-foreground);
+		font-family:
+			"Inter",
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			"Segoe UI",
+			Roboto,
+			"Helvetica Neue",
+			Arial,
+			sans-serif;
+	}
 }

package/templates/todo/src/app.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="svelte" />
 
 declare module "*.svelte" {
-    import type { Component } from "svelte";
-    const component: Component<Record<string, any>, Record<string, any>, any>;
-    export default component;
+	import type { Component } from "svelte";
+	const component: Component<Record<string, any>, Record<string, any>, any>;
+	export default component;
 }
 
 declare namespace App {
-    interface Locals {
-        db: import("./features/drizzle").Database;
-        requestTime: number;
-    }
+	interface Locals {
+		db: import("./features/drizzle").Database;
+		requestTime: number;
+	}
 }

package/templates/todo/src/hooks.server.ts

@@ -3,18 +3,18 @@ import type { Handle } from "bosia";
 import { db } from "./features/drizzle";
 
 const dbHandle: Handle = async ({ event, resolve }) => {
-    event.locals.db = db;
-    return resolve(event);
+	event.locals.db = db;
+	return resolve(event);
 };
 
 const loggingHandle: Handle = async ({ event, resolve }) => {
-    const start = Date.now();
-    event.locals.requestTime = start;
-    const res = await resolve(event);
-    const ms = Date.now() - start;
-    console.log(`[${event.request.method}] ${event.url.pathname} ${res.status} (${ms}ms)`);
-    res.headers.set("X-Response-Time", `${ms}ms`);
-    return res;
+	const start = Date.now();
+	event.locals.requestTime = start;
+	const res = await resolve(event);
+	const ms = Date.now() - start;
+	console.log(`[${event.request.method}] ${event.url.pathname} ${res.status} (${ms}ms)`);
+	res.headers.set("X-Response-Time", `${ms}ms`);
+	return res;
 };
 
 export const handle = sequence(dbHandle, loggingHandle);

package/templates/todo/src/routes/+error.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  let { error }: { error: { status: number; message: string } } = $props();
+	let { error }: { error: { status: number; message: string } } = $props();
 </script>
 
 <svelte:head>
-  <title>{error.status} — {error.message}</title>
+	<title>{error.status} — {error.message}</title>
 </svelte:head>
 
 <div class="min-h-screen flex flex-col items-center justify-center gap-4 text-center px-4">
-  <p class="text-8xl font-bold text-gray-200">{error.status}</p>
-  <p class="text-2xl font-semibold text-gray-700">{error.message}</p>
-  <a href="/" class="mt-4 px-5 py-2 rounded-lg bg-gray-900 text-white text-sm hover:bg-gray-700 transition-colors">
-    Go home
-  </a>
+	<p class="text-8xl font-bold text-gray-200">{error.status}</p>
+	<p class="text-2xl font-semibold text-gray-700">{error.message}</p>
+	<a
+		href="/"
+		class="mt-4 px-5 py-2 rounded-lg bg-gray-900 text-white text-sm hover:bg-gray-700 transition-colors"
+	>
+		Go home
+	</a>
 </div>

package/templates/todo/src/routes/+layout.server.ts

@@ -1,8 +1,8 @@
 import type { LoadEvent } from "bosia";
 
 export async function load({ locals }: LoadEvent) {
-    return {
-        appName: "{{PROJECT_NAME}}",
-        requestTime: locals.requestTime as number | null ?? null,
-    };
+	return {
+		appName: "{{PROJECT_NAME}}",
+		requestTime: (locals.requestTime as number | null) ?? null,
+	};
 }

package/templates/todo/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import "../app.css";
-    let { children }: { children: any } = $props();
+	import "../app.css";
+	let { children }: { children: any } = $props();
 </script>
 
 {@render children()}