@torpor/build 0.0.6 → 0.1.0

package/src/server/HeaderHelper.ts

@@ -0,0 +1,25 @@
+export default class HeaderHelper {
+	request: Request;
+	headers: Map<string, string> = new Map();
+
+	constructor(request: Request) {
+		this.request = request;
+	}
+
+	get(name: string): string | undefined {
+		// If it's been set, return the updated value
+		if (this.headers.has(name)) {
+			return this.headers.get(name);
+		}
+		// Otherwise, return the value from the header
+		return this.request.headers.get(name) ?? undefined;
+	}
+
+	set(name: string, value: string) {
+		this.headers.set(name, value);
+	}
+
+	delete(name: string) {
+		this.headers.delete(name);
+	}
+}

package/src/server/Server.ts

@@ -0,0 +1,119 @@
+import pathToRegex from "../site/pathToRegex";
+import type MiddlewareFunction from "../types/MiddlewareFunction";
+import ServerEvent from "./ServerEvent";
+import type ServerFunction from "./ServerFunction";
+
+const noop = () => {};
+
+/**
+ * A Fetch API Request/Response server.
+ */
+export default class Server {
+	// TODO: We don't use any of the routes, just add("*") in runDev/runBuild...
+	routes: RouteHandler[] = [];
+	// TODO: We only use the Vite middleware here
+	middleware: MiddlewareFunction[] = [];
+
+	constructor() {
+		this.routes = [];
+		this.middleware = [];
+	}
+
+	/**
+	 * The standard Fetch API method that should work in any runtime (including
+	 * Node with polyfills).
+	 * @returns
+	 */
+	fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+		const request = new Request(input, init);
+		const url = new URL(request.url);
+		const match = this.match(url.pathname);
+		let ev = new ServerEvent(request, match?.params);
+
+		if (this.middleware.length) {
+			// TODO: Get middleware that applies to this route only?
+			await this.middleware[0](ev, buildNext(this.middleware, 0));
+			function buildNext(middleware: MiddlewareFunction[], i: number): () => void | Promise<void> {
+				if (ev.response) {
+					return noop;
+				}
+
+				if (i < middleware.length - 1) {
+					let next = middleware[i + 1];
+					return async () => next(ev, buildNext(middleware, i + 1));
+				} else {
+					return match
+						? async () => {
+								ev.response = await match.fn(ev);
+							}
+						: noop;
+				}
+			}
+		} else if (match) {
+			ev.response = await match.fn(ev);
+		} else {
+			return new Response(null, { status: 404 });
+		}
+
+		// TODO: Should I be returning 200 if there's no response? Because it's not an error??
+		ev.response ??= new Response(null, { status: 200 });
+		ev.addHeaders();
+
+		return ev.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 {
+		this.routes.push(new RouteHandler(path, fn));
+		return this;
+	}
+
+	match(path: string) {
+		for (let handler of this.routes) {
+			let match = path.match(handler.regex);
+			if (match) {
+				return {
+					fn: handler.fn,
+					params: match.groups,
+				};
+			}
+		}
+		console.log(`Server path not found: ${path}`);
+	}
+
+	// TODO:
+	//use(path: string, ...fn: MiddlewareFunction[])
+	use(...fn: MiddlewareFunction[]): Server {
+		this.middleware = this.middleware.concat(fn);
+		return this;
+	}
+}
+
+class RouteHandler {
+	path: string;
+	regex: RegExp;
+	fn: ServerFunction;
+
+	constructor(path: string, fn: ServerFunction) {
+		this.path = path;
+		this.regex = pathToRegex(path);
+		this.fn = fn;
+	}
+}
+
+//class MiddlewareHandler {
+//	path: string;
+//	regex: RegExp;
+//	fn: MiddlewareFunction;
+//
+//	constructor(path: string, fn: MiddlewareFunction) {
+//		this.path = path;
+//		this.regex = pathToRegex(path);
+//		this.fn = fn;
+//	}
+//}

package/src/server/ServerEvent.ts

@@ -0,0 +1,33 @@
+import CookieHelper from "./CookieHelper";
+import HeaderHelper from "./HeaderHelper";
+
+export default class ServerEvent {
+	request: Request;
+	response?: Response;
+	// TODO: Should we cast types??
+	params?: { [key: string]: string };
+
+	cookies: CookieHelper;
+	headers: HeaderHelper;
+
+	constructor(request: Request, params?: { [key: string]: string }) {
+		this.request = request;
+		this.params = params;
+		this.cookies = new CookieHelper(request);
+		this.headers = new HeaderHelper(request);
+	}
+
+	addHeaders() {
+		if (!this.response) {
+			throw new Error("Response not created yet");
+		}
+
+		for (let cookie of this.cookies.cookies.values()) {
+			this.response.headers.append("set-cookie", cookie);
+		}
+
+		for (let header of this.headers.headers.entries()) {
+			this.response.headers.append(header[0], header[1]);
+		}
+	}
+}

package/src/server/ServerFunction.ts

@@ -0,0 +1,5 @@
+import ServerEvent from "./ServerEvent";
+
+type ServerFunction = (e: ServerEvent) => Response | Promise<Response | undefined> | undefined;
+
+export default ServerFunction;

package/src/server/contentType.ts

@@ -0,0 +1,85 @@
+// From https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types/Common_types
+
+export default function contentType(extension: string) {
+	return types[extension] || "application/octet-stream";
+}
+
+const types: Record<string, string> = {
+	".aac": "audio/aac",
+	".abw": "application/x-abiword",
+	".apng": "image/apng",
+	".arc": "application/x-freearc",
+	".avif": "image/avif",
+	".avi": "video/x-msvideo",
+	".azw": "application/vnd.amazon.ebook",
+	".bin": "application/octet-stream",
+	".bmp": "image/bmp",
+	".bz": "application/x-bzip",
+	".bz2": "application/x-bzip2",
+	".cda": "application/x-cdf",
+	".csh": "application/x-csh",
+	".css": "text/css",
+	".csv": "text/csv",
+	".doc": "application/msword",
+	".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	".eot": "application/vnd.ms-fontobject",
+	".epub": "application/epub+zip",
+	".gz": "application/gzip",
+	".gif": "image/gif",
+	".htm": "text/html",
+	".html": "text/html",
+	".ico": "image/vnd.microsoft.icon",
+	".ics": "text/calendar",
+	".jar": "application/java-archive",
+	".jpeg": "image/jpeg",
+	".jpg": "image/jpeg",
+	".js": "text/javascript",
+	".json": "application/json",
+	".jsonld": "application/ld+json",
+	".mid": "audio/midi",
+	".midi": "audio/midi",
+	".mjs": "text/javascript",
+	".mp3": "audio/mpeg",
+	".mp4": "video/mp4",
+	".mpeg": "video/mpeg",
+	".mpkg": "application/vnd.apple.installer+xml",
+	".odp": "application/vnd.oasis.opendocument.presentation",
+	".ods": "application/vnd.oasis.opendocument.spreadsheet",
+	".odt": "application/vnd.oasis.opendocument.text",
+	".oga": "audio/ogg",
+	".ogv": "video/ogg",
+	".ogx": "application/ogg",
+	".opus": "audio/ogg",
+	".otf": "font/otf",
+	".png": "image/png",
+	".pdf": "application/pdf",
+	".php": "application/x-httpd-php",
+	".ppt": "application/vnd.ms-powerpoint",
+	".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+	".rar": "application/vnd.rar",
+	".rtf": "application/rtf",
+	".sh": "application/x-sh",
+	".svg": "image/svg+xml",
+	".tar": "application/x-tar",
+	".tif": "image/tiff",
+	".tiff": "image/tiff",
+	".ts": "video/mp2t",
+	".ttf": "font/ttf",
+	".txt": "text/plain",
+	".vsd": "application/vnd.visio",
+	".wav": "audio/wav",
+	".weba": "audio/webm",
+	".webm": "video/webm",
+	".webp": "image/webp",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+	".xhtml": "application/xhtml+xml",
+	".xls": "application/vnd.ms-excel",
+	".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	".xml": "application/xml",
+	".xul": "application/vnd.mozilla.xul+xml",
+	".zip": "application/zip",
+	".3gp": "video/3gpp",
+	".3g2": "video/3gpp2",
+	".7z": "application/x-7z-compressed",
+};

package/src/site/Router.ts

@@ -0,0 +1,136 @@
+import type LayoutHandler from "../types/LayoutHandler";
+import type ManifestRoute from "../types/ManifestRoute";
+import type RouteHandler from "../types/RouteHandler";
+import pathToRegex from "./pathToRegex";
+
+export default class Router {
+	routes: Route[] = [];
+	//pages = new Map<string, PageEndPoint>();
+
+	constructor() {}
+
+	//add(path: string, file: string) {
+	//	// TODO: Call the specific addX method based on the file path
+	//	this.addPage(route, file);
+	//}
+
+	addPages(routes: ManifestRoute[]) {
+		for (let r of routes) {
+			this.routes.push(
+				new Route(r.path, {
+					path: r.path,
+					type: r.type,
+					endPoint: r.endPoint,
+				}),
+			);
+		}
+		return this;
+	}
+
+	// TODO: Allow calling with the endpoint itself, so that you can setup an app with no scaffold
+	addPage(path: string, type: number, endPoint: () => Promise<any>) {
+		//this.server.get(route, (ev) => this.loadPage(ev, file));
+		this.routes.push(
+			new Route(path, {
+				path,
+				type,
+				endPoint,
+			}),
+		);
+		return this;
+	}
+
+	/*
+	loadPage(ev: ServerEvent, file: string): Response {
+		let page = this.pages.get(file);
+		if (!page) {
+			page = {};
+			this.pages.set(file, page);
+		}
+	}
+	*/
+
+	match(path: string, query: URLSearchParams) {
+		for (let route of this.routes) {
+			let match = path.match(route.regex);
+			if (match) {
+				// Lazy load server endpoints and layouts
+				if (!route.handler.loaded) {
+					this.loadHandler(route.handler, route.path);
+				}
+
+				return {
+					handler: route.handler,
+					params: match.groups,
+					query,
+				};
+			}
+		}
+
+		console.log(`not found: '${path}'`);
+	}
+
+	loadHandler(handler: RouteHandler, path: string) {
+		////handler.endPoint = import(handler.path);
+		handler.layouts = this.findLayouts(path);
+		handler.serverEndPoint = this.findServer(path);
+		handler.serverHook = this.findServerHook(path);
+	}
+
+	findLayouts(path: string): LayoutHandler[] | undefined {
+		let layouts: LayoutHandler[] = [];
+		let parts = path
+			// Strip the trailing`~/server` (so we don't look for `~/server/_layout`
+			// which will never exist)
+			.replace(/\/~server$/, "")
+			// The path will always start with / so splitting e.g. `/first/second`
+			// will result in ['', 'first', 'second'] and checks for `/_layout`,
+			// `/first/_layout` and `/second/_layout`
+			.split("/");
+		let basePath = "";
+		for (let i = 0; i < parts.length; i++) {
+			if (i > 0) {
+				basePath += "/" + parts[i];
+			}
+			const layoutPath = basePath + "/_layout";
+			const layoutRoute = this.routes.find((r) => r.path === layoutPath);
+			if (layoutRoute) {
+				layouts.push({
+					path: layoutPath,
+					endPoint: layoutRoute.handler.endPoint,
+					serverEndPoint: this.findServer(layoutPath),
+				});
+			}
+		}
+		return layouts.length ? layouts : undefined;
+	}
+
+	findServer(path: string): (() => Promise<any>) | undefined {
+		const serverPath = path.replace(/\/$/, "") + "/~server";
+		const serverRoute = this.routes.find((r) => r.path === serverPath);
+		return serverRoute && serverRoute.handler.endPoint;
+	}
+
+	findServerHook(path: string): (() => Promise<any>) | undefined {
+		// TODO: Should this be a collection, like layouts?
+		let serverHookPath = "/_hook/~server";
+		// HACK: Generalise this
+		if (path.startsWith("/api/")) {
+			serverHookPath = "/api" + serverHookPath;
+		}
+		const serverHookRoute = this.routes.find((r) => r.path === serverHookPath);
+		return serverHookRoute && serverHookRoute.handler.endPoint;
+	}
+}
+
+class Route {
+	path: string;
+	regex: RegExp;
+	handler: RouteHandler;
+
+	constructor(path: string, handler: RouteHandler) {
+		this.path = path;
+		this.regex = pathToRegex(path);
+		this.handler = handler;
+	}
+}

package/src/site/Routerx.ts

@@ -0,0 +1,67 @@
+import ServerFunction from "../server/ServerFunction";
+import type HttpMethod from "../types/HttpMethod";
+import type MiddlewareFunction from "../types/MiddlewareFunction";
+import pathToRegex from "./pathToRegex";
+
+// This is not actually used anywhere, for now at least
+
+export default class Router {
+	methods = new Map<HttpMethod, RouteHandler[]>();
+	middleware: MiddlewareHandler[] = [];
+
+	constructor() {
+		// Create all method handlers up front so we don't have to worry about
+		// checking if they exist. Using a non-standard method will just error
+		this.methods.set("GET", []);
+		this.methods.set("HEAD", []);
+		this.methods.set("PATCH", []);
+		this.methods.set("POST", []);
+		this.methods.set("PUT", []);
+		this.methods.set("DELETE", []);
+		this.methods.set("OPTIONS", []);
+		this.methods.set("CONNECT", []);
+		this.methods.set("TRACE", []);
+	}
+
+	add(method: HttpMethod, path: string, fn: ServerFunction): Router {
+		this.methods.get(method)!.push(new RouteHandler(path, fn));
+		return this;
+	}
+
+	match(method: HttpMethod, path: string) {
+		for (let handler of this.methods.get(method)!) {
+			let match = path.match(handler.regex);
+			if (match) {
+				console.log("found", handler);
+				return {
+					fn: handler.fn,
+					params: match.groups,
+				};
+			}
+		}
+	}
+}
+
+class RouteHandler {
+	path: string;
+	regex: RegExp;
+	fn: ServerFunction;
+
+	constructor(path: string, fn: ServerFunction) {
+		this.path = path;
+		this.regex = pathToRegex(path);
+		this.fn = fn;
+	}
+}
+
+class MiddlewareHandler {
+	path: string;
+	regex: RegExp;
+	fn: MiddlewareFunction;
+
+	constructor(path: string, fn: MiddlewareFunction) {
+		this.path = path;
+		this.regex = pathToRegex(path);
+		this.fn = fn;
+	}
+}

package/src/site/Site.ts

@@ -0,0 +1,114 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { Plugin } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import node from "../adapters/node";
+import Adapter from "../types/Adapter";
+import {
+	HOOK_ROUTE,
+	HOOK_SERVER_ROUTE,
+	LAYOUT_ROUTE,
+	LAYOUT_SERVER_ROUTE,
+	PAGE_ROUTE,
+	PAGE_SERVER_ROUTE,
+	SERVER_ROUTE,
+} from "../types/RouteType";
+
+// 1. The user sets this up
+// 2. It is passed into serverEntry and clientEntry through a Vite plugin
+//    (defined in manifest.ts)
+// 3. In those files, it is used to build a Router
+
+/**
+ * The Site class contains the information necessary to setup a @torpor/build
+ * site, including routes, plugins, and options.
+ */
+export default class Site {
+	root: string;
+	routes: { path: string; file: string; type: number }[] = [];
+	// Is default plugins a bad idea?
+	// HACK: Set loose because otherwise it uses a list of allowed extensions
+	// TODO: Should probably just do this ourselves and let the user pass in
+	// tsconfigPaths themselves if they want to do something funky
+	plugins: Plugin[] = [tsconfigPaths({ loose: true })];
+	// Is default adapter a bad idea?
+	adapter: Adapter = node;
+
+	constructor() {
+		this.root = process.cwd();
+	}
+
+	async addRouteFolder(folder: string) {
+		const routeFolder = path.join(this.root, folder);
+		const routeFiles = await fs.readdir(routeFolder, { recursive: true });
+
+		for (let file of routeFiles) {
+			// The file must start with `+` or `_` and end with `.js` or `.ts`
+			if (/^(\+|_).+(\.js|\.ts)$/.test(path.basename(file))) {
+				let routePath = file
+					.replace(/^\//, "")
+					.replace(/(\.ts|\.js)$/, "")
+					.replace(/_hook.server$/, "_hook/~server")
+					.replace(/_layout.server$/, "_layout/~server")
+					.replace(/\+page.server$/, "~server")
+					.replace(/\+server$/, "")
+					.replace(/\+page$/, "")
+					.replace(/\/$/, "");
+				routePath = routePath.length > 0 ? `/${routePath}` : "/";
+				let type = this.#routeType(file);
+				file = path.relative(this.root, path.resolve(routeFolder, file));
+				this.routes.push({ path: routePath, file, type });
+			}
+		}
+		this.#sortRoutes();
+	}
+
+	addRouteFile(path: string, file: string) {
+		let type = this.#routeType(file);
+		this.routes.push({ path, file, type });
+		this.#sortRoutes();
+	}
+
+	#routeType(file: string): number {
+		let routePath = file.replace(/^\//, "").replace(/(\.ts|\.js)$/, "");
+		if (routePath.endsWith("+page")) {
+			return PAGE_ROUTE;
+		} else if (routePath.endsWith("+page.server")) {
+			return PAGE_SERVER_ROUTE;
+		} else if (routePath.endsWith("+server")) {
+			return SERVER_ROUTE;
+		} else if (routePath.endsWith("_layout")) {
+			return LAYOUT_ROUTE;
+		} else if (routePath.endsWith("_layout.server")) {
+			return LAYOUT_SERVER_ROUTE;
+		} else if (routePath.endsWith("_hook")) {
+			return HOOK_ROUTE;
+		} else if (routePath.endsWith("_hook.server")) {
+			return HOOK_SERVER_ROUTE;
+		}
+		return -1;
+	}
+
+	// TODO: You could make your site in a single file, like e.g. Hono...
+	//addPage(path: string, endPoint: PageEndPoint, serverEndPoint?: PageServerEndPoint) {}
+	//addEndPoint(path: string, endPoint: ServerEndPoint) {}
+
+	#sortRoutes() {
+		this.routes = this.routes.sort((a, b) => {
+			// Sort [param]s after paths
+			// There might be a quicker/easier way to do this
+			for (let i = 0; i < Math.min(a.path.length, b.path.length); i++) {
+				if (a.path[i] === "[" && b.path[i] !== "[") {
+					return 1;
+				} else if (b.path[i] === "[" && a.path[i] !== "[") {
+					return -1;
+				} else if (a.path[i] === b.path[i]) {
+					// Keep going...
+				} else {
+					return a.path[i].localeCompare(b.path[i]);
+				}
+			}
+			return a.path.length - b.path.length;
+		});
+	}
+}

package/src/site/clientEntry.ts

@@ -1,10 +1,14 @@
+import manifest from "@torpor/build/manifest";
 import { hydrate, mount } from "@torpor/view";
 import { type Component, type SlotRender } from "@torpor/view";
-import "vinxi/client";
-import $page from "../state/$page";
-import type PageEndPoint from "../types/PageEndPoint";
-import type PageServerEndPoint from "../types/PageServerEndPoint";
-import routeHandlers from "./routeHandlers";
+import $page from "../state/$page.ts";
+import type PageEndPoint from "../types/PageEndPoint.ts";
+import type PageServerEndPoint from "../types/PageServerEndPoint.ts";
+import Router from "./Router.ts";
+
+// Build the router from the Site object created by the user
+const router = new Router();
+router.addPages(manifest.routes);
 
 // Intercept clicks on links
 window.addEventListener("click", async (e) => {
@@ -38,12 +42,8 @@ async function navigateToLocation(location: Location, firstTime = false) {
 	return await navigate(location.pathname, new URLSearchParams(location.search), firstTime);
 }
 
-async function navigate(
-	path: string,
-	urlParams: URLSearchParams,
-	firstTime = false,
-): Promise<boolean> {
-	console.log("navigating client to", path, urlParams.size ? `with ${urlParams}` : "");
+async function navigate(path: string, query: URLSearchParams, firstTime = false): Promise<boolean> {
+	console.log(`navigating to '${path}'${query.size ? ` with ${query}` : ""}`);
 
 	const parent = document.getElementById("app");
 	if (!parent) {
@@ -52,7 +52,7 @@ async function navigate(
 		return false;
 	}
 
-	const route = routeHandlers.match(path, urlParams);
+	const route = router.match(path, query);
 	if (!route) {
 		// TODO: 404
 		console.log("404");
@@ -64,10 +64,10 @@ async function navigate(
 	//$page.url = new URL(document.location.href);
 
 	const handler = route.handler;
-	const params = route.routeParams || {};
+	const params = route.params || {};
 
 	// There must be a client endpoint with a component
-	const clientEndPoint: PageEndPoint | undefined = (await handler.endPoint).default;
+	const clientEndPoint: PageEndPoint | undefined = (await handler.endPoint()).default;
 	if (!clientEndPoint?.component) {
 		// TODO: 404
 		console.log("404");
@@ -75,7 +75,8 @@ async function navigate(
 	}
 
 	// There may be a server endpoint
-	const serverEndPoint: PageServerEndPoint | undefined = (await handler.serverEndPoint)?.default;
+	const serverEndPoint: PageServerEndPoint | undefined =
+		handler.serverEndPoint && (await handler.serverEndPoint())?.default;
 
 	// Pass the data into $props
 	// TODO: Don't load if this is the first time -- it should have been passed to us, somehow...
@@ -86,9 +87,9 @@ async function navigate(
 			for (let key in params) {
 				layoutPath = layoutPath.replace(`[${key}]`, params[key]);
 			}
-			const layoutEndPoint: PageEndPoint | undefined = (await layout.endPoint)?.default;
-			const layoutServerEndPoint: PageServerEndPoint | undefined = (await layout.serverEndPoint)
-				?.default;
+			const layoutEndPoint: PageEndPoint | undefined = (await layout.endPoint())?.default;
+			const layoutServerEndPoint: PageServerEndPoint | undefined =
+				layout.serverEndPoint && (await layout.serverEndPoint())?.default;
 			const layoutData = await loadClientAndServerData(
 				data,
 				document.location.origin + layoutPath,
@@ -120,7 +121,8 @@ async function navigate(
 		slotFunctions[handler.layouts.length] = (parent, anchor, _, context) =>
 			clientEndPoint.component!(parent, anchor, $props, context);
 		for (let i = handler.layouts.length - 1; i >= 0; i--) {
-			const layoutEndPoint: PageEndPoint | undefined = (await handler.layouts[i].endPoint)?.default;
+			const layoutEndPoint: PageEndPoint | undefined = (await handler.layouts[i].endPoint())
+				?.default;
 			if (layoutEndPoint?.component) {
 				if (i === 0) {
 					component = layoutEndPoint.component as Component;
@@ -174,7 +176,7 @@ async function loadClientAndServerData(
 		const serverResponse = await fetch(serverUrl);
 		if (
 			serverResponse?.ok &&
-			serverResponse.headers.get("content-type")?.includes("application/json")
+			serverResponse.headers.get("Content-Type")?.includes("application/json")
 		) {
 			const serverData = await serverResponse.json();
 			Object.assign(newData, serverData);