bosia 0.2.3 → 0.3.0

package/src/core/client/enhance.ts

@@ -9,99 +9,104 @@ import { appState, refreshData } from "./appState.svelte.ts";
 import { router } from "./router.svelte.ts";
 
 export type ActionResult =
-    | { type: "success"; status: number; data: any }
-    | { type: "failure"; status: number; data: any }
-    | { type: "redirect"; status: number; location: string }
-    | { type: "error"; status: number; message: string };
+	| { type: "success"; status: number; data: any }
+	| { type: "failure"; status: number; data: any }
+	| { type: "redirect"; status: number; location: string }
+	| { type: "error"; status: number; message: string };
 
 export type SubmitFunction = (input: {
-    formData: FormData;
-    formElement: HTMLFormElement;
-    action: URL;
-    cancel: () => void;
-    submitter: HTMLElement | null;
-}) => void | ((opts: {
-    result: ActionResult;
-    formElement: HTMLFormElement;
-    update: (opts?: { reset?: boolean; invalidateAll?: boolean }) => Promise<void>;
-}) => void | Promise<void>);
+	formData: FormData;
+	formElement: HTMLFormElement;
+	action: URL;
+	cancel: () => void;
+	submitter: HTMLElement | null;
+}) =>
+	| void
+	| ((opts: {
+			result: ActionResult;
+			formElement: HTMLFormElement;
+			update: (opts?: { reset?: boolean; invalidateAll?: boolean }) => Promise<void>;
+	  }) => void | Promise<void>);
 
 async function applyResult(
-    result: ActionResult,
-    form: HTMLFormElement,
-    opts: { reset?: boolean; invalidateAll?: boolean } = {},
+	result: ActionResult,
+	form: HTMLFormElement,
+	opts: { reset?: boolean; invalidateAll?: boolean } = {},
 ): Promise<void> {
-    const reset = opts.reset !== false;
-    const invalidateAll = opts.invalidateAll !== false;
+	const reset = opts.reset !== false;
+	const invalidateAll = opts.invalidateAll !== false;
 
-    if (result.type === "redirect") {
-        router.navigate(result.location);
-        return;
-    }
-    if (result.type === "error") {
-        appState.form = { error: { message: result.message, status: result.status } };
-        console.warn(`[bosia] action error ${result.status}: ${result.message}`);
-        return;
-    }
-    if (result.type === "failure") {
-        appState.form = result.data;
-        return;
-    }
-    // success
-    appState.form = result.data;
-    if (reset) form.reset();
-    if (invalidateAll) {
-        await refreshData(window.location.pathname + window.location.search);
-    }
+	if (result.type === "redirect") {
+		router.navigate(result.location);
+		return;
+	}
+	if (result.type === "error") {
+		appState.form = { error: { message: result.message, status: result.status } };
+		console.warn(`[bosia] action error ${result.status}: ${result.message}`);
+		return;
+	}
+	if (result.type === "failure") {
+		appState.form = result.data;
+		return;
+	}
+	// success
+	appState.form = result.data;
+	if (reset) form.reset();
+	if (invalidateAll) {
+		await refreshData(window.location.pathname + window.location.search);
+	}
 }
 
 export function enhance(form: HTMLFormElement, submit?: SubmitFunction) {
-    async function handleSubmit(event: SubmitEvent) {
-        event.preventDefault();
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
 
-        const submitter = (event.submitter as HTMLElement | null) ?? null;
-        const formData = new FormData(form, submitter as HTMLElement | undefined);
+		const submitter = (event.submitter as HTMLElement | null) ?? null;
+		const formData = new FormData(form, submitter as HTMLElement | undefined);
 
-        // Resolve action URL — preserve `?/actionName` if the submitter or form sets it
-        const actionAttr = (submitter as HTMLButtonElement | HTMLInputElement | null)?.formAction
-            || form.action
-            || window.location.href;
-        const action = new URL(actionAttr, window.location.href);
+		// Resolve action URL — preserve `?/actionName` if the submitter or form sets it
+		const actionAttr =
+			(submitter as HTMLButtonElement | HTMLInputElement | null)?.formAction ||
+			form.action ||
+			window.location.href;
+		const action = new URL(actionAttr, window.location.href);
 
-        let cancelled = false;
-        const cancel = () => { cancelled = true; };
+		let cancelled = false;
+		const cancel = () => {
+			cancelled = true;
+		};
 
-        const callback = submit?.({ formData, formElement: form, action, cancel, submitter });
-        if (cancelled) return;
+		const callback = submit?.({ formData, formElement: form, action, cancel, submitter });
+		if (cancelled) return;
 
-        let result: ActionResult;
-        try {
-            const res = await fetch(action, {
-                method: "POST",
-                body: formData,
-                headers: { "x-bosia-action": "1", accept: "application/json" },
-            });
-            result = await res.json() as ActionResult;
-        } catch (err) {
-            const message = (err as Error)?.message ?? "Network error";
-            result = { type: "error", status: 0, message };
-            console.warn("[bosia] enhance: submission failed", err);
-        }
+		let result: ActionResult;
+		try {
+			const res = await fetch(action, {
+				method: "POST",
+				body: formData,
+				headers: { "x-bosia-action": "1", accept: "application/json" },
+			});
+			result = (await res.json()) as ActionResult;
+		} catch (err) {
+			const message = (err as Error)?.message ?? "Network error";
+			result = { type: "error", status: 0, message };
+			console.warn("[bosia] enhance: submission failed", err);
+		}
 
-        const update = (opts?: { reset?: boolean; invalidateAll?: boolean }) =>
-            applyResult(result, form, opts ?? {});
+		const update = (opts?: { reset?: boolean; invalidateAll?: boolean }) =>
+			applyResult(result, form, opts ?? {});
 
-        if (typeof callback === "function") {
-            await callback({ result, formElement: form, update });
-        } else {
-            await update();
-        }
-    }
+		if (typeof callback === "function") {
+			await callback({ result, formElement: form, update });
+		} else {
+			await update();
+		}
+	}
 
-    form.addEventListener("submit", handleSubmit);
-    return {
-        destroy() {
-            form.removeEventListener("submit", handleSubmit);
-        },
-    };
+	form.addEventListener("submit", handleSubmit);
+	return {
+		destroy() {
+			form.removeEventListener("submit", handleSubmit);
+		},
+	};
 }

package/src/core/client/hydrate.ts

@@ -2,7 +2,7 @@ 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";
 
@@ -12,57 +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;
-    }
-
-    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 });
-    }
+	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();
@@ -70,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 });
 }