vinext 1.4.0 → 1.4.2

package/dist/server/app-browser-entry.js

@@ -23,11 +23,11 @@ import { navigationPlanner } from "./navigation-planner.js";
 import { decodeRedirectError, isRedirectError } from "../shims/navigation-errors.js";
 import { beginAppRouterScrollIntent, consumeAppRouterScrollIntent } from "../shims/app-router-scroll-state.js";
 import { getBfcacheIdMapContext, getNavigationContext, setNavigationContext } from "../shims/navigation-context-state.js";
-import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponse, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, disableNavigationResponsePrefetchCacheReuse, getClientNavigationRenderContext, getMountedSlotsHeader, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidateDynamicPrefetchCache, invalidatePrefetchCache, invalidateVisitedResponsePrefetches, parseRenderedPathAndSearchHeader, preloadHybridClientRouteOwner, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolveLoadedHybridClientRewriteHref, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, trackAppRouterNavigationInFlight, useRouter } from "../shims/navigation.js";
+import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, activateNavigationSnapshot, appRouterInstance, commitClientNavigationState, consumePrefetchResponse, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, disableNavigationResponsePrefetchCacheReuse, getClientNavigationRenderContext, getMountedSlotsHeader, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidateDynamicPrefetchCache, invalidatePrefetchCache, invalidateVisitedResponsePrefetches, parseRenderedPathAndSearchHeader, preloadHybridClientRouteOwner, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolveLoadedHybridClientRewriteHref, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, trackAppRouterNavigationInFlight, useRouter } from "../shims/navigation.js";
 import { AppRouterScrollCommitProvider } from "../shims/app-router-scroll.js";
 import { chunksToReadableStream, createProgressiveRscStream, getVinextBrowserGlobal } from "./app-browser-stream.js";
 import { createMountedLayoutsHeader, holdsSkippedLayouts } from "./app-mounted-layouts.js";
-import { BfcacheIdentityMapContext, bindAppElementsRenderedSearch, setAppElementsRenderedSearch } from "../shims/slot.js";
+import { BfcacheIdentityMapContext, bindAppElementsRenderedSearch, isBfcacheIdentityRetained, setAppElementsRenderedSearch } from "../shims/slot.js";
 import { COMMITTED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, FRESH_APP_NAVIGATION_PAYLOAD_ORIGIN, VISITED_CACHE_APP_NAVIGATION_PAYLOAD_ORIGIN, isCacheRestorableAppPayloadMetadata, isCompleteAppPayloadMetadata, resolveInterceptionContextFromPreviousNextUrl } from "./app-browser-state.js";
 import { clearHardNavigationLoopGuard, createAppBrowserNavigationController, createBasePathStrippedPathAndSearch, navigateDocumentDirectly } from "./app-browser-navigation-controller.js";
 import { createAppRouteTree } from "./app-route-tree.js";
@@ -45,7 +45,7 @@ import { createHydrationCachePublication } from "./app-hydration-cache-publicati
 import { peekSettledPrefetchResponseForNavigation, prepareConsumedPrefetchResponseForPublication, preserveCommittedPrefetchExpiry, resolvePrefetchNavigationResponseUrl } from "./app-browser-prefetch-response.js";
 import { canCommitOptimisticRouteTemplate, createOptimisticRouteTemplate, createOptimisticRouteTemplateStore, getOptimisticPrefetchSourceKey, getOptimisticRouteTemplateKey, keepOptimisticStreamingMetadata, resolveOptimisticNavigationParamsForHref, resolveOptimisticNavigationPayload } from "./app-optimistic-routing.js";
 import { removeStylesheetLinksCoveredByInlineCss } from "./app-inline-css-client.js";
-import { createElement, startTransition, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, createElement, startTransition, use, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
 import { createFromFetch, createFromReadableStream, setServerCallback } from "@vitejs/plugin-rsc/browser";
 import { flushSync } from "react-dom";
@@ -195,6 +195,12 @@ const RSC_HMR_SETTLE_DELAY_MS = 150;
 const DEFAULT_GLOBAL_ERROR_COMPONENT = DefaultGlobalError;
 let latestRscHmrUpdateId = 0;
 let synchronousPopstateScrollRestoreNavigationId = null;
+let pendingHistoryRestoreCommit = null;
+function flushPendingHistoryRestoreCommit() {
+	const commit = pendingHistoryRestoreCommit;
+	pendingHistoryRestoreCommit = null;
+	commit?.();
+}
 function waitForRscHmrSettle(delayMs = RSC_HMR_SETTLE_DELAY_MS) {
 	return new Promise((resolve) => {
 		window.setTimeout(resolve, delayMs);
@@ -212,6 +218,10 @@ function restoreHistoryStateSnapshot(historyState, navId, onApprovedBeforeCommit
 				beforeCommit: () => {
 					onApprovedBeforeCommit?.();
 					beforeCommit();
+					if (!restoreCopiedExternalHistoryEntry) {
+						activateNavigationSnapshot();
+						pendingHistoryRestoreCommit = () => commitClientNavigationState(navId);
+					}
 				},
 				navId,
 				state,
@@ -223,7 +233,8 @@ function restoreHistoryStateSnapshot(historyState, navId, onApprovedBeforeCommit
 	clientNavigationCacheGeneration += 1;
 	revokeHistoryRestoreNavigationReuse(visitedResponseCache);
 	disableNavigationResponsePrefetchCacheReuse();
-	commitClientNavigationState(navId, { releaseSnapshot: false });
+	if (restoreCopiedExternalHistoryEntry) commitClientNavigationState(navId, { releaseSnapshot: false });
+	else flushPendingHistoryRestoreCommit();
 	return true;
 }
 function getBrowserRouterState() {
@@ -1000,6 +1011,10 @@ function registerServerActionCallback() {
 		})).finally(releaseCacheInvalidationGuard);
 	});
 }
+function ReplayInitialDevServerErrors({ report }) {
+	useEffect(report, [report]);
+	return null;
+}
 async function main() {
 	if (!claimInitialAppRouterBootstrap()) return;
 	loadNavigationRuntimeRouteManifest();
@@ -1011,7 +1026,7 @@ async function main() {
 		devErrorOverlay = await import("../client/dev-error-overlay.js");
 		devErrorOverlay.installDevErrorOverlay();
 		devErrorOverlay.installViteHmrErrorHandler(import.meta.hot);
-		devErrorOverlay.reportInitialDevServerErrors();
+		if (document.documentElement.id !== "__next_error__") devErrorOverlay.reportInitialDevServerErrors();
 	}
 	const initialRscBootstrap = getNavigationRuntime()?.bootstrap.rsc;
 	const rscStream = await readInitialRscStream();
@@ -1098,7 +1113,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 		for (const style of errorShellStyles) style.remove();
 		startTransition(() => {
 			const clientRoot = createRoot(document, createRootOptions);
-			clientRoot.render(children);
+			clientRoot.render(import.meta.env.DEV && devErrorOverlay ? createElement(Fragment, null, children, createElement(ReplayInitialDevServerErrors, { report: devErrorOverlay.reportInitialDevServerErrors })) : children);
 			window.__VINEXT_RSC_ROOT__ = clientRoot;
 		});
 	} else window.__VINEXT_RSC_ROOT__ = hydrateRootInTransition({
@@ -1389,7 +1404,10 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 								currentElements: navigationInitiationState.elements,
 								currentLayoutIds: navigationInitiationState.layoutIds,
 								currentParams: navigationInitiationState.navigationSnapshot.params,
+								isBfcacheIdentityRetained,
 								routeManifest,
+								shownElements: getBrowserRouterState().elements,
+								targetElements: optimisticPayload.elements,
 								targetRouteParams: optimisticPayload.routeParams,
 								targetUrlParts: optimisticPayload.urlParts,
 								template: optimisticPayload.template
@@ -1631,7 +1649,10 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 		discardPendingNavigation: () => {
 			if (browserNavigationController.discardPendingNavigation(historyController.readCurrentTreeSnapshot())) navigationAbortCoordinator.abortActive();
 		},
-		flushCommittingNavigationUrl: () => browserNavigationController.flushCommittingNavigationUrl()
+		flushCommittingNavigationUrl: () => {
+			flushPendingHistoryRestoreCommit();
+			browserNavigationController.flushCommittingNavigationUrl();
+		}
 	});
 	const handlePopstate = createPopstateRestoreHandler({
 		getActiveNavigationId: browserNavigationController.getActiveNavigationId.bind(browserNavigationController),

package/dist/server/app-browser-rsc-redirect.js

@@ -1,5 +1,5 @@
 import { isDangerousScheme, reportBlockedDangerousNavigation } from "../shims/url-safety.js";
-import { resolveHardNavigationTargetFromRscResponse, stripRscCacheBustingSearchParam, stripRscSuffix } from "./app-rsc-cache-busting.js";
+import { resolveHardNavigationTargetFromRscResponse, stripRscCacheBustingSearchParam, toPathAbsolutePathname } from "./app-rsc-cache-busting.js";
 //#region src/server/app-browser-rsc-redirect.ts
 const MAX_RSC_REDIRECT_DEPTH = 10;
 function blockDangerousStreamedRscRedirect(response, streamedRedirectTarget) {
@@ -11,10 +11,10 @@ function blockDangerousStreamedRscRedirect(response, streamedRedirectTarget) {
 function toVisibleAppHref(href, origin) {
 	const url = new URL(href, origin);
 	stripRscCacheBustingSearchParam(url);
-	return `${stripRscSuffix(url.pathname)}${url.search}${url.hash}`;
+	return `${toPathAbsolutePathname(url.pathname)}${url.search}${url.hash}`;
 }
 function toStreamedRedirectVisibleAppHref(url) {
-	return `${url.pathname}${url.search}${url.hash}`;
+	return `${toPathAbsolutePathname(url.pathname)}${url.search}${url.hash}`;
 }
 function resolveRedirectLifecycleHopFromTarget(options) {
 	if (options.targetUrl.origin !== options.origin) return {

package/dist/server/app-browser-server-action-client.js

@@ -1,7 +1,7 @@
 import { hasBasePath } from "../utils/base-path.js";
 import { ACTION_REDIRECT_HEADER, ACTION_REDIRECT_STATUS_HEADER, VINEXT_RENDERED_PATH_AND_SEARCH_HEADER } from "./headers.js";
 import { DANGEROUS_URL_BLOCK_MESSAGE, isDangerousScheme } from "../shims/url-safety.js";
-import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, createServerActionRequestUrl } from "./app-rsc-cache-busting.js";
+import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, createServerActionRequestUrl, toPathAbsolutePathname } from "./app-rsc-cache-busting.js";
 import { throwOnServerActionNotFound } from "./server-action-not-found.js";
 import { AppElementsWire } from "./app-elements-wire.js";
 import "./app-elements.js";
@@ -49,7 +49,7 @@ var ServerActionRedirectError = class extends Error {
 	constructor(target) {
 		super("NEXT_REDIRECT");
 		const redirectUrl = new URL(target.href, window.location.href);
-		const redirectHref = redirectUrl.pathname + redirectUrl.search + redirectUrl.hash;
+		const redirectHref = toPathAbsolutePathname(redirectUrl.pathname) + redirectUrl.search + redirectUrl.hash;
 		const redirectType = target.type === "push" ? "push" : "replace";
 		this.digest = `NEXT_REDIRECT;${redirectType};${redirectHref};${target.status};`;
 	}

package/dist/server/app-browser-visible-commit.js

@@ -87,11 +87,11 @@ function reduceApprovedVisibleCommitState(state, commit) {
 			const hmrUniquePreserveElementIds = hmrPreserveElementIds.length > 1 ? [...new Set(hmrPreserveElementIds)] : hmrPreserveElementIds;
 			const preserveElementIds = action.operation.lane === "hmr" ? hmrUniquePreserveElementIds : bfcacheCompatiblePreserveElementIds;
 			const preserveTemplateIds = action.reuseCurrentBfcacheIds && (action.operation.lane === "navigation" || action.operation.lane === "traverse" || action.operation.lane === "server-action") ? Object.keys(state.elements).filter((id) => Object.hasOwn(action.elements, id) && hasSameServerTemplateSeedIdentity(id, state.navigationSnapshot, action.navigationSnapshot)) : [];
-			const mergedPreserveElementIds = preserveTemplateIds.length === 0 ? preserveElementIds : [.../* @__PURE__ */ new Set([...preserveElementIds, ...preserveTemplateIds])];
 			const mergedElements = mergeElements(state.elements, action.elements, {
 				clearAbsentSlots: action.type === "traverse" || !action.reuseCurrentBfcacheIds,
 				preserveAbsentSlots: action.reuseCurrentBfcacheIds && commit.decision.preserveAbsentSlots,
-				preserveElementIds: mergedPreserveElementIds,
+				preserveElementIds,
+				preserveElementSeedIds: preserveTemplateIds,
 				preservePreviousSlotIds: effectivePreservePreviousSlotIds
 			});
 			return commitVisibleRouterState(state, {

package/dist/server/app-elements.d.ts

@@ -1,6 +1,9 @@
 import { APP_ARTIFACT_COMPATIBILITY_KEY, APP_BFCACHE_SEGMENT_IDENTITIES_KEY, APP_CACHE_ENTRY_REUSE_PROOF_KEY, APP_DYNAMIC_STALE_TIME_KEY, APP_INTERCEPTION_CONTEXT_KEY, APP_INTERCEPTION_KEY, APP_LAYOUT_IDS_KEY, APP_ROOT_LAYOUT_KEY, APP_ROUTE_KEY, APP_SKIPPED_LAYOUT_IDS_KEY, APP_SLOT_BINDINGS_KEY, APP_SOURCE_PAGE_SEGMENTS_KEY, APP_STATIC_SIBLINGS_KEY, APP_UNMATCHED_SLOT_WIRE_VALUE, AppElementValue, AppElements, AppElementsBfcacheSegmentIdentities, AppElementsInterception, AppElementsSlotBinding, AppElementsWire, AppOutgoingElements, AppWireElements, UNMATCHED_SLOT, buildOutgoingAppPayload, compareAppElementsSlotIds, isAppElementsRecord, normalizeAppElements, normalizeAppElementsSlotBindings, readAppElementsMetadata } from "./app-elements-wire.js";
 //#region src/server/app-elements.d.ts
 export declare const APP_PREFETCH_LOADING_SHELL_MARKER_KEY = "__prefetchLoadingShell";
+type AppElementsStateKeyRebinder = (stateKey: string) => string;
+export declare function setOptimisticStateKeyRebinder(elements: Record<string, unknown>, rebind: AppElementsStateKeyRebinder): void;
+export declare function readOptimisticStateKeyRebinder(elements: AppElements): AppElementsStateKeyRebinder | null;
 /** Prefix of the element that streams a route's generateMetadata() tags in the body. */
 export declare const APP_STREAMING_METADATA_BODY_ID_PREFIX = "__vinext_streaming_metadata_body:";
 export declare function getMountedSlotIds(elements: AppElements): string[];

package/dist/server/app-elements.js

@@ -2,6 +2,19 @@ import { normalizeMountedSlotsHeader } from "./app-mounted-slots-header.js";
 import { APP_ARTIFACT_COMPATIBILITY_KEY, APP_BFCACHE_SEGMENT_IDENTITIES_KEY, APP_CACHE_ENTRY_REUSE_PROOF_KEY, APP_DYNAMIC_STALE_TIME_KEY, APP_INTERCEPTION_CONTEXT_KEY, APP_INTERCEPTION_KEY, APP_LAYOUT_IDS_KEY, APP_ROOT_LAYOUT_KEY, APP_ROUTE_KEY, APP_SKIPPED_LAYOUT_IDS_KEY, APP_SLOT_BINDINGS_KEY, APP_SOURCE_PAGE_SEGMENTS_KEY, APP_STATIC_SIBLINGS_KEY, APP_UNMATCHED_SLOT_WIRE_VALUE, AppElementsWire, UNMATCHED_SLOT, buildOutgoingAppPayload, compareAppElementsSlotIds, isAppElementsRecord, normalizeAppElements, normalizeAppElementsSlotBindings, readAppElementsMetadata } from "./app-elements-wire.js";
 //#region src/server/app-elements.ts
 const APP_PREFETCH_LOADING_SHELL_MARKER_KEY = "__prefetchLoadingShell";
+/**
+* An optimistic shell's rebinder from the learned URL's segment state keys to
+* the target's. Only the browser sets it, on the elements it builds a shell
+* from, so it never reaches the wire.
+*/
+const APP_OPTIMISTIC_STATE_KEY_REBINDER_KEY = "__optimisticStateKeyRebinder";
+function setOptimisticStateKeyRebinder(elements, rebind) {
+	elements[APP_OPTIMISTIC_STATE_KEY_REBINDER_KEY] = rebind;
+}
+function readOptimisticStateKeyRebinder(elements) {
+	const rebind = Reflect.get(elements, APP_OPTIMISTIC_STATE_KEY_REBINDER_KEY);
+	return typeof rebind === "function" ? rebind : null;
+}
 /** Prefix of the element that streams a route's generateMetadata() tags in the body. */
 const APP_STREAMING_METADATA_BODY_ID_PREFIX = "__vinext_streaming_metadata_body:";
 function getMountedSlotIds(elements) {
@@ -18,4 +31,4 @@ function resolveVisitedResponseInterceptionContext(requestInterceptionContext, p
 	return payloadInterceptionContext ?? requestInterceptionContext;
 }
 //#endregion
-export { APP_ARTIFACT_COMPATIBILITY_KEY, APP_BFCACHE_SEGMENT_IDENTITIES_KEY, APP_CACHE_ENTRY_REUSE_PROOF_KEY, APP_DYNAMIC_STALE_TIME_KEY, APP_INTERCEPTION_CONTEXT_KEY, APP_INTERCEPTION_KEY, APP_LAYOUT_IDS_KEY, APP_PREFETCH_LOADING_SHELL_MARKER_KEY, APP_ROOT_LAYOUT_KEY, APP_ROUTE_KEY, APP_SKIPPED_LAYOUT_IDS_KEY, APP_SLOT_BINDINGS_KEY, APP_SOURCE_PAGE_SEGMENTS_KEY, APP_STATIC_SIBLINGS_KEY, APP_STREAMING_METADATA_BODY_ID_PREFIX, APP_UNMATCHED_SLOT_WIRE_VALUE, AppElementsWire, UNMATCHED_SLOT, buildOutgoingAppPayload, compareAppElementsSlotIds, getMountedSlotIds, getMountedSlotIdsHeader, isAppElementsRecord, normalizeAppElements, normalizeAppElementsSlotBindings, readAppElementsMetadata, resolveVisitedResponseInterceptionContext };
+export { APP_ARTIFACT_COMPATIBILITY_KEY, APP_BFCACHE_SEGMENT_IDENTITIES_KEY, APP_CACHE_ENTRY_REUSE_PROOF_KEY, APP_DYNAMIC_STALE_TIME_KEY, APP_INTERCEPTION_CONTEXT_KEY, APP_INTERCEPTION_KEY, APP_LAYOUT_IDS_KEY, APP_PREFETCH_LOADING_SHELL_MARKER_KEY, APP_ROOT_LAYOUT_KEY, APP_ROUTE_KEY, APP_SKIPPED_LAYOUT_IDS_KEY, APP_SLOT_BINDINGS_KEY, APP_SOURCE_PAGE_SEGMENTS_KEY, APP_STATIC_SIBLINGS_KEY, APP_STREAMING_METADATA_BODY_ID_PREFIX, APP_UNMATCHED_SLOT_WIRE_VALUE, AppElementsWire, UNMATCHED_SLOT, buildOutgoingAppPayload, compareAppElementsSlotIds, getMountedSlotIds, getMountedSlotIdsHeader, isAppElementsRecord, normalizeAppElements, normalizeAppElementsSlotBindings, readAppElementsMetadata, readOptimisticStateKeyRebinder, resolveVisitedResponseInterceptionContext, setOptimisticStateKeyRebinder };

package/dist/server/app-fallback-renderer.js

@@ -1,10 +1,10 @@
 import { runOutsideRequestScopes } from "../shims/internal/als-registry.js";
 import { shareIsolatePromise } from "./isolate-shared-promise.js";
-import { DEFAULT_GLOBAL_ERROR_MODULE } from "./default-global-error-module.js";
-import { shouldServeStreamingMetadata } from "./streaming-metadata.js";
 import { renderAppPageErrorBoundary, renderAppPageHttpAccessFallback } from "./app-page-boundary-render.js";
+import { DEFAULT_GLOBAL_ERROR_MODULE } from "./default-global-error-module.js";
 import { DEFAULT_GLOBAL_NOT_FOUND_MODULE } from "./default-global-not-found-module.js";
 import { DEFAULT_NOT_FOUND_MODULE } from "./default-http-access-fallback-modules.js";
+import { shouldServeStreamingMetadata } from "./streaming-metadata.js";
 //#region src/server/app-fallback-renderer.ts
 const EMPTY_MW_CTX = {
 	headers: null,

package/dist/server/app-optimistic-routing.d.ts

@@ -10,6 +10,8 @@ export type OptimisticRouteTemplate = {
   omittedBfcacheSegmentIds: readonly string[];
   omittedLayoutIds: readonly string[];
   pageElementIds: readonly string[];
+  /** The navigation params of the URL the template was learned from. */
+  params: Readonly<Record<string, string | string[]>>;
   routeId: string;
 };
 type OptimisticNavigationPayload = {
@@ -48,7 +50,7 @@ export declare function createOptimisticRouteTemplate(options: {
   mountedSlotsHeader: string | null;
   routeManifest: BrowserRouteManifest;
 }): OptimisticRouteTemplate | null;
-export declare function createOptimisticRouteElements(template: OptimisticRouteTemplate): AppElements;
+export declare function createOptimisticRouteElements(template: OptimisticRouteTemplate, params?: Readonly<Record<string, string | string[]>>): AppElements;
 /**
  * The optimistic shell reveals the prefetch's streamed metadata, such as its
  * title. React won't hide revealed content again in a transition, so while the
@@ -77,7 +79,16 @@ export declare function canCommitOptimisticRouteTemplate(options: {
   currentElements: AppElements;
   currentLayoutIds: readonly string[];
   currentParams: Readonly<Record<string, string | string[]>>;
+  /** Whether a hidden BFCache entry retains a segment identity. */
+  isBfcacheIdentityRetained?: (identity: string) => boolean;
   routeManifest: BrowserRouteManifest;
+  /**
+   * The elements on screen, when a shell earlier in this navigation replaced
+   * the current ones. Defaults to `currentElements`.
+   */
+  shownElements?: AppElements;
+  /** The shell's elements for the target. */
+  targetElements?: AppElements;
   targetRouteParams: Readonly<Record<string, string | string[]>>;
   targetUrlParts: readonly string[];
   template: OptimisticRouteTemplate;

package/dist/server/app-optimistic-routing.js

@@ -3,11 +3,11 @@ import { stripBasePath } from "../utils/base-path.js";
 import { decodeMatchedParams, splitPathnameForRouteMatch } from "../routing/utils.js";
 import { extractRawRoutePatternParams, matchRoutePattern } from "../routing/route-pattern.js";
 import { buildOptimisticRouteTrie, matchOptimisticRouteTrie } from "../routing/optimistic-route-trie.js";
-import { stripRscCacheBustingSearchParam, stripRscSuffix } from "./app-rsc-cache-busting.js";
-import { AppElementsWire } from "./app-elements-wire.js";
-import "./app-elements.js";
+import { stripRscCacheBustingSearchParam } from "./app-rsc-cache-busting.js";
+import { APP_BFCACHE_SEGMENT_IDENTITIES_KEY, AppElementsWire } from "./app-elements-wire.js";
+import { setOptimisticStateKeyRebinder } from "./app-elements.js";
 import { createNestedBfcacheSlotSegmentId, deriveBfcacheSegmentIdentity, isNestedBfcacheSlotSegmentId } from "./bfcache-identity.js";
-import { canonicalizeAppPageParams, resolveAppPagePatternStateKey, resolveAppPageSemanticSegmentStateKey } from "./app-page-segment-state.js";
+import { APP_PAGE_DEFAULT_SEGMENT_KEY, APP_PAGE_SEGMENT_KEY, canonicalizeAppPageParams, createAppPageSegmentStateKeyRebinder, resolveAppPagePatternStateKey, resolveAppPageSemanticSegmentStateKey } from "./app-page-segment-state.js";
 import { Suspense, createElement, isValidElement } from "react";
 //#region src/server/app-optimistic-routing.ts
 const routeTrieCache = /* @__PURE__ */ new WeakMap();
@@ -36,8 +36,7 @@ function hrefToRouteParts(href, basePath) {
 		return null;
 	}
 	stripRscCacheBustingSearchParam(url);
-	const withoutRscSuffix = stripRscSuffix(url.pathname);
-	const appPathname = stripBasePath(withoutRscSuffix, basePath);
+	const appPathname = stripBasePath(url.pathname, basePath);
 	const pathname = appPathname === "" ? "/" : appPathname;
 	return {
 		normalized: splitPathnameForRouteMatch(pathname),
@@ -115,6 +114,18 @@ function resolveTargetBfcacheSegmentIdentity(options) {
 		const segmentParams = binding.state === "active" && binding.slotPatternParts !== void 0 && binding.slotPatternParts.length > 0 && !binding.slotParamNames?.every((name) => routeParamNames.has(name)) ? matchRoutePattern(options.targetUrlParts, binding.slotPatternParts) ?? options.targetRouteParams : options.targetRouteParams;
 		const ownerLayout = binding.ownerLayoutId ? options.routeManifest.segmentGraph.layouts.get(binding.ownerLayoutId) : void 0;
 		const ownerStateKey = ownerLayout ? resolveAppPagePatternStateKey(ownerLayout.patternParts, options.targetRouteParams) : "";
+		const deriveLevelIdentity = (segmentKeys) => {
+			const identityKey = JSON.stringify(segmentKeys);
+			return deriveBfcacheSegmentIdentity({
+				activeRouteGraphId: null,
+				boundSegmentKey: ownerStateKey ? JSON.stringify([ownerStateKey, identityKey]) : identityKey,
+				interceptionTargetRouteGraphId: null,
+				kind: "slot",
+				ownerLayoutGraphId: binding.ownerLayoutId,
+				slotGraphId: binding.slotId,
+				state: binding.state
+			});
+		};
 		const boundSegmentKeys = [];
 		let level = 0;
 		for (const segment of binding.routeSegments ?? []) {
@@ -126,17 +137,9 @@ function resolveTargetBfcacheSegmentIdentity(options) {
 				segment
 			}, segmentParams));
 			if (createNestedBfcacheSlotSegmentId(binding.slotId, level) !== options.segmentId) continue;
-			const identityKey = JSON.stringify(boundSegmentKeys);
-			return deriveBfcacheSegmentIdentity({
-				activeRouteGraphId: null,
-				boundSegmentKey: ownerStateKey ? JSON.stringify([ownerStateKey, identityKey]) : identityKey,
-				interceptionTargetRouteGraphId: null,
-				kind: "slot",
-				ownerLayoutGraphId: binding.ownerLayoutId,
-				slotGraphId: binding.slotId,
-				state: binding.state
-			});
+			return deriveLevelIdentity(boundSegmentKeys);
 		}
+		if (level > 0 && createNestedBfcacheSlotSegmentId(binding.slotId, level + 1) === options.segmentId) return deriveLevelIdentity([...boundSegmentKeys, binding.state === "default" ? APP_PAGE_DEFAULT_SEGMENT_KEY : APP_PAGE_SEGMENT_KEY]);
 		if (level === 0 && createNestedBfcacheSlotSegmentId(binding.slotId, 1) === options.segmentId) return deriveBfcacheSegmentIdentity({
 			activeRouteGraphId: null,
 			boundSegmentKey: ownerStateKey ? JSON.stringify([ownerStateKey, ""]) : "",
@@ -189,18 +192,31 @@ function createOptimisticRouteTemplate(options) {
 	if (options.allowLoadingShell && (routeElement === void 0 || routeElement === null)) return null;
 	const pageElementIds = getPageElementIds(options.elements, match.route);
 	if (pageElementIds.length === 0) return null;
+	const urlParts = hrefToRouteParts(options.href, options.basePath);
+	if (urlParts === null) return null;
 	return {
 		elements: options.elements,
 		mountedSlotsHeader: options.mountedSlotsHeader,
 		omittedBfcacheSegmentIds: options.elements["__prefetchLoadingShell"] === "LoadingBoundary" ? getOmittedBfcacheSegmentIds(options.elements) : [],
 		omittedLayoutIds: options.elements["__prefetchLoadingShell"] === "LoadingBoundary" ? metadata.layoutIds.filter((layoutId) => !Object.hasOwn(options.elements, layoutId)) : [],
 		pageElementIds,
+		params: resolveOptimisticNavigationParams({
+			match,
+			rawUrlParts: urlParts.raw,
+			routeManifest: options.routeManifest,
+			urlParts: urlParts.normalized
+		}).navigationParams,
 		routeId: match.route.id
 	};
 }
-function createOptimisticRouteElements(template) {
+function createOptimisticRouteElements(template, params = template.params) {
 	const elements = { ...template.elements };
 	for (const pageElementId of template.pageElementIds) elements[pageElementId] = createElement(OptimisticRouteSegment);
+	const reify = createAppPageSegmentStateKeyRebinder(template.params, params);
+	if (reify === null) return elements;
+	setOptimisticStateKeyRebinder(elements, reify);
+	const identities = AppElementsWire.readMetadata(template.elements).bfcacheSegmentIdentities;
+	if (Object.keys(identities).length > 0) elements[APP_BFCACHE_SEGMENT_IDENTITIES_KEY] = Object.fromEntries(Object.entries(identities).map(([id, identity]) => [id, reify(identity)]));
 	return elements;
 }
 function findStreamingMetadataBody(elements) {
@@ -245,9 +261,14 @@ function keepOptimisticStreamingMetadata(elements, optimisticElements, navigatio
 * loading boundary does not re-trigger.
 */
 function canCommitOptimisticRouteTemplate(options) {
+	const currentIdentities = AppElementsWire.readMetadata(options.currentElements).bfcacheSegmentIdentities;
+	const { isBfcacheIdentityRetained, targetElements } = options;
+	if (isBfcacheIdentityRetained && targetElements) {
+		const shownIdentities = new Set(Object.values(options.shownElements ? AppElementsWire.readMetadata(options.shownElements).bfcacheSegmentIdentities : currentIdentities));
+		for (const identity of Object.values(AppElementsWire.readMetadata(targetElements).bfcacheSegmentIdentities)) if (!shownIdentities.has(identity) && isBfcacheIdentityRetained(identity)) return false;
+	}
 	if (options.template.omittedLayoutIds.length === 0 && options.template.omittedBfcacheSegmentIds.length === 0) return true;
 	const currentLayoutIds = new Set(options.currentLayoutIds);
-	const currentIdentities = AppElementsWire.readMetadata(options.currentElements).bfcacheSegmentIdentities;
 	for (const layoutId of options.template.omittedLayoutIds) {
 		if (!currentLayoutIds.has(layoutId)) continue;
 		if (!Object.hasOwn(options.currentElements, layoutId)) continue;
@@ -303,7 +324,7 @@ function resolveOptimisticNavigationPayload(options) {
 		urlParts: urlParts.normalized
 	});
 	return {
-		elements: createOptimisticRouteElements(template),
+		elements: createOptimisticRouteElements(template, navigationParams),
 		params: navigationParams,
 		routeParams,
 		template,

package/dist/server/app-page-boundary-render.js

@@ -3,13 +3,12 @@ import { isNavigationSignalError } from "../utils/navigation-signal.js";
 import { NEVER_CACHE_CONTROL, applyCdnResponseHeaders } from "./cache-control.js";
 import { isRenderDynamicLatched, isStaticGenerationAccessError } from "../shims/internal/headers-state.js";
 import { copyLinkHeaderProvenance } from "./app-response-header-provenance.js";
-import { stripRscSuffix } from "./app-rsc-cache-busting.js";
 import { createArtifactCompatibilityEnvelope } from "./artifact-compatibility.js";
 import { AppElementsWire } from "./app-elements-wire.js";
 import "./app-elements.js";
 import DefaultGlobalError from "../shims/default-global-error.js";
 import { ErrorBoundary, GlobalErrorBoundary, SerializedErrorBoundary } from "../shims/error-boundary.js";
-import { buildClientHookErrorMessage } from "../shims/client-hook-error.js";
+import { rewriteClientHookError } from "../shims/client-hook-error.js";
 import { LayoutSegmentProvider } from "../shims/layout-segment-context.js";
 import { withUseCacheLayoutMarker } from "../shims/internal/app-page-props-cache-key.js";
 import { MetadataHead, ViewportHead } from "../shims/metadata.js";
@@ -21,9 +20,9 @@ import { hasAppPageDynamicMetadata, prepareAppPageHead, resolveActiveParallelRou
 import { renderAppPageBoundaryResponse, resolveAppPageErrorBoundary, resolveAppPageHttpAccessBoundaryModule, wrapAppPageBoundaryElement } from "./app-page-boundary.js";
 import { createRouteNotFoundHeadPlanOptions, recoverAppPageRouteHead, resolveHttpAccessFallbackMetadata, resolveHttpAccessFallbackViewport } from "./app-page-http-access-fallback-metadata.js";
 import "./app-rsc-route-matching.js";
-import { createAppPageLayoutEntries, createAppPageRouteBodyMetadata, createAppPageSourcePage } from "./app-page-route-wiring.js";
-import { resolveSlotParamOverrides } from "./app-page-element-builder.js";
+import { resolveSlotParamOverrides } from "./app-page-navigation-params.js";
 import { createAppPageFontData, createAppPageRscErrorTracker, createAppPageSsrErrorHandler, renderAppPageHtmlResponse } from "./app-page-stream.js";
+import { createAppPageLayoutEntries, createAppPageRouteBodyMetadata, createAppPageSourcePage } from "./app-page-route-wiring.js";
 import { Fragment, Suspense, createElement } from "react";
 //#region src/server/app-page-boundary-render.ts
 async function AppPageBoundaryStreamedMetadata(props) {
@@ -258,7 +257,7 @@ async function renderAppPageHttpAccessFallback(options) {
 	if (!boundaryComponent) return null;
 	const layoutModules = options.layoutModules ?? options.route?.layouts ?? options.rootLayouts;
 	const pathname = new URL(options.requestUrl).pathname;
-	const routePathname = options.routePathname ?? stripRscSuffix(stripBasePath(pathname, options.basePath ?? ""));
+	const routePathname = options.routePathname ?? stripBasePath(pathname, options.basePath ?? "");
 	const headBoundaryModule = options.headBoundaryModule ?? boundaryModule;
 	const headLayoutModules = options.headLayoutModules ?? layoutModules;
 	const routeSegments = resolveHttpAccessFallbackHeadRouteSegments(options.route, headLayoutModules);
@@ -612,6 +611,7 @@ async function renderAppPageErrorBoundary(options) {
 			skipLayoutWrapping: errorBoundary.isGlobalError
 		});
 	};
+	const isErrorStatus = errorBoundary.isGlobalError || !options.isRscRequest;
 	const renderWith = async (BoundaryComponent) => {
 		const response = await renderAppPageBoundaryElementResponse({
 			...options,
@@ -621,9 +621,9 @@ async function renderAppPageErrorBoundary(options) {
 			navigationParams: matchedParams,
 			route: options.route,
 			routePattern: options.route?.pattern,
-			status: errorBoundary.isGlobalError ? 500 : 200
+			status: isErrorStatus ? 500 : 200
 		});
-		if (errorBoundary.isGlobalError) applyCdnResponseHeaders(response.headers, { cacheControl: NEVER_CACHE_CONTROL });
+		if (isErrorStatus) applyCdnResponseHeaders(response.headers, { cacheControl: NEVER_CACHE_CONTROL });
 		return response;
 	};
 	try {
@@ -636,10 +636,5 @@ async function renderAppPageErrorBoundary(options) {
 		throw renderError;
 	}
 }
-const _clientHookPattern = /\b(useState|useEffect|useReducer|useRef|useContext|useLayoutEffect|useInsertionEffect|useSyncExternalStore|useTransition|useImperativeHandle|useDeferredValue|useActionState|useOptimistic|useEffectEvent)\b.*is not a function/;
-function rewriteClientHookError(error) {
-	const match = error.message.match(_clientHookPattern);
-	if (match) error.message = buildClientHookErrorMessage(`${match[1]}()`);
-}
 //#endregion
 export { renderAppPageErrorBoundary, renderAppPageHttpAccessFallback };

package/dist/server/app-page-cache-render.js

@@ -4,8 +4,8 @@ import { _consumeRequestScopedCacheLife } from "../shims/cache-request-state.js"
 import { getCollectedFetchTags } from "../shims/fetch-cache.js";
 import { readStreamAsText } from "../utils/text-stream.js";
 import { buildAppPageFontLinkHeader, teeAppPageRscStreamForCapture } from "./app-page-execution.js";
-import { recordAppPageRenderError, traceAppPageRender } from "./app-page-tracing.js";
 import { buildAppPageLinkHeader, createAppPageSsrErrorHandler, isAppSsrRenderResult } from "./app-page-stream.js";
+import { recordAppPageRenderError, traceAppPageRender } from "./app-page-tracing.js";
 import { consumeAppPageRenderObservationState, createAppPageHtmlOutputScope, createAppPageRenderObservation, createAppPageRscOutputScope } from "./app-page-render-observation.js";
 import { buildAppPageTags } from "./implicit-tags.js";
 //#region src/server/app-page-cache-render.ts

package/dist/server/app-page-dispatch.d.ts

@@ -15,7 +15,7 @@ import { FetchCacheMode } from "../shims/fetch-cache-state.js";
 import "../shims/fetch-cache.js";
 import { AppPagePprFallbackCacheShell } from "./app-ppr-fallback-shell.js";
 import { WarmPprFallbackShellCachesOptions } from "./app-ppr-fallback-shell-render.js";
-import { ValidateAppPageDynamicParamsOptions } from "./app-page-request.js";
+import { AppPageInterceptState, ValidateAppPageDynamicParamsOptions } from "./app-page-request.js";
 import { ReactNode } from "react";
 import { ReactFormState } from "react-dom/client";
 //#region src/server/app-page-dispatch.d.ts
@@ -96,10 +96,17 @@ type AppPageModule = {
   revalidate?: unknown;
 };
 type AppPageDispatchSlot = {
+  configLayouts?: readonly (AppPageModule | null | undefined)[] | null;
+  configLayoutTreePositions?: readonly number[] | null;
   default?: AppPageModule | null;
+  layout?: AppPageModule | null;
+  layoutIndex?: number;
   loading?: AppPageModule | null;
   loadings?: readonly (AppPageModule | null | undefined)[] | null;
+  name?: string;
+  ownerTreePosition?: number | null;
   page?: AppPageModule | null;
+  routeSegments?: readonly string[] | null;
   slotPatternParts?: readonly string[] | null;
   slotParamNames?: readonly string[] | null;
 };
@@ -184,6 +191,8 @@ export type DispatchAppPageOptions<TRoute extends AppPageDispatchRoute> = {
   ensureRouteLoaded?: (route: TRoute) => unknown;
   fetchCache?: FetchCacheMode | null;
   findIntercept: (pathname: string) => AppPageDispatchIntercept | null;
+  /** This request's intercept, which dispatch resolves once before rendering. */
+  interceptState?: AppPageInterceptState<TRoute, unknown>;
   formState?: ReactFormState | null;
   actionError?: unknown;
   actionFailed?: boolean;
@@ -200,7 +209,6 @@ export type DispatchAppPageOptions<TRoute extends AppPageDispatchRoute> = {
   hasGenerateStaticParams: boolean;
   /** Whether any segment of the route exports `generateStaticParams`. */
   hasAnyGenerateStaticParams: boolean;
-  hasCustomGlobalError?: boolean;
   hasPageDefaultExport: boolean;
   hasPageModule: boolean;
   handlerStart: number;