@strictly/react-form 0.0.24 → 0.0.25

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 60.74 KB
-CJS ⚡️ Build success in 148ms
-ESM dist/index.js 56.72 KB
-ESM ⚡️ Build success in 148ms
+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 31697ms
-DTS dist/index.d.cts 37.27 KB
-DTS dist/index.d.ts  37.27 KB
-Done in 32.89s.
+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.41s.
+Done in 0.35s.

package/.turbo/turbo-release$colon$exports.log

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ json -f package.json -f package.exports.json --merge > package.release.json
-Done in 0.12s.
+Done in 0.11s.

package/core/mobx/form_model.ts

@@ -273,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
@@ -311,9 +311,37 @@ export abstract class FormModel<
       valuePath as string,
       context,
     )
-    let error: unknown = undefined
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value
+
+    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 Validation.None:
         // skip validation
@@ -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,
@@ -646,6 +674,37 @@ export abstract class FormModel<
     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 = Validation.Always,

package/core/mobx/hooks.tsx

@@ -41,8 +41,8 @@ export function useDefaultMobxFormHooks<
       path: Path,
       value: ValueTypeOfField<F[Path]>,
     ) {
-      // clear validation once there are no errors for the field
-      model.setFieldValue<Path>(path, value)
+      const validation = Math.min(model.getValidation(path), Validation.Changed)
+      model.setFieldValue<Path>(path, value, validation)
     },
     [model],
   )
@@ -66,7 +66,8 @@ export function useDefaultMobxFormHooks<
       // (e.g. changing a discriminator)
       // TODO debounce?
       setTimeout(function () {
-        if (model.isValuePathActive(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)))
         }

package/dist/index.cjs

@@ -463,8 +463,7 @@ var FormModel = class {
     }
     return this.synthesizeFieldByPaths(valuePath, typePath);
   }
-  synthesizeFieldByPaths(valuePath, typePath) {
-    var _a;
+  getField(valuePath, typePath) {
     const adapter2 = this.adapters[typePath];
     if (adapter2 == null) {
       return;
@@ -492,9 +491,36 @@ var FormModel = class {
       valuePath,
       context
     );
-    let error = void 0;
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+    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 0 /* None */:
         break;
@@ -524,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
@@ -761,6 +787,27 @@ var FormModel = class {
     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;
@@ -802,7 +849,8 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = (0, import_react.useCallback)(
     function(path, value) {
-      model.setFieldValue(path, value);
+      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      model.setFieldValue(path, value, validation);
     },
     [model]
   );
@@ -821,7 +869,7 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = (0, import_react.useCallback)(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path)) {
+        if (model.isValuePathActive(path) && model.isDirty(path)) {
           model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
         }
       }, 100);

package/dist/index.d.cts

@@ -142,6 +142,7 @@ 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>>;
@@ -157,6 +158,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     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

@@ -142,6 +142,7 @@ 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>>;
@@ -157,6 +158,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     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

@@ -432,8 +432,7 @@ var FormModel = class {
     }
     return this.synthesizeFieldByPaths(valuePath, typePath);
   }
-  synthesizeFieldByPaths(valuePath, typePath) {
-    var _a;
+  getField(valuePath, typePath) {
     const adapter2 = this.adapters[typePath];
     if (adapter2 == null) {
       return;
@@ -461,9 +460,36 @@ var FormModel = class {
       valuePath,
       context
     );
-    let error = void 0;
     const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+    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 0 /* None */:
         break;
@@ -493,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
@@ -730,6 +756,27 @@ var FormModel = class {
     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;
@@ -773,7 +820,8 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      model.setFieldValue(path, value);
+      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      model.setFieldValue(path, value, validation);
     },
     [model]
   );
@@ -792,7 +840,7 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = useCallback(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(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.24",
+  "version": "0.0.25",
   "exports": {
     ".": {
       "import": {