[form] Implement FormErrors container (#250)

Author: x0k

.changeset/new-deer-enter.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Implement `FormErrors` container to maintain unique error messages

packages/form/src/form/create-form.svelte.ts

@@ -82,12 +82,12 @@ import {
   FORM_FIELDS_STATE_MAP,
   FORM_ID_FROM_PATH,
   internalRegisterFieldPath,
-  internalAssignErrors,
   FORM_ROOT_PATH,
   FORM_ERRORS,
   FORM_PATHS_TRIE_REF,
   internalHasFieldState,
   FORM_ID_PREFIX,
+  FormErrors,
 } from "./internals.js";
 import { FIELD_SUBMITTED } from "./field-state.js";
 
@@ -309,15 +309,16 @@ export function createForm<T>(options: FormOptions<T>): FormState<T> {
   const idFromPath = $derived(
     weakMemoize(idCache, (path) => idBuilder.fromPath(path) as Id)
   );
-  const errors = $derived(
-    Array.isArray(options.initialErrors)
-      ? internalAssignErrors(
-          pathsTrieRef,
-          new SvelteMap(),
-          options.initialErrors
-        )
-      : new SvelteMap(options.initialErrors)
-  );
+  const errors = $derived.by(() => {
+    const errors = new FormErrors(pathsTrieRef);
+    const initial = options.initialErrors;
+    if (initial === undefined) {
+      return errors;
+    }
+    return Array.isArray(initial)
+      ? errors.updateErrors(initial)
+      : errors.assign(initial);
+  });
   const disabled = $derived(options.disabled ?? false);
   const fieldsValidationMode = $derived(options.fieldsValidationMode ?? 0);
   const keyedArrays: KeyedArraysMap = $derived(

packages/form/src/form/errors.ts

@@ -13,6 +13,8 @@ export class InvalidValidatorError extends Error {}
 
 export type FieldErrors = Readonly<string[]>;
 
+// TODO: Remove in v4
+/** @deprecated */
 export type FormErrorsMap = SvelteMap<FieldPath, string[]>;
 
 export type FormSubmission<Output> = Task<

packages/form/src/form/internals.ts

@@ -1,11 +1,10 @@
-import type { SvelteMap } from "svelte/reactivity";
+import { SvelteMap } from "svelte/reactivity";
 
 import { getNodeByKeys, insertValue } from "@/lib/trie.js";
 import type { RPath } from "@/core/index.js";
 
-import type { FormErrorsMap } from "./errors.js";
 import type { ValidationError } from "./validator.js";
-import type { PathTrieRef } from "./model.js";
+import type { PathTrieRef, Update } from "./model.js";
 import type { FieldPath } from "./id.js";
 import type { FieldState } from "./field-state.js";
 
@@ -57,28 +56,103 @@ export function internalRegisterFieldPath(
   return p;
 }
 
-export function internalAssignErrors(
-  ref: PathTrieRef<FieldPath>,
-  map: FormErrorsMap,
-  errors: ReadonlyArray<ValidationError>
-): FormErrorsMap {
-  map.clear();
-  for (const { path, message } of errors) {
-    const p = internalRegisterFieldPath(ref, path);
-    const arr = map.get(p);
-    if (arr) {
-      arr.push(message);
-    } else {
-      map.set(p, [message]);
-    }
-  }
-  return map;
-}
-
 export function internalHasFieldState(
   map: SvelteMap<FieldPath, FieldState>,
   path: FieldPath,
   state: FieldState
 ) {
   return ((map.get(path) ?? 0) & state) > 0;
 }
+
+/**
+This class must maintain two invariants:
+- Field errors list should contain at leas one error
+- Errors in the field errors list must be unique
+**/
+export class FormErrors {
+  #map = new SvelteMap<
+    FieldPath,
+    {
+      set: Set<string>;
+      array: string[];
+    }
+  >();
+
+  constructor(private readonly ref: PathTrieRef<FieldPath>) {}
+
+  assign(entries: Iterable<readonly [FieldPath, string[]]>) {
+    this.#map.clear();
+    for (const entry of entries) {
+      let array = entry[1];
+      const set = new Set(array);
+      if (array.length > set.size) {
+        array = Array.from(set);
+      }
+      this.#map.set(entry[0], {
+        set,
+        array,
+      });
+    }
+    return this;
+  }
+
+  updateErrors(errors: ReadonlyArray<ValidationError>): this {
+    this.#map.clear();
+    for (const { path, message } of errors) {
+      const p = internalRegisterFieldPath(this.ref, path);
+      const field = this.#map.get(p);
+      if (field) {
+        const l = field.set.size;
+        field.set.add(message);
+        if (l < field.set.size) {
+          field.array.push(message);
+        }
+      } else {
+        const array = [message];
+        this.#map.set(p, {
+          set: new Set(array),
+          array,
+        });
+      }
+    }
+    return this;
+  }
+
+  getFieldErrors(path: FieldPath): ReadonlyArray<string> | undefined {
+    return this.#map.get(path)?.array;
+  }
+
+  updateFieldErrors(path: FieldPath, errors: Update<string[]>) {
+    if (typeof errors === "function") {
+      const arr = this.#map.get(path)?.array ?? [];
+      errors = errors(arr);
+    }
+    if (errors.length > 0) {
+      const set = new Set(errors);
+      this.#map.set(path, {
+        set,
+        array: Array.from(set),
+      });
+    } else {
+      this.#map.delete(path);
+    }
+    return errors.length === 0;
+  }
+
+  hasErrors() {
+    return this.#map.size > 0;
+  }
+
+  clear() {
+    this.#map.clear()
+  }
+
+  *[Symbol.iterator]() {
+    const casted: [FieldPath, string[]] = [[] as RPath as FieldPath, []];
+    for (const pair of this.#map) {
+      casted[0] = pair[0];
+      casted[1] = pair[1].array;
+      yield casted;
+    }
+  }
+}

packages/form/src/form/state/attributes.ts

@@ -176,7 +176,8 @@ export function ariaInvalidProp<T extends AriaAttributes, FT>(
   config: Config,
   ctx: FormState<FT>
 ): T {
-  obj["aria-invalid"] = ctx[FORM_ERRORS].has(config.path);
+  obj["aria-invalid"] =
+    ctx[FORM_ERRORS].getFieldErrors(config.path) !== undefined;
   return obj;
 }
 

packages/form/src/form/state/errors.ts

@@ -7,7 +7,6 @@ import type { FieldPath } from "../id.js";
 import {
   FORM_ERRORS,
   FORM_PATHS_TRIE_REF,
-  internalAssignErrors,
   internalRegisterFieldPath,
 } from "../internals.js";
 import type { Update } from "../model.js";
@@ -23,7 +22,7 @@ export function getFieldErrors<T>(
   ctx: FormState<T>,
   path: FieldPath
 ): FieldErrors {
-  return ctx[FORM_ERRORS].get(path) ?? NO_ERRORS;
+  return ctx[FORM_ERRORS].getFieldErrors(path) ?? NO_ERRORS;
 }
 
 /**
@@ -48,7 +47,7 @@ export function getFieldsErrors<T>(
 ): string[] {
   const errors: string[] = [];
   for (let i = 0; i < paths.length; i++) {
-    const errs = ctx[FORM_ERRORS].get(paths[i]!);
+    const errs = ctx[FORM_ERRORS].getFieldErrors(paths[i]!);
     if (errs) {
       for (let j = 0; j < errs.length; j++) {
         errors.push(errs[j]!);
@@ -74,14 +73,15 @@ export function getFieldsErrorsByPath<T>(
 /**
  * @command
  */
-export function updateErrors<T>(ctx: FormState<T>, errors: ReadonlyArray<ValidationError>) {
+export function updateErrors<T>(
+  ctx: FormState<T>,
+  errors: ReadonlyArray<ValidationError>
+) {
   untrack(() => {
-    internalAssignErrors(ctx[FORM_PATHS_TRIE_REF], ctx[FORM_ERRORS], errors);
+    ctx[FORM_ERRORS].updateErrors(errors);
   });
 }
 
-// NOTE: The `errors` map must contain non-empty error lists
-// for the `errors.size > 0` check to be useful.
 /**
  * @command
  */
@@ -90,18 +90,7 @@ export function updateFieldErrors<T>(
   path: FieldPath,
   errors: Update<string[]>
 ): boolean {
-  return untrack(() => {
-    if (typeof errors === "function") {
-      const arr = ctx[FORM_ERRORS].get(path) ?? [];
-      errors = errors(arr);
-    }
-    if (errors.length > 0) {
-      ctx[FORM_ERRORS].set(path, errors);
-    } else {
-      ctx[FORM_ERRORS].delete(path);
-    }
-    return errors.length === 0;
-  });
+  return untrack(() => ctx[FORM_ERRORS].updateFieldErrors(path, errors));
 }
 
 /**
@@ -125,14 +114,14 @@ export function updateFieldErrorsByPath<T>(
  * @query
  */
 export function hasErrors<T>(ctx: FormState<T>) {
-  return ctx[FORM_ERRORS].size > 0;
+  return ctx[FORM_ERRORS].hasErrors();
 }
 
 /**
  * @query
  */
 export function getErrors<T>(
   ctx: FormState<T>
-): Iterable<[FieldPath, string[]]> {
+): Iterable<[FieldPath, FieldErrors]> {
   return ctx[FORM_ERRORS];
 }

packages/form/src/form/state/event-handlers.svelte.ts

@@ -81,6 +81,9 @@ export function hasFieldStateByPath<T>(
   );
 }
 
+
+const NO_ERRORS: string[] = [];
+
 export function makeEventHandlers<T>(
   ctx: FormState<T>,
   config: () => Config,
@@ -97,7 +100,7 @@ export function makeEventHandlers<T>(
     const initialPath = path;
     return () => {
       ctx[FORM_FIELDS_STATE_MAP].delete(initialPath);
-      ctx[FORM_ERRORS].delete(initialPath);
+      ctx[FORM_ERRORS].updateFieldErrors(initialPath, NO_ERRORS);
     };
   });
 

packages/form/src/form/state/state.ts

@@ -12,7 +12,6 @@ import {
   type UiSchemaRoot,
 } from "../ui-schema.js";
 import type {
-  FormErrorsMap,
   FormSubmission,
   FieldsValidation,
 } from "../errors.js";
@@ -47,6 +46,7 @@ import {
   FORM_PATHS_TRIE_REF,
   FORM_ROOT_PATH,
   FORM_ID_PREFIX,
+  FormErrors,
 } from "../internals.js";
 import type { FieldPath, Id } from "../id.js";
 import type { FieldState } from "../field-state.js";
@@ -68,7 +68,7 @@ export interface FormState<T> {
   readonly [FORM_ROOT_PATH]: FieldPath;
   readonly [FORM_ID_FROM_PATH]: (path: FieldPath) => Id;
   readonly [FORM_PATHS_TRIE_REF]: PathTrieRef<FieldPath>;
-  readonly [FORM_ERRORS]: FormErrorsMap;
+  readonly [FORM_ERRORS]: FormErrors;
   readonly [FORM_MARK_SCHEMA_CHANGE]: () => void;
   readonly [FORM_KEYED_ARRAYS]: KeyedArraysMap;
   readonly [FORM_FIELDS_VALIDATION_MODE]: number;