@strictly/react-form 0.0.31 → 0.0.32

package/.out/.storybook/preview.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import '@mantine/core/styles.css';
 import { MantineProvider } from '@mantine/core';
+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 = {
     parameters: {
         controls: {

package/.out/core/mobx/FormModel.d.ts

@@ -1,5 +1,5 @@
 import { type ElementOfArray, type Maybe } from '@strictly/base';
-import { type Accessor, type FlattenedValuesOfType, type MobxValueOfType, type ReadonlyTypeOfType, type Type, type ValueOfType } from '@strictly/define';
+import { type Accessor, type FlattenedValuesOfType, type ReadonlyTypeOfType, type Type, type ValueOfType } from '@strictly/define';
 import { type ReadonlyDeep, type SimplifyDeep, type StringKeyOf, type UnionToIntersection, type ValueOf } from 'type-fest';
 import { type Field } from 'types/Field';
 import { type ContextOfFieldAdapter, type ErrorOfFieldAdapter, type FieldAdapter, type ToOfFieldAdapter } from './FieldAdapter';
@@ -37,7 +37,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     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>;
@@ -47,6 +47,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     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;

package/.out/core/mobx/FormModel.js

@@ -44,8 +44,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 import { assertExists, assertExistsAndReturn, checkValidNumber, map, toArray, UnreachableError, } from '@strictly/base';
-import { equals, flattenAccessorsOfType, flattenTypesOfType, flattenValuesOfType, flattenValueTo, jsonPathPop, mobxCopy, valuePathToTypePath, } from '@strictly/define';
-import { computed, observable, runInAction, } from 'mobx';
+import { copy, equals, flattenAccessorsOfType, flattenTypesOfType, flattenValuesOfType, flattenValueTo, jsonPathPop, mobxCopy, valuePathToTypePath, } from '@strictly/define';
+import { action, computed, observable, runInAction, } from 'mobx';
 import { UnreliableFieldConversionType, } from 'types/FieldConverters';
 export var Validation;
 (function (Validation) {
@@ -54,12 +54,12 @@ export var Validation;
     Validation[Validation["Always"] = 2] = "Always";
 })(Validation || (Validation = {}));
 let FormModel = (() => {
-    var _a, _FormModel_value_accessor_storage, _FormModel_fieldOverrides_accessor_storage, _FormModel_errorOverrides_accessor_storage, _FormModel_validation_accessor_storage;
+    var _a, _FormModel_observableValue_accessor_storage, _FormModel_fieldOverrides_accessor_storage, _FormModel_errorOverrides_accessor_storage, _FormModel_validation_accessor_storage;
     var _b, _c, _d, _e;
     let _instanceExtraInitializers = [];
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
+    let _observableValue_decorators;
+    let _observableValue_initializers = [];
+    let _observableValue_extraInitializers = [];
     let _fieldOverrides_decorators;
     let _fieldOverrides_initializers = [];
     let _fieldOverrides_extraInitializers = [];
@@ -69,14 +69,18 @@ let FormModel = (() => {
     let _validation_decorators;
     let _validation_initializers = [];
     let _validation_extraInitializers = [];
+    let _get_value_decorators;
     let _get_fields_decorators;
     let _get_knownFields_decorators;
     let _get_accessors_decorators;
     let _get_dirty_decorators;
     let _get_valueChanged_decorators;
+    let _setFieldValue_decorators;
+    let _validateField_decorators;
+    let _validateAll_decorators;
     return _a = class FormModel {
-            get value() { return __classPrivateFieldGet(this, _FormModel_value_accessor_storage, "f"); }
-            set value(value) { __classPrivateFieldSet(this, _FormModel_value_accessor_storage, value, "f"); }
+            get observableValue() { return __classPrivateFieldGet(this, _FormModel_observableValue_accessor_storage, "f"); }
+            set observableValue(value) { __classPrivateFieldSet(this, _FormModel_observableValue_accessor_storage, value, "f"); }
             get fieldOverrides() { return __classPrivateFieldGet(this, _FormModel_fieldOverrides_accessor_storage, "f"); }
             set fieldOverrides(value) { __classPrivateFieldSet(this, _FormModel_fieldOverrides_accessor_storage, value, "f"); }
             get errorOverrides() { return __classPrivateFieldGet(this, _FormModel_errorOverrides_accessor_storage, "f"); }
@@ -108,8 +112,8 @@ let FormModel = (() => {
                     writable: true,
                     value: mode
                 });
-                _FormModel_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, void 0));
-                _FormModel_fieldOverrides_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _fieldOverrides_initializers, void 0)));
+                _FormModel_observableValue_accessor_storage.set(this, __runInitializers(this, _observableValue_initializers, void 0));
+                _FormModel_fieldOverrides_accessor_storage.set(this, (__runInitializers(this, _observableValue_extraInitializers), __runInitializers(this, _fieldOverrides_initializers, void 0)));
                 _FormModel_errorOverrides_accessor_storage.set(this, (__runInitializers(this, _fieldOverrides_extraInitializers), __runInitializers(this, _errorOverrides_initializers, {})));
                 _FormModel_validation_accessor_storage.set(this, (__runInitializers(this, _errorOverrides_extraInitializers), __runInitializers(this, _validation_initializers, {})));
                 Object.defineProperty(this, "flattenedTypeDefs", {
@@ -134,11 +138,11 @@ let FormModel = (() => {
                     value: {}
                 });
                 this.originalValues = flattenValuesOfType(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, () => { }, (_t, fieldValue, _setter, typePath, valuePath) => {
+                const conversions = flattenValueTo(type, originalValue, () => { }, (_t, fieldValue, _setter, typePath, valuePath) => {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     const contextValue = this.toContext(originalValue, valuePath);
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -169,6 +173,10 @@ let FormModel = (() => {
                         throw new UnreachableError(this.mode);
                 }
             }
+            get value() {
+                // copy and strip out the mobx so this computed will fire every time anything changes
+                return copy(this.type, this.observableValue);
+            }
             get fields() {
                 return new Proxy(this.knownFields, {
                     get: (target, prop) => {
@@ -185,7 +193,7 @@ let FormModel = (() => {
                 });
             }
             get knownFields() {
-                return flattenValueTo(this.type, this.value, () => { }, 
+                return flattenValueTo(this.type, this.observableValue, () => { }, 
                 // TODO swap these to valuePath, typePath in flatten
                 (_t, _v, _setter, typePath, valuePath) => {
                     return this.synthesizeFieldByPaths(
@@ -222,7 +230,7 @@ let FormModel = (() => {
                 const accessor = this.getAccessorForValuePath(valuePath);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 const fieldTypeDef = this.flattenedTypeDefs[typePath];
-                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, context);
                 const { value, required, readonly, } = convert(accessor != null
@@ -306,8 +314,8 @@ let FormModel = (() => {
                 return this.accessors[valuePath];
             }
             get accessors() {
-                return flattenAccessorsOfType(this.type, this.value, (value) => {
-                    this.value = mobxCopy(this.type, value);
+                return flattenAccessorsOfType(this.type, this.observableValue, (value) => {
+                    this.observableValue = mobxCopy(this.type, value);
                 }, this.listIndicesToKeys);
             }
             maybeGetAdapterForValuePath(valuePath) {
@@ -327,7 +335,7 @@ let FormModel = (() => {
             }
             get valueChanged() {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                return !equals(this.type, this.value, this.originalValue);
+                return !equals(this.type, this.observableValue, this.originalValue);
             }
             typePath(valuePath) {
                 return valuePathToTypePath(this.type, valuePath, true);
@@ -354,7 +362,7 @@ let FormModel = (() => {
                     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));
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const originalList = accessor.value;
                 const newList = [
@@ -400,7 +408,7 @@ let FormModel = (() => {
                 const { revert } = this.getAdapterForValuePath(valuePath);
                 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, this.toContext(this.value, valuePath));
+                const conversion = revert(value, valuePath, this.toContext(this.observableValue, valuePath));
                 const accessor = this.getAccessorForValuePath(valuePath);
                 return runInAction(() => {
                     this.fieldOverrides[valuePath] = [value];
@@ -455,7 +463,7 @@ let FormModel = (() => {
                 }
                 const { convert, create, } = adapter;
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                const context = this.toContext(this.value, valuePath);
+                const context = this.toContext(this.observableValue, valuePath);
                 const value = create(valuePath, context);
                 const { value: displayValue, } = convert(value, valuePath, context);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -472,11 +480,11 @@ let 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(valuePath) {
-                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);
@@ -516,19 +524,15 @@ let FormModel = (() => {
                 return displayedValue !== originalDisplayedValue;
             }
             validateField(valuePath, validation = Validation.Always) {
-                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 = Validation.Always) {
                 const accessors = toArray(this.accessors);
-                runInAction(() => {
-                    accessors.forEach(([valuePath]) => {
-                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        this.validation[valuePath] = validation;
-                    });
+                accessors.forEach(([valuePath]) => {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    this.validation[valuePath] = validation;
                 });
                 return accessors.every(([valuePath]) => {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -540,30 +544,38 @@ let FormModel = (() => {
                 return this.validateAll();
             }
         },
-        _FormModel_value_accessor_storage = new WeakMap(),
+        _FormModel_observableValue_accessor_storage = new WeakMap(),
         _FormModel_fieldOverrides_accessor_storage = new WeakMap(),
         _FormModel_errorOverrides_accessor_storage = new WeakMap(),
         _FormModel_validation_accessor_storage = new WeakMap(),
         (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _value_decorators = [(_b = observable).ref.bind(_b)];
+            _observableValue_decorators = [(_b = observable).ref.bind(_b)];
             _fieldOverrides_decorators = [(_c = observable).shallow.bind(_c)];
             _errorOverrides_decorators = [(_d = observable).shallow.bind(_d)];
             _validation_decorators = [(_e = observable).shallow.bind(_e)];
+            _get_value_decorators = [computed];
             _get_fields_decorators = [computed];
             _get_knownFields_decorators = [computed];
             _get_accessors_decorators = [computed];
             _get_dirty_decorators = [computed];
             _get_valueChanged_decorators = [computed];
-            __esDecorate(_a, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            _setFieldValue_decorators = [action];
+            _validateField_decorators = [action];
+            _validateAll_decorators = [action];
+            __esDecorate(_a, null, _observableValue_decorators, { kind: "accessor", name: "observableValue", static: false, private: false, access: { has: obj => "observableValue" in obj, get: obj => obj.observableValue, set: (obj, value) => { obj.observableValue = value; } }, metadata: _metadata }, _observableValue_initializers, _observableValue_extraInitializers);
             __esDecorate(_a, null, _fieldOverrides_decorators, { kind: "accessor", name: "fieldOverrides", static: false, private: false, access: { has: obj => "fieldOverrides" in obj, get: obj => obj.fieldOverrides, set: (obj, value) => { obj.fieldOverrides = value; } }, metadata: _metadata }, _fieldOverrides_initializers, _fieldOverrides_extraInitializers);
             __esDecorate(_a, null, _errorOverrides_decorators, { kind: "accessor", name: "errorOverrides", static: false, private: false, access: { has: obj => "errorOverrides" in obj, get: obj => obj.errorOverrides, set: (obj, value) => { obj.errorOverrides = value; } }, metadata: _metadata }, _errorOverrides_initializers, _errorOverrides_extraInitializers);
             __esDecorate(_a, null, _validation_decorators, { kind: "accessor", name: "validation", static: false, private: false, access: { has: obj => "validation" in obj, get: obj => obj.validation, set: (obj, value) => { obj.validation = value; } }, metadata: _metadata }, _validation_initializers, _validation_extraInitializers);
+            __esDecorate(_a, null, _get_value_decorators, { kind: "getter", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_fields_decorators, { kind: "getter", name: "fields", static: false, private: false, access: { has: obj => "fields" in obj, get: obj => obj.fields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_knownFields_decorators, { kind: "getter", name: "knownFields", static: false, private: false, access: { has: obj => "knownFields" in obj, get: obj => obj.knownFields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_accessors_decorators, { kind: "getter", name: "accessors", static: false, private: false, access: { has: obj => "accessors" in obj, get: obj => obj.accessors }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_dirty_decorators, { kind: "getter", name: "dirty", static: false, private: false, access: { has: obj => "dirty" in obj, get: obj => obj.dirty }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_valueChanged_decorators, { kind: "getter", name: "valueChanged", static: false, private: false, access: { has: obj => "valueChanged" in obj, get: obj => obj.valueChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _setFieldValue_decorators, { kind: "method", name: "setFieldValue", static: false, private: false, access: { has: obj => "setFieldValue" in obj, get: obj => obj.setFieldValue }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _validateField_decorators, { kind: "method", name: "validateField", static: false, private: false, access: { has: obj => "validateField" in obj, get: obj => obj.validateField }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _validateAll_decorators, { kind: "method", name: "validateAll", static: false, private: false, access: { has: obj => "validateAll" in obj, get: obj => obj.validateAll }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         })(),
         _a;

package/.out/core/mobx/hooks.js

@@ -1,8 +1,10 @@
 import { useCallback, } from 'react';
 import { Validation, } from './FormModel';
+import { peek } from './peek';
 export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidFormSubmit, } = {}) {
     const onFieldValueChange = useCallback(function (path, value) {
-        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, value, validation);
     }, [model]);
     const onFieldSubmit = useCallback(function (valuePath) {
@@ -19,16 +21,23 @@ export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidForm
         // (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);
     }, [model]);
     const onFormSubmit = useCallback(function () {
-        if (model.validateSubmit()) {
-            onValidFormSubmit === null || onValidFormSubmit === void 0 ? void 0 : onValidFormSubmit(model.value);
+        const valid = peek(() => model.validateSubmit());
+        if (valid && onValidFormSubmit) {
+            const value = peek(() => model.value);
+            onValidFormSubmit(value);
         }
     }, [
         model,

package/.out/core/mobx/peek.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Used for when you want to look at the value of an observable without observing it (or triggering
+ * the mobx runtime linter)
+ */
+export declare function peek<T>(operation: () => T): T;

package/.out/core/mobx/peek.js

@@ -0,0 +1,16 @@
+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(operation) {
+    let result;
+    // 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/.out/index.d.ts

@@ -7,6 +7,7 @@ export * from './core/mobx/FormModel';
 export * from './core/mobx/hooks';
 export * from './core/mobx/mergeFieldAdaptersWithTwoWayConverter';
 export * from './core/mobx/mergeFieldAdaptersWithValidators';
+export * from './core/mobx/peek';
 export * from './core/mobx/subFormFieldAdapters';
 export * from './core/props';
 export * from './field_converters/IntegerToStringConverter';

package/.out/index.js

@@ -7,6 +7,7 @@ export * from './core/mobx/FormModel';
 export * from './core/mobx/hooks';
 export * from './core/mobx/mergeFieldAdaptersWithTwoWayConverter';
 export * from './core/mobx/mergeFieldAdaptersWithValidators';
+export * from './core/mobx/peek';
 export * from './core/mobx/subFormFieldAdapters';
 export * from './core/props';
 export * from './field_converters/IntegerToStringConverter';