@coherent.js/forms 1.1.2 → 2.0.0-rc.0

package/dist/form-hydration.js

@@ -5,199 +5,245 @@ function isEmailShaped(value) {
   return typeof value === "string" && value.length <= EMAIL_MAX_LENGTH && EMAIL_PATTERN.test(value);
 }
 
-// src/validators.js
-var validators = {
-  required: (value, options = {}) => {
-    if (value === null || value === void 0 || value === "") {
-      return options.message || validators.required.message || "This field is required";
-    }
-    return null;
-  },
-  email: (value) => {
-    if (!value) return null;
-    if (!isEmailShaped(value)) {
-      return "Please enter a valid email address";
-    }
-    return null;
-  },
-  minLength: (value, options = {}) => {
-    if (!value) return null;
-    const min = options.min || 0;
-    if (value.length < min) {
-      return options.message || `Must be at least ${min} characters`;
-    }
-    return null;
-  },
-  maxLength: (value, options = {}) => {
-    if (!value) return null;
-    const max = options.max || Infinity;
-    if (value.length > max) {
-      return options.message || `Must be no more than ${max} characters`;
-    }
-    return null;
-  },
-  min: (value, options = {}) => {
-    if (value === null || value === void 0 || value === "") return null;
-    const num = Number(value);
-    const minValue = options.min || 0;
-    if (isNaN(num) || num < minValue) {
-      return options.message || `Must be at least ${minValue}`;
-    }
-    return null;
-  },
-  max: (value, options = {}) => {
-    if (value === null || value === void 0 || value === "") return null;
-    const num = Number(value);
-    const maxValue = options.max || Infinity;
-    if (isNaN(num) || num > maxValue) {
-      return options.message || `Must be no more than ${maxValue}`;
-    }
-    return null;
-  },
-  pattern: (value, options = {}) => {
-    if (!value) return null;
-    const regex = options.pattern || options.regex;
-    if (regex && !regex.test(value)) {
-      return options.message || "Invalid format";
-    }
-    return null;
-  },
-  url: (value) => {
-    if (!value) return null;
+// src/rules.js
+var BUILTIN = /* @__PURE__ */ Symbol("coherent.forms.builtin");
+var DESCRIPTORS = /* @__PURE__ */ new WeakMap();
+var HELPER_NAMES = /* @__PURE__ */ new Set(["get", "compose", "debounce", "cancellable", "when", "chain"]);
+var isEmpty = (value) => value === null || value === void 0 || value === "";
+var isOptionsObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && !(value instanceof RegExp);
+function argsFromString(params, kind, text) {
+  if (text === void 0 || text.trim() === "") return [];
+  if (params.length === 0) return [text.trim()];
+  if (kind === "list") {
+    return [text.split(",").map((part) => part.trim()).filter(Boolean)];
+  }
+  if (kind === "regexp") {
     try {
-      new URL(value);
-      return null;
+      return [new RegExp(text)];
     } catch {
-      return "Please enter a valid URL";
-    }
-  },
-  number: (value) => {
-    if (value === null || value === void 0 || value === "") return null;
-    if (isNaN(Number(value))) {
-      return "Must be a valid number";
-    }
-    return null;
-  },
-  integer: (value) => {
-    if (value === null || value === void 0 || value === "") return null;
-    const num = Number(value);
-    if (isNaN(num) || !Number.isInteger(num)) {
-      return "Must be a whole number";
-    }
-    return null;
-  },
-  phone: (value) => {
-    if (!value) return null;
-    const phoneRegex = /^[\d\s\-\+\(\)]+$/;
-    if (!phoneRegex.test(value) || value.replace(/\D/g, "").length < 10) {
-      return "Please enter a valid phone number";
-    }
-    return null;
-  },
-  date: (value) => {
-    if (!value) return null;
-    const date = new Date(value);
-    if (isNaN(date.getTime())) {
-      return "Please enter a valid date";
-    }
-    return null;
-  },
-  match: (value, options = {}, translator, allValues = {}) => {
-    if (!value) return null;
-    const fieldName = options.field || options.fieldName;
-    if (value !== allValues[fieldName]) {
-      return options.message || `Must match ${fieldName}`;
-    }
-    return null;
-  },
-  custom: (value, options = {}, translator, allValues) => {
-    const validatorFn = options.validator || options.fn;
-    if (!validatorFn) return null;
-    const isValid = validatorFn(value, allValues);
-    return isValid ? null : options.message || "Validation failed";
-  },
-  fileType: (value, options = {}) => {
-    if (!value) return null;
-    const allowedTypes = options.accept || options.types || [];
-    if (value.type !== void 0) {
-      const fileType = value.type;
-      const fileExt = value.name ? value.name.split(".").pop().toLowerCase() : "";
-      const isValid = allowedTypes.some((type) => {
-        if (type.startsWith(".")) {
-          return fileExt === type.slice(1).toLowerCase();
-        }
-        if (type.includes("/")) {
-          if (type.endsWith("/*")) {
-            return fileType.startsWith(type.replace("/*", "/"));
-          }
-          return fileType === type;
-        }
-        return fileExt === type.toLowerCase();
-      });
-      if (!isValid) {
-        return options.message || `File type must be one of: ${allowedTypes.join(", ")}`;
-      }
       return null;
     }
-    return null;
-  },
-  fileSize: (value, options = {}) => {
-    if (!value) return null;
-    const maxSize = options.maxSize || Infinity;
-    if (value.size !== void 0) {
-      if (value.size > maxSize) {
-        const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(2);
-        return options.message || `File size must be less than ${maxSizeMB}MB`;
-      }
-      return null;
+  }
+  const comma = text.indexOf(",");
+  const raw = (comma === -1 ? text : text.slice(0, comma)).trim();
+  const message = comma === -1 ? "" : text.slice(comma + 1).trim();
+  let arg = raw;
+  if (kind === "number") {
+    arg = Number(raw);
+    if (raw === "" || Number.isNaN(arg)) return null;
+  }
+  return message ? [arg, message] : [arg];
+}
+function defineRule(name, { params = [], stringArg = "string", valid, message }) {
+  const fromOptions = (options = {}) => {
+    const config = { message: options.message };
+    for (const [key, ...aliases] of params) {
+      config[key] = [key, ...aliases].map((alias) => options[alias]).find((v) => v !== void 0);
     }
-    return null;
-  },
-  fileExtension: (value, options = {}) => {
-    if (!value) return null;
-    const allowedExtensions = options.extensions || [];
-    const fileName = value.name || value;
-    const ext = `.${fileName.split(".").pop().toLowerCase()}`;
-    const isValid = allowedExtensions.some((allowed) => {
-      return ext === allowed.toLowerCase();
+    return config;
+  };
+  const check = (value, config, formData) => {
+    if (valid(value, config, formData || {})) return null;
+    return config.message || builtin.message || message(config);
+  };
+  const factory = (...args) => {
+    const config = { message: args[params.length] };
+    params.forEach(([key], index) => {
+      config[key] = args[index];
     });
-    if (!isValid) {
-      return options.message || `File extension must be one of: ${allowedExtensions.join(", ")}`;
+    const rule = (value, formData, _translator, allValues) => check(value, config, allValues ?? formData);
+    DESCRIPTORS.set(rule, { name, args });
+    return rule;
+  };
+  const isDirectCall = (args) => {
+    if (args.length >= 2) {
+      return params.length === 0 || isOptionsObject(args[1]);
     }
-    return null;
-  },
-  alpha: (value) => {
-    if (!value) return null;
-    const alphaRegex = /^[a-zA-Z]+$/;
-    if (!alphaRegex.test(value)) {
-      return "Must contain only letters";
+    if (args.length === 1 && params.length === 0) {
+      const [arg] = args;
+      return arg === "" || arg !== void 0 && arg !== null && typeof arg !== "string";
     }
-    return null;
-  },
-  alphanumeric: (value) => {
-    if (!value) return null;
-    const alphanumericRegex = /^[a-zA-Z0-9]+$/;
-    if (!alphanumericRegex.test(value)) {
-      return "Must contain only letters and numbers";
+    return false;
+  };
+  function builtin(...args) {
+    if (isDirectCall(args)) {
+      const [value, options, , allValues] = args;
+      return check(value, fromOptions(isOptionsObject(options) ? options : {}), allValues);
     }
-    return null;
-  },
-  uppercase: (value) => {
-    if (!value) return null;
-    if (value !== value.toUpperCase()) {
-      return "Must be uppercase";
+    return factory(...args);
+  }
+  Object.defineProperty(builtin, "name", { value: name });
+  builtin[BUILTIN] = {
+    name,
+    factory,
+    argsFromString: (text) => argsFromString(params, stringArg, text)
+  };
+  return builtin;
+}
+var toNumber = (value) => typeof value === "number" ? value : Number(value);
+function testRegExp(regex, value) {
+  if (!(regex instanceof RegExp)) return true;
+  regex.lastIndex = 0;
+  return regex.test(String(value));
+}
+function fileMatchesType(file, allowedTypes) {
+  const fileType = file.type;
+  const fileExt = file.name ? file.name.split(".").pop().toLowerCase() : "";
+  return allowedTypes.some((type) => {
+    if (type.startsWith(".")) {
+      return fileExt === type.slice(1).toLowerCase();
+    }
+    if (type.includes("/")) {
+      if (type.endsWith("/*")) {
+        return fileType.startsWith(type.replace("/*", "/"));
+      }
+      return fileType === type;
     }
-    return null;
-  },
-  // Get a registered validator
-  get: (name) => {
-    return validators[name];
-  },
-  // Compose multiple validators
+    return fileExt === type.toLowerCase();
+  });
+}
+var validators = {
+  required: defineRule("required", {
+    valid: (value) => !isEmpty(value),
+    message: () => "This field is required"
+  }),
+  email: defineRule("email", {
+    valid: (value) => isEmpty(value) || isEmailShaped(value),
+    message: () => "Invalid email address"
+  }),
+  url: defineRule("url", {
+    valid: (value) => {
+      if (isEmpty(value)) return true;
+      try {
+        new URL(value);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    message: () => "Invalid URL"
+  }),
+  minLength: defineRule("minLength", {
+    params: [["min", "minLength"]],
+    stringArg: "number",
+    valid: (value, { min }) => !value || !(value.length < (min ?? 0)),
+    message: ({ min }) => `Minimum length is ${min}`
+  }),
+  maxLength: defineRule("maxLength", {
+    params: [["max", "maxLength"]],
+    stringArg: "number",
+    valid: (value, { max }) => !value || !(value.length > (max ?? Infinity)),
+    message: ({ max }) => `Maximum length is ${max}`
+  }),
+  // Empty values pass (combine with `required`); a non-numeric value fails.
+  min: defineRule("min", {
+    params: [["min"]],
+    stringArg: "number",
+    valid: (value, { min }) => {
+      if (isEmpty(value)) return true;
+      const number = toNumber(value);
+      return !Number.isNaN(number) && !(number < (min ?? -Infinity));
+    },
+    message: ({ min }) => `Minimum value is ${min}`
+  }),
+  max: defineRule("max", {
+    params: [["max"]],
+    stringArg: "number",
+    valid: (value, { max }) => {
+      if (isEmpty(value)) return true;
+      const number = toNumber(value);
+      return !Number.isNaN(number) && !(number > (max ?? Infinity));
+    },
+    message: ({ max }) => `Maximum value is ${max}`
+  }),
+  pattern: defineRule("pattern", {
+    params: [["pattern", "regex"]],
+    stringArg: "regexp",
+    valid: (value, { pattern }) => isEmpty(value) || testRegExp(pattern, value),
+    message: () => "Invalid format"
+  }),
+  /** Equal to another field, even when empty */
+  matches: defineRule("matches", {
+    params: [["field", "fieldName"]],
+    valid: (value, { field }, formData) => value === formData[field],
+    message: () => "Fields do not match"
+  }),
+  /** Equal to another field; an empty value passes */
+  match: defineRule("match", {
+    params: [["field", "fieldName"]],
+    valid: (value, { field }, formData) => !value || value === formData[field],
+    message: ({ field }) => `Must match ${field}`
+  }),
+  oneOf: defineRule("oneOf", {
+    params: [["options", "values"]],
+    stringArg: "list",
+    valid: (value, { options }) => !value || !Array.isArray(options) || options.includes(value),
+    message: () => "Invalid option"
+  }),
+  custom: defineRule("custom", {
+    params: [["validator", "fn"]],
+    valid: (value, { validator }, formData) => typeof validator !== "function" || Boolean(validator(value, formData)),
+    message: () => "Validation failed"
+  }),
+  number: defineRule("number", {
+    valid: (value) => isEmpty(value) || !Number.isNaN(Number(value)),
+    message: () => "Must be a valid number"
+  }),
+  integer: defineRule("integer", {
+    valid: (value) => isEmpty(value) || Number.isInteger(Number(value)),
+    message: () => "Must be a whole number"
+  }),
+  phone: defineRule("phone", {
+    valid: (value) => !value || /^[\d\s\-+()]+$/.test(value) && value.replace(/\D/g, "").length >= 10,
+    message: () => "Please enter a valid phone number"
+  }),
+  date: defineRule("date", {
+    valid: (value) => !value || !Number.isNaN(new Date(value).getTime()),
+    message: () => "Please enter a valid date"
+  }),
+  alpha: defineRule("alpha", {
+    valid: (value) => !value || /^[a-zA-Z]+$/.test(value),
+    message: () => "Must contain only letters"
+  }),
+  alphanumeric: defineRule("alphanumeric", {
+    valid: (value) => !value || /^[a-zA-Z0-9]+$/.test(value),
+    message: () => "Must contain only letters and numbers"
+  }),
+  uppercase: defineRule("uppercase", {
+    valid: (value) => !value || value === String(value).toUpperCase(),
+    message: () => "Must be uppercase"
+  }),
+  fileType: defineRule("fileType", {
+    params: [["accept", "types"]],
+    stringArg: "list",
+    valid: (value, { accept }) => !value || value.type === void 0 || fileMatchesType(value, accept || []),
+    message: ({ accept }) => `File type must be one of: ${(accept || []).join(", ")}`
+  }),
+  fileSize: defineRule("fileSize", {
+    params: [["maxSize"]],
+    stringArg: "number",
+    valid: (value, { maxSize }) => !value || value.size === void 0 || !(value.size > (maxSize ?? Infinity)),
+    message: ({ maxSize }) => `File size must be less than ${((maxSize ?? Infinity) / (1024 * 1024)).toFixed(2)}MB`
+  }),
+  fileExtension: defineRule("fileExtension", {
+    params: [["extensions"]],
+    stringArg: "list",
+    valid: (value, { extensions }) => {
+      if (!value) return true;
+      const fileName = value.name || value;
+      const ext = `.${String(fileName).split(".").pop().toLowerCase()}`;
+      return (extensions || []).some((allowed) => ext === allowed.toLowerCase());
+    },
+    message: ({ extensions }) => `File extension must be one of: ${(extensions || []).join(", ")}`
+  }),
+  /** A registered validator or built-in by name */
+  get: (name) => Object.hasOwn(validators, name) ? validators[name] : void 0,
+  /** Combine validators into one returning the first error */
   compose: (validatorList) => {
+    const rules = validatorList.map(resolveValidator);
     return (value, options, translator, allValues) => {
-      for (const validator of validatorList) {
-        const error = typeof validator === "function" ? validator(value, options, translator, allValues) : null;
+      for (const rule of rules) {
+        const error = rule ? rule(value, options, translator, allValues) : null;
         if (error) {
           return error;
         }
@@ -205,7 +251,7 @@ var validators = {
       return null;
     };
   },
-  // Debounce async validator
+  /** Debounce an async validator */
   debounce: (validator, delay = 300) => {
     let timeoutId;
     return (value) => {
@@ -218,7 +264,7 @@ var validators = {
       });
     };
   },
-  // Cancellable async validator
+  /** Cancellable async validator */
   cancellable: (validator) => {
     let abortController;
     const wrapped = async (value) => {
@@ -242,38 +288,31 @@ var validators = {
     };
     return wrapped;
   },
-  // Conditional validator
+  /** Run `validator` only when `condition` holds */
   when: (condition, validator) => {
+    const rule = resolveValidator(validator);
     return (value, options = {}, translator, allValues = {}) => {
       const context = options.min !== void 0 || options.max !== void 0 ? allValues : options;
       const shouldValidate = typeof condition === "function" ? condition(value, context) : condition;
       if (!shouldValidate) {
         return null;
       }
-      return typeof validator === "function" ? validator(value, options, translator, allValues) : null;
+      return rule ? rule(value, options, translator, allValues) : null;
     };
   },
-  // Validator chain builder
+  /** Validator chain builder */
   chain: (options = {}) => {
     const validatorList = [];
     const stopOnFirstError = options.stopOnFirstError !== false;
+    const direct = (name) => (opts) => {
+      validatorList.push((v, o, t, a) => validators[name](v, opts || o || {}, t, a));
+      return chain;
+    };
     const chain = {
-      required: (opts) => {
-        validatorList.push((v, o, t, a) => validators.required(v, opts || o, t, a));
-        return chain;
-      },
-      email: (opts) => {
-        validatorList.push((v, o, t, a) => validators.email(v, opts || o, t, a));
-        return chain;
-      },
-      minLength: (opts) => {
-        validatorList.push((v, o, t, a) => validators.minLength(v, opts || o, t, a));
-        return chain;
-      },
-      maxLength: (opts) => {
-        validatorList.push((v, o, t, a) => validators.maxLength(v, opts || o, t, a));
-        return chain;
-      },
+      required: direct("required"),
+      email: direct("email"),
+      minLength: direct("minLength"),
+      maxLength: direct("maxLength"),
       custom: (fn, message) => {
         validatorList.push((v, o, t, a) => {
           const result = fn(v, a);
@@ -290,21 +329,82 @@ var validators = {
             }
           }
           return null;
-        } else {
-          const errors = [];
-          for (const validator of validatorList) {
-            const error = validator(value, opts, translator, allValues);
-            if (error) {
-              errors.push(error);
-            }
+        }
+        const errors = [];
+        for (const validator of validatorList) {
+          const error = validator(value, opts, translator, allValues);
+          if (error) {
+            errors.push(error);
           }
-          return errors.length > 0 ? errors : null;
         }
+        return errors.length > 0 ? errors : null;
       }
     };
     return chain;
   }
 };
+function lookup(name) {
+  const found = Object.hasOwn(validators, name) && !HELPER_NAMES.has(name) ? validators[name] : null;
+  return typeof found === "function" ? found : null;
+}
+function resolveString(entry) {
+  const exact = lookup(entry);
+  const colon = exact ? -1 : entry.indexOf(":");
+  const name = colon === -1 ? entry : entry.slice(0, colon).trim();
+  const found = exact ?? lookup(name);
+  if (!found) return null;
+  const text = colon === -1 ? void 0 : entry.slice(colon + 1);
+  if (!found[BUILTIN]) {
+    return text === void 0 ? { name, args: [], validator: found } : null;
+  }
+  const args = found[BUILTIN].argsFromString(text);
+  if (!args) return null;
+  return { name: found[BUILTIN].name, args, validator: found[BUILTIN].factory(...args) };
+}
+function resolveValidator(entry) {
+  if (typeof entry === "string") {
+    return resolveString(entry)?.validator ?? null;
+  }
+  if (typeof entry !== "function") return null;
+  return entry[BUILTIN] ? entry[BUILTIN].factory() : entry;
+}
+function reviveArg(arg) {
+  if (isOptionsObject(arg) && Array.isArray(arg.$regexp)) {
+    try {
+      return new RegExp(arg.$regexp[0], arg.$regexp[1]);
+    } catch {
+      return void 0;
+    }
+  }
+  return arg;
+}
+function parseValidators(attribute) {
+  if (!attribute) return [];
+  const text = String(attribute).trim();
+  let specs;
+  if (text.startsWith("[")) {
+    try {
+      specs = JSON.parse(text);
+    } catch {
+      return [];
+    }
+    if (!Array.isArray(specs)) return [];
+  } else {
+    specs = text.split(",").map((part) => {
+      const [name, ...params] = part.trim().split(":");
+      return { name, args: params.map((p) => p !== "" && !Number.isNaN(Number(p)) ? Number(p) : p) };
+    });
+  }
+  return specs.map((spec) => {
+    if (!spec || typeof spec.name !== "string") return null;
+    const { name } = spec;
+    if (!Object.hasOwn(validators, name) || HELPER_NAMES.has(name)) return null;
+    const entry = validators[name];
+    if (typeof entry !== "function") return null;
+    const args = Array.isArray(spec.args) ? spec.args.map(reviveArg) : [];
+    return entry[BUILTIN] ? entry[BUILTIN].factory(...args) : entry;
+  }).filter(Boolean);
+}
 
 // src/form-builder.js
 import { render as renderToHTML } from "@coherent.js/core";
@@ -355,17 +455,6 @@ function hydrateForm(formSelector, options = {}) {
     fields: /* @__PURE__ */ new Map()
   };
   const debounceTimers = /* @__PURE__ */ new Map();
-  function parseValidators(validatorString) {
-    if (!validatorString) return [];
-    return validatorString.split(",").map((v) => {
-      const trimmed = v.trim();
-      const [name, ...params] = trimmed.split(":");
-      if (validators[name]) {
-        return params.length > 0 ? validators[name](...params.map((p) => isNaN(p) ? p : Number(p))) : validators[name];
-      }
-      return null;
-    }).filter(Boolean);
-  }
   function discoverFields() {
     const inputs = form.querySelectorAll("[name]");
     inputs.forEach((input) => {