@strictly/react-form 0.0.15 → 0.0.17

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@ $ tsup
 CLI Target: es6
 CJS Build start
 ESM Build start
-ESM dist/index.js 55.85 KB
-ESM ⚡️ Build success in 136ms
-CJS dist/index.cjs 59.76 KB
-CJS ⚡️ Build success in 141ms
+CJS dist/index.cjs 62.28 KB
+CJS ⚡️ Build success in 117ms
+ESM dist/index.js 58.27 KB
+ESM ⚡️ Build success in 140ms
 DTS Build start
-DTS ⚡️ Build success in 9792ms
-DTS dist/index.d.cts 37.63 KB
-DTS dist/index.d.ts  37.63 KB
-Done in 10.91s.
+DTS ⚡️ Build success in 9749ms
+DTS dist/index.d.cts 38.08 KB
+DTS dist/index.d.ts  38.08 KB
+Done in 10.88s.

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

@@ -1,3 +1,3 @@
 yarn run v1.22.22
 $ tsc
-Done in 7.51s.
+Done in 7.55s.

package/core/mobx/field_adapter_builder.ts

@@ -336,8 +336,8 @@ export function trimmingStringAdapter<
 
 export function listAdapter<
   E,
-  ValuePath extends string,
-  Context,
+  ValuePath extends string = string,
+  Context = unknown,
 >() {
   return new FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>(
     annotatedIdentityConverter<readonly E[], ValuePath, Context>(false),

package/core/mobx/form_model.ts

@@ -26,6 +26,7 @@ import {
   type ValueOfType,
   valuePathToTypePath,
 } from '@strictly/define'
+import { type FormMode } from 'core/props'
 import {
   computed,
   observable,
@@ -105,11 +106,18 @@ export type ValuePathsToAdaptersOf<
   : never
 
 export type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string, FieldAdapter>>>> =
-  UnionToIntersection<{
-    readonly [
-      K in keyof TypePathsToAdapters
-    ]: TypePathsToAdapters[K] extends undefined ? undefined : ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>>
-  }[keyof TypePathsToAdapters]>
+  UnionToIntersection<
+    | {
+      readonly [
+        K in keyof TypePathsToAdapters
+      ]: TypePathsToAdapters[K] extends undefined ? undefined
+        // ignore unspecified values
+        : unknown extends ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>> ? never
+        : ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>>
+    }[keyof TypePathsToAdapters]
+    // ensure we have at least one thing to intersect (can end up with a `never` context otherwise)
+    | {}
+  >
 
 export abstract class FormModel<
   T extends Type,
@@ -135,12 +143,12 @@ export abstract class FormModel<
 
   constructor(
     readonly type: T,
-    value: ValueOfType<ReadonlyTypeOfType<T>>,
+    private readonly originalValue: ValueOfType<ReadonlyTypeOfType<T>>,
     protected readonly adapters: TypePathsToAdapters,
+    protected readonly mode: FormMode,
   ) {
-    this.value = mobxCopy(type, value)
+    this.value = mobxCopy(type, originalValue)
     this.flattenedTypeDefs = flattenTypesOfType(type)
-    const contextValue = this.toContext(value)
     // pre-populate field overrides for consistent behavior when default information is overwritten
     // then returned to
     const conversions = flattenValueTo(
@@ -149,11 +157,14 @@ export abstract class FormModel<
       () => {},
       (
         _t: StrictTypeDef,
-        value: AnyValueType,
+        fieldValue: AnyValueType,
         _setter,
         typePath,
         valuePath,
       ): AnnotatedFieldConversion<FieldOverride> | undefined => {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const contextValue = this.toContext(originalValue, valuePath as keyof ValuePathsToAdapters)
+
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const adapter = this.adapters[typePath as keyof TypePathsToAdapters]
         if (adapter == null) {
@@ -168,7 +179,7 @@ export abstract class FormModel<
           return
         }
         // cannot call this.context yet as the "this" pointer has not been fully created
-        return convert(value, valuePath, contextValue)
+        return convert(fieldValue, valuePath, contextValue)
       },
     )
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -177,12 +188,21 @@ export abstract class FormModel<
     }) as FlattenedFieldOverrides<ValuePathsToAdapters>
   }
 
-  @computed.struct
-  get context() {
-    return this.toContext(this.value)
-  }
+  protected abstract toContext(
+    value: ValueOfType<ReadonlyTypeOfType<T>>,
+    valuePath: keyof ValuePathsToAdapters,
+  ): ContextType
 
-  protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>): ContextType
+  get forceMutableFields() {
+    switch (this.mode) {
+      case 'create':
+        return true
+      case 'edit':
+        return false
+      default:
+        return this.mode satisfies never
+    }
+  }
 
   @computed
   get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>> {
@@ -256,6 +276,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 {
       value,
       required,
@@ -267,20 +288,20 @@ export abstract class FormModel<
         ? mobxCopy(
           fieldTypeDef,
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          create(valuePath as string, this.context),
+          create(valuePath as string, context),
         )
         // fake values can't be copied
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        : create(valuePath as string, this.context),
+        : create(valuePath as string, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath as string,
-      this.context,
+      context,
     )
     const error = this.errors[valuePath]
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
-      readonly,
+      readonly: readonly && !this.forceMutableFields,
       required,
     }
   }
@@ -360,7 +381,9 @@ export abstract class FormModel<
       : elementAdapter.create(
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         elementTypePath as string,
-        this.context,
+        // 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),
       )
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const originalList: any[] = accessor.value
@@ -505,7 +528,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.context)
+    const conversion = revert(value, valuePath as any, this.toContext(this.value, valuePath))
     const accessor = this.getAccessorForValuePath(valuePath)
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value]
@@ -548,10 +571,12 @@ export abstract class FormModel<
       convert,
       create,
     } = adapter
-    const value = create(valuePath, this.context)
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const context = this.toContext(this.value, valuePath as unknown as keyof ValuePathsToAdapters)
+    const value = create(valuePath, context)
     const {
       value: displayValue,
-    } = convert(value, valuePath, this.context)
+    } = convert(value, valuePath, context)
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const key = valuePath as unknown as keyof ValuePathsToAdapters
     runInAction(() => {
@@ -586,16 +611,18 @@ export abstract class FormModel<
     } = this.getAdapterForValuePath(valuePath)
     const fieldOverride = this.fieldOverrides[valuePath]
     const accessor = this.getAccessorForValuePath(valuePath)
+    const context = this.toContext(this.value, valuePath)
+
     const {
       value: storedValue,
     } = convert(
       accessor != null
         ? accessor.value
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        : create(valuePath as string, this.context),
+        : create(valuePath as string, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath as string,
-      this.context,
+      context,
     )
     const value = fieldOverride != null
       ? fieldOverride[0]
@@ -605,13 +632,13 @@ export abstract class FormModel<
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue,
-      } = convert(create(valuePath, this.context), valuePath, this.context)
+      } = convert(create(valuePath, context), valuePath, context)
       if (defaultDisplayValue === value) {
         return true
       }
     }
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const conversion = revert(value, valuePath as string, this.context)
+    const conversion = revert(value, valuePath as string, context)
     return runInAction(() => {
       switch (conversion.type) {
         case UnreliableFieldConversionType.Failure:
@@ -632,11 +659,14 @@ export abstract class FormModel<
     })
   }
 
-  validateAll(): boolean {
+  validateAll(force: boolean = this.mode === 'create'): boolean {
     // sort keys shortest to longest so parent changes don't overwrite child changes
     const accessors = toArray(this.accessors).toSorted(function ([a], [b]) {
       return a.length - b.length
     })
+
+    const flattenedOriginalValues = flattenValuesOfType(this.type, this.originalValue)
+
     return runInAction(() => {
       return accessors.reduce(
         (
@@ -662,32 +692,44 @@ export abstract class FormModel<
             return success
           }
           const fieldOverride = this.fieldOverrides[adapterPath]
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          const context = this.toContext(this.value, valuePath as keyof ValuePathsToAdapters)
           const {
             value: storedValue,
-          } = convert(accessor.value, valuePath, this.context)
+          } = convert(accessor.value, valuePath, context)
           const value = fieldOverride != null
             ? fieldOverride[0]
             : storedValue
-          // TODO more nuanced comparison
+          // TODO customizable comparisons
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue
-
-          const conversion = revert(value, valuePath, this.context)
-          switch (conversion.type) {
-            case UnreliableFieldConversionType.Failure:
-              this.errors[adapterPath] = conversion.error
-              if (conversion.value != null && dirty) {
-                accessor.set(conversion.value[0])
-              }
-              return false
-            case UnreliableFieldConversionType.Success:
-              if (dirty) {
-                accessor.set(conversion.value)
-              }
-              delete this.errors[adapterPath]
-              return success
-            default:
-              throw new UnreachableError(conversion)
+          const needsValidation = force
+            || !(valuePath in flattenedOriginalValues)
+            || storedValue !== convert(
+                flattenedOriginalValues[valuePath],
+                valuePath,
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                this.toContext(this.originalValue, valuePath as keyof ValuePathsToAdapters),
+              ).value
+          if (needsValidation) {
+            const conversion = revert(value, valuePath, context)
+            switch (conversion.type) {
+              case UnreliableFieldConversionType.Failure:
+                this.errors[adapterPath] = conversion.error
+                if (conversion.value != null && dirty) {
+                  accessor.set(conversion.value[0])
+                }
+                return false
+              case UnreliableFieldConversionType.Success:
+                if (dirty) {
+                  accessor.set(conversion.value)
+                }
+                delete this.errors[adapterPath]
+                return success
+              default:
+                throw new UnreachableError(conversion)
+            }
           }
+          return success
         },
         true,
       )

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

@@ -2,6 +2,7 @@ import { expectDefinedAndReturn } from '@strictly/base'
 import {
   booleanType,
   type FlattenedValuesOfType,
+  flattenValidatorsOfValidatingType,
   list,
   nullType,
   numberType,
@@ -13,7 +14,9 @@ import {
   type ValueOfType,
   type ValueToTypePathsOfType,
 } from '@strictly/define'
-import { type FieldAdapter } from 'core/mobx/field_adapter'
+import {
+  type FieldAdapter,
+} from 'core/mobx/field_adapter'
 import {
   adapterFromTwoWayConverter,
   identityAdapter,
@@ -23,11 +26,14 @@ import {
   FormModel,
   type ValuePathsToAdaptersOf,
 } from 'core/mobx/form_model'
+import { mergeAdaptersWithValidators } from 'core/mobx/merge_field_adapters_with_validators'
 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'
 import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_field_value_factory'
-import { type Simplify } from 'type-fest'
+import {
+  type Simplify,
+} from 'type-fest'
 import { type Field } from 'types/field'
 import {
   UnreliableFieldConversionType,
@@ -54,9 +60,13 @@ class TestFormModel<
     {}
   >,
 > extends FormModel<T, ValueToTypePaths, TypePathsToAdapters, {}> {
-  override toContext() {
+  override toContext(
+    value: ValueOfType<T>,
+    valuePath: keyof ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>,
+  ) {
     return {
-      ctx: true,
+      value,
+      valuePath,
     }
   }
 }
@@ -195,6 +205,7 @@ describe('all', function () {
             typeDef,
             originalValue,
             adapters,
+            'create',
           )
         })
 
@@ -255,6 +266,7 @@ describe('all', function () {
             typeDef,
             originalValue,
             adapters,
+            'create',
           )
         })
 
@@ -296,6 +308,7 @@ describe('all', function () {
           typeDef,
           value,
           adapters,
+          'create',
         )
       })
 
@@ -374,6 +387,7 @@ describe('all', function () {
           typeDef,
           value,
           converters,
+          'create',
         )
       })
 
@@ -444,6 +458,7 @@ describe('all', function () {
           typeDef,
           value,
           converters,
+          'create',
         )
       })
 
@@ -509,6 +524,7 @@ describe('all', function () {
           typeDef,
           originalValue,
           adapters,
+          'create',
         )
       })
 
@@ -635,6 +651,7 @@ describe('all', function () {
           typeDef,
           originalValue,
           converters,
+          'create',
         )
       })
 
@@ -740,10 +757,10 @@ describe('all', function () {
 
       // no longer passes context, but will pass context eventually again
       describe('passes context', function () {
-        let contextCopy: number[]
+        let contextCopy: string
         beforeEach(function () {
           integerToStringAdapter.revert.mockImplementationOnce(function (_value, _path, context) {
-            contextCopy = { ...context }
+            contextCopy = JSON.stringify(context)
             return {
               type: UnreliableFieldConversionType.Success,
               value: 1,
@@ -751,7 +768,7 @@ describe('all', function () {
           })
         })
 
-        it('supplies the full, previous context when converting', function () {
+        it('supplies the context when converting', function () {
           model.setFieldValueAndValidate('$.2', '4')
 
           expect(integerToStringAdapter.revert).toHaveBeenCalledOnce()
@@ -759,14 +776,23 @@ describe('all', function () {
             '4',
             '$.2',
             {
-              ctx: true,
+              // the supplied value isn't a copy, so it will be the model value, even
+              // if the value has since changed
+              value: model.value,
+              valuePath: '$.2',
             },
           )
         })
 
-        it('supplies the context', function () {
-          expect(contextCopy).toEqual({
-            ctx: true,
+        it('supplies the correct context value at the time it is being checked', function () {
+          // the copy will show the supplied value however
+          expect(JSON.parse(contextCopy)).toEqual({
+            value: [
+              1,
+              3,
+              7,
+            ],
+            valuePath: '$.2',
           })
         })
       })
@@ -976,6 +1002,7 @@ describe('all', function () {
             type,
             originalValue,
             adapters,
+            'create',
           )
         })
 
@@ -1044,6 +1071,7 @@ describe('all', function () {
                 a: 1,
               },
               adapters,
+              'create',
             )
             it.each([
               [
@@ -1076,6 +1104,7 @@ describe('all', function () {
                 b: false,
               },
               adapters,
+              'create',
             )
             it.each([
               [
@@ -1125,6 +1154,7 @@ describe('all', function () {
           typeDef,
           originalValue,
           converters,
+          'create',
         )
       })
 
@@ -1150,5 +1180,95 @@ describe('all', function () {
         })
       })
     })
+
+    describe('interaction with create and edit modes', () => {
+      const typeDef = object().readonlyField('n', numberType.enforce(n => n < 10 ? 'err' : null))
+      const adapters = mergeAdaptersWithValidators(
+        {
+          $: identityAdapter({ n: 0 }),
+          '$.n': integerToStringAdapter,
+        } as const,
+        flattenValidatorsOfValidatingType(typeDef),
+      )
+      type JsonPaths = {
+        $: '$',
+        '$.n': '$.n',
+      }
+      let originalValue: ValueOfType<typeof typeDef>
+      beforeEach(() => {
+        originalValue = {
+          n: 1,
+        }
+      })
+      describe('create mode', () => {
+        let model: FormModel<
+          typeof typeDef,
+          JsonPaths,
+          typeof adapters
+        >
+        beforeEach(() => {
+          model = new TestFormModel<
+            typeof typeDef,
+            JsonPaths,
+            typeof adapters
+          >(
+            typeDef,
+            originalValue,
+            adapters,
+            'create',
+          )
+        })
+
+        it('makes the field editable', () => {
+          expect(model.fields['$.n'].readonly).toBeFalsy()
+        })
+
+        it('fails validation', () => {
+          expect(model.validateAll()).toBeFalsy()
+        })
+
+        it('passes validation with valid data', () => {
+          model.setFieldValue('$.n', '10')
+          expect(model.validateAll()).toBeTruthy()
+        })
+      })
+      describe('edit model', () => {
+        let model: FormModel<
+          typeof typeDef,
+          JsonPaths,
+          typeof adapters
+        >
+        beforeEach(function () {
+          model = new TestFormModel<
+            typeof typeDef,
+            JsonPaths,
+            typeof adapters
+          >(
+            typeDef,
+            originalValue,
+            adapters,
+            'edit',
+          )
+        })
+
+        it('respects the field being readonly', () => {
+          expect(model.fields['$.n'].readonly).toBeTruthy()
+        })
+
+        it('validates successfully with clean, but invalid data', () => {
+          expect(model.validateAll()).toBeTruthy()
+        })
+
+        it('fails validation with invalid, dirty data', () => {
+          model.setFieldValue('$.n', '2')
+          expect(model.validateAll()).toBeFalsy()
+        })
+
+        it('passes validation with valid, dirty data', () => {
+          model.setFieldValue('$.n', '10')
+          expect(model.validateAll()).toBeTruthy()
+        })
+      })
+    })
   })
 })

package/core/mobx/types.ts

@@ -6,7 +6,7 @@ import {
 } from './form_model'
 
 /**
- * Used to extract the supported value paths from a presenter
+ * Used to extract the supported value paths from a model
  */
 export type ValuePathsOfModel<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -22,7 +22,7 @@ export type ValuePathsOfModel<
 
 /**
  * Used to extract the render type (so the value that is passed to the view) of a given value path
- * from a presenter
+ * from a model
  */
 export type ToValueOfModelValuePath<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -38,9 +38,9 @@ export type ToValueOfModelValuePath<
   : never
 
 /**
- * Extracts the form fields from the presenter. The recommended way is to
+ * Extracts the form fields from a form model. The recommended way is to
  * define the form fields explicitly and use that type to enforce the types
- * of your converters, but generating the FormFields from your presenter
+ * of your converters, but generating the FormFields from your model
  * is less typing, albeit at the cost of potentially getting type errors
  * reported a long way away from the source
  */

package/core/props.ts

@@ -14,8 +14,12 @@ export type FieldsViewProps<F extends Fields> = {
   onFieldSubmit?(this: void, key: keyof F): boolean | void,
 }
 
+export type FormMode = 'edit' | 'create'
+
 export type FormProps<O> = {
   value: O,
 
   onValueChange: (value: O) => void,
+
+  mode: FormMode,
 }