bosia 0.2.3 → 0.3.1

package/templates/default/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/demo/.prettierignore

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

package/templates/demo/.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/demo/README.md

@@ -12,15 +12,15 @@ bun x bosia start   # run production server
 
 ## Routes
 
-| URL | File | Description |
-|-----|------|-------------|
-| `/` | `(public)/+page.svelte` | Home page |
-| `/about` | `(public)/about/+page.svelte` | About page |
-| `/blog` | `(public)/blog/+page.svelte` | Blog listing |
-| `/blog/:slug` | `(public)/blog/[slug]/+page.svelte` | Blog post — fetched via server loader |
-| `/api/hello` | `api/hello/+server.ts` | Multi-method JSON API |
-| `/actions-test` | `actions-test/+page.svelte` | Form actions demo |
-| `/*` | `(public)/[...catchall]/+page.svelte` | 404 catch-all |
+| URL             | File                                  | Description                           |
+| --------------- | ------------------------------------- | ------------------------------------- |
+| `/`             | `(public)/+page.svelte`               | Home page                             |
+| `/about`        | `(public)/about/+page.svelte`         | About page                            |
+| `/blog`         | `(public)/blog/+page.svelte`          | Blog listing                          |
+| `/blog/:slug`   | `(public)/blog/[slug]/+page.svelte`   | Blog post — fetched via server loader |
+| `/api/hello`    | `api/hello/+server.ts`                | Multi-method JSON API                 |
+| `/actions-test` | `actions-test/+page.svelte`           | Form actions demo                     |
+| `/*`            | `(public)/[...catchall]/+page.svelte` | 404 catch-all                         |
 
 ## Learn More
 

package/templates/demo/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/demo/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/demo/src/app.d.ts

@@ -1,7 +1,7 @@
 /// <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;
 }

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

@@ -3,19 +3,19 @@ import type { Handle } from "bosia";
 
 // Sets locals that every loader and API handler can read
 const authHandle: Handle = async ({ event, resolve }) => {
-    event.locals.requestTime = Date.now();
-    event.locals.user = null; // replace with real session logic
-    return resolve(event);
+	event.locals.requestTime = Date.now();
+	event.locals.user = null; // replace with real session logic
+	return resolve(event);
 };
 
 // Logs each request with method, path, status, and duration
 const loggingHandle: Handle = async ({ event, resolve }) => {
-    const start = Date.now();
-    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();
+	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(authHandle, loggingHandle);

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

@@ -1,31 +1,53 @@
 <script lang="ts">
-    import type { LayoutData } from '../$types';
+	import type { LayoutData } from "../$types";
 
-    let { children, data }: { children: any; data: LayoutData } = $props();
+	let { children, data }: { children: any; data: LayoutData } = $props();
 </script>
 
 <div class="flex min-h-screen flex-col bg-background text-foreground">
-    <header class="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
-        <nav class="mx-auto flex max-w-4xl items-center gap-6 px-4 py-3">
-            <a href="/" class="font-bold tracking-tight flex items-center gap-2"><img src="/favicon.svg" alt="" class="size-5" /> {{PROJECT_NAME}}</a>
-            <a href="/" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
-            <a href="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">About</a>
-            <a href="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Blog</a>
-            <a href="/all/foo/bar" class="text-sm text-muted-foreground hover:text-foreground transition-colors">Catch-all</a>
-            <a href="/api/hello" target="_blank" class="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a>
-        </nav>
-    </header>
+	<header class="sticky top-0 z-10 border-b bg-background/80 backdrop-blur">
+		<nav class="mx-auto flex max-w-4xl items-center gap-6 px-4 py-3">
+			<a href="/" class="font-bold tracking-tight flex items-center gap-2"
+				><img src="/favicon.svg" alt="" class="size-5" /> {data.appName}</a
+			>
+			<a
+				href="/"
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>Home</a
+			>
+			<a
+				href="/about"
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>About</a
+			>
+			<a
+				href="/blog"
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>Blog</a
+			>
+			<a
+				href="/all/foo/bar"
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>Catch-all</a
+			>
+			<a
+				href="/api/hello"
+				target="_blank"
+				class="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a
+			>
+		</nav>
+	</header>
 
-    <main class="mx-auto w-full max-w-4xl flex-1 px-4 py-8">
-        {@render children()}
-    </main>
+	<main class="mx-auto w-full max-w-4xl flex-1 px-4 py-8">
+		{@render children()}
+	</main>
 
-    <footer class="border-t py-4 text-center text-sm text-muted-foreground">
-        Powered by Bosia
-        {#if data.requestTime}
-            <span class="ml-2 opacity-40 font-mono text-xs">
-                req at {new Date(data.requestTime).toISOString()}
-            </span>
-        {/if}
-    </footer>
+	<footer class="border-t py-4 text-center text-sm text-muted-foreground">
+		Powered by Bosia
+		{#if data.requestTime}
+			<span class="ml-2 opacity-40 font-mono text-xs">
+				req at {new Date(data.requestTime).toISOString()}
+			</span>
+		{/if}
+	</footer>
 </div>

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

@@ -1,79 +1,108 @@
 <script lang="ts">
-    let count = $state(0);
+	let count = $state(0);
 
-    const features = [
-        { icon: "📂", label: "File-based routing", desc: "+page.svelte, +layout.svelte, route groups, dynamic [params]" },
-        { icon: "⚡", label: "SSR + Hydration", desc: "Server renders HTML, Svelte hydrates on the client" },
-        { icon: "🔁", label: "Server loaders", desc: "+page.server.ts and +layout.server.ts with parent() threading" },
-        { icon: "🪝", label: "Hooks", desc: "sequence() middleware — auth, logging, locals" },
-        { icon: "📡", label: "API routes", desc: "+server.ts exports GET, POST, PUT, PATCH, DELETE" },
-        { icon: "🧩", label: "Component registry", desc: "bosia add button — shadcn-style, code you own" },
-        { icon: "✨", label: "feat system", desc: "bosia feat login — scaffold entire features, not just components" },
-    ];
+	const features = [
+		{
+			icon: "📂",
+			label: "File-based routing",
+			desc: "+page.svelte, +layout.svelte, route groups, dynamic [params]",
+		},
+		{
+			icon: "⚡",
+			label: "SSR + Hydration",
+			desc: "Server renders HTML, Svelte hydrates on the client",
+		},
+		{
+			icon: "🔁",
+			label: "Server loaders",
+			desc: "+page.server.ts and +layout.server.ts with parent() threading",
+		},
+		{ icon: "🪝", label: "Hooks", desc: "sequence() middleware — auth, logging, locals" },
+		{
+			icon: "📡",
+			label: "API routes",
+			desc: "+server.ts exports GET, POST, PUT, PATCH, DELETE",
+		},
+		{
+			icon: "🧩",
+			label: "Component registry",
+			desc: "bosia add button — shadcn-style, code you own",
+		},
+		{
+			icon: "✨",
+			label: "feat system",
+			desc: "bosia feat login — scaffold entire features, not just components",
+		},
+	];
 </script>
 
 <svelte:head>
-    <title>{{PROJECT_NAME}}</title>
-    <meta name="description" content="{{PROJECT_NAME}} — SSR + Svelte 5 + Bun + ElysiaJS" />
+	<title>Bosia Demo</title>
+	<meta name="description" content="Bosia Demo — SSR + Svelte 5 + Bun + ElysiaJS" />
 </svelte:head>
 
 <div class="space-y-12">
-    <!-- Hero -->
-    <div class="space-y-3 pt-4">
-        <h1 class="text-5xl font-bold tracking-tight flex items-center gap-3"><img src="/favicon.svg" alt="" class="size-10" /> {{PROJECT_NAME}}</h1>
-        <p class="text-xl text-muted-foreground max-w-xl">
-            A minimalist fullstack framework — SSR, Svelte 5 Runes, Bun, and ElysiaJS.
-        </p>
-    </div>
+	<!-- Hero -->
+	<div class="space-y-3 pt-4">
+		<h1 class="text-5xl font-bold tracking-tight flex items-center gap-3">
+			<img src="/favicon.svg" alt="" class="size-10" />
+			Bosia Demo
+		</h1>
+		<p class="text-xl text-muted-foreground max-w-xl">
+			A minimalist fullstack framework — SSR, Svelte 5 Runes, Bun, and ElysiaJS.
+		</p>
+	</div>
 
-    <!-- Svelte 5 reactivity demo -->
-    <div class="rounded-lg border bg-card p-6 space-y-3 max-w-sm">
-        <p class="text-sm font-medium text-muted-foreground">Svelte 5 $state demo</p>
-        <p class="text-5xl font-bold tabular-nums">{count}</p>
-        <div class="flex gap-2">
-            <button
-                onclick={() => count++}
-                class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
-            >
-                +1
-            </button>
-            <button
-                onclick={() => count = 0}
-                class="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
-            >
-                Reset
-            </button>
-        </div>
-    </div>
+	<!-- Svelte 5 reactivity demo -->
+	<div class="rounded-lg border bg-card p-6 space-y-3 max-w-sm">
+		<p class="text-sm font-medium text-muted-foreground">Svelte 5 $state demo</p>
+		<p class="text-5xl font-bold tabular-nums">{count}</p>
+		<div class="flex gap-2">
+			<button
+				onclick={() => count++}
+				class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+			>
+				+1
+			</button>
+			<button
+				onclick={() => (count = 0)}
+				class="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+			>
+				Reset
+			</button>
+		</div>
+	</div>
 
-    <!-- Features grid -->
-    <div class="space-y-4">
-        <h2 class="text-2xl font-semibold tracking-tight">Features</h2>
-        <div class="grid gap-4 sm:grid-cols-2">
-            {#each features as f}
-                <div class="rounded-lg border bg-card p-4 space-y-1">
-                    <p class="font-medium">{f.icon} {f.label}</p>
-                    <p class="text-sm text-muted-foreground">{f.desc}</p>
-                </div>
-            {/each}
-        </div>
-    </div>
+	<!-- Features grid -->
+	<div class="space-y-4">
+		<h2 class="text-2xl font-semibold tracking-tight">Features</h2>
+		<div class="grid gap-4 sm:grid-cols-2">
+			{#each features as f}
+				<div class="rounded-lg border bg-card p-4 space-y-1">
+					<p class="font-medium">{f.icon} {f.label}</p>
+					<p class="text-sm text-muted-foreground">{f.desc}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
 
-    <!-- Navigation demo -->
-    <div class="space-y-4">
-        <h2 class="text-2xl font-semibold tracking-tight">Routes in this demo</h2>
-        <div class="flex flex-wrap gap-2">
-            {#each ["/", "/about", "/blog", "/blog/hello-world", "/blog/route-groups", "/all/foo/bar", "/missing-page"] as href}
-                <a
-                    {href}
-                    class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
-                >{href}</a>
-            {/each}
-            <a
-                href="/api/hello"
-                target="_blank"
-                class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
-            >/api/hello ↗</a>
-        </div>
-    </div>
+	<!-- Navigation demo -->
+	<div class="space-y-4">
+		<h2 class="text-2xl font-semibold tracking-tight">Routes in this demo</h2>
+		<div class="flex flex-wrap gap-2">
+			{#each ["/", "/about", "/blog", "/blog/hello-world", "/blog/route-groups", "/all/foo/bar", "/missing-page"] as href}
+				<a
+					{href}
+					class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+					>{href}</a
+				>
+			{/each}
+			<a
+				href="/api/hello"
+				target="_blank"
+				class="rounded-md border px-3 py-1.5 text-sm font-mono hover:bg-muted transition-colors"
+				>/api/hello ↗</a
+			>
+		</div>
+	</div>
 </div>