@timber-js/app 0.1.53 → 0.1.54

package/dist/client/index.js

@@ -349,19 +349,24 @@ var SegmentCache = class {
 	* Only includes sync segments — async segments are excluded because the
 	* server must always re-render them (they may depend on request context).
 	*
+	* When mergeableFilter is provided, only segments whose paths are in the
+	* set are included. This ensures the server only skips segments that the
+	* client can actually merge (i.e., segments whose cached element tree
+	* contains an inner SegmentProvider the merger can splice into).
+	*
 	* This is a performance optimization only, NOT a security boundary.
 	* The server always runs all access.ts files regardless of the state tree.
 	*/
-	serializeStateTree() {
+	serializeStateTree(mergeableFilter) {
 		const segments = [];
-		if (this.root) collectSyncSegments(this.root, segments);
+		if (this.root) collectSyncSegments(this.root, segments, mergeableFilter);
 		return { segments };
 	}
 };
 /** Recursively collect sync segment paths from the tree */
-function collectSyncSegments(node, out) {
-	if (!node.isAsync) out.push(node.segment);
-	for (const child of node.children.values()) collectSyncSegments(child, out);
+function collectSyncSegments(node, out, mergeableFilter) {
+	if (!node.isAsync && (!mergeableFilter || mergeableFilter.has(node.segment))) out.push(node.segment);
+	for (const child of node.children.values()) collectSyncSegments(child, out, mergeableFilter);
 }
 /**
 * Build a SegmentNode tree from flat segment metadata.
@@ -524,6 +529,24 @@ var SegmentElementCache = class {
 	get size() {
 		return this.entries.size;
 	}
+	/**
+	* Get the set of segment paths that are safe for the server to skip.
+	* Only segments with an inner SegmentProvider (hasMergeableChild) are
+	* included — the merger can only replace inner SegmentProviders, not
+	* pages embedded in layout output. Used to filter the state tree.
+	*
+	* Returns an empty set if the element cache is empty (no elements
+	* cached yet). This is the safe default — an empty set means no
+	* segments pass the filter, so the state tree is empty and the server
+	* does a full render. The element cache is populated lazily after the
+	* first SPA navigation (RSC-decoded elements from hydration are
+	* thenables that can't be walked until React resolves them).
+	*/
+	getMergeablePaths() {
+		const paths = /* @__PURE__ */ new Set();
+		for (const [, entry] of this.entries) if (entry.hasMergeableChild) paths.add(entry.segmentPath);
+		return paths;
+	}
 };
 /**
 * Check if a React element is a SegmentProvider by looking for the
@@ -537,11 +560,15 @@ function isSegmentProvider(element) {
 }
 /**
 * Extract the segment path from a SegmentProvider element.
-* The `segments` prop is an array like ["", "dashboard", "settings"].
-* The path is reconstructed as "/" + segments.filter(Boolean).join("/").
+*
+* Uses the `segmentId` prop if available (set by the server for route groups
+* to distinguish siblings that share the same urlPath). Falls back to
+* reconstructing from the `segments` array prop.
 */
 function getSegmentPath(element) {
-	const filtered = element.props.segments.filter(Boolean);
+	const props = element.props;
+	if (props.segmentId) return props.segmentId;
+	const filtered = props.segments.filter(Boolean);
 	return filtered.length === 0 ? "/" : "/" + filtered.join("/");
 }
 /**
@@ -554,6 +581,7 @@ function getSegmentPath(element) {
 function extractSegments(element) {
 	const segments = [];
 	walkForSegments(element, segments);
+	for (let i = 0; i < segments.length; i++) segments[i].hasMergeableChild = i < segments.length - 1;
 	return segments;
 }
 function walkForSegments(node, out) {
@@ -563,7 +591,8 @@ function walkForSegments(node, out) {
 	if (isSegmentProvider(node)) {
 		out.push({
 			segmentPath: getSegmentPath(el),
-			element: el
+			element: el,
+			hasMergeableChild: false
 		});
 		walkChildren(props.children, out);
 		return;
@@ -628,7 +657,7 @@ function findSegmentProviderPath(node, targetPath) {
 */
 function replaceInnerSegment(cachedElement, newInnerContent, innerSegmentPath) {
 	const path = findSegmentProviderPath(cachedElement, innerSegmentPath);
-	if (!path || path.length === 0) return cloneElement(cachedElement, {}, newInnerContent);
+	if (!path || path.length === 0) return cachedElement;
 	let replacement = newInnerContent;
 	for (let i = path.length - 1; i >= 0; i--) {
 		const { element, childIndex } = path[i];
@@ -894,18 +923,30 @@ function createRouter(deps) {
 	* In production, the entire callback runs inside a React transition with
 	* useOptimistic for the pending URL. In tests, the payload is rendered directly.
 	*/
-	async function renderViaTransition(pendingUrl, perform) {
+	async function renderViaTransition(url, perform) {
 		if (deps.navigateTransition) {
 			let headElements = null;
-			await deps.navigateTransition(pendingUrl, async (wrapPayload) => {
+			await deps.navigateTransition(url, async (wrapPayload) => {
 				const result = await perform();
 				headElements = result.headElements;
-				return wrapPayload(mergeAndCachePayload(result.payload, result.skippedSegments));
+				const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
+				historyStack.push(url, {
+					payload: merged,
+					headElements: result.headElements,
+					params: result.params
+				});
+				return wrapPayload(merged);
 			});
 			return headElements;
 		}
 		const result = await perform();
-		renderPayload(mergeAndCachePayload(result.payload, result.skippedSegments));
+		const merged = mergeAndCachePayload(result.payload, result.skippedSegments);
+		historyStack.push(url, {
+			payload: merged,
+			headElements: result.headElements,
+			params: result.params
+		});
+		renderPayload(merged);
 		return result.headElements;
 	}
 	/** Apply head elements (title, meta tags) to the DOM if available. */
@@ -931,7 +972,7 @@ function createRouter(deps) {
 			skippedSegments: prefetched.skippedSegments ?? null
 		} : void 0;
 		if (result === void 0) {
-			const stateTree = segmentCache.serializeStateTree();
+			const stateTree = segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths());
 			const rawCurrentUrl = deps.getCurrentUrl();
 			result = await fetchRscPayload(url, deps, stateTree, rawCurrentUrl.startsWith("http") ? new URL(rawCurrentUrl).pathname : new URL(rawCurrentUrl, "http://localhost").pathname);
 		}
@@ -943,11 +984,6 @@ function createRouter(deps) {
 			timber: true,
 			scrollY: 0
 		}, "", url);
-		historyStack.push(url, {
-			payload: result.payload,
-			headElements: result.headElements,
-			params: result.params
-		});
 		updateSegmentCache(result.segmentInfo);
 		updateNavigationState(result.params, url);
 		return result;
@@ -987,11 +1023,6 @@ function createRouter(deps) {
 		try {
 			applyHead(await renderViaTransition(currentUrl, async () => {
 				const result = await fetchRscPayload(currentUrl, deps);
-				historyStack.push(currentUrl, {
-					payload: result.payload,
-					headElements: result.headElements,
-					params: result.params
-				});
 				updateSegmentCache(result.segmentInfo);
 				updateNavigationState(result.params, currentUrl);
 				return result;
@@ -1014,14 +1045,9 @@ function createRouter(deps) {
 			setPending(true, url);
 			try {
 				applyHead(await renderViaTransition(url, async () => {
-					const result = await fetchRscPayload(url, deps, segmentCache.serializeStateTree());
+					const result = await fetchRscPayload(url, deps, segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths()));
 					updateSegmentCache(result.segmentInfo);
 					updateNavigationState(result.params, url);
-					historyStack.push(url, {
-						payload: result.payload,
-						headElements: result.headElements,
-						params: result.params
-					});
 					return result;
 				}));
 				afterPaint(() => {
@@ -1040,7 +1066,7 @@ function createRouter(deps) {
 	function prefetch(url) {
 		if (prefetchCache.get(url) !== void 0) return;
 		if (historyStack.has(url)) return;
-		fetchRscPayload(url, deps, segmentCache.serializeStateTree()).then((result) => {
+		fetchRscPayload(url, deps, segmentCache.serializeStateTree(segmentElementCache.getMergeablePaths())).then((result) => {
 			prefetchCache.set(url, result);
 		}, () => {});
 	}
@@ -1331,7 +1357,7 @@ function useSegmentContext() {
 * Wraps each layout to provide segment position context.
 * Injected by rsc-entry.ts during element tree construction.
 */
-function SegmentProvider({ segments, parallelRouteKeys, children }) {
+function SegmentProvider({ segments, segmentId: _segmentId, parallelRouteKeys, children }) {
 	const value = useMemo(() => ({
 		segments,
 		parallelRouteKeys