@markless/router 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,19 +1,11 @@
-import { i as normalizeRouteFileId, n as matchRouteManifest, r as normalizeRequestPathname, t as buildRouteManifestFromFileIds } from "./route-manifest-DPgGIyrS.js";
-import { n as parseRequestFile, r as transformRequestFileSource, t as normalizeRequestFileId } from "./request-files-C-0LLSsx.js";
+import { c as PREFETCH_ATTRIBUTE, i as HTML_ATTRIBUTES_SLOT, l as REPLACE_ATTRIBUTE, o as routeMountTarget, s as LINK_ATTRIBUTE, t as rememberRequestLocals, u as SCROLL_ATTRIBUTE } from "./request-locals-z3rJTizs.js";
+import { a as normalizeRequestPathname, c as parseRequestFile, i as matchRouteManifest, l as transformRequestFileSource, n as buildRouteManifestFromFileIds, o as normalizeRouteFileId, s as normalizeRequestFileId } from "./route-manifest-DMizh42B.js";
 import { createExternalDelegateStructureTokens, createExternalDelegateView } from "@markless/web/fns/external-delegate";
 import { render } from "@markless/web/render";
-import { MARKLESS_PENDING_MIN_VISIBLE_MS as MARKLESS_NAV_PENDING_MIN_MS, settleOrPendingDeadline } from "@markless/web";
-//#region src/navigation-hold.ts
-async function holdNavigationSwapUntilSettled(input) {
-	const settled = input.runtime.whenAsyncBoundariesSettled?.();
-	if (settled) {
-		if (await settleOrPendingDeadline(settled, input.clock?.wait) === "deadline") await input.runtime.holdPendingSettleCommits?.(MARKLESS_NAV_PENDING_MIN_MS);
-	}
-	if (input.signal?.aborted) return false;
-}
-//#endregion
+import { MARKLESS_PENDING_MIN_VISIBLE_MS as MARKLESS_NAV_PENDING_MIN_MS, settleOrPendingDeadline } from "@markless/web/fns/pending-timing";
 //#region src/route-state.ts
 const MARKLESS_ROUTER_ROUTE_EVENT = "marklessrouternavigate";
+const MARKLESS_ROUTER_RENDERED_EVENT = "marklessrouterrendered";
 const MARKLESS_ROUTER_RENDERER_STARTED = "__marklessRouterRouteRendererStarted";
 function routePageProps(route) {
 	const url = new URL(route.url);
@@ -31,6 +23,66 @@ function dispatchRouteUpdate(document, update) {
 	document.dispatchEvent(new CustomEvent(MARKLESS_ROUTER_ROUTE_EVENT, { detail: update }));
 }
 //#endregion
+//#region src/navigate.ts
+/**
+* Navigates to `href` exactly as a click on `<Link href={href}>` would: a page of this app swaps in
+* place, anything else loads as a document. The promise resolves once the new page is in place; a
+* navigation that loads a new document leaves this page, so its promise never settles.
+* Runs in the browser only.
+*/
+function navigate(href, options = {}) {
+	if (typeof document === "undefined") throw new Error("MARKLESS_ROUTER_NAVIGATE_SERVER: navigate() runs in the browser. Call it from an event handler or other browser code, not while the page renders on the server.");
+	const d = document;
+	const w = d.defaultView ?? window;
+	const url = new URL(href, d.baseURI);
+	const rendered = new Promise((resolve) => d.addEventListener(MARKLESS_ROUTER_RENDERED_EVENT, () => resolve(), { once: true }));
+	const anchor = d.createElement("a");
+	anchor.href = url.href;
+	anchor.hidden = true;
+	anchor.setAttribute(LINK_ATTRIBUTE, "");
+	if (options.replace) anchor.setAttribute(REPLACE_ATTRIBUTE, "");
+	if (options.scroll === false) anchor.setAttribute(SCROLL_ATTRIBUTE, "manual");
+	let reached = false;
+	let routed = false;
+	const last = (event) => {
+		if (event.target !== anchor) return;
+		reached = true;
+		routed = event.defaultPrevented;
+		event.preventDefault();
+	};
+	w.addEventListener("click", last);
+	d.body.append(anchor);
+	try {
+		anchor.dispatchEvent(new MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			button: 0
+		}));
+	} finally {
+		anchor.remove();
+		w.removeEventListener("click", last);
+	}
+	if (routed || !reached) return rendered;
+	const inPage = url.hash !== "" && withoutHash(url.href) === withoutHash(w.location.href);
+	if (options.replace) w.location.replace(url.href);
+	else w.location.assign(url.href);
+	return inPage ? Promise.resolve() : new Promise(() => {});
+}
+function withoutHash(href) {
+	const at = href.indexOf("#");
+	return at === -1 ? href : href.slice(0, at);
+}
+//#endregion
+//#region src/navigation-hold.ts
+async function holdNavigationSwapUntilSettled(input) {
+	const settled = input.runtime.whenAsyncBoundariesSettled?.();
+	if (settled) {
+		if (await settleOrPendingDeadline(settled, input.clock?.wait) === "deadline") await input.runtime.holdPendingSettleCommits?.(MARKLESS_NAV_PENDING_MIN_MS);
+	}
+	if (input.signal?.aborted) return false;
+}
+//#endregion
 //#region src/route-renderer.ts
 const CURRENT_ROUTE_CONTAINER = "__marklessRouterCurrentRouteContainer";
 function startRouteUpdateRenderer(document = window.document) {
@@ -48,22 +100,26 @@ async function renderRouteUpdate(document, update) {
 		if (!artifact.renderData) throw new Error(`MARKLESS_ROUTER_RENDER_DATA_MISSING: Navigated route ${JSON.stringify(update.route.file)} has no linked render-data module.`);
 		const props = routePageProps(update.route);
 		const state = document;
+		const outgoing = state[CURRENT_ROUTE_CONTAINER];
 		const container = await render({
 			renderData: artifact.renderData,
 			loadSymbol: artifact.loadSymbol,
 			props
 		}, {
-			target: document.body,
+			target: routeMountTarget(document, outgoing?.root),
 			beforeMount: async (incoming) => {
 				if (await holdNavigationSwapUntilSettled({
 					runtime: incoming.runtime,
 					signal: update.signal
 				}) === false) return false;
-				state[CURRENT_ROUTE_CONTAINER]?.runtime?.dispose?.();
+				outgoing?.runtime?.dispose?.();
 				return true;
 			}
 		});
-		if (!update.signal?.aborted) state[CURRENT_ROUTE_CONTAINER] = container;
+		if (!update.signal?.aborted) {
+			state[CURRENT_ROUTE_CONTAINER] = container;
+			document.dispatchEvent(new CustomEvent(MARKLESS_ROUTER_RENDERED_EVENT));
+		}
 	} finally {
 		update.onRendered?.();
 	}
@@ -71,9 +127,6 @@ async function renderRouteUpdate(document, update) {
 //#endregion
 //#region src/spa-navigation.ts
 const STARTED = "__marklessRouterSpaNavigationStarted";
-const LINK_ATTRIBUTE = "data-markless-router-link";
-const REPLACE_ATTRIBUTE = "data-markless-router-replace";
-const SCROLL_ATTRIBUTE = "data-markless-router-scroll";
 const LINK_INFO = "__marklessRouterLink";
 function hashRoutePath(url) {
 	return url.hash.startsWith("#/") ? url.hash.slice(1) : void 0;
@@ -88,6 +141,7 @@ async function __marklessRouterStartSpaNavigation(options) {
 	state[STARTED] = true;
 	const context = {
 		documentModuleLoader: options.documentModuleLoader,
+		documentNavigation: options.documentNavigation,
 		manifest: buildRouteManifestFromFileIds(options.routeFileIds),
 		pageModuleLoaders: options.pageModuleLoaders,
 		preloadRouteModule: options.preloadRouteModule,
@@ -98,23 +152,30 @@ async function __marklessRouterStartSpaNavigation(options) {
 	navigation.addEventListener("navigate", (event) => {
 		handleNavigateEvent(event, context);
 	});
-	if (typeof __MARKLESS_DEBUG_ENABLED__ !== "undefined" && __MARKLESS_DEBUG_ENABLED__) await import("./debug-channel-CSzo-Zj8.js").then((n) => n.n).then((debug) => debug.__marklessDebugRegisterRouter(void 0, "spa-click-listener")).catch(() => {});
-	if (typeof __MARKLESS_DEBUG_ENABLED__ !== "undefined" && __MARKLESS_DEBUG_ENABLED__) await import("./debug-channel-CSzo-Zj8.js").then((n) => n.n).then((debug) => debug.__marklessDebugRegisterRouter(void 0, "navigation-event")).catch(() => {});
+	if (typeof __MARKLESS_DEBUG_ENABLED__ !== "undefined" && __MARKLESS_DEBUG_ENABLED__) await import("./debug-channel-CewnC9fH.js").then((debug) => debug.__marklessDebugRegisterRouter(void 0, "spa-click-listener")).catch(() => {});
+	if (typeof __MARKLESS_DEBUG_ENABLED__ !== "undefined" && __MARKLESS_DEBUG_ENABLED__) await import("./debug-channel-CewnC9fH.js").then((debug) => debug.__marklessDebugRegisterRouter(void 0, "navigation-event")).catch(() => {});
 	{
 		const bootUrl = parseSameOriginUrl(runtimeWindow.location.href, runtimeWindow.location.href);
 		const bootHashPath = bootUrl ? hashRoutePath(bootUrl) : void 0;
 		if (bootUrl && bootHashPath && matchRouteManifest(bootHashPath, context.manifest)) renderRoute(bootUrl, context);
 	}
 }
+const pendingPolyfills = /* @__PURE__ */ new WeakMap();
 async function ensureNavigationRuntime(runtimeWindow = browserWindow(), loadPolyfill) {
-	if (!runtimeWindow.navigation) {
-		const { applyPolyfill } = await (loadPolyfill?.() ?? import("@virtualstate/navigation"));
-		runtimeWindow.navigation = applyPolyfill({
-			interceptEvents: false,
-			window: runtimeWindow
-		});
+	if (runtimeWindow.navigation) return runtimeWindow.navigation;
+	let pending = pendingPolyfills.get(runtimeWindow);
+	if (!pending) {
+		pending = (async () => {
+			const { applyPolyfill } = await (loadPolyfill?.() ?? import("@virtualstate/navigation"));
+			return runtimeWindow.navigation ??= applyPolyfill({
+				interceptEvents: false,
+				window: runtimeWindow
+			});
+		})();
+		pendingPolyfills.set(runtimeWindow, pending);
+		pending.catch(() => pendingPolyfills.delete(runtimeWindow));
 	}
-	return runtimeWindow.navigation;
+	return pending;
 }
 function handleNavigateEvent(event, context) {
 	const url = routeUrl(event, context);
@@ -136,7 +197,10 @@ async function renderRoute(url, context, signal) {
 		return;
 	}
 	preloadRouteModule(context, match.route.file);
-	const [page, document] = await Promise.all([loadPageModule(), context.documentModuleLoader?.()]);
+	const [page, document] = await Promise.all([loadPageModule(), context.documentModuleLoader?.()]).catch((error) => {
+		context.window.location.assign(url.href);
+		throw error;
+	});
 	if (signal?.aborted) return;
 	const update = {
 		document,
@@ -167,17 +231,17 @@ function warnUnknownHashRoute(url) {
 function handleLinkClick(event, context, navigation) {
 	if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
 	const anchor = sourceAnchor(event);
-	if (!anchor || !anchor.hasAttribute(LINK_ATTRIBUTE) || !isEligibleLink(anchor)) return;
+	if (!anchor || !anchor.hasAttribute("data-markless-router-link") || !isEligibleLink(anchor)) return;
 	const url = parseSameOriginUrl(anchor.href, context.window.location.href);
 	const match = url && matchRouteManifest(routePathname(url, context), context.manifest);
-	if (!match) return;
+	if (!url || !match || context.documentNavigation === "document" && !hashRoutePath(url)) return;
 	preloadRouteModule(context, match.route.file);
 	event.preventDefault();
 	navigation.navigate(url.href, {
-		history: anchor.hasAttribute(REPLACE_ATTRIBUTE) ? "replace" : "push",
+		history: anchor.hasAttribute("data-markless-router-replace") ? "replace" : "push",
 		info: {
 			[LINK_INFO]: true,
-			scroll: anchor.getAttribute(SCROLL_ATTRIBUTE) === "manual" ? "manual" : void 0
+			scroll: anchor.getAttribute("data-markless-router-scroll") === "manual" ? "manual" : void 0
 		}
 	});
 }
@@ -189,7 +253,7 @@ function preloadRouteModule(context, file) {
 function routeUrl(event, context) {
 	const destination = parseSameOriginUrl(event.destination.url, context.window.location.href);
 	const hashRouteNavigation = event.hashChange === true && !!destination && hashRoutePath(destination) !== void 0;
-	if (!isMarklessRouterNavigation(event) && !hashRouteNavigation || event.canIntercept === false || event.navigationType === "reload" || event.hashChange && !hashRouteNavigation || event.downloadRequest != null || event.formData != null) return;
+	if (!isMarklessRouterNavigation(event) && !hashRouteNavigation || context.documentNavigation === "document" && !hashRouteNavigation || event.canIntercept === false || event.navigationType === "reload" || event.hashChange && !hashRouteNavigation || event.downloadRequest != null || event.formData != null) return;
 	const matched = destination && matchRouteManifest(routePathname(destination), context.manifest) ? destination : void 0;
 	if (!matched && hashRouteNavigation && destination) warnUnknownHashRoute(destination);
 	return matched;
@@ -226,6 +290,7 @@ function browserWindow() {
 function __marklessCreateHttpContext(event) {
 	const context = event.context ?? {};
 	const url = event.url ?? new URL("http://localhost/");
+	if (event.req) rememberRequestLocals(event.req, context, event.res?.headers);
 	return {
 		locals: context,
 		params: context.params ?? {},
@@ -236,9 +301,11 @@ function __marklessCreateHttpContext(event) {
 }
 const Html = Object.assign(function Html(props) {
 	return props.children;
-}, { renderSsr(props = {}) {
+}, { renderSsr(props = {}, renderContext) {
+	const { children, ...attributes } = props;
+	if (renderContext?.["__marklessRouterHtmlAttributes"]) Object.assign(renderContext[HTML_ATTRIBUTES_SLOT], attributes);
 	return {
-		html: props.children == null ? "" : String(props.children),
+		html: children == null ? "" : String(children),
 		elementCount: 0
 	};
 } });
@@ -252,7 +319,7 @@ const Link = Object.assign(function Link(props = {}) {
 		return {
 			root: anchor,
 			view: linkExternalDelegateView(),
-			liveHostNodes: new Map([["router:link", anchor]])
+			liveHostNodes: /* @__PURE__ */ new Map([["router:link", anchor]])
 		};
 	},
 	renderSsr(props = {}, renderContext) {
@@ -285,9 +352,10 @@ function linkAnchorAttributes(props) {
 		if (attributeValue !== void 0) attributes.set(name, attributeValue);
 	}
 	attributes.set("href", typeof props.href === "string" ? props.href : "#");
-	attributes.set("data-markless-router-link", "");
-	if (props.replace) attributes.set("data-markless-router-replace", "");
-	if (props.scroll === false) attributes.set("data-markless-router-scroll", "manual");
+	attributes.set(LINK_ATTRIBUTE, "");
+	if (props.replace) attributes.set(REPLACE_ATTRIBUTE, "");
+	if (props.prefetch === false) attributes.set(PREFETCH_ATTRIBUTE, "none");
+	if (props.scroll === false) attributes.set(SCROLL_ATTRIBUTE, "manual");
 	return [...attributes];
 }
 function isLinkInternalProp(name) {
@@ -306,4 +374,4 @@ function escapeHtml(value) {
 	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
 }
 //#endregion
-export { Html, Link, MARKLESS_ROUTER_ROUTE_EVENT, __marklessCreateHttpContext, __marklessRouterStartSpaNavigation, buildRouteManifestFromFileIds, dispatchRouteUpdate, ensureNavigationRuntime, matchRouteManifest, normalizeRequestFileId, normalizeRequestPathname, normalizeRouteFileId, parseRequestFile, routePageProps, startRouteUpdateRenderer, transformRequestFileSource };
+export { Html, Link, MARKLESS_ROUTER_RENDERED_EVENT, MARKLESS_ROUTER_ROUTE_EVENT, __marklessCreateHttpContext, __marklessRouterStartSpaNavigation, buildRouteManifestFromFileIds, dispatchRouteUpdate, ensureNavigationRuntime, matchRouteManifest, navigate, normalizeRequestFileId, normalizeRequestPathname, normalizeRouteFileId, parseRequestFile, routePageProps, startRouteUpdateRenderer, transformRequestFileSource };

package/dist/protocol-constants-B4WxrZAS.js

@@ -0,0 +1,26 @@
+function protocolStateVersion(storage) {
+	return (storage?.length ?? 0) > 0 ? 2 : 1;
+}
+const PROTOCOL_INSTANCE_PATH = /^(?:[cpm]\d+:|r:[^:]*:)+/;
+/** One island's identity segment, outermost of any path it prefixes. */
+function protocolIslandSegment(islandIndex) {
+	return `m${islandIndex}:`;
+}
+/** The leading instance path of a composed id, or '' when the id is page-local. */
+function protocolInstancePath(id) {
+	return PROTOCOL_INSTANCE_PATH.exec(id)?.[0] ?? "";
+}
+const PROTOCOL_INSTANCE_QUALIFIABLE = [
+	"prop:",
+	"state:",
+	"computed:",
+	"element:"
+];
+const PROTOCOL_PAGE_SPACE_ID_PREFIXES = ["shared:", "storage:"];
+function protocolInstanceQualifies(graphNodeId) {
+	const local = graphNodeId.slice(protocolInstancePath(graphNodeId).length);
+	if (PROTOCOL_PAGE_SPACE_ID_PREFIXES.some((prefix) => local.startsWith(prefix))) return false;
+	return PROTOCOL_INSTANCE_QUALIFIABLE.some((prefix) => local.startsWith(prefix)) ? true : void 0;
+}
+//#endregion
+export { protocolStateVersion as i, protocolInstanceQualifies as n, protocolIslandSegment as r, protocolInstancePath as t };

package/dist/request-locals-z3rJTizs.js

@@ -0,0 +1,90 @@
+import { CONTAINER_ATTRIBUTE, PROTOCOL_CONTAINER_END_COMMENT, PROTOCOL_CONTAINER_START_COMMENT, PROTOCOL_LOCATOR_PATHS_ATTRIBUTE } from "@markless/web/fns/container-region";
+//#region src/link-attributes.ts
+const LINK_ATTRIBUTE = "data-markless-router-link";
+const REPLACE_ATTRIBUTE = "data-markless-router-replace";
+const SCROLL_ATTRIBUTE = "data-markless-router-scroll";
+const PREFETCH_ATTRIBUTE = "data-markless-router-prefetch";
+//#endregion
+//#region src/route-dom.ts
+const ROUTE_SCRIPT_TYPE = "@markless/core/route";
+const HTML_ATTRIBUTES_SLOT = "__marklessRouterHtmlAttributes";
+function routeMountTarget(document, currentRoot) {
+	const root = currentRoot ?? document.querySelector(`script[type="@markless/core/route"]`)?.parentElement;
+	if (!root) return document.body;
+	const host = [root, root.parentElement].find((element) => element && containerPageEnd(element));
+	if (host) return authorElementTarget(document, host);
+	return {
+		ownerDocument: document,
+		replaceChildren(...children) {
+			root.replaceWith(...children);
+		}
+	};
+}
+function containerPageEnd(host) {
+	for (let node = host.lastChild; node; node = node.previousSibling) if (node.nodeType === 8 && node.data === PROTOCOL_CONTAINER_END_COMMENT) return node;
+}
+function containerPageStart(host) {
+	for (let node = host.firstChild; node; node = node.nextSibling) if (node.nodeType === 8 && node.data === PROTOCOL_CONTAINER_START_COMMENT) return node;
+}
+function authorElementTarget(document, host) {
+	const copy = () => {
+		const next = host.cloneNode(false);
+		next.removeAttribute(CONTAINER_ATTRIBUTE);
+		next.removeAttribute(PROTOCOL_LOCATOR_PATHS_ATTRIBUTE);
+		return next;
+	};
+	let holder;
+	return {
+		ownerDocument: document,
+		createHolder: () => holder = copy(),
+		replaceChildren(...children) {
+			const next = children.length === 1 && children[0] === holder ? holder : copy();
+			if (next !== holder) next.append(...children);
+			const end = containerPageEnd(host);
+			const focused = document.activeElement;
+			const start = containerPageStart(host);
+			if (start) {
+				const before = [];
+				for (let node = host.firstChild; node !== start; node = node.nextSibling) before.push(node);
+				next.prepend(...before, document.createComment(PROTOCOL_CONTAINER_START_COMMENT));
+			}
+			next.append(document.createComment(PROTOCOL_CONTAINER_END_COMMENT));
+			while (end.nextSibling) next.append(end.nextSibling);
+			host.replaceWith(next);
+			if (focused && focused !== document.activeElement && next.contains(focused)) focused.focus({ preventScroll: true });
+		}
+	};
+}
+//#endregion
+//#region src/request-locals.ts
+const REQUEST_LOCALS = Symbol.for("@markless/router/request-locals");
+function table() {
+	const scope = globalThis;
+	return scope[REQUEST_LOCALS] ??= /* @__PURE__ */ new WeakMap();
+}
+function rememberRequestLocals(request, locals, headers) {
+	const known = table().get(request);
+	table().set(request, {
+		locals,
+		headers: headers ?? known?.headers,
+		taken: known?.taken
+	});
+}
+function requestLocals(request) {
+	return table().get(request)?.locals;
+}
+/**
+* The response headers middleware wrote for this request, moved off the server's
+* response: it drops them from a non-2xx page and would repeat them on a 2xx one.
+*/
+function takeMiddlewareHeaders(request) {
+	const record = table().get(request);
+	if (!record?.headers) return void 0;
+	if (!record.taken) {
+		record.taken = new Headers(record.headers);
+		for (const name of Array.from(record.headers.keys())) record.headers.delete(name);
+	}
+	return record.taken;
+}
+//#endregion
+export { ROUTE_SCRIPT_TYPE as a, PREFETCH_ATTRIBUTE as c, HTML_ATTRIBUTES_SLOT as i, REPLACE_ATTRIBUTE as l, requestLocals as n, routeMountTarget as o, takeMiddlewareHeaders as r, LINK_ATTRIBUTE as s, rememberRequestLocals as t, SCROLL_ATTRIBUTE as u };

package/dist/route-href-CGooO_g6.js

@@ -0,0 +1,18 @@
+//#region src/vite/entries/route-href.ts
+const routeParamPattern = /\[\.\.\.([A-Za-z_$][\w$]*)\]|\[([A-Za-z_$][\w$]*)\]/g;
+function __marklessRouteHref(pattern, params) {
+	return pattern.replace(routeParamPattern, (_match, catchAll, dynamic) => {
+		const name = catchAll || dynamic;
+		const value = params?.[name];
+		if (catchAll) return encodeCatchAllParam(pattern, value);
+		if (value === null || value === void 0) throw new Error(`Typed route error: ${pattern} requires params:\n- ${name}`);
+		return encodeURIComponent(String(value));
+	});
+}
+function encodeCatchAllParam(pattern, value) {
+	const segments = Array.isArray(value) ? value : value === null || value === void 0 ? [] : String(value).split("/");
+	if (segments.length === 0 || segments.some((segment) => String(segment) === "")) throw new Error(`Typed route error: ${pattern} requires a non-empty catch-all param.`);
+	return segments.map((segment) => encodeURIComponent(String(segment))).join("/");
+}
+//#endregion
+export { __marklessRouteHref as t };