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

package/dist/client/internal.js

@@ -1,11 +1,11 @@
 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, o as useNavigationContext, r as NavigationProvider, t as setCurrentParams } from "../_chunks/use-segment-params-ByGqwUuO.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 { cloneElement, isValidElement, useSyncExternalStore } from "react";
+import { n as useSegmentContext, t as SegmentProvider } from "../_chunks/segment-context-Bg0pFbLT.js";
+import { t as setHardNavigating } from "../_chunks/navigation-root-DaERBEGV.js";
+import { cloneElement, isValidElement } from "react";
 //#region src/client/segment-cache.ts
 /**
 * Maintains the client-side segment tree representing currently mounted
@@ -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.
@@ -656,44 +677,50 @@ function createRouter(deps) {
 	function updateNavigationState(params, url) {
 		const resolvedParams = params ?? {};
 		setCurrentParams(resolvedParams);
+		const parsed = new URL(url, "http://localhost");
 		const navState = {
 			params: resolvedParams,
-			pathname: url.startsWith("http") ? new URL(url).pathname : url.split("?")[0] || "/"
+			pathname: parsed.pathname || "/",
+			search: parsed.search
 		};
 		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 +749,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 +784,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 +801,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 +838,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 +850,9 @@ function createRouter(deps) {
 					...result,
 					navState
 				};
-			}));
+			});
+			if (decodePromise) await decodePromise;
+			applyHead(headElements);
 		} catch (error) {
 			if (isAbortError(error)) return;
 			throw error;
@@ -829,6 +863,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 +874,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 +882,9 @@ function createRouter(deps) {
 						...result,
 						navState
 					};
-				}));
+				});
+				if (decodePromise) await decodePromise;
+				applyHead(headElements);
 				restoreScrollAfterPaint(scrollY);
 			} catch (error) {
 				if (isAbortError(error)) return;
@@ -882,12 +919,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),
@@ -905,9 +942,12 @@ function createRouter(deps) {
 * Returns a read-only URLSearchParams instance reflecting the current
 * URL's query string. Updates when client-side navigation changes the URL.
 *
-* This is a thin wrapper over window.location.search, provided for
-* Next.js API compatibility (libraries like nuqs import useSearchParams
-* from next/navigation).
+* On the client, reads from NavigationContext which is updated atomically
+* with the RSC tree render. This replaces the previous useSyncExternalStore
+* approach which read window.location.search directly — causing React to
+* detect external store tearing during transitions and fall back to
+* synchronous rendering (renderRootSync instead of renderRootConcurrent),
+* blocking the main thread and freezing animations.
 *
 * Unlike Next.js's ReadonlyURLSearchParams, this returns a standard
 * URLSearchParams. Mutation methods (set, delete, append) work on the
@@ -916,28 +956,9 @@ function createRouter(deps) {
 * During SSR, reads the request search params from the SSR ALS context
 * (populated by ssr-entry.ts) instead of window.location.
 *
-* All mutable state is delegated to client/state.ts for singleton guarantees.
-* See design/18-build-system.md §"Singleton State Registry"
+* Compatible with Next.js's `useSearchParams()` from `next/navigation`.
 */
-function getSearch() {
-	if (typeof window !== "undefined") return window.location.search;
-	const data = getSsrData();
-	if (!data) return "";
-	const str = new URLSearchParams(data.searchParams).toString();
-	return str ? `?${str}` : "";
-}
-function getServerSearch() {
-	const data = getSsrData();
-	if (!data) return "";
-	const str = new URLSearchParams(data.searchParams).toString();
-	return str ? `?${str}` : "";
-}
-function subscribe(callback) {
-	window.addEventListener("popstate", callback);
-	return () => window.removeEventListener("popstate", callback);
-}
-function getSearchParams() {
-	const search = getSearch();
+function getSearchParams(search) {
 	if (search !== cachedSearch) {
 		const params = new URLSearchParams(search);
 		_setCachedSearch(search, params);
@@ -945,18 +966,20 @@ function getSearchParams() {
 	}
 	return cachedSearchParams;
 }
-function getServerSearchParams() {
-	const data = getSsrData();
-	return data ? new URLSearchParams(data.searchParams) : new URLSearchParams();
-}
 /**
 * Read the current URL search params.
 *
 * Compatible with Next.js's `useSearchParams()` from `next/navigation`.
 */
 function useSearchParams() {
-	useSyncExternalStore(subscribe, getSearch, getServerSearch);
-	return typeof window !== "undefined" ? getSearchParams() : getServerSearchParams();
+	try {
+		const navContext = useNavigationContext();
+		if (navContext !== null) return getSearchParams(navContext.search);
+	} catch {}
+	const ssrData = getSsrData();
+	if (ssrData) return new URLSearchParams(ssrData.searchParams);
+	if (typeof window !== "undefined") return getSearchParams(window.location.search);
+	return new URLSearchParams();
 }
 //#endregion
 export { HistoryStack, NavigationProvider, PrefetchCache, SegmentCache, SegmentProvider, TimberErrorBoundary, bindUseQueryStates, clearSsrData, createRouter, getNavigationState, getRouter, getRouterOrNull, getSsrData, setCurrentParams, setGlobalRouter, setNavigationState, setSsrData, useSearchParams, useSegmentContext };