@strictly/react-form 0.0.11 → 0.0.13

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

@@ -1,27 +1,16 @@
-import { useCallback, useMemo, } from 'react';
-import { createUnsafePartialObserverComponent, } from 'util/partial';
-export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit, onValidFormSubmit, FormFieldsView, } = {}) {
-    const model = useMemo(function () {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return presenter.createModel(value);
-    }, [
-        presenter,
-        value,
-    ]);
+import { useCallback, } from 'react';
+export function useDefaultMobxFormHooks(model, { onValidFieldSubmit, onValidFormSubmit, } = {}) {
     const onFieldValueChange = useCallback(function (path, value) {
-        presenter.clearFieldError(model, path);
-        presenter.setFieldValue(model, path, value);
-    }, [
-        presenter,
-        model,
-    ]);
+        // TODO do in one action
+        model.clearFieldError(path);
+        model.setFieldValue(path, value);
+    }, [model]);
     const onFieldSubmit = useCallback(function (valuePath) {
-        if (presenter.validateField(model, valuePath)) {
-            onValidFieldSubmit === null || onValidFieldSubmit === void 0 ? void 0 : onValidFieldSubmit(model, valuePath);
+        if (model.validateField(valuePath)) {
+            onValidFieldSubmit === null || onValidFieldSubmit === void 0 ? void 0 : onValidFieldSubmit(valuePath);
         }
         return false;
     }, [
-        presenter,
         model,
         onValidFieldSubmit,
     ]);
@@ -30,49 +19,24 @@ export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit,
         // (e.g. changing a discriminator)
         // TODO debounce?
         setTimeout(function () {
-            if (presenter.isValuePathActive(model, path)) {
-                presenter.validateField(model, path, true);
+            if (model.isValuePathActive(path)) {
+                model.validateField(path, true);
             }
         }, 100);
-    }, [
-        presenter,
-        model,
-    ]);
+    }, [model]);
     const onFormSubmit = useCallback(function () {
-        if (presenter.validateAll(model)) {
-            onValidFormSubmit === null || onValidFormSubmit === void 0 ? void 0 : onValidFormSubmit(model, model.value);
+        if (model.validateAll()) {
+            onValidFormSubmit === null || onValidFormSubmit === void 0 ? void 0 : onValidFormSubmit(model.value);
         }
     }, [
-        presenter,
         model,
         onValidFormSubmit,
     ]);
-    const FormFields = useMemo(() => {
-        if (FormFieldsView == null) {
-            return undefined;
-        }
-        return createUnsafePartialObserverComponent(FormFieldsView, () => {
-            return {
-                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                fields: model.fields,
-                onFieldBlur,
-                onFieldSubmit,
-                onFieldValueChange,
-            };
-        });
-    }, [
-        model,
-        FormFieldsView,
-        onFieldBlur,
-        onFieldSubmit,
-        onFieldValueChange,
-    ]);
+    // TODO have option to automatically bind all these callbacks to a FieldsView parameter
     return {
-        model,
         onFieldValueChange,
         onFieldSubmit,
         onFieldBlur,
         onFormSubmit,
-        FormFields,
     };
 }

package/.out/core/mobx/specs/{form_presenter.tests.js → form_model.tests.js}

@@ -1,7 +1,7 @@
 import { expectDefinedAndReturn } from '@strictly/base';
 import { booleanType, list, nullType, numberType, object, record, stringType, union, } from '@strictly/define';
 import { adapterFromTwoWayConverter, identityAdapter, } from 'core/mobx/field_adapter_builder';
-import { FormModel, FormPresenter, } from 'core/mobx/form_presenter';
+import { FormModel, } from 'core/mobx/form_model';
 import { IntegerToStringConverter } from 'field_converters/integer_to_string_converter';
 import { NullableToBooleanConverter } from 'field_converters/nullable_to_boolean_converter';
 import { SelectDiscriminatedUnionConverter } from 'field_converters/select_value_type_converter';
@@ -9,11 +9,6 @@ import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_
 import { UnreliableFieldConversionType, } from 'types/field_converters';
 import { createMockedAdapter, resetMockAdapter, } from './fixtures';
 const IS_NAN_ERROR = 1;
-class TestFormPresenter extends FormPresenter {
-    createModel(value) {
-        return new FormModel(this.type, value, this.adapters);
-    }
-}
 const originalIntegerToStringAdapter = adapterFromTwoWayConverter(new IntegerToStringConverter(IS_NAN_ERROR), prototypingFieldValueFactory(0));
 const originalBooleanToBooleanAdapter = identityAdapter(false);
 describe('all', function () {
@@ -285,22 +280,21 @@ describe('all', function () {
         });
         // TODO union
     });
-    describe('FormPresenter', function () {
+    describe('FormModel', function () {
         describe('literal', function () {
             const typeDef = numberType;
             const adapters = {
                 $: integerToStringAdapter,
             };
-            const presenter = new TestFormPresenter(typeDef, adapters);
             const originalValue = 2;
             let model;
             beforeEach(function () {
-                model = presenter.createModel(originalValue);
+                model = new FormModel(typeDef, originalValue, adapters);
             });
             describe('setFieldValueAndValidate', function () {
                 describe('success', function () {
                     beforeEach(function () {
-                        presenter.setFieldValueAndValidate(model, '$', '1');
+                        model.setFieldValueAndValidate('$', '1');
                     });
                     it('does set the underlying value', function () {
                         expect(model.value).toEqual(1);
@@ -317,7 +311,7 @@ describe('all', function () {
                 describe('failure', function () {
                     describe('conversion fails', function () {
                         beforeEach(function () {
-                            presenter.setFieldValueAndValidate(model, '$', 'x');
+                            model.setFieldValueAndValidate('$', 'x');
                         });
                         it('does not set the underlying value', function () {
                             expect(model.value).toEqual(originalValue);
@@ -341,7 +335,7 @@ describe('all', function () {
                                 error: errorCode,
                                 value: [newValue],
                             });
-                            presenter.setFieldValueAndValidate(model, '$', '-1');
+                            model.setFieldValueAndValidate('$', '-1');
                         });
                         it('does set the underlying value', function () {
                             expect(model.value).toEqual(newValue);
@@ -369,7 +363,7 @@ describe('all', function () {
                 ],
             ])('setFieldValue to %s', function (newValue, expectedValue) {
                 beforeEach(function () {
-                    presenter.setFieldValue(model, '$', newValue);
+                    model.setFieldValue('$', newValue);
                 });
                 it('does set the underlying value', function () {
                     expect(model.value).toEqual(expectedValue);
@@ -389,7 +383,6 @@ describe('all', function () {
             const converters = {
                 '$.*': integerToStringAdapter,
             };
-            const presenter = new TestFormPresenter(typeDef, converters);
             let originalValue;
             let model;
             beforeEach(function () {
@@ -398,12 +391,12 @@ describe('all', function () {
                     3,
                     7,
                 ];
-                model = presenter.createModel(originalValue);
+                model = new FormModel(typeDef, originalValue, converters);
             });
             describe('setFieldValueAndValidate', function () {
                 describe('success', function () {
                     beforeEach(function () {
-                        presenter.setFieldValueAndValidate(model, '$.0', '100');
+                        model.setFieldValueAndValidate('$.0', '100');
                     });
                     it('sets the underlying value', function () {
                         expect(model.value).toEqual([
@@ -423,7 +416,7 @@ describe('all', function () {
                 });
                 describe('failure', function () {
                     beforeEach(function () {
-                        presenter.setFieldValueAndValidate(model, '$.0', 'x');
+                        model.setFieldValueAndValidate('$.0', 'x');
                     });
                     it('does not set the underlying value', function () {
                         expect(model.value).toEqual(originalValue);
@@ -443,7 +436,7 @@ describe('all', function () {
                 'x',
             ])('setFieldValue to %s', function (newValue) {
                 beforeEach(function () {
-                    presenter.setFieldValue(model, '$.0', newValue);
+                    model.setFieldValue('$.0', newValue);
                 });
                 it('does not set the underlying value', function () {
                     expect(model.value).toEqual(originalValue);
@@ -459,10 +452,10 @@ describe('all', function () {
             });
             describe('validate', function () {
                 beforeEach(function () {
-                    presenter.setFieldValue(model, '$.0', 'x');
-                    presenter.setFieldValue(model, '$.1', '2');
-                    presenter.setFieldValue(model, '$.2', 'z');
-                    presenter.validateAll(model);
+                    model.setFieldValue('$.0', 'x');
+                    model.setFieldValue('$.1', '2');
+                    model.setFieldValue('$.2', 'z');
+                    model.validateAll();
                 });
                 it('contains errors for all invalid fields', function () {
                     expect(model.fields).toEqual(expect.objectContaining({
@@ -501,7 +494,7 @@ describe('all', function () {
                     });
                 });
                 it('supplies the full, previous context when converting', function () {
-                    presenter.setFieldValueAndValidate(model, '$.2', '4');
+                    model.setFieldValueAndValidate('$.2', '4');
                     expect(integerToStringAdapter.revert).toHaveBeenCalledOnce();
                     expect(integerToStringAdapter.revert).toHaveBeenCalledWith('4', '$.2', 
                     // uses the same pointer
@@ -521,7 +514,7 @@ describe('all', function () {
                         model.errors['$.0'] = 0;
                         model.errors['$.1'] = 1;
                         model.errors['$.2'] = 2;
-                        presenter.addListItem(model, '$', null, 0);
+                        model.addListItem('$', null, 0);
                     });
                     it('adds the list item to the underlying value', function () {
                         expect(model.value).toEqual([
@@ -576,7 +569,7 @@ describe('all', function () {
                 });
                 describe('add defined value', function () {
                     beforeEach(function () {
-                        presenter.addListItem(model, '$', [5]);
+                        model.addListItem('$', [5]);
                     });
                     it('adds the expected value at the end', function () {
                         expect(model.fields).toEqual(expect.objectContaining({
@@ -612,7 +605,7 @@ describe('all', function () {
                 });
                 describe('remove first item', function () {
                     beforeEach(function () {
-                        presenter.removeListItem(model, '$.0');
+                        model.removeListItem('$.0');
                     });
                     it('updates the underlying value', function () {
                         expect(model.value).toEqual([
@@ -635,7 +628,7 @@ describe('all', function () {
                 });
                 describe('remove second item', function () {
                     beforeEach(function () {
-                        presenter.removeListItem(model, '$.1');
+                        model.removeListItem('$.1');
                     });
                     it('updates the underlying value', function () {
                         expect(model.value).toEqual([
@@ -656,6 +649,22 @@ describe('all', function () {
                         });
                     });
                 });
+                describe('remove two items', function () {
+                    beforeEach(function () {
+                        model.removeListItem('$.0', '$.1');
+                    });
+                    it('updates the underlying value', function () {
+                        expect(model.value).toEqual([7]);
+                    });
+                    it('updates the field values and errors', function () {
+                        expect(model.fields).toEqual({
+                            '$.0': expect.objectContaining({
+                                value: '7',
+                                error: 2,
+                            }),
+                        });
+                    });
+                });
             });
         });
         // TODO record / object
@@ -669,12 +678,11 @@ describe('all', function () {
                     $: adapterFromTwoWayConverter(new NullableToBooleanConverter(type, [1], null)),
                     '$.*': integerToStringAdapter,
                 };
-                const presenter = new TestFormPresenter(type, adapters);
                 let originalValue;
                 let model;
                 beforeEach(function () {
                     originalValue = null;
-                    model = presenter.createModel(originalValue);
+                    model = new FormModel(type, originalValue, adapters);
                 });
                 it('has the expected fields', function () {
                     expect(model.fields).toEqual({
@@ -689,7 +697,7 @@ describe('all', function () {
                 describe('setFieldValueAndValidate', function () {
                     describe('success', function () {
                         beforeEach(function () {
-                            presenter.setFieldValueAndValidate(model, '$', true);
+                            model.setFieldValueAndValidate('$', true);
                         });
                         it('sets the underlying value', function () {
                             expect(model.value).toEqual([1]);
@@ -717,13 +725,12 @@ describe('all', function () {
                     '$.x:a': identityAdapter(0).narrow,
                     '$.y:b': identityAdapter(false).narrow,
                 };
-                const presenter = new TestFormPresenter(type, adapters);
                 describe('isValuePathActive', function () {
                     describe('discriminator x', function () {
-                        const model = presenter.createModel({
+                        const model = new FormModel(type, {
                             d: 'x',
                             a: 1,
-                        });
+                        }, adapters);
                         it.each([
                             [
                                 '$',
@@ -738,15 +745,15 @@ describe('all', function () {
                                 false,
                             ],
                         ])('value path %s is active %s', function (path, expected) {
-                            const isValid = presenter.isValuePathActive(model, path);
+                            const isValid = model.isValuePathActive(path);
                             expect(isValid).toBe(expected);
                         });
                     });
                     describe('discriminator y', function () {
-                        const model = presenter.createModel({
+                        const model = new FormModel(type, {
                             d: 'y',
                             b: false,
-                        });
+                        }, adapters);
                         it.each([
                             [
                                 '$',
@@ -761,7 +768,7 @@ describe('all', function () {
                                 true,
                             ],
                         ])('value path %s is active %s', function (path, expected) {
-                            const isValid = presenter.isValuePathActive(model, path);
+                            const isValid = model.isValuePathActive(path);
                             expect(isValid).toBe(expected);
                         });
                     });
@@ -774,12 +781,11 @@ describe('all', function () {
                 $: integerToStringAdapter,
                 '$.fake': booleanToBooleanAdapter,
             };
-            const presenter = new TestFormPresenter(typeDef, converters);
             let originalValue;
             let model;
             beforeEach(function () {
                 originalValue = 1;
-                model = presenter.createModel(originalValue);
+                model = new FormModel(typeDef, originalValue, converters);
             });
             it('returns the default value for the fake field', function () {
                 expect(model.fields['$.fake']).toEqual(expect.objectContaining({
@@ -788,7 +794,7 @@ describe('all', function () {
             });
             describe('setting fake field', function () {
                 beforeEach(function () {
-                    presenter.setFieldValue(model, '$.fake', true);
+                    model.setFieldValue('$.fake', true);
                 });
                 it('stores the new value', function () {
                     expect(model.fields['$.fake']).toEqual(expect.objectContaining({

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

@@ -1,14 +1,14 @@
 import { type ToOfFieldAdapter } from './field_adapter';
-import { type FlattenedConvertedFieldsOf, type FormPresenter } from './form_presenter';
+import { type FlattenedConvertedFieldsOf, type FormModel } from './form_model';
 /**
  * Used to extract the supported value paths from a presenter
  */
-export type ValuePathsOfPresenter<Presenter extends FormPresenter<any, any, any, any>> = Presenter extends FormPresenter<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? keyof ValuePathsToAdapters : never;
+export type ValuePathsOfModel<Presenter extends FormModel<any, any, any, any>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? keyof ValuePathsToAdapters : never;
 /**
  * Used to extract the render type (so the value that is passed to the view) of a given value path
  * from a presenter
  */
-export type ToValueOfPresenterValuePath<Presenter extends FormPresenter<any, any, any, any>, K extends ValuePathsOfPresenter<Presenter>> = Presenter extends FormPresenter<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? ToOfFieldAdapter<ValuePathsToAdapters[K]> : never;
+export type ToValueOfModelValuePath<Presenter extends FormModel<any, any, any, any>, K extends ValuePathsOfModel<Presenter>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? ToOfFieldAdapter<ValuePathsToAdapters[K]> : never;
 /**
  * Extracts the form fields from the presenter. The recommended way is to
  * define the form fields explicitly and use that type to enforce the types
@@ -16,4 +16,4 @@ export type ToValueOfPresenterValuePath<Presenter extends FormPresenter<any, any
  * is less typing, albeit at the cost of potentially getting type errors
  * reported a long way away from the source
  */
-export type FormFieldsOfPresenter<Presenter extends FormPresenter<any, any, any, any>> = Presenter extends FormPresenter<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? FlattenedConvertedFieldsOf<ValuePathsToAdapters> : never;
+export type FormFieldsOfModel<Presenter extends FormModel<any, any, any, any>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? FlattenedConvertedFieldsOf<ValuePathsToAdapters> : never;

package/.out/index.d.ts

@@ -3,7 +3,7 @@ export * from './core/mobx/field_adapter_builder';
 export * from './core/mobx/field_adapters_of_values';
 export * from './core/mobx/flattened_adapters_of_fields';
 export * from './core/mobx/form_fields_of_field_adapters';
-export * from './core/mobx/form_presenter';
+export * from './core/mobx/form_model';
 export * from './core/mobx/hooks';
 export * from './core/mobx/merge_field_adapters_with_two_way_converter';
 export * from './core/mobx/merge_field_adapters_with_validators';

package/.out/index.js

@@ -3,7 +3,7 @@ export * from './core/mobx/field_adapter_builder';
 export * from './core/mobx/field_adapters_of_values';
 export * from './core/mobx/flattened_adapters_of_fields';
 export * from './core/mobx/form_fields_of_field_adapters';
-export * from './core/mobx/form_presenter';
+export * from './core/mobx/form_model';
 export * from './core/mobx/hooks';
 export * from './core/mobx/merge_field_adapters_with_two_way_converter';
 export * from './core/mobx/merge_field_adapters_with_validators';

package/.out/mantine/create_fields_view.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsonPathPrefix, jsonPathUnprefix, } from '@strictly/define';
 import { observer } from 'mobx-react';
 export function createFieldsView(valuePath, FieldsView, observableProps) {
     function toKey(subKey) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return subKey.replace('$', valuePath);
+        return jsonPathPrefix(valuePath, subKey);
     }
     function toSubKey(key) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return key.replace(valuePath, '$');
+        return jsonPathUnprefix(valuePath, key);
     }
     function onFieldValueChange(subKey, value) {
         // convert from subKey to key