@torpor/build 0.2.0 → 0.3.1

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,35 +29,7 @@ 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);
 	const path = url.pathname;
 	const query = url.searchParams;
@@ -69,19 +40,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 +62,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 +91,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 +161,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,7 +217,7 @@ async function loadView(
 	if (endPointResponse?.ok === false) {
 		return endPointResponse;
 	}
-	let $props: Record<string, any> = { data };
+	let $props: Record<string, any> = { data, form };
 
 	let styles = "";
 
@@ -217,7 +225,6 @@ async function loadView(
 	// 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) {
@@ -250,6 +257,12 @@ async function loadView(
 	let html;
 	try {
 		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) {
@@ -259,7 +272,7 @@ async function loadView(
 	}
 
 	return new Response(html, {
-		status: 200,
+		status: formStatus ?? 200,
 		headers: {
 			"Content-Type": "text/html",
 		},
@@ -272,6 +285,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 =
@@ -279,7 +293,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) {
@@ -289,14 +302,42 @@ async function runAction(
 				}
 			}
 
-			const result = await action(serverParams);
+			let result = await action(serverParams);
+
+			if (ev.request.headers.has("x-torpor-form-submit")) {
+				// If the form was submitted from javascript, just return the
+				// response and it will be handled on the client
+				// TODO: Should we make the user return a response??
+				result ??= ok();
+
+				// If it's a redirect, we need to stop the browser handling it
+				if (result.status >= 300 && result.status <= 399) {
+					const location = result.headers.get("location") ?? "";
+					result = ok();
+					result.headers.set("x-torpor-form-redirect", "");
+					result.headers.set("location", location);
+				}
 
-			// Return the response if it was not ok (i.e. errors or a redirect)
-			// Otherwise, reload the page by redirecting
-			if (result && !result.ok) {
 				return result;
+			} else if (
+				!result ||
+				(result.status >= 200 && result.status <= 299) ||
+				(result.status >= 400 && result.status <= 499)
+			) {
+				// If the form was submitted without javascript, and there was
+				// no result, an ok result, or a 4xx error, re-render the view
+				// with the form result
+				// TODO: do not re-run hooks?
+				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 seeOther(url.pathname);
+				// If the form was submitted without javascript and there was a
+				// redirect or server error, just return the result to handle it
+				// as normal
+				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: undefined,
+				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;
+}

package/src/test/runTest.ts

@@ -9,7 +9,7 @@ import Site from "../site/Site";
 import $page from "../state/$page.ts";
 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 {
 	HOOK_ROUTE,
 	HOOK_SERVER_ROUTE,

package/src/types/Adapter.ts

@@ -1,10 +1,8 @@
 import Server from "../server/Server";
 import Site from "../site/Site";
 
-type Adapter = {
+export default interface Adapter {
 	prebuild?: (site: Site) => Promise<void> | void;
 	postbuild?: (site: Site) => Promise<void> | void;
 	serve: (server: Server, site: Site) => void;
-};
-
-export default Adapter;
+}

package/src/types/ClientState.ts

@@ -0,0 +1,8 @@
+import Router from "../site/Router";
+import type LayoutPath from "./LayoutPath";
+
+export default interface ClientState {
+	router: Router;
+	layoutStack: LayoutPath[];
+	prefetchedData: Record<string, any>;
+}

package/src/types/InternalState.ts

@@ -0,0 +1,7 @@
+import type ClientState from "./ClientState";
+import type PageState from "./PageState";
+
+export default interface InternalState {
+	$page: PageState;
+	client: ClientState;
+}

package/src/types/LayoutHandler.ts

@@ -1,7 +1,5 @@
-type LayoutHandler = {
+export default interface LayoutHandler {
 	path: string;
 	endPoint: () => Promise<any>;
 	serverEndPoint?: () => Promise<any>;
-};
-
-export default LayoutHandler;
+}

package/src/types/LayoutPath.ts

@@ -0,0 +1,10 @@
+// Store the current layout stack, so that we can re-use parts of it as necessary
+export default 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;
+}

package/src/types/ManifestRoute.ts

@@ -1,7 +1,5 @@
-type ManifestRoute = {
+export default interface ManifestRoute {
 	path: string;
 	type: number;
 	endPoint: () => Promise<any>;
-};
-
-export default ManifestRoute;
+}

package/src/types/PageEndPoint.ts

@@ -4,7 +4,7 @@ import type PageLoadEvent from "./PageLoadEvent";
 /**
  * For +page.
  */
-type PageEndPoint = {
+export default interface PageEndPoint {
 	/**
 	 * Builds the route path for the page in a type-safe manner.
 	 * TODO: Not sure this is actually the best way to do it...
@@ -25,9 +25,7 @@ type PageEndPoint = {
 	 * The head element data for the page, which may include a <title> and <meta> elements.
 	 */
 	head?: HeadElement[] | ((event: PageLoadEvent) => HeadElement[]);
-};
-
-export default PageEndPoint;
+}
 
 type HeadElement = TitleElement | MetaElement;
 

package/src/types/PageLoadEvent.ts

@@ -1,4 +1,4 @@
-type PageLoadEvent = {
+export default interface PageLoadEvent {
 	/**
 	 * The URL for the server function.
 	 */
@@ -11,6 +11,4 @@ type PageLoadEvent = {
 	 * Data that is (optionally) loaded from the load function and passed into the page as $props.data.
 	 */
 	data: Record<string, any>;
-};
-
-export default PageLoadEvent;
+}

package/src/types/PageServerEndPoint.ts

@@ -4,7 +4,7 @@ import type PageServerLoad from "./PageServerLoad";
 /**
  * For +page.server.
  */
-type PageServerEndPoint = {
+export default interface PageServerEndPoint {
 	/**
 	 * Loads data from the server for a page.
 	 */
@@ -13,6 +13,4 @@ type PageServerEndPoint = {
 	 * A map of actions that can be performed on the server for a page, generally from a form submit.
 	 */
 	actions?: Record<string, PageServerAction>;
-};
-
-export default PageServerEndPoint;
+}

package/src/types/PageState.ts

@@ -0,0 +1,8 @@
+export default interface PageState {
+	status: number;
+	url: URL;
+	form?: Record<string, string>;
+	error?: {
+		message: string;
+	};
+}

package/src/types/RouteHandler.ts

@@ -1,6 +1,6 @@
 import type RouteLayoutHandler from "./RouteLayoutHandler";
 
-type RouteHandler = {
+export default interface RouteHandler {
 	path: string;
 	type: number;
 	endPoint: () => Promise<any>;
@@ -9,6 +9,4 @@ type RouteHandler = {
 	layouts?: RouteLayoutHandler[];
 	serverEndPoint?: () => Promise<any>;
 	serverHook?: () => Promise<any>;
-};
-
-export default RouteHandler;
+}

package/src/types/RouteLayoutHandler.ts

@@ -1,7 +1,5 @@
-type RouteLayoutHandler = {
+export default interface RouteLayoutHandler {
 	path: string;
 	endPoint: () => Promise<any>;
 	serverEndPoint?: () => Promise<any>;
-};
-
-export default RouteLayoutHandler;
+}

package/src/types/RouteMatchResult.ts

@@ -1,9 +1,7 @@
 import type RouteHandler from "./RouteHandler";
 
-type RouteMatchResult = {
+export default interface RouteMatchResult {
 	handler: RouteHandler;
 	params?: Record<string, string>;
 	query?: Record<string, string>;
-};
-
-export default RouteMatchResult;
+}

package/src/types/ServerHook.ts

@@ -3,13 +3,9 @@ import type ServerLoadEvent from "./ServerLoadEvent";
 /**
  * For _hook.server.
  */
-type ServerHook = {
+export default interface ServerHook {
 	/**
 	 * Called on each server request.
 	 */
-	handle?: ServerLoad;
-};
-
-export default ServerHook;
-
-type ServerLoad = (event: ServerLoadEvent) => Promise<void> | void;
+	handle?: (event: ServerLoadEvent) => Promise<void> | void;
+}

package/src/types/ServerLoadEvent.ts

@@ -1,7 +1,7 @@
 import CookieHelper from "../server/CookieHelper";
 import HeaderHelper from "../server/HeaderHelper";
 
-type ServerLoadEvent = {
+export default interface ServerLoadEvent {
 	/**
 	 * The URL for the server function.
 	 */
@@ -34,6 +34,4 @@ type ServerLoadEvent = {
 	 * An optional adapter object, containing adapter-specific functionality.
 	 */
 	adapter: Record<PropertyKey, any>;
-};
-
-export default ServerLoadEvent;
+}

package/src/{site → utils}/pathToRegex.ts

@@ -4,7 +4,7 @@ export default function pathToRegex(path: string): RegExp {
 			.split("/")
 			// Replace `[slug]` with a grouped match so we can pull out params
 			.map((p) => {
-				return p.replace(/\[([^\/]+?)\]/, "(?<$1>[^\\/]+?)");
+				return p.replace(/\[([^/]+?)\]/, "(?<$1>[^\\/]+?)");
 			})
 			.join("\\/")
 			// Replace globs with regex syntax

package/{tsup.config.ts → tsdown.config.ts}

@@ -1,4 +1,4 @@
-import { type Options, defineConfig } from "tsup";
+import { type Options, defineConfig } from "tsdown";
 
 type Config =
 	| Options
@@ -8,6 +8,7 @@ type Config =
 export default defineConfig({
 	entry: [
 		"src/index.ts",
+		"src/nav.ts",
 		"src/response.ts",
 		"src/run.ts",
 		"src/server.ts",
@@ -15,10 +16,8 @@ export default defineConfig({
 		"src/test.ts",
 		"src/bin/index.ts",
 	],
-	format: ["esm", "cjs"],
+	format: "esm",
 	dts: true,
-	clean: true,
-	metafile: true,
 	sourcemap: true,
 	// Put this in here to stop issues with bundling Vite from bin/index.ts
 	// I'm not sure if this will cause further issues down the line?

package/dist/Server-CNZWh5ca.d.cts

@@ -1,71 +0,0 @@
-import { SerializeOptions } from 'cookie';
-
-declare class CookieHelper {
-    request: Request;
-    cookies: Map<string, string>;
-    constructor(request: Request);
-    get(name: string): string | undefined;
-    set(name: string, value: string, options?: SerializeOptions): void;
-    delete(name: string, options?: SerializeOptions): void;
-}
-
-declare class HeaderHelper {
-    request: Request;
-    headers: Map<string, string>;
-    constructor(request: Request);
-    get(name: string): string | undefined;
-    set(name: string, value: string): void;
-    delete(name: string): void;
-}
-
-declare class ServerEvent {
-    request: Request;
-    response: Response | undefined | void;
-    params?: Record<string, string>;
-    adapter: any;
-    cookies: CookieHelper;
-    headers: HeaderHelper;
-    constructor(request: Request, params?: Record<string, string>);
-    addHeaders(): void;
-}
-
-type MiddlewareFunction = (ev: ServerEvent, next: () => void | Promise<void>) => void | Promise<void>;
-
-type ServerFunction = (e: ServerEvent) => Response | undefined | void | Promise<Response | undefined | void>;
-
-/**
- * A Fetch API Request/Response server.
- */
-declare class Server {
-    #private;
-    routes: RouteHandler[];
-    middleware: MiddlewareFunction[];
-    constructor();
-    /**
-     * The standard Fetch API method that should work in any runtime (including
-     * Node with polyfills).
-     * @returns
-     */
-    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
-    /**
-     * Adds a server function at a route path.
-     * @param path The route path pattern.
-     * @param fn The function to call when the pattern is matched.
-     * @returns
-     */
-    add(path: string, fn: ServerFunction): Server;
-    match(path: string): Match | undefined;
-    use(...fn: MiddlewareFunction[]): Server;
-}
-declare class RouteHandler {
-    path: string;
-    regex: RegExp;
-    fn: ServerFunction;
-    constructor(path: string, fn: ServerFunction);
-}
-type Match = {
-    fn: ServerFunction;
-    params?: Record<string, string>;
-};
-
-export { CookieHelper as C, HeaderHelper as H, type MiddlewareFunction as M, Server as S, ServerEvent as a };