@strictly/react-form 0.0.31 → 0.0.32

package/.storybook/preview.tsx

@@ -1,8 +1,16 @@
 import '@mantine/core/styles.css'
 import { MantineProvider } from '@mantine/core'
 import { type Preview } from '@storybook/react'
+import { configure } from 'mobx'
 import { StrictMode } from 'react'
 
+// turn on all useful mobx warnings in storybook to try to catch bad behavior
+configure({
+  enforceActions: 'observed',
+  observableRequiresReaction: true,
+  reactionRequiresObservable: true,
+})
+
 const preview: Preview = {
   parameters: {
     controls: {

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-CJS dist/index.cjs 62.94 KB
-CJS ⚡️ Build success in 142ms
-ESM dist/index.js 58.83 KB
-ESM ⚡️ Build success in 148ms
+CJS dist/index.cjs 64.18 KB
+CJS ⚡️ Build success in 121ms
+ESM dist/index.js 60.02 KB
+ESM ⚡️ Build success in 126ms
 DTS Build start
-DTS ⚡️ Build success in 12298ms
-DTS dist/index.d.cts 38.21 KB
-DTS dist/index.d.ts  38.21 KB
-Done in 13.48s.
+DTS ⚡️ Build success in 6938ms
+DTS dist/index.d.cts 38.43 KB
+DTS dist/index.d.ts  38.43 KB
+Done in 8.16s.

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

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

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/FormModel.ts

@@ -11,6 +11,7 @@ import {
 import {
   type Accessor,
   type AnyValueType,
+  copy,
   equals,
   flattenAccessorsOfType,
   type FlattenedValuesOfType,
@@ -27,6 +28,7 @@ import {
   valuePathToTypePath,
 } from '@strictly/define'
 import {
+  action,
   computed,
   observable,
   runInAction,
@@ -146,7 +148,7 @@ export abstract class FormModel<
   >,
 > {
   @observable.ref
-  accessor value: MobxValueOfType<T>
+  private accessor observableValue: MobxValueOfType<T>
   @observable.shallow
   accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>
   @observable.shallow
@@ -170,13 +172,13 @@ export abstract class FormModel<
     protected readonly mode: FormMode,
   ) {
     this.originalValues = flattenValuesOfType<ReadonlyTypeOfType<T>>(type, originalValue, this.listIndicesToKeys)
-    this.value = mobxCopy(type, originalValue)
+    this.observableValue = mobxCopy(type, originalValue)
     this.flattenedTypeDefs = flattenTypesOfType(type)
     // pre-populate field overrides for consistent behavior when default information is overwritten
     // then returned to
     const conversions = flattenValueTo(
       type,
-      this.value,
+      originalValue,
       () => {},
       (
         _t: StrictTypeDef,
@@ -228,6 +230,12 @@ export abstract class FormModel<
     }
   }
 
+  @computed
+  get value(): ValueOfType<ReadonlyTypeOfType<T>> {
+    // copy and strip out the mobx so this computed will fire every time anything changes
+    return copy(this.type, this.observableValue)
+  }
+
   @computed
   get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>> {
     return new Proxy<SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>>(
@@ -252,7 +260,7 @@ export abstract class FormModel<
   private get knownFields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>> {
     return flattenValueTo(
       this.type,
-      this.value,
+      this.observableValue,
       () => {},
       // TODO swap these to valuePath, typePath in flatten
       (_t: StrictTypeDef, _v: AnyValueType, _setter, typePath, valuePath): Field | undefined => {
@@ -302,7 +310,7 @@ export abstract class FormModel<
     const accessor = this.getAccessorForValuePath(valuePath)
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const fieldTypeDef = this.flattenedTypeDefs[typePath as string]
-    const context = this.toContext(this.value, valuePath)
+    const context = this.toContext(this.observableValue, valuePath)
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const defaultValue = create(valuePath as string, context)
 
@@ -414,9 +422,9 @@ export abstract class FormModel<
   get accessors(): Readonly<Record<string, Accessor>> {
     return flattenAccessorsOfType<T, Readonly<Record<string, Accessor>>>(
       this.type,
-      this.value,
+      this.observableValue,
       (value: ValueOfType<T>): void => {
-        this.value = mobxCopy(this.type, value)
+        this.observableValue = mobxCopy(this.type, value)
       },
       this.listIndicesToKeys,
     )
@@ -448,13 +456,14 @@ export abstract class FormModel<
   @computed
   get valueChanged() {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return !equals(this.type, this.value, this.originalValue as ValueOfType<T>)
+    return !equals(this.type, this.observableValue, this.originalValue as ValueOfType<T>)
   }
 
   typePath<K extends keyof ValueToTypePaths>(valuePath: K): ValueToTypePaths[K] {
     return valuePathToTypePath<ValueToTypePaths, K>(this.type, valuePath, true)
   }
 
+  @action
   setFieldValue<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     value: ToOfFieldAdapter<ValuePathsToAdapters[K]>,
@@ -490,7 +499,7 @@ export abstract class FormModel<
         elementTypePath as string,
         // TODO what can we use for the value path here?
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        this.toContext(this.value, valuePath as unknown as keyof ValuePathsToAdapters),
+        this.toContext(this.observableValue, valuePath as unknown as keyof ValuePathsToAdapters),
       )
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const originalList: any[] = accessor.value
@@ -560,7 +569,7 @@ export abstract class FormModel<
     assertExists(revert, 'setting value not supported {}', valuePath)
 
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-    const conversion = revert(value, valuePath as any, this.toContext(this.value, valuePath))
+    const conversion = revert(value, valuePath as any, this.toContext(this.observableValue, valuePath))
     const accessor = this.getAccessorForValuePath(valuePath)
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value]
@@ -623,7 +632,7 @@ export abstract class FormModel<
       create,
     } = adapter
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const context = this.toContext(this.value, valuePath as unknown as keyof ValuePathsToAdapters)
+    const context = this.toContext(this.observableValue, valuePath as unknown as keyof ValuePathsToAdapters)
     const value = create(valuePath, context)
     const {
       value: displayValue,
@@ -643,12 +652,12 @@ export abstract class FormModel<
       // TODO this isn't correct, should reload from value
       this.fieldOverrides = {}
       this.errorOverrides = {}
-      this.value = mobxCopy(this.type, value)
+      this.observableValue = mobxCopy(this.type, value)
     })
   }
 
   isValuePathActive<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean {
-    const values = flattenValuesOfType(this.type, this.value, this.listIndicesToKeys)
+    const values = flattenValuesOfType(this.type, this.observableValue, this.listIndicesToKeys)
     const keys = new Set(Object.keys(values))
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return keys.has(valuePath as string)
@@ -704,25 +713,23 @@ export abstract class FormModel<
     return displayedValue !== originalDisplayedValue
   }
 
+  @action
   validateField<K extends keyof ValuePathsToAdapters>(
     valuePath: K,
     validation: Validation = Validation.Always,
   ): boolean {
-    runInAction(() => {
-      this.validation[valuePath] = validation
-      delete this.errorOverrides[valuePath]
-    })
+    this.validation[valuePath] = validation
+    delete this.errorOverrides[valuePath]
     return this.fields[valuePath].error == null
   }
 
+  @action
   validateAll(validation: Validation = Validation.Always): boolean {
     const accessors = toArray(this.accessors)
 
-    runInAction(() => {
-      accessors.forEach(([valuePath]) => {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        this.validation[valuePath as keyof ValuePathsToAdapters] = validation
-      })
+    accessors.forEach(([valuePath]) => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      this.validation[valuePath as keyof ValuePathsToAdapters] = validation
     })
     return accessors.every(
       ([valuePath]): boolean => {

package/core/mobx/hooks.tsx

@@ -10,6 +10,7 @@ import {
   type FormModel,
   Validation,
 } from './FormModel'
+import { peek } from './peek'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any>
@@ -41,7 +42,8 @@ export function useDefaultMobxFormHooks<
       path: Path,
       value: ValueTypeOfField<F[Path]>,
     ) {
-      const validation = Math.min(model.getValidation(path), Validation.Changed)
+      const activeValidation = peek(() => model.getValidation(path))
+      const validation = Math.min(activeValidation, Validation.Changed)
       model.setFieldValue<Path>(path, value, validation)
     },
     [model],
@@ -66,10 +68,18 @@ export function useDefaultMobxFormHooks<
       // (e.g. changing a discriminator)
       // TODO debounce?
       setTimeout(function () {
+        const [
+          validate,
+          activeValidation,
+        ] = peek(() => [
+          model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null,
+          model.getValidation(path),
+        ])
         // only start validation if the user has changed the field and there isn't already an error visible
-        if (model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null) {
+        if (validate) {
+          const validation = Math.max(Validation.Changed, activeValidation)
           // further workaround to make sure we don't downgrade the existing validation
-          model.validateField(path, Math.max(Validation.Changed, model.getValidation(path)))
+          model.validateField(path, validation)
         }
       }, 100)
     },
@@ -78,8 +88,10 @@ export function useDefaultMobxFormHooks<
 
   const onFormSubmit = useCallback(
     function () {
-      if (model.validateSubmit()) {
-        onValidFormSubmit?.(model.value)
+      const valid = peek(() => model.validateSubmit())
+      if (valid && onValidFormSubmit) {
+        const value = peek(() => model.value)
+        onValidFormSubmit(value)
       }
     },
     [

package/core/mobx/peek.ts

@@ -0,0 +1,17 @@
+import { when } from 'mobx'
+
+/**
+ * Used for when you want to look at the value of an observable without observing it (or triggering
+ * the mobx runtime linter)
+ */
+export function peek<T>(operation: () => T): T {
+  let result: T
+  // when will make mobx think we are observing the value
+  void when(() => {
+    // trick mobx runtime linting
+    result = operation()
+    return true
+  })
+  // biome-ignore lint/style/noNonNullAssertion: the result is always there
+  return result!
+}

package/dist/index.cjs

@@ -110,6 +110,7 @@ __export(index_exports, {
   mergeAdaptersWithValidators: () => mergeAdaptersWithValidators,
   mergeFieldAdaptersWithTwoWayConverter: () => mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators: () => mergeValidators,
+  peek: () => peek,
   prototypingFieldValueFactory: () => prototypingFieldValueFactory,
   subFormFieldAdapters: () => subFormFieldAdapters,
   trimmingStringAdapter: () => trimmingStringAdapter,
@@ -363,8 +364,8 @@ var Validation = /* @__PURE__ */ ((Validation2) => {
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
 })(Validation || {});
-var _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
-_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errorOverrides_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], _dirty_dec = [import_mobx.computed], _valueChanged_dec = [import_mobx.computed];
+var _validateAll_dec, _validateField_dec, _setFieldValue_dec, _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _value_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _observableValue_dec, _init, _observableValue, _fieldOverrides, _errorOverrides, _validation;
+_observableValue_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errorOverrides_dec = [import_mobx.observable.shallow], _validation_dec = [import_mobx.observable.shallow], _value_dec = [import_mobx.computed], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed], _dirty_dec = [import_mobx.computed], _valueChanged_dec = [import_mobx.computed], _setFieldValue_dec = [import_mobx.action], _validateField_dec = [import_mobx.action], _validateAll_dec = [import_mobx.action];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
@@ -372,7 +373,7 @@ var FormModel = class {
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
-    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _observableValue, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __privateAdd(this, _errorOverrides, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __privateAdd(this, _validation, __runInitializers(_init, 20, this, {})), __runInitializers(_init, 23, this);
@@ -383,11 +384,11 @@ var FormModel = class {
     // maintains the value paths of lists when the original order is destroyed by deletes or reordering
     __publicField(this, "listIndicesToKeys", {});
     this.originalValues = (0, import_define.flattenValuesOfType)(type, originalValue, this.listIndicesToKeys);
-    this.value = (0, import_define.mobxCopy)(type, originalValue);
+    this.observableValue = (0, import_define.mobxCopy)(type, originalValue);
     this.flattenedTypeDefs = (0, import_define.flattenTypesOfType)(type);
     const conversions = (0, import_define.flattenValueTo)(
       type,
-      this.value,
+      originalValue,
       () => {
       },
       (_t, fieldValue, _setter, typePath, valuePath) => {
@@ -421,6 +422,9 @@ var FormModel = class {
         throw new import_base2.UnreachableError(this.mode);
     }
   }
+  get value() {
+    return (0, import_define.copy)(this.type, this.observableValue);
+  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -440,7 +444,7 @@ var FormModel = class {
   get knownFields() {
     return (0, import_define.flattenValueTo)(
       this.type,
-      this.value,
+      this.observableValue,
       () => {
       },
       // TODO swap these to valuePath, typePath in flatten
@@ -482,7 +486,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const defaultValue = create(valuePath, context);
     const {
       value,
@@ -574,9 +578,9 @@ var FormModel = class {
   get accessors() {
     return (0, import_define.flattenAccessorsOfType)(
       this.type,
-      this.value,
+      this.observableValue,
       (value) => {
-        this.value = (0, import_define.mobxCopy)(this.type, value);
+        this.observableValue = (0, import_define.mobxCopy)(this.type, value);
       },
       this.listIndicesToKeys
     );
@@ -598,7 +602,7 @@ var FormModel = class {
     });
   }
   get valueChanged() {
-    return !(0, import_define.equals)(this.type, this.value, this.originalValue);
+    return !(0, import_define.equals)(this.type, this.observableValue, this.originalValue);
   }
   typePath(valuePath) {
     return (0, import_define.valuePathToTypePath)(this.type, valuePath, true);
@@ -623,7 +627,7 @@ var FormModel = class {
       elementTypePath,
       // TODO what can we use for the value path here?
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      this.toContext(this.value, valuePath)
+      this.toContext(this.observableValue, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -678,7 +682,7 @@ var FormModel = class {
   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 conversion = revert(value, valuePath, this.toContext(this.observableValue, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -733,7 +737,7 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const value = create(valuePath, context);
     const {
       value: displayValue
@@ -750,11 +754,11 @@ var FormModel = class {
       this.validation = {};
       this.fieldOverrides = {};
       this.errorOverrides = {};
-      this.value = (0, import_define.mobxCopy)(this.type, value);
+      this.observableValue = (0, import_define.mobxCopy)(this.type, value);
     });
   }
   isValuePathActive(valuePath) {
-    const values = (0, import_define.flattenValuesOfType)(this.type, this.value, this.listIndicesToKeys);
+    const values = (0, import_define.flattenValuesOfType)(this.type, this.observableValue, this.listIndicesToKeys);
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
@@ -797,18 +801,14 @@ var FormModel = class {
     return displayedValue !== originalDisplayedValue;
   }
   validateField(valuePath, validation = 2 /* Always */) {
-    (0, import_mobx.runInAction)(() => {
-      this.validation[valuePath] = validation;
-      delete this.errorOverrides[valuePath];
-    });
+    this.validation[valuePath] = validation;
+    delete this.errorOverrides[valuePath];
     return this.fields[valuePath].error == null;
   }
   validateAll(validation = 2 /* Always */) {
     const accessors = (0, import_base2.toArray)(this.accessors);
-    (0, import_mobx.runInAction)(() => {
-      accessors.forEach(([valuePath]) => {
-        this.validation[valuePath] = validation;
-      });
+    accessors.forEach(([valuePath]) => {
+      this.validation[valuePath] = validation;
     });
     return accessors.every(
       ([valuePath]) => {
@@ -822,30 +822,48 @@ var FormModel = class {
   }
 };
 _init = __decoratorStart(null);
-_value = new WeakMap();
+_observableValue = new WeakMap();
 _fieldOverrides = new WeakMap();
 _errorOverrides = new WeakMap();
 _validation = new WeakMap();
-__decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
+__decorateElement(_init, 4, "observableValue", _observableValue_dec, FormModel, _observableValue);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errorOverrides", _errorOverrides_dec, FormModel, _errorOverrides);
 __decorateElement(_init, 4, "validation", _validation_dec, FormModel, _validation);
+__decorateElement(_init, 2, "value", _value_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
 __decorateElement(_init, 2, "dirty", _dirty_dec, FormModel);
 __decorateElement(_init, 2, "valueChanged", _valueChanged_dec, FormModel);
+__decorateElement(_init, 1, "setFieldValue", _setFieldValue_dec, FormModel);
+__decorateElement(_init, 1, "validateField", _validateField_dec, FormModel);
+__decorateElement(_init, 1, "validateAll", _validateAll_dec, FormModel);
 __decoratorMetadata(_init, FormModel);
 
 // core/mobx/hooks.tsx
 var import_react = require("react");
+
+// core/mobx/peek.ts
+var import_mobx2 = require("mobx");
+function peek(operation) {
+  let result;
+  void (0, import_mobx2.when)(() => {
+    result = operation();
+    return true;
+  });
+  return result;
+}
+
+// core/mobx/hooks.tsx
 function useDefaultMobxFormHooks(model, {
   onValidFieldSubmit,
   onValidFormSubmit
 } = {}) {
   const onFieldValueChange = (0, import_react.useCallback)(
     function(path, value) {
-      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      const activeValidation = peek(() => model.getValidation(path));
+      const validation = Math.min(activeValidation, 1 /* Changed */);
       model.setFieldValue(path, value, validation);
     },
     [model]
@@ -865,8 +883,16 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = (0, import_react.useCallback)(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null) {
-          model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
+        const [
+          validate4,
+          activeValidation
+        ] = peek(() => [
+          model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null,
+          model.getValidation(path)
+        ]);
+        if (validate4) {
+          const validation = Math.max(1 /* Changed */, activeValidation);
+          model.validateField(path, validation);
         }
       }, 100);
     },
@@ -874,8 +900,10 @@ function useDefaultMobxFormHooks(model, {
   );
   const onFormSubmit = (0, import_react.useCallback)(
     function() {
-      if (model.validateSubmit()) {
-        onValidFormSubmit == null ? void 0 : onValidFormSubmit(model.value);
+      const valid = peek(() => model.validateSubmit());
+      if (valid && onValidFormSubmit) {
+        const value = peek(() => model.value);
+        onValidFormSubmit(value);
       }
     },
     [
@@ -1191,7 +1219,7 @@ function DefaultErrorRenderer({
 // mantine/hooks.tsx
 var import_core = require("@mantine/core");
 var import_base7 = require("@strictly/base");
-var import_mobx2 = require("mobx");
+var import_mobx3 = require("mobx");
 var import_react6 = require("react");
 
 // util/Partial.tsx
@@ -1577,7 +1605,7 @@ function DefaultList({
       indexKeys[index]
     ];
   }).filter(function([
-    _value2,
+    _value,
     _index,
     key
   ]) {
@@ -1798,7 +1826,7 @@ function useMantineFormFields({
     []
   );
   (0, import_react6.useEffect)(function() {
-    (0, import_mobx2.runInAction)(function() {
+    (0, import_mobx3.runInAction)(function() {
       form.fields = fields;
     });
   }, [
@@ -1832,7 +1860,7 @@ function useMantineFormFields({
   return form;
 }
 var _fields_dec2, _init2, _fields;
-_fields_dec2 = [import_mobx2.observable.ref];
+_fields_dec2 = [import_mobx3.observable.ref];
 var MantineFormImpl = class {
   constructor(fields) {
     __publicField(this, "textInputCache", new import_base7.Cache(
@@ -2017,6 +2045,7 @@ function mergeValidators(validators1, validators2) {
   mergeAdaptersWithValidators,
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
+  peek,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
   trimmingStringAdapter,

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { Maybe, ElementOfArray, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
-import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, MobxValueOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
+import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
 import { ValueOf, SimplifyDeep, ReadonlyDeep, UnionToIntersection, StringKeyOf, Simplify } from 'type-fest';
 import { ComponentType, RefAttributes, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, Ref, DependencyList } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -136,7 +136,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     private readonly originalValue;
     protected readonly adapters: TypePathsToAdapters;
     protected readonly mode: FormMode;
-    accessor value: MobxValueOfType<T>;
+    private accessor observableValue;
     accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>;
     accessor errorOverrides: FlattenedErrorOverrides<ValuePathsToAdapters>;
     accessor validation: FlattenedValidation<ValuePathsToAdapters>;
@@ -146,6 +146,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     constructor(type: T, originalValue: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters, mode: FormMode);
     protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
     get forceMutableFields(): boolean;
+    get value(): ValueOfType<ReadonlyTypeOfType<T>>;
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
@@ -210,6 +211,12 @@ type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<K
 type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 & C2> : never : never;
 declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
 
+/**
+ * Used for when you want to look at the value of an observable without observing it (or triggering
+ * the mobx runtime linter)
+ */
+declare function peek<T>(operation: () => T): T;
+
 type SubFormFieldAdapter<F extends FieldAdapter, ValuePath extends string> = FieldAdapter<FromOfFieldAdapter<F>, ToOfFieldAdapter<F>, ErrorOfFieldAdapter<F>, ValuePathOfFieldAdapter<F> extends StringConcatOf<'$', infer ValuePathSuffix> ? `${ValuePath}${ValuePathSuffix}` : string, ContextOfFieldAdapter<F>>;
 type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, ValuePath extends string> = {
     [K in keyof SubAdapters as K extends StringConcatOf<'$', infer TypePathSuffix> ? `${TypePath}${TypePathSuffix}` : never]: SubFormFieldAdapter<SubAdapters[K], ValuePath>;
@@ -459,4 +466,4 @@ declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Key
 
 declare function Empty(): null;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormMode, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, type RefOfProps, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, Validation, type ValuePathOfFieldAdapter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormMode, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, type RefOfProps, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, Validation, type ValuePathOfFieldAdapter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, peek, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };