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

package/dist/stylesheet-versions.d.ts

@@ -0,0 +1,17 @@
+//#region src/stylesheet-versions.d.ts
+/**
+ * The URLs of the versions of now, by the stylesheet they are of: see
+ * `stylesheetOfUrl()`.
+ */
+type StylesheetVersions = Map<string, string>;
+declare function stylesheetVersions(urls: string[]): StylesheetVersions;
+/**
+ * Moves `link` to `url`: a link of `url` comes next to it, with the same
+ * attributes, and `link` goes once that one has loaded or failed, so the
+ * document is never without the CSS. A link that has no CSS yet, out of the
+ * document or still loading, gets the URL itself: what waits for its `load`
+ * gets that of `url`. Returns the link of `url`.
+ */
+declare function moveLink(link: HTMLLinkElement, url: string): HTMLLinkElement;
+//#endregion
+export { StylesheetVersions, moveLink, stylesheetVersions };

package/dist/stylesheet-versions.js

@@ -0,0 +1,43 @@
+import { stylesheetOfUrl, stylesheetsChangedEvent } from "./styles-shared.js";
+//#region src/stylesheet-versions.ts
+function stylesheetVersions(urls) {
+	return new Map(urls.flatMap((url) => {
+		const stylesheet = stylesheetOfUrl(url);
+		return stylesheet === void 0 ? [] : [[stylesheet, url]];
+	}));
+}
+const replaced = /* @__PURE__ */ new WeakSet();
+/**
+* Moves `link` to `url`: a link of `url` comes next to it, with the same
+* attributes, and `link` goes once that one has loaded or failed, so the
+* document is never without the CSS. A link that has no CSS yet, out of the
+* document or still loading, gets the URL itself: what waits for its `load`
+* gets that of `url`. Returns the link of `url`.
+*/
+function moveLink(link, url) {
+	if (!link.isConnected || !link.sheet) {
+		link.href = url;
+		return link;
+	}
+	const moved = link.cloneNode();
+	moved.href = url;
+	replaced.add(link);
+	const remove = () => link.remove();
+	moved.addEventListener("load", remove, { once: true });
+	moved.addEventListener("error", remove, { once: true });
+	link.after(moved);
+	return moved;
+}
+/** Moves the links of the page, not the graph's, to the versions of now. */
+function movePageLinks(versions) {
+	const links = document.querySelectorAll("link[rel~=\"stylesheet\"][href]");
+	for (const link of links) {
+		if (replaced.has(link) || link.hasAttribute("data-vitest-plugin-rsc-graph")) continue;
+		const stylesheet = stylesheetOfUrl(link.href);
+		const url = stylesheet === void 0 ? void 0 : versions.get(stylesheet);
+		if (url !== void 0 && new URL(url, link.href).pathname !== new URL(link.href).pathname) moveLink(link, url);
+	}
+}
+import.meta.hot?.on(stylesheetsChangedEvent, (urls) => movePageLinks(stylesheetVersions(urls)));
+//#endregion
+export { moveLink, stylesheetVersions };

package/dist/tester.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="{__VITEST_FAVICON__}" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vitest Browser Tester</title>
+  </head>
+  <body></body>
+</html>

package/dist/use-cache.d.ts

@@ -0,0 +1,15 @@
+import { NextLayer, NextProject } from "./project.js";
+import { Plugin } from "vite";
+
+//#region src/use-cache.d.ts
+/** The module with the function that compiled code wraps a cached function in. */
+declare const useCacheId = "virtual:vitest-plugin-rsc/next-use-cache";
+declare const useCacheModule: (registry: string) => string;
+/**
+ * Whether the app has `"use cache"`: what Next's compiler takes the directive
+ * with. Only then is the directive compiled.
+ */
+declare function usesCache(project: NextProject): boolean;
+declare function createUseCachePlugin(getProject: () => NextProject, layerOf: (environment: string) => NextLayer | undefined, isAppCode: (file: string, layer: NextLayer) => boolean): Plugin;
+//#endregion
+export { createUseCachePlugin, useCacheId, useCacheModule, usesCache };

package/dist/use-cache.js

@@ -0,0 +1,93 @@
+import { cacheWrapper } from "./compat/paths.js";
+import { parseAstAsync } from "vite";
+import { transformHoistInlineDirective, transformWrapExport } from "@vitejs/plugin-rsc/transforms";
+import { createHash } from "node:crypto";
+import fs from "node:fs";
+//#region src/use-cache.ts
+/** The module with the function that compiled code wraps a cached function in. */
+const useCacheId = "virtual:vitest-plugin-rsc/next-use-cache";
+const useCacheModule = (registry) => `
+import { cache } from ${JSON.stringify(cacheWrapper)};
+import { cache as reactCache } from "react";
+// One for every function: a function with the directive that closes over a
+// value is wrapped where it is created, for every call of the function around
+// it, and the calls of each are still one per render. Next's compiler wraps
+// it once, at the top of the module.
+const wrapped = new WeakMap();
+export function useCache(kind, id, fn, undeclared) {
+  let cached = wrapped.get(fn);
+  if (cached) return cached;
+  cached = reactCache(function () {
+    // The arguments the function declares, as Next's compiler passes them:
+    // what a caller passes on top of those, like the index of a \`map()\`, is
+    // no part of the key. \`fn.length\` also counts what the function closes
+    // over, which comes first: it is passed like an argument of the call,
+    // not as a bound argument, and is part of the key like one.
+    const end = undeclared === null ? undefined : fn.length + undeclared;
+    const args = Array.prototype.slice.call(arguments, 0, end);
+    // The id is a part of the key. It changes when the caches are reset, so
+    // that no test finds what an earlier one cached: see cache.ts. In hex, as
+    // Next's id, which a cache handler sees in the key.
+    const generation = ${registry}.cacheGeneration().toString(16).padStart(8, "0");
+    return cache(kind, id + generation, 0, fn, args);
+  });
+  Object.defineProperty(cached, "name", { value: fn.name });
+  wrapped.set(fn, cached);
+  return cached;
+}
+`;
+/**
+* Whether the app has `"use cache"`: what Next's compiler takes the directive
+* with. Only then is the directive compiled.
+*/
+function usesCache(project) {
+	const config = project.config;
+	return Boolean(config.cacheComponents || config.experimental?.useCache);
+}
+const directive = /^use cache(?:: (.+))?$/;
+function undeclaredParams(node) {
+	if (!node?.params || !/Function/.test(node.type)) return null;
+	if (node.params.some((param) => param.type === "RestElement")) return null;
+	const counted = node.params.findIndex((param) => param.type === "AssignmentPattern");
+	return counted === -1 ? 0 : node.params.length - counted;
+}
+function createUseCachePlugin(getProject, layerOf, isAppCode) {
+	return {
+		name: "vitest-plugin-rsc:next-use-cache",
+		async transform(code, id) {
+			if (!code.includes("use cache")) return;
+			if (!usesCache(getProject())) return;
+			const file = id.split("?")[0];
+			if (layerOf(this.environment.name) !== "rsc" || !isAppCode(file, "rsc")) return;
+			if (!fs.existsSync(file)) return;
+			const ast = await parseAstAsync(code);
+			const idOf = (name) => createHash("sha1").update(`${file}#${name}`).digest("hex");
+			const runtime = (kind, value, name, node) => `$$useCache(${JSON.stringify(kind ?? "default")}, ${JSON.stringify(idOf(name))}, ${value}, ${undeclaredParams(node)})`;
+			let moduleKind;
+			let ofModule = false;
+			for (const statement of ast.body) {
+				if (statement.type !== "ExpressionStatement" || !("directive" in statement)) break;
+				const match = directive.exec(String(statement.directive));
+				if (match) [ofModule, moduleKind] = [true, match[1]];
+			}
+			const { output } = ofModule ? transformWrapExport(code, ast, {
+				runtime: (value, name, meta) => runtime(moduleKind, value, name, meta.valueNode),
+				ignoreExportAllDeclaration: true,
+				rejectNonAsyncFunction: true
+			}) : transformHoistInlineDirective(code, ast, {
+				directive,
+				runtime: (value, name, meta) => runtime(meta.directiveMatch[1], value, name, meta.valueNode),
+				rejectNonAsyncFunction: true,
+				noExport: true
+			});
+			if (!output.hasChanged()) return;
+			output.prepend(`import { useCache as $$useCache } from ${JSON.stringify(useCacheId)};\n`);
+			return {
+				code: output.toString(),
+				map: output.generateMap({ hires: "boundary" })
+			};
+		}
+	};
+}
+//#endregion
+export { createUseCachePlugin, useCacheId, useCacheModule, usesCache };

package/dist/vitest-version.d.ts

@@ -0,0 +1,6 @@
+//#region src/vitest-version.d.ts
+declare const minimumVitest = "5.0.4";
+/** Throws for a Vitest that the plugin does not run in. */
+declare function assertVitestVersion(version: string): void;
+//#endregion
+export { assertVitestVersion, minimumVitest };

package/dist/vitest-version.js

@@ -0,0 +1,12 @@
+//#region src/vitest-version.ts
+const minimumVitest = "5.0.4";
+const partsOf = (version) => version.split(/[.+-]/, 3).map((part) => Number(part) || 0);
+/** Throws for a Vitest that the plugin does not run in. */
+function assertVitestVersion(version) {
+	const [major = 0, minor = 0, patch = 0] = partsOf(version);
+	const [needMajor = 0, needMinor = 0, needPatch = 0] = partsOf(minimumVitest);
+	if (major !== needMajor ? major > needMajor : minor !== needMinor ? minor > needMinor : patch >= needPatch) return;
+	throw new Error(`vitest-plugin-rsc: runs in Vitest ${minimumVitest} or later, and this is Vitest ${version}. Update vitest and the @vitest packages of the project.`);
+}
+//#endregion
+export { assertVitestVersion, minimumVitest };

package/package.json

@@ -1,7 +1,128 @@
 {
   "name": "@kasperpeulen/vitest-plugin-nextjs",
-  "version": "0.0.0-alpha.0",
-  "description": "Placeholder. The first real release is 0.1.0-alpha.0.",
+  "version": "0.1.0-alpha.0",
+  "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",
+    "react",
+    "react-server-components",
+    "rsc",
+    "storybook",
+    "vite",
+    "vitest"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook-for-pages#readme",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook-for-pages/issues"
+  },
   "license": "MIT",
-  "files": ["README.md"]
-}
+  "author": "Kasper Peulen",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybookjs/storybook-for-pages.git",
+    "directory": "packages/vitest-plugin-nextjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/plugin.d.ts",
+      "vitest-plugin-rsc-source": "./src/plugin.ts",
+      "default": "./dist/plugin.js"
+    },
+    "./testing-library": {
+      "types": "./dist/index.d.ts",
+      "vitest-plugin-rsc-source": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./client-components": {
+      "types": "./dist/client-components.d.ts",
+      "vitest-plugin-rsc-source": "./src/client-components.ts",
+      "default": "./dist/client-components.js"
+    },
+    "./rsc": {
+      "types": "./dist/rsc.d.ts",
+      "vitest-plugin-rsc-source": "./src/rsc.ts",
+      "default": "./dist/rsc.js"
+    },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "vitest-plugin-rsc-source": "./src/ssr.ts",
+      "default": "./dist/ssr.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "vitest-plugin-rsc-source": "./src/client.tsx",
+      "default": "./dist/client.js"
+    },
+    "./node-rendered": {
+      "types": "./dist/node-rendered.d.ts",
+      "vitest-plugin-rsc-source": "./src/node-rendered.tsx",
+      "default": "./dist/node-rendered.js"
+    },
+    "./node/*": "./dist/node/*.js"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "dependencies": {
+    "@vitejs/plugin-rsc": "0.5.36",
+    "cjs-module-lexer": "^2.3.0",
+    "magic-string": "^0.30.21",
+    "tinyglobby": "^0.2.17"
+  },
+  "devDependencies": {
+    "@next/routing": "16.4.0",
+    "@noble/hashes": "2.4.0",
+    "@types/node": "^24.12.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "assert": "2.1.0",
+    "events": "3.3.0",
+    "fflate": "0.8.3",
+    "happy-dom": "^21.0.4",
+    "memfs": "4.80.0",
+    "next": "16.4.0",
+    "node-inspect-extracted": "3.3.4",
+    "path-browserify": "1.0.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "readable-stream": "4.8.0",
+    "rolldown": "^1.0.0",
+    "string_decoder": "1.3.0",
+    "tsdown": "^0.22.0",
+    "unenv": "2.0.0-rc.24",
+    "util": "0.12.5",
+    "vite": "^8.3.1",
+    "@kasperpeulen/vitest-plugin-rsc": "0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "@next/routing": ">=16.4.0-0",
+    "next": ">=16.4.0-0",
+    "react": "*",
+    "react-dom": "*",
+    "vite": ">=8.0.0",
+    "vitest": "*",
+    "@kasperpeulen/vitest-plugin-rsc": "0.1.0-alpha.0"
+  },
+  "peerDependenciesMeta": {
+    "@next/routing": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
+  },
+  "//": "Not API, and they change with any version: ./rsc, ./ssr, ./client and ./node-rendered are modules that the layers of the plugin import by these ids, and ./node/* are the modules of Node.js that the server layers get for node:<name>.",
+  "scripts": {
+    "test": "vitest",
+    "test:run": "vitest run",
+    "dev": "tsdown --sourcemap --watch src",
+    "build": "tsdown",
+    "generate": "node scripts/node-modules.ts"
+  }
+}