Json values

examples/next/app/blogs/[blog]/page.val.ts

@@ -3,7 +3,7 @@ import authorsVal from "../../../content/authors.val";
 import { linkSchema } from "../../../components/link.val";
 
 const blogSchema = s.object({
-  title: s.string().maxLength(3),
+  title: s.string(),
   content: s.richtext({
     inline: {
       a: s.route(),
@@ -228,7 +228,7 @@ export default c.define(
       },
     },
     "/blogs/blog-15": {
-      title: "Blog 1",
+      title: "Blog dette er jo sinnsyjt! men hvorfor har vi to feil?",
       content: [
         {
           tag: "p",

examples/next/app/support/[slug]/content/faq.val.json

@@ -0,0 +1,5 @@
+{
+  "title": "FAQ",
+  "body": "Frequently asked questions about Val. Each support page is its own *.val.json so the router scales to many pages.",
+  "order": 2
+}

examples/next/app/support/[slug]/content/getting-started.val.json

@@ -0,0 +1,5 @@
+{
+  "title": "Getting started",
+  "body": "Welcome to Val support. This page is stored as a separate JSON file and loaded lazily via .jsonValues().",
+  "order": 1
+}

examples/next/app/support/[slug]/page.tsx

@@ -0,0 +1,21 @@
+import { fetchValRoute } from "../../../val/rsc";
+import supportVal from "./page.val";
+
+export default async function SupportPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  // Maps the route params to the matching entry and loads ONLY that entry's
+  // backing *.val.json (one dynamic import), not the whole support-pages record.
+  const page = await fetchValRoute(supportVal, params);
+  if (!page) {
+    return <main>Support page not found.</main>;
+  }
+  return (
+    <main>
+      <h1>{page.title}</h1>
+      <p>{page.body}</p>
+    </main>
+  );
+}

examples/next/app/support/[slug]/page.val.ts

@@ -0,0 +1,25 @@
+import { s, c, type t, nextAppRouter } from "../../../val.config";
+
+/**
+ * Support pages use `.jsonValues()`: each page's content lives in its own
+ * `*.val.json` file and is loaded lazily via `c.json(() => import(...))`.
+ * This keeps `page.val.ts` tiny even with thousands of support pages.
+ */
+export const supportPageSchema = s.object({
+  title: s.string().minLength(2),
+  body: s.string(),
+  order: s.number(),
+});
+
+export type SupportPage = t.inferSchema<typeof supportPageSchema>;
+
+export default c.define(
+  "/app/support/[slug]/page.val.ts",
+  s.router(nextAppRouter, supportPageSchema).jsonValues(),
+  {
+    "/support/getting-started": c.json(
+      () => import("./content/getting-started.val.json"),
+    ),
+    "/support/faq": c.json(() => import("./content/faq.val.json")),
+  },
+);

examples/next/val.config.ts

@@ -1,7 +1,7 @@
 import { initVal } from "@valbuild/next";
 
 const { s, c, val, config, nextAppRouter, externalPageRouter } = initVal({
-  // project: "valbuild/val-examples-next",
+  project: "valbuild/val-examples-next",
   root: "/examples/next",
   defaultTheme: "dark",
   ai: {

examples/next/val.modules.ts

@@ -4,6 +4,7 @@ import { config } from "./val.config";
 export default modules(config, [
   { def: () => import("./content/authors.val") },
   { def: () => import("./app/blogs/[blog]/page.val") },
+  { def: () => import("./app/support/[slug]/page.val") },
   { def: () => import("./app/generic/[[...path]]/page.val") },
   { def: () => import("./content/media.val") },
   { def: () => import("./app/page.val") },

examples/next/val/rsc.ts

@@ -6,6 +6,7 @@ import { cookies, draftMode, headers } from "next/headers";
 
 const {
   fetchValStega: fetchVal,
+  fetchValKeyStega: fetchValKey,
   fetchValRouteStega: fetchValRoute,
   fetchValRouteUrl,
 } = initValRsc(config, valModules, {
@@ -14,4 +15,4 @@ const {
   cookies,
 });
 
-export { fetchVal, fetchValRoute, fetchValRouteUrl };
+export { fetchVal, fetchValKey, fetchValRoute, fetchValRouteUrl };

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valbuild/cli",
   "private": false,
-  "version": "0.97.1",
+  "version": "0.97.3",
   "description": "Val CLI tools",
   "repository": {
     "type": "git",

packages/core/src/index.ts

@@ -17,6 +17,7 @@ export type { FileMetadata } from "./schema/file";
 export type { ValModule, SerializedModule, InferValModuleType } from "./module";
 export type { SourceObject, SourcePrimitive, Source } from "./source";
 export type { FileSource } from "./source/file";
+export type { JsonSource, JsonOf, JsonImportThunk } from "./source/json";
 export type { RemoteSource, RemoteRef } from "./source/remote";
 export { DEFAULT_VAL_REMOTE_HOST } from "./schema/remote";
 export type { RawString } from "./schema/string";
@@ -98,6 +99,7 @@ import {
 import { type ImageMetadata } from "./schema/image";
 import { type FileMetadata } from "./schema/file";
 import { isFile } from "./source/file";
+import { isJson, getJsonImport, resolveJsonValues } from "./source/json";
 import { createRemoteRef } from "./source/remote";
 import {
   getValidationBasis,
@@ -197,6 +199,9 @@ const Internal = {
   },
   isVal,
   isFile,
+  isJson,
+  getJsonImport,
+  resolveJsonValues,
   createValPathOfItem,
   getSHA256Hash,
   initSchema,

packages/core/src/initVal.ts

@@ -3,6 +3,7 @@ import { InitSchema, initSchema } from "./initSchema";
 import { getValPath as getPath } from "./val";
 import { initFile } from "./source/file";
 import { initImage } from "./source/image";
+import { json } from "./source/json";
 import { initRemote } from "./source/remote";
 // import { i18n, I18n } from "./source/future/i18n";
 // import { remote } from "./source/future/remote";
@@ -13,6 +14,7 @@ export type ContentConstructor = {
   file: ReturnType<typeof initFile>;
   image: ReturnType<typeof initImage>;
   remote: ReturnType<typeof initRemote>;
+  json: typeof json;
 };
 export type ValConstructor = {
   unstable_getPath: typeof getPath;
@@ -96,6 +98,7 @@ InitVal => {
       remote: initRemote(config),
       file: initFile(config),
       image: initImage(config),
+      json,
     },
     s,
     config,

packages/core/src/module.ts

@@ -20,6 +20,7 @@ import {
   SerializedImageSchema,
 } from "./schema/image";
 import { FILE_REF_PROP, FileSource } from "./source/file";
+import { isJson } from "./source/json";
 import { AllRichTextOptions, RichTextSource } from "./source/richtext";
 import { RecordSchema, SerializedRecordSchema } from "./schema/record";
 import { RawString } from "./schema/string";
@@ -342,6 +343,15 @@ export function resolvePath<
         resolvedSchema instanceof RecordSchema
           ? resolvedSchema?.["item"]
           : resolvedSchema.item;
+      // A `.jsonValues()` entry value is a lazily-loaded JsonSource marker. We
+      // can resolve the entry itself (schema is now `item`), but we cannot
+      // descend deeper until the backing `*.val.json` content has been loaded
+      // and substituted into the source tree (done by the UI/server layer).
+      if (isJson(resolvedSource) && parts.length > 0) {
+        throw Error(
+          `Cannot resolve path into a jsonValues entry until its content is loaded. Path: ${path}`,
+        );
+      }
     } else if (isObjectSchema(resolvedSchema)) {
       if (typeof resolvedSource !== "object") {
         throw Error(
@@ -593,6 +603,14 @@ export function safeResolvePath<
         resolvedSchema instanceof RecordSchema
           ? resolvedSchema?.["item"]
           : resolvedSchema.item;
+      // jsonValues entry: cannot descend deeper until the backing `*.val.json`
+      // content is loaded into the source tree.
+      if (isJson(resolvedSource) && parts.length > 0) {
+        return {
+          status: "error",
+          message: `Cannot resolve path into a jsonValues entry until its content is loaded. Path: ${path}`,
+        };
+      }
     } else if (isObjectSchema(resolvedSchema)) {
       if (resolvedSource === undefined) {
         return {

packages/core/src/schema/deserialize.ts

@@ -179,6 +179,7 @@ function deserializeSchemaImpl(
         false,
         false,
         serialized.description,
+        serialized.jsonValues ?? false,
       );
     case "keyOf":
       return new KeyOfSchema(