@strictly/react-form 0.0.31 → 0.0.33

package/.out/util/Partial.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { observer } from 'mobx-react';
+import { Observer } from 'mobx-react';
 import { forwardRef, useMemo, } from 'react';
 export function createSimplePartialComponent(Component, curriedProps) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -65,7 +65,7 @@ export function createPartialObserverComponent(Component, curriedPropsSource, ad
 }
 export function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return observer(forwardRef(function (props, ref) {
+    return forwardRef(function (props, ref) {
         // forward ref types are really difficult to work with
         // still needs a cast as `extends ComponentType<any>` != `ComponentType<any>`
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unnecessary-type-assertion
@@ -90,10 +90,12 @@ export function createUnsafePartialObserverComponent(Component, curriedPropsSour
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             Object.assign({}, props),
         ]);
-        // TODO is there any way we can memoize this transformation?
-        const curriedProps = curriedPropsSource(additionalProps);
-        return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
-    }));
+        return (_jsx(Observer, { children: () => {
+                // TODO is there any way we can memoize this transformation?
+                const curriedProps = curriedPropsSource(additionalProps);
+                return (_jsx(C, Object.assign({ ref: ref }, curriedProps, exposedProps)));
+            } }));
+    });
 }
 export function usePartialObserverComponent(
 // has to be first so eslint react-hooks/exhaustive-deps can find the callback

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.19 KB
+CJS ⚡️ Build success in 102ms
+ESM dist/index.js 60.01 KB
+ESM ⚡️ Build success in 112ms
 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 6977ms
+DTS dist/index.d.cts 38.52 KB
+DTS dist/index.d.ts  38.52 KB
+Done in 8.18s.

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

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

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!
+}