@ilha/router 0.1.1

package/dist/index.js

@@ -0,0 +1,342 @@
+import ilha, { context, html, mount } from "ilha";
+import { addRoute, createRouter, findRoute } from "rou3";
+//#region src/index.ts
+const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function wrapLayout(layout, page) {
+	return layout(page);
+}
+function wrapError(handler, page) {
+	const wrapper = ilha.render(() => {
+		try {
+			return page.toString();
+		} catch (e) {
+			const route = {
+				path: routePath(),
+				params: routeParams(),
+				search: routeSearch(),
+				hash: routeHash()
+			};
+			return handler({
+				message: e.message,
+				status: e.status,
+				stack: e.stack
+			}, route).toString();
+		}
+	});
+	wrapper.mount = (host, props) => {
+		try {
+			return page.mount(host, props);
+		} catch (e) {
+			const route = {
+				path: routePath(),
+				params: routeParams(),
+				search: routeSearch(),
+				hash: routeHash()
+			};
+			const errorIsland = handler({
+				message: e.message,
+				status: e.status,
+				stack: e.stack
+			}, route);
+			host.innerHTML = errorIsland.toString();
+			return errorIsland.mount(host, props);
+		}
+	};
+	return wrapper;
+}
+function buildReverseRegistry(registry) {
+	const map = /* @__PURE__ */ new Map();
+	for (const [name, island] of Object.entries(registry)) if (!map.has(island)) map.set(island, name);
+	return map;
+}
+/**
+* Mounts a route island with proper hydration for client-side navigation.
+* Looks up the island in the reverse registry, renders it with hydration
+* markers, and mounts it for interactivity.
+*/
+async function mountRouteWithHydration(island, host, registry, reverseRegistry) {
+	if (!island) {
+		host.innerHTML = `<div data-router-empty></div>`;
+		return () => {};
+	}
+	if (!registry) {
+		console.warn("[ilha-router] No registry provided for client-side navigation. Island will not be interactive.");
+		host.innerHTML = `<div data-router-view>${island.toString()}</div>`;
+		return () => {};
+	}
+	const name = reverseRegistry?.get(island) ?? Object.entries(registry).find(([, v]) => v === island)?.[0];
+	if (!name) {
+		console.warn("[ilha-router] Island not found in registry for client-side navigation.");
+		host.innerHTML = `<div data-router-view>${island.toString()}</div>`;
+		return () => {};
+	}
+	host.innerHTML = `<div data-router-view>${await island.hydratable({}, {
+		name,
+		as: "div",
+		snapshot: true
+	})}</div>`;
+	const islandHost = host.querySelector(`[data-ilha="${name}"]`);
+	if (islandHost) return island.mount(islandHost);
+	return () => {};
+}
+const routePath = context("router.path", "");
+const routeParams = context("router.params", {});
+const routeSearch = context("router.search", "");
+const routeHash = context("router.hash", "");
+function useRoute() {
+	return {
+		path: routePath,
+		params: routeParams,
+		search: routeSearch,
+		hash: routeHash
+	};
+}
+const activeIsland = context("router.active", null);
+let _records = [];
+let _rou3 = createRouter();
+let _islandToPattern = /* @__PURE__ */ new Map();
+function extractParams(matchParams) {
+	const params = {};
+	if (matchParams) for (const [k, v] of Object.entries(matchParams)) params[k] = decodeURIComponent(v);
+	return params;
+}
+function syncRouteFromURL(url) {
+	const parsed = typeof url === "string" ? new URL(url, "http://localhost") : url;
+	const match = findRoute(_rou3, "GET", parsed.pathname);
+	routePath(parsed.pathname);
+	routeParams(extractParams(match?.params));
+	routeSearch(parsed.search);
+	routeHash(parsed.hash);
+	activeIsland(match?.data ?? null);
+}
+/** Client-only fast path — reads directly from `location` instead of parsing a URL. */
+function syncRouteFromLocation() {
+	const match = findRoute(_rou3, "GET", location.pathname);
+	routePath(location.pathname);
+	routeParams(extractParams(match?.params));
+	routeSearch(location.search);
+	routeHash(location.hash);
+	activeIsland(match?.data ?? null);
+}
+/**
+* Prime route context signals from the current `location` so that islands
+* hydrated by `ilha.mount()` see the correct route values on their first
+* render — preventing a mismatch morph that would destroy hydrated bindings.
+*
+* Call this **before** `ilha.mount()` and **after** all routes have been
+* registered (i.e. after the `router().route(…).route(…)` chain).
+*
+* ```ts
+* import { mount } from "ilha";
+* import { pageRouter } from "ilha:pages";
+* import { registry } from "ilha:registry";
+*
+* pageRouter.prime();              // ← sync signals first
+* mount(registry, { root: … });   // ← then hydrate islands
+* pageRouter.mount("#app", { hydrate: true });
+* ```
+*/
+function prime() {
+	if (isBrowser) syncRouteFromLocation();
+}
+function navigate(to, opts = {}) {
+	if (!isBrowser) return;
+	if (to === location.pathname + location.search + location.hash) return;
+	if (opts.replace) history.replaceState(null, "", to);
+	else history.pushState(null, "", to);
+	syncRouteFromLocation();
+}
+function enableLinkInterception(root = document) {
+	if (!isBrowser) return () => {};
+	const handler = (e) => {
+		if (e.defaultPrevented) return;
+		const target = e.target.closest("a");
+		if (!target) return;
+		const href = target.getAttribute("href");
+		if (!href) return;
+		const isAnchorOnly = href.startsWith("#");
+		const isBlank = target.getAttribute("target") === "_blank";
+		const hasModifier = e.ctrlKey || e.metaKey || e.shiftKey;
+		const isExternal = !!target.hostname && (target.hostname !== location.hostname || target.protocol !== location.protocol);
+		const hasNoIntercept = target.hasAttribute("data-no-intercept");
+		if (isExternal || isAnchorOnly || isBlank || hasModifier || hasNoIntercept) return;
+		e.preventDefault();
+		navigate(target.pathname + target.search + target.hash);
+	};
+	root.addEventListener("click", handler);
+	return () => root.removeEventListener("click", handler);
+}
+const RouterView = ilha.render(() => {
+	const island = activeIsland();
+	if (!island) return `<div data-router-empty></div>`;
+	return `<div data-router-view>${island.toString()}</div>`;
+});
+const RouterLink = ilha.state("href", "").state("label", "").on("[data-link]@click", ({ state, event }) => {
+	event.preventDefault();
+	navigate(state.href());
+}).render(({ state }) => html`<a data-link href="${state.href}">${state.label}</a>`);
+function isActive(pattern) {
+	const match = findRoute(_rou3, "GET", routePath());
+	if (!match) return false;
+	return _islandToPattern.get(match.data) === pattern;
+}
+function router() {
+	_records = [];
+	_rou3 = createRouter();
+	_islandToPattern = /* @__PURE__ */ new Map();
+	let _popstateCleanup = null;
+	let _linkCleanup = null;
+	const builder = {
+		route(pattern, island) {
+			_records.push({
+				pattern,
+				island
+			});
+			addRoute(_rou3, "GET", pattern, island);
+			if (!_islandToPattern.has(island)) _islandToPattern.set(island, pattern);
+			return builder;
+		},
+		prime,
+		mount(target, { hydrate = false, registry } = {}) {
+			if (!isBrowser) {
+				console.warn("[ilha-router] mount() called in a non-browser environment");
+				return () => {};
+			}
+			const host = typeof target === "string" ? document.querySelector(target) : target;
+			if (!host) {
+				console.warn(`[ilha-router] No element found for selector "${target}"`);
+				return () => {};
+			}
+			syncRouteFromLocation();
+			const popHandler = () => syncRouteFromLocation();
+			window.addEventListener("popstate", popHandler);
+			_popstateCleanup = () => window.removeEventListener("popstate", popHandler);
+			_linkCleanup = enableLinkInterception(document);
+			let unmountView = null;
+			if (hydrate) {
+				const viewHost = host.querySelector("[data-router-view]") ?? host;
+				let currentMountedIsland = activeIsland();
+				const reverseRegistry = registry ? buildReverseRegistry(registry) : void 0;
+				let navVersion = 0;
+				const navHandler = ilha.render(() => {
+					const current = activeIsland();
+					if (current !== currentMountedIsland) {
+						const thisNav = ++navVersion;
+						queueMicrotask(async () => {
+							if (thisNav !== navVersion) return;
+							unmountView?.();
+							unmountView = await mountRouteWithHydration(current, viewHost, registry, reverseRegistry);
+							currentMountedIsland = current;
+						});
+					}
+					return "";
+				});
+				const navHost = document.createElement("div");
+				navHost.style.display = "none";
+				host.appendChild(navHost);
+				const unmountNavHandler = navHandler.mount(navHost);
+				return () => {
+					++navVersion;
+					unmountNavHandler();
+					navHost.remove();
+					unmountView?.();
+					_popstateCleanup?.();
+					_linkCleanup?.();
+					_popstateCleanup = null;
+					_linkCleanup = null;
+				};
+			}
+			let unmountIsland = null;
+			let currentMountedIsland = null;
+			let navVersion = 0;
+			unmountView = RouterView.mount(host);
+			/** Mount the active island onto the [data-router-view] container for interactivity. */
+			function mountActiveIsland(island) {
+				unmountIsland?.();
+				unmountIsland = null;
+				currentMountedIsland = island;
+				if (!island) return;
+				const viewHost = host?.querySelector("[data-router-view]");
+				if (viewHost) unmountIsland = island.mount(viewHost);
+			}
+			mountActiveIsland(activeIsland());
+			const navHandler = ilha.render(() => {
+				const current = activeIsland();
+				if (current !== currentMountedIsland) {
+					const thisNav = ++navVersion;
+					queueMicrotask(() => {
+						if (thisNav !== navVersion) return;
+						mountActiveIsland(current);
+					});
+				}
+				return "";
+			});
+			const navHost = document.createElement("div");
+			navHost.style.display = "none";
+			host.appendChild(navHost);
+			const unmountNavHandler = navHandler.mount(navHost);
+			return () => {
+				++navVersion;
+				unmountIsland?.();
+				unmountNavHandler();
+				navHost.remove();
+				unmountView?.();
+				_popstateCleanup?.();
+				_linkCleanup?.();
+				_popstateCleanup = null;
+				_linkCleanup = null;
+			};
+		},
+		render(url) {
+			syncRouteFromURL(url);
+			return RouterView.toString();
+		},
+		async renderHydratable(url, registry, options = {}) {
+			syncRouteFromURL(url);
+			const island = activeIsland();
+			if (!island) return `<div data-router-empty></div>`;
+			const name = buildReverseRegistry(registry).get(island);
+			if (!name) {
+				console.warn(`[ilha-router] renderHydratable: active island for "${routePath()}" is not in the registry. Falling back to plain SSR — the island will not be interactive on the client.`);
+				return `<div data-router-view>${island.toString()}</div>`;
+			}
+			return `<div data-router-view>${await island.hydratable({}, {
+				name,
+				as: "div",
+				snapshot: true,
+				...options
+			})}</div>`;
+		},
+		hydrate(registry, options = {}) {
+			if (!isBrowser) {
+				console.warn("[ilha-router] hydrate() called in a non-browser environment");
+				return () => {};
+			}
+			const root = options.root ?? document.body;
+			const target = options.target ?? root;
+			prime();
+			const { unmount } = mount(registry, { root });
+			const unmountRouter = this.mount(target, {
+				hydrate: true,
+				registry
+			});
+			return () => {
+				unmount();
+				unmountRouter();
+			};
+		}
+	};
+	return builder;
+}
+var src_default = {
+	router,
+	navigate,
+	useRoute,
+	isActive,
+	enableLinkInterception,
+	prime,
+	RouterView,
+	RouterLink
+};
+//#endregion
+export { RouterLink, RouterView, src_default as default, enableLinkInterception, isActive, navigate, prime, routeHash, routeParams, routePath, routeSearch, router, useRoute, wrapError, wrapLayout };