@torpor/build 0.1.34 → 0.3.0

package/src/site/clientEntry.ts

@@ -1,38 +1,33 @@
 import manifest from "@torpor/build/manifest";
-// @ts-ignore This errors in the Cloudflare build?
-import { $page } from "@torpor/build/state";
-import { clearLayoutSlot, fillLayoutSlot, hydrate } from "@torpor/view";
-import { type Component, type SlotRender } from "@torpor/view";
-import { mount } from "@torpor/view";
-import type PageEndPoint from "../types/PageEndPoint.ts";
-import type PageServerEndPoint from "../types/PageServerEndPoint.ts";
-import type RouteHandler from "../types/RouteHandler.ts";
+import loadData from "../nav/loadData.ts";
+import navigate from "../nav/navigate.ts";
+import client from "../state/client";
+import type LayoutPath from "../types/LayoutPath";
+import type PageEndPoint from "../types/PageEndPoint";
+import type PageServerEndPoint from "../types/PageServerEndPoint";
 import Router from "./Router.ts";
 
 // Build the router from the Site object created by the user
 const router = new Router();
 router.addPages(manifest.routes);
 
-// Store the current layout stack, so that we can re-use parts of it as necessary
-interface LayoutPath {
-	path: string;
-	/** Whether to re-use this layout */
-	reuse: boolean;
-	/** Data loaded from endpoints that should be re-used */
-	data: any;
-	/** The range of the UI in this layout's slot */
-	slotRange: any;
-}
-let layoutStack: LayoutPath[] = [];
-
-// TODO: Probably expire after 30 seconds or something?
-let prefetchedData: Record<string, any> = {};
+// Put it in client state so that it can be accessed from navigate. We can't
+// just import it to navigate because that gets built by tsdown, without Vite
+// and the manifest
+client.router = router;
 
 // Intercept clicks on links
 window.addEventListener("click", async (e) => {
 	if (e.target && (e.target as HTMLElement).tagName === "A") {
+		const link = e.target as HTMLAnchorElement;
+
+		if (ignoreAnchorMouseEvent(link, e)) {
+			return;
+		}
+
 		e.preventDefault();
-		const href = (e.target as HTMLLinkElement).href;
+
+		const href = link.href;
 		const url = new URL(href);
 
 		if (await navigate(url)) {
@@ -46,12 +41,17 @@ window.addEventListener("click", async (e) => {
 // Intercept mouseover/focus/touchstart on links for prefetching
 // TODO: settings e.g. <a href="" data-tb-prefetch="eager"/"visible"/"hover"/"touch">
 window.addEventListener("mouseover", maybePrefetch);
-window.addEventListener("focus", maybePrefetch);
 window.addEventListener("touchstart", maybePrefetch);
 
-async function maybePrefetch(e: Event) {
+async function maybePrefetch(e: MouseEvent | TouchEvent) {
 	if (e.target && (e.target as HTMLElement).tagName === "A") {
-		const href = (e.target as HTMLLinkElement).href;
+		const link = e.target as HTMLAnchorElement;
+
+		if (ignoreAnchorMouseEvent(link, e)) {
+			return;
+		}
+
+		const href = link.href;
 		const url = new URL(href);
 
 		const path = url.pathname;
@@ -76,6 +76,19 @@ async function maybePrefetch(e: Event) {
 	}
 }
 
+function ignoreAnchorMouseEvent(link: HTMLAnchorElement, e: MouseEvent | TouchEvent) {
+	// Ignore the event if a modifier key is pressed, or target is not
+	// "_self", or if rel="external"
+	return (
+		e.altKey ||
+		e.ctrlKey ||
+		e.metaKey ||
+		e.shiftKey ||
+		(link.target && link.target !== "_self") ||
+		link.rel === "external"
+	);
+}
+
 // Listen for changes to the URL that occur when the user navigates using the
 // back or forward buttons
 window.addEventListener("popstate", async () => {
@@ -83,254 +96,8 @@ window.addEventListener("popstate", async () => {
 });
 
 // Do the initial navigation and hydration
-navigateToLocation(document.location, true);
+await navigateToLocation(document.location, true);
 
 async function navigateToLocation(location: Location, firstTime = false) {
 	return await navigate(new URL(location.toString()), firstTime);
 }
-
-async function navigate(url: URL, firstTime = false): Promise<boolean> {
-	let parent = document.getElementById("app");
-	if (!parent) {
-		// TODO: 500
-		console.log("500");
-		return false;
-	}
-
-	const path = url.pathname;
-	const query = url.searchParams;
-
-	console.log(`navigating to '${path}'${query.size ? ` with ${query}` : ""}`);
-
-	const route = router.match(path, query);
-	if (!route) {
-		// TODO: 404
-		console.log("404");
-		return false;
-	}
-
-	// Update $page before building the components
-	$page.url = url;
-	if (path.endsWith("/_error")) {
-		$page.status = parseInt(query.get("status") ?? "404");
-		$page.error.message = query.get("message") ?? "";
-		// Make it look a bit classier by removing the query
-		window.history.replaceState({}, "", url.toString().split("?")[0]);
-	} else {
-		$page.status = 200;
-	}
-
-	const handler = route.handler;
-	const params = route.params || {};
-
-	// There must be a client endpoint with a component
-	const clientEndPoint: PageEndPoint | undefined = (await handler.endPoint()).default;
-	if (!clientEndPoint?.component) {
-		// TODO: 404
-		console.log("404");
-		return false;
-	}
-
-	// There may be a server endpoint
-	const serverEndPoint: PageServerEndPoint | undefined =
-		handler.serverEndPoint && (await handler.serverEndPoint())?.default;
-
-	let newLayoutStack: LayoutPath[] = [];
-
-	// Pass the data into $props
-	// TODO: Don't load if this is the first time -- it should have been passed to us, somehow...
-	const data = await loadData(
-		handler,
-		params,
-		path,
-		newLayoutStack,
-		clientEndPoint,
-		serverEndPoint,
-	);
-	const $props: Record<string, any> = { data };
-
-	layoutStack.push({ path: route.handler.path, data: {}, reuse: false, slotRange: null });
-	layoutStack = newLayoutStack;
-
-	// If there are layouts, work our way upwards, pushing each component into
-	// the default slot of its parent
-	// TODO: There's probably a nicer way to do this with reducers or something
-	let component = clientEndPoint.component as Component;
-	let slots: Record<string, SlotRender> | undefined = undefined;
-	if (handler.layouts) {
-		let slotFunctions: SlotRender[] = [];
-		// The last slot function will render the client component
-		slotFunctions[handler.layouts.length] = function clientComponent(parent, anchor, _, $context) {
-			let i = layoutStack.length - 1;
-			layoutStack[i].slotRange = fillLayoutSlot(
-				clientEndPoint.component!,
-				slotFunctions[i + 1],
-				parent,
-				anchor,
-				$props,
-				$context,
-			);
-		};
-
-		// Each earlier slot function will render a layout
-		for (let i = handler.layouts.length - 1; i >= 0; i--) {
-			const layoutEndPoint: PageEndPoint | undefined = (await handler.layouts[i].endPoint())
-				?.default;
-			if (layoutEndPoint?.component) {
-				if (layoutStack[i].reuse) {
-					// Set the parent to add the new content to (from the old
-					// content), clear the range under this point, and set the
-					// component to the slot function within this layout
-					parent = layoutStack[i].slotRange.startNode.parentNode as HTMLElement;
-					clearLayoutSlot(layoutStack[i].slotRange);
-					component = slotFunctions[i + 1];
-					break;
-				} else if (i === 0) {
-					component = layoutEndPoint.component as Component;
-					slots = { _: slotFunctions[i + 1] };
-				} else {
-					slotFunctions[i] = function layoutComponent(parent, anchor, _, $context) {
-						layoutStack[i - 1].slotRange = fillLayoutSlot(
-							layoutEndPoint.component!,
-							slotFunctions[i + 1],
-							parent,
-							anchor,
-							$props,
-							$context,
-						);
-					};
-				}
-			}
-		}
-	}
-
-	if (firstTime) {
-		hydrate(parent, component, $props, slots);
-	} else {
-		try {
-			mount(parent, component, $props, slots);
-		} catch (error) {
-			// TODO: Show a proper Error component
-			parent.innerHTML = '<span style="color: red">Script syntax error</span><p>' + error + "</p>";
-			console.log(error);
-		}
-	}
-
-	// Reset prefetched data on each navigation
-	prefetchedData = {};
-
-	return true;
-}
-
-async function loadData(
-	handler: RouteHandler,
-	params: Record<string, string>,
-	path: string,
-	newLayoutStack: LayoutPath[],
-	clientEndPoint: PageEndPoint | undefined,
-	serverEndPoint: PageServerEndPoint | undefined,
-	prefetch = false,
-) {
-	let data = {};
-	if (handler.layouts) {
-		for (let [i, layout] of handler.layouts.entries()) {
-			let layoutPath = layout.path;
-			for (let key in params) {
-				layoutPath = layoutPath.replace(`[${key}]`, params[key]);
-			}
-			if (layoutStack.at(i)?.path === layoutPath) {
-				// We've already loaded this layout, we can just re-use its data and UI
-				if (!prefetch) {
-					layoutStack[i].reuse = true;
-				}
-				newLayoutStack[i] = layoutStack[i];
-				Object.assign(data, layoutStack[i].data);
-			} else {
-				const stackLayout = { path: layoutPath, data: {}, reuse: false, slotRange: null };
-				const layoutEndPoint: PageEndPoint | undefined = (await layout.endPoint())?.default;
-				const layoutServerEndPoint: PageServerEndPoint | undefined =
-					layout.serverEndPoint && (await layout.serverEndPoint())?.default;
-				const layoutResponse = await loadClientAndServerData(
-					stackLayout.data,
-					document.location.origin + layoutPath,
-					params,
-					layoutEndPoint,
-					layoutServerEndPoint,
-				);
-				if (layoutResponse?.ok === false) {
-					return false;
-				}
-				Object.assign(data, stackLayout.data);
-				newLayoutStack.push(stackLayout);
-			}
-		}
-	}
-	let endPointResponse = await loadClientAndServerData(
-		data,
-		document.location.origin + path,
-		params,
-		clientEndPoint,
-		serverEndPoint,
-	);
-	if (endPointResponse?.ok === false) {
-		return false;
-	}
-	return data;
-}
-
-async function loadClientAndServerData(
-	data: Record<string, any>,
-	location: string,
-	params: Record<string, string>,
-	clientEndPoint?: PageEndPoint,
-	serverEndPoint?: PageServerEndPoint,
-): Promise<Response | void> {
-	if (clientEndPoint?.load) {
-		if (prefetchedData[location]) {
-			Object.assign(data, prefetchedData[location]);
-		} else {
-			const clientUrl = new URL(document.location.href);
-			const clientParams = buildClientParams(clientUrl, params, data);
-			const clientResponse = await clientEndPoint.load(clientParams);
-			if (clientResponse) {
-				if (clientResponse.ok) {
-					if (clientResponse.headers.get("Content-Type")?.includes("application/json")) {
-						const clientData = await clientResponse.json();
-						Object.assign(data, clientData);
-						prefetchedData[location] = clientData;
-					}
-				} else {
-					return clientResponse;
-				}
-			}
-		}
-	}
-	if (serverEndPoint?.load) {
-		const serverUrl = location.replace(/\/$/, "") + "/~server";
-
-		if (prefetchedData[serverUrl]) {
-			Object.assign(data, prefetchedData[serverUrl]);
-		} else {
-			const serverResponse = await fetch(serverUrl);
-			if (serverResponse) {
-				if (serverResponse.ok) {
-					if (serverResponse.headers.get("Content-Type")?.includes("application/json")) {
-						const serverData = await serverResponse.json();
-						Object.assign(data, serverData);
-						prefetchedData[serverUrl] = serverData;
-					}
-				} else {
-					return serverResponse;
-				}
-			}
-		}
-	}
-}
-
-function buildClientParams(url: URL, params: Record<string, string>, data: Record<string, any>) {
-	return {
-		url,
-		params,
-		data,
-	};
-}

package/src/site/defaultAdapter.ts

@@ -1,4 +1,4 @@
-import Adapter from "../types/Adapter";
+import type Adapter from "../types/Adapter";
 
 // TODO: This should be an adapter-auto package that conditionally loads other packages...
 

package/src/site/serverEntry.ts

@@ -1,14 +1,13 @@
 import manifest from "@torpor/build/manifest";
-// @ts-ignore This errors in the Cloudflare build?
-import { $page } from "@torpor/build/state";
 import { type ServerComponent, type ServerSlotRender } from "@torpor/view";
 import notFound from "../response/notFound.ts";
 import ok from "../response/ok.ts";
 import seeOther from "../response/seeOther.ts";
 import ServerEvent from "../server/ServerEvent.ts";
+import $page from "../state/$page";
 import type PageEndPoint from "../types/PageEndPoint.ts";
 import type PageServerEndPoint from "../types/PageServerEndPoint.ts";
-import RouteHandler from "../types/RouteHandler.ts";
+import type RouteHandler from "../types/RouteHandler.ts";
 import {
 	ERROR_ROUTE,
 	HOOK_ROUTE,
@@ -30,33 +29,6 @@ router.addPages(manifest.routes);
 
 //console.log(`routes:\n  ${router.routes.map((r) => r.path).join("\n  ")}`);
 
-async function handleResponse(response: Response): Promise<Response> {
-	$page.status = response.status;
-
-	// Success codes and redirect codes are acceptable
-	if (response.status >= 200 && response.status <= 399) {
-		return response;
-	}
-
-	// It's an error, so redirect to the error page
-	// We're just pushing the status and message in the URL, but maybe there's a
-	// more sophisticated way to do this?
-	// TODO: Should be returning loadView rather than redirecting
-	// TODO: Should be returning the NEAREST error page to this path, including layouts
-	let params = new URLSearchParams();
-	params.append("status", $page.status.toString());
-	let message = await response.text();
-	if (response.headers.get("Content-Type")?.includes("application/json")) {
-		const data = JSON.parse(message);
-		message = data.message ?? message;
-	}
-	if (message) {
-		$page.error.message = message;
-		params.append("message", message);
-	}
-	return seeOther(`/_error?${params.toString()}`);
-}
-
 export async function load(ev: ServerEvent, template: string): Promise<Response> {
 	//const url = new URL(`http://${process.env.HOST ?? "localhost"}${ev.request.url}`);
 	const url = new URL(ev.request.url);
@@ -69,19 +41,18 @@ export async function load(ev: ServerEvent, template: string): Promise<Response>
 	if (!route) {
 		return handleResponse(notFound());
 	}
+	const handler = route.handler;
+	const params = route.params || {};
 
 	// Update $page before building the components
 	$page.url = url;
 	if (path.endsWith("/_error")) {
 		$page.status = parseInt(query.get("status") ?? "404");
-		$page.error.message = query.get("message") ?? "";
+		$page.error = { message: query.get("message") ?? "" };
 	} else {
 		$page.status = 200;
 	}
 
-	const handler = route.handler;
-	const params = route.params || {};
-
 	// TODO: Hit the server hook out here
 	// We could maybe set data loading up as middleware on a route??????
 
@@ -92,7 +63,7 @@ export async function load(ev: ServerEvent, template: string): Promise<Response>
 			if (ev.request.method === "GET") {
 				return handleResponse(await loadView(ev, url, handler, params, template));
 			} else if (ev.request.method === "POST") {
-				return handleResponse(await runAction(ev, url, handler, params, query));
+				return handleResponse(await runAction(ev, url, handler, params, query, template), true);
 			}
 			break;
 		}
@@ -121,6 +92,42 @@ export async function load(ev: ServerEvent, template: string): Promise<Response>
 	return notFound();
 }
 
+async function handleResponse(response: Response, fromForm = false): Promise<Response> {
+	$page.status = response.status;
+
+	// Success codes and redirect codes are acceptable
+	if (response.status >= 200 && response.status <= 399) {
+		return response;
+	}
+
+	// 4xx error codes are acceptable from form actions
+	if (fromForm && response.status >= 400 && response.status <= 499) {
+		return response;
+	}
+
+	// It's an error, so redirect to the error page
+	// We're just pushing the status and message in the URL, but maybe there's a
+	// more sophisticated way to do this?
+	// TODO: Should be returning loadView rather than redirecting
+	// TODO: Should be returning the NEAREST error page to this path, including layouts
+	let params = new URLSearchParams();
+	params.append("status", $page.status.toString());
+	let message = await response.text();
+	if (response.headers.get("Content-Type")?.includes("application/json")) {
+		const data = JSON.parse(message);
+		message = data.message ?? message;
+	}
+	if (message) {
+		if ($page.error) {
+			$page.error.message = message;
+		} else {
+			$page.error = { message };
+		}
+		params.append("message", message);
+	}
+	return seeOther(`/_error?${params.toString()}`);
+}
+
 async function loadData(
 	ev: ServerEvent,
 	url: URL,
@@ -155,6 +162,8 @@ async function loadView(
 	handler: RouteHandler,
 	params: Record<string, string>,
 	template: string,
+	formStatus?: number,
+	form?: Record<string, string>,
 ) {
 	// There must be a client endpoint with a component
 	const clientEndPoint: PageEndPoint | undefined = (await handler.endPoint()).default;
@@ -209,19 +218,23 @@ async function loadView(
 	if (endPointResponse?.ok === false) {
 		return endPointResponse;
 	}
-	let $props: Record<string, any> = { data };
+	let $props: Record<string, any> = { data, form };
+
+	let styles = "";
 
 	// If there are layouts, work our way upwards, pushing each component into
 	// the default slot of its parent
 	// TODO: Also handle layout server data
 	// TODO: There's probably a nicer way to do this with reducers or something
-	// TODO: Re-use parent layouts
 	let component = clientEndPoint.component as ServerComponent;
 	let slots: Record<string, ServerSlotRender> | undefined = undefined;
 	if (handler.layouts) {
 		let slotFunctions: ServerSlotRender[] = [];
-		slotFunctions[handler.layouts.length] = (_, $context) =>
-			(clientEndPoint.component as ServerComponent)($props, $context);
+		slotFunctions[handler.layouts.length] = (_, $context) => {
+			let { body, head } = (clientEndPoint.component as ServerComponent)($props, $context);
+			styles += head;
+			return body;
+		};
 		for (let i = handler.layouts.length - 1; i >= 0; i--) {
 			const layoutEndPoint: PageEndPoint | undefined = (await handler.layouts[i].endPoint())
 				?.default;
@@ -230,10 +243,13 @@ async function loadView(
 					component = layoutEndPoint.component as ServerComponent;
 					slots = { _: slotFunctions[i + 1] };
 				} else {
-					slotFunctions[i] = (_, $context) =>
-						(layoutEndPoint.component as ServerComponent)($props, $context, {
+					slotFunctions[i] = (_, $context) => {
+						let { body, head } = (layoutEndPoint.component as ServerComponent)($props, $context, {
 							_: slotFunctions[i + 1],
 						});
+						styles += head;
+						return body;
+					};
 				}
 			}
 		}
@@ -241,8 +257,15 @@ async function loadView(
 
 	let html;
 	try {
-		html = component($props, undefined, slots);
-		html = template.replace("%COMPONENT_HTML%", html);
+		let { body, head } = component($props, undefined, slots);
+
+		// Put the form info in a hidden input so that it can be accessed on the client
+		if (form) {
+			body += `\n<input type="hidden" id="t-form-data" value='${JSON.stringify(form).replaceAll("'", "\\'")}' />`;
+		}
+
+		styles += head;
+		html = template.replace("%COMPONENT_BODY%", body).replace("%COMPONENT_HEAD%", styles);
 	} catch (error) {
 		// TODO: Show a proper Error component
 		html = '<span style="color: red">Script syntax error</span><p>' + error + "</p>";
@@ -250,7 +273,7 @@ async function loadView(
 	}
 
 	return new Response(html, {
-		status: 200,
+		status: formStatus ?? 200,
 		headers: {
 			"Content-Type": "text/html",
 		},
@@ -263,6 +286,7 @@ async function runAction(
 	handler: RouteHandler,
 	params: Record<string, string>,
 	query: URLSearchParams,
+	template: string,
 ) {
 	const actionName = (Array.from(query.keys())[0] || "default").replace(/^\//, "");
 	const serverEndPoint: PageServerEndPoint | undefined =
@@ -270,7 +294,6 @@ async function runAction(
 	if (serverEndPoint?.actions) {
 		const action = serverEndPoint.actions[actionName];
 		if (action) {
-			// TODO: form.errors etc
 			const serverParams = buildServerParams(ev, url, params);
 
 			if (handler.serverHook) {
@@ -280,11 +303,24 @@ async function runAction(
 				}
 			}
 
-			const result = await action(serverParams); // <--
-
-			// If there was no response returned from the action (such as errors
-			// or a redirect), reload the page by redirecting
-			return result || seeOther(url.pathname);
+			const result = await action(serverParams);
+
+			// If no result, ok or 4xx error, re-render the view with the form result
+			// If redirect or server error, just return the result to handle it as normal
+			// TODO: do not re-run hooks?
+			if (
+				!result ||
+				(result.status >= 200 && result.status <= 299) ||
+				(result.status >= 400 && result.status <= 499)
+			) {
+				const newUrl = new URL(url.pathname, url);
+				const formStatus = result?.status;
+				const form = await result?.json();
+				$page.form = form;
+				return await loadView(ev, newUrl, handler, params, template, formStatus, form);
+			} else {
+				return result;
+			}
 		}
 	}
 

package/src/state/$page.ts

@@ -1,15 +1,6 @@
-import { $watch } from "@torpor/view";
-import Page from "./Page";
+import type PageState from "../types/PageState";
+import internal from "./internal";
 
-const $page: Page = $watch(
-	{
-		status: 404,
-		url: new URL("http://localhost"),
-		error: {
-			message: "",
-		},
-	},
-	{ shallow: true },
-);
+const $page: PageState = internal().$page;
 
 export default $page;

package/src/state/client.ts

@@ -0,0 +1,6 @@
+import type ClientState from "../types/ClientState";
+import internal from "./internal";
+
+const client: ClientState = internal().client;
+
+export default client;

package/src/state/internal.ts

@@ -0,0 +1,45 @@
+import { $watch } from "@torpor/view";
+import type ClientState from "../types/ClientState";
+import type InternalState from "../types/InternalState";
+import type PageState from "../types/PageState";
+
+// Do a weird little dance to ensure that everyone has the same $page and
+// client, regardless of if they are entering via serverEntry/clientEntry or the
+// built library. There may be an easier way to do this!
+
+const INTERNAL_GLOBAL: unique symbol = Symbol.for("torpor-internal");
+
+export default function internal(): InternalState {
+	// @ts-ignore
+	if (globalThis[INTERNAL_GLOBAL] === undefined) {
+		// TODO: Should use the SSR $watch if entering via serverEntry
+		const $page: PageState = $watch(
+			{
+				status: 404,
+				url: new URL("http://localhost"),
+				form: {},
+				error: {
+					message: "",
+				},
+			},
+			{
+				shallow: true,
+			},
+		);
+		const client: ClientState = {
+			// @ts-ignore This will definitely, 100% get set
+			router: null,
+			layoutStack: [],
+			// TODO: Probably expire after 30 seconds or something?
+			prefetchedData: {},
+		};
+
+		// @ts-ignore
+		globalThis[INTERNAL_GLOBAL] = {
+			$page,
+			client,
+		} satisfies InternalState;
+	}
+	// @ts-ignore
+	return globalThis[INTERNAL_GLOBAL] as InternalState;
+}