bosia 0.2.2 → 0.3.0

package/src/core/client/App.svelte

@@ -1,111 +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";
-
-  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 ?? []);
-  let pageData = $state<Record<string, any>>(ssrPageData ?? {});
-  let layoutData = $state<Record<string, any>[]>(ssrLayoutData ?? []);
-  // Kept separate to avoid a read→write cycle inside the $effect below
-  let routeParams = $state<Record<string, string>>(ssrPageData?.params ?? {});
-  let formData = $state<any>(ssrFormData);
-  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
-
-    formData = 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);
-      pageData = result?.pageData ?? {};
-      layoutData = result?.layoutData ?? [];
-      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>
 
 <!--
@@ -114,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

@@ -0,0 +1,57 @@
+// ─── Shared App State ─────────────────────────────────────
+// Singleton holding reactive cells that App.svelte renders from.
+// Lives in a module so client-side helpers (e.g. `use:enhance`)
+// can read and update the same state without going through props.
+//
+// Server-side: never touched. App.svelte's template branches on
+// `ssrMode` and reads from `ssrXxx` props directly during SSR,
+// so concurrent requests don't share these cells.
+
+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);
+}
+
+export const appState = new AppState();
+
+/**
+ * Re-fetch loader data for the given path and apply to `appState`.
+ * Used by `use:enhance` after a successful action — mirrors SvelteKit's
+ * `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
+	}
+}

package/src/core/client/enhance.ts

@@ -0,0 +1,112 @@
+// ─── use:enhance ──────────────────────────────────────────
+// Progressive enhancement for `<form method="POST">`. Intercepts
+// submission, POSTs via fetch with `x-bosia-action: 1`, parses the
+// JSON action result, and updates shared form/page state without a
+// full page reload. Falls back to native form submission when JS is
+// disabled because nothing is wired up until this action runs.
+
+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 };
+
+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>);
+
+async function applyResult(
+	result: ActionResult,
+	form: HTMLFormElement,
+	opts: { reset?: boolean; invalidateAll?: boolean } = {},
+): Promise<void> {
+	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);
+	}
+}
+
+export function enhance(form: HTMLFormElement, submit?: SubmitFunction) {
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		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);
+
+		let cancelled = false;
+		const cancel = () => {
+			cancelled = true;
+		};
+
+		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);
+		}
+
+		const update = (opts?: { reset?: boolean; invalidateAll?: boolean }) =>
+			applyResult(result, form, opts ?? {});
+
+		if (typeof callback === "function") {
+			await callback({ result, formElement: form, update });
+		} else {
+			await update();
+		}
+	}
+
+	form.addEventListener("submit", handleSubmit);
+	return {
+		destroy() {
+			form.removeEventListener("submit", handleSubmit);
+		},
+	};
+}