@torpor/build 0.1.31 → 0.1.32

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @torpor/build
 
+## 0.1.32
+
+### Patch Changes
+
+- 951a86f: Feat: re-use layout data and UI
+- 182d436: Feat: prefetching link data
+- Updated dependencies [1866f30]
+- Updated dependencies [a31647f]
+- Updated dependencies [951a86f]
+- Updated dependencies [6d6fb89]
+- Updated dependencies [9c13f0f]
+  - @torpor/view@0.1.6
+
 ## 0.1.31
 
 ### Patch Changes

package/dist/index.d.cts

@@ -76,7 +76,7 @@ type PageEndPoint = {
     /**
      * Loads data for the page.
      */
-    load?: (event: PageLoadEvent) => any;
+    load?: (event: PageLoadEvent) => Response | Promise<Response | undefined> | Promise<void> | void;
     /**
      * The component that is displayed for the page.
      */

package/dist/index.d.ts

@@ -76,7 +76,7 @@ type PageEndPoint = {
     /**
      * Loads data for the page.
      */
-    load?: (event: PageLoadEvent) => any;
+    load?: (event: PageLoadEvent) => Response | Promise<Response | undefined> | Promise<void> | void;
     /**
      * The component that is displayed for the page.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/build",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "A framework for building sites and apps with Torpor",
   "type": "module",
   "main": "dist/index.cjs",
@@ -53,17 +53,17 @@
   "dependencies": {
     "cookie": "^1.0.2",
     "dotenv": "^16.5.0",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "@torpor/unplugin": "^0.1.16",
-    "@torpor/view": "^0.1.5"
+    "@torpor/view": "^0.1.6",
+    "@torpor/unplugin": "^0.1.16"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "tsup": "^8.5.0",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup",

package/src/site/clientEntry.ts

@@ -1,16 +1,33 @@
 import manifest from "@torpor/build/manifest";
 // @ts-ignore This errors in the Cloudflare build?
 import { $page } from "@torpor/build/state";
-import { hydrate, mount } from "@torpor/view";
+import { clearLayoutSlot, hydrate, runLayoutSlot } from "@torpor/view";
 import { type Component, type SlotRender } from "@torpor/view";
+import { mount } from "@torpor/view";
 import type PageEndPoint from "../types/PageEndPoint.ts";
 import type PageServerEndPoint from "../types/PageServerEndPoint.ts";
+import type RouteHandler from "../types/RouteHandler.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);
 
+// Store the current layout stack, so that we can re-use parts of it as necessary
+interface LayoutPath {
+	path: string;
+	/** Whether to re-use this layout */
+	reuse: boolean;
+	/** Data loaded from endpoints that should be re-used */
+	data: any;
+	/** The range of the UI in this layout's slot */
+	slotRange: any;
+}
+let layoutStack: LayoutPath[] = [];
+
+// TODO: Probably expire after 30 seconds or something?
+let prefetchedData: Record<string, any> = {};
+
 // Intercept clicks on links
 window.addEventListener("click", async (e) => {
 	if (e.target && (e.target as HTMLElement).tagName === "A") {
@@ -26,6 +43,39 @@ window.addEventListener("click", async (e) => {
 	}
 });
 
+// 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("focus", maybePrefetch);
+window.addEventListener("touchstart", maybePrefetch);
+
+async function maybePrefetch(e: Event) {
+	if (e.target && (e.target as HTMLElement).tagName === "A") {
+		const href = (e.target as HTMLLinkElement).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, newStack, clientEndPoint, serverEndPoint, true);
+		}
+	}
+}
+
 // Listen for changes to the URL that occur when the user navigates using the
 // back or forward buttons
 window.addEventListener("popstate", async () => {
@@ -40,7 +90,7 @@ async function navigateToLocation(location: Location, firstTime = false) {
 }
 
 async function navigate(url: URL, firstTime = false): Promise<boolean> {
-	const parent = document.getElementById("app");
+	let parent = document.getElementById("app");
 	if (!parent) {
 		// TODO: 500
 		console.log("500");
@@ -85,78 +135,83 @@ async function navigate(url: URL, firstTime = false): Promise<boolean> {
 	const serverEndPoint: PageServerEndPoint | undefined =
 		handler.serverEndPoint && (await handler.serverEndPoint())?.default;
 
+	let newLayoutStack: LayoutPath[] = [];
+
 	// 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 =
-				layout.serverEndPoint && (await layout.serverEndPoint())?.default;
-			const layoutResponse = await loadClientAndServerData(
-				data,
-				document.location.origin + layoutPath,
-				params,
-				layoutEndPoint,
-				layoutServerEndPoint,
-			);
-			if (layoutResponse?.ok === false) {
-				return false;
-			}
-		}
-	}
-	let endPointResponse = await loadClientAndServerData(
-		data,
-		document.location.origin + path,
+	const data = await loadData(
+		handler,
 		params,
+		path,
+		newLayoutStack,
 		clientEndPoint,
 		serverEndPoint,
 	);
-	if (endPointResponse?.ok === false) {
-		return false;
-	}
-	let $props: Record<string, any> = { data };
+	const $props: Record<string, any> = { data };
+
+	layoutStack.push({ path: route.handler.path, data: {}, reuse: false, slotRange: null });
+	layoutStack = newLayoutStack;
 
 	// 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);
+		// The last slot function will render the client component
+		slotFunctions[handler.layouts.length] = function clientComponent(parent, anchor, _, $context) {
+			if (clientEndPoint.component) {
+				let i = layoutStack.length - 1;
+				layoutStack[i].slotRange = runLayoutSlot(
+					clientEndPoint.component,
+					slotFunctions[i + 1],
+					parent,
+					anchor,
+					$props,
+					$context,
+				);
+			}
+		};
+
+		// Each earlier slot function will render a layout
 		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) {
+				if (layoutStack[i].reuse) {
+					// Set the parent to add the new content to (from the old
+					// content), clear the range under this point, and set the
+					// component to the slot function within this layout
+					parent = layoutStack[i].slotRange.startNode.parentNode as HTMLElement;
+					clearLayoutSlot(layoutStack[i].slotRange);
+					component = slotFunctions[i + 1];
+					break;
+				} else 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],
-						});
+					slotFunctions[i] = function layoutComponent(parent, anchor, _, $context) {
+						if (layoutEndPoint.component) {
+							layoutStack[i].slotRange = runLayoutSlot(
+								layoutEndPoint.component,
+								slotFunctions[i + 1],
+								parent,
+								anchor,
+								$props,
+								$context,
+							);
+						}
+					};
 				}
 			}
 		}
 	}
 
 	if (firstTime) {
-		console.log("hydrating");
 		hydrate(parent, component, $props, slots);
 	} else {
-		// TODO: Clear ranges, reuse layouts etc
-		parent.textContent = "";
-
 		try {
-			console.log("mounting");
 			mount(parent, component, $props, slots);
 		} catch (error) {
 			// TODO: Show a proper Error component
@@ -165,9 +220,68 @@ async function navigate(url: URL, firstTime = false): Promise<boolean> {
 		}
 	}
 
+	// Reset prefetched data on each navigation
+	prefetchedData = {};
+
 	return true;
 }
 
+async function loadData(
+	handler: RouteHandler,
+	params: Record<string, string>,
+	path: string,
+	newLayoutStack: LayoutPath[],
+	clientEndPoint: PageEndPoint | undefined,
+	serverEndPoint: PageServerEndPoint | undefined,
+	prefetch = false,
+) {
+	let data = {};
+	if (handler.layouts) {
+		for (let [i, layout] of handler.layouts.entries()) {
+			let layoutPath = layout.path;
+			if (layoutStack.at(i)?.path === layoutPath) {
+				// We've already loaded this layout, we can just re-use its data and UI
+				if (!prefetch) {
+					layoutStack[i].reuse = true;
+				}
+				newLayoutStack[i] = layoutStack[i];
+				Object.assign(data, layoutStack[i].data);
+			} else {
+				const stackLayout = { path: layoutPath, data: {}, reuse: false, slotRange: null };
+				for (let key in params) {
+					layoutPath = layoutPath.replace(`[${key}]`, params[key]);
+				}
+				const layoutEndPoint: PageEndPoint | undefined = (await layout.endPoint())?.default;
+				const layoutServerEndPoint: PageServerEndPoint | undefined =
+					layout.serverEndPoint && (await layout.serverEndPoint())?.default;
+				const layoutResponse = await loadClientAndServerData(
+					stackLayout.data,
+					document.location.origin + layoutPath,
+					params,
+					layoutEndPoint,
+					layoutServerEndPoint,
+				);
+				if (layoutResponse?.ok === false) {
+					return false;
+				}
+				Object.assign(data, stackLayout.data);
+				newLayoutStack.push(stackLayout);
+			}
+		}
+	}
+	let endPointResponse = await loadClientAndServerData(
+		data,
+		document.location.origin + path,
+		params,
+		clientEndPoint,
+		serverEndPoint,
+	);
+	if (endPointResponse?.ok === false) {
+		return false;
+	}
+	return data;
+}
+
 async function loadClientAndServerData(
 	data: Record<string, any>,
 	location: string,
@@ -176,29 +290,46 @@ async function loadClientAndServerData(
 	serverEndPoint?: PageServerEndPoint,
 ): Promise<Response | void> {
 	if (clientEndPoint?.load) {
-		const clientUrl = new URL(document.location.href);
-		const clientParams = buildClientParams(clientUrl, params, data);
-		const clientResponse = await clientEndPoint.load(clientParams);
-		if (clientResponse) {
-			if (clientResponse.ok) {
-				if (clientResponse.headers.get("Content-Type")?.includes("application/json")) {
-					Object.assign(data, await clientResponse.json());
+		if (prefetchedData[location]) {
+			//console.log("CLIENT DATA ALREADY LOADED", location);
+			Object.assign(data, prefetchedData[location]);
+		} else {
+			//console.log("CLIENT DATA LOADING", location);
+			const clientUrl = new URL(document.location.href);
+			const clientParams = buildClientParams(clientUrl, params, data);
+			const clientResponse = await clientEndPoint.load(clientParams);
+			if (clientResponse) {
+				if (clientResponse.ok) {
+					if (clientResponse.headers.get("Content-Type")?.includes("application/json")) {
+						const clientData = await clientResponse.json();
+						Object.assign(data, clientData);
+						prefetchedData[location] = clientData;
+					}
+				} else {
+					return clientResponse;
 				}
-			} else {
-				return clientResponse;
 			}
 		}
 	}
 	if (serverEndPoint?.load) {
 		const serverUrl = location.replace(/\/$/, "") + "/~server";
-		const serverResponse = await fetch(serverUrl);
-		if (serverResponse) {
-			if (serverResponse.ok) {
-				if (serverResponse.headers.get("Content-Type")?.includes("application/json")) {
-					Object.assign(data, await serverResponse.json());
+
+		if (prefetchedData[serverUrl]) {
+			//console.log("SERVER DATA ALREADY LOADED", serverUrl);
+			Object.assign(data, prefetchedData[serverUrl]);
+		} else {
+			//console.log("SERVER DATA LOADING", serverUrl);
+			const serverResponse = await fetch(serverUrl);
+			if (serverResponse) {
+				if (serverResponse.ok) {
+					if (serverResponse.headers.get("Content-Type")?.includes("application/json")) {
+						const serverData = await serverResponse.json();
+						Object.assign(data, serverData);
+						prefetchedData[serverUrl] = serverData;
+					}
+				} else {
+					return serverResponse;
 				}
-			} else {
-				return serverResponse;
 			}
 		}
 	}

package/src/site/serverEntry.ts

@@ -220,8 +220,8 @@ async function loadView(
 	let slots: Record<string, ServerSlotRender> | undefined = undefined;
 	if (handler.layouts) {
 		let slotFunctions: ServerSlotRender[] = [];
-		slotFunctions[handler.layouts.length] = (_, context) =>
-			(clientEndPoint.component as ServerComponent)($props, context);
+		slotFunctions[handler.layouts.length] = (_, $context) =>
+			(clientEndPoint.component as ServerComponent)($props, $context);
 		for (let i = handler.layouts.length - 1; i >= 0; i--) {
 			const layoutEndPoint: PageEndPoint | undefined = (await handler.layouts[i].endPoint())
 				?.default;
@@ -230,8 +230,8 @@ async function loadView(
 					component = layoutEndPoint.component as ServerComponent;
 					slots = { _: slotFunctions[i + 1] };
 				} else {
-					slotFunctions[i] = (_, context) =>
-						(layoutEndPoint.component as ServerComponent)($props, context, {
+					slotFunctions[i] = (_, $context) =>
+						(layoutEndPoint.component as ServerComponent)($props, $context, {
 							_: slotFunctions[i + 1],
 						});
 				}
@@ -300,7 +300,7 @@ async function loadClientAndServerData(
 	serverEndPoint?: PageServerEndPoint,
 ) {
 	if (clientEndPoint?.load) {
-		const clientParams = buildClientParams(url, data, params);
+		const clientParams = buildClientParams(url, params, data);
 		const clientResponse = await clientEndPoint.load(clientParams);
 		if (clientResponse) {
 			if (clientResponse.ok) {

package/src/types/PageEndPoint.ts

@@ -13,7 +13,7 @@ type PageEndPoint = {
 	/**
 	 * Loads data for the page.
 	 */
-	load?: (event: PageLoadEvent) => any;
+	load?: (event: PageLoadEvent) => Response | Promise<Response | undefined> | Promise<void> | void;
 	/**
 	 * The component that is displayed for the page.
 	 */