@torpor/build 0.4.10 → 0.4.12

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): 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/server/types/HttpMethod.ts

@@ -0,0 +1,12 @@
+type HttpMethod =
+	| "GET"
+	| "HEAD"
+	| "PATCH"
+	| "POST"
+	| "PUT"
+	| "DELETE"
+	| "OPTIONS"
+	| "CONNECT"
+	| "TRACE";
+
+export default HttpMethod;

package/src/server/types/MiddlewareFunction.ts

@@ -0,0 +1,8 @@
+import ServerEvent from "../ServerEvent";
+
+type MiddlewareFunction = (
+	ev: ServerEvent,
+	next: () => void | Promise<void>,
+) => void | Promise<void>;
+
+export default MiddlewareFunction;

package/src/server/types/ServerFunction.ts

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

package/src/server.ts

@@ -0,0 +1,7 @@
+import CookieHelper from "./server/CookieHelper";
+import HeaderHelper from "./server/HeaderHelper";
+import Server from "./server/Server";
+import ServerEvent from "./server/ServerEvent";
+import connectMiddleware from "./server/connect/connectMiddleware";
+
+export { Server, ServerEvent, CookieHelper, HeaderHelper, connectMiddleware };

package/src/site/Router.ts

@@ -0,0 +1,164 @@
+import type LayoutHandler from "../types/LayoutHandler";
+import type ManifestRoute from "../types/ManifestRoute";
+import type RouteHandler from "../types/RouteHandler";
+import pathToRegex from "../utils/pathToRegex";
+
+/**
+ * A router that handles file routes with layouts, hooks, etc.
+ */
+export default class Router {
+	routes: Route[] = [];
+
+	constructor() {}
+
+	//add(path: string, file: string) {
+	//	// TODO: Call the specific addX method based on the file path
+	//	this.addPage(route, file);
+	//}
+
+	addPages(routes: ManifestRoute[]): this {
+		for (let r of routes) {
+			this.routes.push(
+				new Route(r.path, {
+					path: r.path,
+					type: r.type,
+					endPoint: r.endPoint,
+					subFolder: r.subFolder,
+				}),
+			);
+		}
+		this.#sortRoutes();
+		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>, subFolder?: string): this {
+		this.routes.push(
+			new Route(path, {
+				path,
+				type,
+				endPoint,
+				subFolder,
+			}),
+		);
+		this.#sortRoutes();
+		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): RouteMatch | undefined {
+		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,
+				};
+			}
+		}
+	}
+
+	#loadHandler(handler: RouteHandler, path: string) {
+		handler.layouts = this.#findLayouts(path, handler);
+		handler.serverEndPoint = this.#findServer(path);
+		handler.serverHook = this.#findServerHook(handler);
+	}
+
+	#findLayouts(path: string, handler: RouteHandler): 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 && layoutRoute.handler.subFolder === handler.subFolder) {
+				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(handler: RouteHandler): (() => Promise<any>) | undefined {
+		// TODO: Should this be a collection, like layouts?
+		let serverHookPath = "/_hook/~server";
+		if (handler.subFolder !== undefined) {
+			serverHookPath = handler.subFolder + serverHookPath;
+		}
+		const serverHookRoute = this.routes.find((r) => r.path === serverHookPath);
+		return serverHookRoute && serverHookRoute.handler.endPoint;
+	}
+
+	// HACK: We're doing this here as well as in Site, so that you can use the
+	// Router externally without Site
+	#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;
+		});
+	}
+}
+
+class Route {
+	path: string;
+	regex: RegExp;
+	handler: RouteHandler;
+
+	constructor(path: string, handler: RouteHandler) {
+		this.path = path;
+		this.regex = pathToRegex(path);
+		this.handler = handler;
+	}
+}
+
+interface RouteMatch {
+	handler: RouteHandler;
+	params?: Record<string, string>;
+	query: URLSearchParams;
+}

package/src/site/Site.ts

@@ -0,0 +1,214 @@
+import { promises as fs } from "node:fs";
+import fpath from "node:path";
+import { type Plugin, type UserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import type Adapter from "../types/Adapter";
+import type Route from "../types/Route";
+import {
+	ERROR_ROUTE,
+	HOOK_ROUTE,
+	HOOK_SERVER_ROUTE,
+	LAYOUT_ROUTE,
+	LAYOUT_SERVER_ROUTE,
+	PAGE_ROUTE,
+	PAGE_SERVER_ROUTE,
+	RouteType,
+	SERVER_ROUTE,
+} from "../types/RouteType";
+import defaultAdapter from "./defaultAdapter";
+
+// 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: Route[] = [];
+	// 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 = defaultAdapter;
+	/**
+	 * Extra inputs, as absolute file paths, that will be compiled with the
+	 * output. What you do with them after that is up to you. File paths ending
+	 * with server.ts/js will only be compiled with the server output
+	 */
+	inputs: string[] = [];
+	/**
+	 * Vite config options to merge with the standard Torpor build options.
+	 * `plugins` and `build.rollupOptions.input` will be overridden, so you
+	 * should set `Site.plugins` and `Site.inputs` instead. Other options may be
+	 * overridden or incompatible, so experimentation may be required
+	 */
+	viteConfig?: UserConfig;
+
+	constructor() {
+		this.root = process.cwd();
+	}
+
+	/**
+	 * Adds a folder of routes, based on the names of the files in the folder
+	 * @param folder The folder containing the routes
+	 * @param subFolder If a subFolder is set, all routes in the folder will be
+	 * placed under the subFolder, and only hooks, layouts etc will be used if
+	 * they have the same subFolder. This can be used to create e.g. an `api`
+	 * set of routes with their own hook for authorization from various clients
+	 */
+	async addRouteFolder(folder: string, subFolder?: string): Promise<void> {
+		const routeFolder = fpath.join(this.root, folder);
+		const routeFiles = await fs.readdir(routeFolder, { recursive: true });
+		if (subFolder !== undefined && !subFolder.startsWith("/")) {
+			subFolder = "/" + subFolder;
+		}
+		for (let file of routeFiles) {
+			// The file must start with `+` or `_` and end with `.js` or `.ts`
+			if (/^(\+|_).+(\.js|\.ts)$/.test(fpath.basename(file))) {
+				let routePath = this.#routePath(file);
+				if (subFolder !== undefined) {
+					routePath = subFolder + routePath;
+				}
+				let type = this.#routeType(file);
+				file = fpath.relative(this.root, fpath.resolve(routeFolder, file));
+				this.routes.push({
+					path: routePath,
+					file,
+					type,
+					subFolder: subFolder,
+				});
+			}
+		}
+		this.#sortRoutes();
+	}
+
+	/**
+	 * Adds a file route, which can have a standard name (e.g. +page.ts) or any
+	 * name if you pass the type
+	 * @param path The route path
+	 * @param file The file
+	 * @param type The file type (if the file name is non-standard)
+	 */
+	addRouteFile(
+		path: string,
+		file: string,
+		type?:
+			| "+page"
+			| "+page.server"
+			| "+server"
+			| "_layout"
+			| "_layout.server"
+			| "_hook"
+			| "_hook.server"
+			| "_error",
+		subFolder?: string,
+	): void {
+		let routePath = this.#routePath(fpath.join(path, type ?? fpath.basename(file)));
+		let routeType = type ? this.#routeTypeFromString(type) : this.#routeType(file);
+		if (subFolder !== undefined && !subFolder.startsWith("/")) {
+			subFolder = "/" + subFolder;
+		}
+		this.routes.push({
+			path: routePath,
+			file,
+			type: routeType,
+			subFolder: subFolder,
+		});
+		this.#sortRoutes();
+	}
+
+	#routePath(file: string): string {
+		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(/\/$/, "");
+		return routePath.length > 0 ? `/${routePath}` : "/";
+	}
+
+	#routeType(file: string): RouteType {
+		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;
+		} else if (routePath.endsWith("_error")) {
+			return ERROR_ROUTE;
+		}
+		return -1;
+	}
+
+	#routeTypeFromString(
+		type:
+			| "+page"
+			| "+page.server"
+			| "+server"
+			| "_layout"
+			| "_layout.server"
+			| "_hook"
+			| "_hook.server"
+			| "_error",
+	) {
+		switch (type) {
+			case "+page":
+				return PAGE_ROUTE;
+			case "+page.server":
+				return PAGE_SERVER_ROUTE;
+			case "+server":
+				return SERVER_ROUTE;
+			case "_layout":
+				return LAYOUT_ROUTE;
+			case "_layout.server":
+				return LAYOUT_SERVER_ROUTE;
+			case "_hook":
+				return HOOK_ROUTE;
+			case "_hook.server":
+				return HOOK_SERVER_ROUTE;
+			case "_error":
+				return ERROR_ROUTE;
+		}
+	}
+
+	// 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

@@ -0,0 +1,108 @@
+import manifest from "@torpor/build/manifest";
+import loadData from "../nav/loadData.ts";
+import navigate from "../nav/navigate.ts";
+import $page from "../state/$page.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);
+
+// 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 = link.href;
+		const url = new URL(href);
+
+		if (await navigate(url)) {
+			window.history.pushState(null, "", url);
+		} else {
+			window.location.href = href;
+		}
+	}
+});
+
+// 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("touchstart", maybePrefetch);
+
+async function maybePrefetch(e: MouseEvent | TouchEvent) {
+	if (e.target && (e.target as HTMLElement).tagName === "A") {
+		const link = e.target as HTMLAnchorElement;
+
+		if (ignoreAnchorMouseEvent(link, e)) {
+			return;
+		}
+
+		const href = link.href;
+		const url = new URL(href);
+
+		const path = url.pathname;
+		const query = url.searchParams;
+		const route = router.match(path, query);
+		if (route) {
+			const handler = route.handler;
+			const params = route.params || {};
+
+			// There should be a client endpoint
+			const clientEndPoint: PageEndPoint | undefined = (await handler.endPoint()).default;
+
+			// There may be a server endpoint
+			const serverEndPoint: PageServerEndPoint | undefined =
+				handler.serverEndPoint && (await handler.serverEndPoint())?.default;
+
+			// Just dummy this up
+			let newStack: LayoutPath[] = [];
+
+			await loadData(handler, params, path, query, newStack, clientEndPoint, serverEndPoint, true);
+		}
+	}
+}
+
+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 () => {
+	await navigateToLocation(document.location);
+});
+
+// Do the initial navigation and hydration
+await navigateToLocation(document.location, true);
+
+async function navigateToLocation(location: Location, firstTime = false) {
+	// Reset $page on submit and link navigation
+	// TODO: Should we put data in $page.data??
+	$page.form = undefined;
+
+	return await navigate(new URL(location.toString()), firstTime);
+}

package/src/site/clientEntryDev.ts

@@ -0,0 +1,3 @@
+import { setDevMode } from "@torpor/view/dev";
+
+setDevMode();

package/src/site/defaultAdapter.ts

@@ -0,0 +1,11 @@
+import type Adapter from "../types/Adapter";
+
+// TODO: This should be an adapter-auto package that conditionally loads other packages...
+
+const defaultAdapter: Adapter = {
+	serve: () => {
+		console.log("An adapter needs to be set in site.config");
+	},
+};
+
+export default defaultAdapter;

package/src/site/manifest.ts

@@ -0,0 +1,54 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { Plugin } from "vite";
+import Site from "./Site";
+
+const moduleId = "@torpor/build/manifest";
+
+/**
+ * A Vite plugin that provides information about the app to both clientEntry and
+ * serverEntry.
+ */
+export default function manifest(site: Site, server = false): Plugin {
+	return {
+		name: "torpor-manifest",
+		resolveId: {
+			order: "pre",
+			handler(id) {
+				if (id === moduleId) {
+					return id;
+				}
+			},
+		},
+		// @ts-ignore
+		load(id, viteOptions) {
+			if (id === moduleId) {
+				let serverRequest = server && !!viteOptions?.ssr;
+				return `
+${!serverRequest ? "const load = { default: { load: true } };" : ""}
+export default {
+  routes: [
+    ${site.routes
+			.map((r) => {
+				let endPoint: string;
+				if (serverRequest || !/server\.(ts|js)$/.test(r.file)) {
+					endPoint = `() => import(/* @vite-ignore */ "${path.join(site.root, r.file)}")`;
+				} else {
+					// On the client, for a server route, we need to check
+					// whether there's a load function and set a dummy endPoint
+					// if so. The correct endpoint will be hit in clientEntry
+					// HACK: Should do this better than checking for `load:` in source...
+					const haveLoad = readFileSync(path.join(site.root, r.file)).includes("load:");
+					endPoint = haveLoad ? "() => load" : "undefined";
+				}
+				const sub = r.subFolder ? `"${r.subFolder}"` : "undefined";
+				return `{ path: "${r.path}", type: ${r.type}, endPoint: ${endPoint}, subFolder: ${sub} }`;
+			})
+			.join(",\n    ")}
+  ],
+};
+`;
+			}
+		},
+	};
+}