@conform-to/dom 0.5.1 → 0.6.0

package/README.md

@@ -2,10 +2,16 @@
 
 > This package is a transitive dependency for the rest of the conform packages with no intention to be used directly at the moment. Use at your own risk.
 
-Conform is a form validation library built on top of the [Constraint Validation](https://caniuse.com/constraint-validation) API.
+Conform is a progressive enhancement first form validation library for [Remix](https://remix.run)
 
-- **Progressive Enhancement**: It is designed based on the [HTML specification](https://html.spec.whatwg.org/dev/form-control-infrastructure.html#the-constraint-validation-api). From validating the form to reporting error messages for each field, if you don't like part of the solution, just replace it with your own.
-- **Framework Agnostic**: The DOM is the only dependency. Conform makes use of native [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) exclusively. You don't have to use React / Vue / Svelte to utilise this library.
-- **Flexible Setup**: It can validates fields anywhere in the dom with the help of [form attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form). Also enables CSS pseudo-classes like `:valid` and `:invalid`, allowing flexible styling across your form without the need to manipulate the class names.
+### Highlights
+
+- Focused on progressive enhancment by default
+- Simplifed intergration through event delegation
+- Server first validation with Zod / Yup schema support
+- Field name inference with type checking
+- Focus management
+- Accessibility support
+- About 5kb compressed
 
 Checkout the [repository](https://github.com/edmundhung/conform) if you want to know more!

package/_virtual/_rollupPluginBabelHelpers.js

@@ -24,6 +24,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -36,6 +37,22 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 exports.defineProperty = _defineProperty;
 exports.objectSpread2 = _objectSpread2;
+exports.toPrimitive = _toPrimitive;
+exports.toPropertyKey = _toPropertyKey;

package/index.d.ts

@@ -1,17 +1,25 @@
-export declare type Primitive = null | undefined | string | number | boolean | Date;
-export declare type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+export type Primitive = null | undefined | string | number | boolean | Date;
+export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
 export interface FieldConfig<Schema = unknown> extends FieldConstraint<Schema> {
     id?: string;
     name: string;
     defaultValue?: FieldValue<Schema>;
-    initialError?: Array<[string, string]>;
+    initialError?: Record<string, string | string[]>;
     form?: string;
     errorId?: string;
+    /**
+     * The frist error of the field
+     */
+    error?: string;
+    /**
+     * All of the field errors
+     */
+    errors?: string[];
 }
-export declare type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
+export type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
     [Key in keyof Schema]?: FieldValue<Schema[Key]>;
-} : unknown;
-export declare type FieldConstraint<Schema = any> = {
+} : any;
+export type FieldConstraint<Schema = any> = {
     required?: boolean;
     minLength?: number;
     maxLength?: number;
@@ -21,50 +29,95 @@ export declare type FieldConstraint<Schema = any> = {
     multiple?: boolean;
     pattern?: string;
 };
-export declare type FieldsetConstraint<Schema extends Record<string, any>> = {
+export type FieldsetConstraint<Schema extends Record<string, any>> = {
     [Key in keyof Schema]?: FieldConstraint<Schema[Key]>;
 };
-export declare type Submission<Schema = unknown> = {
-    type: string;
-    intent?: string;
-    value: FieldValue<Schema>;
-    error: Array<[string, string]>;
+export type Submission<Schema extends Record<string, any> | unknown = unknown> = unknown extends Schema ? {
+    intent: string;
+    payload: Record<string, any>;
+    error: Record<string, string | string[]>;
+} : {
+    intent: string;
+    payload: Record<string, any>;
+    value?: Schema;
+    error: Record<string, string | string[]>;
+    toJSON(): Submission;
 };
-export interface CommandButtonProps<Name extends string = string> {
-    name: `conform/${Name}`;
+export interface IntentButtonProps {
+    name: typeof INTENT;
     value: string;
     formNoValidate?: boolean;
 }
+/**
+ * Check if the provided reference is a form element (_input_ / _select_ / _textarea_ or _button_)
+ */
 export declare function isFieldElement(element: unknown): element is FieldElement;
-export declare function getFormElements(form: HTMLFormElement): FieldElement[];
+/**
+ * Find the corresponding paths based on the formatted name
+ * @param name formatted name
+ * @returns paths
+ */
 export declare function getPaths(name: string): Array<string | number>;
 export declare function getFormData(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): FormData;
+export type FormMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
+export type FormEncType = 'application/x-www-form-urlencoded' | 'multipart/form-data';
+export declare function getFormAttributes(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): {
+    action: string;
+    encType: FormEncType;
+    method: FormMethod;
+};
 export declare function getName(paths: Array<string | number>): string;
-export declare function shouldValidate(submission: Submission, name: string): boolean;
-export declare function hasError(error: Array<[string, string]>, name?: string): boolean;
+export declare function getScope(intent: string): string | null;
+export declare function isFocusedOnIntentButton(form: HTMLFormElement, intent: string): boolean;
+export declare function getValidationMessage(errors?: string | string[]): string;
+export declare function getErrors(message: string | undefined): string[];
+export declare const FORM_ERROR_ELEMENT_NAME = "__form__";
+export declare const INTENT = "__intent__";
+export declare const VALIDATION_UNDEFINED = "__undefined__";
+export declare const VALIDATION_SKIPPED = "__skipped__";
 export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
 export declare function setValue<T>(target: any, paths: Array<string | number>, valueFn: (prev?: T) => T): void;
 /**
- * The ponyfill of `HTMLFormElement.requestSubmit()`
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
- * @see https://caniuse.com/?search=requestSubmit
- */
-export declare function requestSubmit(form: HTMLFormElement, submitter?: HTMLButtonElement | HTMLInputElement): void;
-/**
- * Creates a command button on demand and trigger a form submit by clicking it.
+ * Creates an intent button on demand and trigger a form submit by clicking it.
  */
-export declare function requestCommand(form: HTMLFormElement | undefined, buttonProps: CommandButtonProps): void;
+export declare function requestIntent(form: HTMLFormElement | undefined, buttonProps: {
+    value: string;
+    formNoValidate?: boolean;
+}): void;
 /**
- * Returns the properties required to configure a command button for validation
+ * Returns the properties required to configure an intent button for validation
  *
  * @see https://conform.guide/api/react#validate
  */
-export declare function validate(field?: string): CommandButtonProps<'validate'>;
+export declare function validate(field?: string): IntentButtonProps;
 export declare function getFormElement(element: HTMLFormElement | HTMLFieldSetElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null): HTMLFormElement | null;
-export declare function focus(field: FieldElement): void;
-export declare function getSubmissionType(name: string): string | null;
-export declare function parse<Schema extends Record<string, any>>(payload: FormData | URLSearchParams): Submission<Schema>;
-export declare type ListCommand<Schema = unknown> = {
+export declare function parse(payload: FormData | URLSearchParams): Submission;
+export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
+    resolve?: (payload: Record<string, any>, intent: string) => {
+        value: Schema;
+    } | {
+        error: Record<string, string | string[]>;
+    };
+}): Submission<Schema>;
+export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
+    resolve?: (payload: Record<string, any>, intent: string) => Promise<{
+        value: Schema;
+    } | {
+        error: Record<string, string | string[]>;
+    }>;
+}): Promise<Submission<Schema>>;
+export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
+    resolve?: (payload: Record<string, any>, intent: string) => ({
+        value: Schema;
+    } | {
+        error: Record<string, string | string[]>;
+    }) | Promise<{
+        value: Schema;
+    } | {
+        error: Record<string, string | string[]>;
+    }>;
+}): Submission<Schema> | Promise<Submission<Schema>>;
+export type ListCommand<Schema = unknown> = {
     type: 'prepend';
     scope: string;
     payload: {
@@ -97,31 +150,53 @@ export declare type ListCommand<Schema = unknown> = {
         to: number;
     };
 };
-export declare function parseListCommand<Schema = unknown>(data: string): ListCommand<Schema>;
+export declare function parseListCommand<Schema = unknown>(intent: string): ListCommand<Schema> | null;
 export declare function updateList<Schema>(list: Array<Schema>, command: ListCommand<Schema>): Array<Schema>;
-export declare function handleList<Schema>(submission: Submission<Schema>): Submission<Schema>;
 export interface ListCommandButtonBuilder {
     append<Schema>(name: string, payload?: {
         defaultValue: Schema;
-    }): CommandButtonProps<'list'>;
+    }): IntentButtonProps;
     prepend<Schema>(name: string, payload?: {
         defaultValue: Schema;
-    }): CommandButtonProps<'list'>;
+    }): IntentButtonProps;
     replace<Schema>(name: string, payload: {
         defaultValue: Schema;
         index: number;
-    }): CommandButtonProps<'list'>;
+    }): IntentButtonProps;
     remove(name: string, payload: {
         index: number;
-    }): CommandButtonProps<'list'>;
+    }): IntentButtonProps;
     reorder(name: string, payload: {
         from: number;
         to: number;
-    }): CommandButtonProps<'list'>;
+    }): IntentButtonProps;
 }
 /**
- * Helpers to configure a command button for modifying a list
+ * Helpers to configure an intent button for modifying a list
  *
  * @see https://conform.guide/api/react#list
  */
 export declare const list: ListCommandButtonBuilder;
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+export declare function validateConstraint(options: {
+    form: HTMLFormElement;
+    formData?: FormData;
+    constraint?: Record<Lowercase<string>, (value: string, context: {
+        formData: FormData;
+        attributeValue: string;
+    }) => boolean>;
+    acceptMultipleErrors?: ({ name, intent, payload, }: {
+        name: string;
+        intent: string;
+        payload: Record<string, any>;
+    }) => boolean;
+    formatMessages?: ({ name, validity, constraint, defaultErrors, }: {
+        name: string;
+        validity: ValidityState;
+        constraint: Record<string, boolean>;
+        defaultErrors: string[];
+    }) => string[];
+}): Submission;

package/index.js

@@ -4,12 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 
+/**
+ * Check if the provided reference is a form element (_input_ / _select_ / _textarea_ or _button_)
+ */
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
-function getFormElements(form) {
-  return Array.from(form.elements).filter(isFieldElement);
-}
+
+/**
+ * Find the corresponding paths based on the formatted name
+ * @param name formatted name
+ * @returns paths
+ */
 function getPaths(name) {
   var pattern = /(\w*)\[(\d+)\]/;
   if (!name) {
@@ -33,6 +39,18 @@ function getFormData(form, submitter) {
   }
   return payload;
 }
+function getFormAttributes(form, submitter) {
+  var _ref, _submitter$getAttribu, _ref2, _submitter$getAttribu2, _submitter$getAttribu3;
+  var enforce = (value, list) => list.includes(value) ? value : list[0];
+  var action = (_ref = (_submitter$getAttribu = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formaction')) !== null && _submitter$getAttribu !== void 0 ? _submitter$getAttribu : form.getAttribute('action')) !== null && _ref !== void 0 ? _ref : "".concat(location.pathname).concat(location.search);
+  var method = (_ref2 = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.getAttribute('method')) !== null && _ref2 !== void 0 ? _ref2 : 'get';
+  var encType = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.enctype;
+  return {
+    action,
+    encType: enforce(encType, ['application/x-www-form-urlencoded', 'multipart/form-data']),
+    method: enforce(method, ['get', 'post', 'put', 'patch', 'delete'])
+  };
+}
 function getName(paths) {
   return paths.reduce((name, path) => {
     if (typeof path === 'number') {
@@ -44,61 +62,85 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function shouldValidate(submission, name) {
-  return submission.type === 'submit' || submission.type === 'validate' && (submission.intent === '' || submission.intent === name);
+function getScope(intent) {
+  var _parseListCommand$sco, _parseListCommand;
+  var [type, ...rest] = intent.split('/');
+  switch (type) {
+    case 'validate':
+      return rest.length > 0 ? rest.join('/') : null;
+    case 'list':
+      return (_parseListCommand$sco = (_parseListCommand = parseListCommand(intent)) === null || _parseListCommand === void 0 ? void 0 : _parseListCommand.scope) !== null && _parseListCommand$sco !== void 0 ? _parseListCommand$sco : null;
+    default:
+      return null;
+  }
+}
+function isFocusedOnIntentButton(form, intent) {
+  var element = document.activeElement;
+  return isFieldElement(element) && element.tagName === 'BUTTON' && element.form === form && element.name === INTENT && element.value === intent;
 }
-function hasError(error, name) {
-  return typeof error.find(_ref => {
-    var [fieldName, message] = _ref;
-    return (typeof name === 'undefined' || name === fieldName) && message !== '';
-  }) !== 'undefined';
+function getValidationMessage(errors) {
+  return [].concat(errors !== null && errors !== void 0 ? errors : []).join(String.fromCharCode(31));
 }
+function getErrors(message) {
+  if (!message) {
+    return [];
+  }
+  return message.split(String.fromCharCode(31));
+}
+var FORM_ERROR_ELEMENT_NAME = '__form__';
+var INTENT = '__intent__';
+var VALIDATION_UNDEFINED = '__undefined__';
+var VALIDATION_SKIPPED = '__skipped__';
 function reportSubmission(form, submission) {
-  var messageByName = new Map();
-  for (var [_name, message] of submission.error) {
-    if (!messageByName.has(_name)) {
-      // Only keep the first error message (for now)
-      messageByName.set(_name, message);
+  for (var [_name, message] of Object.entries(submission.error)) {
+    // There is no need to create a placeholder button if all we want is to reset the error
+    if (message === '') {
+      continue;
+    }
 
-      // We can't use empty string as button name
-      // As `form.element.namedItem('')` will always returns null
-      var elementName = _name ? _name : '__form__';
-      var item = form.elements.namedItem(elementName);
-      if (item instanceof RadioNodeList) {
-        for (var field of item) {
-          if (field.type !== 'radio') {
-            throw new Error('Repeated field name is not supported');
-          }
+    // We can't use empty string as button name
+    // As `form.element.namedItem('')` will always returns null
+    var elementName = _name ? _name : FORM_ERROR_ELEMENT_NAME;
+    var item = form.elements.namedItem(elementName);
+    if (item instanceof RadioNodeList) {
+      for (var field of item) {
+        if (field.type !== 'radio') {
+          console.warn('Repeated field name is not supported.');
+          continue;
         }
       }
-      if (item === null) {
-        // Create placeholder button to keep the error without contributing to the form data
-        var button = document.createElement('button');
-        button.name = elementName;
-        button.hidden = true;
-        button.dataset.conformTouched = 'true';
-        item = button;
-        form.appendChild(button);
-      }
+    }
+    if (item === null) {
+      // Create placeholder button to keep the error without contributing to the form data
+      var button = document.createElement('button');
+      button.name = elementName;
+      button.hidden = true;
+      button.dataset.conformTouched = 'true';
+      form.appendChild(button);
     }
   }
+  var focusedFirstInvalidField = false;
+  var scope = getScope(submission.intent);
+  var isSubmitting = submission.intent.slice(0, submission.intent.indexOf('/')) !== 'validate' && parseListCommand(submission.intent) === null;
   for (var element of form.elements) {
     if (isFieldElement(element) && element.willValidate) {
-      var _elementName = element.name !== '__form__' ? element.name : '';
-      var _message = messageByName.get(_elementName);
-      var elementShouldValidate = shouldValidate(submission, _elementName);
-      if (elementShouldValidate) {
+      var _submission$error$_el;
+      var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+      var messages = [].concat((_submission$error$_el = submission.error[_elementName]) !== null && _submission$error$_el !== void 0 ? _submission$error$_el : []);
+      var shouldValidate = scope === null || scope === _elementName;
+      if (shouldValidate) {
         element.dataset.conformTouched = 'true';
       }
-      if (typeof _message !== 'undefined' || elementShouldValidate) {
+      if (!messages.includes(VALIDATION_SKIPPED) && !messages.includes(VALIDATION_UNDEFINED)) {
         var invalidEvent = new Event('invalid', {
           cancelable: true
         });
-        element.setCustomValidity(_message !== null && _message !== void 0 ? _message : '');
+        element.setCustomValidity(getValidationMessage(messages));
         element.dispatchEvent(invalidEvent);
       }
-      if (elementShouldValidate && !element.validity.valid) {
-        focus(element);
+      if (!focusedFirstInvalidField && (isSubmitting || isFocusedOnIntentButton(form, submission.intent)) && shouldValidate && element.tagName !== 'BUTTON' && !element.validity.valid) {
+        element.focus();
+        focusedFirstInvalidField = true;
       }
     }
   }
@@ -119,29 +161,15 @@ function setValue(target, paths, valueFn) {
 }
 
 /**
- * The ponyfill of `HTMLFormElement.requestSubmit()`
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
- * @see https://caniuse.com/?search=requestSubmit
+ * Creates an intent button on demand and trigger a form submit by clicking it.
  */
-function requestSubmit(form, submitter) {
-  var submitEvent = new SubmitEvent('submit', {
-    bubbles: true,
-    cancelable: true,
-    submitter
-  });
-  form.dispatchEvent(submitEvent);
-}
-
-/**
- * Creates a command button on demand and trigger a form submit by clicking it.
- */
-function requestCommand(form, buttonProps) {
+function requestIntent(form, buttonProps) {
   if (!form) {
     console.warn('No form element is provided');
     return;
   }
   var button = document.createElement('button');
-  button.name = buttonProps.name;
+  button.name = INTENT;
   button.value = buttonProps.value;
   button.hidden = true;
   if (buttonProps.formNoValidate) {
@@ -153,14 +181,14 @@ function requestCommand(form, buttonProps) {
 }
 
 /**
- * Returns the properties required to configure a command button for validation
+ * Returns the properties required to configure an intent button for validation
  *
  * @see https://conform.guide/api/react#validate
  */
 function validate(field) {
   return {
-    name: 'conform/validate',
-    value: field !== null && field !== void 0 ? field : '',
+    name: INTENT,
+    value: field ? "validate/".concat(field) : 'validate',
     formNoValidate: true
   };
 }
@@ -171,77 +199,80 @@ function getFormElement(element) {
   }
   return form;
 }
-function focus(field) {
-  var currentFocus = document.activeElement;
-  if (!isFieldElement(currentFocus) || currentFocus.tagName !== 'BUTTON' || currentFocus.form !== field.form) {
-    return;
-  }
-  field.focus();
-}
-function getSubmissionType(name) {
-  var prefix = 'conform/';
-  if (!name.startsWith(prefix) || name.length <= prefix.length) {
-    return null;
-  }
-  return name.slice(prefix.length);
-}
-function parse(payload) {
-  var hasCommand = false;
+function parse(payload, options) {
   var submission = {
-    type: 'submit',
-    value: {},
-    error: []
+    intent: 'submit',
+    payload: {},
+    error: {}
   };
-  try {
-    var _loop = function _loop(value, _name2) {
-      var submissionType = getSubmissionType(_name2);
-      if (submissionType) {
-        if (typeof value !== 'string') {
-          throw new Error('The conform command could not be used on a file input');
-        }
-        if (hasCommand) {
-          throw new Error('The conform command could only be set on a button');
-        }
-        submission = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission), {}, {
-          type: submissionType,
-          intent: value
-        });
-        hasCommand = true;
-      } else {
-        var paths = getPaths(_name2);
-        setValue(submission.value, paths, prev => {
-          if (!prev) {
-            return value;
-          } else if (Array.isArray(prev)) {
-            return prev.concat(value);
-          } else {
-            return [prev, value];
-          }
-        });
+  var _loop = function _loop(_value) {
+    if (_name2 === INTENT) {
+      if (typeof _value !== 'string' || submission.intent !== 'submit') {
+        throw new Error('The intent could only be set on a button');
       }
-    };
-    for (var [_name2, value] of payload.entries()) {
-      _loop(value, _name2);
-    }
-    switch (submission.type) {
-      case 'list':
-        submission = handleList(submission);
-        break;
+      submission.intent = _value;
+    } else {
+      var _paths = getPaths(_name2);
+      setValue(submission.payload, _paths, prev => {
+        if (!prev) {
+          return _value;
+        } else if (Array.isArray(prev)) {
+          return prev.concat(_value);
+        } else {
+          return [prev, _value];
+        }
+      });
     }
-  } catch (e) {
-    submission.error.push(['', e instanceof Error ? e.message : 'Invalid payload received']);
+  };
+  for (var [_name2, _value] of payload.entries()) {
+    _loop(_value);
+  }
+  var command = parseListCommand(submission.intent);
+  if (command) {
+    var paths = getPaths(command.scope);
+    setValue(submission.payload, paths, list => {
+      if (typeof list !== 'undefined' && !Array.isArray(list)) {
+        throw new Error('The list command can only be applied to a list');
+      }
+      return updateList(list !== null && list !== void 0 ? list : [], command);
+    });
   }
-  return submission;
+  if (typeof (options === null || options === void 0 ? void 0 : options.resolve) === 'undefined') {
+    return submission;
+  }
+  var result = options.resolve(submission.payload, submission.intent);
+  var mergeResolveResult = resolved => {
+    var result = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission), resolved), {}, {
+      toJSON() {
+        return {
+          intent: this.intent,
+          payload: this.payload,
+          error: this.error
+        };
+      }
+    });
+    return result;
+  };
+  if (result instanceof Promise) {
+    return result.then(mergeResolveResult);
+  }
+  return mergeResolveResult(result);
 }
-function parseListCommand(data) {
+function parseListCommand(intent) {
   try {
-    var command = JSON.parse(data);
-    if (typeof command.type !== 'string' || !['prepend', 'append', 'replace', 'remove', 'reorder', 'combine'].includes(command.type)) {
-      throw new Error("Unknown list command received: ".concat(command.type));
+    var [group, type, scope, json] = intent.split('/');
+    if (group !== 'list' || !['prepend', 'append', 'replace', 'remove', 'reorder'].includes(type) || !scope) {
+      return null;
     }
-    return command;
+    var _payload = JSON.parse(json);
+    return {
+      // @ts-expect-error
+      type,
+      scope,
+      payload: _payload
+    };
   } catch (error) {
-    throw new Error("Invalid list command: \"".concat(data, "\"; ").concat(error));
+    return null;
   }
 }
 function updateList(list, command) {
@@ -272,23 +303,8 @@ function updateList(list, command) {
   }
   return list;
 }
-function handleList(submission) {
-  var _submission$intent;
-  if (submission.type !== 'list') {
-    return submission;
-  }
-  var command = parseListCommand((_submission$intent = submission.intent) !== null && _submission$intent !== void 0 ? _submission$intent : '');
-  var paths = getPaths(command.scope);
-  setValue(submission.value, paths, list => {
-    if (typeof list !== 'undefined' && !Array.isArray(list)) {
-      throw new Error('The list command can only be applied to a list');
-    }
-    return updateList(list !== null && list !== void 0 ? list : [], command);
-  });
-  return submission;
-}
 /**
- * Helpers to configure a command button for modifying a list
+ * Helpers to configure an intent button for modifying a list
  *
  * @see https://conform.guide/api/react#list
  */
@@ -303,12 +319,8 @@ var list = new Proxy({}, {
         return function (scope) {
           var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
           return {
-            name: 'conform/list',
-            value: JSON.stringify({
-              type,
-              scope,
-              payload
-            }),
+            name: INTENT,
+            value: "list/".concat(type, "/").concat(scope, "/").concat(JSON.stringify(payload)),
             formNoValidate: true
           };
         };
@@ -316,23 +328,107 @@ var list = new Proxy({}, {
   }
 });
 
-exports.focus = focus;
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+function validateConstraint(options) {
+  var _options$formData, _options$formatMessag;
+  var formData = (_options$formData = options === null || options === void 0 ? void 0 : options.formData) !== null && _options$formData !== void 0 ? _options$formData : new FormData(options.form);
+  var getDefaultErrors = (validity, result) => {
+    var errors = [];
+    if (validity.valueMissing) errors.push('required');
+    if (validity.typeMismatch || validity.badInput) errors.push('type');
+    if (validity.tooShort) errors.push('minLength');
+    if (validity.rangeUnderflow) errors.push('min');
+    if (validity.stepMismatch) errors.push('step');
+    if (validity.tooLong) errors.push('maxLength');
+    if (validity.rangeOverflow) errors.push('max');
+    if (validity.patternMismatch) errors.push('pattern');
+    for (var [constraintName, valid] of Object.entries(result)) {
+      if (!valid) {
+        errors.push(constraintName);
+      }
+    }
+    return errors;
+  };
+  var formatMessages = (_options$formatMessag = options === null || options === void 0 ? void 0 : options.formatMessages) !== null && _options$formatMessag !== void 0 ? _options$formatMessag : _ref3 => {
+    var {
+      defaultErrors
+    } = _ref3;
+    return defaultErrors;
+  };
+  return parse(formData, {
+    resolve(payload, intent) {
+      var error = {};
+      var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
+      var _loop2 = function _loop2(element) {
+        if (isFieldElement(element)) {
+          var _options$acceptMultip, _options$acceptMultip2;
+          var _name3 = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+          var constraint = Object.entries(element.dataset).reduce((result, _ref4) => {
+            var [name, attributeValue = ''] = _ref4;
+            if (constraintPattern.test(name)) {
+              var _options$constraint;
+              var constraintName = name.slice(10).toLowerCase();
+              var _validate = (_options$constraint = options.constraint) === null || _options$constraint === void 0 ? void 0 : _options$constraint[constraintName];
+              if (typeof _validate === 'function') {
+                result[constraintName] = _validate(element.value, {
+                  formData,
+                  attributeValue
+                });
+              } else {
+                console.warn("Found an \"".concat(constraintName, "\" constraint with undefined definition; Please specify it on the validateConstraint API."));
+              }
+            }
+            return result;
+          }, {});
+          var errors = formatMessages({
+            name: _name3,
+            validity: element.validity,
+            constraint,
+            defaultErrors: getDefaultErrors(element.validity, constraint)
+          });
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+            name: _name3,
+            payload,
+            intent
+          })) !== null && _options$acceptMultip !== void 0 ? _options$acceptMultip : false;
+          if (errors.length > 0) {
+            error[_name3] = shouldAcceptMultipleErrors ? errors : errors[0];
+          }
+        }
+      };
+      for (var element of options.form.elements) {
+        _loop2(element);
+      }
+      return {
+        error
+      };
+    }
+  });
+}
+
+exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
+exports.INTENT = INTENT;
+exports.VALIDATION_SKIPPED = VALIDATION_SKIPPED;
+exports.VALIDATION_UNDEFINED = VALIDATION_UNDEFINED;
+exports.getErrors = getErrors;
+exports.getFormAttributes = getFormAttributes;
 exports.getFormData = getFormData;
 exports.getFormElement = getFormElement;
-exports.getFormElements = getFormElements;
 exports.getName = getName;
 exports.getPaths = getPaths;
-exports.getSubmissionType = getSubmissionType;
-exports.handleList = handleList;
-exports.hasError = hasError;
+exports.getScope = getScope;
+exports.getValidationMessage = getValidationMessage;
 exports.isFieldElement = isFieldElement;
+exports.isFocusedOnIntentButton = isFocusedOnIntentButton;
 exports.list = list;
 exports.parse = parse;
 exports.parseListCommand = parseListCommand;
 exports.reportSubmission = reportSubmission;
-exports.requestCommand = requestCommand;
-exports.requestSubmit = requestSubmit;
+exports.requestIntent = requestIntent;
 exports.setValue = setValue;
-exports.shouldValidate = shouldValidate;
 exports.updateList = updateList;
 exports.validate = validate;
+exports.validateConstraint = validateConstraint;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -20,6 +20,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -32,5 +33,19 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/module/index.js

@@ -1,11 +1,17 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
 
+/**
+ * Check if the provided reference is a form element (_input_ / _select_ / _textarea_ or _button_)
+ */
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
-function getFormElements(form) {
-  return Array.from(form.elements).filter(isFieldElement);
-}
+
+/**
+ * Find the corresponding paths based on the formatted name
+ * @param name formatted name
+ * @returns paths
+ */
 function getPaths(name) {
   var pattern = /(\w*)\[(\d+)\]/;
   if (!name) {
@@ -29,6 +35,18 @@ function getFormData(form, submitter) {
   }
   return payload;
 }
+function getFormAttributes(form, submitter) {
+  var _ref, _submitter$getAttribu, _ref2, _submitter$getAttribu2, _submitter$getAttribu3;
+  var enforce = (value, list) => list.includes(value) ? value : list[0];
+  var action = (_ref = (_submitter$getAttribu = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formaction')) !== null && _submitter$getAttribu !== void 0 ? _submitter$getAttribu : form.getAttribute('action')) !== null && _ref !== void 0 ? _ref : "".concat(location.pathname).concat(location.search);
+  var method = (_ref2 = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.getAttribute('method')) !== null && _ref2 !== void 0 ? _ref2 : 'get';
+  var encType = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.enctype;
+  return {
+    action,
+    encType: enforce(encType, ['application/x-www-form-urlencoded', 'multipart/form-data']),
+    method: enforce(method, ['get', 'post', 'put', 'patch', 'delete'])
+  };
+}
 function getName(paths) {
   return paths.reduce((name, path) => {
     if (typeof path === 'number') {
@@ -40,61 +58,85 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function shouldValidate(submission, name) {
-  return submission.type === 'submit' || submission.type === 'validate' && (submission.intent === '' || submission.intent === name);
+function getScope(intent) {
+  var _parseListCommand$sco, _parseListCommand;
+  var [type, ...rest] = intent.split('/');
+  switch (type) {
+    case 'validate':
+      return rest.length > 0 ? rest.join('/') : null;
+    case 'list':
+      return (_parseListCommand$sco = (_parseListCommand = parseListCommand(intent)) === null || _parseListCommand === void 0 ? void 0 : _parseListCommand.scope) !== null && _parseListCommand$sco !== void 0 ? _parseListCommand$sco : null;
+    default:
+      return null;
+  }
+}
+function isFocusedOnIntentButton(form, intent) {
+  var element = document.activeElement;
+  return isFieldElement(element) && element.tagName === 'BUTTON' && element.form === form && element.name === INTENT && element.value === intent;
 }
-function hasError(error, name) {
-  return typeof error.find(_ref => {
-    var [fieldName, message] = _ref;
-    return (typeof name === 'undefined' || name === fieldName) && message !== '';
-  }) !== 'undefined';
+function getValidationMessage(errors) {
+  return [].concat(errors !== null && errors !== void 0 ? errors : []).join(String.fromCharCode(31));
 }
+function getErrors(message) {
+  if (!message) {
+    return [];
+  }
+  return message.split(String.fromCharCode(31));
+}
+var FORM_ERROR_ELEMENT_NAME = '__form__';
+var INTENT = '__intent__';
+var VALIDATION_UNDEFINED = '__undefined__';
+var VALIDATION_SKIPPED = '__skipped__';
 function reportSubmission(form, submission) {
-  var messageByName = new Map();
-  for (var [_name, message] of submission.error) {
-    if (!messageByName.has(_name)) {
-      // Only keep the first error message (for now)
-      messageByName.set(_name, message);
+  for (var [_name, message] of Object.entries(submission.error)) {
+    // There is no need to create a placeholder button if all we want is to reset the error
+    if (message === '') {
+      continue;
+    }
 
-      // We can't use empty string as button name
-      // As `form.element.namedItem('')` will always returns null
-      var elementName = _name ? _name : '__form__';
-      var item = form.elements.namedItem(elementName);
-      if (item instanceof RadioNodeList) {
-        for (var field of item) {
-          if (field.type !== 'radio') {
-            throw new Error('Repeated field name is not supported');
-          }
+    // We can't use empty string as button name
+    // As `form.element.namedItem('')` will always returns null
+    var elementName = _name ? _name : FORM_ERROR_ELEMENT_NAME;
+    var item = form.elements.namedItem(elementName);
+    if (item instanceof RadioNodeList) {
+      for (var field of item) {
+        if (field.type !== 'radio') {
+          console.warn('Repeated field name is not supported.');
+          continue;
         }
       }
-      if (item === null) {
-        // Create placeholder button to keep the error without contributing to the form data
-        var button = document.createElement('button');
-        button.name = elementName;
-        button.hidden = true;
-        button.dataset.conformTouched = 'true';
-        item = button;
-        form.appendChild(button);
-      }
+    }
+    if (item === null) {
+      // Create placeholder button to keep the error without contributing to the form data
+      var button = document.createElement('button');
+      button.name = elementName;
+      button.hidden = true;
+      button.dataset.conformTouched = 'true';
+      form.appendChild(button);
     }
   }
+  var focusedFirstInvalidField = false;
+  var scope = getScope(submission.intent);
+  var isSubmitting = submission.intent.slice(0, submission.intent.indexOf('/')) !== 'validate' && parseListCommand(submission.intent) === null;
   for (var element of form.elements) {
     if (isFieldElement(element) && element.willValidate) {
-      var _elementName = element.name !== '__form__' ? element.name : '';
-      var _message = messageByName.get(_elementName);
-      var elementShouldValidate = shouldValidate(submission, _elementName);
-      if (elementShouldValidate) {
+      var _submission$error$_el;
+      var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+      var messages = [].concat((_submission$error$_el = submission.error[_elementName]) !== null && _submission$error$_el !== void 0 ? _submission$error$_el : []);
+      var shouldValidate = scope === null || scope === _elementName;
+      if (shouldValidate) {
         element.dataset.conformTouched = 'true';
       }
-      if (typeof _message !== 'undefined' || elementShouldValidate) {
+      if (!messages.includes(VALIDATION_SKIPPED) && !messages.includes(VALIDATION_UNDEFINED)) {
         var invalidEvent = new Event('invalid', {
           cancelable: true
         });
-        element.setCustomValidity(_message !== null && _message !== void 0 ? _message : '');
+        element.setCustomValidity(getValidationMessage(messages));
         element.dispatchEvent(invalidEvent);
       }
-      if (elementShouldValidate && !element.validity.valid) {
-        focus(element);
+      if (!focusedFirstInvalidField && (isSubmitting || isFocusedOnIntentButton(form, submission.intent)) && shouldValidate && element.tagName !== 'BUTTON' && !element.validity.valid) {
+        element.focus();
+        focusedFirstInvalidField = true;
       }
     }
   }
@@ -115,29 +157,15 @@ function setValue(target, paths, valueFn) {
 }
 
 /**
- * The ponyfill of `HTMLFormElement.requestSubmit()`
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
- * @see https://caniuse.com/?search=requestSubmit
+ * Creates an intent button on demand and trigger a form submit by clicking it.
  */
-function requestSubmit(form, submitter) {
-  var submitEvent = new SubmitEvent('submit', {
-    bubbles: true,
-    cancelable: true,
-    submitter
-  });
-  form.dispatchEvent(submitEvent);
-}
-
-/**
- * Creates a command button on demand and trigger a form submit by clicking it.
- */
-function requestCommand(form, buttonProps) {
+function requestIntent(form, buttonProps) {
   if (!form) {
     console.warn('No form element is provided');
     return;
   }
   var button = document.createElement('button');
-  button.name = buttonProps.name;
+  button.name = INTENT;
   button.value = buttonProps.value;
   button.hidden = true;
   if (buttonProps.formNoValidate) {
@@ -149,14 +177,14 @@ function requestCommand(form, buttonProps) {
 }
 
 /**
- * Returns the properties required to configure a command button for validation
+ * Returns the properties required to configure an intent button for validation
  *
  * @see https://conform.guide/api/react#validate
  */
 function validate(field) {
   return {
-    name: 'conform/validate',
-    value: field !== null && field !== void 0 ? field : '',
+    name: INTENT,
+    value: field ? "validate/".concat(field) : 'validate',
     formNoValidate: true
   };
 }
@@ -167,77 +195,80 @@ function getFormElement(element) {
   }
   return form;
 }
-function focus(field) {
-  var currentFocus = document.activeElement;
-  if (!isFieldElement(currentFocus) || currentFocus.tagName !== 'BUTTON' || currentFocus.form !== field.form) {
-    return;
-  }
-  field.focus();
-}
-function getSubmissionType(name) {
-  var prefix = 'conform/';
-  if (!name.startsWith(prefix) || name.length <= prefix.length) {
-    return null;
-  }
-  return name.slice(prefix.length);
-}
-function parse(payload) {
-  var hasCommand = false;
+function parse(payload, options) {
   var submission = {
-    type: 'submit',
-    value: {},
-    error: []
+    intent: 'submit',
+    payload: {},
+    error: {}
   };
-  try {
-    var _loop = function _loop(value, _name2) {
-      var submissionType = getSubmissionType(_name2);
-      if (submissionType) {
-        if (typeof value !== 'string') {
-          throw new Error('The conform command could not be used on a file input');
-        }
-        if (hasCommand) {
-          throw new Error('The conform command could only be set on a button');
-        }
-        submission = _objectSpread2(_objectSpread2({}, submission), {}, {
-          type: submissionType,
-          intent: value
-        });
-        hasCommand = true;
-      } else {
-        var paths = getPaths(_name2);
-        setValue(submission.value, paths, prev => {
-          if (!prev) {
-            return value;
-          } else if (Array.isArray(prev)) {
-            return prev.concat(value);
-          } else {
-            return [prev, value];
-          }
-        });
+  var _loop = function _loop(_value) {
+    if (_name2 === INTENT) {
+      if (typeof _value !== 'string' || submission.intent !== 'submit') {
+        throw new Error('The intent could only be set on a button');
       }
-    };
-    for (var [_name2, value] of payload.entries()) {
-      _loop(value, _name2);
-    }
-    switch (submission.type) {
-      case 'list':
-        submission = handleList(submission);
-        break;
+      submission.intent = _value;
+    } else {
+      var _paths = getPaths(_name2);
+      setValue(submission.payload, _paths, prev => {
+        if (!prev) {
+          return _value;
+        } else if (Array.isArray(prev)) {
+          return prev.concat(_value);
+        } else {
+          return [prev, _value];
+        }
+      });
     }
-  } catch (e) {
-    submission.error.push(['', e instanceof Error ? e.message : 'Invalid payload received']);
+  };
+  for (var [_name2, _value] of payload.entries()) {
+    _loop(_value);
+  }
+  var command = parseListCommand(submission.intent);
+  if (command) {
+    var paths = getPaths(command.scope);
+    setValue(submission.payload, paths, list => {
+      if (typeof list !== 'undefined' && !Array.isArray(list)) {
+        throw new Error('The list command can only be applied to a list');
+      }
+      return updateList(list !== null && list !== void 0 ? list : [], command);
+    });
   }
-  return submission;
+  if (typeof (options === null || options === void 0 ? void 0 : options.resolve) === 'undefined') {
+    return submission;
+  }
+  var result = options.resolve(submission.payload, submission.intent);
+  var mergeResolveResult = resolved => {
+    var result = _objectSpread2(_objectSpread2(_objectSpread2({}, submission), resolved), {}, {
+      toJSON() {
+        return {
+          intent: this.intent,
+          payload: this.payload,
+          error: this.error
+        };
+      }
+    });
+    return result;
+  };
+  if (result instanceof Promise) {
+    return result.then(mergeResolveResult);
+  }
+  return mergeResolveResult(result);
 }
-function parseListCommand(data) {
+function parseListCommand(intent) {
   try {
-    var command = JSON.parse(data);
-    if (typeof command.type !== 'string' || !['prepend', 'append', 'replace', 'remove', 'reorder', 'combine'].includes(command.type)) {
-      throw new Error("Unknown list command received: ".concat(command.type));
+    var [group, type, scope, json] = intent.split('/');
+    if (group !== 'list' || !['prepend', 'append', 'replace', 'remove', 'reorder'].includes(type) || !scope) {
+      return null;
     }
-    return command;
+    var _payload = JSON.parse(json);
+    return {
+      // @ts-expect-error
+      type,
+      scope,
+      payload: _payload
+    };
   } catch (error) {
-    throw new Error("Invalid list command: \"".concat(data, "\"; ").concat(error));
+    return null;
   }
 }
 function updateList(list, command) {
@@ -268,23 +299,8 @@ function updateList(list, command) {
   }
   return list;
 }
-function handleList(submission) {
-  var _submission$intent;
-  if (submission.type !== 'list') {
-    return submission;
-  }
-  var command = parseListCommand((_submission$intent = submission.intent) !== null && _submission$intent !== void 0 ? _submission$intent : '');
-  var paths = getPaths(command.scope);
-  setValue(submission.value, paths, list => {
-    if (typeof list !== 'undefined' && !Array.isArray(list)) {
-      throw new Error('The list command can only be applied to a list');
-    }
-    return updateList(list !== null && list !== void 0 ? list : [], command);
-  });
-  return submission;
-}
 /**
- * Helpers to configure a command button for modifying a list
+ * Helpers to configure an intent button for modifying a list
  *
  * @see https://conform.guide/api/react#list
  */
@@ -299,12 +315,8 @@ var list = new Proxy({}, {
         return function (scope) {
           var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
           return {
-            name: 'conform/list',
-            value: JSON.stringify({
-              type,
-              scope,
-              payload
-            }),
+            name: INTENT,
+            value: "list/".concat(type, "/").concat(scope, "/").concat(JSON.stringify(payload)),
             formNoValidate: true
           };
         };
@@ -312,4 +324,85 @@ var list = new Proxy({}, {
   }
 });
 
-export { focus, getFormData, getFormElement, getFormElements, getName, getPaths, getSubmissionType, handleList, hasError, isFieldElement, list, parse, parseListCommand, reportSubmission, requestCommand, requestSubmit, setValue, shouldValidate, updateList, validate };
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+function validateConstraint(options) {
+  var _options$formData, _options$formatMessag;
+  var formData = (_options$formData = options === null || options === void 0 ? void 0 : options.formData) !== null && _options$formData !== void 0 ? _options$formData : new FormData(options.form);
+  var getDefaultErrors = (validity, result) => {
+    var errors = [];
+    if (validity.valueMissing) errors.push('required');
+    if (validity.typeMismatch || validity.badInput) errors.push('type');
+    if (validity.tooShort) errors.push('minLength');
+    if (validity.rangeUnderflow) errors.push('min');
+    if (validity.stepMismatch) errors.push('step');
+    if (validity.tooLong) errors.push('maxLength');
+    if (validity.rangeOverflow) errors.push('max');
+    if (validity.patternMismatch) errors.push('pattern');
+    for (var [constraintName, valid] of Object.entries(result)) {
+      if (!valid) {
+        errors.push(constraintName);
+      }
+    }
+    return errors;
+  };
+  var formatMessages = (_options$formatMessag = options === null || options === void 0 ? void 0 : options.formatMessages) !== null && _options$formatMessag !== void 0 ? _options$formatMessag : _ref3 => {
+    var {
+      defaultErrors
+    } = _ref3;
+    return defaultErrors;
+  };
+  return parse(formData, {
+    resolve(payload, intent) {
+      var error = {};
+      var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
+      var _loop2 = function _loop2(element) {
+        if (isFieldElement(element)) {
+          var _options$acceptMultip, _options$acceptMultip2;
+          var _name3 = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+          var constraint = Object.entries(element.dataset).reduce((result, _ref4) => {
+            var [name, attributeValue = ''] = _ref4;
+            if (constraintPattern.test(name)) {
+              var _options$constraint;
+              var constraintName = name.slice(10).toLowerCase();
+              var _validate = (_options$constraint = options.constraint) === null || _options$constraint === void 0 ? void 0 : _options$constraint[constraintName];
+              if (typeof _validate === 'function') {
+                result[constraintName] = _validate(element.value, {
+                  formData,
+                  attributeValue
+                });
+              } else {
+                console.warn("Found an \"".concat(constraintName, "\" constraint with undefined definition; Please specify it on the validateConstraint API."));
+              }
+            }
+            return result;
+          }, {});
+          var errors = formatMessages({
+            name: _name3,
+            validity: element.validity,
+            constraint,
+            defaultErrors: getDefaultErrors(element.validity, constraint)
+          });
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+            name: _name3,
+            payload,
+            intent
+          })) !== null && _options$acceptMultip !== void 0 ? _options$acceptMultip : false;
+          if (errors.length > 0) {
+            error[_name3] = shouldAcceptMultipleErrors ? errors : errors[0];
+          }
+        }
+      };
+      for (var element of options.form.elements) {
+        _loop2(element);
+      }
+      return {
+        error
+      };
+    }
+  });
+}
+
+export { FORM_ERROR_ELEMENT_NAME, INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED, getErrors, getFormAttributes, getFormData, getFormElement, getName, getPaths, getScope, getValidationMessage, isFieldElement, isFocusedOnIntentButton, list, parse, parseListCommand, reportSubmission, requestIntent, setValue, updateList, validate, validateConstraint };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/dom",
 	"description": "A set of opinionated helpers built on top of the Constraint Validation API",
 	"license": "MIT",
-	"version": "0.5.1",
+	"version": "0.6.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {