bosia 0.2.2 → 0.3.0

package/templates/demo/src/routes/(public)/about/+page.svelte

@@ -1,31 +1,19 @@
 <svelte:head>
-    <title>About | {{PROJECT_NAME}}</title>
+	<title>About | {{ PROJECT_NAME }}</title>
 </svelte:head>
 
 <div class="space-y-6 max-w-2xl">
-    <h1 class="text-4xl font-bold tracking-tight">About {{PROJECT_NAME}}</h1>
-    <p class="text-muted-foreground text-lg">
-        A minimalist fullstack framework built on Bun, ElysiaJS, and Svelte 5.
-    </p>
+	<h1 class="text-4xl font-bold tracking-tight">About {{ PROJECT_NAME }}</h1>
+	<p class="text-muted-foreground text-lg">
+		A minimalist fullstack framework built on Bun, ElysiaJS, and Svelte 5.
+	</p>
 
-    <ul class="space-y-2 text-foreground">
-        {#each [
-            "Bun runtime — fast builds, native TypeScript",
-            "ElysiaJS — HTTP server with type-safe routing",
-            "Svelte 5 Runes — fine-grained reactivity",
-            "Isomorphic SSR with client hydration",
-            "File-based routing (SvelteKit-compatible conventions)",
-            "Nested layouts and route groups (public), (auth), (admin)",
-            "Dynamic params [slug] and catch-all [...rest]",
-            "Server loaders with parent() data threading",
-            "Hooks — sequence() middleware for auth, logging, etc.",
-            "Component registry — bosia add button",
-            "Feature registry — bosia feat login",
-        ] as item}
-            <li class="flex items-start gap-2">
-                <span class="text-primary mt-0.5">✓</span>
-                <span>{item}</span>
-            </li>
-        {/each}
-    </ul>
+	<ul class="space-y-2 text-foreground">
+		{#each ["Bun runtime — fast builds, native TypeScript", "ElysiaJS — HTTP server with type-safe routing", "Svelte 5 Runes — fine-grained reactivity", "Isomorphic SSR with client hydration", "File-based routing (SvelteKit-compatible conventions)", "Nested layouts and route groups (public), (auth), (admin)", "Dynamic params [slug] and catch-all [...rest]", "Server loaders with parent() data threading", "Hooks — sequence() middleware for auth, logging, etc.", "Component registry — bosia add button", "Feature registry — bosia feat login"] as item}
+			<li class="flex items-start gap-2">
+				<span class="text-primary mt-0.5">✓</span>
+				<span>{item}</span>
+			</li>
+		{/each}
+	</ul>
 </div>

package/templates/demo/src/routes/(public)/all/[...catchall]/+page.svelte

@@ -1,38 +1,34 @@
 <script lang="ts">
-    let { data = {} }: { data?: Record<string, any> } = $props();
-    const segments = $derived(
-        ((data as any)?.params?.catchall ?? "")
-            .split("/")
-            .filter(Boolean)
-    );
+	let { data = {} }: { data?: Record<string, any> } = $props();
+	const segments = $derived(((data as any)?.params?.catchall ?? "").split("/").filter(Boolean));
 </script>
 
 <svelte:head>
-    <title>Catch-all Demo | {{PROJECT_NAME}}</title>
+	<title>Catch-all Demo | {{ PROJECT_NAME }}</title>
 </svelte:head>
 
 <div class="flex flex-col items-center justify-center py-24 text-center space-y-6">
-    <h1 class="text-3xl font-bold">Catch-all Route Demo</h1>
-    <p class="text-muted-foreground text-sm">
-        This page matches <code class="bg-muted rounded px-1 font-mono">/all/[...catchall]</code>
-    </p>
+	<h1 class="text-3xl font-bold">Catch-all Route Demo</h1>
+	<p class="text-muted-foreground text-sm">
+		This page matches <code class="bg-muted rounded px-1 font-mono">/all/[...catchall]</code>
+	</p>
 
-    {#if segments.length > 0}
-        <div class="mt-2 space-y-1">
-            <p class="text-sm text-muted-foreground">Captured segments:</p>
-            <div class="flex gap-2 flex-wrap justify-center">
-                {#each segments as segment, i}
-                    <span class="bg-muted rounded px-2 py-1 font-mono text-sm">
-                        [{i}] {segment}
-                    </span>
-                {/each}
-            </div>
-        </div>
-    {:else}
-        <p class="text-muted-foreground text-sm italic">No segments captured</p>
-    {/if}
+	{#if segments.length > 0}
+		<div class="mt-2 space-y-1">
+			<p class="text-sm text-muted-foreground">Captured segments:</p>
+			<div class="flex gap-2 flex-wrap justify-center">
+				{#each segments as segment, i}
+					<span class="bg-muted rounded px-2 py-1 font-mono text-sm">
+						[{i}] {segment}
+					</span>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<p class="text-muted-foreground text-sm italic">No segments captured</p>
+	{/if}
 
-    <a href="/" class="mt-4 rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">
-        Go Home
-    </a>
+	<a href="/" class="mt-4 rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">
+		Go Home
+	</a>
 </div>

package/templates/demo/src/routes/(public)/blog/+page.svelte

@@ -1,55 +1,64 @@
 <script lang="ts">
-    const posts = [
-        {
-            slug: "hello-world",
-            title: "Hello, World!",
-            date: "2026-03-05",
-            excerpt: "The first post in the demo — a quick intro to the framework.",
-            tags: ["intro", "bosia"],
-        },
-        {
-            slug: "route-groups",
-            title: "Route Groups Explained",
-            date: "2026-03-04",
-            excerpt: "How (public), (auth), (admin) groups work — invisible in URLs, share layouts.",
-            tags: ["routing", "layouts"],
-        },
-        {
-            slug: "dynamic-params",
-            title: "Dynamic Params with [slug]",
-            date: "2026-03-03",
-            excerpt: "Using [slug] segments to match any value and pass it to server loaders.",
-            tags: ["routing", "dynamic"],
-        },
-    ];
+	const posts = [
+		{
+			slug: "hello-world",
+			title: "Hello, World!",
+			date: "2026-03-05",
+			excerpt: "The first post in the demo — a quick intro to the framework.",
+			tags: ["intro", "bosia"],
+		},
+		{
+			slug: "route-groups",
+			title: "Route Groups Explained",
+			date: "2026-03-04",
+			excerpt:
+				"How (public), (auth), (admin) groups work — invisible in URLs, share layouts.",
+			tags: ["routing", "layouts"],
+		},
+		{
+			slug: "dynamic-params",
+			title: "Dynamic Params with [slug]",
+			date: "2026-03-03",
+			excerpt: "Using [slug] segments to match any value and pass it to server loaders.",
+			tags: ["routing", "dynamic"],
+		},
+	];
 </script>
 
 <svelte:head>
-    <title>Blog | {{PROJECT_NAME}}</title>
+	<title>Blog | {{ PROJECT_NAME }}</title>
 </svelte:head>
 
 <div class="space-y-8">
-    <div class="space-y-2">
-        <h1 class="text-4xl font-bold tracking-tight">Blog</h1>
-        <p class="text-muted-foreground">Routing patterns and framework internals.</p>
-    </div>
+	<div class="space-y-2">
+		<h1 class="text-4xl font-bold tracking-tight">Blog</h1>
+		<p class="text-muted-foreground">Routing patterns and framework internals.</p>
+	</div>
 
-    <div class="grid gap-4" data-bosia-preload="hover">
-        {#each posts as post}
-            <a href="/blog/{post.slug}" class="group block rounded-lg border bg-card p-5 hover:border-primary transition-colors">
-                <div class="flex items-start justify-between gap-4">
-                    <div class="space-y-1">
-                        <p class="font-semibold group-hover:text-primary transition-colors">{post.title}</p>
-                        <p class="text-xs text-muted-foreground font-mono">{post.date}</p>
-                    </div>
-                    <div class="flex gap-1 shrink-0">
-                        {#each post.tags as tag}
-                            <span class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">{tag}</span>
-                        {/each}
-                    </div>
-                </div>
-                <p class="mt-2 text-sm text-muted-foreground">{post.excerpt}</p>
-            </a>
-        {/each}
-    </div>
+	<div class="grid gap-4" data-bosia-preload="hover">
+		{#each posts as post}
+			<a
+				href="/blog/{post.slug}"
+				class="group block rounded-lg border bg-card p-5 hover:border-primary transition-colors"
+			>
+				<div class="flex items-start justify-between gap-4">
+					<div class="space-y-1">
+						<p class="font-semibold group-hover:text-primary transition-colors">
+							{post.title}
+						</p>
+						<p class="text-xs text-muted-foreground font-mono">{post.date}</p>
+					</div>
+					<div class="flex gap-1 shrink-0">
+						{#each post.tags as tag}
+							<span
+								class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+								>{tag}</span
+							>
+						{/each}
+					</div>
+				</div>
+				<p class="mt-2 text-sm text-muted-foreground">{post.excerpt}</p>
+			</a>
+		{/each}
+	</div>
 </div>

package/templates/demo/src/routes/(public)/blog/[slug]/+page.server.ts

@@ -1,62 +1,60 @@
 import type { LoadEvent, MetadataEvent } from "bosia";
 
 const posts: Record<string, { title: string; date: string; tags: string[]; content: string }> = {
-    "hello-world": {
-        title: "Hello, World!",
-        date: "2026-03-05",
-        tags: ["intro", "bosia"],
-        content: `Welcome to Bosia! This page was loaded by a +page.server.ts file.
+	"hello-world": {
+		title: "Hello, World!",
+		date: "2026-03-05",
+		tags: ["intro", "bosia"],
+		content: `Welcome to Bosia! This page was loaded by a +page.server.ts file.
 
 The slug param was extracted from the URL by the route matcher and passed to the load() function as params.slug.
 
 This is standard SvelteKit-compatible server loading.`,
-    },
-    "route-groups": {
-        title: "Route Groups Explained",
-        date: "2026-03-04",
-        tags: ["routing", "layouts"],
-        content: `Route groups like (public), (auth), and (admin) are directory names that are invisible in the URL.
+	},
+	"route-groups": {
+		title: "Route Groups Explained",
+		date: "2026-03-04",
+		tags: ["routing", "layouts"],
+		content: `Route groups like (public), (auth), and (admin) are directory names that are invisible in the URL.
 
 They let you share layouts across a set of routes without adding a URL segment. A directory named (public) applies its +layout.svelte to all routes inside it, but /public never appears in the browser URL.
 
 This page lives at routes/(public)/blog/[slug]/+page.svelte but is served at /blog/route-groups.`,
-    },
-    "dynamic-params": {
-        title: "Dynamic Params with [slug]",
-        date: "2026-03-03",
-        tags: ["routing", "dynamic"],
-        content: `A directory named [slug] creates a dynamic route segment that matches any URL value.
+	},
+	"dynamic-params": {
+		title: "Dynamic Params with [slug]",
+		date: "2026-03-03",
+		tags: ["routing", "dynamic"],
+		content: `A directory named [slug] creates a dynamic route segment that matches any URL value.
 
 The matched value is available as params.slug inside +page.server.ts load() and inside the page component via data.params.slug.
 
 The route matcher uses 3-pass priority: exact matches first, then dynamic segments, then catch-all routes.`,
-    },
+	},
 };
 
 export function metadata({ params }: MetadataEvent) {
-    // In production this would be a DB query for the post
-    const post = posts[params.slug] ?? null;
-    return {
-        title: post ? `${post.title} — Blog` : `Post not found`,
-        description: post ? `A blog post about ${params.slug}` : undefined,
-        meta: post
-            ? [{ property: "og:title", content: post.title }]
-            : [],
-        // Pass fetched post to load() — avoids duplicate query
-        data: { post },
-    };
+	// In production this would be a DB query for the post
+	const post = posts[params.slug] ?? null;
+	return {
+		title: post ? `${post.title} — Blog` : `Post not found`,
+		description: post ? `A blog post about ${params.slug}` : undefined,
+		meta: post ? [{ property: "og:title", content: post.title }] : [],
+		// Pass fetched post to load() — avoids duplicate query
+		data: { post },
+	};
 }
 
 export async function load({ params, parent, metadata }: LoadEvent) {
-    // parent() gives us data from +layout.server.ts (appName, requestTime)
-    const parentData = await parent();
+	// parent() gives us data from +layout.server.ts (appName, requestTime)
+	const parentData = await parent();
 
-    // Reuse post from metadata() — no duplicate DB query
-    const post = metadata?.post ?? posts[params.slug] ?? null;
+	// Reuse post from metadata() — no duplicate DB query
+	const post = metadata?.post ?? posts[params.slug] ?? null;
 
-    return {
-        post,
-        slug: params.slug,
-        appName: parentData.appName as string,
-    };
+	return {
+		post,
+		slug: params.slug,
+		appName: parentData.appName as string,
+	};
 }

package/templates/demo/src/routes/(public)/blog/[slug]/+page.svelte

@@ -1,53 +1,71 @@
 <script lang="ts">
-    import type { PageData } from './$types';
+	import type { PageData } from "./$types";
 
-    let { data }: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
 
-    const post = $derived(data.post);
-    const slug = $derived(data.slug ?? data.params.slug ?? "");
+	const post = $derived(data.post);
+	const slug = $derived(data.slug ?? data.params.slug ?? "");
 </script>
 
 <svelte:head>
-    <title>{post ? post.title : "Post Not Found"} | {{PROJECT_NAME}}</title>
+	<title>{post ? post.title : "Post Not Found"} | {{ PROJECT_NAME }}</title>
 </svelte:head>
 
 {#if post}
-    <article class="space-y-6 max-w-2xl">
-        <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">← Blog</a>
-
-        <div class="space-y-2">
-            <div class="flex flex-wrap gap-1">
-                {#each post.tags as tag}
-                    <span class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">{tag}</span>
-                {/each}
-            </div>
-            <h1 class="text-4xl font-bold tracking-tight">{post.title}</h1>
-            <p class="text-sm text-muted-foreground font-mono">{post.date}</p>
-        </div>
-
-        <hr class="border-border" />
-
-        <div class="space-y-4">
-            {#each post.content.split("\n\n") as paragraph}
-                <p class="text-foreground leading-relaxed">{paragraph}</p>
-            {/each}
-        </div>
-
-        <hr class="border-border" />
-
-        <!-- Route debug box — demonstrates params flowing from server to client -->
-        <div class="rounded-lg border bg-muted/40 p-4 space-y-1 text-sm font-mono">
-            <p class="font-sans text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Route debug</p>
-            <p><span class="text-muted-foreground">pattern: </span>/blog/[slug]</p>
-            <p><span class="text-muted-foreground">params.slug: </span><span class="text-primary font-semibold">{slug}</span></p>
-            <p><span class="text-muted-foreground">loaded by: </span>+page.server.ts</p>
-            <p><span class="text-muted-foreground">parent data: </span>{data.appName}</p>
-        </div>
-    </article>
+	<article class="space-y-6 max-w-2xl">
+		<a
+			href="/blog"
+			class="text-sm text-muted-foreground hover:text-foreground transition-colors">← Blog</a
+		>
+
+		<div class="space-y-2">
+			<div class="flex flex-wrap gap-1">
+				{#each post.tags as tag}
+					<span
+						class="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
+						>{tag}</span
+					>
+				{/each}
+			</div>
+			<h1 class="text-4xl font-bold tracking-tight">{post.title}</h1>
+			<p class="text-sm text-muted-foreground font-mono">{post.date}</p>
+		</div>
+
+		<hr class="border-border" />
+
+		<div class="space-y-4">
+			{#each post.content.split("\n\n") as paragraph}
+				<p class="text-foreground leading-relaxed">{paragraph}</p>
+			{/each}
+		</div>
+
+		<hr class="border-border" />
+
+		<!-- Route debug box — demonstrates params flowing from server to client -->
+		<div class="rounded-lg border bg-muted/40 p-4 space-y-1 text-sm font-mono">
+			<p
+				class="font-sans text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2"
+			>
+				Route debug
+			</p>
+			<p><span class="text-muted-foreground">pattern: </span>/blog/[slug]</p>
+			<p>
+				<span class="text-muted-foreground">params.slug: </span><span
+					class="text-primary font-semibold">{slug}</span
+				>
+			</p>
+			<p><span class="text-muted-foreground">loaded by: </span>+page.server.ts</p>
+			<p><span class="text-muted-foreground">parent data: </span>{data.appName}</p>
+		</div>
+	</article>
 {:else}
-    <div class="flex flex-col items-center justify-center py-20 text-center space-y-4">
-        <p class="text-7xl font-bold text-destructive">404</p>
-        <p class="text-xl text-muted-foreground">Post "<span class="font-mono">{slug}</span>" not found.</p>
-        <a href="/blog" class="rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors">Back to Blog</a>
-    </div>
+	<div class="flex flex-col items-center justify-center py-20 text-center space-y-4">
+		<p class="text-7xl font-bold text-destructive">404</p>
+		<p class="text-xl text-muted-foreground">
+			Post "<span class="font-mono">{slug}</span>" not found.
+		</p>
+		<a href="/blog" class="rounded-md border px-4 py-2 text-sm hover:bg-muted transition-colors"
+			>Back to Blog</a
+		>
+	</div>
 {/if}

package/templates/demo/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/demo/src/routes/+layout.server.ts

@@ -3,8 +3,8 @@ import type { LoadEvent } from "bosia";
 // Data returned here is available to all child loaders via parent()
 // and to all layouts via the `data` prop.
 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/demo/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()}

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

@@ -2,27 +2,27 @@ import { fail, redirect } from "bosia";
 import type { RequestEvent } from "bosia";
 
 export async function load() {
-    return { greeting: "Test form actions" };
+	return { greeting: "Test form actions" };
 }
 
 export const actions = {
-    default: async ({ request }: RequestEvent) => {
-        const data = await request.formData();
-        const email = data.get("email") as string;
-        const name = data.get("name") as string;
+	default: async ({ request }: RequestEvent) => {
+		const data = await request.formData();
+		const email = data.get("email") as string;
+		const name = data.get("name") as string;
 
-        const errors: Record<string, string> = {};
-        if (!email) errors.email = "Email is required";
-        if (!name) errors.name = "Name is required";
+		const errors: Record<string, string> = {};
+		if (!email) errors.email = "Email is required";
+		if (!name) errors.name = "Name is required";
 
-        if (Object.keys(errors).length > 0) {
-            return fail(400, { email, name, errors });
-        }
+		if (Object.keys(errors).length > 0) {
+			return fail(400, { email, name, errors });
+		}
 
-        return { success: true, email, name };
-    },
+		return { success: true, email, name };
+	},
 
-    reset: async () => {
-        return { cleared: true };
-    },
+	reset: async () => {
+		return { cleared: true };
+	},
 };