bosia 0.8.5 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.8.5",
+	"version": "0.8.6",
 	"type": "module",
 	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing No Node.js, no Vite, no adapters.",
 	"keywords": [

package/src/core/client/App.svelte

@@ -63,6 +63,26 @@
 	let firstNav = true;
 	let navDoneTimer: ReturnType<typeof setTimeout> | null = null;
 
+	// Scroll after a nav settles: forward navs go to top (or the URL hash);
+	// back/forward navs restore the position saved for that history entry.
+	// Runs after tick() so the destination page's real height is in the DOM.
+	// goto({ noScroll: true }) flips `router.suppressScroll` for one nav.
+	function settleScroll() {
+		if (router.isPush && !router.suppressScroll) {
+			const hash = window.location.hash;
+			tick().then(() => {
+				if (!scrollToHash(hash)) window.scrollTo(0, 0);
+			});
+		} else if (!router.isPush) {
+			const pos = router.pendingScroll;
+			// ponytail: single post-tick restore; content that loads later (images
+			// without dimensions) can still shift it. Revisit only if reported.
+			if (pos) tick().then(() => window.scrollTo(pos.x, pos.y));
+		}
+		router.pendingScroll = null;
+		router.suppressScroll = false;
+	}
+
 	$effect(() => {
 		if (ssrMode) return;
 
@@ -247,13 +267,7 @@
 					appState.errorComponent = errMod.default;
 					appState.errorProps = { error: { status: errStatus, message: errMessage } };
 					appState.errorDepth = K;
-					if (router.isPush && !router.suppressScroll) {
-						const hash = window.location.hash;
-						tick().then(() => {
-							if (!scrollToHash(hash)) window.scrollTo(0, 0);
-						});
-					}
-					router.suppressScroll = false;
+					settleScroll();
 					settle({ url, params: match.params });
 				} catch {
 					window.location.href = path;
@@ -342,16 +356,7 @@
 			appState.errorProps = null;
 			appState.errorDepth = null;
 
-			// Scroll to top on forward navigation (not on popstate/back-forward).
-			// goto({ noScroll: true }) flips `router.suppressScroll` for one nav.
-			// If the destination URL has a hash, scroll to that element instead.
-			if (router.isPush && !router.suppressScroll) {
-				const hash = window.location.hash;
-				tick().then(() => {
-					if (!scrollToHash(hash)) window.scrollTo(0, 0);
-				});
-			}
-			router.suppressScroll = false;
+			settleScroll();
 
 			// Update document title and meta description from server metadata
 			if (result?.metadata) {

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

@@ -16,6 +16,20 @@ function buildTarget(path: string): { url: URL; params: Record<string, string> }
 	return { url, params: match?.params ?? {} };
 }
 
+// ─── Scroll restoration ───
+// Positions keyed by a per-entry index stamped into `history.state.bosiaIndex`.
+// `scrollRestoration = "manual"` because the browser restores at popstate time,
+// before the SPA has rendered the destination page — it clamps against the
+// wrong document height. We restore ourselves after the nav settles (App.svelte).
+// Persisted to sessionStorage on unload so reload / back-into-app still restores.
+const SCROLL_KEY = "bosia:scroll";
+let scrollPositions: Record<number, { x: number; y: number }> = {};
+let historyIndex = 0;
+
+function saveScroll() {
+	scrollPositions[historyIndex] = { x: window.scrollX, y: window.scrollY };
+}
+
 export function scrollToHash(hash: string): boolean {
 	if (typeof document === "undefined" || !hash) return false;
 	const raw = hash.startsWith("#") ? hash.slice(1) : hash;
@@ -45,6 +59,8 @@ export const router = new (class Router {
 	lastNavType: NavType = "enter";
 	/** Set by `goto({ noScroll: true })`; consumed once by App.svelte after the next nav settles. */
 	suppressScroll = false;
+	/** Saved scroll position for the entry a popstate landed on; consumed once by App.svelte after the nav settles. */
+	pendingScroll: { x: number; y: number } | null = null;
 
 	navigate(path: string, opts: { replace?: boolean; source?: NavType } = {}) {
 		if (this.currentRoute === path) return;
@@ -74,12 +90,15 @@ export const router = new (class Router {
 
 		this.lastNavType = navType;
 		this.isPush = true;
+		this.pendingScroll = null;
 		this.currentRoute = finalPath;
 		if (typeof history !== "undefined") {
 			if (opts.replace) {
-				history.replaceState({}, "", finalPath);
+				history.replaceState({ bosiaIndex: historyIndex }, "", finalPath);
 			} else {
-				history.pushState({}, "", finalPath);
+				saveScroll();
+				historyIndex++;
+				history.pushState({ bosiaIndex: historyIndex }, "", finalPath);
 			}
 		}
 	}
@@ -87,6 +106,22 @@ export const router = new (class Router {
 	init() {
 		if (typeof window === "undefined") return;
 
+		history.scrollRestoration = "manual";
+		try {
+			scrollPositions = JSON.parse(sessionStorage.getItem(SCROLL_KEY) ?? "{}");
+		} catch {
+			scrollPositions = {};
+		}
+		const stamped = history.state?.bosiaIndex != null;
+		historyIndex = stamped ? history.state.bosiaIndex : 0;
+		history.replaceState({ ...history.state, bosiaIndex: historyIndex }, "");
+		// Restore after a reload — manual mode means the browser won't. Only for
+		// entries we stamped before (a fresh visit has no bosiaIndex in state).
+		const initial = scrollPositions[historyIndex];
+		if (stamped && initial) {
+			requestAnimationFrame(() => window.scrollTo(initial.x, initial.y));
+		}
+
 		// Intercept <a> clicks for client-side navigation
 		window.addEventListener("click", (e) => {
 			// Let browser handle non-primary buttons, modifier-clicks, already-handled events
@@ -110,7 +145,9 @@ export const router = new (class Router {
 				e.preventDefault();
 				const finalPath = anchor.pathname + anchor.search + anchor.hash;
 				if (this.currentRoute !== finalPath) {
-					history.pushState({}, "", finalPath);
+					saveScroll();
+					historyIndex++;
+					history.pushState({ bosiaIndex: historyIndex }, "", finalPath);
 					this.currentRoute = finalPath;
 				}
 				scrollToHash(anchor.hash);
@@ -122,8 +159,13 @@ export const router = new (class Router {
 		});
 
 		// Browser back/forward
-		window.addEventListener("popstate", () => {
+		window.addEventListener("popstate", (e) => {
 			const finalPath = window.location.pathname + window.location.search + window.location.hash;
+			// Save the position of the entry we're leaving (historyIndex is still
+			// the old entry's), then look up where the landed-on entry was.
+			saveScroll();
+			historyIndex = e.state?.bosiaIndex ?? 0;
+			this.pendingScroll = scrollPositions[historyIndex] ?? null;
 			// Fire beforeNavigate listeners; popstate can't be reliably cancelled
 			// (browser history already advanced), so we surface the event for
 			// observation only — `cancel()` is a no-op for this source.
@@ -147,6 +189,14 @@ export const router = new (class Router {
 		// listeners can warn-on-leave (return value ignored; cancellation here
 		// requires `beforeunload`, not in scope).
 		window.addEventListener("beforeunload", () => {
+			// ponytail: beforeunload can be skipped on mobile page-discard; add a
+			// visibilitychange persist if restore-after-reload proves flaky there.
+			saveScroll();
+			try {
+				sessionStorage.setItem(SCROLL_KEY, JSON.stringify(scrollPositions));
+			} catch {
+				// sessionStorage unavailable (private mode / quota) — skip persistence.
+			}
 			const fromTarget = buildTarget(this.currentRoute);
 			const nav: Navigation = {
 				from: fromTarget,

package/src/core/plugins/inspector/bun-plugin.ts

@@ -1,12 +1,10 @@
 import { parse, compile } from "svelte/compiler";
 import MagicString from "magic-string";
-import { basename, relative } from "node:path";
+import { relative } from "node:path";
 import type { BunPlugin } from "bun";
 import { svelteMapCache } from "../../svelteCompiler.ts";
 import { lineColFromOffset } from "../../sourceLoc.ts";
 
-const VIRTUAL_NS = "bosia-inspector-css";
-
 type AnyNode = {
 	type?: string;
 	name?: string;
@@ -124,7 +122,6 @@ const fnv = (s: string): string => {
 export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPlugin {
 	const { cwd, target, dev } = opts;
 	const generate: "client" | "server" = target === "browser" ? "client" : "server";
-	const virtualCss = new Map<string, string>();
 
 	return {
 		name: "bosia-inspector",
@@ -139,7 +136,11 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					generate,
 					dev,
 					hmr: dev,
-					css: "external",
+					// Mirror the prod compiler (svelteCompiler.ts): client injects scoped
+					// CSS into the JS via `append_styles`, server discards it. No CSS
+					// chunks means Bun's `splitting:true` output-path collisions can't
+					// arise, so no runtime-injection workaround is needed.
+					css: generate === "client" ? "injected" : "external",
 					preserveWhitespace: dev,
 					preserveComments: dev,
 					cssHash: ({ css }) => `svelte-${fnv(css)}`,
@@ -164,39 +165,9 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 					svelteMapCache.set(args.path, m);
 				}
 
-				let js = dev ? fixBindShadow(result.js.code) : result.js.code;
-				// Inject component <style> blocks via runtime JS, not CSS chunks.
-				// Bun's `splitting: true` names CSS chunks after the importing JS
-				// chunk's `[name]`, not the virtual module's uid — so when several
-				// routes (e.g. multiple `+page.svelte`) transitively import the same
-				// styled component, each route emits its own CSS sidecar named
-				// `+page-<contentHash>.css`. Identical content → identical hash →
-				// "Multiple files share the same output path". Runtime injection
-				// avoids CSS chunking entirely.
-				if (result.css?.code?.trim() && generate !== "server") {
-					const safeBase = basename(args.path).replace(/\./g, "_");
-					const uid = `${safeBase}-${fnv(args.path)}-style.css`;
-					const virtualName = `${VIRTUAL_NS}:${uid}`;
-					virtualCss.set(virtualName, result.css.code);
-					js += `\nimport ${JSON.stringify(virtualName)};`;
-				}
-
+				const js = dev ? fixBindShadow(result.js.code) : result.js.code;
 				return { contents: js, loader: "ts" };
 			});
-
-			build.onResolve({ filter: new RegExp(`^${VIRTUAL_NS}:`) }, (args) => ({
-				path: args.path,
-				namespace: VIRTUAL_NS,
-			}));
-
-			build.onLoad({ filter: /.*/, namespace: VIRTUAL_NS }, (args) => {
-				const css = virtualCss.get(args.path) ?? "";
-				virtualCss.delete(args.path);
-				const contents = css
-					? `(()=>{const s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`
-					: "";
-				return { contents, loader: "js" };
-			});
 		},
 	};
 }