@strictly/react-form 0.0.23 → 0.0.25

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-ESM dist/index.js 56.70 KB
-ESM ⚡️ Build success in 139ms
-CJS dist/index.cjs 60.71 KB
-CJS ⚡️ Build success in 141ms
+CJS dist/index.cjs 61.91 KB
+CJS ⚡️ Build success in 125ms
+ESM dist/index.js 57.87 KB
+ESM ⚡️ Build success in 146ms
 DTS Build start
-DTS ⚡️ Build success in 31420ms
-DTS dist/index.d.cts 37.20 KB
-DTS dist/index.d.ts  37.20 KB
-Done in 32.57s.
+DTS ⚡️ Build success in 31902ms
+DTS dist/index.d.cts 37.37 KB
+DTS dist/index.d.ts  37.37 KB
+Done in 33.10s.

package/.turbo/turbo-check-types.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc -b
-Done in 0.37s.
+Done in 0.35s.

package/core/mobx/form_model.ts

@@ -89,6 +89,7 @@ type FlattenedFieldOverrides<
 }
 
 export enum Validation {
+  None = 0,
   Changed = 1,
   Always = 2,
 }
@@ -211,7 +212,7 @@ export abstract class FormModel<
       case 'edit':
         return false
       default:
-        return this.mode satisfies never
+        throw new UnreachableError(this.mode)
     }
   }
 
@@ -272,7 +273,7 @@ export abstract class FormModel<
     return this.synthesizeFieldByPaths(valuePath, typePath)
   }
 
-  private synthesizeFieldByPaths(valuePath: keyof ValuePathsToAdapters, typePath: keyof TypePathsToAdapters) {
+  private getField(valuePath: keyof ValuePathsToAdapters, typePath: keyof TypePathsToAdapters) {
     const adapter = this.adapters[typePath]
     if (adapter == null) {
       // invalid path, which can happen
@@ -310,12 +311,39 @@ export abstract class FormModel<
       valuePath as string,
       context,
     )
-    // const error = this.errors[valuePath]
-    let error: unknown = undefined
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value
-    const validation = this.validation[valuePath]
+
+    return {
+      context,
+      convert,
+      create,
+      revert,
+      displayedValue,
+      // value,
+      required,
+      readonly,
+      defaultValue,
+    }
+  }
+
+  private synthesizeFieldByPaths(valuePath: keyof ValuePathsToAdapters, typePath: keyof TypePathsToAdapters) {
+    const field = this.getField(valuePath, typePath)
+    if (field == null) {
+      return
+    }
+    const {
+      context,
+      convert,
+      revert,
+      displayedValue,
+      required,
+      readonly,
+      defaultValue,
+    } = field
+    const validation = this.validation[valuePath] ?? Validation.None
+    let error: unknown
     switch (validation) {
-      case undefined:
+      case Validation.None:
         // skip validation
         break
       case Validation.Changed:
@@ -347,7 +375,7 @@ export abstract class FormModel<
         throw new UnreachableError(validation)
     }
     return {
-      value: fieldOverride != null ? fieldOverride[0] : value,
+      value: displayedValue,
       error,
       readonly: readonly && !this.forceMutableFields,
       required,
@@ -393,7 +421,7 @@ export abstract class FormModel<
   setFieldValue<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
-    validation: Validation | undefined | null = this.validation[valuePath],
+    validation?: Validation,
   ): boolean {
     return this.internalSetFieldValue(valuePath, value, validation)
   }
@@ -563,7 +591,7 @@ export abstract class FormModel<
   private internalSetFieldValue<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
-    validation: Validation | undefined | null,
+    validation: Validation | undefined,
   ): boolean {
     const { revert } = this.getAdapterForValuePath(valuePath)
 
@@ -576,8 +604,6 @@ export abstract class FormModel<
       this.fieldOverrides[valuePath] = [value]
       if (validation != null) {
         this.validation[valuePath] = validation
-      } else {
-        delete this.validation[valuePath]
       }
       switch (conversion.type) {
         case UnreliableFieldConversionType.Failure:
@@ -644,12 +670,44 @@ export abstract class FormModel<
     return keys.has(valuePath as string)
   }
 
+  getValidation<K extends keyof ValuePathsToAdapters>(valuePath: K): Validation {
+    return this.validation[valuePath] ?? Validation.None
+  }
+
+  isDirty<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const typePath = valuePathToTypePath<ValueToTypePaths, keyof ValueToTypePaths>(
+      this.type,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      valuePath as keyof ValueToTypePaths,
+      true,
+    ) as keyof TypePathsToAdapters
+    const field = this.getField(valuePath, typePath)
+
+    if (field == null) {
+      return false
+    }
+
+    const {
+      displayedValue,
+      convert,
+      context,
+      defaultValue,
+    } = field
+
+    const originalValue = valuePath in this.originalValues
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      ? this.originalValues[valuePath as string]
+      : defaultValue
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const { value: originalDisplayedValue } = convert(originalValue, valuePath as string, context)
+    // TODO better comparisons, displayed values can still be complex
+    return (displayedValue !== originalDisplayedValue)
+  }
+
   validateField<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
-    validation: Validation = Math.max(
-      this.mode === 'create' ? Validation.Always : Validation.Changed,
-      this.validation[valuePath] ?? Validation.Changed,
-    ),
+    validation: Validation = Validation.Always,
   ): boolean {
     runInAction(() => {
       this.validation[valuePath] = validation
@@ -657,7 +715,7 @@ export abstract class FormModel<
     return this.fields[valuePath].error == null
   }
 
-  validateAll(validation: Validation = this.mode === 'create' ? Validation.Always : Validation.Changed): boolean {
+  validateAll(validation: Validation = Validation.Always): boolean {
     const accessors = toArray(this.accessors)
 
     runInAction(() => {

package/core/mobx/hooks.tsx

@@ -8,6 +8,7 @@ import {
 import type { ValueTypeOfField } from 'types/value_type_of_field'
 import {
   type FormModel,
+  Validation,
 } from './form_model'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -40,8 +41,8 @@ export function useDefaultMobxFormHooks<
       path: Path,
       value: ValueTypeOfField<F[Path]>,
     ) {
-      // clear any validation
-      model.setFieldValue<Path>(path, value, null)
+      const validation = Math.min(model.getValidation(path), Validation.Changed)
+      model.setFieldValue<Path>(path, value, validation)
     },
     [model],
   )
@@ -65,8 +66,10 @@ export function useDefaultMobxFormHooks<
       // (e.g. changing a discriminator)
       // TODO debounce?
       setTimeout(function () {
-        if (model.isValuePathActive(path)) {
-          model.validateField(path)
+        // only start validation if the user has changed the field
+        if (model.isValuePathActive(path) && model.isDirty(path)) {
+          // further workaround to make sure we don't downgrade the existing validation
+          model.validateField(path, Math.max(Validation.Changed, model.getValidation(path)))
         }
       }, 100)
     },

package/core/mobx/specs/form_model.tests.ts

@@ -1267,8 +1267,8 @@ describe('all', function () {
           expect(model.fields['$.n'].readonly).toBeTruthy()
         })
 
-        it('validates successfully with clean, but invalid data', () => {
-          expect(model.validateAll()).toBeTruthy()
+        it('fails validation with invalid, clean data', () => {
+          expect(model.validateAll()).toBeFalsy()
         })
 
         it('fails validation with invalid, dirty data', () => {

package/dist/index.cjs

@@ -358,6 +358,7 @@ var import_base2 = require("@strictly/base");
 var import_define = require("@strictly/define");
 var import_mobx = require("mobx");
 var Validation = /* @__PURE__ */ ((Validation2) => {
+  Validation2[Validation2["None"] = 0] = "None";
   Validation2[Validation2["Changed"] = 1] = "Changed";
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
@@ -412,7 +413,7 @@ var FormModel = class {
       case "edit":
         return false;
       default:
-        return this.mode;
+        throw new import_base2.UnreachableError(this.mode);
     }
   }
   get fields() {
@@ -462,7 +463,7 @@ var FormModel = class {
     }
     return this.synthesizeFieldByPaths(valuePath, typePath);
   }
-  synthesizeFieldByPaths(valuePath, typePath) {
+  getField(valuePath, typePath) {
     const adapter2 = this.adapters[typePath];
     if (adapter2 == null) {
       return;
@@ -490,11 +491,38 @@ var FormModel = class {
       valuePath,
       context
     );
-    let error = void 0;
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
-    const validation = this.validation[valuePath];
+    return {
+      context,
+      convert,
+      create,
+      revert,
+      displayedValue,
+      // value,
+      required,
+      readonly,
+      defaultValue
+    };
+  }
+  synthesizeFieldByPaths(valuePath, typePath) {
+    var _a;
+    const field = this.getField(valuePath, typePath);
+    if (field == null) {
+      return;
+    }
+    const {
+      context,
+      convert,
+      revert,
+      displayedValue,
+      required,
+      readonly,
+      defaultValue
+    } = field;
+    const validation = (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
+    let error;
     switch (validation) {
-      case void 0:
+      case 0 /* None */:
         break;
       case 1 /* Changed */:
         if (revert != null) {
@@ -522,7 +550,7 @@ var FormModel = class {
         throw new import_base2.UnreachableError(validation);
     }
     return {
-      value: fieldOverride != null ? fieldOverride[0] : value,
+      value: displayedValue,
       error,
       readonly: readonly && !this.forceMutableFields,
       required
@@ -555,7 +583,7 @@ var FormModel = class {
   typePath(valuePath) {
     return (0, import_define.valuePathToTypePath)(this.type, valuePath, true);
   }
-  setFieldValue(valuePath, value, validation = this.validation[valuePath]) {
+  setFieldValue(valuePath, value, validation) {
     return this.internalSetFieldValue(valuePath, value, validation);
   }
   addListItem(valuePath, elementValue = null, index) {
@@ -699,8 +727,6 @@ var FormModel = class {
       this.fieldOverrides[valuePath] = [value];
       if (validation != null) {
         this.validation[valuePath] = validation;
-      } else {
-        delete this.validation[valuePath];
       }
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -757,16 +783,38 @@ var FormModel = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(valuePath, validation = Math.max(
-    this.mode === "create" ? 2 /* Always */ : 1 /* Changed */,
-    ((_a) => (_a = this.validation[valuePath]) != null ? _a : 1 /* Changed */)()
-  )) {
+  getValidation(valuePath) {
+    var _a;
+    return (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
+  }
+  isDirty(valuePath) {
+    const typePath = (0, import_define.valuePathToTypePath)(
+      this.type,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      valuePath,
+      true
+    );
+    const field = this.getField(valuePath, typePath);
+    if (field == null) {
+      return false;
+    }
+    const {
+      displayedValue,
+      convert,
+      context,
+      defaultValue
+    } = field;
+    const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+    const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+    return displayedValue !== originalDisplayedValue;
+  }
+  validateField(valuePath, validation = 2 /* Always */) {
     (0, import_mobx.runInAction)(() => {
       this.validation[valuePath] = validation;
     });
     return this.fields[valuePath].error == null;
   }
-  validateAll(validation = this.mode === "create" ? 2 /* Always */ : 1 /* Changed */) {
+  validateAll(validation = 2 /* Always */) {
     const accessors = (0, import_base2.toArray)(this.accessors);
     (0, import_mobx.runInAction)(() => {
       accessors.forEach(([valuePath]) => {
@@ -801,7 +849,8 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = (0, import_react.useCallback)(
     function(path, value) {
-      model.setFieldValue(path, value, null);
+      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      model.setFieldValue(path, value, validation);
     },
     [model]
   );
@@ -820,8 +869,8 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = (0, import_react.useCallback)(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path)) {
-          model.validateField(path);
+        if (model.isValuePathActive(path) && model.isDirty(path)) {
+          model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
         }
       }, 100);
     },

package/dist/index.d.cts

@@ -113,6 +113,7 @@ type FlattenedFieldOverrides<ValuePathsToAdapters extends Readonly<Record<string
     -readonly [K in keyof ValuePathsToAdapters]?: FieldOverride<ToOfFieldAdapter<ValuePathsToAdapters[K]>>;
 };
 declare enum Validation {
+    None = 0,
     Changed = 1,
     Always = 2
 }
@@ -141,13 +142,14 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
+    private getField;
     private synthesizeFieldByPaths;
     getAccessorForValuePath(valuePath: keyof ValuePathsToAdapters): Accessor | undefined;
     get accessors(): Readonly<Record<string, Accessor>>;
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
-    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation | undefined | null): boolean;
+    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation): boolean;
     addListItem<K extends keyof FlattenedListTypesOfType<T>>(valuePath: K, elementValue?: Maybe<ElementOfArray<FlattenedValuesOfType<T>[K]>>, index?: number): void;
     removeListItem<K extends keyof FlattenedListTypesOfType<T>>(...elementValuePaths: readonly `${K}.${number}`[]): void;
     private internalSetFieldValue;
@@ -155,6 +157,8 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(valuePath: K): void;
     clearAll(value: ValueOfType<T>): void;
     isValuePathActive<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
+    getValidation<K extends keyof ValuePathsToAdapters>(valuePath: K): Validation;
+    isDirty<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     validateField<K extends keyof ValuePathsToAdapters>(valuePath: K, validation?: Validation): boolean;
     validateAll(validation?: Validation): boolean;
 }

package/dist/index.d.ts

@@ -113,6 +113,7 @@ type FlattenedFieldOverrides<ValuePathsToAdapters extends Readonly<Record<string
     -readonly [K in keyof ValuePathsToAdapters]?: FieldOverride<ToOfFieldAdapter<ValuePathsToAdapters[K]>>;
 };
 declare enum Validation {
+    None = 0,
     Changed = 1,
     Always = 2
 }
@@ -141,13 +142,14 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
+    private getField;
     private synthesizeFieldByPaths;
     getAccessorForValuePath(valuePath: keyof ValuePathsToAdapters): Accessor | undefined;
     get accessors(): Readonly<Record<string, Accessor>>;
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
     typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K];
-    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation | undefined | null): boolean;
+    setFieldValue<K extends keyof ValuePathsToAdapters>(valuePath: K, value: ToOfFieldAdapter<ValuePathsToAdapters[K]>, validation?: Validation): boolean;
     addListItem<K extends keyof FlattenedListTypesOfType<T>>(valuePath: K, elementValue?: Maybe<ElementOfArray<FlattenedValuesOfType<T>[K]>>, index?: number): void;
     removeListItem<K extends keyof FlattenedListTypesOfType<T>>(...elementValuePaths: readonly `${K}.${number}`[]): void;
     private internalSetFieldValue;
@@ -155,6 +157,8 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(valuePath: K): void;
     clearAll(value: ValueOfType<T>): void;
     isValuePathActive<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
+    getValidation<K extends keyof ValuePathsToAdapters>(valuePath: K): Validation;
+    isDirty<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     validateField<K extends keyof ValuePathsToAdapters>(valuePath: K, validation?: Validation): boolean;
     validateAll(validation?: Validation): boolean;
 }

package/dist/index.js

@@ -327,6 +327,7 @@ import {
   runInAction
 } from "mobx";
 var Validation = /* @__PURE__ */ ((Validation2) => {
+  Validation2[Validation2["None"] = 0] = "None";
   Validation2[Validation2["Changed"] = 1] = "Changed";
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
@@ -381,7 +382,7 @@ var FormModel = class {
       case "edit":
         return false;
       default:
-        return this.mode;
+        throw new UnreachableError2(this.mode);
     }
   }
   get fields() {
@@ -431,7 +432,7 @@ var FormModel = class {
     }
     return this.synthesizeFieldByPaths(valuePath, typePath);
   }
-  synthesizeFieldByPaths(valuePath, typePath) {
+  getField(valuePath, typePath) {
     const adapter2 = this.adapters[typePath];
     if (adapter2 == null) {
       return;
@@ -459,11 +460,38 @@ var FormModel = class {
       valuePath,
       context
     );
-    let error = void 0;
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
-    const validation = this.validation[valuePath];
+    return {
+      context,
+      convert,
+      create,
+      revert,
+      displayedValue,
+      // value,
+      required,
+      readonly,
+      defaultValue
+    };
+  }
+  synthesizeFieldByPaths(valuePath, typePath) {
+    var _a;
+    const field = this.getField(valuePath, typePath);
+    if (field == null) {
+      return;
+    }
+    const {
+      context,
+      convert,
+      revert,
+      displayedValue,
+      required,
+      readonly,
+      defaultValue
+    } = field;
+    const validation = (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
+    let error;
     switch (validation) {
-      case void 0:
+      case 0 /* None */:
         break;
       case 1 /* Changed */:
         if (revert != null) {
@@ -491,7 +519,7 @@ var FormModel = class {
         throw new UnreachableError2(validation);
     }
     return {
-      value: fieldOverride != null ? fieldOverride[0] : value,
+      value: displayedValue,
       error,
       readonly: readonly && !this.forceMutableFields,
       required
@@ -524,7 +552,7 @@ var FormModel = class {
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
   }
-  setFieldValue(valuePath, value, validation = this.validation[valuePath]) {
+  setFieldValue(valuePath, value, validation) {
     return this.internalSetFieldValue(valuePath, value, validation);
   }
   addListItem(valuePath, elementValue = null, index) {
@@ -668,8 +696,6 @@ var FormModel = class {
       this.fieldOverrides[valuePath] = [value];
       if (validation != null) {
         this.validation[valuePath] = validation;
-      } else {
-        delete this.validation[valuePath];
       }
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -726,16 +752,38 @@ var FormModel = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(valuePath, validation = Math.max(
-    this.mode === "create" ? 2 /* Always */ : 1 /* Changed */,
-    ((_a) => (_a = this.validation[valuePath]) != null ? _a : 1 /* Changed */)()
-  )) {
+  getValidation(valuePath) {
+    var _a;
+    return (_a = this.validation[valuePath]) != null ? _a : 0 /* None */;
+  }
+  isDirty(valuePath) {
+    const typePath = valuePathToTypePath(
+      this.type,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      valuePath,
+      true
+    );
+    const field = this.getField(valuePath, typePath);
+    if (field == null) {
+      return false;
+    }
+    const {
+      displayedValue,
+      convert,
+      context,
+      defaultValue
+    } = field;
+    const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+    const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+    return displayedValue !== originalDisplayedValue;
+  }
+  validateField(valuePath, validation = 2 /* Always */) {
     runInAction(() => {
       this.validation[valuePath] = validation;
     });
     return this.fields[valuePath].error == null;
   }
-  validateAll(validation = this.mode === "create" ? 2 /* Always */ : 1 /* Changed */) {
+  validateAll(validation = 2 /* Always */) {
     const accessors = toArray(this.accessors);
     runInAction(() => {
       accessors.forEach(([valuePath]) => {
@@ -772,7 +820,8 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      model.setFieldValue(path, value, null);
+      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      model.setFieldValue(path, value, validation);
     },
     [model]
   );
@@ -791,8 +840,8 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = useCallback(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path)) {
-          model.validateField(path);
+        if (model.isValuePathActive(path) && model.isDirty(path)) {
+          model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
         }
       }, 100);
     },

package/package.json

@@ -72,7 +72,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "exports": {
     ".": {
       "import": {