@kasperpeulen/vitest-plugin-nextjs 0.1.0-alpha.0 → 0.1.0-alpha.1

package/README.md

@@ -55,7 +55,7 @@ That also makes it a nice loop for coding agents: edit, run, fix, repeat.
 
 ### Is it really Next.js?
 
-Yes. The plugin doesn't reimplement Next. It swaps the bundler for Vite and runs Next's runtime unchanged. To keep that honest, the repo runs Next's own e2e tests against the plugin: **402 of the 474 that apply pass (85%)** on `next@16.4.0`. Every failure is listed with a reason in the [conformance report](https://github.com/storybookjs/storybook-for-pages/blob/main/docs/internals/next-conformance.md). CI also tests against `next@latest` and `next@canary`.
+Yes. The plugin doesn't reimplement Next. It swaps the bundler for Vite and runs Next's runtime unchanged. To keep that honest, the repo runs Next's own e2e tests against the plugin: **967 of the 1,139 that apply pass (85%)** on `next@16.4.0`. Every failure is listed with a reason in the [conformance report](https://github.com/storybookjs/storybook-for-pages/blob/main/docs/internals/next-conformance.md). CI also tests against `next@latest` and `next@canary`.
 
 ## Quick start
 

package/dist/compile.d.ts

@@ -8,6 +8,7 @@ import { Plugin } from "vite";
  * module.
  */
 declare function fontRequestOf(id: string): string | undefined;
+declare const codeFile: RegExp;
 declare function createDependencyCompilePlugin(getProject: () => NextProject, layer: NextLayer, isAppCode: (file: string, layer: NextLayer) => boolean): {
   name: string;
   resolveId(source: string): {
@@ -19,8 +20,15 @@ declare function createDependencyCompilePlugin(getProject: () => NextProject, la
     map: string | null;
   } | undefined>;
 };
-declare function createScanCompilePlugin(getProject: () => NextProject, layer: NextLayer, isAppCode: (file: string, layer: NextLayer) => boolean): {
+declare function createScanCompilePlugin(getProject: () => NextProject, layer: NextLayer, isAppCode: (file: string, layer: NextLayer) => boolean, resolve: (source: string, importer: string) => Promise<string | undefined>): {
   name: string;
+  resolveId(source: string, importer: string | undefined): Promise<{
+    id: string;
+  } | undefined>;
+  load(id: string): Promise<{
+    code: string;
+    moduleType: "jsx";
+  } | undefined>;
   transform(code: string, id: string): Promise<{
     code: string;
     map: string | null;
@@ -28,4 +36,4 @@ declare function createScanCompilePlugin(getProject: () => NextProject, layer: N
 };
 declare function createCompilePlugin(getProject: () => NextProject, layerOf: (environment: string) => NextLayer | undefined, isAppCode: (file: string, layer: NextLayer) => boolean): Plugin;
 //#endregion
-export { createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin, fontRequestOf };
+export { codeFile, createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin, fontRequestOf };

package/dist/compile.js

@@ -18,6 +18,7 @@ function fontRequestOf(id) {
 	return Buffer.from(name.slice(0, -4), "base64url").toString();
 }
 const sourceFile = /\.(?:tsx|ts|jsx|js|mjs)$/;
+const codeFile = /\.(?:[cm]?[jt]sx?)$/;
 function createDependencyCompilePlugin(getProject, layer, isAppCode) {
 	return {
 		name: "vitest-plugin-rsc:next-compile-dependency",
@@ -38,9 +39,33 @@ function createDependencyCompilePlugin(getProject, layer, isAppCode) {
 		}
 	};
 }
-function createScanCompilePlugin(getProject, layer, isAppCode) {
+function createScanCompilePlugin(getProject, layer, isAppCode, resolve) {
+	const ruleOf = (id) => {
+		const file = id.split("?")[0];
+		if (codeFile.test(file) || file.endsWith(".json")) return;
+		return getProject().webpackRuleOf(id, layer);
+	};
 	return {
 		name: `vitest-plugin-rsc:next-compile-scan:${layer}`,
+		async resolveId(source, importer) {
+			if (!importer) return;
+			const named = source.startsWith(".") ? path.join(path.dirname(importer), source) : source;
+			if (!ruleOf(named)) return;
+			const id = await resolve(source, importer);
+			if (!id || !ruleOf(id) || !isAppCode(id.split("?")[0], layer)) return;
+			return { id };
+		},
+		async load(id) {
+			const rule = ruleOf(id);
+			const file = id.split("?")[0];
+			if (!rule || !path.isAbsolute(file) || !fs.existsSync(file)) return;
+			const code = await getProject().loadWithWebpackRule(id, layer).catch(() => "");
+			const compiled = rule.compile && code ? await getProject().compile(code, file, layer).catch(() => void 0) : void 0;
+			return {
+				code: compiled && !compiled.refused ? compiled.code : code ?? "",
+				moduleType: "jsx"
+			};
+		},
 		async transform(code, id) {
 			if (id.includes("?") || !sourceFile.test(id) || !isAppCode(id, layer)) return;
 			const compiled = await getProject().compile(code, id, layer).catch(() => void 0);
@@ -114,27 +139,37 @@ function createCompilePlugin(getProject, layerOf, isAppCode) {
 				return `import ${JSON.stringify(stylesheet)};\nexport default ${JSON.stringify(exports)};\n`;
 			}
 			const layer = layerOf(this.environment.name);
-			if (!layer || id.includes("?")) return;
-			if (getProject().webpackRuleOf(id, layer) && fs.existsSync(id)) return {
+			if (!layer) return;
+			const file = id.split("?")[0];
+			if (!codeFile.test(file) && getProject().webpackRuleOf(id, layer) && fs.existsSync(file)) return {
 				code: await getProject().loadWithWebpackRule(id, layer),
-				moduleType: "js"
+				moduleType: file.endsWith(".json") ? "json" : "js"
 			};
-			if (!getProject().isImage(id) || !fs.existsSync(id)) return;
+			if (id.includes("?") || !getProject().isImage(id) || !fs.existsSync(id)) return;
 			return built(await getProject().loadImage(id), "js");
 		},
 		async transform(code, id) {
 			const layer = layerOf(this.environment.name);
-			if (!layer || id.includes("?")) return;
-			if (!sourceFile.test(id) && !getProject().webpackRuleOf(id, layer)?.compile) return;
-			if (!isAppCode(id, layer) || !fs.existsSync(id)) return;
-			if (id.startsWith(`${normalizePath(this.environment.config.cacheDir)}/`)) return;
-			const compiled = await getProject().compile(code, id, layer);
-			return compiled && {
+			if (!layer) return;
+			const rule = getProject().webpackRuleOf(id, layer);
+			const file = id.split("?")[0];
+			const compiles = rule?.compile || !id.includes("?") && sourceFile.test(id);
+			const loads = rule && codeFile.test(file);
+			if (!compiles && !loads) return;
+			if (!isAppCode(file, layer) || !fs.existsSync(file)) return;
+			if (file.startsWith(`${normalizePath(this.environment.config.cacheDir)}/`)) return;
+			const loaded = loads ? await getProject().loadWithWebpackRule(id, layer, code) : code;
+			const compiled = compiles ? await getProject().compile(loaded, file, layer) : void 0;
+			if (compiled) return {
 				code: compiled.code,
 				map: compiled.map ?? null
 			};
+			if (loaded !== code) return {
+				code: loaded,
+				map: null
+			};
 		}
 	};
 }
 //#endregion
-export { createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin, fontRequestOf };
+export { codeFile, createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin, fontRequestOf };

package/dist/document.js

@@ -1,4 +1,5 @@
 import "./styles-shared.js";
+import { rememberHost } from "./host-return.js";
 import pageHost from "virtual:vitest-plugin-rsc/page-host";
 import { releaseTimers, runnerTimers } from "@kasperpeulen/vitest-plugin-rsc/internal/timers";
 //#region src/document.ts
@@ -169,6 +170,7 @@ async function loadDocument(html, url, container, after, inKeptApp = false) {
 	preloads = [];
 	const runnerUrl = window.location.href;
 	runnerHref = runnerUrl;
+	rememberHost(runnerUrl);
 	const runnerBody = document.body;
 	const runnerAttributes = elements(document).map(attributesOf);
 	const reactTargets = [

package/dist/host-return-shared.d.ts

@@ -0,0 +1,5 @@
+//#region src/host-return-shared.d.ts
+declare const hostKey = "vitest-plugin-rsc:host";
+declare const topLevelHostKey = "vitest-plugin-rsc:host-top-level";
+//#endregion
+export { hostKey, topLevelHostKey };

package/dist/host-return-shared.js

@@ -0,0 +1,5 @@
+//#region src/host-return-shared.ts
+const hostKey = "vitest-plugin-rsc:host";
+const topLevelHostKey = "vitest-plugin-rsc:host-top-level";
+//#endregion
+export { hostKey, topLevelHostKey };

package/dist/host-return.d.ts

@@ -0,0 +1,5 @@
+//#region src/host-return.d.ts
+/** Keeps `url`, the URL of the host's document, as the one a page that opens now goes back to. */
+declare function rememberHost(url: string): void;
+//#endregion
+export { rememberHost };

package/dist/host-return.js

@@ -0,0 +1,16 @@
+import { buildDirectory } from "./built-files.js";
+import { hostKey, topLevelHostKey } from "./host-return-shared.js";
+//#region src/host-return.ts
+const ownStorages = ["sessionStorage", "localStorage"].map((name) => Object.getOwnPropertyDescriptor(window, name)?.get);
+/** Keeps `url`, the URL of the host's document, as the one a page that opens now goes back to. */
+function rememberHost(url) {
+	if (!buildDirectory) return;
+	const [session, local] = ownStorages.map((get) => get?.call(window));
+	try {
+		session?.setItem(hostKey, url);
+		session?.setItem(topLevelHostKey, window.top === window ? "1" : "0");
+		local?.setItem(hostKey, url);
+	} catch {}
+}
+//#endregion
+export { rememberHost };

package/dist/not-found-page.d.ts

@@ -0,0 +1,19 @@
+import { Plugin } from "vite";
+
+//#region src/not-found-page.d.ts
+/**
+ * A script that loads the host's document of the last page of a static build
+ * that this browser opened, when the expression `when` holds: in place of a
+ * document that the static host has at the URL of that page. Nothing when no
+ * page was opened, or the host is at this URL itself.
+ */
+declare function returnToHostScript(when?: string): string;
+/**
+ * An expression of a script for `returnToHostScript()`: whether the host's
+ * document of the last page that this tab opened was the tab's own, not in
+ * a frame.
+ */
+declare const topLevelHost: string;
+declare function notFoundPagePlugin(environment: string): Plugin;
+//#endregion
+export { notFoundPagePlugin, returnToHostScript, topLevelHost };

package/dist/not-found-page.js

@@ -0,0 +1,74 @@
+import { hostKey, topLevelHostKey } from "./host-return-shared.js";
+import path from "node:path";
+import fs from "node:fs";
+import { getPluginApi } from "@vitejs/plugin-rsc/plugin";
+//#region src/not-found-page.ts
+/**
+* A script that loads the host's document of the last page of a static build
+* that this browser opened, when the expression `when` holds: in place of a
+* document that the static host has at the URL of that page. Nothing when no
+* page was opened, or the host is at this URL itself.
+*/
+function returnToHostScript(when = "true") {
+	const key = JSON.stringify(hostKey);
+	return `(function () {
+  if (!(${when})) return;
+  var host;
+  try {
+    host = sessionStorage.getItem(${key}) || localStorage.getItem(${key});
+  } catch (error) {}
+  if (!host) return;
+  var url = new URL(host, location.href);
+  if (url.origin !== location.origin || url.pathname === location.pathname) return;
+  // What the document started to load is not needed.
+  window.stop();
+  location.replace(url.href);
+})();`;
+}
+/**
+* An expression of a script for `returnToHostScript()`: whether the host's
+* document of the last page that this tab opened was the tab's own, not in
+* a frame.
+*/
+const topLevelHost = `(function () {
+  try {
+    return sessionStorage.getItem(${JSON.stringify(topLevelHostKey)}) === "1";
+  } catch (error) {
+    return false;
+  }
+})()`;
+const notFoundPage = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="robots" content="noindex" />
+    <title>404: This page could not be found.</title>
+    <script>
+${returnToHostScript()}
+    <\/script>
+  </head>
+  <body>
+    <p>404: This page could not be found.</p>
+  </body>
+</html>
+`;
+function notFoundPagePlugin(environment) {
+	return {
+		name: "vitest-plugin-rsc:next-not-found-page",
+		apply: "build",
+		generateBundle(_options, bundle) {
+			if (this.environment.name !== environment) return;
+			if (getPluginApi(this.environment.config)?.manager.isScanBuild) return;
+			const { publicDir } = this.environment.config;
+			if ("404.html" in bundle) return;
+			if (publicDir && fs.existsSync(path.join(publicDir, "404.html"))) return;
+			this.emitFile({
+				type: "asset",
+				fileName: "404.html",
+				source: notFoundPage
+			});
+		}
+	};
+}
+//#endregion
+export { notFoundPagePlugin, returnToHostScript, topLevelHost };

package/dist/plugin.d.ts

@@ -1,5 +1,6 @@
 import { Mode, ModeOptions, SpeedOptions } from "./mode.js";
 import { NextBuild } from "./build.js";
+import { returnToHostScript, topLevelHost } from "./not-found-page.js";
 import { ServerCodeOptions } from "./server-code.js";
 import { Plugin } from "vite";
 //#region src/plugin.d.ts
@@ -19,4 +20,4 @@ type VitestPluginNextOptions = ServerCodeOptions & ModeOptions & {
 };
 declare function vitestPluginNext(options?: VitestPluginNextOptions): Plugin[];
 //#endregion
-export { type Mode, type NextBuild, type SpeedOptions, VitestPluginNextOptions, vitestPluginNext };
+export { type Mode, type NextBuild, type SpeedOptions, VitestPluginNextOptions, returnToHostScript, topLevelHost, vitestPluginNext };

package/dist/plugin.js

@@ -1,6 +1,6 @@
 import { registryGlobal } from "./registry-global.js";
 import { nextBuilds, nextProductionPlugin } from "./build.js";
-import { createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin } from "./compile.js";
+import { codeFile, createCompilePlugin, createDependencyCompilePlugin, createScanCompilePlugin } from "./compile.js";
 import { builtHostFileOf, changesInPlace, createStyles } from "./styles.js";
 import { clientFiles, clientReferenceOfModule } from "./client-files.js";
 import { createCommonJsPlugin } from "./commonjs.js";
@@ -11,6 +11,7 @@ import { resolveSpeedFeatures } from "./mode.js";
 import { browserMapping, isNativeNodeModule, isNodeModule, nativeRequirePlugin, nodeModuleOf } from "./node-builtins.js";
 import { devAssetPrefix, prerenderImports, runtimeImports as runtimeImports$1, serverReferenceInfo } from "./compat/paths.js";
 import { createNodePlatform, instrumentationPlugin } from "./node-platform.js";
+import { notFoundPagePlugin, returnToHostScript, topLevelHost } from "./not-found-page.js";
 import { optimizerCacheKey } from "./optimizer-cache-key.js";
 import "./own-package.js";
 import { pageTimersDefine, pageTimersPlugin } from "./page-timers.js";
@@ -46,7 +47,14 @@ const environmentOf = {
 const layers = Object.keys(environmentOf);
 const registry = `globalThis.${registryGlobal}`;
 const fileEntry = (file) => escapePath(normalizePath(file));
-const appEntriesOf = (project) => `${fileEntry(project.appDir)}/**/*.{js,jsx,ts,tsx}`;
+const ruleExtensionsOf = (project) => (project.config.pageExtensions ?? []).filter((extension) => !codeFile.test(`.${extension}`) && project.webpackRuleOf(path.join(project.appDir, `page.${extension}`), "rsc"));
+const appEntriesOf = (project) => `${fileEntry(project.appDir)}/**/*.{${[
+	"js",
+	"jsx",
+	"ts",
+	"tsx",
+	...ruleExtensionsOf(project)
+].join(",")}}`;
 const manifestId = "virtual:vitest-plugin-rsc/next-manifest";
 const virtual = (name) => `virtual:vitest-plugin-rsc/next-${name}`;
 const routeEntryPrefix = virtual("route/");
@@ -640,12 +648,14 @@ function vitestPluginNext(options = {}) {
 					])
 				};
 				const dependenciesOfNext = (layer) => Object.entries(project.aliases[layer]).flatMap(([key, target]) => key.endsWith("$") && target && resolvers[layer].isDependencyOfNext(target) ? [`next > ${key.slice(0, -1)}`] : []);
+				const ruleExtensions = ruleExtensionsOf(project).map((extension) => `.${extension}`);
 				const optimizeDeps = (layer) => ({
 					include: [
 						...include[layer],
 						...dependenciesOfNext(layer),
 						...project.webpackPackages[layer]
 					],
+					...ruleExtensions.length > 0 && { extensions: ruleExtensions },
 					rolldownOptions: {
 						plugins: [
 							...build === "production" ? [nextProductionPlugin(project.nextDir)] : [],
@@ -653,7 +663,7 @@ function vitestPluginNext(options = {}) {
 							...layer === "browser" ? [hostPackagesPlugin] : [],
 							resolvers[layer].plugin(),
 							createDependencyCompilePlugin(getProject, layer, serverCode.isAppCode),
-							createScanCompilePlugin(getProject, layer, serverCode.isAppCode),
+							createScanCompilePlugin(getProject, layer, serverCode.isAppCode, async (source, importer) => (await server?.environments[environmentOf[layer]]?.pluginContainer.resolveId(source, importer))?.id),
 							...layer === "rsc" ? [nextClientBoundaryPlugin(getProject, resolvers.rsc)] : [],
 							flightConsolePlugin(),
 							nextPatchesPlugin(),
@@ -921,6 +931,7 @@ function vitestPluginNext(options = {}) {
 			[environmentOf.ssr]: "ssr"
 		}),
 		pageTimersPlugin(environmentOf.browser, serverCode.isHostFile),
+		notFoundPagePlugin(environmentOf.rsc),
 		...styles.plugins,
 		routesAheadPlugin({
 			root: () => getProject().root,
@@ -992,4 +1003,4 @@ function dependencyBuildPlugin(getProject, serverCode, layer) {
 	};
 }
 //#endregion
-export { vitestPluginNext };
+export { returnToHostScript, topLevelHost, vitestPluginNext };

package/dist/project/webpack.d.ts

@@ -3,15 +3,26 @@ import { NextContext } from "./context.js";
 import { NextProject } from "../project.js";
 
 //#region src/project/webpack.d.ts
+/**
+ * What a rule matches, as webpack takes it: a string is the start of the path,
+ * a function decides, and a list matches where one of it does.
+ */
+type WebpackCondition = RegExp | string | ((value: string) => boolean) | WebpackCondition[];
 /** A rule of the `webpack` function: the files it is for, and their loaders. */
 type WebpackRule = {
-  test: RegExp; /** As webpack calls them: the last first. */
+  /** Of the path of the file, as `include` and `exclude`. */test: WebpackCondition;
+  include?: WebpackCondition;
+  exclude?: WebpackCondition; /** Of the query of the file, `?collection=docs`, with its `?`. */
+  resourceQuery?: WebpackCondition;
+  enforce?: "pre" | "post"; /** As webpack calls them: the last first. */
   loaders: {
     loader: string;
     options: unknown;
   }[]; /** Whether Next's compiler, `defaultLoaders.babel`, runs after them. */
   compile: boolean;
 };
+/** The loaders of the rules that match a file, as webpack runs them. */
+type WebpackLoaders = Pick<WebpackRule, "loaders" | "compile">;
 type WebpackFunction = {
   rules: WebpackRule[]; /** The candidates of each alias it sets, in order: the first that resolves is the one. */
   aliases: Record<string, string[]>; /** What of it does not apply, to say when a run starts. */
@@ -28,6 +39,14 @@ declare function readWebpackFunction(webpack: unknown, options: {
   buildId: string;
   config: unknown;
 }): WebpackFunction;
+/**
+ * The loaders of the rules for a file, as webpack matches them: `test`,
+ * `include` and `exclude` its path, `resourceQuery` its query. Each rule that
+ * matches adds its loaders, as webpack runs them: those of `enforce: "pre"`
+ * first, then the others, then those of `enforce: "post"`. Fumadocs matches an
+ * `.mdx` file with `?collection=docs`, and a `meta.json` with it by its query.
+ */
+declare function loadersOf(rules: WebpackRule[], id: string): WebpackLoaders | undefined;
 /**
  * The candidates of an alias for an import, as webpack takes them: a name
  * matches the import and what is under it, and one that ends with `$` only
@@ -43,4 +62,4 @@ declare function importOfFile(file: string): string;
 /** The rules and aliases of the `webpack` function in `next.config`, for each layer. */
 declare function createWebpackRules(context: NextContext, runLoader: RunLoader): Pick<NextProject, "webpackRuleOf" | "loadWithWebpackRule" | "webpackAliasOf" | "webpackPackages" | "webpackDifferences">;
 //#endregion
-export { WebpackFunction, WebpackRule, aliasOf, createWebpackRules, importOfFile, readWebpackFunction };
+export { WebpackCondition, WebpackFunction, WebpackLoaders, WebpackRule, aliasOf, createWebpackRules, importOfFile, loadersOf, readWebpackFunction };

package/dist/project/webpack.js

@@ -39,7 +39,7 @@ function readWebpackFunction(webpack, options) {
 		return read;
 	}
 	for (const rule of after?.module?.rules ?? []) {
-		const { test, use, ...rest } = rule ?? {};
+		const { test, include, exclude, resourceQuery, enforce, use, ...rest } = rule ?? {};
 		const uses = Array.isArray(use) ? use : [use];
 		const loaders = uses.flatMap((entry) => {
 			if (entry === babel) return [];
@@ -53,12 +53,20 @@ function readWebpackFunction(webpack, options) {
 				options
 			}] : [];
 		});
-		if (!(test instanceof RegExp) || Object.keys(rest).length > 0 || loaders.length + (uses.includes(babel) ? 1 : 0) !== uses.length) {
-			read.differences.push(`a rule of the \`webpack\` function of next.config does not apply: only one with a \`test\` and the loaders in \`use\` does, not ${String(test ?? "this one")}`);
+		if (!isCondition(test) || [
+			include,
+			exclude,
+			resourceQuery
+		].some((condition) => condition !== void 0 && !isCondition(condition)) || enforce !== void 0 && enforce !== "pre" && enforce !== "post" || Object.keys(rest).length > 0 || loaders.length + (uses.includes(babel) ? 1 : 0) !== uses.length) {
+			read.differences.push(`a rule of the \`webpack\` function of next.config does not apply: only one with a \`test\` and the loaders in \`use\` does, with \`include\`, \`exclude\`, \`resourceQuery\` and \`enforce\` or not, not ${String(test ?? "this one")}`);
 			continue;
 		}
 		read.rules.push({
 			test,
+			...include !== void 0 && { include },
+			...exclude !== void 0 && { exclude },
+			...resourceQuery !== void 0 && { resourceQuery },
+			...enforce !== void 0 && { enforce },
 			loaders,
 			compile: uses.includes(babel)
 		});
@@ -70,6 +78,29 @@ function readWebpackFunction(webpack, options) {
 	if ((after?.plugins?.length ?? 0) > 0) read.differences.push("the plugins of webpack that the `webpack` function of next.config adds do not run");
 	return read;
 }
+const isCondition = (condition) => condition instanceof RegExp || typeof condition === "string" || typeof condition === "function" || Array.isArray(condition) && condition.every(isCondition);
+const matches = (condition, value) => condition instanceof RegExp ? condition.test(value) : typeof condition === "string" ? value.startsWith(condition) : typeof condition === "function" ? condition(value) : condition.some((entry) => matches(entry, value));
+const viteQuery = /[?&](?:raw|url|inline|no-inline|worker|worker_file|sharedworker)(?=[=&]|$)/;
+/**
+* The loaders of the rules for a file, as webpack matches them: `test`,
+* `include` and `exclude` its path, `resourceQuery` its query. Each rule that
+* matches adds its loaders, as webpack runs them: those of `enforce: "pre"`
+* first, then the others, then those of `enforce: "post"`. Fumadocs matches an
+* `.mdx` file with `?collection=docs`, and a `meta.json` with it by its query.
+*/
+function loadersOf(rules, id) {
+	if (viteQuery.test(id)) return;
+	const queryAt = id.indexOf("?");
+	const file = queryAt < 0 ? id : id.slice(0, queryAt);
+	const query = queryAt < 0 ? "" : id.slice(queryAt);
+	const matched = rules.filter((rule) => matches(rule.test, file) && (rule.include === void 0 || matches(rule.include, file)) && (rule.exclude === void 0 || !matches(rule.exclude, file)) && (rule.resourceQuery === void 0 || matches(rule.resourceQuery, query)));
+	if (matched.length === 0) return;
+	const phase = ({ enforce }) => enforce === "post" ? 0 : enforce === "pre" ? 2 : 1;
+	return {
+		loaders: matched.toSorted((a, b) => phase(a) - phase(b)).flatMap((rule) => rule.loaders),
+		compile: matched.some((rule) => rule.compile)
+	};
+}
 /**
 * The candidates of an alias for an import, as webpack takes them: a name
 * matches the import and what is under it, and one that ends with `$` only
@@ -114,7 +145,7 @@ function createWebpackRules(context, runLoader) {
 		ssr: server,
 		browser: client
 	};
-	const ruleOf = (file, layer) => of[layer].rules.find((rule) => rule.test.test(file));
+	const ruleOf = (id, layer) => loadersOf(of[layer].rules, id);
 	const loaders = /* @__PURE__ */ new Map();
 	const loaderAt = (request) => {
 		let loader = loaders.get(request);
@@ -141,14 +172,14 @@ function createWebpackRules(context, runLoader) {
 			ssr: packagesOf(server),
 			browser: packagesOf(client)
 		},
-		async loadWithWebpackRule(file, layer) {
-			const rule = ruleOf(file, layer);
+		async loadWithWebpackRule(id, layer, source) {
+			const rule = ruleOf(id, layer);
 			if (!rule) return;
-			let code = await fs.promises.readFile(file);
+			let code = source ?? await fs.promises.readFile(id.split("?")[0]);
 			for (const { loader, options } of rule.loaders.toReversed()) {
 				const run = loaderAt(loader);
 				const input = run.raw ? Buffer.from(code) : String(code);
-				[code] = await runLoader(run, options, file, input);
+				[code] = await runLoader(run, options, id, input);
 			}
 			return String(code);
 		},
@@ -157,4 +188,4 @@ function createWebpackRules(context, runLoader) {
 	};
 }
 //#endregion
-export { aliasOf, createWebpackRules, importOfFile, readWebpackFunction };
+export { aliasOf, createWebpackRules, importOfFile, loadersOf, readWebpackFunction };

package/dist/project.d.ts

@@ -3,7 +3,7 @@ import { RoutesManifest } from "./compat/types.js";
 import { FlightEntry } from "./flight.js";
 import { PageEnv } from "./project/env.js";
 import { NewExport } from "./node-platform.js";
-import { WebpackRule } from "./project/webpack.js";
+import { WebpackLoaders } from "./project/webpack.js";
 import { ResolveRoutesParams } from "@next/routing";
 import * as _$vite from "vite";
 import { IncomingMessage, ServerResponse } from "node:http";
@@ -155,11 +155,16 @@ type NextProject = {
    */
   dependencyCompileOptions: Record<NextLayer, unknown>;
   /**
-   * The rule of the `webpack` function in `next.config` for a file, like the
-   * one of `@next/mdx` for an `.mdx` file: see project/webpack.ts.
+   * The loaders of the rules of the `webpack` function in `next.config` for a
+   * module, like the rule of `@next/mdx` for an `.mdx` file, or Fumadocs' for
+   * one with `?collection=docs`: see project/webpack.ts.
    */
-  webpackRuleOf(file: string, layer: NextLayer): WebpackRule | undefined; /** What the loaders of that rule make of the file. Nothing for a file without one. */
-  loadWithWebpackRule(file: string, layer: NextLayer): Promise<string | undefined>; /** The candidates of an alias of the `webpack` function for an import, in order. */
+  webpackRuleOf(id: string, layer: NextLayer): WebpackLoaders | undefined;
+  /**
+   * What those loaders make of the file, or of `source`, its code as Vite
+   * read it. Nothing for a module without them.
+   */
+  loadWithWebpackRule(id: string, layer: NextLayer, source?: string): Promise<string | undefined>; /** The candidates of an alias of the `webpack` function for an import, in order. */
   webpackAliasOf(source: string, layer: NextLayer): string[] | undefined; /** The packages among those candidates, to pre-bundle. */
   webpackPackages: Record<NextLayer, string[]>; /** What of the `webpack` function does not apply, to say when a run starts. */
   webpackDifferences: string[];

package/dist/rsc.js

@@ -1,7 +1,7 @@
 import { actionModulePrefix, registry } from "./registry.js";
 import { builtStylesheetsOf, stylesheetsEvent } from "./styles-shared.js";
-import { preloadPage } from "./document.js";
 import { buildDirectory, builtFiles } from "./built-files.js";
+import { preloadPage } from "./document.js";
 import { NoFallbackError } from "./compat/rsc/handlers.js";
 import { nextConfig, speedFeatures } from "virtual:vitest-plugin-rsc/next-manifest";
 import { askDevServer, versionsOfAnswers } from "@kasperpeulen/vitest-plugin-rsc/internal/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kasperpeulen/vitest-plugin-nextjs",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Test and render Next.js App Router pages with Vite: in Vitest Browser Mode, vite dev and Storybook, with Next's own runtime.",
   "keywords": [
     "nextjs",
@@ -76,7 +76,7 @@
     "tinyglobby": "^0.2.17"
   },
   "devDependencies": {
-    "@next/routing": "16.4.0",
+    "@next/routing": "16.4.3",
     "@noble/hashes": "2.4.0",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.14",
@@ -86,7 +86,7 @@
     "fflate": "0.8.3",
     "happy-dom": "^21.0.4",
     "memfs": "4.80.0",
-    "next": "16.4.0",
+    "next": "16.4.3",
     "node-inspect-extracted": "3.3.4",
     "path-browserify": "1.0.1",
     "react": "^19.2.6",