@conform-to/dom 0.6.1 → 0.6.2

package/module/dom.js

@@ -0,0 +1,155 @@
+/**
+ * A type guard to check if the provided reference is a form control element, including
+ * `input`, `select`, `textarea` or `button`
+ */
+function isFormControl(element) {
+  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
+}
+
+/**
+ * A type guard to check if the provided reference is a focusable form control element.
+ */
+function isFocusableFormControl(element) {
+  return isFormControl(element) && element.willValidate && element.type !== 'submit';
+}
+
+/**
+ * Resolves the form action based on the submit event
+ */
+function getFormAction(event) {
+  var _ref, _submitter$getAttribu;
+  var form = event.target;
+  var submitter = event.submitter;
+  return (_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);
+}
+
+/**
+ * Resolves the form encoding type based on the submit event
+ */
+function getFormEncType(event) {
+  var _submitter$getAttribu2;
+  var form = event.target;
+  var submitter = event.submitter;
+  var encType = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.enctype;
+  if (['application/x-www-form-urlencoded', 'multipart/form-data'].includes(encType)) {
+    return encType;
+  }
+  return 'application/x-www-form-urlencoded';
+}
+
+/**
+ * Resolves the form method based on the submit event
+ */
+function getFormMethod(event) {
+  var _submitter$getAttribu3;
+  var form = event.target;
+  var submitter = event.submitter;
+  var method = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.getAttribute('method');
+  if (['get', 'post', 'put', 'patch', 'delete'].includes(method)) {
+    return method;
+  }
+  return 'get';
+}
+
+/**
+ * Resolve the form element
+ */
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+  if (!form) {
+    return null;
+  }
+  return form;
+}
+
+/**
+ * Returns a list of form control elements in the form
+ */
+function getFormControls(form) {
+  var formControls = [];
+  for (var element of form.elements) {
+    if (isFormControl(element)) {
+      formControls.push(element);
+    }
+  }
+  return formControls;
+}
+
+/**
+ * A function to create a submitter button element
+ */
+function createSubmitter(config) {
+  var button = document.createElement('button');
+  button.name = config.name;
+  button.value = config.value;
+  if (config.hidden) {
+    button.hidden = true;
+  }
+  if (config.formAction) {
+    button.formAction = config.formAction;
+  }
+  if (config.formEnctype) {
+    button.formEnctype = config.formEnctype;
+  }
+  if (config.formMethod) {
+    button.formMethod = config.formMethod;
+  }
+  if (config.formNoValidate) {
+    button.formNoValidate = true;
+  }
+  return button;
+}
+
+/**
+ * Trigger form submission with a submitter.
+ */
+function requestSubmit(form, submitter) {
+  var shouldRemoveSubmitter = false;
+  if (submitter && !submitter.isConnected) {
+    shouldRemoveSubmitter = true;
+    form.appendChild(submitter);
+  }
+  if (typeof form.requestSubmit === 'function') {
+    form.requestSubmit(submitter);
+  } else {
+    var event = new SubmitEvent('submit', {
+      bubbles: true,
+      cancelable: true,
+      submitter
+    });
+    form.dispatchEvent(event);
+  }
+  if (submitter && shouldRemoveSubmitter) {
+    form.removeChild(submitter);
+  }
+}
+
+/**
+ * Focus on the first invalid form control in the form
+ */
+function focusFirstInvalidControl(form) {
+  for (var element of form.elements) {
+    if (isFocusableFormControl(element) && !element.validity.valid) {
+      element.focus();
+      break;
+    }
+  }
+}
+
+/**
+ * Focus on the first form control with the provided name
+ */
+function focusFormControl(form, name) {
+  var element = form.elements.namedItem(name);
+  if (!element) {
+    return;
+  }
+  if (element instanceof RadioNodeList) {
+    element = element.item(0);
+  }
+  if (isFocusableFormControl(element)) {
+    element.focus();
+  }
+}
+
+export { createSubmitter, focusFirstInvalidControl, focusFormControl, getFormAction, getFormControls, getFormElement, getFormEncType, getFormMethod, isFocusableFormControl, isFormControl, requestSubmit };

package/module/formdata.js

@@ -0,0 +1,117 @@
+/**
+ * A ponyfill-like helper to get the form data with the submitter value.
+ * It does not respect the tree order nor handles the image input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#parameters
+ */
+
+function getFormData(form, submitter) {
+  var payload = new FormData(form);
+  if (submitter && submitter.type === 'submit' && submitter.name !== '') {
+    payload.append(submitter.name, submitter.value);
+  }
+  return payload;
+}
+
+/**
+ * Returns the paths from a name based on the JS syntax convention
+ * @example
+ * ```js
+ * const paths = getPaths('todos[0].content'); // ['todos', 0, 'content']
+ * ```
+ */
+function getPaths(name) {
+  var pattern = /(\w*)\[(\d+)\]/;
+  if (!name) {
+    return [];
+  }
+  return name.split('.').flatMap(key => {
+    var matches = pattern.exec(key);
+    if (!matches) {
+      return key;
+    }
+    if (matches[1] === '') {
+      return Number(matches[2]);
+    }
+    return [matches[1], Number(matches[2])];
+  });
+}
+
+/**
+ * Returns a formatted name from the paths based on the JS syntax convention
+ * @example
+ * ```js
+ * const name = formatPaths(['todos', 0, 'content']); // "todos[0].content"
+ * ```
+ */
+function formatPaths(paths) {
+  return paths.reduce((name, path) => {
+    if (typeof path === 'number') {
+      return "".concat(name, "[").concat(path, "]");
+    }
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+    return [name, path].join('.');
+  }, '');
+}
+
+/**
+ * Assign a value to a target object by following the paths on the name
+ */
+function setValue(target, name, valueFn) {
+  var paths = getPaths(name);
+  var length = paths.length;
+  var lastIndex = length - 1;
+  var index = -1;
+  var pointer = target;
+  while (pointer != null && ++index < length) {
+    var _pointer$key;
+    var key = paths[index];
+    var next = paths[index + 1];
+    var newValue = index != lastIndex ? (_pointer$key = pointer[key]) !== null && _pointer$key !== void 0 ? _pointer$key : typeof next === 'number' ? [] : {} : valueFn(pointer[key]);
+    pointer[key] = newValue;
+    pointer = pointer[key];
+  }
+}
+
+/**
+ * Resolves the payload into a plain object based on the JS syntax convention
+ */
+function resolve(payload) {
+  var data = {};
+  var _loop = function _loop(value) {
+    setValue(data, name, prev => {
+      if (!prev) {
+        return value;
+      } else if (Array.isArray(prev)) {
+        return prev.concat(value);
+      } else {
+        return [prev, value];
+      }
+    });
+  };
+  for (var [name, value] of payload.entries()) {
+    _loop(value);
+  }
+  return data;
+}
+
+/**
+ * Format the error messages into a validation message
+ */
+function getValidationMessage(errors) {
+  return [].concat(errors !== null && errors !== void 0 ? errors : []).join(String.fromCharCode(31));
+}
+
+/**
+ * Retrieve the error messages from the validation message
+ */
+function getErrors(validationMessage) {
+  if (!validationMessage) {
+    return [];
+  }
+  return validationMessage.split(String.fromCharCode(31));
+}
+
+export { formatPaths, getErrors, getFormData, getPaths, getValidationMessage, resolve, setValue };

package/module/index.js

@@ -1,408 +1,4 @@
-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');
-}
-
-/**
- * Find the corresponding paths based on the formatted name
- * @param name formatted name
- * @returns paths
- */
-function getPaths(name) {
-  var pattern = /(\w*)\[(\d+)\]/;
-  if (!name) {
-    return [];
-  }
-  return name.split('.').flatMap(key => {
-    var matches = pattern.exec(key);
-    if (!matches) {
-      return key;
-    }
-    if (matches[1] === '') {
-      return Number(matches[2]);
-    }
-    return [matches[1], Number(matches[2])];
-  });
-}
-function getFormData(form, submitter) {
-  var payload = new FormData(form);
-  if (submitter !== null && submitter !== void 0 && submitter.name) {
-    payload.append(submitter.name, submitter.value);
-  }
-  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') {
-      return "".concat(name, "[").concat(path, "]");
-    }
-    if (name === '' || path === '') {
-      return [name, path].join('');
-    }
-    return [name, path].join('.');
-  }, '');
-}
-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 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) {
-  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_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';
-      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 _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 (!messages.includes(VALIDATION_SKIPPED) && !messages.includes(VALIDATION_UNDEFINED)) {
-        var invalidEvent = new Event('invalid', {
-          cancelable: true
-        });
-        element.setCustomValidity(getValidationMessage(messages));
-        element.dispatchEvent(invalidEvent);
-      }
-      if (!focusedFirstInvalidField && (isSubmitting || isFocusedOnIntentButton(form, submission.intent)) && shouldValidate && element.tagName !== 'BUTTON' && !element.validity.valid) {
-        element.focus();
-        focusedFirstInvalidField = true;
-      }
-    }
-  }
-}
-function setValue(target, paths, valueFn) {
-  var length = paths.length;
-  var lastIndex = length - 1;
-  var index = -1;
-  var pointer = target;
-  while (pointer != null && ++index < length) {
-    var _pointer$key;
-    var key = paths[index];
-    var next = paths[index + 1];
-    var newValue = index != lastIndex ? (_pointer$key = pointer[key]) !== null && _pointer$key !== void 0 ? _pointer$key : typeof next === 'number' ? [] : {} : valueFn(pointer[key]);
-    pointer[key] = newValue;
-    pointer = pointer[key];
-  }
-}
-
-/**
- * Creates an intent button on demand and trigger a form submit by clicking it.
- */
-function requestIntent(form, buttonProps) {
-  if (!form) {
-    console.warn('No form element is provided');
-    return;
-  }
-  var button = document.createElement('button');
-  button.name = INTENT;
-  button.value = buttonProps.value;
-  button.hidden = true;
-  if (buttonProps.formNoValidate) {
-    button.formNoValidate = true;
-  }
-  form.appendChild(button);
-  button.click();
-  form.removeChild(button);
-}
-
-/**
- * Returns the properties required to configure an intent button for validation
- *
- * @see https://conform.guide/api/react#validate
- */
-function validate(field) {
-  return {
-    name: INTENT,
-    value: field ? "validate/".concat(field) : 'validate',
-    formNoValidate: true
-  };
-}
-function getFormElement(element) {
-  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
-  if (!form) {
-    return null;
-  }
-  return form;
-}
-function parse(payload, options) {
-  var submission = {
-    intent: 'submit',
-    payload: {},
-    error: {}
-  };
-  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');
-      }
-      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];
-        }
-      });
-    }
-  };
-  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);
-    });
-  }
-  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(intent) {
-  try {
-    var [group, type, scope, json] = intent.split('/');
-    if (group !== 'list' || !['prepend', 'append', 'replace', 'remove', 'reorder'].includes(type) || !scope) {
-      return null;
-    }
-    var _payload = JSON.parse(json);
-    return {
-      // @ts-expect-error
-      type,
-      scope,
-      payload: _payload
-    };
-  } catch (error) {
-    return null;
-  }
-}
-function updateList(list, command) {
-  switch (command.type) {
-    case 'prepend':
-      {
-        list.unshift(command.payload.defaultValue);
-        break;
-      }
-    case 'append':
-      {
-        list.push(command.payload.defaultValue);
-        break;
-      }
-    case 'replace':
-      {
-        list.splice(command.payload.index, 1, command.payload.defaultValue);
-        break;
-      }
-    case 'remove':
-      list.splice(command.payload.index, 1);
-      break;
-    case 'reorder':
-      list.splice(command.payload.to, 0, ...list.splice(command.payload.from, 1));
-      break;
-    default:
-      throw new Error('Unknown list command received');
-  }
-  return list;
-}
-/**
- * Helpers to configure an intent button for modifying a list
- *
- * @see https://conform.guide/api/react#list
- */
-var list = new Proxy({}, {
-  get(_target, type) {
-    switch (type) {
-      case 'append':
-      case 'prepend':
-      case 'replace':
-      case 'remove':
-      case 'reorder':
-        return function (scope) {
-          var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-          return {
-            name: INTENT,
-            value: "list/".concat(type, "/").concat(scope, "/").concat(JSON.stringify(payload)),
-            formNoValidate: true
-          };
-        };
-    }
-  }
-});
-
-/**
- * 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 };
+export { createSubmitter, focusFirstInvalidControl, focusFormControl, getFormAction, getFormControls, getFormElement, getFormEncType, getFormMethod, isFormControl as isFieldElement, isFocusableFormControl, requestSubmit } from './dom.js';
+export { getErrors, getFormData, formatPaths as getName, getPaths, getValidationMessage } from './formdata.js';
+export { INTENT, getScope, isSubmitting, list, parseListCommand, requestIntent, updateList, validate } from './intent.js';
+export { parse } from './parse.js';