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

package/dist/storage.js

@@ -0,0 +1,94 @@
+//#region src/storage.ts
+/**
+* The items of the page's `localStorage` and `sessionStorage`. One for each
+* browser context of the app.
+*/
+var PageStorage = class {
+	localStorage = /* @__PURE__ */ new Map();
+	sessionStorage = /* @__PURE__ */ new Map();
+};
+/** The items of a `Storage` of the browser's, as a map. */
+function itemsOfStorage(storage) {
+	return {
+		get: (key) => storage.getItem(key) ?? void 0,
+		set: (key, value) => storage.setItem(key, value),
+		delete(key) {
+			const had = storage.getItem(key) !== null;
+			storage.removeItem(key);
+			return had;
+		},
+		has: (key) => storage.getItem(key) !== null,
+		clear: () => storage.clear(),
+		keys: () => Array.from({ length: storage.length }, (_, index) => storage.key(index)),
+		get size() {
+			return storage.length;
+		}
+	};
+}
+const sources = /* @__PURE__ */ new WeakMap();
+const itemsOf = (storage) => sources.get(storage)();
+const storagePrototype = Object.create(Storage.prototype, {
+	length: {
+		get() {
+			return itemsOf(this).size;
+		},
+		enumerable: true,
+		configurable: true
+	},
+	...Object.getOwnPropertyDescriptors({
+		key(index) {
+			return [...itemsOf(this).keys()][index >>> 0] ?? null;
+		},
+		getItem(key) {
+			return itemsOf(this).get(`${key}`) ?? null;
+		},
+		setItem(key, value) {
+			itemsOf(this).set(`${key}`, `${value}`);
+		},
+		removeItem(key) {
+			itemsOf(this).delete(`${key}`);
+		},
+		clear() {
+			itemsOf(this).clear();
+		}
+	})
+});
+/**
+* A `Storage` of the items that `items()` returns each time it is used. Its
+* items are its properties too, as in a browser: `storage.theme`,
+* `Object.keys(storage)` and `JSON.stringify(storage)` have them, and setting
+* or deleting a property sets or removes an item. A name of `Storage`, like
+* `key` or `length`, hides the item of that name.
+*/
+function storageOf(items) {
+	const target = Object.create(storagePrototype);
+	const isItem = (name) => typeof name === "string" && !(name in target) && items().has(name);
+	const storage = new Proxy(target, {
+		get: (target, name, receiver) => isItem(name) ? items().get(name) : Reflect.get(target, name, receiver),
+		set(target, name, value, receiver) {
+			if (typeof name !== "string" || name in target || receiver !== storage) return Reflect.set(target, name, value, receiver);
+			items().set(name, `${value}`);
+			return true;
+		},
+		has: (target, name) => isItem(name) || Reflect.has(target, name),
+		deleteProperty: (target, name) => isItem(name) ? items().delete(name) : Reflect.deleteProperty(target, name),
+		ownKeys: (target) => [...[...items().keys()].filter(isItem), ...Reflect.ownKeys(target)],
+		getOwnPropertyDescriptor: (target, name) => isItem(name) ? {
+			value: items().get(name),
+			writable: true,
+			enumerable: true,
+			configurable: true
+		} : Reflect.getOwnPropertyDescriptor(target, name),
+		defineProperty(target, name, descriptor) {
+			if (typeof name !== "string" || name in target) return Reflect.defineProperty(target, name, descriptor);
+			if (!("value" in descriptor)) return false;
+			items().set(name, `${descriptor.value}`);
+			return true;
+		},
+		preventExtensions: () => false
+	});
+	sources.set(storage, items);
+	return storage;
+}
+//#endregion
+export { PageStorage, itemsOfStorage, storageOf };

package/dist/styles-shared.d.ts

@@ -0,0 +1,137 @@
+//#region src/styles-shared.d.ts
+/**
+ * The file of a static build with the files a page loads besides the layers:
+ * the stylesheets and the modules of every page route, and the stylesheets
+ * of every file of the host, in its directory.
+ */
+declare const builtFilesPath = "vitest-plugin-rsc/next-files.json";
+/**
+ * Where the dev server answers the page with stylesheets, over the websocket
+ * of the page (`askDevServer()` in ../utils.ts), for a `StylesheetsQuestion`.
+ */
+declare const stylesheetsEvent = "vitest-plugin-rsc:next-stylesheets";
+/**
+ * What the dev server tells the page after a change of stylesheets that it
+ * links, without class names: the URL of the version of now of each, which
+ * the page moves every link of the stylesheet to (stylesheet-versions.ts).
+ */
+declare const stylesheetsChangedEvent = "vitest-plugin-rsc:next-stylesheets-changed";
+/** Where Next's build puts the CSS of an app, under `/_next/`. */
+declare const cssDirectory = "static/css";
+/**
+ * The version of its CSS that the path of a stylesheet of the dev server has
+ * after the directory, `static/css/<version>/app/globals.css`: see styles.ts.
+ */
+declare const cssVersionPattern = "[0-9a-f]{16}";
+/**
+ * The stylesheet that a URL of a link is of, whatever its version and however
+ * its path is encoded: the path of the URL without its version, decoded.
+ * Nothing for a URL that is no stylesheet of the dev server.
+ */
+declare function stylesheetOfUrl(url: string): string | undefined;
+/**
+ * What the page asks at `stylesheetsEvent`. For a route: by the name of its
+ * modules, with `Stylesheets`, and `files`, the files of the host that render
+ * the node of the route, in their order, absolute or from the root of the
+ * project: see `hostFiles` of `renderServer()`. For the files of the host
+ * that the host uses, `linkStylesheetsOf()`: by their paths, as
+ * `hostFiles`, with the URLs of their stylesheets.
+ */
+type StylesheetsQuestion = {
+  entry: string;
+  inline: boolean;
+  files: string[];
+} | {
+  hostFiles: string[];
+};
+/**
+ * What marks the `<link>` of a stylesheet of a file of the host, which
+ * `linkStylesheetsOf()` linked (client-graph.ts): the host's, not a page's,
+ * so a page that is left does not take it (document.ts).
+ */
+declare const graphStylesheetAttribute = "data-vitest-plugin-rsc-graph";
+/**
+ * What the loader tree of the route of a node names its page, where a page of
+ * the app has its file. Next looks up the stylesheets of the node by it.
+ */
+declare const componentPagePath = "vitest-plugin-rsc/component";
+/**
+ * The stylesheets of a route. For each file of a segment that has any, by the
+ * name the loader tree has for it without its extension, which is how Next
+ * looks them up: their paths under `/_next/`, and their CSS where the app has
+ * Next inline it (`experimental.inlineCss`). The name is the path of the file
+ * from the root of the project, `app/layout`: see `RouteSegment` in project.ts.
+ * The stylesheet of a `next/font` call has its font files too, under
+ * `/_next/`, which Next preloads with the segment.
+ */
+type Stylesheets = Record<string, {
+  path: string;
+  content?: string;
+  fonts?: string[];
+}[]>;
+/** What `builtFilesPath` has: the stylesheets and the modules of a build, as files of it. */
+type BuiltFiles = {
+  /** Where the browser asks for the files of the app, `/_next/`, from which Next links a stylesheet. */assetPath: string;
+  /**
+   * For each page route, by the name of its modules: the files of its
+   * stylesheets, per segment as `Stylesheets` has them, from the directory of
+   * the build. The route of a node has an empty list for the node, at
+   * `componentPagePath`: those are the stylesheets of the files of the host
+   * that render it, which the host names when it renders, see `hostFiles`.
+   */
+  routes: Record<string, Record<string, string[]>>;
+  /**
+   * For each file of the host that the rsc layer built, by its path from the
+   * root of the project, `host/button.demo.tsx`: the files of the
+   * stylesheets it imports, as the dev server walks them for `hostFiles` of
+   * `renderServer()`. In a build the files of the host are what `host.files`
+   * of `vitestPluginNext()` matches. An empty list for one without any.
+   */
+  hostFiles: Record<string, string[]>; /** The files of the rsc layer that `modules` names, from the directory of the build. */
+  chunks: string[];
+  /**
+   * For each page route, by the name of its modules: the files of the rsc
+   * layer that its entry loads, by their index in `chunks`, the entry's own
+   * first. Those of the segments and boundaries of its loader tree, and
+   * every one those import, but not one that a segment imports with
+   * `import()`, which loads only when the segment asks for it, nor one the
+   * page has before it loads a route: see route-chunks.ts.
+   */
+  modules: Record<string, number[]>;
+  /**
+   * For the stylesheet of each `next/font` call, by its file: the font files
+   * of the call, from the directory of the build. See `Stylesheets`.
+   */
+  fonts: Record<string, string[]>;
+};
+/**
+ * The key of a file of the host in `BuiltFiles.hostFiles`, of a path that
+ * the host names it by: from the root of the project, which `./` and `..`
+ * may be part of, or absolute. A build has no path of the machine, so an
+ * absolute path is the longest key that it ends with.
+ */
+declare function builtFileKey(file: string, keys: string[]): string | undefined;
+/**
+ * The stylesheets of a route of a static build that is served from
+ * `directory`, a URL: what the dev server answers at `stylesheetsEvent`. For
+ * the route of a node, the node has the stylesheets of `files`, the files of
+ * the host that render it (`hostFiles` of `renderServer()`), in their order,
+ * each once. A file that the build has none for, `missing` is told of.
+ *
+ * Next links a stylesheet at its path under the asset path, from the root of
+ * the site. A build can be served from any directory, so that path goes up to
+ * the root first when it has to: `/_next/../docs/_next/static/css/page.css`.
+ *
+ * Next inlines no CSS of a static build: what a stylesheet of it names, like a
+ * font, is named by the way from that stylesheet.
+ */
+declare function builtStylesheetsOf(built: BuiltFiles, entry: string, directory: string, files?: string[], missing?: (file: string) => void): Stylesheets;
+/**
+ * The stylesheets of a file of the host in a static build that is served
+ * from `directory`, a URL: those that `hostFiles` has for it by its key,
+ * `file`, as URLs. What the dev server answers for the file at
+ * `stylesheetsEvent`.
+ */
+declare function builtHostFileStylesheetsOf(built: BuiltFiles, file: string, directory: string): string[];
+//#endregion
+export { BuiltFiles, Stylesheets, StylesheetsQuestion, builtFileKey, builtFilesPath, builtHostFileStylesheetsOf, builtStylesheetsOf, componentPagePath, cssDirectory, cssVersionPattern, graphStylesheetAttribute, stylesheetOfUrl, stylesheetsChangedEvent, stylesheetsEvent };

package/dist/styles-shared.js

@@ -0,0 +1,124 @@
+//#region src/styles-shared.ts
+/**
+* The file of a static build with the files a page loads besides the layers:
+* the stylesheets and the modules of every page route, and the stylesheets
+* of every file of the host, in its directory.
+*/
+const builtFilesPath = "vitest-plugin-rsc/next-files.json";
+/**
+* Where the dev server answers the page with stylesheets, over the websocket
+* of the page (`askDevServer()` in ../utils.ts), for a `StylesheetsQuestion`.
+*/
+const stylesheetsEvent = "vitest-plugin-rsc:next-stylesheets";
+/**
+* What the dev server tells the page after a change of stylesheets that it
+* links, without class names: the URL of the version of now of each, which
+* the page moves every link of the stylesheet to (stylesheet-versions.ts).
+*/
+const stylesheetsChangedEvent = "vitest-plugin-rsc:next-stylesheets-changed";
+/** Where Next's build puts the CSS of an app, under `/_next/`. */
+const cssDirectory = "static/css";
+/**
+* The version of its CSS that the path of a stylesheet of the dev server has
+* after the directory, `static/css/<version>/app/globals.css`: see styles.ts.
+*/
+const cssVersionPattern = "[0-9a-f]{16}";
+const versionSegmentRE = new RegExp(`/${cssDirectory}/${cssVersionPattern}/`);
+/**
+* The stylesheet that a URL of a link is of, whatever its version and however
+* its path is encoded: the path of the URL without its version, decoded.
+* Nothing for a URL that is no stylesheet of the dev server.
+*/
+function stylesheetOfUrl(url) {
+	const { pathname } = new URL(url, "http://n");
+	if (!versionSegmentRE.test(pathname)) return void 0;
+	try {
+		return pathname.replace(versionSegmentRE, `/${cssDirectory}/`).split("/").map(decodeURIComponent).join("/");
+	} catch {
+		return;
+	}
+}
+/**
+* What marks the `<link>` of a stylesheet of a file of the host, which
+* `linkStylesheetsOf()` linked (client-graph.ts): the host's, not a page's,
+* so a page that is left does not take it (document.ts).
+*/
+const graphStylesheetAttribute = "data-vitest-plugin-rsc-graph";
+/**
+* What the loader tree of the route of a node names its page, where a page of
+* the app has its file. Next looks up the stylesheets of the node by it.
+*/
+const componentPagePath = "vitest-plugin-rsc/component";
+/**
+* The key of a file of the host in `BuiltFiles.hostFiles`, of a path that
+* the host names it by: from the root of the project, which `./` and `..`
+* may be part of, or absolute. A build has no path of the machine, so an
+* absolute path is the longest key that it ends with.
+*/
+function builtFileKey(file, keys) {
+	file = file.replaceAll("\\", "/");
+	if (file.startsWith("/") || /^[a-z]:\//i.test(file)) {
+		let found;
+		for (const key of keys) if (file.endsWith(`/${key}`) && key.length > (found?.length ?? -1)) found = key;
+		return found;
+	}
+	const segments = [];
+	for (const segment of file.split("/")) {
+		if (segment === "" || segment === ".") continue;
+		if (segment === ".." && segments.length > 0 && segments.at(-1) !== "..") segments.pop();
+		else segments.push(segment);
+	}
+	const key = segments.join("/");
+	return keys.includes(key) ? key : void 0;
+}
+/**
+* The stylesheets of a route of a static build that is served from
+* `directory`, a URL: what the dev server answers at `stylesheetsEvent`. For
+* the route of a node, the node has the stylesheets of `files`, the files of
+* the host that render it (`hostFiles` of `renderServer()`), in their order,
+* each once. A file that the build has none for, `missing` is told of.
+*
+* Next links a stylesheet at its path under the asset path, from the root of
+* the site. A build can be served from any directory, so that path goes up to
+* the root first when it has to: `/_next/../docs/_next/static/css/page.css`.
+*
+* Next inlines no CSS of a static build: what a stylesheet of it names, like a
+* font, is named by the way from that stylesheet.
+*/
+function builtStylesheetsOf(built, entry, directory, files = [], missing = () => {}) {
+	const from = built.assetPath.split("/").filter(Boolean);
+	const pathOf = (file) => {
+		const to = `${decodeURIComponent(new URL(directory).pathname)}${file}`.split("/").filter(Boolean);
+		let common = 0;
+		while (common < from.length && common < to.length - 1 && from[common] === to[common]) common++;
+		return [...from.slice(common).map(() => ".."), ...to.slice(common)].join("/");
+	};
+	const segments = { ...built.routes[entry] };
+	if (segments["vitest-plugin-rsc/component"] && files.length > 0) {
+		const keys = Object.keys(built.hostFiles);
+		const ofFiles = files.flatMap((file) => {
+			const key = builtFileKey(file, keys);
+			if (key === void 0) missing(file);
+			return key === void 0 ? [] : built.hostFiles[key];
+		});
+		segments[componentPagePath] = [.../* @__PURE__ */ new Set([...ofFiles, ...segments[componentPagePath]])];
+	}
+	return Object.fromEntries(Object.entries(segments).map(([segment, stylesheets]) => [segment, stylesheets.map((file) => {
+		const fonts = built.fonts[file];
+		return fonts ? {
+			path: pathOf(file),
+			fonts: fonts.map(pathOf)
+		} : { path: pathOf(file) };
+	})]));
+}
+/**
+* The stylesheets of a file of the host in a static build that is served
+* from `directory`, a URL: those that `hostFiles` has for it by its key,
+* `file`, as URLs. What the dev server answers for the file at
+* `stylesheetsEvent`.
+*/
+function builtHostFileStylesheetsOf(built, file, directory) {
+	return (built.hostFiles[file] ?? []).map((stylesheet) => new URL(stylesheet, directory).href);
+}
+//#endregion
+export { builtFileKey, builtFilesPath, builtHostFileStylesheetsOf, builtStylesheetsOf, componentPagePath, cssDirectory, cssVersionPattern, graphStylesheetAttribute, stylesheetOfUrl, stylesheetsChangedEvent, stylesheetsEvent };

package/dist/styles.d.ts

@@ -0,0 +1,102 @@
+import { ComponentRoute, NextLayer, NextProject, NextRoute } from "./project.js";
+import { EnvironmentModuleNode, Plugin, ViteDevServer } from "vite";
+
+//#region src/styles.d.ts
+/** The id of a stylesheet that Next links, of the id of its file, in a build or not. */
+declare const linked: (id: string, build?: boolean) => string;
+/**
+ * Whether a module is that of a stylesheet that Next links, whose links the
+ * page moves to the version of now after a change
+ * (`stylesheetsChangedEvent`). One without class names, which its module
+ * exports as a CSS module does, and so exports nothing. Not with
+ * `experimental.inlineCss`, with which Next puts the CSS of a page load in a
+ * `<style>`, which is no link: the page loads again for it.
+ */
+declare const movesItsLinks: (node: EnvironmentModuleNode) => boolean;
+/**
+ * Whether a stylesheet changes in place after a change, and what imports it
+ * sees nothing of it: one that accepts its own update, which Vite swaps as
+ * its `<style>`, and the module of a stylesheet that Next links without
+ * class names, whose links the page moves to the version of now
+ * (`stylesheetsChangedEvent`).
+ */
+declare const changesInPlace: (node: EnvironmentModuleNode) => boolean;
+declare function isCode(id: string, pageExtensions: string[]): boolean;
+/**
+ * The order of the cascade layers of a stylesheet, kept where Vite inlines
+ * its `@import`s. A layer comes in the order in which a stylesheet names it
+ * first, and an `@import` with `layer()` names it before an `@layer`
+ * statement that follows the import. `postcss-import`, with which Vite
+ * inlines an import, puts such a statement before the CSS of the import, so
+ * that its layers come first. With a statement of every layer of the imports
+ * at the top, which can precede an `@import`, the order is the stylesheet's
+ * own. Not that of a stylesheet it imports, which `postcss-import` reads
+ * itself, nor of a layer without a name, which a statement cannot name.
+ */
+declare function declareImportedLayers(css: string): string;
+/**
+ * The exports of Vite's module for a stylesheet, without the code that puts
+ * the CSS in the document.
+ *
+ * Vite's module for a client (`vite:css-post`) puts the CSS in a `<style>`,
+ * and has the class names of a CSS module as its exports, as Vite documents
+ * them. Its module for a server is those exports, with the constants they
+ * are made of: one for a class name that is no name of a variable, like
+ * `switch`. So the exports are kept, with the statements they use, and the
+ * rest is not. That holds as long as what they use is not the code of the
+ * `<style>`: an import, or `import.meta`.
+ */
+declare function exportsOfStylesheet(code: string, id: string): string;
+type PageRoute = NextRoute | ComponentRoute;
+type StylesOptions = {
+  getProject(): NextProject; /** The Vite environment of each layer. */
+  environments: Record<NextLayer, string>;
+  /**
+   * Whether a file is server code in the rsc layer, which has the test files
+   * too: the app's, and that of the packages it imports.
+   */
+  isServerCode(file: string): boolean;
+  /**
+   * Whether a file is the host's: a test file or a setup file of Vitest, or a
+   * file of another host.
+   */
+  isHostFile(file: string): boolean; /** Whether a file is of a package of the host, like Vitest's runtime. */
+  isHostPackageFile(file: string): boolean; /** The page routes, by the name of their modules. */
+  pageRoutes(): Map<string, PageRoute>; /** The id of the entry of a page route in the rsc layer, by the name of its modules. */
+  entryIdOf(route: string): string; /** The ids of the modules that list the routes: what leads from a test file to every route. */
+  lists: string[];
+};
+type Styles = {
+  plugins: Plugin[];
+  /**
+   * Has the dev server compile a page route, by the name of its modules, as
+   * the first page load of it does: its modules in both layers, the CSS it
+   * links and the modules of that CSS. See routes-ahead.ts.
+   */
+  compileRoute(vite: ViteDevServer, entry: string): Promise<void>;
+  /**
+   * What a static build has of the stylesheets, and the file that lists them
+   * with the modules of every route, once it is built, by its path in the build.
+   */
+  builtFiles(): {
+    pathname: string;
+    body: Uint8Array;
+  }[];
+};
+declare function createStyles(options: StylesOptions): Styles;
+/**
+ * The key of a file of the host in `hostFiles` of `BuiltFiles`, by the
+ * id of its module in a build: its path from the root of the project, the
+ * same on every machine. Nothing for a file on another drive of Windows,
+ * which has no way from the root: its path is the machine's.
+ */
+declare function builtHostFileKey(id: string, root: string): string | undefined;
+/**
+ * The key of a module of a build, as `builtHostFileKey()` has it, when the
+ * module is a file of the host: matched by its path from the root, as
+ * `host.files` are from the root as the config has it. Nothing for a module
+ * that is no file, or one with a query.
+ */
+declare function builtHostFileOf(id: string, root: string, isHostFile: (file: string) => boolean): string | undefined;
+//#endregion
+export { Styles, StylesOptions, builtHostFileKey, builtHostFileOf, changesInPlace, createStyles, declareImportedLayers, exportsOfStylesheet, isCode, linked, movesItsLinks };