Implement key validation in router and enhance schema serializa…

.changeset/router-key-validation.md

@@ -0,0 +1,6 @@
+---
+"@valbuild/core": patch
+"@valbuild/ui": patch
+---
+
+Add key validation support to `s.router` (mirroring `s.record`). Pass a string schema as the second argument to attach `.maxLength()`, `.regexp()`, `.validate()`, `.describe()`, etc. to router keys — for example `s.router(nextAppRouter, s.string().maxLength(60).describe("URL slug"), s.object({ ... }))`. Router URL pattern validation continues to run, and both error sources now surface together at the same key path. Validation errors on the same path are now merged instead of overwritten, so router, key and item errors on a key are all reported. The key description is also shown when adding or renaming a route from the sitemap.

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

@@ -15,7 +15,19 @@ const blogSchema = s.object({
 
 export default c.define(
   "/app/blogs/[blog]/page.val.ts",
-  s.router(nextAppRouter, blogSchema),
+  s
+    .router(
+      nextAppRouter,
+      s.string().describe("The URL of the blog post"),
+      blogSchema,
+    )
+    .render({
+      as: "list",
+      select: ({ val }) => ({
+        title: val.title,
+        subtitle: val.author,
+      }),
+    }),
   {
     "/blogs/blog2": {
       title: "Blog 2",

examples/next/content/authors.val.ts

@@ -21,6 +21,7 @@ export const schema = s
     select: ({ val }) => ({
       title: val.name,
       subtitle: val.birthdate,
+      image: val.image,
     }),
   });
 

packages/core/src/schema/array.ts

@@ -9,10 +9,7 @@ import { SelectorSource } from "../selector";
 import { unsafeCreateSourcePath } from "../selector/SelectorProxy";
 import { ImageSource } from "../source/image";
 import { ModuleFilePath, SourcePath } from "../val";
-import {
-  ValidationError,
-  ValidationErrors,
-} from "./validation/ValidationError";
+import { ValidationErrors } from "./validation/ValidationError";
 
 export type SerializedArraySchema = {
   type: "array";
@@ -73,21 +70,12 @@ export class ArraySchema<
     if (assertRes.data === null) {
       return false;
     }
-    let error: Record<SourcePath, ValidationError[]> = {};
+    let error: ValidationErrors = false;
     for (const [idx, i] of Object.entries(assertRes.data)) {
       const subPath = unsafeCreateSourcePath(path, Number(idx));
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const subError = this.item["executeValidate"](subPath, i as any);
-      if (subError) {
-        error = {
-          ...subError,
-          ...error,
-        };
-      }
-    }
-
-    if (Object.keys(error).length === 0) {
-      return false;
+      error = this.mergeValidationErrors(error, subError);
     }
     return error;
   }

packages/core/src/schema/index.ts

@@ -176,6 +176,35 @@ export abstract class Schema<Src extends SelectorSource> {
       } as ValidationErrors;
     }
   }
+
+  /**
+   * Merges two sets of validation errors path-wise: errors on the same path are
+   * concatenated, not overwritten. Object spread cannot be used for this, since
+   * it replaces the array of the colliding path. A record, for example, validates
+   * the key and the item on the same path, so both sets must survive.
+   *
+   * MUTATES! since internal and perf sensitive
+   */
+  protected mergeValidationErrors(
+    current: ValidationErrors,
+    incoming: ValidationErrors,
+  ): ValidationErrors {
+    if (!incoming) {
+      return current;
+    }
+    if (!current) {
+      return incoming;
+    }
+    for (const pathS in incoming) {
+      const path = pathS as SourcePath;
+      if (current[path]) {
+        current[path] = current[path].concat(incoming[path]);
+      } else {
+        current[path] = incoming[path];
+      }
+    }
+    return current;
+  }
 }
 
 export type SelectorOfSchema<T extends Schema<SelectorSource>> =

packages/core/src/schema/object.ts

@@ -140,14 +140,7 @@ export class ObjectSchema<
         );
       } else {
         const subError = schema["executeValidate"](subPath, src[key]);
-        if (subError && error) {
-          error = {
-            ...subError,
-            ...error,
-          };
-        } else if (subError) {
-          error = subError;
-        }
+        error = this.mergeValidationErrors(error, subError);
       }
     }
 

packages/core/src/schema/record.ts

@@ -134,9 +134,7 @@ export class RecordSchema<
       } as ValidationErrors;
     }
     const routerValidations = this.getRouterValidations(path, src);
-    if (routerValidations) {
-      return routerValidations;
-    }
+    error = this.mergeValidationErrors(error, routerValidations);
     for (const customValidationError of customValidationErrors) {
       error = this.appendValidationError(
         error,
@@ -202,15 +200,7 @@ export class RecordSchema<
             ...err,
             keyError: true,
           }));
-          if (error) {
-            if (error[keyPath]) {
-              error[keyPath] = [...error[keyPath], ...keyError[keyPath]];
-            } else {
-              error[keyPath] = keyError[keyPath];
-            }
-          } else {
-            error = keyError;
-          }
+          error = this.mergeValidationErrors(error, keyError);
         }
       }
 
@@ -227,26 +217,15 @@ export class RecordSchema<
       } else if (this.mediaOptions) {
         // Media collection: validate key (path/URL) and entry (metadata)
         const keyErr = this.validateMediaKey(subPath, key);
-        if (keyErr) {
-          error = error ? { ...error, ...keyErr } : keyErr;
-        }
+        error = this.mergeValidationErrors(error, keyErr);
         const entryErr = this.validateMediaEntry(subPath, elem);
-        if (entryErr) {
-          error = error ? { ...error, ...entryErr } : entryErr;
-        }
+        error = this.mergeValidationErrors(error, entryErr);
       } else {
         const subError = this.item["executeValidate"](
           subPath,
           elem as SelectorSource,
         );
-        if (subError && error) {
-          error = {
-            ...subError,
-            ...error,
-          };
-        } else if (subError) {
-          error = subError;
-        }
+        error = this.mergeValidationErrors(error, subError);
       }
     });
     return error;