@torpor/build 0.4.10 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/build",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "description": "A framework for building sites and apps with Torpor",
   "type": "module",
   "exports": {
@@ -38,7 +38,7 @@
   },
   "files": [
     "dist",
-    "./src/types/manifest.d.ts"
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -54,8 +54,8 @@
     "dotenv": "^17.2.3",
     "vite": "^7.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "@torpor/view": "^0.4.16",
-    "@torpor/unplugin": "^0.2.1"
+    "@torpor/unplugin": "^0.2.1",
+    "@torpor/view": "^0.4.16"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",

package/src/bin/index.ts

@@ -0,0 +1,11 @@
+#! /usr/bin/env node
+import run from "../run/run";
+
+const workingDir = process.cwd();
+if (process.argv.includes("--dev")) {
+	await run(workingDir, "dev");
+} else if (process.argv.includes("--build")) {
+	await run(workingDir, "build");
+} else if (process.argv.includes("--preview")) {
+	await run(workingDir, "preview");
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+import Router from "./site/Router";
+import Site from "./site/Site";
+import type Adapter from "./types/Adapter";
+import type PageEndPoint from "./types/PageEndPoint";
+import type PageLoadEvent from "./types/PageLoadEvent";
+import type PageServerAction from "./types/PageServerAction";
+import type PageServerEndPoint from "./types/PageServerEndPoint";
+import type PageServerLoad from "./types/PageServerLoad";
+import type ServerEndPoint from "./types/ServerEndPoint";
+import type ServerHook from "./types/ServerHook";
+import type ServerLoadEvent from "./types/ServerLoadEvent";
+import type ServerRequest from "./types/ServerRequest";
+
+// NOTE: Don't export any general functionality from here -- it may result in
+// Vite errors like `Could not resolve '../pkg' in lightningcss` etc
+
+export { Site, Router };
+
+export type {
+	Adapter,
+	PageEndPoint,
+	PageServerEndPoint,
+	PageServerLoad,
+	PageServerAction,
+	ServerEndPoint,
+	ServerRequest,
+	ServerHook,
+	PageLoadEvent,
+	ServerLoadEvent,
+};

package/src/nav/formSubmit.ts

@@ -0,0 +1,56 @@
+import $page from "../state/$page";
+import load from "./load";
+import reload from "./reload";
+
+export default async function formSubmit(e: SubmitEvent): Promise<void> {
+	// We'll take it from here
+	e.preventDefault();
+
+	// Reset $page on submit and link navigation
+	// TODO: Should we put data in $page.data??
+	$page.form = undefined;
+
+	// Perform a POST fetch to the form's action location
+	const form = e.target as HTMLFormElement;
+	const button = e.submitter as HTMLButtonElement;
+	// HACK: submit buttons have their formAction set to the current page if not
+	// set, so we can't just check whether it's empty and fallback to form action
+	//const action = button?.formAction ?? form.action;
+	let action = form.action || document.URL;
+	if (button && button.formAction && button.formAction !== document.URL) {
+		action = button.formAction;
+	}
+	const options = {
+		body: new FormData(form),
+		method: "POST",
+		mode: "cors",
+		credentials: "same-origin",
+		// Add a special header which tells the server that we want the raw
+		// error response (if applicable) rather than the reloaded page that you
+		// would get if submitting a page without javascript
+		headers: {
+			"x-torpor-form-submit": "",
+		},
+	};
+	const response = await fetch(
+		action,
+		// @ts-ignore -- don't know what it's complaining about here
+		options,
+	);
+
+	if (response.status === 200 && response.headers.has("x-torpor-form-redirect")) {
+		// TODO: Should do the correct type of redirect e.g. seeOther etc
+		const redirect = response.headers.get("location")!;
+		await load(redirect);
+		window.location.href = redirect;
+	} else if (
+		(response.status >= 200 && response.status <= 299) ||
+		(response.status >= 400 && response.status <= 499)
+	) {
+		// Put the response into `$page.form`, and it will be put into `$props` in reload
+		if (response.headers.get("content-type") === "application/json") {
+			$page.form = await response.json();
+		}
+		await reload();
+	}
+}

package/src/nav/load.ts

@@ -0,0 +1,9 @@
+import navigate from "./navigate";
+
+/**
+ * Loads and renders the page at the supplied path.
+ */
+export default async function load(path: string): Promise<boolean> {
+	const url = new URL(path, document.location.href);
+	return await navigate(url);
+}

package/src/nav/loadData.ts

@@ -0,0 +1,134 @@
+import client from "../state/client";
+import type LayoutPath from "../types/LayoutPath";
+import type PageEndPoint from "../types/PageEndPoint";
+import type PageServerEndPoint from "../types/PageServerEndPoint";
+import type RouteHandler from "../types/RouteHandler";
+
+export default async function loadData(
+	handler: RouteHandler,
+	params: Record<string, string>,
+	path: string,
+	query: URLSearchParams,
+	newLayoutStack: LayoutPath[],
+	clientEndPoint: PageEndPoint | undefined,
+	serverEndPoint: PageServerEndPoint | undefined,
+	prefetch = false,
+): Promise<Record<string, string> | void> {
+	let data = {};
+	if (handler.layouts) {
+		let layoutStack = client.layoutStack;
+		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, slotRegion: 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,
+					query,
+					params,
+					layoutEndPoint,
+					layoutServerEndPoint,
+				);
+				if (layoutResponse?.ok === false) {
+					return;
+				}
+				Object.assign(data, stackLayout.data);
+				newLayoutStack.push(stackLayout);
+			}
+		}
+	}
+	let endPointResponse = await loadClientAndServerData(
+		data,
+		document.location.origin + path,
+		query,
+		params,
+		clientEndPoint,
+		serverEndPoint,
+	);
+	if (endPointResponse?.ok === false) {
+		return;
+	}
+	return data;
+}
+
+async function loadClientAndServerData(
+	data: Record<string, any>,
+	location: string,
+	query: URLSearchParams,
+	params: Record<string, string>,
+	clientEndPoint?: PageEndPoint,
+	serverEndPoint?: PageServerEndPoint,
+): Promise<Response | undefined | void> {
+	let prefetchedData = client.prefetchedData;
+
+	if (clientEndPoint?.load) {
+		const clientKey = location + (query.size > 0 ? `?${query}` : "");
+		if (prefetchedData[clientKey]) {
+			Object.assign(data, prefetchedData[clientKey]);
+		} else {
+			const clientUrl = new URL(document.location.href);
+			for (let [name, value] of query) {
+				clientUrl.searchParams.append(name, value);
+			}
+			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[clientKey] = clientData;
+					}
+				} else {
+					return clientResponse;
+				}
+			}
+		}
+	}
+
+	if (serverEndPoint?.load) {
+		const serverLocation = location.replace(/\/$/, "") + "/~server";
+		const serverKey = serverLocation + (query.size > 0 ? `?${query}` : "");
+		if (prefetchedData[serverKey]) {
+			Object.assign(data, prefetchedData[serverKey]);
+		} else {
+			const serverUrl = new URL(serverLocation);
+			for (let [name, value] of query) {
+				serverUrl.searchParams.append(name, value);
+			}
+			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[serverKey] = serverData;
+					}
+				} else {
+					return serverResponse;
+				}
+			}
+		}
+	}
+}
+
+function buildClientParams(url: URL, params: Record<string, string>, data: Record<string, any>) {
+	return {
+		url,
+		params,
+		data,
+	};
+}

package/src/nav/navigate.ts

@@ -0,0 +1,164 @@
+import { clearLayoutSlot, fillLayoutSlot, hydrate } from "@torpor/view";
+import { type Component, type SlotRender } from "@torpor/view";
+import { mount } from "@torpor/view";
+import $page from "../state/$page";
+import client from "../state/client";
+import type LayoutPath from "../types/LayoutPath";
+import type PageEndPoint from "../types/PageEndPoint";
+import type PageServerEndPoint from "../types/PageServerEndPoint";
+import formSubmit from "./formSubmit";
+import loadData from "./loadData";
+
+// @ts-ignore
+export default async function navigate(url: URL, withHydration = 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 = client.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,
+		query,
+		newLayoutStack,
+		clientEndPoint,
+		serverEndPoint,
+	);
+	// We may have form data in a hidden input -- not sure if this is the best
+	// way to do it
+	let formInput = document.getElementById("t-form-data") as HTMLInputElement;
+	let form: Record<string, string> | undefined;
+	if (formInput) {
+		form = JSON.parse(formInput.value);
+		$page.form = form;
+		formInput.remove();
+	}
+	let $props: Record<string, any> = { data };
+
+	// We may have form data in $page.form, either from the hidden input
+	// (above), or added via onformsubmit (below)
+	$props.form = $page.form;
+
+	// Add some special context for submitting Forms client-side
+	const $context = {
+		TorporBuildContext: { onformsubmit: formSubmit },
+	};
+
+	client.layoutStack.push({ path: route.handler.path, data: {}, reuse: false, slotRegion: null });
+	client.layoutStack = newLayoutStack;
+	let layoutStack = client.layoutStack;
+
+	// 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) {
+			let i = layoutStack.length - 1;
+			layoutStack[i].slotRegion = 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].slotRegion.startNode.parentNode as HTMLElement;
+					clearLayoutSlot(layoutStack[i].slotRegion);
+					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].slotRegion = fillLayoutSlot(
+							layoutEndPoint.component!,
+							slotFunctions[i + 1],
+							parent,
+							anchor,
+							$props,
+							$context,
+						);
+					};
+				}
+			}
+		}
+	}
+
+	if (withHydration) {
+		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
+	client.prefetchedData = {};
+
+	return true;
+}

package/src/nav/reload.ts

@@ -0,0 +1,9 @@
+import navigate from "./navigate";
+
+/**
+ * Reloads data for the currently loaded page and rerenders it.
+ */
+export default async function reload(): Promise<boolean> {
+	const url = new URL(document.location.href);
+	return await navigate(url);
+}

package/src/nav.ts

@@ -0,0 +1,4 @@
+import load from "./nav/load";
+import reload from "./nav/reload";
+
+export { load, reload };

package/src/response/badRequest.ts

@@ -0,0 +1,19 @@
+import response from "./response";
+
+/**
+ * 400 Bad Request
+ *
+ * The HTTP 400 Bad Request client error response status code indicates that the
+ * server would not process the request due to something the server considered
+ * to be a client error. The reason for a 400 response is typically due to
+ * malformed request syntax, invalid request message framing, or deceptive
+ * request routing.
+ *
+ * Clients that receive a 400 response should expect that repeating the request
+ * without modification will fail with the same error.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/400
+ */
+export default function badRequest(body?: object | string): Response {
+	return response(400, body ?? "Bad request");
+}

package/src/response/created.ts

@@ -0,0 +1,20 @@
+import response from "./response";
+
+/**
+ * 201 Created
+ *
+ * The HTTP 201 Created successful response status code indicates that the HTTP
+ * request has led to the creation of a resource. This status code is commonly
+ * sent as the result of a POST request.
+ *
+ * The new resource, or a description and link to the new resource, is created
+ * before the response is returned. The newly-created items can be returned in
+ * the body of the response message, but must be locatable by the URL of the
+ * initiating request or by the URL in the value of the Location header provided
+ * with the response.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/201
+ */
+export default function created(body?: object | string): Response {
+	return response(201, body);
+}

package/src/response/forbidden.ts

@@ -0,0 +1,21 @@
+import response from "./response";
+
+/**
+ * 403 Forbidden
+ *
+ * The HTTP 403 Forbidden client error response status code indicates that the
+ * server understood the request but refused to process it. This status is
+ * similar to 401, except that for 403 Forbidden responses, authenticating or
+ * re-authenticating makes no difference. The request failure is tied to
+ * application logic, such as insufficient permissions to a resource or action.
+ *
+ * Clients that receive a 403 response should expect that repeating the request
+ * without modification will fail with the same error. Server owners may decide
+ * to send a 404 response instead of a 403 if acknowledging the existence of a
+ * resource to clients with insufficient privileges is not desired.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/403
+ */
+export default function forbidden(body?: object | string): Response {
+	return response(403, body ?? "Forbidden");
+}

package/src/response/found.ts

@@ -0,0 +1,30 @@
+import transfer from "./transfer";
+
+/**
+ * 302 Found
+ *
+ * The HTTP 302 Found redirection response status code indicates that the
+ * requested resource has been temporarily moved to the URL in the Location
+ * header.
+ *
+ * A browser receiving this status will automatically request the resource at
+ * the URL in the Location header, redirecting the user to the new page. Search
+ * engines receiving this response will not attribute links to the original URL
+ * to the new resource, meaning no SEO value is transferred to the new URL.
+ *
+ * > Note: In the Fetch Standard, when a user agent receives a 302 in response
+ * > to a POST request, it uses the GET method in the subsequent redirection
+ * > request, as permitted by the HTTP specification. To avoid user agents
+ * > modifying the request, use 307 Temporary Redirect instead, as altering the
+ * > method after a 307 response is prohibited.
+ *
+ * > In cases where you want any request method to be changed to GET, use 303
+ * > See Other. This is useful when you want to give a response to a PUT method
+ * > that is not the uploaded resource but a confirmation message such as: "you
+ * > successfully uploaded XYZ".
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/302
+ */
+export default function permRedirect(location: string): Response {
+	return transfer(308, location);
+}

package/src/response/methodNotAllowed.ts

@@ -0,0 +1,18 @@
+import response from "./response";
+
+/**
+ * 405 Method Not Allowed
+ *
+ * The HTTP 405 Method Not Allowed client error response status code indicates
+ * that the server knows the request method, but the target resource doesn't
+ * support this method. The server must generate an Allow header in a 405
+ * response with a list of methods that the target resource currently supports.
+ *
+ * Improper server-side permissions set on files or directories may cause a 405
+ * response when the request would otherwise be expected to succeed.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/405
+ */
+export default function methodNotAllowed(body?: object | string): Response {
+	return response(405, body ?? "Method not allowed");
+}

package/src/response/movedPermanently.ts

@@ -0,0 +1,25 @@
+import transfer from "./transfer";
+
+/**
+ * 301 Moved Permanently
+ *
+ * The HTTP 301 Moved Permanently redirection response status code indicates
+ * that the requested resource has been permanently moved to the URL in the
+ * Location header.
+ *
+ * A browser receiving this status will automatically request the resource at
+ * the URL in the Location header, redirecting the user to the new page. Search
+ * engines receiving this response will attribute links to the original URL to
+ * the redirected resource, passing the SEO ranking to the new URL.
+ *
+ * > Note: In the Fetch Standard, when a user agent receives a 301 in response
+ * > to a POST request, it uses the GET method in the subsequent redirection
+ * > request, as permitted by the HTTP specification. To avoid user agents
+ * > modifying the request, use 308 Permanent Redirect instead, as altering the
+ * > method after a 308 response is prohibited.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/301
+ */
+export default function permRedirect(location: string): Response {
+	return transfer(308, location);
+}

package/src/response/notFound.ts

@@ -0,0 +1,24 @@
+import response from "./response";
+
+/**
+ * 404 Not Found
+ *
+ * The HTTP 404 Not Found client error response status code indicates that the
+ * server cannot find the requested resource. Links that lead to a 404 page are
+ * often called broken or dead links and can be subject to link rot.
+ *
+ * A 404 status code only indicates that the resource is missing without
+ * indicating if this is temporary or permanent. If a resource is permanently
+ * removed, servers should send the 410 Gone status instead.
+ *
+ * 404 errors on a website can lead to a poor user experience for your visitors,
+ * so the number of broken links (internal and external) should be minimized to
+ * prevent frustration for readers. Common causes of 404 responses are mistyped
+ * URLs or pages that are moved or deleted without redirection. For more
+ * information, see the Redirections in HTTP guide.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404
+ */
+export default function notFound(body?: object | string): Response {
+	return response(404, body ?? "Not found");
+}

package/src/response/notModified.ts

@@ -0,0 +1,34 @@
+import transfer from "./transfer";
+
+/**
+ * 304 Not Modified
+ *
+ * The HTTP 304 Not Modified redirection response status code indicates that
+ * there is no need to retransmit the requested resources.
+ *
+ * This response code is sent when the request is a conditional GET or HEAD
+ * request with an If-None-Match or an If-Modified-Since header and the
+ * condition evaluates to 'false'. It confirms that the resource cached by the
+ * client is still valid and that the server would have sent a 200 OK response
+ * with the resource if the condition evaluated to 'true'. See HTTP caching for
+ * more information.
+ *
+ * The response must not contain a body and must include the headers that would
+ * have been sent in an equivalent 200 response, such as:
+ *
+ * - Cache-Control
+ * - Content-Location
+ * - Date
+ * - ETag
+ * - Expires
+ * - Vary
+ *
+ * > Note: Many developer tools' network panels of browsers create extraneous
+ * > requests leading to 304 responses, so that access to the local cache is
+ * > visible to developers.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/304
+ */
+export default function notModified(location: string): Response {
+	return transfer(304, location);
+}