@valbuild/cli 0.123.3 → 0.125.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # @valbuild/cli
 
+## 0.125.0
+
+### Patch Changes
+
+- [#638](https://github.com/valbuild/val/pull/638) [`c390397`](https://github.com/valbuild/val/commit/c390397cb5e203eb1bedae3a6fab15726e850b90) Thanks [@freekh](https://github.com/freekh)! - Val now runs on TanStack Start.
+
+  `@valbuild/tanstack` is a new package with everything `@valbuild/next` has: Val
+  Studio at `/val`, the on-page overlay and canvas, draft mode, the client hooks,
+  server-side content reads, images, and the MCP tools.
+
+  ```sh
+  npm install @valbuild/tanstack
+  ```
+
+  ```ts
+  // val.config.ts
+  import { initVal } from "@valbuild/tanstack";
+  const { s, c, config, tanstackRouter } = initVal({ project: "org/project" });
+  ```
+
+  **Routes are first class.** A Val module for a route is named after the route
+  file it sits beside — `src/routes/posts.$postId.tsx` is served content by
+  `src/routes/posts.$postId.val.ts` — and its keys are the URLs that route serves:
+
+  ```ts
+  export default c.define(
+    "/src/routes/posts.$postId.val.ts",
+    s.router(tanstackRouter, s.object({ title: s.string() })),
+    { "/posts/hello-world": { title: "Hello world" } },
+  );
+  ```
+
+  `.` and `/` both separate segments, `$param` is a parameter, `$` is a splat, and
+  `index`, `route`, `(groups)` and `_pathless` layouts add no URL segment — the
+  same rules TanStack Router uses for the route file itself. Val validates every
+  key against that pattern, and Val Studio shows these modules as a sitemap under
+  **Pages**, where an editor can add a page.
+
+  Point the route generator away from your content files, in `vite.config.ts` and
+  `tsr.config.json`:
+
+  ```ts
+  tanstackStart({ router: { routeFileIgnorePattern: "\\.val\\.[tj]sx?$" } });
+  ```
+
+  See the [README](https://github.com/valbuild/val/blob/main/packages/tanstack/README.md)
+  for the full wiring, and `examples/tanstack` for a working app.
+
+  **Also fixed, for everyone:** `Internal.VERSION.core` was `null` in any ESM
+  bundle — it was read with `require("../package.json")` inside a `try`, so the
+  failure was silent. That version goes into every remote file ref and proxy mode
+  refuses to start without it. Every package now reads its version through a
+  static JSON import, which is inlined at build time.
+
+  Two smaller fixes that came out of running the whole toolchain against a
+  TanStack project:
+
+  - `val versions` reports `@valbuild/tanstack`, and `val debug` writes a snapshot
+    that names whichever framework package the captured project actually has.
+  - `@valbuild/eslint-plugin` reads a `tsconfig.json` that has comments in it. A
+    tsconfig is JSONC, and `JSON.parse` is not — so on any project whose tsconfig
+    carries a comment (the TanStack starter's does) the
+    `module-in-val-modules` rule threw `Expected double-quoted property name in
+JSON` on the first file and took the whole lint run with it.
+
+  Three fixes found by driving the Studio against a real TanStack app:
+
+  - **A draft image now loads on the page.** The source the Studio pushes to the
+    host page carries `patch_id` for any file whose bytes are still in a patch, so
+    the page asks `/api/val/files/...?patch_id=` rather than a `/public` path that
+    nothing has written yet. This was silent — the image just did not appear — and
+    it affects any page that reads media through the hooks rather than on the
+    server, `@valbuild/next` included.
+  - **A splat route no longer logs an error on every render.** TanStack returns
+    both `_splat` and `*` for the same parameter; Val reported the second as a
+    parameter it could not place in the path.
+  - The TanStack example and starter render a 404 page instead of throwing
+    `notFound()` from a component, which escaped to the error boundary and logged
+    `Error in renderToReadableStream` (and, with no not-found component
+    configured, aborted the response) on every miss.
+
+- Updated dependencies [[`22f78b4`](https://github.com/valbuild/val/commit/22f78b471fd18e542f518f72b75bd472d7c3dc52), [`c390397`](https://github.com/valbuild/val/commit/c390397cb5e203eb1bedae3a6fab15726e850b90)]:
+  - @valbuild/language-server@0.125.0
+  - @valbuild/core@0.125.0
+  - @valbuild/shared@0.125.0
+  - @valbuild/eslint-plugin@0.125.0
+  - @valbuild/server@0.125.0
+
+## 0.124.0
+
+### Patch Changes
+
+- Updated dependencies [[`ad7fff4`](https://github.com/valbuild/val/commit/ad7fff4cc8cea98c506cf7ff9b4e8d6e5ffa4055), [`ad7fff4`](https://github.com/valbuild/val/commit/ad7fff4cc8cea98c506cf7ff9b4e8d6e5ffa4055), [`aa89fc2`](https://github.com/valbuild/val/commit/aa89fc26de7028b3c5a1666b99afc03b39e92769)]:
+  - @valbuild/server@0.124.0
+  - @valbuild/shared@0.124.0
+  - @valbuild/core@0.124.0
+  - @valbuild/language-server@0.124.0
+
 ## 0.123.3
 
 ### Patch Changes

package/cli/dist/valbuild-cli-cli.cjs.dev.js

@@ -975,30 +975,33 @@ function isFileRef(value) {
   return !!value && typeof value === "object" && "path" in value && typeof value.path === "string";
 }
 
+/**
+ * The versions of the Val packages this project has installed.
+ *
+ * Each is resolved from the project rather than declared, because the CLI is a
+ * dependency of the project and not the other way round — and a project has
+ * exactly one framework package, so the one that is absent is absent rather
+ * than broken. `undefined` is the honest answer for it.
+ */
 const getVersions = () => {
-  const coreVersion = (() => {
-    try {
-      var _require;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require = require("@valbuild/core")) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require.core;
-    } catch {
-      return null;
-    }
-  })();
-  const nextVersion = (() => {
-    try {
-      var _require2;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require2 = require("@valbuild/next")) === null || _require2 === void 0 || (_require2 = _require2.Internal) === null || _require2 === void 0 || (_require2 = _require2.VERSION) === null || _require2 === void 0 ? void 0 : _require2.next;
-    } catch {
-      return null;
-    }
-  })();
+  const coreVersion = requireVersion("@valbuild/core", "core");
+  const nextVersion = requireVersion("@valbuild/next", "next");
+  const tanstackVersion = requireVersion("@valbuild/tanstack", "tanstack");
   return {
     coreVersion: coreVersion || undefined,
-    nextVersion: nextVersion || undefined
+    nextVersion: nextVersion || undefined,
+    tanstackVersion: tanstackVersion || undefined
   };
 };
+function requireVersion(packageName, key) {
+  try {
+    var _require;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return ((_require = require(packageName)) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require[key]) ?? null;
+  } catch {
+    return null;
+  }
+}
 
 const host = process.env.VAL_BUILD_URL || "https://admin.val.build";
 async function connect(options) {
@@ -1597,6 +1600,7 @@ async function buildSnapshot(ctx, options = {}) {
     versions: {
       core: getVersions().coreVersion,
       next: getVersions().nextVersion,
+      tanstack: getVersions().tanstackVersion,
       project: readProjectValVersions(ctx.projectRoot),
       node: process.version,
       platform: `${process.platform}-${process.arch}`
@@ -1692,9 +1696,18 @@ function generateValModules(moduleFilePaths) {
     const withoutExt = moduleFilePath.replace(/\.(ts|js|tsx|jsx)$/, "");
     return `  { def: () => import(".${withoutExt}") },`;
   }).join("\n");
+  /*
+   * The framework package the captured project actually has.
+   *
+   * A snapshot is replayed by loading this file, so naming the wrong one makes
+   * it fail to resolve on a machine that has the other. `getVersions` answers
+   * from what is installed; the fallback matters only for a project with
+   * neither, which could not have produced a snapshot anyway.
+   */
+  const frameworkPackage = getVersions().tanstackVersion ? "@valbuild/tanstack" : "@valbuild/next";
   return `// GENERATED by \`val debug\`: trimmed to the modules this snapshot carries.
 // The project's original is kept as val.modules.original.ts.
-import { modules } from "@valbuild/next";
+import { modules } from "${frameworkPackage}";
 import { config } from "./val.config";
 
 export default modules(config, [
@@ -1709,7 +1722,7 @@ Captured ${manifest.generatedAt} from project \`${manifest.project ?? "(fs mode)
 branch \`${manifest.branch ?? "?"}\`, commit \`${manifest.commit ?? "?"}\`.
 
 - @valbuild/core: \`${manifest.versions.core ?? "?"}\`
-- @valbuild/next: \`${manifest.versions.next ?? "?"}\`
+- ${manifest.versions.tanstack ? `@valbuild/tanstack: \`${manifest.versions.tanstack}\`` : `@valbuild/next: \`${manifest.versions.next ?? "?"}\``}
 - ${manifest.patchCount} pending patches, ${manifest.unappliablePatchCount} of which could not be applied.
 
 ## Replaying it
@@ -2234,5 +2247,15 @@ void main().catch(err => {
 async function versions() {
   const foundVersions = getVersions();
   console.log(`${chalk__default["default"].cyan("@valbuild/core")}: ${foundVersions.coreVersion}`);
-  console.log(`${chalk__default["default"].cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  // Only the framework package this project actually has. Printing the other
+  // as `undefined` reads as something missing rather than something absent.
+  if (foundVersions.nextVersion) {
+    console.log(`${chalk__default["default"].cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  }
+  if (foundVersions.tanstackVersion) {
+    console.log(`${chalk__default["default"].cyan("@valbuild/tanstack")}: ${foundVersions.tanstackVersion}`);
+  }
+  if (!foundVersions.nextVersion && !foundVersions.tanstackVersion) {
+    console.log(`${chalk__default["default"].yellow("No framework package found")}: install @valbuild/next or @valbuild/tanstack`);
+  }
 }

package/cli/dist/valbuild-cli-cli.cjs.prod.js

@@ -975,30 +975,33 @@ function isFileRef(value) {
   return !!value && typeof value === "object" && "path" in value && typeof value.path === "string";
 }
 
+/**
+ * The versions of the Val packages this project has installed.
+ *
+ * Each is resolved from the project rather than declared, because the CLI is a
+ * dependency of the project and not the other way round — and a project has
+ * exactly one framework package, so the one that is absent is absent rather
+ * than broken. `undefined` is the honest answer for it.
+ */
 const getVersions = () => {
-  const coreVersion = (() => {
-    try {
-      var _require;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require = require("@valbuild/core")) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require.core;
-    } catch {
-      return null;
-    }
-  })();
-  const nextVersion = (() => {
-    try {
-      var _require2;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require2 = require("@valbuild/next")) === null || _require2 === void 0 || (_require2 = _require2.Internal) === null || _require2 === void 0 || (_require2 = _require2.VERSION) === null || _require2 === void 0 ? void 0 : _require2.next;
-    } catch {
-      return null;
-    }
-  })();
+  const coreVersion = requireVersion("@valbuild/core", "core");
+  const nextVersion = requireVersion("@valbuild/next", "next");
+  const tanstackVersion = requireVersion("@valbuild/tanstack", "tanstack");
   return {
     coreVersion: coreVersion || undefined,
-    nextVersion: nextVersion || undefined
+    nextVersion: nextVersion || undefined,
+    tanstackVersion: tanstackVersion || undefined
   };
 };
+function requireVersion(packageName, key) {
+  try {
+    var _require;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return ((_require = require(packageName)) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require[key]) ?? null;
+  } catch {
+    return null;
+  }
+}
 
 const host = process.env.VAL_BUILD_URL || "https://admin.val.build";
 async function connect(options) {
@@ -1597,6 +1600,7 @@ async function buildSnapshot(ctx, options = {}) {
     versions: {
       core: getVersions().coreVersion,
       next: getVersions().nextVersion,
+      tanstack: getVersions().tanstackVersion,
       project: readProjectValVersions(ctx.projectRoot),
       node: process.version,
       platform: `${process.platform}-${process.arch}`
@@ -1692,9 +1696,18 @@ function generateValModules(moduleFilePaths) {
     const withoutExt = moduleFilePath.replace(/\.(ts|js|tsx|jsx)$/, "");
     return `  { def: () => import(".${withoutExt}") },`;
   }).join("\n");
+  /*
+   * The framework package the captured project actually has.
+   *
+   * A snapshot is replayed by loading this file, so naming the wrong one makes
+   * it fail to resolve on a machine that has the other. `getVersions` answers
+   * from what is installed; the fallback matters only for a project with
+   * neither, which could not have produced a snapshot anyway.
+   */
+  const frameworkPackage = getVersions().tanstackVersion ? "@valbuild/tanstack" : "@valbuild/next";
   return `// GENERATED by \`val debug\`: trimmed to the modules this snapshot carries.
 // The project's original is kept as val.modules.original.ts.
-import { modules } from "@valbuild/next";
+import { modules } from "${frameworkPackage}";
 import { config } from "./val.config";
 
 export default modules(config, [
@@ -1709,7 +1722,7 @@ Captured ${manifest.generatedAt} from project \`${manifest.project ?? "(fs mode)
 branch \`${manifest.branch ?? "?"}\`, commit \`${manifest.commit ?? "?"}\`.
 
 - @valbuild/core: \`${manifest.versions.core ?? "?"}\`
-- @valbuild/next: \`${manifest.versions.next ?? "?"}\`
+- ${manifest.versions.tanstack ? `@valbuild/tanstack: \`${manifest.versions.tanstack}\`` : `@valbuild/next: \`${manifest.versions.next ?? "?"}\``}
 - ${manifest.patchCount} pending patches, ${manifest.unappliablePatchCount} of which could not be applied.
 
 ## Replaying it
@@ -2234,5 +2247,15 @@ void main().catch(err => {
 async function versions() {
   const foundVersions = getVersions();
   console.log(`${chalk__default["default"].cyan("@valbuild/core")}: ${foundVersions.coreVersion}`);
-  console.log(`${chalk__default["default"].cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  // Only the framework package this project actually has. Printing the other
+  // as `undefined` reads as something missing rather than something absent.
+  if (foundVersions.nextVersion) {
+    console.log(`${chalk__default["default"].cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  }
+  if (foundVersions.tanstackVersion) {
+    console.log(`${chalk__default["default"].cyan("@valbuild/tanstack")}: ${foundVersions.tanstackVersion}`);
+  }
+  if (!foundVersions.nextVersion && !foundVersions.tanstackVersion) {
+    console.log(`${chalk__default["default"].yellow("No framework package found")}: install @valbuild/next or @valbuild/tanstack`);
+  }
 }

package/cli/dist/valbuild-cli-cli.esm.js

@@ -943,30 +943,33 @@ function isFileRef(value) {
   return !!value && typeof value === "object" && "path" in value && typeof value.path === "string";
 }
 
+/**
+ * The versions of the Val packages this project has installed.
+ *
+ * Each is resolved from the project rather than declared, because the CLI is a
+ * dependency of the project and not the other way round — and a project has
+ * exactly one framework package, so the one that is absent is absent rather
+ * than broken. `undefined` is the honest answer for it.
+ */
 const getVersions = () => {
-  const coreVersion = (() => {
-    try {
-      var _require;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require = require("@valbuild/core")) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require.core;
-    } catch {
-      return null;
-    }
-  })();
-  const nextVersion = (() => {
-    try {
-      var _require2;
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return (_require2 = require("@valbuild/next")) === null || _require2 === void 0 || (_require2 = _require2.Internal) === null || _require2 === void 0 || (_require2 = _require2.VERSION) === null || _require2 === void 0 ? void 0 : _require2.next;
-    } catch {
-      return null;
-    }
-  })();
+  const coreVersion = requireVersion("@valbuild/core", "core");
+  const nextVersion = requireVersion("@valbuild/next", "next");
+  const tanstackVersion = requireVersion("@valbuild/tanstack", "tanstack");
   return {
     coreVersion: coreVersion || undefined,
-    nextVersion: nextVersion || undefined
+    nextVersion: nextVersion || undefined,
+    tanstackVersion: tanstackVersion || undefined
   };
 };
+function requireVersion(packageName, key) {
+  try {
+    var _require;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return ((_require = require(packageName)) === null || _require === void 0 || (_require = _require.Internal) === null || _require === void 0 || (_require = _require.VERSION) === null || _require === void 0 ? void 0 : _require[key]) ?? null;
+  } catch {
+    return null;
+  }
+}
 
 const host = process.env.VAL_BUILD_URL || "https://admin.val.build";
 async function connect(options) {
@@ -1565,6 +1568,7 @@ async function buildSnapshot(ctx, options = {}) {
     versions: {
       core: getVersions().coreVersion,
       next: getVersions().nextVersion,
+      tanstack: getVersions().tanstackVersion,
       project: readProjectValVersions(ctx.projectRoot),
       node: process.version,
       platform: `${process.platform}-${process.arch}`
@@ -1660,9 +1664,18 @@ function generateValModules(moduleFilePaths) {
     const withoutExt = moduleFilePath.replace(/\.(ts|js|tsx|jsx)$/, "");
     return `  { def: () => import(".${withoutExt}") },`;
   }).join("\n");
+  /*
+   * The framework package the captured project actually has.
+   *
+   * A snapshot is replayed by loading this file, so naming the wrong one makes
+   * it fail to resolve on a machine that has the other. `getVersions` answers
+   * from what is installed; the fallback matters only for a project with
+   * neither, which could not have produced a snapshot anyway.
+   */
+  const frameworkPackage = getVersions().tanstackVersion ? "@valbuild/tanstack" : "@valbuild/next";
   return `// GENERATED by \`val debug\`: trimmed to the modules this snapshot carries.
 // The project's original is kept as val.modules.original.ts.
-import { modules } from "@valbuild/next";
+import { modules } from "${frameworkPackage}";
 import { config } from "./val.config";
 
 export default modules(config, [
@@ -1677,7 +1690,7 @@ Captured ${manifest.generatedAt} from project \`${manifest.project ?? "(fs mode)
 branch \`${manifest.branch ?? "?"}\`, commit \`${manifest.commit ?? "?"}\`.
 
 - @valbuild/core: \`${manifest.versions.core ?? "?"}\`
-- @valbuild/next: \`${manifest.versions.next ?? "?"}\`
+- ${manifest.versions.tanstack ? `@valbuild/tanstack: \`${manifest.versions.tanstack}\`` : `@valbuild/next: \`${manifest.versions.next ?? "?"}\``}
 - ${manifest.patchCount} pending patches, ${manifest.unappliablePatchCount} of which could not be applied.
 
 ## Replaying it
@@ -2202,5 +2215,15 @@ void main().catch(err => {
 async function versions() {
   const foundVersions = getVersions();
   console.log(`${chalk.cyan("@valbuild/core")}: ${foundVersions.coreVersion}`);
-  console.log(`${chalk.cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  // Only the framework package this project actually has. Printing the other
+  // as `undefined` reads as something missing rather than something absent.
+  if (foundVersions.nextVersion) {
+    console.log(`${chalk.cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  }
+  if (foundVersions.tanstackVersion) {
+    console.log(`${chalk.cyan("@valbuild/tanstack")}: ${foundVersions.tanstackVersion}`);
+  }
+  if (!foundVersions.nextVersion && !foundVersions.tanstackVersion) {
+    console.log(`${chalk.yellow("No framework package found")}: install @valbuild/next or @valbuild/tanstack`);
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valbuild/cli",
   "private": false,
-  "version": "0.123.3",
+  "version": "0.125.0",
   "description": "Val CLI tools",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
     "jszip": "^3.10.1",
     "meow": "^9.0.0",
     "picocolors": "^1.1.1",
-    "@valbuild/core": "0.121.0",
-    "@valbuild/eslint-plugin": "0.108.0",
-    "@valbuild/language-server": "0.123.3",
-    "@valbuild/server": "0.123.3",
-    "@valbuild/shared": "0.123.3"
+    "@valbuild/eslint-plugin": "0.125.0",
+    "@valbuild/core": "0.125.0",
+    "@valbuild/shared": "0.125.0",
+    "@valbuild/language-server": "0.125.0",
+    "@valbuild/server": "0.125.0"
   },
   "peerDependencies": {
     "prettier": "*",

package/src/__fixtures__/basic/content/basic-gallery-remote-existing.val.ts

@@ -2,11 +2,12 @@ import { c, s } from "../val.config";
 
 export default c.define(
   "/content/basic-gallery-remote-existing.val.ts",
-  s.images({
-    directory: "/public/val/images-remote2",
-    accept: "image/*",
-    remote: true,
-  }),
+  s
+    .images({
+      directory: "/public/val/images-remote2",
+      accept: "image/*",
+    })
+    .remote(),
 
   {
     "https://remote.val.build/file/p/proj123/b/01/v/1.0.0/h/abc1/f/def4/p/public/val/images-remote2/image.png":

package/src/__fixtures__/basic/content/basic-gallery-remote.val.ts

@@ -2,11 +2,12 @@ import { c, s } from "../val.config";
 
 export default c.define(
   "/content/basic-gallery-remote.val.ts",
-  s.images({
-    directory: "/public/val/images-remote",
-    accept: "image/*",
-    remote: true,
-  }),
+  s
+    .images({
+      directory: "/public/val/images-remote",
+      accept: "image/*",
+    })
+    .remote(),
 
   {
     "/public/val/images-remote/image.png": {

package/src/cli.ts

@@ -228,5 +228,21 @@ void main().catch((err) => {
 async function versions() {
   const foundVersions = getVersions();
   console.log(`${chalk.cyan("@valbuild/core")}: ${foundVersions.coreVersion}`);
-  console.log(`${chalk.cyan("@valbuild/next")}: ${foundVersions.nextVersion}`);
+  // Only the framework package this project actually has. Printing the other
+  // as `undefined` reads as something missing rather than something absent.
+  if (foundVersions.nextVersion) {
+    console.log(
+      `${chalk.cyan("@valbuild/next")}: ${foundVersions.nextVersion}`,
+    );
+  }
+  if (foundVersions.tanstackVersion) {
+    console.log(
+      `${chalk.cyan("@valbuild/tanstack")}: ${foundVersions.tanstackVersion}`,
+    );
+  }
+  if (!foundVersions.nextVersion && !foundVersions.tanstackVersion) {
+    console.log(
+      `${chalk.yellow("No framework package found")}: install @valbuild/next or @valbuild/tanstack`,
+    );
+  }
 }

package/src/debug/snapshot.ts

@@ -39,6 +39,7 @@ export type SnapshotManifest = {
     /** Resolved at runtime by the cli that captured this. */
     core?: string;
     next?: string;
+    tanstack?: string;
     /**
      * The @valbuild/* versions the project declares. This is what to check out
      * in the val repo in order to replay on the code the customer was running.
@@ -253,6 +254,7 @@ export async function buildSnapshot(
     versions: {
       core: getVersions().coreVersion,
       next: getVersions().nextVersion,
+      tanstack: getVersions().tanstackVersion,
       project: readProjectValVersions(ctx.projectRoot),
       node: process.version,
       platform: `${process.platform}-${process.arch}`,
@@ -380,9 +382,20 @@ function generateValModules(moduleFilePaths: string[]): string {
       return `  { def: () => import(".${withoutExt}") },`;
     })
     .join("\n");
+  /*
+   * The framework package the captured project actually has.
+   *
+   * A snapshot is replayed by loading this file, so naming the wrong one makes
+   * it fail to resolve on a machine that has the other. `getVersions` answers
+   * from what is installed; the fallback matters only for a project with
+   * neither, which could not have produced a snapshot anyway.
+   */
+  const frameworkPackage = getVersions().tanstackVersion
+    ? "@valbuild/tanstack"
+    : "@valbuild/next";
   return `// GENERATED by \`val debug\`: trimmed to the modules this snapshot carries.
 // The project's original is kept as val.modules.original.ts.
-import { modules } from "@valbuild/next";
+import { modules } from "${frameworkPackage}";
 import { config } from "./val.config";
 
 export default modules(config, [
@@ -398,7 +411,11 @@ Captured ${manifest.generatedAt} from project \`${manifest.project ?? "(fs mode)
 branch \`${manifest.branch ?? "?"}\`, commit \`${manifest.commit ?? "?"}\`.
 
 - @valbuild/core: \`${manifest.versions.core ?? "?"}\`
-- @valbuild/next: \`${manifest.versions.next ?? "?"}\`
+- ${
+    manifest.versions.tanstack
+      ? `@valbuild/tanstack: \`${manifest.versions.tanstack}\``
+      : `@valbuild/next: \`${manifest.versions.next ?? "?"}\``
+  }
 - ${manifest.patchCount} pending patches, ${manifest.unappliablePatchCount} of which could not be applied.
 
 ## Replaying it

package/src/getVersions.ts

@@ -1,25 +1,31 @@
+/**
+ * The versions of the Val packages this project has installed.
+ *
+ * Each is resolved from the project rather than declared, because the CLI is a
+ * dependency of the project and not the other way round — and a project has
+ * exactly one framework package, so the one that is absent is absent rather
+ * than broken. `undefined` is the honest answer for it.
+ */
 export const getVersions = (): {
   coreVersion?: string;
   nextVersion?: string;
+  tanstackVersion?: string;
 } => {
-  const coreVersion = (() => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return require("@valbuild/core")?.Internal?.VERSION?.core;
-    } catch {
-      return null;
-    }
-  })();
-  const nextVersion = (() => {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      return require("@valbuild/next")?.Internal?.VERSION?.next;
-    } catch {
-      return null;
-    }
-  })();
+  const coreVersion = requireVersion("@valbuild/core", "core");
+  const nextVersion = requireVersion("@valbuild/next", "next");
+  const tanstackVersion = requireVersion("@valbuild/tanstack", "tanstack");
   return {
     coreVersion: coreVersion || undefined,
     nextVersion: nextVersion || undefined,
+    tanstackVersion: tanstackVersion || undefined,
   };
 };
+
+function requireVersion(packageName: string, key: string): string | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require(packageName)?.Internal?.VERSION?.[key] ?? null;
+  } catch {
+    return null;
+  }
+}