@torpor/build 0.0.6 → 0.1.0

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