mobx-formly 0.0.1 → 0.0.2

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;
-};

package/dist/types.d.ts

@@ -1,132 +0,0 @@
-import type { Ref } from 'yummies/mobx';
-export type FieldValues = Record<string, unknown>;
-export interface SchemaIssue {
-    code?: string;
-    type?: string;
-    path?: Array<PropertyKey | {
-        key: PropertyKey;
-    }>;
-    message: string;
-}
-export type SchemaResult<T> = {
-    success: true;
-    data: T;
-} | {
-    success: false;
-    error: {
-        issues: SchemaIssue[];
-    };
-};
-/** Safe-parse-compatible schema contract. */
-export interface SafeParseFormSchema<T> {
-    safeParseAsync(value: unknown): Promise<SchemaResult<T>>;
-}
-/** Valibot-compatible schema contract. */
-export interface ValibotFormSchema<T> {
-    readonly '~types'?: {
-        readonly output: T;
-    };
-    '~run': (...args: any[]) => any;
-}
-export interface ValibotRunResult<T> {
-    success?: boolean;
-    value?: T;
-    issues?: SchemaIssue[];
-}
-/** Schema contract accepted by Form. Both Zod and Valibot schemas fit this interface. */
-export type FormSchema<T> = SafeParseFormSchema<T> | ValibotFormSchema<T>;
-export type SchemaOutput<S> = S extends SafeParseFormSchema<infer T> ? T : S extends {
-    readonly '~types'?: {
-        readonly output: infer T;
-    };
-} ? T : never;
-/** Dot-separated path into the form value tree, for example `user.email`. */
-export type FieldPath<T = FieldValues> = 'root' | {
-    [K in Extract<keyof T, string>]: T[K] extends readonly unknown[] ? T[K] extends readonly (infer I)[] ? I extends object ? K | `${K}.${number}` | `${K}.${number}.${FieldPath<I>}` : K | `${K}.${number}` : K : T[K] extends object ? K | `${K}.${FieldPath<T[K]>}` : K;
-}[Extract<keyof T, string>];
-export type FieldPathValue<T, P extends string> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? FieldPathValue<T[K], Rest> : T extends readonly (infer I)[] ? FieldPathValue<I, Rest> : never : P extends keyof T ? T[P] : T extends readonly (infer I)[] ? P extends `${number}` ? I : never : never;
-export interface FieldError {
-    type: string;
-    message?: string;
-}
-export type FieldErrors<T extends FieldValues = FieldValues> = Record<string, FieldError | undefined>;
-export interface FieldState {
-    invalid: boolean;
-    isDirty: boolean;
-    isTouched: boolean;
-    isValidating: boolean;
-    error?: FieldError;
-}
-export type FieldStateTree<T extends FieldValues = FieldValues> = Record<string, FieldState | undefined>;
-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?: FormSchema<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/types.js

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

package/dist/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/utils.js

@@ -1,60 +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 [index, key] of keys.slice(0, -1).entries()) {
-        if (isUnsafeProperty(key))
-            return;
-        const next = current[key];
-        const nextKey = keys[index + 1];
-        if (!next || typeof next !== 'object')
-            current[key] = /^\d+$/.test(nextKey) ? [] : {};
-        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 && typeof HTMLSelectElement !== 'undefined' && target instanceof HTMLSelectElement) {
-        return Array.from(target.selectedOptions, (option) => option.value);
-    }
-    return target.value;
-};