@holo-js/forms 0.3.16 → 0.3.18

package/dist/internal/client.d.ts

@@ -7,16 +7,26 @@ declare class FormClientState<TValues, TSuccess = unknown> {
     values: TValues;
     initialValues: TValues;
     flattenedErrors: Record<string, readonly string[]>;
-    touched: Set<string>;
-    dirty: Set<string>;
+    readonly touched: Set<string>;
     lastSubmission?: SerializedFormSubmission<TValues> | FormFailurePayload<TValues> | FormSuccessPayload<TSuccess>;
     readonly listeners: Set<() => void>;
-    validationSequence: number;
     constructor(values: TValues, initialState?: SerializedFormSubmission<TValues> | FormFailurePayload<TValues>);
     get submitting(): boolean;
     get errors(): ValidationErrorBag<TValues>;
     get dirtyPaths(): readonly string[];
-    replace(values: TValues, initialValues: TValues, errors: Record<string, readonly string[]>, touched: ReadonlySet<string>): void;
+    notify(): void;
+    invalidateEffects(): void;
+    beginValidation(): number;
+    isLatestValidation(sequence: number): boolean;
+    beginSubmissionEffects(): number;
+    ownsSubmissionEffects(sequence: number): boolean;
+    touch(path: string): void;
+    edit(path: string, value: unknown): void;
+    isDirty(path: string): boolean;
+    applyValidation(sequence: number, errors: Record<string, readonly string[]>, values?: Partial<TValues>): void;
+    applyFieldValidation(sequence: number, path: string, errors: Record<string, readonly string[]>): void;
+    applyServer(values: TValues, errors: Record<string, readonly string[]>, submission: FormClientState<TValues, TSuccess>['lastSubmission']): void;
+    reset(values?: Partial<TValues>): void;
     startSubmission(signal?: AbortSignal): () => void;
 }
 

package/dist/internal/client.mjs

@@ -275,10 +275,10 @@ var FormClientState = class {
   initialValues;
   flattenedErrors;
   touched = /* @__PURE__ */ new Set();
-  dirty = /* @__PURE__ */ new Set();
   lastSubmission;
   listeners = /* @__PURE__ */ new Set();
-  validationSequence = 0;
+  #validationSequence = 0;
+  #submissionSequence = 0;
   #submissions = /* @__PURE__ */ new Set();
   constructor(values, initialState) {
     this.values = cloneFormValue(values);
@@ -295,12 +295,68 @@ var FormClientState = class {
   get dirtyPaths() {
     return collectFormDirtyPaths(this.values, this.initialValues);
   }
-  replace(values, initialValues, errors, touched) {
+  notify() {
+    for (const listener of this.listeners) listener();
+  }
+  invalidateEffects() {
+    this.#validationSequence += 1;
+    this.#submissionSequence += 1;
+  }
+  beginValidation() {
+    return ++this.#validationSequence;
+  }
+  isLatestValidation(sequence) {
+    return sequence === this.#validationSequence;
+  }
+  beginSubmissionEffects() {
+    this.#validationSequence += 1;
+    return ++this.#submissionSequence;
+  }
+  ownsSubmissionEffects(sequence) {
+    return sequence === this.#submissionSequence;
+  }
+  touch(path) {
+    this.touched.add(path);
+  }
+  edit(path, value) {
+    this.invalidateEffects();
+    setFormValueAtPath(this.values, path, value);
+    this.touch(path);
+  }
+  isDirty(path) {
+    return !areFormValuesEqual(getFormValueAtPath(this.values, path), getFormValueAtPath(this.initialValues, path));
+  }
+  applyValidation(sequence, errors, values) {
+    if (!this.isLatestValidation(sequence)) return;
+    if (values) this.values = mergeFormValues(this.values, values);
+    this.flattenedErrors = errors;
+    this.notify();
+  }
+  applyFieldValidation(sequence, path, errors) {
+    if (!this.isLatestValidation(sequence)) return;
+    const prefix = `${path}.`;
+    const merged = Object.fromEntries(Object.entries(this.flattenedErrors).filter(([key]) => key !== path && !key.startsWith(prefix)));
+    for (const [key, messages] of Object.entries(errors)) {
+      if (key === path || key.startsWith(prefix)) merged[key] = messages;
+    }
+    this.applyValidation(sequence, merged);
+  }
+  applyServer(values, errors, submission) {
+    this.#validationSequence += 1;
     this.values = values;
-    this.initialValues = initialValues;
     this.flattenedErrors = errors;
-    this.touched = new Set(touched);
-    this.dirty = new Set(this.dirtyPaths);
+    this.lastSubmission = submission;
+    this.notify();
+  }
+  reset(values) {
+    const next = mergeFormValues(this.initialValues, values);
+    this.invalidateEffects();
+    this.values = cloneFormValue(next);
+    this.initialValues = cloneFormValue(next);
+    this.flattenedErrors = {};
+    this.touched.clear();
+    this.lastSubmission = void 0;
+    this.notify();
   }
   startSubmission(signal) {
     const id = /* @__PURE__ */ Symbol();
@@ -446,36 +502,12 @@ async function runWithBrowserFormElement(formClient, form) {
   }
   return await formClient.submit();
 }
-function notifyListeners(state) {
-  for (const listener of state.listeners) {
-    listener();
-  }
-}
-function nextValidationSequence(state) {
-  state.validationSequence += 1;
-  return state.validationSequence;
-}
-function isLatestValidation(state, sequence) {
-  return sequence === state.validationSequence;
-}
 function collectErrorsForPath(flattenedErrors, path) {
   const direct = flattenedErrors[path] ?? [];
   const prefix = `${path}.`;
   const nested = Object.entries(flattenedErrors).filter(([key]) => key.startsWith(prefix)).flatMap(([, messages]) => messages);
   return direct.length > 0 || nested.length > 0 ? [...direct, ...nested] : [];
 }
-function replaceErrorsForPath(flattenedErrors, path, nextErrors) {
-  const prefix = `${path}.`;
-  const merged = Object.fromEntries(
-    Object.entries(flattenedErrors).filter(([key]) => key !== path && !key.startsWith(prefix))
-  );
-  for (const [key, messages] of Object.entries(nextErrors)) {
-    if (key === path || key.startsWith(prefix)) {
-      merged[key] = messages;
-    }
-  }
-  return merged;
-}
 function buildFieldsTree(state, schemaDefinition, source, validateOn, prefix = "") {
   if (isFormLeafValue(source)) {
     const path = prefix;
@@ -493,56 +525,41 @@ function buildFieldsTree(state, schemaDefinition, source, validateOn, prefix = "
         return state.touched.has(path);
       },
       get dirty() {
-        return state.dirty.has(path);
+        return state.isDirty(path);
       },
       async set(value) {
-        setFormValueAtPath(state.values, path, value);
-        state.touched.add(path);
-        if (!areFormValuesEqual(getFormValueAtPath(state.initialValues, path), value)) {
-          state.dirty.add(path);
-        } else {
-          state.dirty.delete(path);
-        }
+        state.edit(path, value);
         if (validateOn === "change") {
-          const sequence = nextValidationSequence(state);
+          const sequence = state.beginValidation();
           const submission = await validateClientValues(
             cloneFormValue(state.values),
             schemaDefinition
           );
-          if (isLatestValidation(state, sequence)) {
-            state.flattenedErrors = submission.errors.flatten();
-          }
+          state.applyValidation(sequence, submission.errors.flatten());
+          return;
         }
-        notifyListeners(state);
+        state.notify();
       },
       async onInput(value) {
         await this.set(value);
       },
       async onBlur() {
-        state.touched.add(path);
+        state.touch(path);
         if (validateOn === "blur") {
-          const sequence = nextValidationSequence(state);
+          const sequence = state.beginValidation();
           const submission = await validateClientValues(
             cloneFormValue(state.values),
             schemaDefinition
           );
-          if (isLatestValidation(state, sequence)) {
-            state.flattenedErrors = replaceErrorsForPath(
-              state.flattenedErrors,
-              path,
-              submission.errors.flatten()
-            );
-          }
+          state.applyFieldValidation(sequence, path, submission.errors.flatten());
+          return;
         }
-        notifyListeners(state);
+        state.notify();
       },
       async validate() {
-        const sequence = nextValidationSequence(state);
+        const sequence = state.beginValidation();
         const submission = await validateClientValues(cloneFormValue(state.values), schemaDefinition);
-        if (isLatestValidation(state, sequence)) {
-          state.flattenedErrors = submission.errors.flatten();
-          notifyListeners(state);
-        }
+        state.applyValidation(sequence, submission.errors.flatten());
         return state.flattenedErrors[path] ?? [];
       }
     });
@@ -728,28 +745,21 @@ function createFormClient(schemaDefinition, options = {}) {
     return await runValidationForInput(cloneFormValue(state.values));
   }
   async function runValidationForInput(input) {
-    const sequence = nextValidationSequence(state);
+    const sequence = state.beginValidation();
     const submission = await validateClientValues(input, schemaDefinition);
-    if (isLatestValidation(state, sequence)) {
-      state.values = mergeFormValues(
-        state.values,
-        submission.valid ? submission.data : submission.values
-      );
-      state.flattenedErrors = submission.errors.flatten();
-      notifyListeners(state);
-    }
+    state.applyValidation(sequence, submission.errors.flatten(), submission.valid ? submission.data : submission.values);
     return submission;
   }
-  function applyServerState(result) {
+  function applyServerState(result, submissionSequence) {
     const normalized = normalizeSubmissionLike(
       schemaDefinition,
       state.values,
       result
     );
+    const applies = submissionSequence === void 0 || state.ownsSubmissionEffects(submissionSequence);
+    if (submissionSequence === void 0) state.invalidateEffects();
     if ("ok" in normalized && normalized.ok === true) {
-      state.lastSubmission = normalized;
-      state.flattenedErrors = {};
-      notifyListeners(state);
+      if (applies) state.applyServer(state.values, {}, normalized);
       return normalized;
     }
     if ("ok" in normalized && normalized.ok === false) {
@@ -757,24 +767,25 @@ function createFormClient(schemaDefinition, options = {}) {
         ...normalized,
         values: sanitizeFlashedInput(normalized.values, schemaDefinition)
       };
-      state.values = mergeFormValues(state.values, sanitized.values);
-      clearSensitiveInputValues(state.values, schemaDefinition);
-      state.flattenedErrors = sanitized.errors;
-      state.lastSubmission = sanitized;
-      notifyListeners(state);
+      if (applies) {
+        const values = mergeFormValues(state.values, sanitized.values);
+        clearSensitiveInputValues(values, schemaDefinition);
+        state.applyServer(values, sanitized.errors, sanitized);
+      }
       return sanitized;
     }
     const normalizedSubmission = normalized;
-    state.values = mergeFormValues(state.values, normalizedSubmission.values);
-    clearSensitiveInputValues(state.values, schemaDefinition);
-    state.flattenedErrors = normalizedSubmission.errors.flatten();
-    state.lastSubmission = normalizedSubmission.valid ? void 0 : normalizedSubmission.fail();
-    notifyListeners(state);
+    if (applies) {
+      const values = mergeFormValues(state.values, normalizedSubmission.values);
+      clearSensitiveInputValues(values, schemaDefinition);
+      state.applyServer(values, normalizedSubmission.errors.flatten(), normalizedSubmission.valid ? void 0 : normalizedSubmission.fail());
+    }
     return normalizedSubmission;
   }
   async function submit(browserForm) {
+    const submissionSequence = state.beginSubmissionEffects();
     const finishSubmission = state.startSubmission();
-    notifyListeners(state);
+    state.notify();
     try {
       const submitter = options.submitter ?? ((context) => defaultSubmitter(context, options));
       const liveForm = browserForm ?? getActiveElementBrowserForm();
@@ -805,17 +816,18 @@ function createFormClient(schemaDefinition, options = {}) {
           throw error;
         }
         return applyServerState(
-          validationExceptionToFailure(error, state.values) ?? createTransportFailure(state.values)
+          validationExceptionToFailure(error, localSubmission.data) ?? createTransportFailure(localSubmission.data),
+          submissionSequence
         );
       }
       return applyServerState(response ?? {
         ok: true,
         status: 204,
         data: void 0
-      });
+      }, submissionSequence);
     } finally {
       finishSubmission();
-      notifyListeners(state);
+      state.notify();
     }
   }
   return Object.freeze({
@@ -855,28 +867,15 @@ function createFormClient(schemaDefinition, options = {}) {
       return submit(form);
     },
     reset(values) {
-      const next = mergeFormValues(state.initialValues, values);
-      state.values = cloneFormValue(next);
-      state.initialValues = cloneFormValue(next);
-      state.flattenedErrors = {};
-      state.touched.clear();
-      state.dirty.clear();
-      state.lastSubmission = void 0;
-      notifyListeners(state);
+      state.reset(values);
     },
     async setValue(path, value) {
-      setFormValueAtPath(state.values, path, value);
-      state.touched.add(path);
-      if (!areFormValuesEqual(getFormValueAtPath(state.initialValues, path), value)) {
-        state.dirty.add(path);
-      } else {
-        state.dirty.delete(path);
-      }
+      state.edit(path, value);
       if (validateOn === "change" && fieldPaths.includes(path)) {
         await runValidation();
         return;
       }
-      notifyListeners(state);
+      state.notify();
     },
     applyServerState(result) {
       return applyServerState(result);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holo-js/forms",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "description": "Holo-JS Framework - forms-first validation and submission contracts",
   "type": "module",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "test": "vitest --run"
   },
   "dependencies": {
-    "@holo-js/validation": "^0.3.16"
+    "@holo-js/validation": "^0.3.18"
   },
   "peerDependencies": {
-    "@holo-js/security": "^0.3.16"
+    "@holo-js/security": "^0.3.18"
   },
   "peerDependenciesMeta": {
     "@holo-js/security": {