bosia 0.2.3 → 0.3.1

package/src/core/build.ts

@@ -27,20 +27,24 @@ const envVars = loadEnv(envMode);
 const classifiedEnv = classifyEnvVars(envVars);
 
 // 0b. Clean all generated output first
-try { rmSync("./dist",   { recursive: true, force: true }); } catch { }
-try { rmSync("./.bosia", { recursive: true, force: true }); } catch { }
+try {
+	rmSync("./dist", { recursive: true, force: true });
+} catch {}
+try {
+	rmSync("./.bosia", { recursive: true, force: true });
+} catch {}
 
 // 1. Scan routes
 const manifest = scanRoutes();
 console.log(`📂 Found ${manifest.pages.length} page route(s):`);
 for (const r of manifest.pages) {
-    console.log(`   ${r.pattern} → ${r.page}${r.pageServer ? " (server)" : ""}`);
+	console.log(`   ${r.pattern} → ${r.page}${r.pageServer ? " (server)" : ""}`);
 }
 if (manifest.apis.length > 0) {
-    console.log(`📡 Found ${manifest.apis.length} API route(s):`);
-    for (const r of manifest.apis) {
-        console.log(`   ${r.pattern} → ${r.server}`);
-    }
+	console.log(`📡 Found ${manifest.apis.length} API route(s):`);
+	for (const r of manifest.apis) {
+		console.log(`   ${r.pattern} → ${r.server}`);
+	}
 }
 
 // 2. Generate .bosia/routes.ts (single file replaces all old code generators)
@@ -58,12 +62,19 @@ generateEnvModules(classifiedEnv);
 // 3. Start Tailwind CSS (async — runs concurrently with client+server builds)
 const tailwindBin = resolveBosiaBin("tailwindcss");
 const tailwindProc = Bun.spawn(
-    [tailwindBin, "-i", "./src/app.css", "-o", "./public/bosia-tw.css", ...(isProduction ? ["--minify"] : [])],
-    {
-        cwd: process.cwd(),
-        env: { ...process.env, NODE_PATH: BOSIA_NODE_PATH },
-        stderr: "pipe",
-    },
+	[
+		tailwindBin,
+		"-i",
+		"./src/app.css",
+		"-o",
+		"./public/bosia-tw.css",
+		...(isProduction ? ["--minify"] : []),
+	],
+	{
+		cwd: process.cwd(),
+		env: { ...process.env, NODE_PATH: BOSIA_NODE_PATH },
+		stderr: "pipe",
+	},
 );
 const tailwindPromise = tailwindProc.exited;
 
@@ -74,85 +85,90 @@ const serverPlugin = makeBosiaPlugin("bun");
 // Build-time defines: inline PUBLIC_STATIC_* and STATIC_* vars
 const staticDefines: Record<string, string> = {};
 for (const [key, value] of Object.entries(classifiedEnv.publicStatic)) {
-    staticDefines[`import.meta.env.${key}`] = JSON.stringify(value);
+	staticDefines[`import.meta.env.${key}`] = JSON.stringify(value);
 }
 for (const [key, value] of Object.entries(classifiedEnv.privateStatic)) {
-    staticDefines[`import.meta.env.${key}`] = JSON.stringify(value);
+	staticDefines[`import.meta.env.${key}`] = JSON.stringify(value);
 }
 
 // 5. Build Tailwind + client + server bundles in parallel
 console.log("\n📦 Building Tailwind + client + server...");
 const clientPromise = Bun.build({
-    entrypoints: [join(CORE_DIR, "client", "hydrate.ts")],
-    outdir: "./dist/client",
-    target: "browser",
-    splitting: true,
-    naming: { chunk: "[name]-[hash].[ext]" },
-    minify: isProduction,
-    define: {
-        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ?? "development"),
-        ...staticDefines,
-    },
-    plugins: [clientPlugin, SveltePlugin()],
+	entrypoints: [join(CORE_DIR, "client", "hydrate.ts")],
+	outdir: "./dist/client",
+	target: "browser",
+	splitting: true,
+	naming: { chunk: "[name]-[hash].[ext]" },
+	minify: isProduction,
+	define: {
+		"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ?? "development"),
+		...staticDefines,
+	},
+	plugins: [clientPlugin, SveltePlugin()],
 });
 
 const serverPromise = Bun.build({
-    entrypoints: [join(CORE_DIR, "server.ts")],
-    outdir: "./dist/server",
-    target: "bun",
-    splitting: true,
-    naming: { entry: "index.[ext]", chunk: "[name]-[hash].[ext]" },
-    minify: isProduction,
-    external: ["elysia"],
-    plugins: [serverPlugin, SveltePlugin()],
+	entrypoints: [join(CORE_DIR, "server.ts")],
+	outdir: "./dist/server",
+	target: "bun",
+	splitting: true,
+	naming: { entry: "index.[ext]", chunk: "[name]-[hash].[ext]" },
+	minify: isProduction,
+	external: ["elysia"],
+	plugins: [serverPlugin, SveltePlugin()],
 });
 
 const [tailwindExitCode, clientResult, serverResult] = await Promise.all([
-    tailwindPromise,
-    clientPromise,
-    serverPromise,
+	tailwindPromise,
+	clientPromise,
+	serverPromise,
 ]);
 
 if (tailwindExitCode !== 0) {
-    const stderr = await new Response(tailwindProc.stderr).text();
-    console.error("❌ Tailwind CSS build failed:\n" + stderr);
-    process.exit(1);
+	const stderr = await new Response(tailwindProc.stderr).text();
+	console.error("❌ Tailwind CSS build failed:\n" + stderr);
+	process.exit(1);
 }
 console.log("✅ Tailwind CSS built: public/bosia-tw.css");
 
 if (!clientResult.success) {
-    console.error("❌ Client build failed:");
-    for (const msg of clientResult.logs) console.error(msg);
-    process.exit(1);
+	console.error("❌ Client build failed:");
+	for (const msg of clientResult.logs) console.error(msg);
+	process.exit(1);
 }
 
 if (!serverResult.success) {
-    console.error("❌ Server build failed:");
-    for (const msg of serverResult.logs) console.error(msg);
-    process.exit(1);
+	console.error("❌ Server build failed:");
+	for (const msg of serverResult.logs) console.error(msg);
+	process.exit(1);
 }
 
 // 6. Collect output files for dist/manifest.json
 const jsFiles: string[] = [];
 const cssFiles: string[] = [];
 for (const output of clientResult.outputs) {
-    const rel = relative("./dist/client", output.path);
-    if (output.path.endsWith(".js")) jsFiles.push(rel);
-    if (output.path.endsWith(".css")) cssFiles.push(rel);
+	const rel = relative("./dist/client", output.path);
+	if (output.path.endsWith(".js")) jsFiles.push(rel);
+	if (output.path.endsWith(".css")) cssFiles.push(rel);
 }
 
 // Entry is always "index.js" due to naming: { entry: "index.[ext]" }
-const serverEntry = serverResult.outputs
-    .find(o => o.path.endsWith("index.js"))
-    ?.path.split("/").pop() ?? "index.js";
+const serverEntry =
+	serverResult.outputs
+		.find((o) => o.path.endsWith("index.js"))
+		?.path.split("/")
+		.pop() ?? "index.js";
 
 // 8. Write dist/manifest.json
 mkdirSync("./dist", { recursive: true });
 const distManifest = {
-    js: jsFiles,
-    css: cssFiles,
-    entry: jsFiles.find(f => f === "hydrate.js") ?? jsFiles.find(f => f.startsWith("hydrate")) ?? "hydrate.js",
-    serverEntry,
+	js: jsFiles,
+	css: cssFiles,
+	entry:
+		jsFiles.find((f) => f === "hydrate.js") ??
+		jsFiles.find((f) => f.startsWith("hydrate")) ??
+		"hydrate.js",
+	serverEntry,
 };
 writeFileSync("./dist/manifest.json", JSON.stringify(distManifest, null, 2));
 console.log(`✅ Client bundle: ${jsFiles.join(", ")}`);

package/src/core/client/App.svelte

@@ -1,114 +1,125 @@
 <script lang="ts">
-  import { router } from "./router.svelte.ts";
-  import { findMatch } from "../matcher.ts";
-  import { clientRoutes } from "bosia:routes";
-  import { consumePrefetch, prefetchCache, dataUrl } from "./prefetch.ts";
-  import { appState } from "./appState.svelte.ts";
-
-  let {
-    ssrMode = false,
-    ssrPageComponent = null,
-    ssrLayoutComponents = [],
-    ssrPageData = {},
-    ssrLayoutData = [],
-    ssrFormData = null,
-  }: {
-    ssrMode?: boolean;
-    ssrPageComponent?: any;
-    ssrLayoutComponents?: any[];
-    ssrPageData?: Record<string, any>;
-    ssrLayoutData?: Record<string, any>[];
-    ssrFormData?: any;
-  } = $props();
-
-  let PageComponent = $state<any>(ssrPageComponent);
-  let layoutComponents = $state<any[]>(ssrLayoutComponents ?? []);
-  // In SSR mode, render directly from props (server module singletons must
-  // not hold per-request state). On the client, read/write through `appState`
-  // so `use:enhance` and other helpers can update the same cells.
-  const pageData = $derived(ssrMode ? (ssrPageData ?? {}) : appState.pageData);
-  const layoutData = $derived(ssrMode ? (ssrLayoutData ?? []) : appState.layoutData);
-  const routeParams = $derived(ssrMode ? (ssrPageData?.params ?? {}) : appState.routeParams);
-  const formData = $derived(ssrMode ? ssrFormData : appState.form);
-  let navigating = $state(false);
-  let navDone = $state(false);
-  // Skip bar on the very first effect run (initial hydration — data already present)
-  let firstNav = true;
-  let navDoneTimer: ReturnType<typeof setTimeout> | null = null;
-
-  $effect(() => {
-    if (ssrMode) return;
-
-    const path = router.currentRoute;
-    const pathname = path.split("?")[0].split("#")[0];
-    const match = findMatch(clientRoutes, pathname);
-    if (!match) return;
-
-    let cancelled = false;
-
-    const isFirst = firstNav;
-    firstNav = false;
-    if (isFirst) return; // Initial hydration — data already in SSR props, no fetch needed
-
-    appState.form = null;
-    if (navDoneTimer) { clearTimeout(navDoneTimer); navDoneTimer = null; }
-    navDone = false;
-    navigating = true;
-
-    // Load components + data in parallel, then update state atomically
-    // to avoid a flash of stale/empty data before the fetch completes.
-    const cached = match.route.hasServerData ? consumePrefetch(path) : null;
-    prefetchCache.clear(); // clear remaining entries on navigation — matches SvelteKit behavior
-    const dataFetch = cached
-      ? Promise.resolve(cached)
-      : match.route.hasServerData
-        ? fetch(dataUrl(path)).then(r => r.json()).catch(() => null)
-        : Promise.resolve(null);
-
-    Promise.all([
-      match.route.page(),
-      Promise.all(match.route.layouts.map((l: any) => l())),
-      dataFetch,
-    ]).then(([pageMod, layoutMods, result]: [any, any[], any]) => {
-      if (cancelled) return;
-      navigating = false;
-      navDone = true;
-      navDoneTimer = setTimeout(() => { navDone = false; }, 400);
-      if (result?.redirect) {
-        router.navigate(result.redirect);
-        return;
-      }
-      if (result?.error || (result === null && match.route.hasServerData)) {
-        // Data fetch failed (e.g. static hosting with no server) — full page load
-        window.location.href = path;
-        return;
-      }
-      PageComponent = pageMod.default;
-      layoutComponents = layoutMods.map((m: any) => m.default);
-      appState.pageData = result?.pageData ?? {};
-      appState.layoutData = result?.layoutData ?? [];
-      appState.routeParams = result?.pageData?.params ?? match.params;
-
-      // Scroll to top on forward navigation (not on popstate/back-forward)
-      if (router.isPush) window.scrollTo(0, 0);
-
-      // Update document title and meta description from server metadata
-      if (result?.metadata) {
-        if (result.metadata.title) document.title = result.metadata.title;
-        if (result.metadata.description) {
-          let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement | null;
-          if (!meta) {
-            meta = document.createElement("meta");
-            meta.name = "description";
-            document.head.appendChild(meta);
-          }
-          meta.content = result.metadata.description;
-        }
-      }
-    });
-
-    return () => { cancelled = true; };
-  });
+	import { router } from "./router.svelte.ts";
+	import { findMatch } from "../matcher.ts";
+	import { clientRoutes } from "bosia:routes";
+	import { consumePrefetch, prefetchCache, dataUrl } from "./prefetch.ts";
+	import { appState } from "./appState.svelte.ts";
+
+	let {
+		ssrMode = false,
+		ssrPageComponent = null,
+		ssrLayoutComponents = [],
+		ssrPageData = {},
+		ssrLayoutData = [],
+		ssrFormData = null,
+	}: {
+		ssrMode?: boolean;
+		ssrPageComponent?: any;
+		ssrLayoutComponents?: any[];
+		ssrPageData?: Record<string, any>;
+		ssrLayoutData?: Record<string, any>[];
+		ssrFormData?: any;
+	} = $props();
+
+	let PageComponent = $state<any>(ssrPageComponent);
+	let layoutComponents = $state<any[]>(ssrLayoutComponents ?? []);
+	// In SSR mode, render directly from props (server module singletons must
+	// not hold per-request state). On the client, read/write through `appState`
+	// so `use:enhance` and other helpers can update the same cells.
+	const pageData = $derived(ssrMode ? (ssrPageData ?? {}) : appState.pageData);
+	const layoutData = $derived(ssrMode ? (ssrLayoutData ?? []) : appState.layoutData);
+	const routeParams = $derived(ssrMode ? (ssrPageData?.params ?? {}) : appState.routeParams);
+	const formData = $derived(ssrMode ? ssrFormData : appState.form);
+	let navigating = $state(false);
+	let navDone = $state(false);
+	// Skip bar on the very first effect run (initial hydration — data already present)
+	let firstNav = true;
+	let navDoneTimer: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		if (ssrMode) return;
+
+		const path = router.currentRoute;
+		const pathname = path.split("?")[0].split("#")[0];
+		const match = findMatch(clientRoutes, pathname);
+		if (!match) return;
+
+		let cancelled = false;
+
+		const isFirst = firstNav;
+		firstNav = false;
+		if (isFirst) return; // Initial hydration — data already in SSR props, no fetch needed
+
+		appState.form = null;
+		if (navDoneTimer) {
+			clearTimeout(navDoneTimer);
+			navDoneTimer = null;
+		}
+		navDone = false;
+		navigating = true;
+
+		// Load components + data in parallel, then update state atomically
+		// to avoid a flash of stale/empty data before the fetch completes.
+		const cached = match.route.hasServerData ? consumePrefetch(path) : null;
+		prefetchCache.clear(); // clear remaining entries on navigation — matches SvelteKit behavior
+		const dataFetch = cached
+			? Promise.resolve(cached)
+			: match.route.hasServerData
+				? fetch(dataUrl(path))
+						.then((r) => r.json())
+						.catch(() => null)
+				: Promise.resolve(null);
+
+		Promise.all([
+			match.route.page(),
+			Promise.all(match.route.layouts.map((l: any) => l())),
+			dataFetch,
+		]).then(([pageMod, layoutMods, result]: [any, any[], any]) => {
+			if (cancelled) return;
+			navigating = false;
+			navDone = true;
+			navDoneTimer = setTimeout(() => {
+				navDone = false;
+			}, 400);
+			if (result?.redirect) {
+				router.navigate(result.redirect);
+				return;
+			}
+			if (result?.error || (result === null && match.route.hasServerData)) {
+				// Data fetch failed (e.g. static hosting with no server) — full page load
+				window.location.href = path;
+				return;
+			}
+			PageComponent = pageMod.default;
+			layoutComponents = layoutMods.map((m: any) => m.default);
+			appState.pageData = result?.pageData ?? {};
+			appState.layoutData = result?.layoutData ?? [];
+			appState.routeParams = result?.pageData?.params ?? match.params;
+
+			// Scroll to top on forward navigation (not on popstate/back-forward)
+			if (router.isPush) window.scrollTo(0, 0);
+
+			// Update document title and meta description from server metadata
+			if (result?.metadata) {
+				if (result.metadata.title) document.title = result.metadata.title;
+				if (result.metadata.description) {
+					let meta = document.querySelector(
+						'meta[name="description"]',
+					) as HTMLMetaElement | null;
+					if (!meta) {
+						meta = document.createElement("meta");
+						meta.name = "description";
+						document.head.appendChild(meta);
+					}
+					meta.content = result.metadata.description;
+				}
+			}
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	});
 </script>
 
 <!--
@@ -117,62 +128,72 @@
 -->
 
 {#if navigating}
-  <div class="bosia-bar loading"></div>
+	<div class="bosia-bar loading"></div>
 {:else if navDone}
-  <div class="bosia-bar done"></div>
+	<div class="bosia-bar done"></div>
 {/if}
 
 {#if layoutComponents.length > 0}
-  {@render renderLayout(0)}
+	{@render renderLayout(0)}
 {:else if PageComponent}
-  <PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
+	<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
 {:else}
-  <p>Loading...</p>
+	<p>Loading...</p>
 {/if}
 
 {#snippet renderLayout(index: number)}
-  {@const Layout = layoutComponents[index]}
-  {@const data = layoutData[index] ?? {}}
-
-  {#if index < layoutComponents.length - 1}
-    <Layout {data}>
-      {@render renderLayout(index + 1)}
-    </Layout>
-  {:else}
-    <Layout {data}>
-      {#if PageComponent}
-        <PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
-      {:else}
-        <p>Loading...</p>
-      {/if}
-    </Layout>
-  {/if}
+	{@const Layout = layoutComponents[index]}
+	{@const data = layoutData[index] ?? {}}
+
+	{#if index < layoutComponents.length - 1}
+		<Layout {data}>
+			{@render renderLayout(index + 1)}
+		</Layout>
+	{:else}
+		<Layout {data}>
+			{#if PageComponent}
+				<PageComponent data={{ ...pageData, params: routeParams }} form={formData} />
+			{:else}
+				<p>Loading...</p>
+			{/if}
+		</Layout>
+	{/if}
 {/snippet}
 
 <style>
-  .bosia-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 2px;
-    width: 100%;
-    background: var(--bosia-loading-color, #f73b27);
-    z-index: 9999;
-    pointer-events: none;
-    transform-origin: left center;
-  }
-  .bosia-bar.loading {
-    animation: bosia-load 8s cubic-bezier(0.02, 0.5, 0.5, 1) forwards;
-  }
-  .bosia-bar.done {
-    animation: bosia-done 0.35s ease forwards;
-  }
-  @keyframes bosia-load {
-    from { transform: scaleX(0); }
-    to   { transform: scaleX(0.85); }
-  }
-  @keyframes bosia-done {
-    from { transform: scaleX(1); opacity: 1; }
-    to   { transform: scaleX(1); opacity: 0; }
-  }
+	.bosia-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 2px;
+		width: 100%;
+		background: var(--bosia-loading-color, #f73b27);
+		z-index: 9999;
+		pointer-events: none;
+		transform-origin: left center;
+	}
+	.bosia-bar.loading {
+		animation: bosia-load 8s cubic-bezier(0.02, 0.5, 0.5, 1) forwards;
+	}
+	.bosia-bar.done {
+		animation: bosia-done 0.35s ease forwards;
+	}
+	@keyframes bosia-load {
+		from {
+			transform: scaleX(0);
+		}
+		to {
+			transform: scaleX(0.85);
+		}
+	}
+	@keyframes bosia-done {
+		from {
+			transform: scaleX(1);
+			opacity: 1;
+		}
+		to {
+			transform: scaleX(1);
+			opacity: 0;
+		}
+	}
 </style>

package/src/core/client/appState.svelte.ts

@@ -11,10 +11,10 @@ import { dataUrl } from "./prefetch.ts";
 import { router } from "./router.svelte.ts";
 
 class AppState {
-    pageData = $state<Record<string, any>>({});
-    layoutData = $state<Record<string, any>[]>([]);
-    routeParams = $state<Record<string, string>>({});
-    form = $state<any>(null);
+	pageData = $state<Record<string, any>>({});
+	layoutData = $state<Record<string, any>[]>([]);
+	routeParams = $state<Record<string, string>>({});
+	form = $state<any>(null);
 }
 
 export const appState = new AppState();
@@ -25,31 +25,33 @@ export const appState = new AppState();
  * `invalidateAll` default. No-op if the fetch fails or returns an error.
  */
 export async function refreshData(path: string): Promise<void> {
-    try {
-        const res = await fetch(dataUrl(path));
-        if (!res.ok) return;
-        const result = await res.json();
-        if (result?.redirect) {
-            router.navigate(result.redirect);
-            return;
-        }
-        if (result?.error) return;
-        appState.pageData = result?.pageData ?? {};
-        appState.layoutData = result?.layoutData ?? [];
-        appState.routeParams = result?.pageData?.params ?? appState.routeParams;
-        if (result?.metadata) {
-            if (result.metadata.title) document.title = result.metadata.title;
-            if (result.metadata.description) {
-                let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement | null;
-                if (!meta) {
-                    meta = document.createElement("meta");
-                    meta.name = "description";
-                    document.head.appendChild(meta);
-                }
-                meta.content = result.metadata.description;
-            }
-        }
-    } catch {
-        // best-effort — silently swallow
-    }
+	try {
+		const res = await fetch(dataUrl(path));
+		if (!res.ok) return;
+		const result = await res.json();
+		if (result?.redirect) {
+			router.navigate(result.redirect);
+			return;
+		}
+		if (result?.error) return;
+		appState.pageData = result?.pageData ?? {};
+		appState.layoutData = result?.layoutData ?? [];
+		appState.routeParams = result?.pageData?.params ?? appState.routeParams;
+		if (result?.metadata) {
+			if (result.metadata.title) document.title = result.metadata.title;
+			if (result.metadata.description) {
+				let meta = document.querySelector(
+					'meta[name="description"]',
+				) as HTMLMetaElement | null;
+				if (!meta) {
+					meta = document.createElement("meta");
+					meta.name = "description";
+					document.head.appendChild(meta);
+				}
+				meta.content = result.metadata.description;
+			}
+		}
+	} catch {
+		// best-effort — silently swallow
+	}
 }