@timber-js/app 0.2.0-alpha.122 → 0.2.0-alpha.123

package/dist/client/internal.js

@@ -1,10 +1,10 @@
 import { t as bindUseQueryStates } from "../_chunks/use-query-states-C9G6LP0F.js";
-import { c as cachedSearchParams, i as _setCachedSearch, n as getSsrData, r as setSsrData, s as cachedSearch, t as clearSsrData } from "../_chunks/ssr-data-m9-cNEIw.js";
-import { n as getRouterOrNull, r as setGlobalRouter, t as getRouter } from "../_chunks/router-ref-CpvjBqdu.js";
+import { c as cachedSearchParams, i as _setCachedSearch, n as getSsrData, r as setSsrData, s as cachedSearch, t as clearSsrData } from "../_chunks/ssr-data-DVX8S7vj.js";
+import { a as setNavigationState, i as getNavigationState, r as NavigationProvider, t as setCurrentParams } from "../_chunks/use-segment-params-Du7u25cK.js";
+import { n as getRouterOrNull, r as setGlobalRouter, t as getRouter } from "../_chunks/router-ref-B2-2kIIC.js";
 import { TimberErrorBoundary } from "./error-boundary.js";
-import { n as useSegmentContext, t as SegmentProvider } from "../_chunks/segment-context-EsfQpS--.js";
-import { t as setHardNavigating } from "../_chunks/navigation-root-DoRTeBm5.js";
-import { a as getNavigationState, i as NavigationProvider, o as setNavigationState, t as setCurrentParams } from "../_chunks/use-segment-params-CtIAjqK0.js";
+import { n as useSegmentContext, t as SegmentProvider } from "../_chunks/segment-context-Bg0pFbLT.js";
+import { t as setHardNavigating } from "../_chunks/navigation-root-Ds_hDtRW.js";
 import { cloneElement, isValidElement, useSyncExternalStore } from "react";
 //#region src/client/segment-cache.ts
 /**
@@ -558,8 +558,12 @@ async function fetchRscPayload(url, deps, stateTree, currentUrl, signal) {
 			return response;
 		});
 		await wrappedPromise;
+		const payload = deps.decodeRsc(wrappedPromise);
+		const decodePromise = Promise.resolve(payload).then(() => void 0);
+		decodePromise.catch(() => {});
 		return {
-			payload: await deps.decodeRsc(wrappedPromise),
+			payload,
+			decodePromise,
 			headElements,
 			segmentInfo,
 			params,
@@ -577,6 +581,7 @@ async function fetchRscPayload(url, deps, stateTree, currentUrl, signal) {
 	}
 	return {
 		payload: await response.text(),
+		decodePromise: null,
 		headElements: extractHeadElements(response),
 		segmentInfo: extractSegmentInfo(response),
 		params: extractParams(response),
@@ -600,6 +605,7 @@ function createRouter(deps) {
 	const historyStack = new HistoryStack();
 	const segmentElementCache = new SegmentElementCache();
 	let routerPhase = { phase: "idle" };
+	let navigationId = 0;
 	const pendingListeners = /* @__PURE__ */ new Set();
 	let currentNavAbort = null;
 	/**
@@ -636,14 +642,29 @@ function createRouter(deps) {
 	}
 	/**
 	* Merge a partial RSC payload with cached segment elements if segments
-	* were skipped, then cache segments from the (merged) payload.
-	* Returns the merged payload ready for rendering.
+	* were skipped. Returns the merged payload ready for rendering.
+	*
+	* Segment element caching is deferred to after paint by the caller
+	* so it doesn't block the render path.
+	*/
+	async function mergePayload(payload, skippedSegments) {
+		if (skippedSegments && skippedSegments.length > 0) return mergeSegmentTree(payload != null && typeof payload === "object" && "then" in payload ? await payload : payload, skippedSegments, segmentElementCache);
+		return payload;
+	}
+	/**
+	* Schedule segment element caching after paint. Resolves thenable
+	* payloads first since tree walking requires resolved React elements.
+	* Guards against stale writes: if a newer navigation started before
+	* this callback fires, the cache write is skipped.
 	*/
-	function mergeAndCachePayload(payload, skippedSegments) {
-		let merged = payload;
-		if (skippedSegments && skippedSegments.length > 0) merged = mergeSegmentTree(payload, skippedSegments, segmentElementCache);
-		cacheSegmentElements(merged, segmentElementCache);
-		return merged;
+	function deferSegmentCaching(payload) {
+		const capturedNavId = navigationId;
+		afterPaint(async () => {
+			if (capturedNavId !== navigationId) return;
+			const resolved = payload != null && typeof payload === "object" && "then" in payload ? await payload : payload;
+			if (capturedNavId !== navigationId) return;
+			cacheSegmentElements(resolved, segmentElementCache);
+		});
 	}
 	/**
 	* Update navigation state (params + pathname) for the next render.
@@ -663,37 +684,41 @@ function createRouter(deps) {
 		setNavigationState(navState);
 		return navState;
 	}
-	/**
-	* Render a payload via navigateTransition (production) or renderRoot (tests).
-	* The perform callback should fetch data, update state, and return the
-	* FetchResult plus the NavigationState (so it can be passed explicitly
-	* to wrapPayload/renderRoot without temporal coupling).
-	*/
 	async function renderViaTransition(url, perform) {
 		if (deps.navigateTransition) {
 			let headElements = null;
+			let decodePromise = null;
 			await deps.navigateTransition(url, async (wrapPayload) => {
 				const result = await perform();
 				headElements = result.headElements;
-				const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
+				decodePromise = result.decodePromise;
+				const merged = await mergePayload(result.payload, result.skippedSegments);
 				historyStack.push(url, {
 					payload: merged,
 					headElements: result.headElements,
 					params: result.params
 				});
+				deferSegmentCaching(merged);
 				return wrapPayload(merged, result.navState);
 			});
-			return headElements;
+			return {
+				headElements,
+				decodePromise
+			};
 		}
 		const result = await perform();
-		const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
+		const merged = await mergePayload(result.payload, result.skippedSegments);
 		historyStack.push(url, {
 			payload: merged,
 			headElements: result.headElements,
 			params: result.params
 		});
+		deferSegmentCaching(merged);
 		renderPayload(merged, result.navState);
-		return result.headElements;
+		return {
+			headElements: result.headElements,
+			decodePromise: result.decodePromise
+		};
 	}
 	/** Apply head elements (title, meta tags) to the DOM if available. */
 	function applyHead(elements) {
@@ -722,6 +747,7 @@ function createRouter(deps) {
 		const prefetched = prefetchCache.consume(url);
 		let result = prefetched ? {
 			payload: prefetched.payload,
+			decodePromise: null,
 			headElements: prefetched.headElements,
 			segmentInfo: prefetched.segmentInfo ?? null,
 			params: prefetched.params ?? null,
@@ -756,6 +782,7 @@ function createRouter(deps) {
 		const replace = options.replace === true;
 		const externalSignal = options._signal;
 		const skipHistory = options._skipHistory === true;
+		navigationId++;
 		const navAbort = createNavAbort(externalSignal);
 		const currentScrollY = deps.getScrollY();
 		if (deps.saveNavigationEntryScroll) deps.saveNavigationEntryScroll(currentScrollY);
@@ -772,11 +799,13 @@ function createRouter(deps) {
 		}
 		setPending(true, url);
 		try {
-			applyHead(await renderViaTransition(url, () => performNavigationFetch(url, {
+			const { headElements, decodePromise } = await renderViaTransition(url, () => performNavigationFetch(url, {
 				replace,
 				signal: navAbort.signal,
 				skipHistory: effectiveSkipHistory
-			})));
+			}));
+			if (decodePromise) await decodePromise;
+			applyHead(headElements);
 			window.dispatchEvent(new Event("timber:navigation-end"));
 			restoreScrollAfterPaint(scroll ? 0 : currentScrollY);
 		} catch (error) {
@@ -807,10 +836,11 @@ function createRouter(deps) {
 	}
 	async function refresh() {
 		const currentUrl = deps.getCurrentUrl();
+		navigationId++;
 		const navAbort = createNavAbort();
 		setPending(true, currentUrl);
 		try {
-			applyHead(await renderViaTransition(currentUrl, async () => {
+			const { headElements, decodePromise } = await renderViaTransition(currentUrl, async () => {
 				const result = await fetchRscPayload(currentUrl, deps, void 0, void 0, navAbort.signal);
 				updateSegmentCache(result.segmentInfo);
 				const navState = updateNavigationState(result.params, currentUrl);
@@ -818,7 +848,9 @@ function createRouter(deps) {
 					...result,
 					navState
 				};
-			}));
+			});
+			if (decodePromise) await decodePromise;
+			applyHead(headElements);
 		} catch (error) {
 			if (isAbortError(error)) return;
 			throw error;
@@ -829,6 +861,7 @@ function createRouter(deps) {
 		}
 	}
 	async function handlePopState(url, scrollY = 0, externalSignal) {
+		navigationId++;
 		const entry = historyStack.get(url);
 		if (entry && entry.payload !== null) {
 			const navState = updateNavigationState(entry.params, url);
@@ -839,7 +872,7 @@ function createRouter(deps) {
 			const navAbort = createNavAbort(externalSignal);
 			setPending(true, url);
 			try {
-				applyHead(await renderViaTransition(url, async () => {
+				const { headElements, decodePromise } = await renderViaTransition(url, async () => {
 					const result = await fetchRscPayload(url, deps, segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths()), void 0, navAbort.signal);
 					updateSegmentCache(result.segmentInfo);
 					const navState = updateNavigationState(result.params, url);
@@ -847,7 +880,9 @@ function createRouter(deps) {
 						...result,
 						navState
 					};
-				}));
+				});
+				if (decodePromise) await decodePromise;
+				applyHead(headElements);
 				restoreScrollAfterPaint(scrollY);
 			} catch (error) {
 				if (isAbortError(error)) return;
@@ -882,12 +917,12 @@ function createRouter(deps) {
 		prefetch,
 		applyRevalidation(element, headElements) {
 			const currentUrl = deps.getCurrentUrl();
-			const merged = mergeAndCachePayload(element, null);
 			historyStack.push(currentUrl, {
-				payload: merged,
+				payload: element,
 				headElements
 			});
-			renderPayload(merged, getNavigationState());
+			deferSegmentCaching(element);
+			renderPayload(element, getNavigationState());
 			applyHead(headElements);
 		},
 		initSegmentCache: (segments) => updateSegmentCache(segments),