@torpor/build 0.0.1

package/src/response/seeOther.ts

@@ -0,0 +1,13 @@
+import transfer from "./transfer";
+
+/**
+ * 303 See Other
+ *
+ * The server sent this response to direct the client to get the requested
+ * resource at another URI with a GET request.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303
+ */
+export default function seeOther(location: string): Response {
+	return transfer(303, location);
+}

package/src/response/serverError.ts

@@ -0,0 +1,10 @@
+import response from "./response";
+
+/**
+ * The server has encountered a situation it does not know how to handle.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/500
+ */
+export default function serverError(body?: object | string): Response {
+	return response(500, body);
+}

package/src/response/transfer.ts

@@ -0,0 +1,14 @@
+/**
+ * Creates a redirect response with the supplied status code.
+ */
+export default function transfer(
+	status: 300 | 301 | 302 | 303 | 304 | 307 | 308,
+	location: string,
+): Response {
+	return new Response(null, {
+		status,
+		headers: {
+			location,
+		},
+	});
+}

package/src/response/unauthorized.ts

@@ -0,0 +1,12 @@
+import response from "./response";
+
+/**
+ * Although the HTTP standard specifies "unauthorized", semantically this
+ * response means "unauthenticated". That is, the client must authenticate
+ * itself to get the requested response.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401
+ */
+export default function unauthorized(body?: object | string): Response {
+	return response(401, body);
+}

package/src/response/unprocessable.ts

@@ -0,0 +1,12 @@
+import response from "./response";
+
+/**
+ * 422 Unprocessable Content
+ *
+ * The request was well-formed but was unable to be followed due to semantic errors.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422
+ */
+export default function unprocessable(body?: object | string): Response {
+	return response(422, body);
+}

package/src/response.ts

@@ -0,0 +1,33 @@
+import badRequest from "./response/badRequest";
+import created from "./response/created";
+import forbidden from "./response/forbidden";
+import methodNotAllowed from "./response/methodNotAllowed";
+import moved from "./response/moved";
+import notFound from "./response/notFound";
+import notModified from "./response/notModified";
+import ok from "./response/ok";
+import redirect from "./response/redirect";
+import response from "./response/response";
+import seeOther from "./response/seeOther";
+import serverError from "./response/serverError";
+import transfer from "./response/transfer";
+import unauthorized from "./response/unauthorized";
+import unprocessable from "./response/unprocessable";
+
+export {
+	response,
+	ok,
+	created,
+	transfer,
+	seeOther,
+	notModified,
+	redirect,
+	moved,
+	badRequest,
+	unauthorized,
+	forbidden,
+	notFound,
+	methodNotAllowed,
+	unprocessable,
+	serverError,
+};

package/src/site/FileSystemRouter.ts

@@ -0,0 +1,24 @@
+import { BaseFileSystemRouter, cleanPath } from "vinxi/fs-router";
+
+export default class FileSystemRouter extends BaseFileSystemRouter {
+	toPath(src: string) {
+		let routePath = cleanPath(src, this.config)
+			.replace(/^\//, "")
+			.replace(/_layout.server$/, "_layout/~server")
+			.replace(/\+page.server$/, "~server")
+			.replace(/\+page$/, "")
+			.replace(/\+server$/, "")
+			.replace(/\/$/, "");
+		return routePath?.length > 0 ? `/${routePath}` : "/";
+	}
+
+	toRoute(filePath: string) {
+		return {
+			path: this.toPath(filePath),
+			$handler: {
+				src: filePath,
+				pick: ["default"],
+			},
+		};
+	}
+}

package/src/site/buildRoutePath.ts

@@ -0,0 +1,25 @@
+type ParamsType = Record<PropertyKey, any>;
+
+export default function buildRoutePath<RP extends ParamsType, UP extends ParamsType>(
+	path: string,
+	routeParams: RP,
+	urlParams?: UP,
+) {
+	for (let [key, value] of Object.entries(routeParams)) {
+		path = path.replace(`[${key}]`, value);
+	}
+	if (urlParams) {
+		// TODO: More sophisticated url params serialization
+		let params = Object.entries(urlParams)
+			.map(([key, value]) => {
+				if (value != null) {
+					return `${key}=${value}`;
+				}
+			})
+			.filter(Boolean);
+		if (params.length) {
+			path += `?${params.join("&")}`;
+		}
+	}
+	return path;
+}

package/src/site/clientEntry.ts

@@ -0,0 +1,191 @@
+import { hydrate, mount } from "@torpor/view";
+import type { Component, 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";
+
+// Intercept clicks on links
+window.addEventListener("click", async (e) => {
+	if (e.target && (e.target as HTMLElement).tagName === "A") {
+		e.preventDefault();
+		const href = (e.target as HTMLLinkElement).href;
+		const url = new URL(href);
+
+		// Update $page before building the components
+		// TODO: Find somewhere better to put this
+		$page.url = url;
+
+		if (await navigate(url.pathname, url.searchParams)) {
+			window.history.pushState(null, "", url);
+		} else {
+			window.location.href = href;
+		}
+	}
+});
+
+// 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
+navigateToLocation(document.location, true);
+
+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, "with", urlParams.toString());
+
+	const parent = document.getElementById("app");
+	if (!parent) {
+		// TODO: 500
+		console.log("500");
+		return false;
+	}
+
+	const route = routeHandlers.match(path, urlParams);
+	if (!route) {
+		// TODO: 404
+		console.log("404");
+		return false;
+	}
+
+	// Update $page before building the components
+	// TODO: Find somewhere better to put this
+	//$page.url = new URL(document.location.href);
+
+	const handler = route.handler;
+	const params = route.routeParams || {};
+
+	// 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 = (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...
+	let data = {};
+	if (handler.layouts) {
+		for (let layout of handler.layouts) {
+			let layoutPath = layout.path;
+			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 layoutData = await loadClientAndServerData(
+				data,
+				document.location.origin + layoutPath,
+				params,
+				layoutEndPoint,
+				layoutServerEndPoint,
+			);
+			Object.assign(data, layoutData);
+		}
+	}
+	let endPointData = await loadClientAndServerData(
+		data,
+		document.location.origin + path,
+		params,
+		clientEndPoint,
+		serverEndPoint,
+	);
+	Object.assign(data, endPointData);
+	let $props: Record<string, any> = { data };
+
+	// 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
+	let component = clientEndPoint.component as Component;
+	let slots: Record<string, SlotRender> | undefined = undefined;
+	if (handler.layouts) {
+		let slotFunctions: SlotRender[] = [];
+		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;
+			if (layoutEndPoint?.component) {
+				if (i === 0) {
+					component = layoutEndPoint.component as Component;
+					slots = { _: slotFunctions[i + 1] };
+				} else {
+					slotFunctions[i] = (parent, anchor, _, context) =>
+						layoutEndPoint.component!(parent, anchor, $props, context, {
+							_: slotFunctions[i + 1],
+						});
+				}
+			}
+		}
+	}
+
+	if (firstTime) {
+		hydrate(parent, component, $props, slots);
+	} else {
+		// TODO: Clear ranges, reuse layouts etc
+		parent.textContent = "";
+
+		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>";
+		}
+	}
+
+	return true;
+}
+
+async function loadClientAndServerData(
+	data: Record<string, any>,
+	location: string,
+	params: Record<string, string>,
+	clientEndPoint?: PageEndPoint,
+	serverEndPoint?: PageServerEndPoint,
+) {
+	let newData = {};
+	if (clientEndPoint?.load) {
+		const clientUrl = new URL(document.location.href);
+		const clientParams = buildClientParams(clientUrl, params, data);
+		const clientData = await clientEndPoint.load(clientParams);
+		if (clientData) {
+			Object.assign(newData, clientData);
+		}
+	}
+	if (serverEndPoint?.load) {
+		const serverUrl = location.replace(/\/$/, "") + "/~server";
+		const serverResponse = await fetch(serverUrl);
+		if (
+			serverResponse?.ok &&
+			serverResponse.headers.get("content-type")?.includes("application/json")
+		) {
+			const serverData = await serverResponse.json();
+			Object.assign(newData, serverData);
+		}
+	}
+	return newData;
+}
+
+function buildClientParams(url: URL, params: Record<string, string>, data: Record<string, any>) {
+	return {
+		url,
+		params,
+		data,
+	};
+}

package/src/site/defineConfig.ts

@@ -0,0 +1,5 @@
+import type UserConfig from "../types/UserConfig";
+
+export default function defineConfig(config: UserConfig): UserConfig {
+	return config;
+}

package/src/site/defineSite.ts

@@ -0,0 +1,74 @@
+import torpor from "@torpor/unplugin/vite";
+import path from "path";
+import { AppOptions, RouterSchemaInput, createApp } from "vinxi";
+import { config } from "vinxi/plugins/config";
+import type UserConfig from "../types/UserConfig";
+import FileSystemRouter from "./FileSystemRouter";
+
+export default function defineSite(options?: UserConfig) {
+	// Set the port
+	process.env.PORT = (options?.port || 7059).toString();
+
+	// Get Vinxi to create and serve the app
+	return createApp({
+		routers: [
+			{
+				name: "assets",
+				type: "static",
+				dir: "./src/assets",
+			},
+			// Doesn't look like we can have two server routes?
+			// Have to put api in /routes
+			// Maybe we can support having /routes/api and routes/site and stripping /site from the start?
+			//{
+			//	name: "api",
+			//	type: "http",
+			//	target: "server",
+			//	// TODO: change this when published
+			//	handler: "node_modules/@torpor/build/src/site/serverEntry.ts",
+			//	routes: apiRoutes,
+			//	plugins: () => [config("custom", viteOptions())],
+			//},
+			{
+				name: "server",
+				type: "http",
+				target: "server",
+				// TODO: change this when published
+				handler: "node_modules/@torpor/build/src/site/serverEntry.ts",
+				routes,
+				plugins: () => [config("custom", viteOptions()), torpor({ server: true })],
+			},
+			{
+				name: "client",
+				type: "client",
+				target: "browser",
+				// TODO: change this when published
+				handler: "node_modules/@torpor/build/src/site/clientEntry.ts",
+				base: "/_build",
+				routes,
+				plugins: () => [config("custom", viteOptions()), torpor()],
+			},
+		],
+	});
+}
+
+function routes(router: RouterSchemaInput, app: AppOptions) {
+	return new FileSystemRouter(
+		{
+			dir: path.resolve("src/routes"),
+			extensions: ["js", "ts"],
+		},
+		router,
+		app,
+	);
+}
+
+function viteOptions() {
+	return {
+		resolve: {
+			alias: {
+				"@": path.resolve("src"),
+			},
+		},
+	};
+}

package/src/site/lazyRoute.ts

@@ -0,0 +1,72 @@
+export default async function lazyRoute(
+	component: { src: string; import(): Promise<any> },
+	clientManifest: any,
+	serverManifest: any,
+	//exported = "default",
+) {
+	if (import.meta.env.DEV) {
+		const manifest = import.meta.env.SSR ? serverManifest : clientManifest;
+		const mod = await manifest.inputs[component.src].import();
+		return mod;
+	} else {
+		const mod = await component.import();
+		return mod;
+	}
+	/*
+	return lazy(async () => {
+		if (import.meta.env.DEV) {
+			let manifest = import.meta.env.SSR ? serverManifest : clientManifest;
+
+			const mod = await manifest.inputs[component.src].import();
+			invariant(mod[exported], `Module ${component.src} does not export ${exported}`);
+			const Component = mod[exported];
+			let assets = await clientManifest.inputs?.[component.src].assets();
+			const styles = assets.filter((asset) => asset.tag === "style");
+
+			if (typeof window !== "undefined" && import.meta.hot) {
+				import.meta.hot.on("css-update", (data) => {
+					updateStyles(styles, data);
+				});
+			}
+
+			const Comp = forwardRef((props, ref) => {
+				if (typeof window !== "undefined") {
+					useLayoutEffect(() => {
+						return () => {
+							// remove style tags added by vite when a CSS file is imported
+							cleanupStyles(styles);
+						};
+					}, []);
+				}
+				return createElement(
+					Fragment,
+					null,
+					...assets.map((asset) => renderAsset(asset)),
+					createElement(Component, { ...props, ref: ref }),
+				);
+			});
+			return { default: Comp };
+		} else {
+			const mod = await component.import();
+
+			const Component = mod[exported];
+			let assets = await clientManifest.inputs?.[component.src].assets();
+
+			if (typeof window !== "undefined") {
+				const styles = assets.filter((asset) => asset.attrs.rel === "stylesheet");
+				preloadStyles(styles);
+			}
+
+			const Comp = forwardRef((props, ref) => {
+				return createElement(
+					Fragment,
+					null,
+					...assets.map((asset) => renderAsset(asset)),
+					createElement(Component, { ...props, ref: ref }),
+				);
+			});
+			return { default: Comp };
+		}
+	});
+    */
+}

package/src/site/routeHandlers.ts

@@ -0,0 +1,113 @@
+import { getManifest } from "vinxi/manifest";
+import fileRoutes, { RouteModule } from "vinxi/routes";
+import type RouteHandler from "../types/RouteHandler";
+import type RouteHandlerCollection from "../types/RouteHandlerCollection";
+import type RouteLayoutHandler from "../types/RouteLayoutHandler";
+import lazyRoute from "./lazyRoute";
+
+const clientManifest = getManifest("client");
+const serverManifest = getManifest("server");
+
+const routeHandlers: RouteHandlerCollection = {
+	handlers: fileRoutes
+		// HACK: Is there a better way to filter? glob in the config?
+		.filter((route) => !route.path.startsWith("_"))
+		.map((route) => {
+			return {
+				...route,
+				regex: pathToRegExp(route.path),
+				// TODO: Implement the rest of the lazyRoute stuff from vinxi/react or vinxi/solid
+				endPoint: lazyRoute(route.$handler, clientManifest, serverManifest),
+				loaded: false,
+			};
+		}),
+	match(path, urlParams) {
+		console.log("matching", path);
+
+		// TODO: Lots of testing etc
+		for (let handler of (this as RouteHandlerCollection).handlers) {
+			let match = path.match(handler.regex);
+			if (match) {
+				// Lazy load server endpoints and layouts
+				// Partly because it makes sense to do it here, but also because
+				// it doesn't work if we try to do it upfront for some reason
+				if (!handler.loaded) {
+					loadHandler(handler);
+					handler.loaded = true;
+				}
+				return {
+					handler,
+					routeParams: match.groups,
+					urlParams: urlParams ? Object.fromEntries(urlParams) : undefined,
+				};
+			}
+		}
+
+		console.log("not found");
+		//for (let handler of (this as RouteHandlerCollection).handlers) {
+		//	console.log("  have", handler.path, handler.regex);
+		//}
+	},
+};
+
+function pathToRegExp(path: string): RegExp {
+	const pattern = path
+		.split("/")
+		.map((p) => {
+			return p.replace(/\[([^\/]+?)\]/, "(?<$1>[^\\/]+?)");
+		})
+		.join("\\/");
+	return new RegExp(`^${pattern}$`);
+}
+
+function loadHandler(handler: RouteHandler) {
+	handler.layouts = findLayouts(handler.path, fileRoutes);
+	handler.serverEndPoint = findServer(handler.path, fileRoutes);
+	handler.serverHook = findServerHook(handler.path, fileRoutes);
+}
+
+function findLayouts(path: string, fileRoutes: RouteModule[]): RouteLayoutHandler[] | undefined {
+	let layouts: RouteLayoutHandler[] = [];
+	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 = fileRoutes.find((r) => r.path === layoutPath);
+		if (layoutRoute) {
+			layouts.push({
+				path: layoutPath,
+				endPoint: lazyRoute(layoutRoute.$handler, clientManifest, serverManifest),
+				serverEndPoint: findServer(layoutPath, fileRoutes),
+			});
+		}
+	}
+	return layouts.length ? layouts : undefined;
+}
+
+function findServer(path: string, fileRoutes: RouteModule[]): Promise<any> | undefined {
+	const serverPath = path.replace(/\/$/, "") + "/~server";
+	const serverRoute = fileRoutes.find((r) => r.path === serverPath);
+	return serverRoute && lazyRoute(serverRoute.$handler, clientManifest, serverManifest);
+}
+
+function findServerHook(path: string, fileRoutes: RouteModule[]): Promise<any> | undefined {
+	// TODO: Should this be a collection, like layouts?
+	let hookPath = "/_hook.server";
+	if (path.startsWith("/api/")) {
+		hookPath = "/api" + hookPath;
+	}
+	const hookRoute = fileRoutes.find((r) => r.path === hookPath);
+	return hookRoute && lazyRoute(hookRoute.$handler, clientManifest, serverManifest);
+}
+
+export default routeHandlers;