@madojs/mado 0.12.0 → 0.13.1

package/dist/src/forms.js

@@ -1,456 +1,246 @@
 /**
- * Forms without pain. Built on native `<form>` submit/input events plus a
- * small schema validator whose rules mirror common HTML constraints.
- *
- *   const f = useForm({
- *     email: { required: true, type: 'email' },
- *     age:   { min: 18 },
- *   });
- *
- *   html`
- *     <form @submit=${f.onSubmit(async values => { await save(values) })}>
- *       <input name="email" .value=${() => f.values().email ?? ''}
- *              @input=${f.onInput} />
- *       ${() => f.errors().email ? html`<err>${f.errors().email}</err>` : null}
- *
- *       <input name="age" type="number" .value=${() => f.values().age ?? ''}
- *              @input=${f.onInput} />
- *
- *       <button ?disabled=${() => !f.isValid() || f.submitting()}>Save</button>
- *     </form>
- *   `;
- *
- * What's inside:
- *   - validation rules mirror common HTML constraints
- *     (required, min, max, pattern, type=email/url/number, etc.);
- *   - custom rules via a validate(values) function returning
- *     { field: 'msg' } or null;
- *   - all fields are automatically "touched" on blur — errors
- *     are shown only after user interaction;
- *   - submit() is aborted if the form is invalid.
- *
- * No Yup/Zod/Formik dependencies. If you really want them —
- * pass your own validate(values) and wire it to anything.
+ * Typed form state over the browser's native form and constraint-validation
+ * model. HTML owns required/type/min/max/pattern; Mado owns reactive state,
+ * touched/dirty flags, async validation cancellation and submit state.
  */
-import { signal, computed } from "./signal.js";
-export function useForm(schema, options = {}) {
-    const defaults = () => {
-        const out = {};
-        for (const k in schema) {
-            const s = schema[k];
-            if (s.default !== undefined)
-                out[k] = cloneFormValue(s.default);
-        }
-        return out;
-    };
-    const values = signal(defaults());
+import { computed, signal } from "./signal.js";
+import { reportError } from "./diagnostics.js";
+export function useForm(options) {
+    let initial = cloneValues(options.initial);
+    const values = signal(cloneValues(initial));
+    const nativeErrors = signal({});
+    const customErrors = signal({});
     const touched = signal({});
     const submitting = signal(false);
-    const asyncErrors = signal({});
-    const validatingFields = signal({});
-    const validating = computed(() => Object.keys(validatingFields()).length > 0);
-    const fieldRuns = new Map();
-    let formRun = 0;
-    let formAsyncPaths = [];
-    const syncErrors = computed(() => {
-        const v = values();
-        const out = {};
-        for (const pattern in schema) {
-            const s = schema[pattern];
-            const paths = expandSchemaPath(v, pattern);
-            for (const name of paths)
-                validateSyncField(out, s, v, name);
-        }
-        if (options.validate) {
-            const custom = options.validate(v);
-            if (custom)
-                Object.assign(out, custom);
-        }
-        return out;
-    });
+    const validating = signal(false);
     const errors = computed(() => ({
-        ...syncErrors(),
-        ...asyncErrors(),
+        ...nativeErrors(),
+        ...customErrors(),
     }));
+    const dirty = computed(() => !sameValues(values(), initial));
     const isValid = computed(() => Object.keys(errors()).length === 0);
-    function validateSyncField(out, s, v, name) {
-        const raw = getPath(v, name);
-        const isEmpty = raw === undefined || raw === "" || raw === null;
-        if (s.required && isEmpty) {
-            out[name] = "required field";
-            return;
-        }
-        if (isEmpty)
-            return;
-        if (s.type === "email" && typeof raw === "string") {
-            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(raw))
-                out[name] = "invalid email";
-        }
-        else if (s.type === "url" && typeof raw === "string") {
-            try {
-                new URL(raw);
-            }
-            catch {
-                out[name] = "invalid URL";
-            }
-        }
-        else if (s.type === "number") {
-            const n = Number(raw);
-            if (Number.isNaN(n))
-                out[name] = "must be a number";
-            else {
-                if (s.min !== undefined && n < s.min)
-                    out[name] = `minimum ${s.min}`;
-                if (s.max !== undefined && n > s.max)
-                    out[name] = `maximum ${s.max}`;
-            }
-        }
-        if (typeof raw === "string") {
-            if (s.minLength !== undefined && raw.length < s.minLength) {
-                out[name] = `minimum ${s.minLength} characters`;
-            }
-            if (s.maxLength !== undefined && raw.length > s.maxLength) {
-                out[name] = `maximum ${s.maxLength} characters`;
-            }
-            if (s.pattern && !new RegExp(s.pattern).test(raw)) {
-                out[name] = "invalid format";
-            }
-        }
-        if (s.validate) {
-            const custom = s.validate(raw, v, name);
-            if (custom)
-                out[name] = custom;
-        }
-    }
-    const setFieldValidating = (name, enabled) => {
-        validatingFields.update((m) => {
-            if (enabled)
-                return { ...m, [name]: true };
-            const next = { ...m };
-            delete next[name];
-            return next;
-        });
+    let lastForm = null;
+    let validationController = null;
+    let validationRun = 0;
+    let activeSubmits = 0;
+    const rememberForm = (event, control) => {
+        const current = event.currentTarget;
+        if (isForm(current))
+            lastForm = current;
+        else if (control?.form)
+            lastForm = control.form;
     };
-    const setAsyncErrors = (clearPaths, nextErrors) => {
-        asyncErrors.update((prev) => {
-            const next = { ...prev };
-            for (const path of clearPaths)
-                delete next[path];
-            for (const [path, message] of Object.entries(nextErrors)) {
-                if (message)
-                    next[path] = message;
-                else
-                    delete next[path];
-            }
-            return next;
-        });
+    const setField = (name, value) => {
+        values.update((current) => ({ ...current, [name]: value }));
+        customErrors.update((current) => withoutKey(current, name));
     };
-    const clearAsyncPrefix = (prefix) => {
-        asyncErrors.update((prev) => clearRecordPrefix(prev, prefix));
-    };
-    // Invalidate every in-flight async validation whose path is at or under
-    // `prefix`. Bumping the generation makes a stale validateField() see
-    // fieldRuns.get(name) !== run in its finally and skip writing its result —
-    // otherwise a result for e.g. "items.2.title" would land on a row that an
-    // array mutation (remove/move/replace) has since shifted. (FABLE_REPORT #5)
-    const invalidateRunsPrefix = (prefix) => {
-        const dotted = `${prefix}.`;
-        for (const name of fieldRuns.keys()) {
-            if (name === prefix || name.startsWith(dotted)) {
-                fieldRuns.set(name, (fieldRuns.get(name) ?? 0) + 1);
-                setFieldValidating(name, false);
-            }
+    const validate = async (form = lastForm) => {
+        if (form)
+            lastForm = form;
+        validationController?.abort();
+        const controller = new AbortController();
+        validationController = controller;
+        const run = ++validationRun;
+        const nextNative = {};
+        for (const control of controlsOf(form)) {
+            const message = nativeValidationMessage(control);
+            if (message)
+                nextNative[control.name] = message;
         }
-    };
-    const validateField = async (name) => {
-        const matching = Object.entries(schema).filter(([pattern, s]) => s.validateAsync && schemaPathMatches(pattern, name));
-        const run = (fieldRuns.get(name) ?? 0) + 1;
-        fieldRuns.set(name, run);
-        setAsyncErrors([name], {});
-        if (matching.length === 0)
-            return !errors.peek()[name];
-        setFieldValidating(name, true);
-        const snapshot = values.peek();
-        const next = {};
+        nativeErrors.set(nextNative);
+        if (!options.validate) {
+            if (validationController === controller)
+                validationController = null;
+            return Object.keys(nextNative).length === 0;
+        }
+        validating.set(true);
         try {
-            for (const [, s] of matching) {
-                const message = await s.validateAsync(getPath(snapshot, name), snapshot, name);
-                if (message) {
-                    next[name] = message;
-                    break;
-                }
-            }
+            const result = await options.validate(values.peek(), {
+                signal: controller.signal,
+                form,
+            });
+            if (controller.signal.aborted || run !== validationRun)
+                return false;
+            customErrors.set(result ?? {});
+            return Object.keys({ ...nextNative, ...(result ?? {}) }).length === 0;
         }
-        catch (err) {
-            next[name] = "validation failed";
-            // eslint-disable-next-line no-console
-            console.error("[mado] field validator threw:", err);
+        catch (error) {
+            if (controller.signal.aborted || run !== validationRun)
+                return false;
+            customErrors.set({ $form: "validation failed" });
+            reportError("forms", "validator", "form validator threw", error);
+            return false;
         }
         finally {
-            if (fieldRuns.get(name) === run) {
-                setAsyncErrors([name], next);
-                setFieldValidating(name, false);
-            }
-        }
-        return !errors.peek()[name];
-    };
-    const validateAll = async () => {
-        const run = ++formRun;
-        if (Object.keys(syncErrors.peek()).length > 0)
-            return false;
-        if (options.validateAsync)
-            setFieldValidating("$form", true);
-        const snapshot = values.peek();
-        const paths = concreteSchemaPaths(snapshot, schema);
-        await Promise.all(paths.map((path) => validateField(path)));
-        if (options.validateAsync) {
-            try {
-                const custom = await options.validateAsync(values.peek());
-                if (formRun === run) {
-                    setAsyncErrors(formAsyncPaths, custom ?? {});
-                    formAsyncPaths = Object.keys(custom ?? {});
-                }
+            if (run === validationRun) {
+                validating.set(false);
+                validationController = null;
             }
-            catch (err) {
-                if (formRun === run) {
-                    setAsyncErrors(formAsyncPaths, { $form: "validation failed" });
-                    formAsyncPaths = ["$form"];
-                }
-                // eslint-disable-next-line no-console
-                console.error("[mado] form validator threw:", err);
-            }
-            finally {
-                if (formRun === run)
-                    setFieldValidating("$form", false);
-            }
-        }
-        return Object.keys(errors.peek()).length === 0;
-    };
-    const readField = (el) => {
-        if (el instanceof HTMLInputElement) {
-            if (el.type === "checkbox")
-                return el.checked;
-            if (el.type === "number")
-                return el.value === "" ? "" : Number(el.value);
         }
-        return el.value;
     };
     const api = {
         values,
         errors,
         touched,
+        dirty,
         submitting,
         validating,
-        validatingFields,
         isValid,
-        onInput(e) {
-            const t = e.target;
-            if (!t.name)
+        onInput(event) {
+            const control = controlFromEvent(event);
+            if (!control?.name)
                 return;
-            api.setField(t.name, readField(t));
-            void validateField(t.name);
+            rememberForm(event, control);
+            const name = control.name;
+            setField(name, readControlValue(control, values.peek()[name], lastForm));
+            const message = nativeValidationMessage(control);
+            nativeErrors.update((current) => message ? { ...current, [name]: message } : withoutKey(current, name));
         },
-        onBlur(e) {
-            const t = e.target;
-            if (!t.name)
+        onBlur(event) {
+            const control = controlFromEvent(event);
+            if (!control?.name)
                 return;
-            touched.update((m) => ({ ...m, [t.name]: true }));
+            rememberForm(event, control);
+            touched.update((current) => ({ ...current, [control.name]: true }));
         },
         onSubmit(handler) {
-            return (e) => {
-                e.preventDefault();
-                // mark all fields as touched to show all errors
-                const all = {};
-                for (const k in schema)
-                    all[k] = true;
-                for (const k of concreteSchemaPaths(values.peek(), schema))
-                    all[k] = true;
-                touched.set(all);
+            return (event) => {
+                event.preventDefault();
+                const form = isForm(event.currentTarget) ? event.currentTarget : lastForm;
+                if (form)
+                    lastForm = form;
+                const allTouched = { ...touched.peek() };
+                for (const control of controlsOf(form))
+                    allTouched[control.name] = true;
+                touched.set(allTouched);
                 void (async () => {
-                    if (!(await validateAll()))
+                    if (!(await validate(form))) {
+                        form?.reportValidity?.();
                         return;
+                    }
+                    activeSubmits++;
                     submitting.set(true);
                     try {
-                        await handler(values.peek());
+                        await handler(values.peek(), event);
                     }
-                    catch (err) {
-                        // eslint-disable-next-line no-console
-                        console.error("[mado] form submit threw:", err);
+                    catch (error) {
+                        reportError("forms", "submit", "form submit threw", error);
                     }
                     finally {
-                        submitting.set(false);
+                        activeSubmits--;
+                        submitting.set(activeSubmits > 0);
                     }
                 })();
             };
         },
-        setField(name, value) {
-            values.update((v) => setPath(v, name, value));
-            setAsyncErrors([name], {});
-        },
-        validateField,
-        validate: validateAll,
-        array(name) {
-            const read = () => {
-                // Use values() (tracked) — not values.peek() — so that effects and
-                // computed() that call items() re-run when the array changes via
-                // append/remove/replace/etc.
-                const value = getPath(values(), name);
-                return Array.isArray(value) ? value : [];
-            };
-            const write = (items) => {
-                values.update((v) => setPath(v, name, [...items]));
-                touched.update((m) => clearRecordPrefix(m, name));
-                clearAsyncPrefix(name);
-                // Array indices shifted — invalidate in-flight async validations under
-                // this array so their stale results don't land on the wrong row.
-                invalidateRunsPrefix(name);
-            };
-            const clamp = (index, length) => Math.max(0, Math.min(index, length));
-            return {
-                items: read,
-                path(index, field) {
-                    return field ? `${name}.${index}.${field}` : `${name}.${index}`;
-                },
-                append(value) {
-                    write([...read(), value]);
-                },
-                prepend(value) {
-                    write([value, ...read()]);
-                },
-                insert(index, value) {
-                    const items = read();
-                    const at = clamp(index, items.length);
-                    write([...items.slice(0, at), value, ...items.slice(at)]);
-                },
-                remove(index) {
-                    const items = read();
-                    if (index < 0 || index >= items.length)
-                        return;
-                    write(items.filter((_, i) => i !== index));
-                },
-                move(from, to) {
-                    const items = read();
-                    if (from < 0 || from >= items.length)
-                        return;
-                    const next = [...items];
-                    const [item] = next.splice(from, 1);
-                    next.splice(clamp(to, next.length), 0, item);
-                    write(next);
-                },
-                replace(items) {
-                    write(items);
-                },
-                set(index, value) {
-                    const items = read();
-                    if (index < 0 || index >= items.length)
-                        return;
-                    const next = [...items];
-                    next[index] = value;
-                    write(next);
-                },
-            };
-        },
-        reset() {
-            values.set(defaults());
+        setField,
+        reset(nextInitial) {
+            validationRun++;
+            validationController?.abort();
+            validationController = null;
+            validating.set(false);
+            if (nextInitial)
+                initial = cloneValues(nextInitial);
+            values.set(cloneValues(initial));
+            nativeErrors.set({});
+            customErrors.set({});
             touched.set({});
-            asyncErrors.set({});
-            validatingFields.set({});
-            formAsyncPaths = [];
-            submitting.set(false);
+            lastForm?.reset?.();
         },
+        validate,
     };
     return api;
 }
-function cloneFormValue(value) {
-    if (Array.isArray(value))
-        return value.map(cloneFormValue);
-    if (value && typeof value === "object") {
-        const out = {};
-        for (const [k, v] of Object.entries(value))
-            out[k] = cloneFormValue(v);
-        return out;
+function controlFromEvent(event) {
+    const path = event.composedPath?.() ?? [];
+    for (const candidate of path) {
+        if (isFormControl(candidate))
+            return candidate;
     }
-    return value;
+    return isFormControl(event.target) ? event.target : null;
 }
-function getPath(value, path) {
-    let current = value;
-    for (const part of splitPath(path)) {
-        if (current == null || typeof current !== "object")
-            return undefined;
-        current = current[part];
-    }
-    return current;
+function isFormControl(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const candidate = value;
+    return typeof candidate.name === "string" &&
+        ("value" in candidate || String(candidate.tagName).toLowerCase() === "select");
 }
-function setPath(root, path, value) {
-    return setPathParts(root, splitPath(path), value);
+function isForm(value) {
+    return !!value && typeof value === "object" &&
+        String(value.tagName).toLowerCase() === "form";
 }
-function setPathParts(current, parts, value) {
-    if (parts.length === 0)
-        return value;
-    const key = parts[0];
-    const rest = parts.slice(1);
-    const container = Array.isArray(current)
-        ? [...current]
-        : current && typeof current === "object"
-            ? { ...current }
-            : isArrayIndex(key)
-                ? []
-                : {};
-    container[key] = setPathParts(container[key], rest, value);
-    return container;
+function controlsOf(form) {
+    if (!form)
+        return [];
+    const elements = form.elements ? Array.from(form.elements) :
+        Array.from(form.querySelectorAll("input,select,textarea"));
+    return elements.filter(isFormControl);
 }
-function splitPath(path) {
-    return path.split(".").filter(Boolean);
+function nativeValidationMessage(control) {
+    if (typeof control.checkValidity !== "function")
+        return null;
+    return control.checkValidity()
+        ? null
+        : control.validationMessage || "Invalid value";
 }
-function isArrayIndex(value) {
-    return /^(0|[1-9]\d*)$/.test(value);
+function readControlValue(control, previous, form) {
+    if (isInput(control)) {
+        if (control.type === "checkbox") {
+            if (Array.isArray(previous)) {
+                return controlsOf(form)
+                    .filter((item) => isInput(item) && item.type === "checkbox" &&
+                    item.name === control.name && item.checked)
+                    .map((item) => item.value);
+            }
+            return control.checked;
+        }
+        if (control.type === "radio")
+            return control.checked ? control.value : previous;
+        if (control.type === "number" || control.type === "range") {
+            return control.value === "" ? "" : control.valueAsNumber;
+        }
+        if (control.type === "file") {
+            const files = Array.from(control.files ?? []);
+            return control.multiple ? files : files[0] ?? null;
+        }
+    }
+    if (isSelect(control) && control.multiple) {
+        return Array.from(control.selectedOptions, (option) => option.value);
+    }
+    return control.value;
 }
-function expandSchemaPath(values, pattern) {
-    if (!pattern.includes("*"))
-        return [pattern];
-    return expandParts(values, splitPath(pattern), []);
+function isInput(control) {
+    return String(control.tagName).toLowerCase() === "input";
 }
-function expandParts(current, parts, prefix) {
-    if (parts.length === 0)
-        return [prefix.join(".")];
-    const [part, ...rest] = parts;
-    if (part === "*") {
-        if (!Array.isArray(current))
-            return [];
-        return current.flatMap((item, index) => expandParts(item, rest, [...prefix, String(index)]));
-    }
-    const next = current && typeof current === "object"
-        ? current[part]
-        : undefined;
-    return expandParts(next, rest, [...prefix, part]);
+function isSelect(control) {
+    return String(control.tagName).toLowerCase() === "select";
 }
-function concreteSchemaPaths(values, schema) {
-    const paths = new Set();
-    for (const pattern in schema) {
-        for (const path of expandSchemaPath(values, pattern))
-            paths.add(path);
-    }
-    return [...paths];
+function cloneValues(value) {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [
+        key,
+        Array.isArray(item) ? [...item] : item,
+    ]));
 }
-function schemaPathMatches(pattern, path) {
-    const patternParts = splitPath(pattern);
-    const pathParts = splitPath(path);
-    if (patternParts.length !== pathParts.length)
-        return false;
-    for (let i = 0; i < patternParts.length; i++) {
-        const expected = patternParts[i];
-        if (expected !== "*" && expected !== pathParts[i])
+function sameValues(a, b) {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const key of keys) {
+        const left = a[key];
+        const right = b[key];
+        if (Array.isArray(left) && Array.isArray(right)) {
+            if (left.length !== right.length || left.some((item, i) => !Object.is(item, right[i]))) {
+                return false;
+            }
+        }
+        else if (!Object.is(left, right)) {
             return false;
+        }
     }
     return true;
 }
-function clearRecordPrefix(record, prefix) {
-    const next = { ...record };
-    const dotted = `${prefix}.`;
-    for (const key of Object.keys(next)) {
-        if (key === prefix || key.startsWith(dotted))
-            delete next[key];
-    }
+function withoutKey(value, key) {
+    const next = { ...value };
+    delete next[key];
     return next;
 }
 //# sourceMappingURL=forms.js.map