vinext 0.2.0 → 1.0.0-beta.0

package/dist/plugins/sass.js

@@ -1,3 +1,4 @@
+import { markCssUrlAssetReferences, rebaseCssUrlAssetReferences } from "../build/css-url-assets.js";
 import { createRequire } from "node:module";
 import fs from "node:fs";
 import path from "node:path";
@@ -75,6 +76,78 @@ function createSassTildeImporter(root) {
 		}
 	} };
 }
+function sassStylesheetCandidates(importPath) {
+	const extension = path.extname(importPath);
+	const directory = path.dirname(importPath);
+	const basename = path.basename(importPath, extension);
+	const candidates = [];
+	const extensions = extension ? [extension] : [
+		".scss",
+		".sass",
+		".css"
+	];
+	for (const candidateExtension of extensions) {
+		const basePath = extension ? importPath : `${importPath}${candidateExtension}`;
+		candidates.push(basePath);
+		candidates.push(path.join(directory, `_${basename}${candidateExtension}`));
+	}
+	for (const candidateExtension of extensions) {
+		candidates.push(path.join(importPath, `index${candidateExtension}`));
+		candidates.push(path.join(importPath, `_index${candidateExtension}`));
+	}
+	return candidates;
+}
+function deriveSassNamespace(importUrl) {
+	const parts = importUrl.replaceAll("\\", "/").replace(/\/$/, "").split("/");
+	let basename = parts.pop() ?? "stylesheet";
+	basename = basename.replace(/^_/, "").replace(/\..*$/, "");
+	if (basename === "index" && parts.length > 0) basename = (parts.pop() ?? basename).replace(/^_/, "").replace(/\..*$/, "");
+	return basename;
+}
+/**
+* Preserve source-asset provenance for `url()` references inside imported Sass
+* partials. Vite's transform hook only sees the entry stylesheet after Sass has
+* flattened its imports, at which point relative URLs from a partial have lost
+* the partial's source filename. Marking the partial before compilation keeps
+* byte-identical assets associated with their original basenames.
+*/
+function createSassCssUrlAssetImporter() {
+	const markedStylesheets = /* @__PURE__ */ new Map();
+	const importUrlPrefix = "vinext-css-url-asset:";
+	const prepareStylesheet = (filename, entryDirectory) => {
+		const contents = fs.readFileSync(filename, "utf8");
+		const marked = markCssUrlAssetReferences(rebaseCssUrlAssetReferences(contents, path.dirname(filename), entryDirectory) ?? contents, filename);
+		if (marked === null) return null;
+		const extension = path.extname(filename).toLowerCase();
+		return {
+			contents: rewriteImports(marked, filename, entryDirectory),
+			syntax: extension === ".sass" ? "indented" : extension === ".css" ? "css" : "scss"
+		};
+	};
+	const rewriteImports = (source, filename, entryDirectory = path.dirname(filename)) => source.replace(/(@(import|use|forward)\s+)(["'])(\.[^"']+)\3([^;]*;?)/g, (match, prefix, rule, quote, importUrl, suffix) => {
+		const importPath = path.resolve(path.dirname(filename), importUrl);
+		for (const candidate of sassStylesheetCandidates(importPath)) {
+			if (!fs.statSync(candidate, { throwIfNoEntry: false })?.isFile()) continue;
+			const prepared = prepareStylesheet(candidate, entryDirectory);
+			if (prepared === null) return match;
+			const canonicalUrl = pathToFileURL(candidate);
+			markedStylesheets.set(canonicalUrl.href, prepared);
+			const namespace = rule === "use" && !/\bas\s+(?:\*|[-\w]+)/.test(suffix) ? ` as ${deriveSassNamespace(importUrl)}` : "";
+			return `${prefix}${quote}${importUrlPrefix}${encodeURIComponent(candidate)}${quote}${namespace}${suffix}`;
+		}
+		return match;
+	});
+	return {
+		canonicalize(url) {
+			if (!url.startsWith(importUrlPrefix)) return null;
+			return pathToFileURL(decodeURIComponent(url.slice(21)));
+		},
+		load(canonicalUrl) {
+			return markedStylesheets.get(canonicalUrl.href) ?? null;
+		},
+		rewriteImports
+	};
+}
 function buildSassPreprocessorOptions(sassOptions) {
 	if (!sassOptions || typeof sassOptions !== "object") return void 0;
 	const { prependData, additionalData, includePaths, loadPaths, ...rest } = sassOptions;
@@ -265,4 +338,4 @@ function createSassAwareFileSystemLoader() {
 	};
 }
 //#endregion
-export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassTildeImporter };
+export { buildSassPreprocessorOptions, createSassAwareFileSystemLoader, createSassCssUrlAssetImporter, createSassTildeImporter };

package/dist/plugins/styled-jsx.d.ts

@@ -0,0 +1,16 @@
+import { Plugin } from "vite";
+
+//#region src/plugins/styled-jsx.d.ts
+type NextSwcModule = {
+  loadBindings(): Promise<unknown>;
+  transform(source: string, options: Record<string, unknown>): Promise<{
+    code: string;
+    map?: string;
+  }>;
+};
+type StyledJsxPluginOptions = {
+  importModule?: (url: string) => Promise<NextSwcModule>;
+};
+declare function createStyledJsxPlugin(initialProjectRoot: string, options?: StyledJsxPluginOptions): Plugin;
+//#endregion
+export { createStyledJsxPlugin };

package/dist/plugins/styled-jsx.js

@@ -0,0 +1,149 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { parseAst } from "vite";
+import { pathToFileURL } from "node:url";
+//#region src/plugins/styled-jsx.ts
+const STYLED_JSX_IMPORT_RE = /^styled-jsx(?:\/.*)?$/;
+const NODE_MODULES_RE = /[\\/]node_modules[\\/]/;
+const STYLED_JSX_SOURCE_RE = /(?:<style\b|from\s+["']styled-jsx\/css["']|require\s*\(\s*["']styled-jsx\/css["']\s*\))/;
+const STYLED_JSX_CSS_RE = /(?:from\s+["']styled-jsx\/css["']|require\s*\(\s*["']styled-jsx\/css["']\s*\))/;
+function hasStyledJsxTag(source, id) {
+	const cleanId = id.split("?")[0];
+	const extension = path.extname(cleanId);
+	const lang = extension === ".ts" || extension === ".mts" || extension === ".cts" ? "ts" : "tsx";
+	let ast;
+	try {
+		ast = parseAst(source, { lang });
+	} catch {
+		return false;
+	}
+	const pending = [ast];
+	const visited = /* @__PURE__ */ new Set();
+	while (pending.length > 0) {
+		const value = pending.pop();
+		if (!value || typeof value !== "object" || visited.has(value)) continue;
+		visited.add(value);
+		const node = value;
+		if (node.type === "JSXOpeningElement") {
+			const name = node.name;
+			if (name?.type === "JSXIdentifier" && name.name === "style") {
+				if (node.attributes?.some((attribute) => {
+					if (attribute.type !== "JSXAttribute") return false;
+					const attributeName = attribute.name;
+					return attributeName?.type === "JSXIdentifier" && attributeName.name === "jsx";
+				})) return true;
+			}
+		}
+		for (const child of Object.values(node)) if (Array.isArray(child)) pending.push(...child);
+		else if (child && typeof child === "object") pending.push(child);
+	}
+	return false;
+}
+function createProjectRequire(projectRoot) {
+	return createRequire(path.join(projectRoot, "package.json"));
+}
+function resolveNextRequire(projectRoot) {
+	try {
+		return createRequire(createProjectRequire(projectRoot).resolve("next/package.json"));
+	} catch {
+		return null;
+	}
+}
+function parserOptions(id) {
+	const extension = path.extname(id.split("?")[0]);
+	if (extension === ".ts" || extension === ".tsx") return {
+		syntax: "typescript",
+		tsx: extension === ".tsx",
+		decorators: true
+	};
+	return {
+		syntax: "ecmascript",
+		jsx: true
+	};
+}
+function createStyledJsxPlugin(initialProjectRoot, options = {}) {
+	let projectRoot = initialProjectRoot;
+	let development = false;
+	let nextRequire;
+	let compilerPromise = null;
+	const importModule = options.importModule ?? ((url) => import(url));
+	function getNextRequire() {
+		nextRequire ??= resolveNextRequire(projectRoot);
+		return nextRequire;
+	}
+	async function getCompiler() {
+		if (!compilerPromise) {
+			const requireFromNext = getNextRequire();
+			if (!requireFromNext) throw new Error("[vinext] styled-jsx requires an installed next package so vinext can use its matching compiler.");
+			compilerPromise = importModule(pathToFileURL(requireFromNext.resolve("next/dist/build/swc")).href).then(async (compiler) => {
+				await compiler.loadBindings();
+				return compiler;
+			});
+		}
+		return compilerPromise;
+	}
+	return {
+		name: "vinext:styled-jsx",
+		enforce: "pre",
+		configResolved(config) {
+			development = config.command === "serve";
+			if (config.root !== projectRoot) {
+				projectRoot = config.root;
+				nextRequire = void 0;
+				compilerPromise = null;
+			}
+		},
+		resolveId: {
+			filter: { id: STYLED_JSX_IMPORT_RE },
+			handler(source) {
+				try {
+					return getNextRequire()?.resolve(source) ?? null;
+				} catch {}
+				try {
+					return createProjectRequire(projectRoot).resolve(source);
+				} catch {
+					return null;
+				}
+			}
+		},
+		transform: {
+			filter: {
+				id: {
+					include: /\.[cm]?[jt]sx?(?:\?.*)?$/,
+					exclude: NODE_MODULES_RE
+				},
+				code: STYLED_JSX_SOURCE_RE
+			},
+			async handler(source, id) {
+				if (NODE_MODULES_RE.test(id.split("?")[0])) return null;
+				const hasStyledJsxCss = STYLED_JSX_CSS_RE.test(source);
+				const hasStyledJsxElement = !hasStyledJsxCss && hasStyledJsxTag(source, id);
+				if (!hasStyledJsxCss && !hasStyledJsxElement) return null;
+				if (!getNextRequire()) throw new Error("[vinext] styled-jsx requires an installed next package so vinext can use its matching compiler.");
+				const result = await (await getCompiler()).transform(source, {
+					filename: id.split("?")[0],
+					sourceMaps: true,
+					module: { type: "es6" },
+					styledJsx: { useLightningcss: false },
+					jsc: {
+						parser: parserOptions(id),
+						transform: {
+							react: {
+								runtime: "automatic",
+								development,
+								useBuiltins: true
+							},
+							optimizer: { simplify: false }
+						}
+					}
+				});
+				return {
+					code: result.code,
+					map: result.map ?? null
+				};
+			}
+		}
+	};
+}
+//#endregion
+export { createStyledJsxPlugin };

package/dist/routing/app-route-graph.js

@@ -1,5 +1,5 @@
-import { decodeRouteSegment, isInvisibleSegment, sortRoutes } from "./utils.js";
 import { normalizePathSeparators } from "../utils/path.js";
+import { decodeRouteSegment, isInvisibleSegment, sortRoutes } from "./utils.js";
 import { findFileWithExts, scanWithExtensions } from "./file-matcher.js";
 import { validateRoutePatterns } from "./route-validation.js";
 import { compareStrings } from "../utils/compare.js";
@@ -440,9 +440,9 @@ function validatePageRouteConflicts(routes, appDir) {
 	}
 }
 function formatAppFilePath(filePath, appDir) {
-	const relativePath = path.relative(appDir, filePath).replace(/\\/g, "/");
+	const relativePath = normalizePathSeparators(path.relative(appDir, filePath));
 	const parsedPath = path.parse(relativePath);
-	const withoutExtension = path.join(parsedPath.dir, parsedPath.name).replace(/\\/g, "/");
+	const withoutExtension = normalizePathSeparators(path.join(parsedPath.dir, parsedPath.name));
 	return withoutExtension.startsWith("/") ? withoutExtension : `/${withoutExtension}`;
 }
 /**
@@ -1180,9 +1180,7 @@ function findSlotRootPage(slotDir, matcher) {
 * default component, intercepting route, or nested page-backed sub-route.
 *
 * `dir` and `appDir` must be forward-slash. The slot directory is built from
-* `dir` with `path.posix.join`, and the owner segments and slot key come from
-* `path.posix.relative(appDir, …)`, which only yields a forward-slash relative
-* path when both operands already are.
+* `dir` with `path.posix.join`.
 */
 function discoverParallelSlots(dir, appDir, matcher, includeNestedOnlySlots = false) {
 	const entries = readDirEntriesCached(dir, matcher);
@@ -1197,12 +1195,12 @@ function discoverParallelSlots(dir, appDir, matcher, includeNestedOnlySlots = fa
 		const interceptingRoutes = discoverInterceptingRoutes(slotDir, dir, appDir, matcher);
 		const hasNestedPages = includeNestedOnlySlots && findSlotSubPages(slotDir, matcher).length > 0;
 		if (!pagePath && !defaultPath && interceptingRoutes.length === 0 && !hasNestedPages) continue;
-		const ownerSegments = path.posix.relative(appDir, dir).split("/").filter((segment) => segment.length > 0);
+		const ownerSegments = path.relative(appDir, dir).split(path.sep).filter((segment) => segment.length > 0);
 		const ownerTreePath = createAppRouteGraphTreePath(ownerSegments, ownerSegments.length);
 		const configLayoutPaths = findSlotConfigLayoutPaths(slotDir, pagePath, matcher);
 		slots.push({
 			id: createAppRouteGraphSlotId(slotName, ownerTreePath),
-			key: `${slotName}@${path.posix.relative(appDir, slotDir)}`,
+			key: `${slotName}@${normalizePathSeparators(path.relative(appDir, slotDir))}`,
 			name: slotName,
 			ownerDir: slotDir,
 			ownerTreePath,
@@ -1262,8 +1260,7 @@ function isInterceptionMarkerDir(name) {
 * They intercept navigation to another route and render within the slot instead.
 *
 * `slotDir`, `routeDir`, and `appDir` must be forward-slash. They are passed
-* down to `path.posix.join` and `path.posix.relative` when building the
-* intercept page paths and target patterns.
+* down to `path.posix.join` when building the intercept page paths.
 *
 * @param slotDir - The parallel slot directory (e.g. app/feed/@modal)
 * @param routeDir - The directory of the route that owns this slot (e.g. app/feed)
@@ -1283,13 +1280,17 @@ function discoverInterceptingRoutes(slotDir, routeDir, appDir, matcher) {
 * Sibling intercepts use the same conventions and target-computation logic as
 * slot intercepts, but their intercepting page replaces the full page response
 * (not a slot) during soft navigation.
+*
+* `appDir` and each route's `pagePath` / `routePath` must be forward-slash. The
+* owner directories are derived from `pagePath` / `routePath` and matched
+* against `appDir`-relative paths built with `path.posix.*`.
 */
 function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 	const routesByDir = /* @__PURE__ */ new Map();
 	for (const route of routes) {
 		const filePath = route.pagePath ?? route.routePath;
 		if (!filePath) continue;
-		const routeDir = normalizePathSeparators(path.dirname(filePath));
+		const routeDir = path.posix.dirname(filePath);
 		if (!routesByDir.has(routeDir)) routesByDir.set(routeDir, route);
 	}
 	function walk(dir) {
@@ -1303,7 +1304,7 @@ function discoverSiblingInterceptingRoutes(routes, appDir, matcher) {
 			if (!entry.isDirectory()) continue;
 			if (entry.name.startsWith("_")) continue;
 			if (entry.name.startsWith("@")) continue;
-			const childDir = path.join(dir, entry.name);
+			const childDir = path.posix.join(dir, entry.name);
 			const marker = matchInterceptConvention(entry.name);
 			if (marker) {
 				const restOfName = entry.name.slice(marker.prefix.length);
@@ -1370,8 +1371,7 @@ function findOwnerRouteForDir(dir, appDir, routes, routesByDir) {
 * intercepting route directories.
 *
 * `currentDir`, `routeDir`, and `appDir` must be forward-slash. `currentDir`
-* descends with `path.posix.join` and all three reach the `path.posix.join` /
-* `path.posix.relative` calls that build the intercept page paths and patterns.
+* descends with `path.posix.join` when building the intercept page paths.
 */
 function scanForInterceptingPages(currentDir, routeDir, appDir, results, matcher) {
 	if (!fs.existsSync(currentDir)) return;
@@ -1397,6 +1397,12 @@ function matchInterceptConvention(name) {
 /**
 * Collect page.tsx files inside an intercepting route directory tree
 * and compute their target URL patterns.
+*
+* `currentDir`, `interceptRoot`, `routeDir`, `appDir`, and `interceptParentDir`
+* must all be forward-slash. `currentDir` descends with `path.posix.join` and
+* its `findFile` results become the stored layout/page paths. The others are
+* relativized against `appDir` (and each other) to derive the intercept page
+* segments and URL patterns.
 */
 function collectInterceptingPages(currentDir, interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, parentLayoutPaths = []) {
 	const currentLayoutPath = findFile(currentDir, "layout", matcher);
@@ -1407,7 +1413,7 @@ function collectInterceptingPages(currentDir, interceptRoot, convention, interce
 		if (targetPattern) {
 			const sourceMatchPattern = computeInterceptSourceMatchPattern(interceptParentDir, appDir);
 			results.push({
-				branchSegments: [interceptSegment, ...normalizePathSeparators(path.relative(interceptRoot, path.dirname(page))).split("/").filter(Boolean)],
+				branchSegments: [interceptSegment, ...path.relative(interceptRoot, path.dirname(page)).split(path.sep).filter(Boolean)],
 				convention,
 				layoutPaths: [...layoutPaths],
 				layoutSegments: layoutPaths.map((layoutPath) => {
@@ -1426,7 +1432,7 @@ function collectInterceptingPages(currentDir, interceptRoot, convention, interce
 	for (const entry of entries) {
 		if (!entry.isDirectory()) continue;
 		if (entry.name.startsWith("_")) continue;
-		collectInterceptingPages(path.join(currentDir, entry.name), interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, layoutPaths);
+		collectInterceptingPages(path.posix.join(currentDir, entry.name), interceptRoot, convention, interceptSegment, routeDir, appDir, interceptParentDir, results, matcher, layoutPaths);
 	}
 }
 /**

package/dist/routing/file-matcher.d.ts

@@ -39,11 +39,18 @@ declare function findFileWithExts(dir: string, name: string, matcher: ValidFileM
  *  1. User-configured pageExtensions go first (each prefixed with `.`) so
  *     the user's priority wins. e.g. `.platform.tsx` resolves before `.tsx`.
  *  2. Vite's defaults follow, with duplicates removed.
+ *  3. `.cjs`/`.cts` go last (lowest priority). Neither Vite's defaults nor the
+ *     user's pageExtensions include them, but `vinext init` renames CJS config
+ *     files (e.g. `tailwind.config.js` → `tailwind.config.cjs`) when it adds
+ *     `"type": "module"`, and app code imports those extensionlessly
+ *     (`import cfg from "../tailwind.config"`). Without these, the bundle fails
+ *     with "[UNRESOLVED_IMPORT] Could not resolve '../tailwind.config'".
  *
  * The user's pageExtensions retain their relative order, which is what
  * Next.js / Turbopack do via the `resolveExtensions` config option.
  *
- * See: cloudflare/vinext#1502
+ * See: cloudflare/vinext#1502 for page-extension ordering, and
+ * cloudflare/vinext#2435 for extensionless `.cjs` config imports.
  */
 declare function buildViteResolveExtensions(pageExtensions?: readonly string[] | null, viteDefaults?: readonly string[]): string[];
 /**

package/dist/routing/file-matcher.js

@@ -1,5 +1,5 @@
-import { escapeRegExp } from "../utils/regex.js";
 import { normalizePathSeparators } from "../utils/path.js";
+import { escapeRegExp } from "../utils/regex.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { glob } from "node:fs/promises";
@@ -91,11 +91,18 @@ function findFileWithExts(dir, name, matcher) {
 *  1. User-configured pageExtensions go first (each prefixed with `.`) so
 *     the user's priority wins. e.g. `.platform.tsx` resolves before `.tsx`.
 *  2. Vite's defaults follow, with duplicates removed.
+*  3. `.cjs`/`.cts` go last (lowest priority). Neither Vite's defaults nor the
+*     user's pageExtensions include them, but `vinext init` renames CJS config
+*     files (e.g. `tailwind.config.js` → `tailwind.config.cjs`) when it adds
+*     `"type": "module"`, and app code imports those extensionlessly
+*     (`import cfg from "../tailwind.config"`). Without these, the bundle fails
+*     with "[UNRESOLVED_IMPORT] Could not resolve '../tailwind.config'".
 *
 * The user's pageExtensions retain their relative order, which is what
 * Next.js / Turbopack do via the `resolveExtensions` config option.
 *
-* See: cloudflare/vinext#1502
+* See: cloudflare/vinext#1502 for page-extension ordering, and
+* cloudflare/vinext#2435 for extensionless `.cjs` config imports.
 */
 function buildViteResolveExtensions(pageExtensions, viteDefaults = [
 	".mjs",
@@ -109,7 +116,12 @@ function buildViteResolveExtensions(pageExtensions, viteDefaults = [
 	const dotted = normalizePageExtensions(pageExtensions).map((ext) => `.${ext}`);
 	const seen = /* @__PURE__ */ new Set();
 	const result = [];
-	for (const ext of [...dotted, ...viteDefaults]) {
+	for (const ext of [
+		...dotted,
+		...viteDefaults,
+		".cjs",
+		".cts"
+	]) {
 		if (seen.has(ext)) continue;
 		seen.add(ext);
 		result.push(ext);

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

@@ -1,6 +1,5 @@
 import { VINEXT_CLIENT_REUSE_MANIFEST_HEADER, VINEXT_PARAMS_HEADER, VINEXT_RSC_REDIRECT_HEADER } from "./headers.js";
 import { AppElementsWire } from "./app-elements-wire.js";
-import { APP_RSC_RENDER_MODE_REFRESH_PRESERVE_UI } from "./app-rsc-render-mode.js";
 import { getMountedSlotIdsHeader, resolveVisitedResponseInterceptionContext } from "./app-elements.js";
 import { AppRouterContext } from "../shims/internal/app-router-context.js";
 import { installWindowNext, setWindowNextInternalSourcePage } from "../client/window-next.js";
@@ -13,7 +12,7 @@ import { DevRecoveryBoundary, GlobalErrorBoundary, RedirectBoundary } from "../s
 import { beginAppRouterScrollIntent, consumeAppRouterScrollIntent } from "../shims/app-router-scroll-state.js";
 import { AppRouterScrollCommitProvider } from "../shims/app-router-scroll.js";
 import { BfcacheStateKeyMapContext, ElementsContext, Slot } from "../shims/slot.js";
-import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, VINEXT_RSC_CONTENT_TYPE, createRscRequestHeaders, createRscRequestUrl, getVinextRscCompatibilityId } from "./app-rsc-cache-busting.js";
+import { VINEXT_RSC_COMPATIBILITY_ID_HEADER, VINEXT_RSC_CONTENT_TYPE, createRscRequestHeaders, createRscRequestUrl, getVinextRscCompatibilityId, stripRscCacheBustingSearchParam } from "./app-rsc-cache-busting.js";
 import { getNavigationRuntime, registerNavigationRuntimeBootstrap, registerNavigationRuntimeFunctions } from "../client/navigation-runtime.js";
 import { notifyAppRouterTransitionStart } from "../client/instrumentation-client-state.js";
 import "../client/instrumentation-client.js";
@@ -25,7 +24,8 @@ import { readHistoryStatePreviousNextUrl } from "./app-history-state.js";
 import { AppBrowserMpaNavigationScheduler } from "./app-browser-mpa-navigation.js";
 import { blockDangerousStreamedRscRedirect } from "./app-browser-rsc-redirect.js";
 import { navigationPlanner } from "./navigation-planner.js";
-import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, getClientNavigationRenderContext, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidatePrefetchCache, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, useRouter } from "../shims/navigation.js";
+import { resolveHybridClientRewriteHref } from "../shims/internal/hybrid-client-route-owner.js";
+import { DYNAMIC_NAVIGATION_CACHE_TTL, PREFETCH_CACHE_TTL, __basePath, appRouterInstance, commitClientNavigationState, consumePrefetchResponseForNavigation, createCachedRscResponseSnapshot, createClientNavigationRenderSnapshot, createSnapshotPathAndSearch, deletePrefetchResponseSnapshot, getClientNavigationRenderContext, getMountedSlotsHeader, getPrefetchCache, hasPrefetchCacheEntryForNavigation, invalidatePrefetchCache, pushHistoryStateWithoutNotify, replaceClientParamsWithoutNotify, replaceHistoryStateWithoutNotify, resolvePrefetchCacheEntryMountedSlotsHeader, restoreRscResponse, saveScrollPosition, seedPrefetchResponseSnapshot, setClientParams, setMountedSlotsHeader, setPendingPathname, useRouter } from "../shims/navigation.js";
 import { chunksToReadableStream, createProgressiveRscStream, getVinextBrowserGlobal } from "./app-browser-stream.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 } from "./app-browser-navigation-controller.js";
@@ -193,6 +193,21 @@ function clearClientNavigationCaches() {
 	clearPrefetchState();
 	historyController.invalidateRestorableClientState();
 }
+function normalizeBrowserRscUrlForReuse(url) {
+	if (!url) return null;
+	try {
+		const parsed = new URL(url, window.location.origin);
+		stripRscCacheBustingSearchParam(parsed);
+		return `${parsed.pathname}${parsed.search}`;
+	} catch {
+		return null;
+	}
+}
+function isAlternatePrefetchResponseUrl(responseUrl, additionalRscUrls) {
+	const normalizedResponseUrl = normalizeBrowserRscUrlForReuse(responseUrl);
+	if (normalizedResponseUrl === null) return false;
+	return additionalRscUrls.some((additionalRscUrl) => normalizeBrowserRscUrlForReuse(additionalRscUrl) === normalizedResponseUrl);
+}
 function isSettledPrefetchCacheEntry(entry) {
 	return entry.outcome === "cache-seeded" && entry.pending === void 0 && entry.snapshot !== void 0;
 }
@@ -242,6 +257,7 @@ async function learnOptimisticRouteTemplatesFromPrefetchCache(options) {
 		if (optimisticRouteTemplateSources.has(sourceKey)) continue;
 		if (optimisticRouteTemplateLearning.has(sourceKey)) continue;
 		if (!isSettledPrefetchCacheEntry(entry)) continue;
+		if (entry.prefetchKind === "route-tree") continue;
 		const promise = learnOptimisticRouteTemplateFromPrefetch({
 			cacheKey,
 			entry,
@@ -545,9 +561,17 @@ function BrowserRoot({ hydrationCachePublication, initialElements, initialNaviga
 		setWindowNextInternalSourcePage(AppElementsWire.readMetadata(treeState.elements).sourcePage);
 	}, [treeState.elements]);
 	useLayoutEffect(() => {
-		setMountedSlotsHeader(getMountedSlotIdsHeader(stateRef.current.elements));
+		const previousMountedSlotsHeader = getMountedSlotsHeader();
+		const nextMountedSlotsHeader = getMountedSlotIdsHeader(stateRef.current.elements);
+		setMountedSlotsHeader(nextMountedSlotsHeader);
 		removeStylesheetLinksCoveredByInlineCss();
-		getNavigationRuntime()?.functions.pingVisibleLinks?.();
+		if (previousMountedSlotsHeader === nextMountedSlotsHeader) return;
+		const pingTimer = window.setTimeout(() => {
+			getNavigationRuntime()?.functions.pingVisibleLinks?.();
+		}, 0);
+		return () => {
+			window.clearTimeout(pingTimer);
+		};
 	}, [treeState.elements]);
 	useLayoutEffect(() => {
 		if (treeState.renderId !== 0) return;
@@ -748,14 +772,14 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 			...initialRscBootstrap?.dynamicStaleTimeSeconds !== void 0 ? { dynamicStaleTimeSeconds: initialRscBootstrap.dynamicStaleTimeSeconds } : {},
 			mountedSlotsHeader,
 			paramsHeader: encodeURIComponent(JSON.stringify(initialParams)),
+			renderedPathAndSearch: null,
 			url: rscUrl
 		};
 		const fallbackTtlMs = initialRscBootstrap?.initialCacheKind === "static" ? PREFETCH_CACHE_TTL : DYNAMIC_NAVIGATION_CACHE_TTL;
 		hydrationCachePublication.publish(() => {
 			if (cacheGeneration !== clientNavigationCacheGeneration) return () => {};
 			if (isCacheRestorableAppPayloadMetadata(metadata)) return storeVisitedResponseSnapshot(rscUrl, metadata.interceptionContext, snapshot, initialParams, fallbackTtlMs, mountedSlotsHeader);
-			seedPrefetchResponseSnapshot(rscUrl, snapshot, metadata.interceptionContext, mountedSlotsHeader, fallbackTtlMs);
-			return () => deletePrefetchResponseSnapshot(rscUrl, snapshot, metadata.interceptionContext);
+			return storeVisitedResponseSnapshot(rscUrl, metadata.interceptionContext, snapshot, initialParams, fallbackTtlMs, mountedSlotsHeader, elements);
 		});
 	}).catch(() => {});
 	historyController.writeBootstrapHistoryMetadata();
@@ -863,10 +887,11 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 					const shouldBypassNavigationCache = earlyIntentDecision?.kind === "flightNavigation" && earlyIntentDecision.bypassNavigationCache;
 					const requestHeaders = createRscRequestHeaders({
 						interceptionContext: requestInterceptionContext,
-						mountedSlotsHeader,
-						renderMode: navigationKind === "refresh" ? APP_RSC_RENDER_MODE_REFRESH_PRESERVE_UI : void 0
+						mountedSlotsHeader
 					});
 					const rscUrl = await createRscRequestUrl(url.pathname + url.search, requestHeaders);
+					const rewrittenNavigationHref = navigationKind === "navigate" ? resolveHybridClientRewriteHref(currentHref, __basePath) : null;
+					const additionalPrefetchRscUrls = rewrittenNavigationHref && rewrittenNavigationHref !== currentHref ? [await createRscRequestUrl(rewrittenNavigationHref, requestHeaders)] : [];
 					const visitedResponseCandidate = shouldBypassNavigationCache ? {
 						cacheKey: AppElementsWire.encodeCacheKey(rscUrl, requestInterceptionContext),
 						entry: null,
@@ -883,7 +908,10 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 						visitedResponse
 					});
 					let routeManifest = navigationKind === "navigate" ? getBrowserRouteManifest() : null;
-					const hasPrefetchCandidate = prefetchProbeDecision.kind === "probe" && hasPrefetchCacheEntryForNavigation(rscUrl, requestInterceptionContext, mountedSlotsHeader, { notifyInvalidation: false });
+					const hasPrefetchCandidate = prefetchProbeDecision.kind === "probe" && hasPrefetchCacheEntryForNavigation(rscUrl, requestInterceptionContext, mountedSlotsHeader, {
+						additionalRscUrls: additionalPrefetchRscUrls,
+						notifyInvalidation: false
+					});
 					const reuseDecision = navigationPlanner.classifyNavigationReuse({
 						bypassNavigationCache: shouldBypassNavigationCache,
 						navigationKind,
@@ -941,12 +969,15 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 					let navResponseUrl = null;
 					let fallbackReuseDecision = reuseDecision;
 					if (reuseDecision.kind === "consumePrefetch") {
-						const prefetchedResponse = await consumePrefetchResponseForNavigation(rscUrl, requestInterceptionContext, mountedSlotsHeader, { shouldConsume: () => browserNavigationController.isCurrentNavigation(navId) });
+						const prefetchedResponse = await consumePrefetchResponseForNavigation(rscUrl, requestInterceptionContext, mountedSlotsHeader, {
+							additionalRscUrls: additionalPrefetchRscUrls,
+							shouldConsume: () => browserNavigationController.isCurrentNavigation(navId)
+						});
 						if (!browserNavigationController.isCurrentNavigation(navId)) return;
 						if (prefetchedResponse) {
 							navResponse = restoreRscResponse(prefetchedResponse, false);
 							navResponseExpiresAt = prefetchedResponse.expiresAt;
-							navResponseUrl = prefetchedResponse.url;
+							navResponseUrl = isAlternatePrefetchResponseUrl(prefetchedResponse.url, additionalPrefetchRscUrls) ? rscUrl : prefetchedResponse.url;
 						}
 						if (!navResponse) {
 							routeManifest = navigationKind === "navigate" ? getBrowserRouteManifest() : null;
@@ -1053,7 +1084,6 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 						committedState = state;
 						if (activeNavigationAbortController === navigationAbortController) activeNavigationAbortController = null;
 					}, detachedNavigationCommits ? "authoritative" : void 0) !== "committed") return;
-					if (!browserNavigationController.isCurrentNavigation(navId)) return;
 					try {
 						const renderedElements = await rscPayload;
 						if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
@@ -1074,7 +1104,7 @@ function bootstrapHydration(rscStream, devErrorOverlay, initialRscBootstrap) {
 						if (isCacheRestorableAppPayloadMetadata(metadata)) {
 							if (navigationCacheGeneration !== clientNavigationCacheGeneration) return;
 							storeVisitedResponseSnapshot(rscUrl, interceptionContext, snapshot, navParams, PREFETCH_CACHE_TTL, mountedSlotsHeader);
-						} else if (committedState !== null && getMountedSlotIdsHeader(committedState.elements) === null) {
+						} else if (committedState !== null) {
 							const state = committedState;
 							const committedElements = {
 								...state.elements,

package/dist/server/app-browser-navigation-controller.js

@@ -449,8 +449,11 @@ function createAppBrowserNavigationController(deps = {}) {
 				return;
 			}
 			if (latestApproval.approvedCommit) {
-				dispatchSynchronousVisibleCommit(latestApproval.approvedCommit);
-				syncHistoryStatePreviousNextUrl(latestApproval.approvedCommit.previousNextUrl, latestApproval.approvedCommit.action.bfcacheIds);
+				const approvedRevalidationCommit = latestApproval.approvedCommit;
+				startTransition(() => {
+					dispatchSynchronousVisibleCommit(approvedRevalidationCommit);
+				});
+				syncHistoryStatePreviousNextUrl(approvedRevalidationCommit.previousNextUrl, approvedRevalidationCommit.action.bfcacheIds);
 			} else notifyDiscardedServerActionRevalidation(lifecycleOptions);
 		} else if (decision.disposition === "no-commit") notifyDiscardedServerActionRevalidation(lifecycleOptions);
 		if (returnValue) {

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

@@ -1,3 +1,4 @@
+import { hasBasePath } from "../utils/base-path.js";
 import { ACTION_REDIRECT_HEADER, ACTION_REDIRECT_STATUS_HEADER } from "./headers.js";
 import { DANGEROUS_URL_BLOCK_MESSAGE, isDangerousScheme } from "../shims/url-safety.js";
 import { AppElementsWire } from "./app-elements-wire.js";
@@ -9,7 +10,7 @@ import { applyServerActionResultDecision } from "./app-browser-server-action-nav
 import { throwOnServerActionNotFound } from "./server-action-not-found.js";
 import { createFromFetch, createTemporaryReferenceSet, encodeReply } from "@vitejs/plugin-rsc/browser";
 //#region src/server/app-browser-server-action-client.ts
-function resolveActionRedirectTarget(response, performHardNavigation) {
+function resolveActionRedirectTarget(response, basePath, performHardNavigation) {
 	const actionRedirect = response.headers.get(ACTION_REDIRECT_HEADER);
 	if (!actionRedirect) return null;
 	if (isDangerousScheme(actionRedirect)) {
@@ -25,7 +26,7 @@ function resolveActionRedirectTarget(response, performHardNavigation) {
 			if (!baseDir.endsWith("/")) baseDir += "/";
 			redirectUrl = new URL(actionRedirect, `${baseParsed.origin}${baseDir}${baseParsed.search}`);
 		}
-		if (redirectUrl.origin !== window.location.origin) {
+		if (redirectUrl.origin !== window.location.origin || basePath !== "" && !hasBasePath(redirectUrl.pathname, basePath)) {
 			performHardNavigation(actionRedirect);
 			return null;
 		}
@@ -60,6 +61,7 @@ async function invokeClientServerAction(id, args, actionInitiation, deps) {
 		actionId: id,
 		basePath: deps.basePath,
 		elements: actionInitiation.routerState.elements,
+		interceptionContext: actionInitiation.routerState.interception !== null ? actionInitiation.routerState.interceptionContext : null,
 		previousNextUrl: actionInitiation.routerState.previousNextUrl
 	}).headers;
 	const fetchResponse = await fetch(createServerActionRequestUrl(actionInitiation.path), {
@@ -69,7 +71,7 @@ async function invokeClientServerAction(id, args, actionInitiation, deps) {
 	});
 	throwOnServerActionNotFound(fetchResponse, id);
 	const hasActionRedirect = fetchResponse.headers.has(ACTION_REDIRECT_HEADER);
-	const actionRedirectTarget = resolveActionRedirectTarget(fetchResponse, (url, historyMode) => deps.performHardNavigation(url, historyMode));
+	const actionRedirectTarget = resolveActionRedirectTarget(fetchResponse, deps.basePath, (url, historyMode) => deps.performHardNavigation(url, historyMode));
 	if (hasActionRedirect && !actionRedirectTarget) return void 0;
 	const actionResultFacts = createServerActionResultFacts({
 		actionRedirectHref: actionRedirectTarget?.href ?? null,

package/dist/server/app-browser-state.d.ts

@@ -107,6 +107,7 @@ type ResolveServerActionRequestStateOptions = {
   actionId: string;
   basePath: string;
   elements: AppElements;
+  interceptionContext?: string | null;
   previousNextUrl: string | null;
 };
 type ResolveServerActionRequestStateResult = {