mobx-formly 0.0.3 → 0.1.0

package/dist/validation.js

@@ -0,0 +1,232 @@
+import { findErrorAtPath, setAtPath } from './utils.js';
+/**
+ * Schema, resolver, and rule validation with error delivery for Form.
+ *
+ * Runs Zod-like, Valibot, and Standard Schema contracts or a custom resolver,
+ * checks registration rules with firstError or all criteria modes, relays
+ * messages to native DOM validity, and can delay error display.
+ */
+export class FormValidator {
+    host;
+    delayedErrorTimers = new Map();
+    delayedErrors = new Map();
+    constructor(host) {
+        this.host = host;
+    }
+    /** Validates values with the resolver or schema and returns nested errors and resolver output. */
+    async resolveSchemaErrors(paths) {
+        const options = this.host.options;
+        if (options.resolver) {
+            const result = await options.resolver(this.host.snapshot(), options.context, {
+                criteriaMode: options.criteriaMode,
+                fields: Object.fromEntries(this.host.fieldOptions),
+                names: paths,
+                shouldUseNativeValidation: options.shouldUseNativeValidation,
+            });
+            return { errors: result.errors, values: this.resolverResultValues(result) };
+        }
+        if (!options.schema)
+            return { errors: {} };
+        const schema = options.schema;
+        if ('safeParseAsync' in schema) {
+            const result = await schema.safeParseAsync(this.host.snapshot());
+            if (result.success)
+                return { errors: {}, values: result.data };
+            return { errors: this.normalizeSchemaErrors(result.error) };
+        }
+        if ('~standard' in schema) {
+            const result = await schema['~standard'].validate(this.host.snapshot());
+            if ('value' in result && !result.issues)
+                return { errors: {}, values: result.value };
+            return { errors: this.normalizeSchemaErrors({ issues: result.issues ?? [] }) };
+        }
+        const result = await schema['~run']({ value: this.host.snapshot(), typed: false }, {});
+        if (!result.issues?.length)
+            return { errors: {}, values: result.value };
+        return { errors: this.normalizeSchemaErrors({ issues: result.issues }) };
+    }
+    /** Checks registration rules for one field and returns the failing error if any. */
+    async validateRules(path) {
+        const rules = this.host.fieldOptions.get(path);
+        if (!rules)
+            return undefined;
+        const value = this.host.valueAt(path);
+        const firstOnly = this.host.options.criteriaMode !== 'all';
+        const failures = [];
+        /** Collects a failure; in firstError mode short-circuits validation like RHF. */
+        const add = (type, messages) => {
+            for (const message of messages)
+                failures.push({ type, ...(message !== undefined ? { message } : {}) });
+            return firstOnly && failures.length ? failures[0] : undefined;
+        };
+        let stop;
+        if (rules.required && (value === undefined || value === null || value === '')) {
+            stop = add('required', [typeof rules.required === 'string' ? rules.required : undefined]);
+            if (stop)
+                return stop;
+        }
+        if (rules.minLength && String(value ?? '').length < rules.minLength.value) {
+            stop = add('minLength', [rules.minLength.message]);
+            if (stop)
+                return stop;
+        }
+        if (rules.maxLength && String(value ?? '').length > rules.maxLength.value) {
+            stop = add('maxLength', [rules.maxLength.message]);
+            if (stop)
+                return stop;
+        }
+        if (rules.min && Number(value) < rules.min.value) {
+            stop = add('min', [rules.min.message]);
+            if (stop)
+                return stop;
+        }
+        if (rules.max && Number(value) > rules.max.value) {
+            stop = add('max', [rules.max.message]);
+            if (stop)
+                return stop;
+        }
+        if (rules.pattern && !rules.pattern.value.test(String(value ?? ''))) {
+            stop = add('pattern', [rules.pattern.message]);
+            if (stop)
+                return stop;
+        }
+        if (rules.validate && (!firstOnly || !failures.length)) {
+            const validators = typeof rules.validate === 'function' ? { validate: rules.validate } : rules.validate;
+            for (const [type, validate] of Object.entries(validators)) {
+                let result;
+                try {
+                    result = await validate(value, this.host.snapshot());
+                }
+                catch {
+                    result = 'Validation failed';
+                }
+                if (result === true || result === undefined)
+                    continue;
+                const messages = Array.isArray(result) ? result : [typeof result === 'string' ? result : undefined];
+                if (!messages.length)
+                    continue;
+                stop = add(type, messages);
+                if (stop)
+                    return stop;
+            }
+        }
+        if (!failures.length)
+            return undefined;
+        return {
+            type: failures[0].type,
+            message: failures[0].message,
+            types: this.collectRuleTypes(failures),
+        };
+    }
+    /** Groups rule failures into the types map; repeated messages of one rule become arrays. */
+    collectRuleTypes(failures) {
+        const types = {};
+        for (const failure of failures) {
+            const message = failure.message ?? true;
+            const current = types[failure.type];
+            if (current === undefined) {
+                types[failure.type] = message;
+            }
+            else if (Array.isArray(current)) {
+                if (typeof message === 'string' && !current.includes(message))
+                    current.push(message);
+            }
+            else if (current !== message && typeof current === 'string' && typeof message === 'string') {
+                types[failure.type] = [current, message];
+            }
+        }
+        return types;
+    }
+    /** Combines schema and rule errors for a field according to the criteria mode. */
+    mergeErrors(schemaError, ruleError) {
+        if (!schemaError)
+            return ruleError;
+        if (!ruleError)
+            return schemaError;
+        if (this.host.options.criteriaMode !== 'all')
+            return ruleError;
+        return {
+            ...schemaError,
+            types: { ...(schemaError.types ?? { [schemaError.type]: schemaError.message || true }), ...(ruleError.types ?? { [ruleError.type]: ruleError.message || true }) },
+        };
+    }
+    /** Delivers a validated error, respecting the delay option and native validity reporting. */
+    applyValidationError(path, error) {
+        const timer = this.delayedErrorTimers.get(path);
+        if (timer)
+            clearTimeout(timer);
+        this.delayedErrorTimers.delete(path);
+        this.applyNativeValidity(path, error);
+        if (error && this.host.options.delayError && this.host.options.delayError > 0) {
+            this.delayedErrors.set(path, error);
+            const next = setTimeout(() => {
+                this.delayedErrorTimers.delete(path);
+                this.delayedErrors.delete(path);
+                this.host.applyError(path, error);
+            }, this.host.options.delayError);
+            this.delayedErrorTimers.set(path, next);
+            return;
+        }
+        this.delayedErrors.delete(path);
+        this.host.applyError(path, error);
+    }
+    /** Applies a pending delayed error immediately, for example on blur. */
+    flushDelayed(path) {
+        const timer = this.delayedErrorTimers.get(path);
+        if (!timer)
+            return;
+        clearTimeout(timer);
+        this.delayedErrorTimers.delete(path);
+        const error = this.delayedErrors.get(path);
+        this.delayedErrors.delete(path);
+        if (error)
+            this.host.applyError(path, error);
+    }
+    /** Drops a pending delayed error without applying it. */
+    cancelDelayed(path) {
+        const timer = this.delayedErrorTimers.get(path);
+        if (timer)
+            clearTimeout(timer);
+        this.delayedErrorTimers.delete(path);
+        this.delayedErrors.delete(path);
+    }
+    /** Drops all pending delayed errors without applying them. */
+    cancelAllDelayed() {
+        for (const timer of this.delayedErrorTimers.values())
+            clearTimeout(timer);
+        this.delayedErrorTimers.clear();
+        this.delayedErrors.clear();
+    }
+    resolverResultValues(result) {
+        return Object.keys(result.errors).length === 0 ? result.values : undefined;
+    }
+    normalizeSchemaErrors(error) {
+        const collectAll = this.host.options.criteriaMode === 'all';
+        return error.issues.reduce((errors, issue) => {
+            const path = (issue.path ?? []).map((part) => String(typeof part === 'object' && 'key' in part ? part.key : part)).join('.') || 'root';
+            const typedIssue = issue;
+            const type = typedIssue.code ?? typedIssue.type ?? 'validation';
+            const current = findErrorAtPath(errors, path);
+            if (!current) {
+                setAtPath(errors, path, collectAll
+                    ? { type, message: issue.message, types: { [type]: issue.message || true } }
+                    : { type, message: issue.message });
+            }
+            else if (collectAll) {
+                // Errors at this path are created by this method, so in-place mutation is safe.
+                const types = current.types ?? (current.types = {});
+                types[type] = issue.message || true;
+            }
+            return errors;
+        }, {});
+    }
+    applyNativeValidity(path, error) {
+        if (!this.host.options.shouldUseNativeValidation)
+            return;
+        const ref = this.host.refs.get(path)?.current;
+        if (!ref?.setCustomValidity || !ref.reportValidity)
+            return;
+        ref.setCustomValidity(error?.message ?? '');
+        ref.reportValidity();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-formly",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Framework-agnostic observable forms for MobX with granular field state and Zod or Valibot validation",
   "homepage": "https://js2me.github.io/mobx-formly/",
   "repository": {
@@ -65,8 +65,16 @@
   },
   "devDependencies": {
     "@changesets/cli": "^3.0.1",
+    "@types/node": "^22.20.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@types/react-test-renderer": "^19.3.0",
     "@vitest/coverage-v8": "^4.1.11",
     "docusite": "^0.2.0",
+    "mobx-react-lite": "^4.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-test-renderer": "^19.3.0",
     "tsx": "^4.23.12",
     "typescript": "^7.0.2",
     "valibot": "^1.4.2",
@@ -77,7 +85,7 @@
     "build": "tsc -p tsconfig.json",
     "check": "tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
-    "test:performance": "vitest run tests/performance",
+    "test:performance": "vitest run tests/performance --reporter=verbose --silent=false",
     "test:coverage": "vitest run --coverage",
     "test:types": "tsc --noEmit -p tsconfig.types.json",
     "docs:dev": "docusite dev",