mobx-formly 0.0.1 → 0.0.3

package/dist/form.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'yummies/mobx';
-import type { FieldError, FieldPath, FieldPathValue, FieldState, FieldValues, FormOptions, RegisterOptions, RegisterReturn, ResetOptions, SetValueConfig, SubmitHandlers } from './types.js';
+import type { FieldError, FieldErrors, FieldPath, FieldPathValue, FieldStateTree, FieldValues, FormOptions, RegisterOptions, RegisterReturn, ResetOptions, SetValueConfig, SubmitHandlers } from './types.js';
 export declare class Form<T extends FieldValues = FieldValues> {
     /**
      * Current form values.
@@ -8,11 +8,20 @@ export declare class Form<T extends FieldValues = FieldValues> {
      */
     values: T;
     /**
-     * Errors keyed by field path.
+     * Validation errors nested by field path.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#errors)
      */
-    errors: Record<string, FieldError | undefined>;
+    private readonly errorsByPath;
+    private readonly errorPathCounts;
+    private readonly errorChildren;
+    private readonly errorProxyCache;
+    private readonly fieldStatesByPath;
+    private readonly fieldStatePathCounts;
+    private readonly fieldStateChildren;
+    private readonly fieldStateProxyCache;
+    /** Validation errors nested by field path. */
+    get errors(): FieldErrors<T>;
     /**
      * Field paths whose values differ from their defaults.
      *
@@ -36,7 +45,8 @@ export declare class Form<T extends FieldValues = FieldValues> {
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#fieldstate)
      */
-    fieldState: Record<string, FieldState | undefined>;
+    /** Observable state for each registered field, nested by field path. */
+    get fieldState(): FieldStateTree<T>;
     /**
      * Whether a submission is currently running.
      *
@@ -190,4 +200,14 @@ export declare class Form<T extends FieldValues = FieldValues> {
     private ensureFieldState;
     private applyFieldState;
     private applyError;
+    private getError;
+    private hasError;
+    private errorPaths;
+    private deleteFieldState;
+    private fieldStates;
+    private setPathStore;
+    private deletePathStore;
+    private clearPathStore;
+    private addPathToIndex;
+    private createPathProxy;
 }

package/dist/form.js

@@ -9,11 +9,22 @@ export class Form {
      */
     values;
     /**
-     * Errors keyed by field path.
+     * Validation errors nested by field path.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#errors)
      */
-    errors = {};
+    errorsByPath = observable.map();
+    errorPathCounts = observable.map();
+    errorChildren = new Map();
+    errorProxyCache = new Map();
+    fieldStatesByPath = observable.map();
+    fieldStatePathCounts = observable.map();
+    fieldStateChildren = new Map();
+    fieldStateProxyCache = new Map();
+    /** Validation errors nested by field path. */
+    get errors() {
+        return this.createPathProxy('', this.errorsByPath, this.errorPathCounts, this.errorChildren, this.errorProxyCache);
+    }
     /**
      * Field paths whose values differ from their defaults.
      *
@@ -37,7 +48,10 @@ export class Form {
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#fieldstate)
      */
-    fieldState = {};
+    /** Observable state for each registered field, nested by field path. */
+    get fieldState() {
+        return this.createPathProxy('', this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, this.fieldStateProxyCache);
+    }
     /**
      * Whether a submission is currently running.
      *
@@ -91,7 +105,6 @@ export class Form {
         this.values = clone((options.values ?? options.defaultValues ?? {}));
         makeObservable(this, {
             values: observable.deep,
-            errors: observable.shallow,
             dirtyFields: observable.shallow,
             touchedFields: observable.shallow,
             validatingFields: observable.shallow,
@@ -100,7 +113,6 @@ export class Form {
             isSubmitSuccessful: observable,
             submitCount: observable,
             disabled: computed,
-            fieldState: observable.deep,
             isDirty: computed,
             isValid: computed,
             snapshot: computed,
@@ -134,7 +146,7 @@ export class Form {
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#isvalid)
      */
-    get isValid() { return Object.keys(this.errors).length === 0; }
+    get isValid() { return this.errorsByPath.size === 0; }
     /**
      * Registers a field and returns its ref and event handlers.
      *
@@ -165,7 +177,7 @@ export class Form {
                 if (this.disabled)
                     return;
                 this.markTouched(path);
-                if (this.options.mode === 'onBlur' || this.options.mode === 'all' || (path in this.errors && this.options.reValidateMode === 'onBlur'))
+                if (this.options.mode === 'onBlur' || this.options.mode === 'all' || (this.hasError(path) && this.options.reValidateMode === 'onBlur'))
                     await this.trigger(path);
             },
         };
@@ -179,11 +191,11 @@ export class Form {
         const path = name;
         this.fieldValidationVersions.set(path, (this.fieldValidationVersions.get(path) ?? 0) + 1);
         deleteAtPath(this.values, path);
-        delete this.errors[path];
+        this.applyError(path, undefined);
         delete this.dirtyFields[path];
         delete this.touchedFields[path];
         delete this.validatingFields[path];
-        delete this.fieldState[path];
+        this.deleteFieldState(path);
         this.fieldOptions.delete(path);
         this.refs.delete(path);
     }
@@ -297,10 +309,9 @@ export class Form {
      */
     clearErrors(name) {
         if (!name) {
-            this.errors = {};
-            for (const state of Object.values(this.fieldState))
-                if (state)
-                    this.applyFieldState(state, undefined);
+            this.clearPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren);
+            for (const [, state] of this.fieldStates())
+                this.applyFieldState(state, undefined);
             return;
         }
         for (const path of Array.isArray(name) ? name : [name])
@@ -325,11 +336,12 @@ export class Form {
         }
         try {
             const schemaErrors = await this.validateSchema();
-            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...Object.keys(this.errors), ...Object.keys(schemaErrors)])];
+            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...this.errorsByPath.keys(), ...this.errorPaths(schemaErrors)])];
             runInAction(() => {
                 for (const path of validationPaths) {
-                    if (schemaErrors[path] && this.isValidationCurrent(path, run, fieldVersions)) {
-                        this.applyError(path, schemaErrors[path]);
+                    const schemaError = this.getError(schemaErrors, path);
+                    if (schemaError && this.isValidationCurrent(path, run, fieldVersions)) {
+                        this.applyError(path, schemaError);
                     }
                 }
             });
@@ -339,14 +351,14 @@ export class Form {
                     if (this.isValidationCurrent(path, run, fieldVersions)) {
                         if (ruleError)
                             this.applyError(path, ruleError);
-                        else if (schemaErrors[path])
-                            this.applyError(path, schemaErrors[path]);
+                        else if (this.getError(schemaErrors, path))
+                            this.applyError(path, this.getError(schemaErrors, path));
                         else
                             this.applyError(path, undefined);
                     }
                 });
             }
-            return (paths ?? Object.keys(this.errors)).every((path) => !this.errors[path]);
+            return (paths ?? [...this.errorsByPath.keys()]).every((path) => !this.hasError(path));
         }
         finally {
             runInAction(() => {
@@ -409,7 +421,7 @@ export class Form {
         this.validationVersion += 1;
         for (const path of Object.keys(this.validatingFields)) {
             delete this.validatingFields[path];
-            const state = this.fieldState[path];
+            const state = this.fieldStatesByPath.get(path);
             if (state)
                 state.isValidating = false;
         }
@@ -422,10 +434,9 @@ export class Form {
         if (!options.keepTouched)
             this.touchedFields = {};
         if (!options.keepErrors) {
-            this.errors = {};
-            for (const state of Object.values(this.fieldState))
-                if (state)
-                    this.applyFieldState(state, undefined);
+            this.clearPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren);
+            for (const [, state] of this.fieldStates())
+                this.applyFieldState(state, undefined);
         }
         if (!options.keepIsSubmitted) {
             this.isSubmitted = false;
@@ -433,11 +444,10 @@ export class Form {
         }
         if (!options.keepSubmitCount)
             this.submitCount = 0;
-        for (const [path, state] of Object.entries(this.fieldState))
-            if (state) {
-                state.isDirty = !!this.dirtyFields[path];
-                state.isTouched = !!this.touchedFields[path];
-            }
+        for (const [path, state] of this.fieldStates()) {
+            state.isDirty = !!this.dirtyFields[path];
+            state.isTouched = !!this.touchedFields[path];
+        }
     }
     /**
      * Resets one field to its current default value and clears its state.
@@ -448,7 +458,7 @@ export class Form {
         const path = name;
         this.fieldValidationVersions.set(path, (this.fieldValidationVersions.get(path) ?? 0) + 1);
         setAtPath(this.values, path, clone(getAtPath(this.defaultValues, path)));
-        delete this.errors[path];
+        this.applyError(path, undefined);
         delete this.dirtyFields[path];
         delete this.touchedFields[path];
         delete this.validatingFields[path];
@@ -481,7 +491,7 @@ export class Form {
             this.dirtyFields[path] = true;
         this.ensureFieldState(path).isDirty = !!this.dirtyFields[path];
     }
-    shouldValidateOnChange(path) { return this.options.mode === 'onChange' || this.options.mode === 'all' || (path in this.errors && this.options.reValidateMode === 'onChange'); }
+    shouldValidateOnChange(path) { return this.options.mode === 'onChange' || this.options.mode === 'all' || (this.hasError(path) && this.options.reValidateMode === 'onChange'); }
     isValidationCurrent(path, run, fieldVersions) {
         if (this.validationVersion !== run)
             return false;
@@ -516,8 +526,8 @@ export class Form {
     normalizeSchemaErrors(error) {
         return error.issues.reduce((errors, issue) => {
             const path = (issue.path ?? []).map((part) => String(typeof part === 'object' ? part.key : part)).join('.') || 'root';
-            if (!errors[path])
-                errors[path] = { type: issue.code ?? issue.type ?? 'validation', message: issue.message };
+            if (!this.getError(errors, path))
+                setAtPath(errors, path, { type: issue.code ?? issue.type ?? 'validation', message: issue.message });
             return errors;
         }, {});
     }
@@ -553,7 +563,12 @@ export class Form {
         return undefined;
     }
     ensureFieldState(path) {
-        return (this.fieldState[path] ??= { invalid: false, isDirty: false, isTouched: false, isValidating: false });
+        const existing = this.fieldStatesByPath.get(path);
+        if (existing)
+            return existing;
+        const state = { invalid: false, isDirty: false, isTouched: false, isValidating: false };
+        this.setPathStore(this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, path, state);
+        return state;
     }
     applyFieldState(state, error) {
         state.error = error;
@@ -561,9 +576,106 @@ export class Form {
     }
     applyError(path, error) {
         if (error)
-            this.errors[path] = error;
+            this.setPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren, path, error);
         else
-            delete this.errors[path];
+            this.deletePathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren, path);
         this.applyFieldState(this.ensureFieldState(path), error);
     }
+    getError(errors, path) {
+        const value = getAtPath(errors, path);
+        return value && typeof value === 'object' && 'type' in value ? value : undefined;
+    }
+    hasError(path) { return this.errorsByPath.has(path); }
+    errorPaths(errors, base = '') {
+        const paths = [];
+        for (const [key, value] of Object.entries(errors)) {
+            if (value === undefined)
+                continue;
+            const path = base ? `${base}.${key}` : key;
+            if (value && typeof value === 'object' && 'type' in value)
+                paths.push(path);
+            if (value && typeof value === 'object')
+                paths.push(...this.errorPaths(value, path));
+        }
+        return paths;
+    }
+    deleteFieldState(path) {
+        this.deletePathStore(this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, path);
+    }
+    fieldStates() {
+        return [...this.fieldStatesByPath.entries()];
+    }
+    setPathStore(store, counts, children, path, value) {
+        if (!store.has(path))
+            this.addPathToIndex(counts, children, path);
+        store.set(path, value);
+    }
+    deletePathStore(store, counts, children, path) {
+        if (!store.delete(path))
+            return;
+        const parts = path.split('.');
+        for (let index = parts.length; index > 0; index -= 1) {
+            const current = parts.slice(0, index).join('.');
+            const count = (counts.get(current) ?? 1) - 1;
+            if (count > 0) {
+                counts.set(current, count);
+                continue;
+            }
+            counts.delete(current);
+            const parent = parts.slice(0, index - 1).join('.');
+            const siblings = children.get(parent);
+            siblings?.delete(parts[index - 1]);
+            if (siblings?.size === 0)
+                children.delete(parent);
+        }
+    }
+    clearPathStore(store, counts, children) {
+        store.clear();
+        counts.clear();
+        children.clear();
+    }
+    addPathToIndex(counts, children, path) {
+        const parts = path.split('.');
+        for (let index = 1; index <= parts.length; index += 1) {
+            const current = parts.slice(0, index).join('.');
+            counts.set(current, (counts.get(current) ?? 0) + 1);
+            const parent = parts.slice(0, index - 1).join('.');
+            let siblings = children.get(parent);
+            if (!siblings)
+                children.set(parent, siblings = new Set());
+            siblings.add(parts[index - 1]);
+        }
+    }
+    createPathProxy(path, store, counts, children, cache) {
+        const cached = cache.get(path);
+        if (cached)
+            return cached;
+        const proxy = new Proxy({}, {
+            get: (_, property) => {
+                if (typeof property !== 'string')
+                    return undefined;
+                const current = store.get(path);
+                if (current && property in current)
+                    return current[property];
+                const childPath = path ? `${path}.${property}` : property;
+                const value = store.get(childPath);
+                if (value && !children.has(childPath))
+                    return value;
+                return counts.has(childPath) ? this.createPathProxy(childPath, store, counts, children, cache) : undefined;
+            },
+            ownKeys: () => [...Object.keys(store.get(path) ?? {}), ...(children.get(path) ?? [])],
+            getOwnPropertyDescriptor: (_, property) => {
+                if (typeof property !== 'string')
+                    return undefined;
+                const value = store.get(path);
+                if (value && property in value)
+                    return { configurable: true, enumerable: true, value: value[property] };
+                return children.get(path)?.has(property) ? { configurable: true, enumerable: true } : undefined;
+            },
+            set: () => false,
+            deleteProperty: () => false,
+        });
+        cache.set(path, proxy);
+        return proxy;
+    }
 }

package/dist/types.d.ts

@@ -49,7 +49,11 @@ export interface FieldError {
     type: string;
     message?: string;
 }
-export type FieldErrors<T extends FieldValues = FieldValues> = Record<string, FieldError | undefined>;
+export type FieldErrors<T extends object = FieldValues> = {
+    [K in keyof T]?: T[K] extends readonly (infer I)[] ? FieldError & Array<I extends object ? FieldErrors<I> : FieldError | undefined> : T[K] extends object ? FieldError & FieldErrors<T[K]> : FieldError;
+} & {
+    root?: FieldError;
+};
 export interface FieldState {
     invalid: boolean;
     isDirty: boolean;
@@ -57,7 +61,11 @@ export interface FieldState {
     isValidating: boolean;
     error?: FieldError;
 }
-export type FieldStateTree<T extends FieldValues = FieldValues> = Record<string, FieldState | undefined>;
+export type FieldStateTree<T extends object = FieldValues> = {
+    [K in keyof T]?: T[K] extends readonly (infer I)[] ? FieldState & Array<I extends object ? FieldStateTree<I> : FieldState | undefined> : T[K] extends object ? FieldState & FieldStateTree<T[K]> : FieldState;
+} & {
+    root?: FieldState;
+};
 export interface FormState<T extends FieldValues = FieldValues> {
     errors: FieldErrors<T>;
     dirtyFields: Partial<Record<FieldPath<T>, true>>;

package/dist/utils.js

@@ -41,8 +41,9 @@ export const deleteAtPath = (target, path) => {
             return undefined;
         return value[key];
     }, target);
-    if (parent && typeof parent === 'object')
-        delete parent[lastKey];
+    if (!parent || typeof parent !== 'object')
+        return;
+    delete parent[lastKey];
 };
 export const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 export const extractValue = (eventOrValue) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-formly",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Framework-agnostic observable forms for MobX with granular field state and Zod or Valibot validation",
   "homepage": "https://js2me.github.io/mobx-formly/",
   "repository": {
@@ -19,17 +19,6 @@
       "import": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "check": "tsc --noEmit -p tsconfig.json",
-    "test": "vitest run",
-    "test:performance": "vitest run tests/performance",
-    "test:coverage": "vitest run --coverage",
-    "test:types": "tsc --noEmit -p tsconfig.types.json",
-    "docs:dev": "docusite dev",
-    "docs:build": "docusite build",
-    "docs:preview": "docusite preview"
-  },
   "keywords": [
     "mobx",
     "mobx-form",
@@ -70,7 +59,6 @@
     "access": "public"
   },
   "type": "module",
-  "packageManager": "pnpm@11.24.0",
   "dependencies": {
     "mobx": "^6.16.1",
     "yummies": "^7.20.1"
@@ -84,5 +72,16 @@
     "valibot": "^1.4.2",
     "vitest": "^4.1.11",
     "zod": "^4.4.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "check": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:performance": "vitest run tests/performance",
+    "test:coverage": "vitest run --coverage",
+    "test:types": "tsc --noEmit -p tsconfig.types.json",
+    "docs:dev": "docusite dev",
+    "docs:build": "docusite build",
+    "docs:preview": "docusite preview"
   }
-}
+}

package/dist/src/form.d.ts

@@ -1,48 +0,0 @@
-import { type Ref } from 'yummies/mobx';
-import type { FieldError, FieldErrors, FieldPath, FieldState, FieldValues, FormOptions, FormState, RegisterOptions, RegisterReturn, ResetOptions, SetValueConfig, SubmitHandlers } from './types.js';
-export declare class Form<T extends FieldValues = FieldValues> {
-    values: T;
-    errors: FieldErrors<T>;
-    dirtyFields: Partial<Record<FieldPath<T>, true>>;
-    touchedFields: Partial<Record<FieldPath<T>, true>>;
-    validatingFields: Partial<Record<FieldPath<T>, true>>;
-    isSubmitting: boolean;
-    isSubmitted: boolean;
-    isSubmitSuccessful: boolean;
-    submitCount: number;
-    readonly refs: Map<string, Ref<HTMLElement | null, import("yummies/types").AnyObject>>;
-    private readonly defaultValues;
-    private readonly options;
-    private readonly fieldOptions;
-    private readonly listeners;
-    constructor(options?: FormOptions<T>);
-    get formState(): FormState<T>;
-    get isDirty(): boolean;
-    get isValid(): boolean;
-    register(name: FieldPath<T>, options?: RegisterOptions<T>): RegisterReturn;
-    unregister(name: FieldPath<T>): void;
-    getValues(): T;
-    getValues(name: FieldPath<T>): unknown;
-    setValue(name: FieldPath<T>, value: unknown, config?: SetValueConfig): void;
-    setError(name: FieldPath<T>, error: FieldError): void;
-    clearErrors(name?: FieldPath<T> | FieldPath<T>[]): void;
-    getFieldState(name: FieldPath<T>): FieldState;
-    trigger(name?: FieldPath<T> | FieldPath<T>[]): Promise<boolean>;
-    handleSubmit({ onValid, onInvalid }: SubmitHandlers<T>): () => Promise<void>;
-    reset(values?: Partial<T>, options?: ResetOptions): void;
-    resetField(name: FieldPath<T>): void;
-    setFocus(name: FieldPath<T>): void;
-    watch(): T;
-    watch(name: FieldPath<T>): unknown;
-    subscribe(listener: (values: T, info: {
-        name?: string;
-    }) => void): () => void;
-    private notify;
-    private markTouched;
-    private updateDirty;
-    private shouldValidateOnChange;
-    private transformValue;
-    private validateSchema;
-    private zodErrors;
-    private validateRules;
-}

package/dist/src/form.js

@@ -1,261 +0,0 @@
-import { makeAutoObservable, runInAction } from 'mobx';
-import { createRef } from 'yummies/mobx';
-import { clone, deleteAtPath, extractValue, getAtPath, isEqual, setAtPath } from './utils.js';
-export class Form {
-    values;
-    errors = {};
-    dirtyFields = {};
-    touchedFields = {};
-    validatingFields = {};
-    isSubmitting = false;
-    isSubmitted = false;
-    isSubmitSuccessful = false;
-    submitCount = 0;
-    refs = new Map();
-    defaultValues;
-    options;
-    fieldOptions = new Map();
-    listeners = new Set();
-    constructor(options = {}) {
-        this.options = {
-            ...options,
-            mode: options.mode ?? 'onSubmit',
-            reValidateMode: options.reValidateMode ?? 'onChange',
-            disabled: options.disabled ?? false,
-        };
-        this.defaultValues = clone((options.defaultValues ?? {}));
-        this.values = clone((options.values ?? options.defaultValues ?? {}));
-        makeAutoObservable(this, { defaultValues: false, options: false, fieldOptions: false, listeners: false, refs: false }, { autoBind: true });
-    }
-    get formState() {
-        return {
-            errors: this.errors,
-            dirtyFields: this.dirtyFields,
-            touchedFields: this.touchedFields,
-            validatingFields: this.validatingFields,
-            isDirty: Object.keys(this.dirtyFields).length > 0,
-            isValid: Object.keys(this.errors).length === 0,
-            isValidating: Object.keys(this.validatingFields).length > 0,
-            isSubmitting: this.isSubmitting,
-            isSubmitted: this.isSubmitted,
-            isSubmitSuccessful: this.isSubmitSuccessful,
-            submitCount: this.submitCount,
-            disabled: this.options.disabled,
-        };
-    }
-    get isDirty() { return this.formState.isDirty; }
-    get isValid() { return this.formState.isValid; }
-    register(name, options = {}) {
-        const path = name;
-        this.fieldOptions.set(path, options);
-        let ref = this.refs.get(path);
-        if (!ref) {
-            ref = createRef();
-            this.refs.set(path, ref);
-        }
-        return {
-            name: path,
-            ref,
-            onChange: async (eventOrValue) => {
-                const value = this.transformValue(extractValue(eventOrValue), options);
-                const shouldValidate = this.shouldValidateOnChange(path);
-                this.setValue(path, value, { shouldDirty: true, shouldValidate: false });
-                if (shouldValidate)
-                    await this.trigger(path);
-            },
-            onBlur: async () => {
-                this.markTouched(path);
-                if (this.options.mode === 'onBlur' || this.options.mode === 'all' || (path in this.errors && this.options.reValidateMode === 'onBlur'))
-                    await this.trigger(path);
-            },
-        };
-    }
-    unregister(name) {
-        const path = name;
-        deleteAtPath(this.values, path);
-        delete this.errors[path];
-        delete this.dirtyFields[path];
-        delete this.touchedFields[path];
-        delete this.validatingFields[path];
-        this.fieldOptions.delete(path);
-        this.refs.delete(path);
-        this.notify(path);
-    }
-    getValues(name) {
-        return name === undefined ? clone(this.values) : getAtPath(this.values, name);
-    }
-    setValue(name, value, config = {}) {
-        const path = name;
-        setAtPath(this.values, path, value);
-        if (config.shouldDirty ?? true)
-            this.updateDirty(path);
-        if (config.shouldTouch)
-            this.markTouched(path);
-        this.notify(path);
-        if (config.shouldValidate)
-            void this.trigger(path);
-    }
-    setError(name, error) {
-        this.errors[name] = error;
-    }
-    clearErrors(name) {
-        if (!name) {
-            this.errors = {};
-            return;
-        }
-        for (const path of Array.isArray(name) ? name : [name])
-            delete this.errors[path];
-    }
-    getFieldState(name) {
-        const path = name;
-        return { invalid: !!this.errors[path], isDirty: !!this.dirtyFields[path], isTouched: !!this.touchedFields[path], error: this.errors[path] };
-    }
-    async trigger(name) {
-        const paths = name ? (Array.isArray(name) ? name : [name]).map(String) : undefined;
-        for (const path of paths ?? this.fieldOptions.keys())
-            this.validatingFields[path] = true;
-        try {
-            const schemaErrors = await this.validateSchema();
-            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...Object.keys(schemaErrors)])];
-            runInAction(() => {
-                for (const path of validationPaths) {
-                    const error = schemaErrors[path] ?? this.validateRules(path);
-                    if (error instanceof Promise)
-                        continue;
-                    if (error)
-                        this.errors[path] = error;
-                    else
-                        delete this.errors[path];
-                }
-            });
-            for (const path of validationPaths) {
-                const ruleError = await this.validateRules(path);
-                runInAction(() => {
-                    if (ruleError)
-                        this.errors[path] = ruleError;
-                    else if (!schemaErrors[path])
-                        delete this.errors[path];
-                });
-            }
-            return (paths ?? Object.keys(this.errors)).every((path) => !this.errors[path]);
-        }
-        finally {
-            runInAction(() => {
-                for (const path of paths ?? this.fieldOptions.keys())
-                    delete this.validatingFields[path];
-            });
-        }
-    }
-    handleSubmit({ onValid, onInvalid }) {
-        return async () => {
-            this.isSubmitting = true;
-            this.isSubmitted = true;
-            this.submitCount += 1;
-            try {
-                const valid = await this.trigger();
-                if (valid) {
-                    await onValid(this.getValues(), this);
-                    runInAction(() => { this.isSubmitSuccessful = true; });
-                }
-                else {
-                    await onInvalid?.(this.errors, this);
-                    runInAction(() => { this.isSubmitSuccessful = false; });
-                }
-            }
-            finally {
-                runInAction(() => { this.isSubmitting = false; });
-            }
-        };
-    }
-    reset(values, options = {}) {
-        const next = clone((values ?? this.defaultValues));
-        this.values = next;
-        if (!options.keepDefaultValues && values)
-            Object.assign(this.defaultValues, clone(values));
-        if (!options.keepDirty)
-            this.dirtyFields = {};
-        if (!options.keepTouched)
-            this.touchedFields = {};
-        if (!options.keepErrors)
-            this.errors = {};
-        if (!options.keepIsSubmitted) {
-            this.isSubmitted = false;
-            this.isSubmitSuccessful = false;
-        }
-        if (!options.keepSubmitCount)
-            this.submitCount = 0;
-        this.notify();
-    }
-    resetField(name) {
-        const path = name;
-        setAtPath(this.values, path, clone(getAtPath(this.defaultValues, path)));
-        delete this.errors[path];
-        delete this.dirtyFields[path];
-        delete this.touchedFields[path];
-        this.notify(path);
-    }
-    setFocus(name) { this.refs.get(name)?.current?.focus(); }
-    watch(name) { return name === undefined ? this.values : getAtPath(this.values, name); }
-    subscribe(listener) {
-        this.listeners.add(listener);
-        return () => this.listeners.delete(listener);
-    }
-    notify(name) { for (const listener of this.listeners)
-        listener(this.getValues(), { name }); }
-    markTouched(path) { this.touchedFields[path] = true; }
-    updateDirty(path) { if (isEqual(getAtPath(this.values, path), getAtPath(this.defaultValues, path)))
-        delete this.dirtyFields[path];
-    else
-        this.dirtyFields[path] = true; }
-    shouldValidateOnChange(path) { return this.options.mode === 'onChange' || this.options.mode === 'all' || (path in this.errors && this.options.reValidateMode === 'onChange'); }
-    transformValue(value, options) {
-        if (options.setValueAs)
-            return options.setValueAs(value);
-        if (options.valueAsNumber)
-            return value === '' ? Number.NaN : Number(value);
-        if (options.valueAsDate)
-            return new Date(String(value));
-        return value;
-    }
-    async validateSchema() {
-        if (!this.options.schema)
-            return {};
-        const result = await this.options.schema.safeParseAsync(this.getValues());
-        if (result.success)
-            return {};
-        return this.zodErrors(result.error);
-    }
-    zodErrors(error) {
-        return error.issues.reduce((errors, issue) => {
-            const path = issue.path.map(String).join('.') || 'root';
-            if (!errors[path])
-                errors[path] = { type: issue.code, message: issue.message };
-            return errors;
-        }, {});
-    }
-    async validateRules(path) {
-        const rules = this.fieldOptions.get(path);
-        if (!rules)
-            return undefined;
-        const value = getAtPath(this.values, path);
-        const fail = (type, rule) => typeof rule === 'string' ? { type, message: rule } : { type };
-        if (rules.required && (value === undefined || value === null || value === ''))
-            return fail('required', rules.required);
-        if (rules.minLength && String(value ?? '').length < rules.minLength.value)
-            return { type: 'minLength', message: rules.minLength.message };
-        if (rules.maxLength && String(value ?? '').length > rules.maxLength.value)
-            return { type: 'maxLength', message: rules.maxLength.message };
-        if (rules.min && Number(value) < rules.min.value)
-            return { type: 'min', message: rules.min.message };
-        if (rules.max && Number(value) > rules.max.value)
-            return { type: 'max', message: rules.max.message };
-        if (rules.pattern && !rules.pattern.value.test(String(value ?? '')))
-            return { type: 'pattern', message: rules.pattern.message };
-        if (rules.validate) {
-            const result = await rules.validate(value, this.getValues());
-            if (result !== true)
-                return { type: 'validate', message: typeof result === 'string' ? result : undefined };
-        }
-        return undefined;
-    }
-}

package/dist/src/index.d.ts

@@ -1,2 +0,0 @@
-export { Form } from './form.js';
-export type { FieldError, FieldErrors, FieldPath, FieldState, FieldValues, FormOptions, FormState, RegisterOptions, RegisterReturn, ResetOptions, SetValueConfig, SubmitHandlers, } from './types.js';

package/dist/src/index.js

@@ -1 +0,0 @@
-export { Form } from './form.js';

package/dist/src/types.d.ts

@@ -1,88 +0,0 @@
-import type { Ref } from 'yummies/mobx';
-import type { ZodType } from 'zod';
-export type FieldValues = Record<string, unknown>;
-/** Dot-separated path into the form value tree, for example `user.email`. */
-export type FieldPath<T extends FieldValues = FieldValues> = string;
-export interface FieldError {
-    type: string;
-    message?: string;
-}
-export type FieldErrors<T extends FieldValues = FieldValues> = Partial<Record<FieldPath<T>, FieldError>>;
-export interface FieldState {
-    invalid: boolean;
-    isDirty: boolean;
-    isTouched: boolean;
-    error?: FieldError;
-}
-export interface FormState<T extends FieldValues = FieldValues> {
-    errors: FieldErrors<T>;
-    dirtyFields: Partial<Record<FieldPath<T>, true>>;
-    touchedFields: Partial<Record<FieldPath<T>, true>>;
-    validatingFields: Partial<Record<FieldPath<T>, true>>;
-    isDirty: boolean;
-    isValid: boolean;
-    isValidating: boolean;
-    isSubmitting: boolean;
-    isSubmitted: boolean;
-    isSubmitSuccessful: boolean;
-    submitCount: number;
-    disabled: boolean;
-}
-export interface RegisterOptions<T extends FieldValues = FieldValues> {
-    required?: string | boolean;
-    minLength?: {
-        value: number;
-        message?: string;
-    };
-    maxLength?: {
-        value: number;
-        message?: string;
-    };
-    min?: {
-        value: number;
-        message?: string;
-    };
-    max?: {
-        value: number;
-        message?: string;
-    };
-    pattern?: {
-        value: RegExp;
-        message?: string;
-    };
-    validate?: (value: unknown, values: T) => boolean | string | Promise<boolean | string>;
-    valueAsNumber?: boolean;
-    valueAsDate?: boolean;
-    setValueAs?: (value: unknown) => unknown;
-}
-export interface RegisterReturn {
-    name: string;
-    ref: Ref<HTMLElement | null>;
-    onChange: (eventOrValue: unknown) => Promise<void>;
-    onBlur: () => Promise<void>;
-}
-export interface SetValueConfig {
-    shouldValidate?: boolean;
-    shouldDirty?: boolean;
-    shouldTouch?: boolean;
-}
-export interface ResetOptions {
-    keepDefaultValues?: boolean;
-    keepDirty?: boolean;
-    keepTouched?: boolean;
-    keepErrors?: boolean;
-    keepIsSubmitted?: boolean;
-    keepSubmitCount?: boolean;
-}
-export interface FormOptions<T extends FieldValues> {
-    defaultValues?: Partial<T>;
-    values?: Partial<T>;
-    schema?: ZodType<T>;
-    mode?: 'onSubmit' | 'onChange' | 'onBlur' | 'all';
-    reValidateMode?: 'onChange' | 'onBlur';
-    disabled?: boolean;
-}
-export interface SubmitHandlers<T extends FieldValues> {
-    onValid: (values: T, form: unknown) => void | Promise<void>;
-    onInvalid?: (errors: FieldErrors<T>, form: unknown) => void | Promise<void>;
-}

package/dist/src/types.js

@@ -1 +0,0 @@
-export {};

package/dist/src/utils.d.ts

@@ -1,6 +0,0 @@
-export declare const clone: <T>(value: T) => T;
-export declare const getAtPath: (source: unknown, path: string) => unknown;
-export declare const setAtPath: (target: Record<string, unknown>, path: string, value: unknown) => void;
-export declare const deleteAtPath: (target: Record<string, unknown>, path: string) => void;
-export declare const isEqual: (a: unknown, b: unknown) => boolean;
-export declare const extractValue: (eventOrValue: unknown) => unknown;

package/dist/src/utils.js

@@ -1,59 +0,0 @@
-import { isUnsafeProperty } from 'yummies/data';
-export const clone = (value) => {
-    if (typeof structuredClone === 'function') {
-        try {
-            return structuredClone(value);
-        }
-        catch {
-            // MobX observable proxies cannot be structured-cloned directly.
-        }
-    }
-    return JSON.parse(JSON.stringify(value));
-};
-export const getAtPath = (source, path) => path.split('.').reduce((value, key) => {
-    if (isUnsafeProperty(key) || value === null || value === undefined)
-        return undefined;
-    return value[key];
-}, source);
-export const setAtPath = (target, path, value) => {
-    const keys = path.split('.');
-    let current = target;
-    for (const key of keys.slice(0, -1)) {
-        if (isUnsafeProperty(key))
-            return;
-        const next = current[key];
-        if (!next || typeof next !== 'object' || Array.isArray(next))
-            current[key] = {};
-        current = current[key];
-    }
-    const lastKey = keys.at(-1);
-    if (lastKey && !isUnsafeProperty(lastKey))
-        current[lastKey] = value;
-};
-export const deleteAtPath = (target, path) => {
-    const keys = path.split('.');
-    const lastKey = keys.pop();
-    if (!lastKey || isUnsafeProperty(lastKey))
-        return;
-    const parent = keys.reduce((value, key) => {
-        if (isUnsafeProperty(key) || !value || typeof value !== 'object')
-            return undefined;
-        return value[key];
-    }, target);
-    if (parent && typeof parent === 'object')
-        delete parent[lastKey];
-};
-export const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-export const extractValue = (eventOrValue) => {
-    if (!eventOrValue || typeof eventOrValue !== 'object' || !('target' in eventOrValue))
-        return eventOrValue;
-    const target = eventOrValue.target;
-    if (target.type === 'checkbox')
-        return target.checked;
-    if (target.type === 'radio')
-        return target.checked ? target.value : undefined;
-    if (target.multiple && target instanceof HTMLSelectElement) {
-        return Array.from(target.selectedOptions, (option) => option.value);
-    }
-    return target.value;
-};