mobx-formly 0.0.1

package/dist/form.js

@@ -0,0 +1,569 @@
+import { action, computed, makeObservable, observable, observe, runInAction } from 'mobx';
+import { createRef } from 'yummies/mobx';
+import { clone, deleteAtPath, extractValue, getAtPath, isEqual, setAtPath } from './utils.js';
+export class Form {
+    /**
+     * Current form values.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#values)
+     */
+    values;
+    /**
+     * Errors keyed by field path.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#errors)
+     */
+    errors = {};
+    /**
+     * Field paths whose values differ from their defaults.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#dirtyfields)
+     */
+    dirtyFields = {};
+    /**
+     * Field paths that have been touched.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#touchedfields)
+     */
+    touchedFields = {};
+    /**
+     * Field paths that are currently being validated.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#validatingfields)
+     */
+    validatingFields = {};
+    /**
+     * Observable state for each registered field.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#fieldstate)
+     */
+    fieldState = {};
+    /**
+     * Whether a submission is currently running.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#issubmitting)
+     */
+    isSubmitting = false;
+    /**
+     * Whether the form has been submitted at least once.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#issubmitted)
+     */
+    isSubmitted = false;
+    /**
+     * Whether the latest submission succeeded.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#issubmitsuccessful)
+     */
+    isSubmitSuccessful = false;
+    /**
+     * Number of submission attempts.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#submitcount)
+     */
+    submitCount = 0;
+    /**
+     * Refs registered for fields.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#refs)
+     */
+    refs = new Map();
+    defaultValues;
+    options;
+    fieldOptions = new Map();
+    valueObservers;
+    observerTimer;
+    changedPaths = new Set();
+    isMutating = false;
+    observerTreeChanged = false;
+    activeSubmissions = 0;
+    resetVersion = 0;
+    validationVersion = 0;
+    fieldValidationVersions = new Map();
+    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 ?? {}));
+        makeObservable(this, {
+            values: observable.deep,
+            errors: observable.shallow,
+            dirtyFields: observable.shallow,
+            touchedFields: observable.shallow,
+            validatingFields: observable.shallow,
+            isSubmitting: observable,
+            isSubmitted: observable,
+            isSubmitSuccessful: observable,
+            submitCount: observable,
+            disabled: computed,
+            fieldState: observable.deep,
+            isDirty: computed,
+            isValid: computed,
+            snapshot: computed,
+            register: action,
+            unregister: action,
+            setValue: action,
+            mutate: action,
+            setError: action,
+            clearErrors: action,
+            trigger: action,
+            handleSubmit: action,
+            reset: action,
+            resetField: action,
+            setFocus: action,
+        });
+    }
+    /**
+     * Whether registered event handlers ignore changes and blur events.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#disabled)
+     */
+    get disabled() { return this.options.disabled; }
+    /**
+     * Whether any field is dirty.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#isdirty)
+     */
+    get isDirty() { return Object.keys(this.dirtyFields).length > 0; }
+    /**
+     * Whether the form has no errors.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#isvalid)
+     */
+    get isValid() { return Object.keys(this.errors).length === 0; }
+    /**
+     * Registers a field and returns its ref and event handlers.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#registername-options)
+     */
+    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);
+        }
+        this.ensureFieldState(path);
+        return {
+            name: path,
+            ref,
+            onChange: async (eventOrValue) => {
+                if (this.disabled)
+                    return;
+                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 () => {
+                if (this.disabled)
+                    return;
+                this.markTouched(path);
+                if (this.options.mode === 'onBlur' || this.options.mode === 'all' || (path in this.errors && this.options.reValidateMode === 'onBlur'))
+                    await this.trigger(path);
+            },
+        };
+    }
+    /**
+     * Removes a field, its value, and its associated state.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#unregistername)
+     */
+    unregister(name) {
+        const path = name;
+        this.fieldValidationVersions.set(path, (this.fieldValidationVersions.get(path) ?? 0) + 1);
+        deleteAtPath(this.values, path);
+        delete this.errors[path];
+        delete this.dirtyFields[path];
+        delete this.touchedFields[path];
+        delete this.validatingFields[path];
+        delete this.fieldState[path];
+        this.fieldOptions.delete(path);
+        this.refs.delete(path);
+    }
+    /**
+     * Updates a field value and optionally changes its state or validates it.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#setvaluename-value-config)
+     */
+    setValue(name, value, config = {}) {
+        const path = name;
+        setAtPath(this.values, path, value);
+        this.applyValueChange(path, config);
+    }
+    /**
+     * Groups direct value changes and processes their changed paths together.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#mutatemutator-config)
+     */
+    mutate(mutator, config = {}) {
+        this.ensureValueObservers();
+        this.changedPaths.clear();
+        this.isMutating = true;
+        try {
+            mutator();
+        }
+        finally {
+            this.isMutating = false;
+        }
+        this.scheduleObserverCleanup();
+        const paths = [...this.changedPaths];
+        for (const path of paths)
+            this.applyValueChange(path, { ...config, shouldValidate: false });
+        if (paths.length && (config.shouldValidate ?? true)) {
+            void this.trigger(paths);
+        }
+        if (this.observerTreeChanged) {
+            this.disposeValueObservers();
+            this.observerTreeChanged = false;
+            this.ensureValueObservers();
+        }
+    }
+    applyValueChange(path, config) {
+        if (config.shouldDirty ?? true)
+            this.updateDirty(path);
+        if (config.shouldTouch)
+            this.markTouched(path);
+        if (config.shouldValidate)
+            void this.trigger(path);
+    }
+    ensureValueObservers() {
+        if (!this.valueObservers || this.observerTreeChanged) {
+            this.disposeValueObservers();
+            this.valueObservers = [];
+            this.observeValueTree(this.values, '', this.valueObservers);
+            this.observerTreeChanged = false;
+        }
+        this.scheduleObserverCleanup();
+    }
+    scheduleObserverCleanup() {
+        if (this.observerTimer)
+            clearTimeout(this.observerTimer);
+        this.observerTimer = setTimeout(() => this.disposeValueObservers(), 10 * 60 * 1000);
+        const timer = this.observerTimer;
+        timer.unref?.();
+    }
+    disposeValueObservers() {
+        for (const dispose of this.valueObservers ?? [])
+            dispose();
+        this.valueObservers = undefined;
+        this.observerTimer = undefined;
+    }
+    observeValueTree(value, basePath, disposers) {
+        if (!value || typeof value !== 'object')
+            return;
+        if (Array.isArray(value)) {
+            disposers.push(observe(value, (change) => {
+                if (change.type === 'splice')
+                    this.observerTreeChanged = true;
+                if (this.isMutating && basePath)
+                    this.changedPaths.add(basePath);
+            }));
+        }
+        else {
+            disposers.push(observe(value, (change) => {
+                if (change.type === 'update' && (typeof change.newValue === 'object' || typeof change.oldValue === 'object')) {
+                    this.observerTreeChanged = true;
+                }
+                if (!this.isMutating)
+                    return;
+                const path = basePath ? `${basePath}.${String(change.name)}` : String(change.name);
+                if (path)
+                    this.changedPaths.add(path);
+            }));
+        }
+        for (const [key, child] of Object.entries(value)) {
+            this.observeValueTree(child, basePath ? `${basePath}.${key}` : key, disposers);
+        }
+    }
+    /**
+     * Sets an error for a field.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#seterrorname-error)
+     */
+    setError(name, error) {
+        this.applyError(name, error);
+    }
+    /**
+     * Clears one, several, or all field errors.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#clearerrorsname)
+     */
+    clearErrors(name) {
+        if (!name) {
+            this.errors = {};
+            for (const state of Object.values(this.fieldState))
+                if (state)
+                    this.applyFieldState(state, undefined);
+            return;
+        }
+        for (const path of Array.isArray(name) ? name : [name])
+            this.applyError(path, undefined);
+    }
+    /**
+     * Validates one field, several fields, or the complete form.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#triggername)
+     */
+    async trigger(name) {
+        const paths = name ? (Array.isArray(name) ? name : [name]).map(String) : undefined;
+        const run = ++this.validationVersion;
+        const fieldVersions = new Map();
+        for (const path of paths ?? this.fieldOptions.keys()) {
+            if (this.fieldOptions.has(path))
+                fieldVersions.set(path, this.fieldValidationVersions.get(path) ?? 0);
+        }
+        for (const path of paths ?? this.fieldOptions.keys()) {
+            this.validatingFields[path] = true;
+            this.ensureFieldState(path).isValidating = true;
+        }
+        try {
+            const schemaErrors = await this.validateSchema();
+            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...Object.keys(this.errors), ...Object.keys(schemaErrors)])];
+            runInAction(() => {
+                for (const path of validationPaths) {
+                    if (schemaErrors[path] && this.isValidationCurrent(path, run, fieldVersions)) {
+                        this.applyError(path, schemaErrors[path]);
+                    }
+                }
+            });
+            for (const path of validationPaths) {
+                const ruleError = await this.validateRules(path);
+                runInAction(() => {
+                    if (this.isValidationCurrent(path, run, fieldVersions)) {
+                        if (ruleError)
+                            this.applyError(path, ruleError);
+                        else if (schemaErrors[path])
+                            this.applyError(path, schemaErrors[path]);
+                        else
+                            this.applyError(path, undefined);
+                    }
+                });
+            }
+            return (paths ?? Object.keys(this.errors)).every((path) => !this.errors[path]);
+        }
+        finally {
+            runInAction(() => {
+                if (this.validationVersion === run) {
+                    for (const path of paths ?? this.fieldOptions.keys()) {
+                        if (!this.isValidationCurrent(path, run, fieldVersions))
+                            continue;
+                        delete this.validatingFields[path];
+                        this.ensureFieldState(path).isValidating = false;
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Creates an asynchronous submit handler with validation and result callbacks.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#handlesubmithandlers)
+     */
+    handleSubmit({ onValid, onInvalid }) {
+        return async () => {
+            this.activeSubmissions += 1;
+            this.isSubmitting = true;
+            this.isSubmitted = true;
+            this.submitCount += 1;
+            const submissionResetVersion = this.resetVersion;
+            try {
+                const valid = await this.trigger();
+                if (valid) {
+                    await onValid(this.snapshot, this);
+                    runInAction(() => {
+                        if (this.resetVersion === submissionResetVersion)
+                            this.isSubmitSuccessful = true;
+                    });
+                }
+                else {
+                    await onInvalid?.(this.errors, this);
+                    runInAction(() => {
+                        if (this.resetVersion === submissionResetVersion)
+                            this.isSubmitSuccessful = false;
+                    });
+                }
+            }
+            finally {
+                runInAction(() => {
+                    this.activeSubmissions -= 1;
+                    this.isSubmitting = this.activeSubmissions > 0;
+                });
+            }
+        };
+    }
+    /**
+     * Resets values and selected form state.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#resetvalues-options)
+     */
+    reset(values, options = {}) {
+        this.disposeValueObservers();
+        this.resetVersion += 1;
+        this.validationVersion += 1;
+        for (const path of Object.keys(this.validatingFields)) {
+            delete this.validatingFields[path];
+            const state = this.fieldState[path];
+            if (state)
+                state.isValidating = false;
+        }
+        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 = {};
+            for (const state of Object.values(this.fieldState))
+                if (state)
+                    this.applyFieldState(state, undefined);
+        }
+        if (!options.keepIsSubmitted) {
+            this.isSubmitted = false;
+            this.isSubmitSuccessful = false;
+        }
+        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];
+            }
+    }
+    /**
+     * Resets one field to its current default value and clears its state.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#resetfieldname)
+     */
+    resetField(name) {
+        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];
+        delete this.dirtyFields[path];
+        delete this.touchedFields[path];
+        delete this.validatingFields[path];
+        const state = this.ensureFieldState(path);
+        this.applyFieldState(state, undefined);
+        state.isDirty = false;
+        state.isTouched = false;
+        state.isValidating = false;
+    }
+    /**
+     * Focuses a registered field when its ref points to a focusable element.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#setfocusname)
+     */
+    setFocus(name) { this.refs.get(name)?.current?.focus(); }
+    /**
+     * Returns a plain copy of the current values.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#snapshot)
+     */
+    get snapshot() { return clone(this.values); }
+    markTouched(path) {
+        this.touchedFields[path] = true;
+        this.ensureFieldState(path).isTouched = true;
+    }
+    updateDirty(path) {
+        if (isEqual(getAtPath(this.values, path), getAtPath(this.defaultValues, path)))
+            delete this.dirtyFields[path];
+        else
+            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'); }
+    isValidationCurrent(path, run, fieldVersions) {
+        if (this.validationVersion !== run)
+            return false;
+        const version = fieldVersions.get(path);
+        return version === undefined
+            || (this.fieldOptions.has(path) && (this.fieldValidationVersions.get(path) ?? 0) === version);
+    }
+    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 schema = this.options.schema;
+        if ('safeParseAsync' in schema) {
+            const result = await schema.safeParseAsync(this.snapshot);
+            if (result.success)
+                return {};
+            return this.normalizeSchemaErrors(result.error);
+        }
+        const result = await schema['~run']({ value: this.snapshot, typed: false }, {});
+        if (!result.issues?.length)
+            return {};
+        return this.normalizeSchemaErrors({ issues: result.issues });
+    }
+    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 };
+            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) {
+            let result;
+            try {
+                result = await rules.validate(value, this.snapshot);
+            }
+            catch {
+                return { type: 'validate', message: 'Validation failed' };
+            }
+            if (result !== true)
+                return { type: 'validate', message: typeof result === 'string' ? result : undefined };
+        }
+        return undefined;
+    }
+    ensureFieldState(path) {
+        return (this.fieldState[path] ??= { invalid: false, isDirty: false, isTouched: false, isValidating: false });
+    }
+    applyFieldState(state, error) {
+        state.error = error;
+        state.invalid = !!error;
+    }
+    applyError(path, error) {
+        if (error)
+            this.errors[path] = error;
+        else
+            delete this.errors[path];
+        this.applyFieldState(this.ensureFieldState(path), error);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Form } from './form.js';
+export { createForm } from './create-form.js';
+export type { InferredFormValues } from './create-form.js';
+export type { FieldError, FieldErrors, FieldPath, FieldPathValue, FieldState, FieldStateTree, FieldValues, FormOptions, FormSchema, SafeParseFormSchema, SchemaIssue, SchemaOutput, SchemaResult, ValibotFormSchema, ValibotRunResult, RegisterOptions, RegisterReturn, ResetOptions, SetValueConfig, SubmitHandlers, } from './types.js';

package/dist/index.js

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

package/dist/src/form.d.ts

@@ -0,0 +1,48 @@
+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;
+}