@torpor/build 0.0.5 → 0.1.0

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);

package/src/site/manifest.ts

@@ -0,0 +1,49 @@
+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;
+				}
+			},
+		},
+		load(id) {
+			if (id === moduleId) {
+				return `
+${!server ? "const load = { default: { load: true } };" : ""}
+export default {
+  routes: [
+    ${site.routes
+			.map((r) => {
+				if (server || !/server\.(ts|js)$/.test(r.file)) {
+					return `{ path: "${r.path}", file: "${r.file}", type: ${r.type}, endPoint: ${server || !/server\.(ts|js)$/.test(r.file) ? `() => import(/* @vite-ignore */ "${path.join(site.root, r.file)}")` : "undefined"} }`;
+				} 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:");
+					return `{ path: "${r.path}", file: "${r.file}", type: ${r.type}, endPoint: ${haveLoad ? "() => load" : "undefined"} }`;
+				}
+			})
+			.join(",\n    ")}
+  ],
+};
+`;
+			}
+		},
+	};
+}

package/src/site/pathToRegex.ts

@@ -0,0 +1,10 @@
+export default function pathToRegex(path: string): RegExp {
+	const pattern = path
+		.split("/")
+		.map((p) => {
+			return p.replace(/\[([^\/]+?)\]/, "(?<$1>[^\\/]+?)");
+		})
+		.join("\\/")
+		.replaceAll("*", ".*");
+	return new RegExp(`^${pattern}$`);
+}

package/src/site/prepareTemplate.ts

@@ -0,0 +1,20 @@
+export default function prepareTemplate(template: string, clientScript: string) {
+	let contentStart = regexIndexOf(template, /\<div\s+id=("app"|'app'|app)\s+/);
+	contentStart = template.indexOf(">", contentStart) + 1;
+	let contentEnd = template.indexOf("</div>", contentStart);
+	if (contentStart === -1 || contentEnd === -1) {
+		throw new Error(`Couldn't find <div id="app"></div>`);
+	}
+	return (
+		template.substring(0, contentStart) +
+		"%COMPONENT_HTML%" +
+		template.substring(contentEnd) +
+		`<script type="module" src="${clientScript}"></script>`
+	);
+}
+
+// From https://stackoverflow.com/a/274094
+function regexIndexOf(string: string, regex: RegExp, position?: number) {
+	var indexOf = string.substring(position || 0).search(regex);
+	return indexOf >= 0 ? indexOf + (position || 0) : indexOf;
+}

package/src/site/runBuild.ts

@@ -0,0 +1,92 @@
+import torpor from "@torpor/unplugin/vite";
+import { existsSync, promises as fs } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { build, defineConfig } from "vite";
+import Site from "./Site.ts";
+import manifest from "./manifest.ts";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// TODO: Don't cache index.html in dev?
+// TODO: Multiple hook.server locations
+// TODO: Don't reload layouts during client routing
+// TODO: Call the correct +page and +server routes when in the same folder
+
+export default async function runBuild(site: Site) {
+	// Delete the dist folder if it exists
+	const distFolder = path.resolve(site.root, "dist");
+	if (existsSync(distFolder)) {
+		await fs.rm(distFolder, { recursive: true });
+	}
+	const clientFolder = path.join(distFolder, "client");
+	const serverFolder = path.join(distFolder, "server");
+
+	// HOOK: Prebuild
+	if (site.adapter.prebuild) {
+		await site.adapter.prebuild(site);
+	}
+
+	// TODO: From a setting
+	let siteHtml = path.resolve(site.root, "src/site.html");
+
+	let clientScript = path.resolve(__dirname, "../../src/site/clientEntry.ts");
+	let serverScript = path.resolve(__dirname, "../../src/site/serverEntry.ts");
+
+	// Build the client assets, including site.html and the route files
+	// EXCLUDING anything with `server.js` in the name
+	await build(
+		defineConfig({
+			plugins: [
+				manifest(site),
+				// @ts-ignore
+				torpor(),
+				...site.plugins,
+			],
+			build: {
+				outDir: clientFolder,
+				rollupOptions: {
+					input: [
+						siteHtml,
+						clientScript,
+						...site.routes
+							.filter((r) => !/server\.(ts|js)$/.test(r.file))
+							.map((r) => path.resolve(site.root, r.file)),
+					],
+				},
+				ssrManifest: true,
+			},
+		}),
+	);
+
+	// Build the server assets, including the server entry script and the route
+	// files
+	await build(
+		defineConfig({
+			plugins: [
+				manifest(site, true),
+				// @ts-ignore
+				torpor(),
+				...site.plugins,
+			],
+			build: {
+				outDir: serverFolder,
+				rollupOptions: {
+					input: [serverScript, ...site.routes.map((r) => path.resolve(site.root, r.file))],
+				},
+				ssr: serverScript,
+			},
+		}),
+	);
+
+	// Move the site.html file into /client
+	// HACK: Should do this in Rollup if possible?
+	siteHtml = path.join(clientFolder, "site.html");
+	await fs.rename(path.join(clientFolder, "src", "site.html"), siteHtml);
+	await fs.rm(path.join(clientFolder, "src"), { recursive: true });
+
+	// HOOK: Postbuild
+	if (site.adapter.postbuild) {
+		await site.adapter.postbuild(site);
+	}
+}

package/src/site/runDev.ts

@@ -0,0 +1,84 @@
+import torpor from "@torpor/unplugin/vite";
+import { configDotenv } from "dotenv";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer as createViteServer } from "vite";
+import createMiddlewareHandler from "../adapters/node/createMiddlewareHandler.ts";
+import { serverError } from "../response.ts";
+import Server from "../server/Server.ts";
+import Site from "./Site.ts";
+import manifest from "./manifest.ts";
+import prepareTemplate from "./prepareTemplate.ts";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default async function runDev(site: Site) {
+	const server = new Server();
+
+	// Create the Vite server in middleware mode and configure the app type as
+	// "custom", disabling Vite's own HTML serving logic so the parent server
+	// can take control
+	const vite = await createViteServer({
+		server: { middlewareMode: true },
+		appType: "custom",
+		plugins: [
+			manifest(site, true),
+			// @ts-ignore not sure...
+			torpor(),
+			...site.plugins,
+		],
+	});
+
+	// Read site.html
+	// It's called site.html because @torpor/build builds the site (html, routes
+	// etc) while the user builds the app (components etc)
+	const templateFile = path.resolve(site.root, "src/site.html");
+	let template = await fs.readFile(templateFile, "utf-8");
+
+	// Apply Vite HTML transforms. This injects the Vite HMR client, and also
+	// applies HTML transforms from Vite plugins. Note that we only support a
+	// universal transform, not individual transforms for each route
+	template = await vite.transformIndexHtml("", template);
+
+	// TODO: Is this going to be the correct path after installing from npm?
+	const clientScript = path.resolve(__dirname, "../../src/site/clientEntry.ts");
+	const serverScript = path.resolve(__dirname, "../../src/site/serverEntry.ts");
+
+	// Prepare site.html so that we can just splice components into it
+	template = prepareTemplate(template, clientScript);
+
+	// Use vite's Connect instance as middleware. We need to wrap it with
+	// createMiddlewareHandler that converts Connect middleware to
+	// Request/Response web handlers
+	server.use(createMiddlewareHandler(vite.middlewares));
+
+	// Every request (GET, POST, etc) goes through loadEndPoint
+	server.add("*", async (ev) => {
+		try {
+			// Load the server entry. ssrLoadModule automatically transforms ESM
+			// source code to be usable in Node.js. No bundling is required, and
+			// it provides efficient invalidation similar to HMR
+			const { load } = await vite.ssrLoadModule(serverScript);
+
+			// Render the app HTML (or fetch server data etc) via serverEntry's
+			// exported `load` function
+			return await load(ev, template);
+		} catch (e: any) {
+			// If an error is caught, let Vite fix the stack trace so it maps
+			// back to your actual source code
+			vite.ssrFixStacktrace(e);
+			return serverError(e);
+		}
+	});
+
+	// Load environment variables from a `.env` file, with defaults if not set
+	configDotenv();
+
+	process.env.PROTOCOL ??= "http:";
+	process.env.HOST ??= "localhost";
+	process.env.PORT ??= "7059";
+
+	// Serve the site
+	site.adapter.serve(server, site);
+}

package/src/site/runPreview.ts

@@ -0,0 +1,83 @@
+import { configDotenv } from "dotenv";
+import { existsSync, promises as fs } from "node:fs";
+import path from "node:path";
+import { serverError } from "../response.ts";
+import Server from "../server/Server.ts";
+import contentType from "../server/contentType.ts";
+import Site from "./Site";
+import prepareTemplate from "./prepareTemplate.ts";
+import runBuild from "./runBuild";
+
+export default async function runPreview(site: Site) {
+	// Build the site
+	await runBuild(site);
+
+	const distFolder = path.resolve(site.root, "dist");
+	const clientFolder = path.join(distFolder, "client");
+	const serverFolder = path.join(distFolder, "server");
+
+	// Find the client script file in /assets
+	let clientScript = (await fs.readdir(path.join(clientFolder, "assets"))).find((f) =>
+		f.startsWith("clientEntry-"),
+	);
+	if (!clientScript) {
+		throw new Error("clientEntry.js not found");
+	}
+	clientScript = `/assets/${clientScript}`;
+
+	// Read site.html
+	// It's called site.html because @torpor/build builds the site (html, routes
+	// etc) while the user builds the app (components etc)
+	let siteHtml = path.join(clientFolder, "site.html");
+	let template = await fs.readFile(siteHtml, "utf-8");
+
+	// Prepare site.html so that we can just splice components into it
+	template = prepareTemplate(template, clientScript);
+
+	// Configure the server
+	const server = new Server();
+
+	// Serve dist/client/assets statically
+	server.add("/assets/*", async (ev) => {
+		try {
+			const url = new URL(ev.request.url);
+			const file = path.join(site.root, "dist", "client", url.pathname);
+			if (existsSync(file)) {
+				// TODO: Stream the data?
+				return new Response(await fs.readFile(file), {
+					status: 200,
+					headers: {
+						"Content-Type": contentType(path.extname(file)),
+					},
+				});
+			}
+		} catch (e: any) {
+			return serverError(e);
+		}
+	});
+
+	// Every request (GET, POST, etc) goes through loadEndPoint
+	const serverScript = path.resolve(serverFolder, "serverEntry.js");
+	server.add("*", async (ev) => {
+		try {
+			// Load the server entry
+			const { load } = await import(serverScript);
+
+			// Render the app HTML (or fetch server data etc) via serverEntry's
+			// exported `load` function
+			return await load(ev, template);
+		} catch (e: any) {
+			return serverError(e);
+		}
+	});
+
+	// Load environment variables from a `.env` file, with defaults if not set
+	configDotenv();
+
+	process.env.PROTOCOL ??= "http:";
+	process.env.HOST ??= "localhost";
+	process.env.PORT ??= "7059";
+
+	// Serve the site
+	site.adapter.serve(server, site);
+}