@strictly/react-form 0.0.18 → 0.0.20

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

@@ -16,6 +16,7 @@ import {
 } from '@strictly/define'
 import {
   type FieldAdapter,
+  type ToOfFieldAdapter,
 } from 'core/mobx/field_adapter'
 import {
   adapterFromTwoWayConverter,
@@ -24,6 +25,7 @@ import {
 import {
   type FlattenedTypePathsToAdaptersOf,
   FormModel,
+  Validation,
   type ValuePathsToAdaptersOf,
 } from 'core/mobx/form_model'
 import { mergeAdaptersWithValidators } from 'core/mobx/merge_field_adapters_with_validators'
@@ -46,7 +48,7 @@ import {
 const IS_NAN_ERROR = 1
 
 const originalIntegerToStringAdapter = adapterFromTwoWayConverter(
-  new IntegerToStringConverter(IS_NAN_ERROR),
+  new IntegerToStringConverter<typeof IS_NAN_ERROR, string, unknown>(IS_NAN_ERROR),
   prototypingFieldValueFactory(0),
 )
 
@@ -69,6 +71,13 @@ class TestFormModel<
       valuePath,
     }
   }
+
+  setFieldValueAndValidate<K extends keyof ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>>(
+    valuePath: K,
+    value: ToOfFieldAdapter<ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>[K]>,
+  ) {
+    this.setFieldValue(valuePath, value, Validation.Always)
+  }
 }
 
 describe('all', function () {
@@ -510,7 +519,7 @@ describe('all', function () {
         $: integerToStringAdapter,
       } as const
       const originalValue: ValueOfType<typeof typeDef> = 2
-      let model: FormModel<
+      let model: TestFormModel<
         typeof typeDef,
         ValueToTypePathsOfType<typeof typeDef>,
         typeof adapters
@@ -570,9 +579,9 @@ describe('all', function () {
 
           describe('conversion succeeds, but validation fails', function () {
             const newValue = -1
-            const errorCode = 65
+            const errorCode = IS_NAN_ERROR
             beforeEach(function () {
-              integerToStringAdapter.revert?.mockReturnValueOnce({
+              integerToStringAdapter.revert?.mockReturnValue({
                 type: UnreliableFieldConversionType.Failure,
                 error: errorCode,
                 value: [newValue],
@@ -632,7 +641,7 @@ describe('all', function () {
         '$.*': integerToStringAdapter,
       } as const
       let originalValue: ValueOfType<typeof typeDef>
-      let model: FormModel<
+      let model: TestFormModel<
         typeof typeDef,
         ValueToTypePathsOfType<typeof typeDef>,
         typeof converters
@@ -800,9 +809,11 @@ describe('all', function () {
       describe('addListItem', function () {
         describe('adds default to start of the list', function () {
           beforeEach(function () {
-            model.errors['$.0'] = 0
-            model.errors['$.1'] = 1
-            model.errors['$.2'] = 2
+            model.setFieldValue('$.0', 'x')
+            model.setFieldValue('$.1', '3')
+            model.setFieldValue('$.2', 'z')
+            model.validateAll()
+
             model.addListItem('$', null, 0)
           })
 
@@ -822,7 +833,7 @@ describe('all', function () {
             ],
             [
               '$.1',
-              '1',
+              'x',
             ],
             [
               '$.2',
@@ -830,7 +841,7 @@ describe('all', function () {
             ],
             [
               '$.3',
-              '7',
+              'z',
             ],
           ] as const)('it reports the value of field %s as %s', function (path, fieldValue) {
             expect(model.fields[path]?.value).toBe(fieldValue)
@@ -843,15 +854,15 @@ describe('all', function () {
             ],
             [
               '$.1',
-              0,
+              IS_NAN_ERROR,
             ],
             [
               '$.2',
-              1,
+              undefined,
             ],
             [
               '$.3',
-              2,
+              IS_NAN_ERROR,
             ],
           ] as const)('it reports the error of field %s', function (path, error) {
             expect(model.fields[path]?.error).toBe(error)
@@ -895,9 +906,10 @@ describe('all', function () {
 
       describe('removeListItem', function () {
         beforeEach(function () {
-          model.errors['$.0'] = 0
-          model.errors['$.1'] = 1
-          model.errors['$.2'] = 2
+          model.setFieldValue('$.0', 'x')
+          model.setFieldValue('$.1', '3')
+          model.setFieldValue('$.2', 'z')
+          model.validateAll()
         })
 
         describe('remove first item', function () {
@@ -916,11 +928,11 @@ describe('all', function () {
             expect(model.fields).toEqual({
               '$.0': expect.objectContaining({
                 value: '3',
-                error: 1,
+                error: undefined,
               }),
               '$.1': expect.objectContaining({
-                value: '7',
-                error: 2,
+                value: 'z',
+                error: IS_NAN_ERROR,
               }),
             })
           })
@@ -941,12 +953,12 @@ describe('all', function () {
           it('updates the field values and errors', function () {
             expect(model.fields).toEqual({
               '$.0': expect.objectContaining({
-                value: '1',
-                error: 0,
+                value: 'x',
+                error: IS_NAN_ERROR,
               }),
               '$.1': expect.objectContaining({
-                value: '7',
-                error: 2,
+                value: 'z',
+                error: IS_NAN_ERROR,
               }),
             })
           })
@@ -964,8 +976,8 @@ describe('all', function () {
           it('updates the field values and errors', function () {
             expect(model.fields).toEqual({
               '$.0': expect.objectContaining({
-                value: '7',
-                error: 2,
+                value: 'z',
+                error: IS_NAN_ERROR,
               }),
             })
           })
@@ -987,7 +999,7 @@ describe('all', function () {
         } as const
         type ValueToTypePaths = ValueToTypePathsOfType<typeof type>
         let originalValue: ValueOfType<typeof type>
-        let model: FormModel<
+        let model: TestFormModel<
           typeof type,
           ValueToTypePaths,
           typeof adapters
@@ -1201,7 +1213,7 @@ describe('all', function () {
         }
       })
       describe('create mode', () => {
-        let model: FormModel<
+        let model: TestFormModel<
           typeof typeDef,
           JsonPaths,
           typeof adapters

package/dist/index.cjs

@@ -97,6 +97,7 @@ __export(index_exports, {
   SelectStringConverter: () => SelectStringConverter,
   TrimmingStringConverter: () => TrimmingStringConverter,
   UnreliableFieldConversionType: () => UnreliableFieldConversionType,
+  Validation: () => Validation,
   adapter: () => adapter,
   adapterFromPrototype: () => adapterFromPrototype,
   adapterFromTwoWayConverter: () => adapterFromTwoWayConverter,
@@ -356,19 +357,27 @@ function listAdapter() {
 var import_base2 = require("@strictly/base");
 var import_define = require("@strictly/define");
 var import_mobx = require("mobx");
-var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errors_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
+var Validation = /* @__PURE__ */ ((Validation2) => {
+  Validation2[Validation2["Changed"] = 1] = "Changed";
+  Validation2[Validation2["Always"] = 2] = "Always";
+  return Validation2;
+})(Validation || {});
+var _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _validation;
+_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _validation_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
-    this.originalValue = originalValue;
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
     __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _errors, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
+    __privateAdd(this, _validation, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __publicField(this, "flattenedTypeDefs");
+    // cannot be type safe
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    __publicField(this, "originalValues");
+    this.originalValues = (0, import_define.flattenValuesOfType)(type, originalValue);
     this.value = (0, import_define.mobxCopy)(type, originalValue);
     this.flattenedTypeDefs = (0, import_define.flattenTypesOfType)(type);
     const conversions = (0, import_define.flattenValueTo)(
@@ -460,12 +469,14 @@ var FormModel = class {
     }
     const {
       convert,
-      create
+      create,
+      revert
     } = adapter2;
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
     const context = this.toContext(this.value, valuePath);
+    const defaultValue = create(valuePath, context);
     const {
       value,
       required,
@@ -473,14 +484,43 @@ var FormModel = class {
     } = convert(
       accessor != null ? accessor.value : fieldTypeDef != null ? (0, import_define.mobxCopy)(
         fieldTypeDef,
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, context)
-      ) : create(valuePath, context),
+        defaultValue
+      ) : defaultValue,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
       context
     );
-    const error = this.errors[valuePath];
+    let error = void 0;
+    const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+    const validation = this.validation[valuePath];
+    switch (validation) {
+      case void 0:
+        break;
+      case 1 /* Changed */:
+        if (revert != null) {
+          const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+          const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+          if (displayedValue !== originalDisplayedValue) {
+            const revertResult = revert(displayedValue, valuePath, context);
+            if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
+              ;
+              ({ error } = revertResult);
+            }
+          }
+        }
+        break;
+      case 2 /* Always */:
+        {
+          const revertResult = revert == null ? void 0 : revert(displayedValue, valuePath, context);
+          if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
+            ;
+            ({ error } = revertResult);
+          }
+        }
+        break;
+      default:
+        throw new import_base2.UnreachableError(validation);
+    }
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
@@ -515,11 +555,8 @@ var FormModel = class {
   typePath(valuePath) {
     return (0, import_define.valuePathToTypePath)(this.type, valuePath, true);
   }
-  setFieldValueAndValidate(valuePath, value) {
-    return this.internalSetFieldValue(valuePath, value, true);
-  }
-  setFieldValue(valuePath, value) {
-    return this.internalSetFieldValue(valuePath, value, false);
+  setFieldValue(valuePath, value, validation = this.validation[valuePath]) {
+    return this.internalSetFieldValue(valuePath, value, validation);
   }
   addListItem(valuePath, elementValue = null, index) {
     const listValuePath = valuePath;
@@ -578,9 +615,9 @@ var FormModel = class {
         const fieldOverride = this.fieldOverrides[fromJsonPath];
         delete this.fieldOverrides[fromJsonPath];
         this.fieldOverrides[toJsonPath] = fieldOverride;
-        const error = this.errors[fromJsonPath];
-        delete this.errors[fromJsonPath];
-        this.errors[toJsonPath] = error;
+        const validation = this.validation[fromJsonPath];
+        delete this.validation[fromJsonPath];
+        this.validation[toJsonPath] = validation;
       });
       accessor.set(newList);
       delete this.fieldOverrides[listValuePath];
@@ -644,33 +681,34 @@ var FormModel = class {
           const fieldOverride = this.fieldOverrides[fromJsonPath];
           delete this.fieldOverrides[fromJsonPath];
           this.fieldOverrides[toJsonPath] = fieldOverride;
-          const error = this.errors[fromJsonPath];
-          delete this.errors[fromJsonPath];
-          this.errors[toJsonPath] = error;
+          const validation = this.validation[fromJsonPath];
+          delete this.validation[fromJsonPath];
+          this.validation[toJsonPath] = validation;
         });
         accessor.set(newList);
         delete this.fieldOverrides[listValuePath];
       });
     });
   }
-  internalSetFieldValue(valuePath, value, displayValidation) {
+  internalSetFieldValue(valuePath, value, validation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     (0, import_base2.assertExists)(revert, "setting value not supported {}", valuePath);
     const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[valuePath] = [value];
+      if (validation != null) {
+        this.validation[valuePath] = validation;
+      } else {
+        delete this.validation[valuePath];
+      }
       switch (conversion.type) {
         case 1 /* Failure */:
-          if (displayValidation) {
-            this.errors[valuePath] = conversion.error;
-          }
           if (conversion.value != null && accessor != null) {
             accessor.set(conversion.value[0]);
           }
           return false;
         case 0 /* Success */:
-          delete this.errors[valuePath];
           accessor == null ? void 0 : accessor.set(conversion.value);
           return true;
         default:
@@ -682,7 +720,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     if (fieldOverride != null) {
       (0, import_mobx.runInAction)(() => {
-        delete this.errors[valuePath];
+        delete this.validation[valuePath];
       });
     }
   }
@@ -704,11 +742,12 @@ var FormModel = class {
     const key = valuePath;
     (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[key] = [displayValue];
+      delete this.validation[key];
     });
   }
   clearAll(value) {
     (0, import_mobx.runInAction)(() => {
-      this.errors = {};
+      this.validation = {};
       this.fieldOverrides = {};
       this.value = (0, import_define.mobxCopy)(this.type, value);
     });
@@ -718,123 +757,37 @@ var FormModel = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(valuePath, ignoreDefaultValue = false) {
-    const {
-      convert,
-      revert,
-      create
-    } = this.getAdapterForValuePath(valuePath);
-    const fieldOverride = this.fieldOverrides[valuePath];
-    const accessor = this.getAccessorForValuePath(valuePath);
-    const context = this.toContext(this.value, valuePath);
-    const {
-      value: storedValue
-    } = convert(
-      accessor != null ? accessor.value : create(valuePath, context),
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      valuePath,
-      context
-    );
-    const value = fieldOverride != null ? fieldOverride[0] : storedValue;
-    const dirty = storedValue !== value;
-    (0, import_base2.assertExists)(revert, "changing field directly not supported {}", valuePath);
-    if (ignoreDefaultValue) {
-      const {
-        value: defaultDisplayValue
-      } = convert(create(valuePath, context), valuePath, context);
-      if (defaultDisplayValue === value) {
-        return true;
-      }
-    }
-    const conversion = revert(value, valuePath, context);
-    return (0, import_mobx.runInAction)(() => {
-      switch (conversion.type) {
-        case 1 /* Failure */:
-          this.errors[valuePath] = conversion.error;
-          if (conversion.value != null && accessor != null && dirty) {
-            accessor.set(conversion.value[0]);
-          }
-          return false;
-        case 0 /* Success */:
-          delete this.errors[valuePath];
-          if (accessor != null && dirty) {
-            accessor.set(conversion.value);
-          }
-          return true;
-        default:
-          throw new import_base2.UnreachableError(conversion);
-      }
+  validateField(valuePath, validation = Math.max(
+    this.mode === "create" ? 2 /* Always */ : 1 /* Changed */,
+    ((_a) => (_a = this.validation[valuePath]) != null ? _a : 1 /* Changed */)()
+  )) {
+    (0, import_mobx.runInAction)(() => {
+      this.validation[valuePath] = validation;
     });
+    return this.fields[valuePath].error == null;
   }
-  validateAll(force = this.mode === "create") {
-    const accessors = (0, import_base2.toArray)(this.accessors).toSorted(function([a], [b]) {
-      return a.length - b.length;
-    });
-    const flattenedOriginalValues = (0, import_define.flattenValuesOfType)(this.type, this.originalValue);
-    return (0, import_mobx.runInAction)(() => {
-      return accessors.reduce(
-        (success, [
-          valuePath,
-          accessor
-        ]) => {
-          const adapterPath = valuePath;
-          const adapter2 = this.maybeGetAdapterForValuePath(adapterPath);
-          if (adapter2 == null) {
-            return success;
-          }
-          const {
-            convert,
-            revert
-          } = adapter2;
-          if (revert == null) {
-            return success;
-          }
-          const fieldOverride = this.fieldOverrides[adapterPath];
-          const context = this.toContext(this.value, valuePath);
-          const {
-            value: storedValue
-          } = convert(accessor.value, valuePath, context);
-          const value = fieldOverride != null ? fieldOverride[0] : storedValue;
-          const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const needsValidation = force || !(valuePath in flattenedOriginalValues) || storedValue !== convert(
-            flattenedOriginalValues[valuePath],
-            valuePath,
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            this.toContext(this.originalValue, valuePath)
-          ).value;
-          if (needsValidation) {
-            const conversion = revert(value, valuePath, context);
-            switch (conversion.type) {
-              case 1 /* Failure */:
-                this.errors[adapterPath] = conversion.error;
-                if (conversion.value != null && dirty) {
-                  accessor.set(conversion.value[0]);
-                }
-                return false;
-              case 0 /* Success */:
-                if (dirty) {
-                  accessor.set(conversion.value);
-                }
-                delete this.errors[adapterPath];
-                return success;
-              default:
-                throw new import_base2.UnreachableError(conversion);
-            }
-          }
-          return success;
-        },
-        true
-      );
+  validateAll(validation = this.mode === "create" ? 2 /* Always */ : 1 /* Changed */) {
+    const accessors = (0, import_base2.toArray)(this.accessors);
+    (0, import_mobx.runInAction)(() => {
+      accessors.forEach(([valuePath]) => {
+        this.validation[valuePath] = validation;
+      });
     });
+    return accessors.every(
+      ([valuePath]) => {
+        const field = this.fields[valuePath];
+        return (field == null ? void 0 : field.error) == null;
+      }
+    );
   }
 };
 _init = __decoratorStart(null);
 _value = new WeakMap();
 _fieldOverrides = new WeakMap();
-_errors = new WeakMap();
+_validation = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
-__decorateElement(_init, 4, "errors", _errors_dec, FormModel, _errors);
+__decorateElement(_init, 4, "validation", _validation_dec, FormModel, _validation);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -848,8 +801,7 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = (0, import_react.useCallback)(
     function(path, value) {
-      model.clearFieldError(path);
-      model.setFieldValue(path, value);
+      model.setFieldValue(path, value, null);
     },
     [model]
   );
@@ -869,7 +821,7 @@ function useDefaultMobxFormHooks(model, {
     function(path) {
       setTimeout(function() {
         if (model.isValuePathActive(path)) {
-          model.validateField(path, true);
+          model.validateField(path);
         }
       }, 100);
     },
@@ -958,10 +910,11 @@ function mergeAdaptersWithValidators(adapters, validators) {
           readonly: readonly1 || readonly2
         };
       }
-      acc[key] = __spreadProps(__spreadValues({}, adapter2), {
+      acc[key] = {
+        create: adapter2.create.bind(adapter2),
         convert,
         revert: adapter2.revert && revert
-      });
+      };
       return acc;
     },
     {}
@@ -1986,6 +1939,7 @@ function mergeValidators(validators1, validators2) {
   SelectStringConverter,
   TrimmingStringConverter,
   UnreliableFieldConversionType,
+  Validation,
   adapter,
   adapterFromPrototype,
   adapterFromTwoWayConverter,