vinext 1.2.1 → 1.3.0

package/dist/init.js

@@ -2,6 +2,7 @@ import path, { toSlash } from "./deps/.pnpm/pathslash@0.1.0/deps/pathslash/dist/
 import { detectPackageManager, detectPackageManagerName, detectProject, ensureESModule, findViteConfigPath, hasViteConfig, renameCJSConfigs } from "./utils/project.js";
 import { compactResourceName, cssModulesConfigSource, findConfigKeepingWorkerName, setupCloudflarePlatform, updateViteConfigForCssModules, usesCommonJsViteConfig, validateCloudflarePlatformSetup } from "./init-cloudflare.js";
 import { getReactUpgradeDeps } from "./utils/react-version.js";
+import { getPluginReactUpgradeDeps } from "./utils/plugin-react-version.js";
 import fs from "node:fs";
 import { spawn, spawnSync } from "node:child_process";
 //#region src/init.ts
@@ -598,6 +599,22 @@ async function init(options) {
 			}
 		}
 	}
+	const pluginReactUpgrade = getPluginReactUpgradeDeps(root);
+	if (pluginReactUpgrade.length > 0) {
+		console.log(`  ${terminalStyle.cyan(terminalStyle.bold("Upgrading devDependencies:"))}`);
+		console.log(formatList(pluginReactUpgrade.map((dep) => dep.replace(/@latest$/, "")), "    "));
+		try {
+			if (shouldInstall) {
+				if (isApproveBuildsError(await installDeps(root, pluginReactUpgrade, exec))) dependencyInstallNeedsApproval = true;
+			} else {
+				const added = addDependencyEntries(root, pluginReactUpgrade, { dev: true });
+				devDependencyEntriesAdded.push(...added);
+			}
+		} catch (error) {
+			if (pmName !== "pnpm" || !isApproveBuildsError(error)) throw error;
+			dependencyInstallNeedsApproval = true;
+		}
+	}
 	if (missingDependencies.length > 0) {
 		console.log(`  ${terminalStyle.cyan(terminalStyle.bold("Installing dependencies:"))}`);
 		console.log(formatList(missingDependencies, "    "));

package/dist/plugins/optimize-imports.d.ts

@@ -5,16 +5,39 @@ type BarrelExportEntry = {
   source: string;
   isNamespace: boolean;
   originalName?: string;
+  /**
+   * The outermost module on the way to `source` that RSC replaces with
+   * references or wrappers because of its directive. RSC must import the name
+   * from it instead.
+   */
+  rscBoundary?: string;
+  /**
+   * The same for SSR, where only "use server" and "use cache" modules are
+   * replaced with references.
+   */
+  ssrBoundary?: string;
 };
 type BarrelExportMap = Map<string, BarrelExportEntry>;
 /**
  * Packages whose barrel imports are automatically optimized.
  * Matches Next.js's built-in optimizePackageImports defaults plus vinext-specific
- * compatibility entries for radix-ui and @chakra-ui/react.
+ * compatibility entries for radix-ui, @chakra-ui/react, and @heroui/react.
  * @see https://github.com/vercel/next.js/blob/9c31bbdaa/packages/next/src/server/config.ts#L1301
  */
 export declare const DEFAULT_OPTIMIZE_PACKAGES: string[];
-export declare function createOptimizedImportSourceMatcher(packages: Iterable<string>): (code: string) => boolean;
+/**
+ * Packages whose subpath imports (`pkg/Sub`) are also optimized, in the RSC
+ * environment only. Their subpath entries are themselves barrels: heroui's
+ * Toast imports `UNSTABLE_ToastQueue` from "react-aria-components/Toast", whose
+ * other exports call createContext() at module scope and import "client-only"
+ * (https://github.com/cloudflare/vinext/issues/4007). Like Next.js's default
+ * Turbopack build, this drops the side-effect-free entry's "client-only"
+ * import: server-safe exports work, and client components still fail when
+ * their own modules are evaluated. SSR and the client keep the package's own
+ * module graph, so context modules are never instantiated twice there.
+ */
+export declare const SUBPATH_OPTIMIZE_PACKAGES: string[];
+export declare function createOptimizedImportSourceMatcher(packages: Iterable<string>, subpathPackages?: Iterable<string>): (code: string) => boolean;
 /**
  * Build a map of exported names → source sub-module for a barrel package.
  *

package/dist/plugins/optimize-imports.js

@@ -21,7 +21,7 @@ async function readFileSafe(filepath) {
 /**
 * Packages whose barrel imports are automatically optimized.
 * Matches Next.js's built-in optimizePackageImports defaults plus vinext-specific
-* compatibility entries for radix-ui and @chakra-ui/react.
+* compatibility entries for radix-ui, @chakra-ui/react, and @heroui/react.
 * @see https://github.com/vercel/next.js/blob/9c31bbdaa/packages/next/src/server/config.ts#L1301
 */
 const DEFAULT_OPTIMIZE_PACKAGES = [
@@ -101,10 +101,40 @@ const DEFAULT_OPTIMIZE_PACKAGES = [
 	"react-icons/ti",
 	"react-icons/vsc",
 	"react-icons/wi",
-	"radix-ui"
+	"radix-ui",
+	"@heroui/react"
 ];
-function createOptimizedImportSourceMatcher(packages) {
-	const pattern = [...packages].map(escapeRegExp).join("|");
+/**
+* Packages whose subpath imports (`pkg/Sub`) are also optimized, in the RSC
+* environment only. Their subpath entries are themselves barrels: heroui's
+* Toast imports `UNSTABLE_ToastQueue` from "react-aria-components/Toast", whose
+* other exports call createContext() at module scope and import "client-only"
+* (https://github.com/cloudflare/vinext/issues/4007). Like Next.js's default
+* Turbopack build, this drops the side-effect-free entry's "client-only"
+* import: server-safe exports work, and client components still fail when
+* their own modules are evaluated. SSR and the client keep the package's own
+* module graph, so context modules are never instantiated twice there.
+*/
+const SUBPATH_OPTIMIZE_PACKAGES = ["react-aria-components"];
+function isOptimizedSubpath(source, subpathPackages) {
+	for (const pkg of subpathPackages) if (source.length > pkg.length + 1 && source.startsWith(`${pkg}/`)) return true;
+	return false;
+}
+/**
+* Return the directive that marks a module as an RSC boundary, if any.
+* Re-exports must not be followed through such a module: importing its leaves
+* directly would bypass the client reference, server reference, or cache wrapper.
+*/
+function findBoundaryDirective(ast) {
+	for (const statement of ast.body) {
+		if (statement.type !== "ExpressionStatement" || typeof statement.directive !== "string") return null;
+		const directive = statement.directive;
+		if (directive === "use client" || directive === "use server" || directive.startsWith("use cache")) return directive;
+	}
+	return null;
+}
+function createOptimizedImportSourceMatcher(packages, subpathPackages = []) {
+	const pattern = [...[...packages].map(escapeRegExp), ...[...subpathPackages].map((pkg) => String.raw`${escapeRegExp(pkg)}/[^"'\s]+`)].join("|");
 	if (!pattern) return () => false;
 	const importFromPattern = new RegExp(String.raw`(?:^|[;}\n\r])\s*import(?!\s*\()(?:(?!\bfrom\b)[\s\S])*?\bfrom\s*["'](?:${pattern})["']`, "m");
 	const quotedSourcePattern = new RegExp(String.raw`["'](?:${pattern})["']`);
@@ -238,6 +268,7 @@ async function buildExportMapFromFile(filePath, readFile, cache, visited, initia
 		return /* @__PURE__ */ new Map();
 	}
 	const exportMap = /* @__PURE__ */ new Map();
+	const boundaryDirective = findBoundaryDirective(ast);
 	const importBindings = /* @__PURE__ */ new Map();
 	const localDeclarations = /* @__PURE__ */ new Set();
 	const fileDir = path.dirname(filePath);
@@ -379,6 +410,14 @@ async function buildExportMapFromFile(filePath, readFile, cache, visited, initia
 			break;
 		}
 	}
+	if (boundaryDirective) {
+		const isSsrBoundary = boundaryDirective !== "use client";
+		for (const [name, entry] of exportMap) exportMap.set(name, {
+			...entry,
+			rscBoundary: filePath,
+			ssrBoundary: isSsrBoundary ? filePath : entry.ssrBoundary
+		});
+	}
 	cache.set(filePath, exportMap);
 	return exportMap;
 }
@@ -407,6 +446,15 @@ async function buildBarrelExportMap(entryPath, readFile, cache) {
 	return await buildExportMapFromFile(entryPath, readFile, exportMapCache, /* @__PURE__ */ new Set(), content);
 }
 /**
+* Resolve a specifier with Vite's resolver, returning the id only when it is a
+* file in the module graph (not external or virtual).
+*/
+async function resolveFileId(ctx, source, importer) {
+	const resolved = await ctx.resolve(source, importer, { skipSelf: true });
+	if (!resolved || resolved.external || !path.isAbsolute(resolved.id)) return null;
+	return resolved.id;
+}
+/**
 * Creates the vinext:optimize-imports Vite plugin.
 *
 * @param nextConfig - Resolved Next.js config (may be undefined before config hook runs).
@@ -420,6 +468,7 @@ function createOptimizeImportsPlugin(getNextConfig, getRoot) {
 	const entryPathCache = /* @__PURE__ */ new Map();
 	let optimizedPackages = /* @__PURE__ */ new Set();
 	let hasOptimizedImportSource = () => false;
+	let hasOptimizedRscImportSource = () => false;
 	const registeredBarrels = /* @__PURE__ */ new Set();
 	return {
 		name: "vinext:optimize-imports",
@@ -427,6 +476,7 @@ function createOptimizeImportsPlugin(getNextConfig, getRoot) {
 			const nextConfig = getNextConfig();
 			optimizedPackages = /* @__PURE__ */ new Set([...DEFAULT_OPTIMIZE_PACKAGES, ...nextConfig?.optimizePackageImports ?? []]);
 			hasOptimizedImportSource = createOptimizedImportSourceMatcher(optimizedPackages);
+			hasOptimizedRscImportSource = createOptimizedImportSourceMatcher(optimizedPackages, SUBPATH_OPTIMIZE_PACKAGES);
 			entryPathCache.clear();
 			barrelCaches.exportMapCache.clear();
 			barrelCaches.subpkgOrigin.clear();
@@ -434,56 +484,77 @@ function createOptimizeImportsPlugin(getNextConfig, getRoot) {
 		},
 		async resolveId(source) {
 			if (this.environment?.name === "client") return;
-			const envName = this.environment?.name ?? "ssr";
-			const barrelEntry = barrelCaches.subpkgOrigin.get(envName)?.get(source) ?? barrelCaches.subpkgOrigin.get(envName === "rsc" ? "ssr" : "rsc")?.get(source);
+			const envKey = this.environment?.name === "rsc" ? "rsc" : "ssr";
+			const barrelEntry = barrelCaches.subpkgOrigin.get(envKey)?.get(source);
 			if (!barrelEntry) return;
 			return await this.resolve(source, barrelEntry, { skipSelf: true }) ?? void 0;
 		},
 		transform: {
 			filter: {
 				id: {
-					include: /\.(tsx?|jsx?|mjs)$/,
+					include: /\.(tsx?|jsx?|mjs)(?:\?v=\w+)?$/,
 					exclude: VIRTUAL_MODULE_ID_RE
 				},
 				code: /\bimport\b[\s\S]*\bfrom\b/
 			},
-			async handler(code) {
+			async handler(code, id) {
 				const env = this.environment;
 				if (env?.name === "client") return null;
 				const preferReactServer = env?.name === "rsc";
 				const packages = optimizedPackages;
-				if (!hasOptimizedImportSource(code)) return null;
+				if (!(preferReactServer ? hasOptimizedRscImportSource : hasOptimizedImportSource)(code)) return null;
 				let ast;
 				try {
 					ast = parseProgram(code);
 				} catch {
 					return null;
 				}
+				if (preferReactServer && findBoundaryDirective(ast) === "use client") return null;
 				const s = new MagicString(code);
 				let hasChanges = false;
 				const root = getRoot();
 				for (const node of ast.body) {
 					if (node.type !== "ImportDeclaration") continue;
 					const importSource = typeof node.source?.value === "string" ? node.source.value : null;
-					if (!importSource || !packages.has(importSource)) continue;
-					const cacheKey = `${preferReactServer ? "rsc" : "ssr"}:${importSource}`;
-					let barrelEntry = entryPathCache.get(cacheKey);
-					if (barrelEntry === void 0) {
-						barrelEntry = await resolvePackageEntry(importSource, root, preferReactServer);
-						entryPathCache.set(cacheKey, barrelEntry ?? null);
+					if (!importSource) continue;
+					const isSubpath = !packages.has(importSource) && preferReactServer && isOptimizedSubpath(importSource, SUBPATH_OPTIMIZE_PACKAGES);
+					if (!isSubpath && !packages.has(importSource)) continue;
+					let barrelEntry;
+					if (isSubpath) {
+						barrelEntry = await resolveFileId(this, importSource, id);
+						if (barrelEntry) barrelEntry = barrelEntry.replace(/\?.*$/, "");
+					} else {
+						const cacheKey = `${preferReactServer ? "rsc" : "ssr"}:${importSource}`;
+						barrelEntry = entryPathCache.get(cacheKey);
+						if (barrelEntry === void 0) {
+							barrelEntry = await resolvePackageEntry(importSource, root, preferReactServer);
+							entryPathCache.set(cacheKey, barrelEntry ?? null);
+						}
 					}
 					const exportMap = await buildBarrelExportMap(barrelEntry, readFileSafe, barrelCaches.exportMapCache);
 					if (!exportMap || !barrelEntry) continue;
+					const getEntry = (name) => {
+						const entry = exportMap.get(name);
+						const boundary = preferReactServer ? entry?.rscBoundary : entry?.ssrBoundary;
+						return boundary ? {
+							source: boundary,
+							isNamespace: false,
+							originalName: name
+						} : entry;
+					};
 					const envKey = preferReactServer ? "rsc" : "ssr";
 					const registeredKey = `${envKey}:${barrelEntry}`;
-					if (!registeredBarrels.has(registeredKey)) {
+					if (!isSubpath && !registeredBarrels.has(registeredKey)) {
 						registeredBarrels.add(registeredKey);
 						let envOriginMap = barrelCaches.subpkgOrigin.get(envKey);
 						if (!envOriginMap) {
 							envOriginMap = /* @__PURE__ */ new Map();
 							barrelCaches.subpkgOrigin.set(envKey, envOriginMap);
 						}
-						for (const entry of exportMap.values()) if (!entry.source.startsWith("/") && !entry.source.startsWith(".") && !envOriginMap.has(entry.source)) envOriginMap.set(entry.source, barrelEntry);
+						for (const name of exportMap.keys()) {
+							const source = getEntry(name).source;
+							if (!source.startsWith("/") && !source.startsWith(".") && !envOriginMap.has(source)) envOriginMap.set(source, barrelEntry);
+						}
 					}
 					const specifiers = [];
 					let allResolved = true;
@@ -528,11 +599,26 @@ function createOptimizeImportsPlugin(getNextConfig, getRoot) {
 						}
 						continue;
 					}
+					if (isSubpath && specifiers.every(({ imported }) => getEntry(imported)?.source === barrelEntry)) continue;
+					const resolvedPackageSources = /* @__PURE__ */ new Map();
+					if (isSubpath) {
+						for (const { imported } of specifiers) {
+							const source = getEntry(imported)?.source;
+							if (!source || path.isAbsolute(source) || resolvedPackageSources.has(source)) continue;
+							const resolvedId = await resolveFileId(this, source, barrelEntry);
+							if (!resolvedId) {
+								allResolved = false;
+								break;
+							}
+							resolvedPackageSources.set(source, resolvedId);
+						}
+						if (!allResolved) continue;
+					}
 					const bySource = /* @__PURE__ */ new Map();
 					for (const { local, imported } of specifiers) {
-						const entry = exportMap.get(imported);
+						const entry = getEntry(imported);
 						if (!entry) continue;
-						const resolvedSource = entry.source;
+						const resolvedSource = resolvedPackageSources.get(entry.source) ?? entry.source;
 						const key = `${resolvedSource}::${entry.isNamespace}`;
 						let group = bySource.get(key);
 						if (!group) {
@@ -569,4 +655,4 @@ function createOptimizeImportsPlugin(getNextConfig, getRoot) {
 	};
 }
 //#endregion
-export { DEFAULT_OPTIMIZE_PACKAGES, buildBarrelExportMap, createOptimizeImportsPlugin, createOptimizedImportSourceMatcher };
+export { DEFAULT_OPTIMIZE_PACKAGES, SUBPATH_OPTIMIZE_PACKAGES, buildBarrelExportMap, createOptimizeImportsPlugin, createOptimizedImportSourceMatcher };

package/dist/plugins/rsc-client-reference-loaders.d.ts

@@ -1,4 +1,48 @@
+import { AppRoute } from "../routing/app-route-graph.js";
 import { Plugin } from "vite";
 //#region src/plugins/rsc-client-reference-loaders.d.ts
-export declare function createRscClientReferenceLoadersPlugin(): Plugin;
+export type RscClientReferenceRouteOptions = {
+  /** Maps route file paths to the module ids used by the RSC module graph. */
+  canonicalizeModuleId: (id: string) => string;
+  /** App Router routes of the current build, or null outside App Router builds. */
+  getRoutes: () => readonly AppRoute[] | null;
+  /**
+   * Files any route's render can show: global-error, and the root boundaries
+   * that routes without their own not-found, forbidden or unauthorized use.
+   */
+  getAlwaysRenderedFiles: () => readonly string[];
+  /**
+   * The files a render without a route (a route-miss 404) shows: the root
+   * layouts and boundaries, and global-not-found.
+   */
+  getRoutelessFiles: () => readonly string[];
+  /** Route-independent roots such as global-error and global-not-found. */
+  getSharedRoots: () => readonly string[];
+};
+export type RscClientReferenceGroupingOptions = {
+  /** Modules that live in chunks every page loads anyway (React, vinext runtime). */
+  isAlwaysLoadedClientModule: (id: string) => boolean;
+  /** vinext's own client chunk groups. Any other chunk group disables grouping. */
+  ownClientChunkGroups: ReadonlySet<unknown>;
+};
+/**
+ * Replaces @vitejs/plugin-rsc's client-reference facades with per-reference
+ * loaders. With `routes`, the SSR build also exports the client references
+ * each App Router route preloads. With `grouping`, production client builds
+ * additionally load references that the same App Router routes reach through
+ * one shared route group module (see build/client-reference-groups.ts), so a
+ * page fetches one chunk per route group instead of one per `"use client"`
+ * module.
+ */
+export declare function createRscClientReferenceLoadersPlugin(options?: {
+  routes?: RscClientReferenceRouteOptions;
+  grouping?: RscClientReferenceGroupingOptions;
+}): Plugin;
+/**
+ * Exports a null preload plan from the client-references virtual module when
+ * the app registers @vitejs/plugin-rsc itself (`rsc: false`), where vinext
+ * doesn't add the loaders plugin above. The App Router SSR entry imports the
+ * plan, and null makes it preload every client reference.
+ */
+export declare function createRouteClientReferencesFallbackPlugin(): Plugin;
 //#endregion