netjes 0.0.2 → 0.0.4

package/README.md

@@ -12,12 +12,12 @@ cd my-app
 npm run dev          # http://localhost:5080
 ```
 
-`netjes new` writes an ASP.NET Core app with React pages, Tailwind CSS, TanStack Query, zod, Vitest and Docker files, and references `netjes` and `Netjes` at the same exact version.
+`netjes new` writes an ASP.NET Core app with React pages, Tailwind CSS, TanStack Query, zod, Vitest, a C# test project, a Playwright suite and Docker files, and references `netjes` and `Netjes` at the same exact version.
 
 ## Add it to a project
 
 ```bash
-npm install netjes@0.0.2 react react-dom zod @tanstack/react-query
+npm install netjes@0.0.4 react react-dom zod @tanstack/react-query
 npm install -D vite tailwindcss @tailwindcss/vite
 ```
 
@@ -31,25 +31,27 @@ export default defineConfig({ plugins: [netjes()] });
 
 Tailwind CSS and the TanStack Query client are on by default; `netjes({ tailwind: false, query: false })` turns them off, and then they need not be installed. `vitest`, `jsdom`, `@testing-library/react` and `web-vitals` are optional peers, used when installed. Use the version of `netjes` that matches the app's `Netjes` NuGet package; `npx netjes info` checks it.
 
+A page package, an npm package that brings pages for the app to mount at a prefix, is listed in the plugin's options, `netjes({ packages: ['@acme/help-center'] })`, so the app's build compiles its pages and its Tailwind classes, with Tailwind on ([Page packages](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/guides/page-packages.md)).
+
 ## Entry points
 
 | Import | What it holds |
 |---|---|
-| `netjes` | Components and hooks: `Link`, `Form`, `Image`, `Script`, `definePage`, `useAction`, `useRouter` and the rest |
+| `netjes` | Components and hooks: `Link`, `Form`, `Image`, `Script`, `definePage`, `useAction`, `useRouter` and the rest, `mounted`, which a page package's generated file calls for links below its mount, and `CSP_SCRIPT_HASHES`, the hashes of Netjes's inline scripts for a Content-Security-Policy without a nonce |
 | `netjes/vite` | The Vite plugin |
-| `netjes/testing` | `createTestApp()`, for rendering pages and components in Vitest |
+| `netjes/testing` | `createTestApp()`, for rendering pages and components in Vitest, and `renderDocument()` and `inlineScriptHashes()`, for a page's whole document and the inline scripts in it |
 | `netjes/vitals` | `useReportWebVitals` and `<WebVitals />` |
 | `netjes/zod` | `deferred(schema)`, for values that loaders stream with `Page.Defer` |
 | `netjes` (bin) | The command: `new`, `dev`, `build`, `start`, `generate`, `routes`, `export`, `info`, `agents` |
 
-Each import is an ES module with its type declarations, so an app's `tsc` reads the declarations and checks only the app's own code, also under stricter compiler options such as `exactOptionalPropertyTypes` or `noPropertyAccessFromIndexSignature` (see [TypeScript setup](https://github.com/DennisVerhoeven/netjes/blob/main/docs/reference/vite-plugin.md#typescript-setup)). The TypeScript sources are in the package too, for the source maps: an editor's go to definition and a stack trace lead to them.
+Each import is an ES module with its type declarations, so an app's `tsc` reads the declarations and checks only the app's own code, also under stricter compiler options such as `exactOptionalPropertyTypes` or `noPropertyAccessFromIndexSignature` (see [TypeScript setup](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/reference/vite-plugin.md#typescript-setup)). The TypeScript sources are in the package too, for the source maps: an editor's go to definition and a stack trace lead to them.
 
 ## Documentation
 
-- [Getting started](https://github.com/DennisVerhoeven/netjes/blob/main/docs/getting-started.md)
-- [All guides](https://github.com/DennisVerhoeven/netjes/blob/main/docs/README.md)
-- [React API](https://github.com/DennisVerhoeven/netjes/blob/main/docs/reference/react-api.md)
-- [Vite plugin](https://github.com/DennisVerhoeven/netjes/blob/main/docs/reference/vite-plugin.md)
-- [The netjes command](https://github.com/DennisVerhoeven/netjes/blob/main/docs/reference/cli.md)
+- [Getting started](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/getting-started.md)
+- [All guides](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/README.md)
+- [React API](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/reference/react-api.md)
+- [Vite plugin](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/reference/vite-plugin.md)
+- [The netjes command](https://github.com/DennisVerhoeven/netjes/blob/v0.0.4/docs/reference/cli.md)
 
-Report bugs in the [issue tracker](https://github.com/DennisVerhoeven/netjes/issues), and security problems privately, as [SECURITY.md](https://github.com/DennisVerhoeven/netjes/blob/main/SECURITY.md) describes. MIT licensed.
+Report bugs in the [issue tracker](https://github.com/DennisVerhoeven/netjes/issues), and security problems privately, as the [security policy](https://github.com/DennisVerhoeven/netjes/security/policy) describes. MIT licensed.

package/cli/agents.mjs

@@ -4,7 +4,7 @@
 import { existsSync, statSync } from 'node:fs';
 import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { fillNames, projectNames, readTemplate, skillFiles } from './scaffold.mjs';
+import { fillNames, keepSections, projectNames, readTemplate, skillFiles } from './scaffold.mjs';
 
 /**
  * The app's names: from `--name`, else its one project file (whose name is its root namespace), else its directory,
@@ -26,6 +26,20 @@ async function namesOf(io, dir, name) {
   return projectNames(folder);
 }
 
+/**
+ * Whether the app's package.json has that script; one that is missing or not valid JSON has none.
+ * @param {string} dir
+ * @param {string} name
+ */
+async function hasScript(dir, name) {
+  try {
+    const manifest = /** @type {{ scripts?: Record<string, unknown> }} */ (JSON.parse(await readFile(path.join(dir, 'package.json'), 'utf8')));
+    return typeof manifest.scripts?.[name] === 'string';
+  } catch {
+    return false;
+  }
+}
+
 /**
  * @param {import('./main.mjs').CliIo} io
  * @param {string} dir
@@ -38,8 +52,17 @@ export async function agents(io, dir, options) {
     return 1;
   }
   const names = await namesOf(io, dir, options.name);
+  // AGENTS.md sends an agent only to the test suites this app has where `netjes new` puts them, and to the script
+  // it names.
+  const has = {
+    tests: existsSync(path.join(dir, 'tests', `${names.dotnet}.Tests`, `${names.dotnet}.Tests.csproj`)),
+    e2e:
+      existsSync(path.join(dir, 'playwright.config.ts')) &&
+      statSync(path.join(dir, 'e2e'), { throwIfNoEntry: false })?.isDirectory() === true &&
+      (await hasScript(dir, 'test:e2e')),
+  };
   const files = [
-    { path: 'AGENTS.md', text: fillNames(await readTemplate('_AGENTS.md'), names) },
+    { path: 'AGENTS.md', text: fillNames(keepSections(await readTemplate('_AGENTS.md'), has), names) },
     { path: 'CLAUDE.md', text: await readTemplate('_CLAUDE.md') },
     ...(await skillFiles()),
   ];

package/cli/commands.mjs

@@ -3,7 +3,7 @@
 // (NETJES_COMMAND=generate|routes|export) it binds a throwaway loopback port, writes its result and exits. Only export
 // starts the Node sidecar, to render the pages.
 import { existsSync, statSync } from 'node:fs';
-import { mkdtemp, readFile, rm } from 'node:fs/promises';
+import { mkdtemp, readFile, realpath, rm } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { agents } from './agents.mjs';
@@ -116,6 +116,42 @@ async function build(io, cwd) {
   return 0;
 }
 
+/**
+ * Whether a path that path.relative returned leads below the folder it started from: not the folder itself (''), not
+ * up out of it (`..`, `../site`) and not on another drive (absolute). A name that only starts with two dots (`..site`)
+ * is below.
+ * @param {string} relative
+ */
+function isBelow(relative) {
+  return relative !== '' && relative !== '..' && !relative.startsWith(`..${path.sep}`) && !path.isAbsolute(relative);
+}
+
+/**
+ * Whether `target` is a folder inside the app in `app`, comparing paths as .NET does: on macOS and Windows it
+ * upper-cases each letter, so paths that differ only in case are one folder there (and a long s, ſ, is an s).
+ * @param {string} app
+ * @param {string} target
+ */
+function insideApp(app, target) {
+  const fold = process.platform === 'darwin' || process.platform === 'win32';
+  return isBelow(fold ? path.relative(app.toUpperCase(), target.toUpperCase()) : path.relative(app, target));
+}
+
+/**
+ * The folder an app run in `cwd` sees as its own: its working directory, which macOS and Linux report by the real
+ * path, as getcwd() does (every symlink resolved, each name as the disk spells it), and Windows as it was given. `cwd`
+ * itself when its real path cannot be read.
+ * @param {string} cwd
+ */
+async function appFolder(cwd) {
+  if (process.platform === 'win32') return cwd;
+  try {
+    return await realpath(cwd);
+  } catch {
+    return cwd;
+  }
+}
+
 /**
  * `target` as the user would type it from `from`: relative when it is below, else absolute.
  * @param {string} from
@@ -123,7 +159,7 @@ async function build(io, cwd) {
  */
 function displayPath(from, target) {
   const relative = path.relative(from, target);
-  return relative.startsWith('..') || path.isAbsolute(relative) ? target : relative || '.';
+  return relative === '' ? '.' : isBelow(relative) ? relative : target;
 }
 
 /**
@@ -204,6 +240,8 @@ function layout(name) {
     ['Features/', 'the C# side, one folder per feature: loaders and server actions'],
     ['Program.cs', `the ASP.NET Core app (${name}.csproj)`],
     ['generated/netjes.ts', 'types and zod schemas from C#, rewritten by netjes generate; never edit it'],
+    [`tests/${name}.Tests/`, `C# tests of loaders and actions, run by dotnet test tests/${name}.Tests`],
+    ['e2e/', 'Playwright tests against a development and a production server, run by npm run test:e2e'],
     ['Dockerfile', 'and the docker-compose files: Docker for development and production'],
   ];
   const width = Math.max(...rows.map(([entry]) => (entry ?? '').length)) + 2;
@@ -213,7 +251,7 @@ function layout(name) {
 /** @type {Record<string, Command>} */
 export const COMMANDS = {
   new: {
-    summary: 'Create an app: ASP.NET Core with React pages, Tailwind CSS, TanStack Query, zod and Vitest',
+    summary: 'Create an app: ASP.NET Core with React pages, Tailwind CSS, TanStack Query, zod, Vitest, xUnit and Playwright',
     args: '<dir>',
     arguments: { '<dir>': { description: 'The folder to create the app in; it must not exist yet, or be empty' } },
     options: {
@@ -401,7 +439,7 @@ export const COMMANDS = {
   },
 
   export: {
-    summary: 'Build, then write every page as static HTML into a folder',
+    summary: 'Build, then write every page, and each endpoint marked IncludeInExport, into a folder as static files',
     args: '[dir]',
     arguments: { '[dir]': { description: 'The folder to write the site to, inside the app', default: 'out' } },
     options: {
@@ -410,7 +448,19 @@ export const COMMANDS = {
     examples: ['netjes export', 'netjes export site --no-build'],
     project: () => true,
     async run({ io, cwd, args, options }) {
+      // A relative folder is resolved against cwd as the app will see it, so that a --cwd through a symlink still
+      // names a folder inside the app; the app compares paths as text.
+      const app = await appFolder(cwd);
+      const output = path.resolve(app, args[0] ?? 'out');
       if (!options['no-build']) {
+        // The app decides where the export may write (StaticExportService.OutputProblems, ADR 0007), before it
+        // renders anything: only it knows Netjes:Root and the folders it needs. A folder outside the app is refused
+        // here too, before the build, which runs in cwd, so the app is there. With --no-build only the app checks,
+        // since Netjes:Root can put the app above cwd.
+        if (!insideApp(app, output)) {
+          printError(io, `netjes export: the output folder ${output} must be inside the app (${app}), such as 'out'; nothing was built`);
+          return 1;
+        }
         const code = await build(io, cwd);
         if (code !== 0) return code;
       }
@@ -423,7 +473,7 @@ export const COMMANDS = {
           ...commandEnv(io),
           ASPNETCORE_ENVIRONMENT: io.env.ASPNETCORE_ENVIRONMENT ?? 'Production',
           NETJES_COMMAND: 'export',
-          NETJES_OUTPUT: path.resolve(cwd, args[0] ?? 'out'),
+          NETJES_OUTPUT: output,
         },
       });
     },
@@ -451,7 +501,7 @@ export const COMMANDS = {
       name: {
         type: 'string',
         value: '<Name>',
-        description: "The app's name in AGENTS.md",
+        description: "The app's name in AGENTS.md, and the <Name> of the test project tests/<Name>.Tests it looks for",
         default: 'the name of its .csproj, else the folder name',
       },
       force: { type: 'boolean', description: 'Replace the files that exist', default: 'off: keep them' },

package/cli/help.mjs

@@ -6,7 +6,12 @@
  * @typedef {import('./commands.mjs').OptionSpec} OptionSpec
  */
 
-export const DOCS_URL = 'https://github.com/DennisVerhoeven/netjes/blob/main/docs/reference/cli.md';
+/**
+ * The CLI reference at the release tag of `version`: the page on main can describe commands and options that this
+ * version does not have.
+ * @param {string} version
+ */
+export const docsUrl = (version) => `https://github.com/DennisVerhoeven/netjes/blob/v${version}/docs/reference/cli.md`;
 
 /**
  * Options every command takes.
@@ -55,7 +60,7 @@ export function overviewHelp(commands, version) {
     columns(Object.entries(GLOBAL_OPTIONS).map(([name, option]) => [label(name, option), describe(option)])),
     '',
     'Run `netjes help <command>` for its options and examples.',
-    `Docs: ${DOCS_URL}`,
+    `Docs: ${docsUrl(version)}`,
     '',
   ].join('\n');
 }

package/cli/info.mjs

@@ -24,8 +24,10 @@ export const MIN_DOTNET = 10;
 export const DOTNET_DOWNLOAD = 'https://dotnet.microsoft.com/download';
 /** The npm packages a Netjes app runs on. */
 const PACKAGES = ['netjes', 'vite', 'react', 'react-dom'];
-/** Folders that hold no C# source of the app's own. */
+/** Folders that hold no C# source of the app's own, at any depth. */
 const SKIPPED = new Set(['bin', 'obj', 'node_modules', 'dist', 'out']);
+/** The folder at the app's root that holds its test project, which the app's project leaves out, so its code generates no types. */
+const TEST_PROJECTS = 'tests';
 /** Files written within this long of each other, as a checkout or `netjes new` does, count as written together. */
 const SAME_TIME_MS = 2000;
 /** The Next.js pages router's special files, at the root of pages/, by the App Router file that takes their place. */
@@ -56,31 +58,166 @@ function parseVersion(version) {
 const compare = (a, b) => a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
 
 /**
- * Whether `version` is in `range`, for the forms package.json ranges usually take (^1.2.3, ~1.2.3, >=1, 1.2.3, *,
- * and || between them). A form it does not know passes: only a definite mismatch is reported.
+ * A version as npm reads one: major.minor.patch, a prerelease and build metadata, which no comparison looks at.
+ * @typedef {{ main: [number, number, number]; pre: (string | number)[] }} SemVer
+ * @typedef {{ op: '<' | '<=' | '>' | '>=' | '='; version: SemVer }} Comparator
+ */
+
+/** A number in a version: no leading zeros. */
+const NUMBER = '0|[1-9]\\d*';
+const IDENTIFIER = `(?:${NUMBER}|\\d*[A-Za-z-][0-9A-Za-z-]*)`;
+const PRERELEASE = `(?:-(${IDENTIFIER}(?:\\.${IDENTIFIER})*))?`;
+const BUILD = '(?:\\+[0-9A-Za-z-]+(?:\\.[0-9A-Za-z-]+)*)?';
+const SEMVER = new RegExp(`^v?(${NUMBER})\\.(${NUMBER})\\.(${NUMBER})${PRERELEASE}${BUILD}$`);
+/** A version in a range, which may leave out its minor and patch, or write them as x, X or *. */
+const PARTIAL = new RegExp(`^v?(${NUMBER}|[xX*])(?:\\.(${NUMBER}|[xX*])(?:\\.(${NUMBER}|[xX*])${PRERELEASE}${BUILD})?)?$`);
+const OPERATOR = /^(<=|>=|<|>|=|\^|~>|~)?/;
+
+/** @param {string} pre @returns {(string | number)[]} */
+const identifiers = (pre) => (pre ? pre.split('.').map((id) => (/^\d+$/.test(id) ? Number(id) : id)) : []);
+
+/** @param {string} version @returns {SemVer | null} */
+function parseSemver(version) {
+  const match = SEMVER.exec(version.trim());
+  return match ? { main: [Number(match[1]), Number(match[2]), Number(match[3])], pre: identifiers(match[4] ?? '') } : null;
+}
+
+/** @param {SemVer} a @param {SemVer} b */
+function compareSemver(a, b) {
+  const main = compare(a.main, b.main);
+  if (main !== 0) return main;
+  // A version with a prerelease comes before the version itself, and identifiers compare one by one: numbers by value,
+  // and before words.
+  if (a.pre.length === 0 || b.pre.length === 0) return b.pre.length - a.pre.length;
+  for (let i = 0; i < Math.max(a.pre.length, b.pre.length); i++) {
+    const [x, y] = [a.pre[i], b.pre[i]];
+    if (x === undefined || y === undefined) return x === undefined ? -1 : 1;
+    if (x === y) continue;
+    if (typeof x !== typeof y) return typeof x === 'number' ? -1 : 1;
+    return x < y ? -1 : 1;
+  }
+  return 0;
+}
+
+/** @param {number} major @param {number} minor @param {number} patch @param {(string | number)[]} [pre] @returns {SemVer} */
+const semver = (major, minor, patch, pre = []) => ({ main: [major, minor, patch], pre });
+/** The lowest version above every prerelease of a release below this one: what npm's `<1.3.0-0` bounds are. */
+const before = (/** @type {number} */ major, /** @type {number} */ minor, /** @type {number} */ patch) => semver(major, minor, patch, [0]);
+
+/**
+ * The comparators one comparator of a range stands for, as npm reads it: `^1.2` is `>=1.2.0 <2.0.0-0`. Null for one
+ * that is none. With `includePrerelease`, a lower bound that the range leaves to npm (`1.2` in `^1.2`, `~1.2`, `>=1.2`)
+ * is the lowest prerelease, `>=1.2.0-0`, as npm makes it.
+ * @param {string} token
+ * @param {boolean} includePrerelease
+ * @returns {Comparator[] | null}
+ */
+function comparators(token, includePrerelease) {
+  const op = OPERATOR.exec(token)?.[1] ?? '';
+  const match = PARTIAL.exec(token.slice(op.length));
+  if (!match) return null;
+  const [major, minor, patch] = [match[1], match[2], match[3]].map((part) => (part === undefined || /^[xX*]$/.test(part) ? null : Number(part)));
+  // A number after an x, as in `1.x.3`, makes it none.
+  if ((major === null && (minor ?? patch ?? null) !== null) || (minor === null && (patch ?? null) !== null)) return null;
+  const pre = identifiers(match[4] ?? '');
+  /** @param {number} major @param {number} minor @returns {SemVer} */
+  const lowest = (major, minor) => semver(major, minor, 0, includePrerelease ? [0] : []);
+  if (major === null || major === undefined) return op === '<' || op === '>' ? [{ op: '<', version: before(0, 0, 0) }] : [];
+  if (minor === null || minor === undefined) {
+    /** @type {Record<string, Comparator[]>} */
+    const byMajor = {
+      '>': [{ op: '>=', version: lowest(major + 1, 0) }],
+      '>=': [{ op: '>=', version: lowest(major, 0) }],
+      '<': [{ op: '<', version: before(major, 0, 0) }],
+      '<=': [{ op: '<', version: before(major + 1, 0, 0) }],
+    };
+    return byMajor[op] ?? [{ op: '>=', version: lowest(major, 0) }, { op: '<', version: before(major + 1, 0, 0) }];
+  }
+  if (patch === null || patch === undefined) {
+    /** @type {Record<string, Comparator[]>} */
+    const byMinor = {
+      '>': [{ op: '>=', version: lowest(major, minor + 1) }],
+      '>=': [{ op: '>=', version: lowest(major, minor) }],
+      '<': [{ op: '<', version: before(major, minor, 0) }],
+      '<=': [{ op: '<', version: before(major, minor + 1, 0) }],
+      '^': [{ op: '>=', version: lowest(major, minor) }, { op: '<', version: major > 0 ? before(major + 1, 0, 0) : before(0, minor + 1, 0) }],
+    };
+    return byMinor[op] ?? [{ op: '>=', version: lowest(major, minor) }, { op: '<', version: before(major, minor + 1, 0) }];
+  }
+  const version = semver(major, minor, patch, pre);
+  switch (op) {
+    case '^': {
+      // npm's caret allows the changes that keep the first non-zero part: ^0.0.4 is 0.0.4 alone, and its prereleases.
+      const upper = major > 0 ? before(major + 1, 0, 0) : minor > 0 ? before(0, minor + 1, 0) : before(0, 0, patch + 1);
+      return [{ op: '>=', version }, { op: '<', version: upper }];
+    }
+    case '~':
+    case '~>':
+      return [{ op: '>=', version }, { op: '<', version: before(major, minor + 1, 0) }];
+    case '':
+      return [{ op: '=', version }];
+    default:
+      return [{ op: /** @type {Comparator['op']} */ (op), version }];
+  }
+}
+
+/**
+ * The comparators of one part of a range, between `||`s: a hyphen range (`1.2 - 2.3.4`), or comparators that a version
+ * has to pass all of, separated by spaces. Null for a part that is none.
+ * @param {string} part
+ * @param {boolean} includePrerelease
+ * @returns {Comparator[] | null}
+ */
+function comparatorSet(part, includePrerelease) {
+  const hyphen = /^(\S+)\s+-\s+(\S+)$/.exec(part);
+  if (hyphen) {
+    // From the first version, up to and with the second: `<=2.3` is below 2.4.0, as npm reads a partial version there.
+    // With prereleases included, npm starts a hyphen range at the first version's lowest prerelease, unless it names one.
+    const from = comparators(`>=${hyphen[1]}`, includePrerelease)?.map((c) =>
+      includePrerelease && c.version.pre.length === 0 ? { ...c, version: { ...c.version, pre: [0] } } : c,
+    );
+    const to = comparators(`<=${hyphen[2]}`, includePrerelease);
+    return from && to ? [...from, ...to] : null;
+  }
+  // `>= 1.2.3` is `>=1.2.3`.
+  const tokens = part.replace(/(<=|>=|<|>|=|\^|~>|~)\s+/g, '$1').split(/\s+/).filter(Boolean);
+  /** @type {Comparator[]} */
+  const set = [];
+  for (const token of tokens) {
+    const parsed = comparators(token, includePrerelease);
+    if (!parsed) return null;
+    set.push(...parsed);
+  }
+  return set;
+}
+
+/** @param {SemVer} version @param {Comparator} comparator */
+function passes(version, { op, version: bound }) {
+  const order = compareSemver(version, bound);
+  return op === '<' ? order < 0 : op === '<=' ? order <= 0 : op === '>' ? order > 0 : op === '>=' ? order >= 0 : order === 0;
+}
+
+/**
+ * Whether `version` is in `range`, as npm reads ranges: `^`, `~`, `x` and partial versions, `<`, `<=`, `>`, `>=` and
+ * `=`, comparators separated by spaces, hyphen ranges and `||`. `^0.0.4` is `>=0.0.4 <0.0.5-0`, and a prerelease is in
+ * a range only when a comparator names a prerelease of the same major.minor.patch: `0.0.5-rc.1` is not in `^0.0.4`.
+ * Build metadata (`+sha`) is left out. In strict mode a range or a version that is none satisfies nothing; otherwise
+ * it passes, so that only a definite mismatch is reported. With `includePrerelease`, as npm checks `engines`, a
+ * prerelease is in a range by its place in the order alone: `24.16.0-rc.1` is in `^24.15.0`.
  * @param {string | undefined} version
  * @param {string} range
+ * @param {{ strict?: boolean; includePrerelease?: boolean }} [options]
  */
-export function satisfies(version, range) {
-  const have = parseVersion(version);
-  if (!have) return true;
-  return range.split('||').some((part) => {
-    const match = /^\s*(\^|~|>=|=)?\s*v?(\d+)(?:\.(\d+))?(?:\.(\d+))?\s*$/.exec(part);
-    if (!match) return true;
-    /** @type {[number, number, number]} */
-    const want = [Number(match[2]), Number(match[3] ?? 0), Number(match[4] ?? 0)];
-    const atLeast = compare(have, want) >= 0;
-    switch (match[1]) {
-      case '>=':
-        return atLeast;
-      case '^':
-        return atLeast && (want[0] > 0 ? have[0] === want[0] : have[1] === want[1]);
-      case '~':
-        return atLeast && have[0] === want[0] && have[1] === want[1];
-      default:
-        return match[3] === undefined ? have[0] === want[0] : compare(have, want) === 0;
-    }
-  });
+export function satisfies(version, range, { strict = false, includePrerelease = false } = {}) {
+  const have = parseSemver(version ?? '');
+  const sets = range.split('||').map((part) => comparatorSet(part.trim(), includePrerelease));
+  if (!have || sets.some((set) => set === null)) return !strict;
+  return sets.some(
+    (set) =>
+      set !== null &&
+      set.every((comparator) => passes(have, comparator)) &&
+      (includePrerelease || have.pre.length === 0 || set.some(({ version: bound }) => bound.pre.length > 0 && compare(bound.main, have.main) === 0)),
+  );
 }
 
 /** @param {string} file @returns {Promise<any>} */
@@ -97,7 +234,8 @@ async function readJson(file) {
  * @returns {Check}
  */
 export function checkNode(version) {
-  if (satisfies(version, NODE_RANGE)) return ok(`Node.js ${version}`);
+  // A prerelease of Node.js is checked by its place in the order, as npm checks a package's engines.
+  if (satisfies(version, NODE_RANGE, { includePrerelease: true })) return ok(`Node.js ${version}`);
   const major = parseVersion(version)?.[0] ?? 0;
   const fix = `Install a Node.js release that matches ${NODE_RANGE}: ${NODE_DOWNLOAD}`;
   // The odd release lines between the supported ones (23, 25) are short-lived; they may work, but are not supported.
@@ -234,6 +372,25 @@ async function checkPackages(cwd, cliVersion) {
   return { checks, netjes: netjes?.version };
 }
 
+/** @param {string} text */
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * The project file's PackageReference of the NuGet package `name`, in any case as NuGet compares ids: the Version it
+ * gives, and that version when it is an exact one, 1.2.3 or [1.2.3]. A range, a floating version or an MSBuild property
+ * such as $(NetjesVersion) is resolved by NuGet and MSBuild, which this does not repeat, so it has no exact version.
+ * Null when the project does not reference the package.
+ * @param {string} text
+ * @param {string} name
+ * @returns {{ reference: string | undefined; version: string | undefined } | null}
+ */
+function packageReference(text, name) {
+  const element = new RegExp(`<PackageReference\\s+[^>]*Include="${escapeRegExp(name)}"[^>]*>`, 'i').exec(text)?.[0];
+  if (!element) return null;
+  const reference = /\sVersion="([^"]*)"/i.exec(element)?.[1];
+  return { reference, version: /^\[?(\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?)\]?$/.exec(reference?.trim() ?? '')?.[1] };
+}
+
 /**
  * How the project file references Netjes, and whether that is the version of the npm package.
  * @param {string} cwd
@@ -251,17 +408,14 @@ function checkReference(cwd, csproj, text, npmVersion, cliVersion) {
       ? ok(`${csproj} references the Netjes checkout at ${file}`)
       : fail(`${csproj} references Netjes at ${file}, which does not exist`, 'Point its ProjectReference (and the Netjes.targets import) at src/Netjes in a Netjes checkout');
   }
-  const element = /<PackageReference\s+[^>]*Include="Netjes"[^>]*>/i.exec(text)?.[0];
-  if (!element) {
+  const found = packageReference(text, 'Netjes');
+  if (!found) {
     return warn(
       `${csproj} does not reference the Netjes package`,
       `Add <PackageReference Include="Netjes" Version="[${npmVersion ?? cliVersion}]" />, unless a Directory.Packages.props does`,
     );
   }
-  const reference = /\sVersion="([^"]*)"/i.exec(element)?.[1];
-  // Only an exact version, 1.2.3 or [1.2.3], is compared: a range, a floating version or an MSBuild property such as
-  // $(NetjesVersion) is resolved by NuGet and MSBuild, which this does not repeat.
-  const version = /^\[?(\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?)\]?$/.exec(reference?.trim() ?? '')?.[1];
+  const { reference, version } = found;
   const shown = version ?? reference;
   if (!version || !npmVersion) return ok(`${csproj} references Netjes${shown ? ` ${shown}` : ''}`);
   return version === npmVersion
@@ -272,6 +426,80 @@ function checkReference(cwd, csproj, text, npmVersion, cliVersion) {
       );
 }
 
+/**
+ * The page packages the app depends on: each dependency whose package.json has a `netjes` field, as the Vite plugin
+ * reads them. One line names them with their versions, and a line follows for each one that the app would refuse to
+ * mount (no peer range, or one that leaves out the installed netjes), whose NuGet half the project references at another
+ * exact version, or that `netjes({ packages })` does not list, so that no build holds its pages. Nothing when the app
+ * depends on none.
+ * @param {string} cwd
+ * @param {{
+ *   manifest: Record<string, any> | null;
+ *   netjes: string | undefined;
+ *   csproj: { file: string; text: string } | null;
+ *   viteConfig: { file: string; text: string } | null;
+ * }} project the app's package.json, the installed netjes's version, the project file, and the Vite config that uses netjes()
+ * @returns {Promise<Check[]>}
+ */
+async function checkPagePackages(cwd, { manifest, netjes, csproj, viteConfig }) {
+  /** @param {unknown} deps */
+  const namesIn = (deps) => (typeof deps === 'object' && deps !== null ? Object.keys(deps) : []);
+  const names = [...new Set([...namesIn(manifest?.dependencies), ...namesIn(manifest?.devDependencies)])]
+    .filter((name) => name !== 'netjes')
+    .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+  /** @type {{ name: string; version: string; range: unknown; nuget: unknown }[]} */
+  const found = [];
+  for (const name of names) {
+    const file = findPackage(cwd, name);
+    const json = file ? await readJson(file) : null;
+    const field = json?.netjes;
+    if (typeof field !== 'object' || field === null || Array.isArray(field)) continue;
+    found.push({ name, version: typeof json.version === 'string' ? json.version : '?', range: json.peerDependencies?.netjes, nuget: field.nuget });
+  }
+  if (!found.length) return [];
+
+  /** @type {Check[]} */
+  const checks = [ok(`page packages: ${found.map((p) => `${p.name} ${p.version}`).join(', ')}`)];
+  for (const p of found) {
+    const named = `${p.name} ${p.version}`;
+    if (typeof p.range !== 'string' || p.range.trim() === '') {
+      checks.push(
+        fail(
+          `${named} has no peerDependencies.netjes, so the app refuses to mount it`,
+          `A page package names the Netjes versions it supports there: install a version of ${p.name} that does`,
+        ),
+      );
+    } else if (netjes && !satisfies(netjes, p.range, { strict: true })) {
+      // As the app and the Vite plugin say it; both stop on it.
+      checks.push(
+        fail(
+          `${named} supports Netjes ${p.range}; this app runs Netjes ${netjes}`,
+          `Install a version of ${p.name} that supports netjes ${netjes}, or a netjes in ${p.range}: the app stops at startup otherwise`,
+        ),
+      );
+    }
+    const reference = csproj && typeof p.nuget === 'string' ? packageReference(csproj.text, p.nuget) : null;
+    if (reference?.version && reference.version !== p.version) {
+      checks.push(
+        fail(
+          `${csproj?.file} references ${p.nuget} ${reference.version}, but node_modules has ${named}`,
+          'Use one version of both halves of the page package: change the PackageReference or package.json; the app stops at startup otherwise',
+        ),
+      );
+    }
+    // The name in quotes, so that '@acme/help-center-extra' does not list '@acme/help-center'.
+    if (viteConfig && !new RegExp(`(['"\`])${escapeRegExp(p.name)}\\1`).test(viteConfig.text)) {
+      checks.push(
+        warn(
+          `${named} is not in netjes({ packages }) in ${viteConfig.file}`,
+          `List it there to build its pages, as in netjes({ packages: ['${p.name}'] }), and mount it with app.MapPagePackage; or uninstall it`,
+        ),
+      );
+    }
+  }
+  return checks;
+}
+
 /**
  * The newest .cs file of the app's own, relative to `cwd` with / separators.
  * @param {string} cwd
@@ -280,12 +508,15 @@ function checkReference(cwd, csproj, text, npmVersion, cliVersion) {
 async function newestSource(cwd) {
   /** @type {{ file: string; mtimeMs: number } | null} */
   let newest = null;
+  // The build leaves out `Tests/` too where the file system ignores case, as it then finds `tests/` there.
+  const isTestProjects = (/** @type {string} */ file) =>
+    file.toLowerCase() === TEST_PROJECTS && (file === TEST_PROJECTS || existsSync(path.join(cwd, TEST_PROJECTS)));
   /** @param {string} relative */
   async function walk(relative) {
     for (const entry of await readdir(path.join(cwd, relative), { withFileTypes: true })) {
       const file = relative ? `${relative}/${entry.name}` : entry.name;
       if (entry.isDirectory()) {
-        if (!SKIPPED.has(entry.name) && !entry.name.startsWith('.')) await walk(file);
+        if (!SKIPPED.has(entry.name) && !entry.name.startsWith('.') && !isTestProjects(file)) await walk(file);
       } else if (entry.name.endsWith('.cs')) {
         const { mtimeMs } = await stat(path.join(cwd, file));
         if (!newest || mtimeMs > newest.mtimeMs) newest = { file, mtimeMs };
@@ -325,14 +556,25 @@ export async function checkProject(cwd, cliVersion) {
   );
 
   const viteConfig = entries.find((e) => /^vite\.config\.(ts|mts|js|mjs)$/.test(e));
+  const viteText = viteConfig ? await readFile(path.join(cwd, viteConfig), 'utf8') : null;
   if (!viteConfig) {
     checks.push(fail('No vite.config.ts', "Add one: export default defineConfig({ plugins: [netjes()] }), with netjes from 'netjes/vite'"));
-  } else if (!(await readFile(path.join(cwd, viteConfig), 'utf8')).includes('netjes(')) {
+  } else if (!viteText?.includes('netjes(')) {
     checks.push(fail(`${viteConfig} does not use netjes() from 'netjes/vite'`, 'Add netjes() to its plugins'));
   } else checks.push(ok(`${viteConfig} uses netjes()`));
 
+  const manifest = hasManifest ? await readJson(path.join(cwd, 'package.json')) : null;
+  checks.push(
+    ...(await checkPagePackages(cwd, {
+      manifest,
+      netjes: packages.netjes,
+      csproj: csproj ? { file: csproj, text: await readFile(path.join(cwd, csproj), 'utf8') } : null,
+      // A config without netjes() is flagged above already.
+      viteConfig: viteConfig && viteText?.includes('netjes(') ? { file: viteConfig, text: viteText } : null,
+    })),
+  );
+
   if (hasManifest) {
-    const manifest = await readJson(path.join(cwd, 'package.json'));
     if (!manifest) checks.push(fail('package.json is not valid JSON', 'Fix its syntax; npm and Vite read it'));
     else if (manifest.scripts?.build) checks.push(ok('package.json has a build script (dotnet publish runs it)'));
     else {