bosbun 0.0.5 → 0.0.7

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

@@ -0,0 +1,62 @@
+import type { LoadEvent, MetadataEvent } from "bosbun";
+
+const posts: Record<string, { title: string; date: string; tags: string[]; content: string }> = {
+    "hello-world": {
+        title: "Hello, World!",
+        date: "2026-03-05",
+        tags: ["intro", "bosbun"],
+        content: `Welcome to Bosbun! 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.
+
+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.
+
+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 },
+    };
+}
+
+export async function load({ params, parent, metadata }: LoadEvent) {
+    // 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;
+
+    return {
+        post,
+        slug: params.slug,
+        appName: parentData.appName as string,
+    };
+}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+
+    let { data }: { data: PageData } = $props();
+
+    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>
+</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>
+{: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>
+{/if}

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let { data }: { data: { status: number; message: string } } = $props();
+</script>
+
+<svelte:head>
+  <title>{data.status} — {data.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">{data.status}</p>
+  <p class="text-2xl font-semibold text-gray-700">{data.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

@@ -0,0 +1,10 @@
+import type { LoadEvent } from "bosbun";
+
+// 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,
+    };
+}

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

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

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

@@ -0,0 +1,28 @@
+import { fail, redirect } from "bosbun";
+import type { RequestEvent } from "bosbun";
+
+export async function load() {
+    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;
+
+        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 });
+        }
+
+        return { success: true, email, name };
+    },
+
+    reset: async () => {
+        return { cleared: true };
+    },
+};

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  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>
+
+  {#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}
+
+  <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>
+
+    <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>
+</div>

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

@@ -0,0 +1,44 @@
+import type { RequestEvent } from "bosbun";
+
+export function GET({ params, locals }: RequestEvent) {
+    return Response.json({
+        method: "GET",
+        message: "Hello from Bosbun 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 });
+}
+
+export async function PUT({ request, locals }: RequestEvent) {
+    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 });
+}
+
+export function DELETE({ params, locals }: RequestEvent) {
+    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",
+        },
+    });
+}

package/templates/demo/tsconfig.json

@@ -0,0 +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": [".", ".bosbun/types"],
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}