@conform-to/dom 0.2.0 → 0.3.0-pre.0

package/README.md

@@ -4,24 +4,22 @@
 
 ## API Reference
 
-- [getControlButtonProps](#getControlButtonProps)
 - [getFieldProps](#getFieldProps)
-- [getFieldElements](#getFieldElements)
+- [getFieldsetData](#getFieldsetData)
 - [getName](#getName)
 - [getPaths](#getPaths)
 - [isFieldElement](#isFieldElement)
+- [isFieldsetField](#isFieldsetField)
 - [parse](#parse)
 - [reportValidity](#reportValidity)
 - [setFieldState](#setFieldState)
+- [setFieldsetError](#setFieldsetError)
 - [shouldSkipValidate](#shouldSkipValidate)
-- [setFieldState](#setFieldState)
 - [transform](#transform)
 
-### getControlButtonProps
-
 ### getFieldProps
 
-### getFieldElements
+### getFieldsetData
 
 ### getName
 
@@ -29,7 +27,7 @@
 
 ### isFieldElement
 
-### isFieldsetElement
+### isFieldsetField
 
 ### parse
 
@@ -37,6 +35,8 @@
 
 ### setFieldState
 
+### setFieldsetError
+
 ### shouldSkipValidate
 
 ### transform

package/index.d.ts

@@ -1,4 +1,21 @@
-export declare type Constraint = {
+export declare type Primitive = null | undefined | string | number | boolean | Date;
+export declare type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+export interface FieldConfig<Schema = unknown> extends FieldConstraint {
+    name: string;
+    defaultValue?: FieldValue<Schema>;
+    initialError?: FieldError<Schema>['details'];
+    form?: string;
+}
+export declare type FieldValue<Schema> = Schema extends Primitive | File ? string : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
+    [Key in keyof Schema]?: FieldValue<Schema[Key]>;
+} : unknown;
+export interface FieldError<Schema> {
+    message?: string;
+    details?: Schema extends Primitive | File ? never : Schema extends Array<infer InnerType> ? Array<FieldError<InnerType>> : Schema extends Record<string, any> ? {
+        [Key in keyof Schema]?: FieldError<Schema[Key]>;
+    } : unknown;
+}
+export declare type FieldConstraint = {
     required?: boolean;
     minLength?: number;
     maxLength?: number;
@@ -8,36 +25,18 @@ export declare type Constraint = {
     multiple?: boolean;
     pattern?: string;
 };
-export interface FieldProps<Type = any> extends Constraint {
-    name: string;
-    defaultValue?: FieldsetData<Type, string>;
-    error?: FieldsetData<Type, string>;
-    form?: string;
-}
-export declare type Schema<Type extends Record<string, any>> = {
-    fields: {
-        [Key in keyof Type]-?: Constraint;
-    };
-    validate?: (element: FieldsetElement) => void;
+export declare type FieldsetConstraint<Schema extends Record<string, any>> = {
+    [Key in keyof Schema]?: FieldConstraint;
 };
-/**
- * Data structure of the form value
- */
-export declare type FieldsetData<Type, Value> = Type extends string | number | Date | boolean | undefined ? Value : Type extends Array<infer InnerType> ? Array<FieldsetData<InnerType, Value>> : Type extends Object ? {
-    [Key in keyof Type]?: FieldsetData<Type[Key], Value>;
-} : unknown;
-/**
- * Element that maintains a list of fields
- * i.e. fieldset.elements
- */
-export declare type FieldsetElement = HTMLFormElement | HTMLFieldSetElement;
-/**
- * Element type that might be a candiate of Constraint Validation
- */
-export declare type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
-export interface FormState<T> {
-    value: FieldsetData<T, string>;
-    error: FieldsetData<T, string>;
+export declare type Schema<Shape extends Record<string, any>, Source> = {
+    source: Source;
+    constraint: FieldsetConstraint<Shape>;
+    validate: (element: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null) => void;
+    parse: (payload: FormData | URLSearchParams) => Submission<Shape>;
+};
+export interface FormState<Schema extends Record<string, any>> {
+    value: FieldValue<Schema>;
+    error: FieldError<Schema>;
 }
 export declare type Submission<T extends Record<string, unknown>> = {
     state: 'modified';
@@ -50,50 +49,48 @@ export declare type Submission<T extends Record<string, unknown>> = {
     data: T;
     form: FormState<T>;
 };
-export interface ControlButtonProps {
-    type: 'submit';
-    name: string;
-    value: string;
-    formNoValidate: boolean;
-}
-export interface ControlAction<T = unknown> {
-    prepend: {
-        defaultValue: T;
+export declare function isFieldElement(element: unknown): element is FieldElement;
+export declare function getPaths(name?: string): Array<string | number>;
+export declare function getFormData(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): FormData;
+export declare function getName(paths: Array<string | number>): string;
+export declare function getKey(fieldName: string, fieldsetName?: string): string | null;
+export declare function setFormError(form: HTMLFormElement, errors: Array<[string, string]>): void;
+export declare function setValue<T>(target: any, paths: Array<string | number>, valueFn: (prev?: T) => T): void;
+export declare function flatten(data: unknown, prefix?: string): Array<[string, FormDataEntryValue]>;
+export declare function unflatten(entries: Array<[string, FormDataEntryValue]> | Iterable<[string, FormDataEntryValue]>): Record<string, unknown>;
+export declare function createSubmission(payload: FormData | URLSearchParams): Submission<Record<string, unknown>>;
+export declare function createValidate(handler: (field: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement, formData: FormData) => void): (form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null) => void;
+export declare function getFormElement(element: HTMLFormElement | HTMLFieldSetElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null): HTMLFormElement | null;
+export declare type ListCommand<Schema> = {
+    type: 'prepend';
+    payload: {
+        defaultValue: Schema;
     };
-    append: {
-        defaultValue: T;
+} | {
+    type: 'append';
+    payload: {
+        defaultValue: Schema;
     };
-    replace: {
-        defaultValue: T;
+} | {
+    type: 'replace';
+    payload: {
+        defaultValue: Schema;
         index: number;
     };
-    remove: {
+} | {
+    type: 'remove';
+    payload: {
         index: number;
     };
-    reorder: {
+} | {
+    type: 'reorder';
+    payload: {
         from: number;
         to: number;
     };
-}
-export declare function isFieldsetElement(element: unknown): element is FieldsetElement;
-export declare function isFieldElement(element: unknown): element is FieldElement;
-export declare function setFieldState(field: unknown, state: {
-    touched: boolean;
-}): void;
-export declare function reportValidity(fieldset: FieldsetElement): boolean;
-export declare function getFieldProps<Type extends Record<string, any>>(schema: Schema<Type>, options: {
-    name?: string;
-    form?: string;
-    defaultValue?: FieldsetData<Type, string>;
-    error?: FieldsetData<Type, string>;
-}): {
-    [Key in keyof Type]-?: FieldProps<Type[Key]>;
 };
-export declare function shouldSkipValidate(event: SubmitEvent): boolean;
-export declare function getPaths(name?: string): Array<string | number>;
-export declare function getName(paths: Array<string | number>): string;
-export declare function transform(entries: Array<[string, FormDataEntryValue]> | Iterable<[string, FormDataEntryValue]>): Record<string, unknown>;
-export declare function getControlButtonProps<Action extends keyof ControlAction, Payload extends ControlAction[Action]>(name: string, action: Action, payload: Payload): ControlButtonProps;
-export declare function applyControlCommand<Type, Action extends keyof ControlAction<Type>, Payload extends ControlAction<Type>[Action]>(list: Array<Type>, action: Action | string, payload: Payload): Array<Type>;
-export declare function parse(payload: FormData | URLSearchParams): Submission<Record<string, unknown>>;
-export declare function getFieldElements(fieldset: FieldsetElement, key: string): FieldElement[];
+export declare const listCommandKey = "__conform__";
+export declare function serializeListCommand<Schema>(name: string, { type, payload }: ListCommand<Schema>): string;
+export declare function parseListCommand<Schema>(serialized: string): [string, ListCommand<Schema>];
+export declare function updateList<Type>(list: Array<Type>, command: ListCommand<Type>): Array<Type>;
+export declare function applyListCommand(payload: FormData | URLSearchParams): FormData | URLSearchParams;

package/index.js

@@ -2,86 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-
-/**
- * Data structure of the form value
- */
-
-/**
- * Element that maintains a list of fields
- * i.e. fieldset.elements
- */
-
-/**
- * Element type that might be a candiate of Constraint Validation
- */
-function isFieldsetElement(element) {
-  return element instanceof Element && (element.tagName === 'FORM' || element.tagName === 'FIELDSET');
-}
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
-function setFieldState(field, state) {
-  if (isFieldsetElement(field)) {
-    for (var _element of field.elements) {
-      setFieldState(_element, state);
-    }
-
-    return;
-  }
-
-  if (!isFieldElement(field)) {
-    console.warn('Only input/select/textarea/button element can be touched');
-    return;
-  }
-
-  if (state.touched) {
-    field.dataset.touched = 'true';
-  } else {
-    delete field.dataset.touched;
-  }
-}
-function reportValidity(fieldset) {
-  var isValid = true;
-
-  for (var field of fieldset.elements) {
-    if (isFieldElement(field) && field.dataset.touched && !field.checkValidity()) {
-      isValid = false;
-    }
-  }
-
-  return isValid;
-}
-function getFieldProps(schema, options) {
-  var result = {};
-
-  for (var key of Object.keys(schema.fields)) {
-    var _options$defaultValue, _options$error;
-
-    var constraint = schema.fields[key];
-
-    var props = _rollupPluginBabelHelpers.objectSpread2({
-      name: options.name ? "".concat(options.name, ".").concat(key) : key,
-      form: options.form,
-      defaultValue: (_options$defaultValue = options.defaultValue) === null || _options$defaultValue === void 0 ? void 0 : _options$defaultValue[key],
-      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key]
-    }, constraint);
-
-    result[key] = props;
-  }
-
-  return result;
-}
-function shouldSkipValidate(event) {
-  var _event$submitter, _event$submitter2;
-
-  if (((_event$submitter = event.submitter) === null || _event$submitter === void 0 ? void 0 : _event$submitter.tagName) === 'BUTTON' || ((_event$submitter2 = event.submitter) === null || _event$submitter2 === void 0 ? void 0 : _event$submitter2.tagName) === 'INPUT') {
-    return event.submitter.formNoValidate;
-  }
-
-  return false;
-}
 function getPaths(name) {
   var pattern = /(\w+)\[(\d+)\]/;
 
@@ -99,6 +22,15 @@ function getPaths(name) {
     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 getName(paths) {
   return paths.reduce((name, path) => {
     if (name === '' || path === '') {
@@ -112,179 +44,246 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function transform(entries) {
-  var result = {};
+function getKey(fieldName) {
+  var fieldsetName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var name = fieldsetName === '' || fieldName.startsWith(fieldsetName) ? fieldName.slice(fieldsetName ? fieldsetName.length + 1 : 0) : '';
+  var paths = getPaths(name);
 
-  for (var [key, value] of entries) {
-    var paths = getPaths(key);
-    var length = paths.length;
-    var lastIndex = length - 1;
-    var index = -1;
-    var pointer = result;
+  if (paths.length > 1) {
+    return null;
+  }
 
-    while (pointer != null && ++index < length) {
-      var _key = paths[index];
-      var next = paths[index + 1];
-      var newValue = value;
+  return typeof paths[0] === 'string' ? paths[0] : null;
+}
+function setFormError(form, errors) {
+  var firstErrorByName = Object.fromEntries([...errors].reverse());
 
-      if (index != lastIndex) {
-        var _pointer$_key;
+  for (var _element of form.elements) {
+    var _firstErrorByName$_el;
 
-        newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {};
-      } // if (typeof pointer[key] !== 'undefined') {
-      // 	pointer[key] = Array.isArray(pointer[key])
-      // 		? pointer[key].concat(newValue)
-      // 		: [pointer[key], newValue];
-      // } else {
+    if (!isFieldElement(_element)) {
+      continue;
+    }
 
+    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+  }
+}
+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];
+  }
+}
+function flatten(data) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var entries = [];
+
+  if (typeof data === 'string' || typeof data === 'undefined' || data instanceof File) {
+    entries.push([prefix, data !== null && data !== void 0 ? data : '']);
+  } else if (Array.isArray(data)) {
+    for (var i = 0; i < data.length; i++) {
+      entries.push(...flatten(data[i], "".concat(prefix, "[").concat(i, "]")));
+    }
+  } else {
+    for (var [key, value] of Object.entries(Object(data))) {
+      entries.push(...flatten(value, prefix ? "".concat(prefix, ".").concat(key) : key));
+    }
+  }
 
-      pointer[_key] = newValue; // }
+  return entries;
+}
+function unflatten(entries) {
+  var result = {};
 
-      pointer = pointer[_key];
-    }
+  var _loop = function _loop(key, value) {
+    var paths = getPaths(key);
+    setValue(result, paths, prev => {
+      if (prev) {
+        throw new Error('Entry with the same name is not supported');
+      }
+
+      return value;
+    });
+  };
+
+  for (var [key, value] of entries) {
+    _loop(key, value);
   }
 
   return result;
 }
-function getControlButtonProps(name, action, payload) {
+function createSubmission(payload) {
+  var value = {};
+
+  try {
+    var modifiedPayload = applyListCommand(payload);
+    value = unflatten(modifiedPayload.entries());
+
+    if (payload !== modifiedPayload) {
+      return {
+        state: 'modified',
+        form: {
+          value,
+          error: {}
+        }
+      };
+    }
+  } catch (e) {
+    return {
+      state: 'rejected',
+      form: {
+        value,
+        error: {
+          message: e instanceof Error ? e.message : 'Submission failed'
+        }
+      }
+    };
+  }
+
   return {
-    type: 'submit',
-    name: '__conform__',
-    value: [name, action, JSON.stringify(payload)].join('::'),
-    formNoValidate: true
+    state: 'accepted',
+    data: value,
+    form: {
+      value,
+      error: {}
+    }
+  };
+}
+function createValidate(handler) {
+  return (form, submitter) => {
+    var formData = getFormData(form, submitter);
+
+    for (var _field of form.elements) {
+      if (isFieldElement(_field)) {
+        handler(_field, formData);
+      }
+    }
   };
 }
-function applyControlCommand(list, action, payload) {
-  switch (action) {
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
+  }
+
+  return form;
+}
+var listCommandKey = '__conform__';
+function serializeListCommand(name, _ref) {
+  var {
+    type,
+    payload
+  } = _ref;
+  return [name, type, JSON.stringify(payload)].join('::');
+}
+function parseListCommand(serialized) {
+  var [name, type, json] = serialized.split('::');
+  return [name, {
+    type: type,
+    payload: JSON.parse(json)
+  }];
+}
+function updateList(list, command) {
+  switch (command.type) {
     case 'prepend':
       {
-        var {
-          defaultValue
-        } = payload;
-        list.unshift(defaultValue);
+        list.unshift(command.payload.defaultValue);
         break;
       }
 
     case 'append':
       {
-        var {
-          defaultValue: _defaultValue
-        } = payload;
-        list.push(_defaultValue);
+        list.push(command.payload.defaultValue);
         break;
       }
 
     case 'replace':
       {
-        var {
-          defaultValue: _defaultValue2,
-          index: _index
-        } = payload;
-        list.splice(_index, 1, _defaultValue2);
+        list.splice(command.payload.index, 1, command.payload.defaultValue);
         break;
       }
 
     case 'remove':
-      var {
-        index
-      } = payload;
-      list.splice(index, 1);
+      list.splice(command.payload.index, 1);
       break;
 
     case 'reorder':
-      var {
-        from,
-        to
-      } = payload;
-      list.splice(to, 0, ...list.splice(from, 1));
+      list.splice(command.payload.to, 0, ...list.splice(command.payload.from, 1));
       break;
 
     default:
-      throw new Error('Invalid action found');
+      throw new Error('Invalid list command');
   }
 
   return list;
 }
-function parse(payload) {
-  var command = payload.get('__conform__');
+function applyListCommand(payload) {
+  var command = payload.get(listCommandKey);
 
-  if (command) {
-    payload.delete('__conform__');
+  if (!command) {
+    return payload;
   }
 
-  var value = transform(payload.entries());
+  payload.delete(listCommandKey);
 
-  if (command) {
-    try {
-      if (command instanceof File) {
-        throw new Error('The __conform__ key is reserved for special command and could not be used for file upload.');
-      }
+  if (command instanceof File) {
+    throw new Error("The \"".concat(listCommandKey, "\" key could not be used for file upload"));
+  }
 
-      var [name, action, json] = command.split('::');
-      var list = value;
+  var result = new FormData();
+  var entries = [];
+  var [key, listCommand] = parseListCommand(command);
 
-      for (var path of getPaths(name)) {
-        list = list[path];
+  for (var [name, value] of payload) {
+    if (name.startsWith(key)) {
+      entries.push([name.replace(key, 'list'), value]);
+    } else {
+      result.append(name, value);
+    }
+  }
 
-        if (typeof list === 'undefined') {
-          break;
-        }
-      }
+  var {
+    list
+  } = unflatten(entries);
 
-      if (!Array.isArray(list)) {
-        throw new Error('');
-      }
+  if (!Array.isArray(list)) {
+    throw new Error('The list command can only be applied to a list');
+  }
 
-      applyControlCommand(list, action, JSON.parse(json));
-    } catch (e) {
-      return {
-        state: 'rejected',
-        form: {
-          value,
-          error: {
-            __conform__: e instanceof Error ? e.message : 'Something went wrong'
-          }
-        }
-      };
-    }
+  updateList(list, listCommand);
 
-    return {
-      state: 'modified',
-      form: {
-        value,
-        error: {}
-      }
-    };
+  for (var [_name, _value] of flatten(list, key)) {
+    result.append(_name, _value);
   }
 
-  return {
-    state: 'accepted',
-    data: value,
-    form: {
-      value,
-      error: {}
-    }
-  };
-}
-function getFieldElements(fieldset, key) {
-  var _fieldset$name;
-
-  var name = getName([(_fieldset$name = fieldset.name) !== null && _fieldset$name !== void 0 ? _fieldset$name : '', key]);
-  var item = fieldset.elements.namedItem(name);
-  var nodes = item instanceof RadioNodeList ? Array.from(item) : item !== null ? [item] : [];
-  return nodes.filter(isFieldElement);
+  return result;
 }
 
-exports.applyControlCommand = applyControlCommand;
-exports.getControlButtonProps = getControlButtonProps;
-exports.getFieldElements = getFieldElements;
-exports.getFieldProps = getFieldProps;
+exports.applyListCommand = applyListCommand;
+exports.createSubmission = createSubmission;
+exports.createValidate = createValidate;
+exports.flatten = flatten;
+exports.getFormData = getFormData;
+exports.getFormElement = getFormElement;
+exports.getKey = getKey;
 exports.getName = getName;
 exports.getPaths = getPaths;
 exports.isFieldElement = isFieldElement;
-exports.isFieldsetElement = isFieldsetElement;
-exports.parse = parse;
-exports.reportValidity = reportValidity;
-exports.setFieldState = setFieldState;
-exports.shouldSkipValidate = shouldSkipValidate;
-exports.transform = transform;
+exports.listCommandKey = listCommandKey;
+exports.parseListCommand = parseListCommand;
+exports.serializeListCommand = serializeListCommand;
+exports.setFormError = setFormError;
+exports.setValue = setValue;
+exports.unflatten = unflatten;
+exports.updateList = updateList;

package/module/index.js

@@ -1,83 +1,6 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-
-/**
- * Data structure of the form value
- */
-
-/**
- * Element that maintains a list of fields
- * i.e. fieldset.elements
- */
-
-/**
- * Element type that might be a candiate of Constraint Validation
- */
-function isFieldsetElement(element) {
-  return element instanceof Element && (element.tagName === 'FORM' || element.tagName === 'FIELDSET');
-}
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
-function setFieldState(field, state) {
-  if (isFieldsetElement(field)) {
-    for (var _element of field.elements) {
-      setFieldState(_element, state);
-    }
-
-    return;
-  }
-
-  if (!isFieldElement(field)) {
-    console.warn('Only input/select/textarea/button element can be touched');
-    return;
-  }
-
-  if (state.touched) {
-    field.dataset.touched = 'true';
-  } else {
-    delete field.dataset.touched;
-  }
-}
-function reportValidity(fieldset) {
-  var isValid = true;
-
-  for (var field of fieldset.elements) {
-    if (isFieldElement(field) && field.dataset.touched && !field.checkValidity()) {
-      isValid = false;
-    }
-  }
-
-  return isValid;
-}
-function getFieldProps(schema, options) {
-  var result = {};
-
-  for (var key of Object.keys(schema.fields)) {
-    var _options$defaultValue, _options$error;
-
-    var constraint = schema.fields[key];
-
-    var props = _objectSpread2({
-      name: options.name ? "".concat(options.name, ".").concat(key) : key,
-      form: options.form,
-      defaultValue: (_options$defaultValue = options.defaultValue) === null || _options$defaultValue === void 0 ? void 0 : _options$defaultValue[key],
-      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key]
-    }, constraint);
-
-    result[key] = props;
-  }
-
-  return result;
-}
-function shouldSkipValidate(event) {
-  var _event$submitter, _event$submitter2;
-
-  if (((_event$submitter = event.submitter) === null || _event$submitter === void 0 ? void 0 : _event$submitter.tagName) === 'BUTTON' || ((_event$submitter2 = event.submitter) === null || _event$submitter2 === void 0 ? void 0 : _event$submitter2.tagName) === 'INPUT') {
-    return event.submitter.formNoValidate;
-  }
-
-  return false;
-}
 function getPaths(name) {
   var pattern = /(\w+)\[(\d+)\]/;
 
@@ -95,6 +18,15 @@ function getPaths(name) {
     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 getName(paths) {
   return paths.reduce((name, path) => {
     if (name === '' || path === '') {
@@ -108,167 +40,230 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function transform(entries) {
-  var result = {};
+function getKey(fieldName) {
+  var fieldsetName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var name = fieldsetName === '' || fieldName.startsWith(fieldsetName) ? fieldName.slice(fieldsetName ? fieldsetName.length + 1 : 0) : '';
+  var paths = getPaths(name);
 
-  for (var [key, value] of entries) {
-    var paths = getPaths(key);
-    var length = paths.length;
-    var lastIndex = length - 1;
-    var index = -1;
-    var pointer = result;
+  if (paths.length > 1) {
+    return null;
+  }
 
-    while (pointer != null && ++index < length) {
-      var _key = paths[index];
-      var next = paths[index + 1];
-      var newValue = value;
+  return typeof paths[0] === 'string' ? paths[0] : null;
+}
+function setFormError(form, errors) {
+  var firstErrorByName = Object.fromEntries([...errors].reverse());
 
-      if (index != lastIndex) {
-        var _pointer$_key;
+  for (var _element of form.elements) {
+    var _firstErrorByName$_el;
 
-        newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {};
-      } // if (typeof pointer[key] !== 'undefined') {
-      // 	pointer[key] = Array.isArray(pointer[key])
-      // 		? pointer[key].concat(newValue)
-      // 		: [pointer[key], newValue];
-      // } else {
+    if (!isFieldElement(_element)) {
+      continue;
+    }
 
+    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+  }
+}
+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];
+  }
+}
+function flatten(data) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var entries = [];
+
+  if (typeof data === 'string' || typeof data === 'undefined' || data instanceof File) {
+    entries.push([prefix, data !== null && data !== void 0 ? data : '']);
+  } else if (Array.isArray(data)) {
+    for (var i = 0; i < data.length; i++) {
+      entries.push(...flatten(data[i], "".concat(prefix, "[").concat(i, "]")));
+    }
+  } else {
+    for (var [key, value] of Object.entries(Object(data))) {
+      entries.push(...flatten(value, prefix ? "".concat(prefix, ".").concat(key) : key));
+    }
+  }
 
-      pointer[_key] = newValue; // }
+  return entries;
+}
+function unflatten(entries) {
+  var result = {};
 
-      pointer = pointer[_key];
-    }
+  var _loop = function _loop(key, value) {
+    var paths = getPaths(key);
+    setValue(result, paths, prev => {
+      if (prev) {
+        throw new Error('Entry with the same name is not supported');
+      }
+
+      return value;
+    });
+  };
+
+  for (var [key, value] of entries) {
+    _loop(key, value);
   }
 
   return result;
 }
-function getControlButtonProps(name, action, payload) {
+function createSubmission(payload) {
+  var value = {};
+
+  try {
+    var modifiedPayload = applyListCommand(payload);
+    value = unflatten(modifiedPayload.entries());
+
+    if (payload !== modifiedPayload) {
+      return {
+        state: 'modified',
+        form: {
+          value,
+          error: {}
+        }
+      };
+    }
+  } catch (e) {
+    return {
+      state: 'rejected',
+      form: {
+        value,
+        error: {
+          message: e instanceof Error ? e.message : 'Submission failed'
+        }
+      }
+    };
+  }
+
   return {
-    type: 'submit',
-    name: '__conform__',
-    value: [name, action, JSON.stringify(payload)].join('::'),
-    formNoValidate: true
+    state: 'accepted',
+    data: value,
+    form: {
+      value,
+      error: {}
+    }
+  };
+}
+function createValidate(handler) {
+  return (form, submitter) => {
+    var formData = getFormData(form, submitter);
+
+    for (var _field of form.elements) {
+      if (isFieldElement(_field)) {
+        handler(_field, formData);
+      }
+    }
   };
 }
-function applyControlCommand(list, action, payload) {
-  switch (action) {
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
+  }
+
+  return form;
+}
+var listCommandKey = '__conform__';
+function serializeListCommand(name, _ref) {
+  var {
+    type,
+    payload
+  } = _ref;
+  return [name, type, JSON.stringify(payload)].join('::');
+}
+function parseListCommand(serialized) {
+  var [name, type, json] = serialized.split('::');
+  return [name, {
+    type: type,
+    payload: JSON.parse(json)
+  }];
+}
+function updateList(list, command) {
+  switch (command.type) {
     case 'prepend':
       {
-        var {
-          defaultValue
-        } = payload;
-        list.unshift(defaultValue);
+        list.unshift(command.payload.defaultValue);
         break;
       }
 
     case 'append':
       {
-        var {
-          defaultValue: _defaultValue
-        } = payload;
-        list.push(_defaultValue);
+        list.push(command.payload.defaultValue);
         break;
       }
 
     case 'replace':
       {
-        var {
-          defaultValue: _defaultValue2,
-          index: _index
-        } = payload;
-        list.splice(_index, 1, _defaultValue2);
+        list.splice(command.payload.index, 1, command.payload.defaultValue);
         break;
       }
 
     case 'remove':
-      var {
-        index
-      } = payload;
-      list.splice(index, 1);
+      list.splice(command.payload.index, 1);
       break;
 
     case 'reorder':
-      var {
-        from,
-        to
-      } = payload;
-      list.splice(to, 0, ...list.splice(from, 1));
+      list.splice(command.payload.to, 0, ...list.splice(command.payload.from, 1));
       break;
 
     default:
-      throw new Error('Invalid action found');
+      throw new Error('Invalid list command');
   }
 
   return list;
 }
-function parse(payload) {
-  var command = payload.get('__conform__');
+function applyListCommand(payload) {
+  var command = payload.get(listCommandKey);
 
-  if (command) {
-    payload.delete('__conform__');
+  if (!command) {
+    return payload;
   }
 
-  var value = transform(payload.entries());
+  payload.delete(listCommandKey);
 
-  if (command) {
-    try {
-      if (command instanceof File) {
-        throw new Error('The __conform__ key is reserved for special command and could not be used for file upload.');
-      }
+  if (command instanceof File) {
+    throw new Error("The \"".concat(listCommandKey, "\" key could not be used for file upload"));
+  }
 
-      var [name, action, json] = command.split('::');
-      var list = value;
+  var result = new FormData();
+  var entries = [];
+  var [key, listCommand] = parseListCommand(command);
 
-      for (var path of getPaths(name)) {
-        list = list[path];
+  for (var [name, value] of payload) {
+    if (name.startsWith(key)) {
+      entries.push([name.replace(key, 'list'), value]);
+    } else {
+      result.append(name, value);
+    }
+  }
 
-        if (typeof list === 'undefined') {
-          break;
-        }
-      }
+  var {
+    list
+  } = unflatten(entries);
 
-      if (!Array.isArray(list)) {
-        throw new Error('');
-      }
+  if (!Array.isArray(list)) {
+    throw new Error('The list command can only be applied to a list');
+  }
 
-      applyControlCommand(list, action, JSON.parse(json));
-    } catch (e) {
-      return {
-        state: 'rejected',
-        form: {
-          value,
-          error: {
-            __conform__: e instanceof Error ? e.message : 'Something went wrong'
-          }
-        }
-      };
-    }
+  updateList(list, listCommand);
 
-    return {
-      state: 'modified',
-      form: {
-        value,
-        error: {}
-      }
-    };
+  for (var [_name, _value] of flatten(list, key)) {
+    result.append(_name, _value);
   }
 
-  return {
-    state: 'accepted',
-    data: value,
-    form: {
-      value,
-      error: {}
-    }
-  };
-}
-function getFieldElements(fieldset, key) {
-  var _fieldset$name;
-
-  var name = getName([(_fieldset$name = fieldset.name) !== null && _fieldset$name !== void 0 ? _fieldset$name : '', key]);
-  var item = fieldset.elements.namedItem(name);
-  var nodes = item instanceof RadioNodeList ? Array.from(item) : item !== null ? [item] : [];
-  return nodes.filter(isFieldElement);
+  return result;
 }
 
-export { applyControlCommand, getControlButtonProps, getFieldElements, getFieldProps, getName, getPaths, isFieldElement, isFieldsetElement, parse, reportValidity, setFieldState, shouldSkipValidate, transform };
+export { applyListCommand, createSubmission, createValidate, flatten, getFormData, getFormElement, getKey, getName, getPaths, isFieldElement, listCommandKey, parseListCommand, serializeListCommand, setFormError, setValue, unflatten, updateList };

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.2.0",
+	"version": "0.3.0-pre.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {