bosia 0.2.2 → 0.3.0

package/src/core/client/hydrate.ts

@@ -1,9 +1,10 @@
-import { hydrate } from "svelte";
+import { hydrate, mount } from "svelte";
 import App from "./App.svelte";
 import { router } from "./router.svelte.ts";
 import { initPrefetch } from "./prefetch.ts";
-import { findMatch, compileRoutes } from "../matcher.ts";
+import { findMatch, compileRoutes, canonicalPathname } from "../matcher.ts";
 import { clientRoutes } from "bosia:routes";
+import { appState } from "./appState.svelte.ts";
 
 // Pre-compile route patterns into RegExp at startup (shared by App.svelte and router via module reference)
 compileRoutes(clientRoutes);
@@ -11,40 +12,71 @@ compileRoutes(clientRoutes);
 // ─── Hydration ────────────────────────────────────────────
 
 async function main() {
-    const path = window.location.pathname;
-
-    router.init();
-    router.currentRoute = path;
-    initPrefetch();
-
-    // Resolve the current route so we can pre-load the components
-    // before handing off to App.svelte (avoids a flash of "Loading...")
-    const match = findMatch(clientRoutes, path);
-
-    let ssrPageComponent = null;
-    let ssrLayoutComponents: any[] = [];
-
-    if (match) {
-        const [pageMod, ...layoutMods] = await Promise.all([
-            match.route.page(),
-            ...match.route.layouts.map(l => l()),
-        ]);
-        ssrPageComponent = pageMod.default;
-        ssrLayoutComponents = layoutMods.map(m => m.default);
-        router.params = match.params;
-    }
-
-    hydrate(App, {
-        target: document.getElementById("app")!,
-        props: {
-            ssrMode: false,
-            ssrPageComponent,
-            ssrLayoutComponents,
-            ssrPageData: (window as any).__BOSIA_PAGE_DATA__ ?? {},
-            ssrLayoutData: (window as any).__BOSIA_LAYOUT_DATA__ ?? [],
-            ssrFormData: (window as any).__BOSIA_FORM_DATA__ ?? null,
-        },
-    });
+	const path = window.location.pathname;
+
+	router.init();
+
+	// Resolve the current route so we can pre-load the components
+	// before handing off to App.svelte (avoids a flash of "Loading...")
+	const match = findMatch(clientRoutes, path);
+
+	// Canonicalize trailing slash on initial mount — server already 308'd if
+	// SSR'd, but `ssr=false` shells and prerendered pages can land on the
+	// non-canonical URL. replaceState (no extra history entry).
+	if (match) {
+		const canonical = canonicalPathname(path, (match.route as any).trailingSlash ?? "never");
+		if (canonical !== null && typeof history !== "undefined") {
+			history.replaceState(
+				history.state,
+				"",
+				canonical + window.location.search + window.location.hash,
+			);
+		}
+	}
+	router.currentRoute = window.location.pathname + window.location.search + window.location.hash;
+	initPrefetch();
+
+	let ssrPageComponent = null;
+	let ssrLayoutComponents: any[] = [];
+
+	if (match) {
+		const [pageMod, ...layoutMods] = await Promise.all([
+			match.route.page(),
+			...match.route.layouts.map((l) => l()),
+		]);
+		ssrPageComponent = pageMod.default;
+		ssrLayoutComponents = layoutMods.map((m) => m.default);
+		router.params = match.params;
+	}
+
+	const ssrPageData = (window as any).__BOSIA_PAGE_DATA__ ?? {};
+	const ssrLayoutData = (window as any).__BOSIA_LAYOUT_DATA__ ?? [];
+	const ssrFormData = (window as any).__BOSIA_FORM_DATA__ ?? null;
+
+	// Seed shared client state so `use:enhance` and other helpers
+	// start from the same values App.svelte renders during hydration.
+	appState.pageData = ssrPageData;
+	appState.layoutData = ssrLayoutData;
+	appState.routeParams = ssrPageData?.params ?? match?.params ?? {};
+	appState.form = ssrFormData;
+
+	const target = document.getElementById("app")!;
+	const props = {
+		ssrMode: false,
+		ssrPageComponent,
+		ssrLayoutComponents,
+		ssrPageData,
+		ssrLayoutData,
+		ssrFormData,
+	};
+
+	// ssr=false → server shipped empty shell, no hydration markers exist.
+	// Use mount() instead of hydrate() to render fresh on the client.
+	if ((window as any).__BOSIA_SSR__ === false) {
+		mount(App, { target, props });
+	} else {
+		hydrate(App, { target, props });
+	}
 }
 
 main();
@@ -52,33 +84,33 @@ main();
 // ─── Hot Reload (dev only) ────────────────────────────────
 
 if (process.env.NODE_ENV !== "production") {
-    let connectedOnce = false;
-    let retryDelay = 1000;
-
-    function connectSSE() {
-        const es = new EventSource("/__bosia/sse");
-
-        es.addEventListener("reload", () => {
-            console.log("[Bosia] Reloading...");
-            window.location.reload();
-        });
-
-        es.onopen = () => {
-            retryDelay = 1000;
-            if (connectedOnce) {
-                // Server came back up after a restart — reload immediately
-                window.location.reload();
-            }
-            connectedOnce = true;
-        };
-
-        es.onerror = () => {
-            es.close();
-            console.log(`[Bosia] SSE disconnected. Retrying in ${retryDelay / 1000}s...`);
-            setTimeout(connectSSE, retryDelay);
-            retryDelay = Math.min(retryDelay + 1000, 5000);
-        };
-    }
-
-    connectSSE();
+	let connectedOnce = false;
+	let retryDelay = 1000;
+
+	function connectSSE() {
+		const es = new EventSource("/__bosia/sse");
+
+		es.addEventListener("reload", () => {
+			console.log("[Bosia] Reloading...");
+			window.location.reload();
+		});
+
+		es.onopen = () => {
+			retryDelay = 1000;
+			if (connectedOnce) {
+				// Server came back up after a restart — reload immediately
+				window.location.reload();
+			}
+			connectedOnce = true;
+		};
+
+		es.onerror = () => {
+			es.close();
+			console.log(`[Bosia] SSE disconnected. Retrying in ${retryDelay / 1000}s...`);
+			setTimeout(connectSSE, retryDelay);
+			retryDelay = Math.min(retryDelay + 1000, 5000);
+		};
+	}
+
+	connectSSE();
 }

package/src/core/client/prefetch.ts

@@ -4,9 +4,9 @@
 
 /** Builds the `/__bosia/data/…` URL for a given client path. */
 export function dataUrl(path: string): string {
-    const url = new URL(path, window.location.origin);
-    let p = url.pathname.replace(/\/$/, "");
-    return `/__bosia/data${p || "/index"}.json${url.search}`;
+	const url = new URL(path, window.location.origin);
+	let p = url.pathname.replace(/\/$/, "");
+	return `/__bosia/data${p || "/index"}.json${url.search}`;
 }
 
 export const prefetchCache = new Map<string, { data: any; ts: number }>();
@@ -17,108 +17,115 @@ const pending = new Set<string>();
 
 /** Returns cached prefetch data for a path and removes it from cache. */
 export function consumePrefetch(path: string): any | null {
-    const entry = prefetchCache.get(path);
-    if (entry === undefined) return null;
-    prefetchCache.delete(path);
-    if (Date.now() - entry.ts > 30_000) return null;
-    return entry.data;
+	const entry = prefetchCache.get(path);
+	if (entry === undefined) return null;
+	prefetchCache.delete(path);
+	if (Date.now() - entry.ts > 30_000) return null;
+	return entry.data;
 }
 
 /** Prefetches data for a path and stores in cache. No-op if already cached/in-flight. */
 export async function prefetchPath(path: string): Promise<void> {
-    const existing = prefetchCache.get(path);
-    if (existing && Date.now() - existing.ts <= 30_000) return;
-    if (existing) prefetchCache.delete(path);
-    if (pending.has(path)) return;
-
-    pending.add(path);
-    try {
-        const res = await fetch(dataUrl(path));
-        if (res.ok) {
-            if (prefetchCache.size >= MAX_PREFETCH_ENTRIES) {
-                const oldest = prefetchCache.keys().next().value;
-                if (oldest !== undefined) prefetchCache.delete(oldest);
-            }
-            prefetchCache.set(path, { data: await res.json(), ts: Date.now() });
-        }
-    } catch {
-        // Silently ignore — prefetch is best-effort
-    } finally {
-        pending.delete(path);
-    }
+	const existing = prefetchCache.get(path);
+	if (existing && Date.now() - existing.ts <= 30_000) return;
+	if (existing) prefetchCache.delete(path);
+	if (pending.has(path)) return;
+
+	pending.add(path);
+	try {
+		const res = await fetch(dataUrl(path));
+		if (res.ok) {
+			if (prefetchCache.size >= MAX_PREFETCH_ENTRIES) {
+				const oldest = prefetchCache.keys().next().value;
+				if (oldest !== undefined) prefetchCache.delete(oldest);
+			}
+			prefetchCache.set(path, { data: await res.json(), ts: Date.now() });
+		}
+	} catch {
+		// Silently ignore — prefetch is best-effort
+	} finally {
+		pending.delete(path);
+	}
 }
 
 function getLinkHref(anchor: HTMLAnchorElement): string | null {
-    if (anchor.origin !== window.location.origin) return null;
-    if (anchor.target) return null;
-    if (anchor.hasAttribute("download")) return null;
-    return anchor.pathname + anchor.search;
+	if (anchor.origin !== window.location.origin) return null;
+	if (anchor.target) return null;
+	if (anchor.hasAttribute("download")) return null;
+	return anchor.pathname + anchor.search;
 }
 
 function observeViewportLinks(container: Element | Document = document) {
-    const observer = new IntersectionObserver((entries) => {
-        for (const entry of entries) {
-            if (!entry.isIntersecting) continue;
-            const anchor = entry.target as HTMLAnchorElement;
-            const href = getLinkHref(anchor);
-            if (href) prefetchPath(href);
-            observer.unobserve(anchor);
-        }
-    }, { rootMargin: "0px" });
-
-    const links = (container === document ? document : container as Element)
-        .querySelectorAll<HTMLAnchorElement>("a[data-bosia-preload='viewport']");
-
-    for (const link of links) {
-        observer.observe(link);
-    }
-
-    return observer;
+	const observer = new IntersectionObserver(
+		(entries) => {
+			for (const entry of entries) {
+				if (!entry.isIntersecting) continue;
+				const anchor = entry.target as HTMLAnchorElement;
+				const href = getLinkHref(anchor);
+				if (href) prefetchPath(href);
+				observer.unobserve(anchor);
+			}
+		},
+		{ rootMargin: "0px" },
+	);
+
+	const links = (
+		container === document ? document : (container as Element)
+	).querySelectorAll<HTMLAnchorElement>("a[data-bosia-preload='viewport']");
+
+	for (const link of links) {
+		observer.observe(link);
+	}
+
+	return observer;
 }
 
 export function initPrefetch(): void {
-    // ── Hover strategy (event delegation, 20ms debounce) ─────
-    let hoverTimer: ReturnType<typeof setTimeout> | null = null;
-
-    document.addEventListener("mouseover", (e) => {
-        if (!(e.target instanceof Element)) return;
-        // Early exit: skip if no [data-bosia-preload="hover"] ancestor exists
-        const preloadEl = e.target.closest("[data-bosia-preload]");
-        if (!preloadEl || preloadEl.getAttribute("data-bosia-preload") !== "hover") return;
-        const anchor = e.target.closest("a") as HTMLAnchorElement | null;
-        if (!anchor) return;
-        const href = getLinkHref(anchor);
-        if (!href) return;
-
-        if (hoverTimer) clearTimeout(hoverTimer);
-        hoverTimer = setTimeout(() => prefetchPath(href), 100);
-    });
-
-    document.addEventListener("mouseout", () => {
-        if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; }
-    });
-
-    // ── Viewport strategy ─────────────────────────────────────
-    const observer = observeViewportLinks();
-
-    // Pick up links added after initial render (e.g., after client navigation)
-    const mutation = new MutationObserver((records) => {
-        for (const record of records) {
-            for (const node of record.addedNodes) {
-                if (!(node instanceof Element)) continue;
-                // The node itself might be a viewport link
-                if (node.matches("a[data-bosia-preload='viewport']")) {
-                    observer.observe(node as HTMLAnchorElement);
-                }
-                // Or it might contain viewport links
-                for (const link of node.querySelectorAll<HTMLAnchorElement>(
-                    "a[data-bosia-preload='viewport']"
-                )) {
-                    observer.observe(link);
-                }
-            }
-        }
-    });
-
-    mutation.observe(document.body, { childList: true, subtree: true });
+	// ── Hover strategy (event delegation, 20ms debounce) ─────
+	let hoverTimer: ReturnType<typeof setTimeout> | null = null;
+
+	document.addEventListener("mouseover", (e) => {
+		if (!(e.target instanceof Element)) return;
+		// Early exit: skip if no [data-bosia-preload="hover"] ancestor exists
+		const preloadEl = e.target.closest("[data-bosia-preload]");
+		if (!preloadEl || preloadEl.getAttribute("data-bosia-preload") !== "hover") return;
+		const anchor = e.target.closest("a") as HTMLAnchorElement | null;
+		if (!anchor) return;
+		const href = getLinkHref(anchor);
+		if (!href) return;
+
+		if (hoverTimer) clearTimeout(hoverTimer);
+		hoverTimer = setTimeout(() => prefetchPath(href), 100);
+	});
+
+	document.addEventListener("mouseout", () => {
+		if (hoverTimer) {
+			clearTimeout(hoverTimer);
+			hoverTimer = null;
+		}
+	});
+
+	// ── Viewport strategy ─────────────────────────────────────
+	const observer = observeViewportLinks();
+
+	// Pick up links added after initial render (e.g., after client navigation)
+	const mutation = new MutationObserver((records) => {
+		for (const record of records) {
+			for (const node of record.addedNodes) {
+				if (!(node instanceof Element)) continue;
+				// The node itself might be a viewport link
+				if (node.matches("a[data-bosia-preload='viewport']")) {
+					observer.observe(node as HTMLAnchorElement);
+				}
+				// Or it might contain viewport links
+				for (const link of node.querySelectorAll<HTMLAnchorElement>(
+					"a[data-bosia-preload='viewport']",
+				)) {
+					observer.observe(link);
+				}
+			}
+		}
+	});
+
+	mutation.observe(document.body, { childList: true, subtree: true });
 }

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

@@ -2,56 +2,69 @@
 // Svelte 5 rune-based reactive router.
 // Singleton used by App.svelte and hydrate.ts.
 
-import { findMatch } from "../matcher.ts";
+import { findMatch, canonicalPathname } from "../matcher.ts";
 import { clientRoutes } from "bosia:routes";
 
-export const router = new class Router {
-    currentRoute = $state(typeof window !== "undefined" ? window.location.pathname + window.location.search + window.location.hash : "/");
-    params = $state<Record<string, string>>({});
-    /** True when navigation was triggered by a link click / navigate() call, false on popstate (back/forward). */
-    isPush = $state(true);
-
-    navigate(path: string) {
-        if (this.currentRoute === path) return;
-        // Unknown route — let the server handle it (renders +error.svelte with 404)
-        const pathname = path.split("?")[0].split("#")[0];
-        if (!findMatch(clientRoutes, pathname)) {
-            window.location.href = path;
-            return;
-        }
-        this.isPush = true;
-        this.currentRoute = path;
-        if (typeof history !== "undefined") {
-            history.pushState({}, "", path);
-        }
-    }
-
-    init() {
-        if (typeof window === "undefined") return;
-
-        // Intercept <a> clicks for client-side navigation
-        window.addEventListener("click", (e) => {
-            // Let browser handle non-primary buttons, modifier-clicks, already-handled events
-            if (e.button !== 0) return;
-            if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-            if (e.defaultPrevented) return;
-
-            const anchor = (e.target as HTMLElement).closest("a");
-            if (!anchor) return;
-            if (anchor.origin !== window.location.origin) return;
-            if (anchor.target) return;
-            if (anchor.hasAttribute("download")) return;
-            if (anchor.rel.split(/\s+/).includes("external")) return;
-            if (anchor.protocol !== "https:" && anchor.protocol !== "http:") return;
-
-            e.preventDefault();
-            this.navigate(anchor.pathname + anchor.search + anchor.hash);
-        });
-
-        // Browser back/forward
-        window.addEventListener("popstate", () => {
-            this.isPush = false;
-            this.currentRoute = window.location.pathname + window.location.search + window.location.hash;
-        });
-    }
-}();
+export const router = new (class Router {
+	currentRoute = $state(
+		typeof window !== "undefined"
+			? window.location.pathname + window.location.search + window.location.hash
+			: "/",
+	);
+	params = $state<Record<string, string>>({});
+	/** True when navigation was triggered by a link click / navigate() call, false on popstate (back/forward). */
+	isPush = $state(true);
+
+	navigate(path: string) {
+		if (this.currentRoute === path) return;
+		// Unknown route — let the server handle it (renders +error.svelte with 404)
+		const queryHash = path.slice(path.split("?")[0].split("#")[0].length);
+		const pathname = path.split("?")[0].split("#")[0];
+		const match = findMatch(clientRoutes, pathname);
+		if (!match) {
+			window.location.href = path;
+			return;
+		}
+		// Canonicalize trailing slash before navigating (matches server 308 behavior)
+		const canonical = canonicalPathname(
+			pathname,
+			(match.route as any).trailingSlash ?? "never",
+		);
+		const finalPath = canonical !== null ? canonical + queryHash : path;
+		this.isPush = true;
+		this.currentRoute = finalPath;
+		if (typeof history !== "undefined") {
+			history.pushState({}, "", finalPath);
+		}
+	}
+
+	init() {
+		if (typeof window === "undefined") return;
+
+		// Intercept <a> clicks for client-side navigation
+		window.addEventListener("click", (e) => {
+			// Let browser handle non-primary buttons, modifier-clicks, already-handled events
+			if (e.button !== 0) return;
+			if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+			if (e.defaultPrevented) return;
+
+			const anchor = (e.target as HTMLElement).closest("a");
+			if (!anchor) return;
+			if (anchor.origin !== window.location.origin) return;
+			if (anchor.target) return;
+			if (anchor.hasAttribute("download")) return;
+			if (anchor.rel.split(/\s+/).includes("external")) return;
+			if (anchor.protocol !== "https:" && anchor.protocol !== "http:") return;
+
+			e.preventDefault();
+			this.navigate(anchor.pathname + anchor.search + anchor.hash);
+		});
+
+		// Browser back/forward
+		window.addEventListener("popstate", () => {
+			this.isPush = false;
+			this.currentRoute =
+				window.location.pathname + window.location.search + window.location.hash;
+		});
+	}
+})();