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

package/index.d.ts

@@ -3,18 +3,12 @@ export declare type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTe
 export interface FieldConfig<Schema = unknown> extends FieldConstraint {
     name: string;
     defaultValue?: FieldValue<Schema>;
-    initialError?: FieldError<Schema>['details'];
+    initialError?: Array<[string, string]>;
     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;
@@ -28,69 +22,67 @@ export declare type FieldConstraint = {
 export declare type FieldsetConstraint<Schema extends Record<string, any>> = {
     [Key in keyof Schema]?: FieldConstraint;
 };
-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>> {
+export declare type FormState<Schema = unknown> = {
+    scope: string[];
     value: FieldValue<Schema>;
-    error: FieldError<Schema>;
-}
-export declare type Submission<T extends Record<string, unknown>> = {
-    state: 'modified';
-    form: FormState<T>;
-} | {
-    state: 'rejected';
-    form: FormState<T>;
-} | {
-    state: 'accepted';
-    data: T;
-    form: FormState<T>;
+    error: Array<[string, string]>;
 };
+export declare type Submission<Schema = unknown> = FormState<Schema> & ({
+    type?: undefined;
+} | {
+    type: string;
+    data: string;
+});
 export declare function isFieldElement(element: unknown): element is FieldElement;
-export declare function getPaths(name?: string): Array<string | number>;
+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 hasError(error: Array<[string, string]>, name: string): boolean;
+export declare function reportValidity(form: HTMLFormElement, state: FormState): boolean;
 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 requestSubmit(form: HTMLFormElement, submitter?: HTMLButtonElement | HTMLInputElement): void;
+export declare function requestValidate(form: HTMLFormElement, field?: string): void;
 export declare function getFormElement(element: HTMLFormElement | HTMLFieldSetElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null): HTMLFormElement | null;
-export declare type ListCommand<Schema> = {
+export declare function focusFirstInvalidField(form: HTMLFormElement, fields?: string[]): 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 Command = {
+    name: string;
+    value: string;
+};
+export declare type ListCommand<Schema = unknown> = {
     type: 'prepend';
+    scope: string;
     payload: {
         defaultValue: Schema;
     };
 } | {
     type: 'append';
+    scope: string;
     payload: {
         defaultValue: Schema;
     };
 } | {
     type: 'replace';
+    scope: string;
     payload: {
         defaultValue: Schema;
         index: number;
     };
 } | {
     type: 'remove';
+    scope: string;
     payload: {
         index: number;
     };
 } | {
     type: 'reorder';
+    scope: string;
     payload: {
         from: number;
         to: number;
     };
 };
-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;
+export declare function parseListCommand<Schema = unknown>(data: string): ListCommand<Schema>;
+export declare function updateList<Schema>(list: Array<Schema>, command: ListCommand<Schema>): Array<Schema>;
+export declare function handleList<Schema>(submission: Submission<Schema>): Submission<Schema>;

package/index.js

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
 function getPaths(name) {
-  var pattern = /(\w+)\[(\d+)\]/;
+  var pattern = /(\w*)\[(\d+)\]/;
 
   if (!name) {
     return [];
@@ -19,6 +21,10 @@ function getPaths(name) {
       return key;
     }
 
+    if (matches[1] === '') {
+      return Number(matches[2]);
+    }
+
     return [matches[1], Number(matches[2])];
   });
 }
@@ -33,40 +39,37 @@ function getFormData(form, submitter) {
 }
 function getName(paths) {
   return paths.reduce((name, path) => {
-    if (name === '' || path === '') {
-      return [name, path].join('');
-    }
-
     if (typeof path === 'number') {
       return "".concat(name, "[").concat(path, "]");
     }
 
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+
     return [name, path].join('.');
   }, '');
 }
-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);
-
-  if (paths.length > 1) {
-    return null;
-  }
-
-  return typeof paths[0] === 'string' ? paths[0] : null;
+function hasError(error, name) {
+  return typeof error.find(_ref => {
+    var [fieldName, message] = _ref;
+    return fieldName === name && message !== '';
+  }) !== 'undefined';
 }
-function setFormError(form, errors) {
-  var firstErrorByName = Object.fromEntries([...errors].reverse());
+function reportValidity(form, state) {
+  var firstErrorByName = Object.fromEntries([...state.error].reverse());
 
-  for (var _element of form.elements) {
-    var _firstErrorByName$_el;
+  for (var element of form.elements) {
+    var _firstErrorByName$ele;
 
-    if (!isFieldElement(_element)) {
+    if (!isFieldElement(element) || !state.scope.includes(element.name)) {
       continue;
     }
 
-    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+    element.setCustomValidity((_firstErrorByName$ele = firstErrorByName[element.name]) !== null && _firstErrorByName$ele !== void 0 ? _firstErrorByName$ele : '');
   }
+
+  return form.reportValidity();
 }
 function setValue(target, paths, valueFn) {
   var length = paths.length;
@@ -84,115 +87,145 @@ function setValue(target, paths, valueFn) {
     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));
-    }
+function requestSubmit(form, submitter) {
+  var submitEvent = new SubmitEvent('submit', {
+    bubbles: true,
+    cancelable: true,
+    submitter
+  });
+  form.dispatchEvent(submitEvent);
+}
+function requestValidate(form, field) {
+  var button = document.createElement('button');
+  button.name = 'conform/validate';
+  button.value = field !== null && field !== void 0 ? field : '';
+  button.hidden = true;
+  form.appendChild(button);
+  requestSubmit(form, button);
+  form.removeChild(button);
+}
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
   }
 
-  return entries;
+  return form;
 }
-function unflatten(entries) {
-  var result = {};
-
-  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');
-      }
+function focusFirstInvalidField(form, fields) {
+  var currentFocus = document.activeElement;
 
-      return value;
-    });
-  };
+  if (!isFieldElement(currentFocus) || currentFocus.tagName !== 'BUTTON' || currentFocus.form !== form) {
+    return;
+  }
+
+  for (var field of form.elements) {
+    if (isFieldElement(field)) {
+      // Focus on the first non button field
+      if (!field.validity.valid && field.dataset.conformTouched && field.tagName !== 'BUTTON' && (!fields || fields.includes(field.name))) {
+        field.focus();
+        break;
+      }
+    }
+  }
+}
+function getSubmissionType(name) {
+  var prefix = 'conform/';
 
-  for (var [key, value] of entries) {
-    _loop(key, value);
+  if (!name.startsWith(prefix) || name.length <= prefix.length) {
+    return null;
   }
 
-  return result;
+  return name.slice(prefix.length);
 }
-function createSubmission(payload) {
-  var value = {};
+function parse(payload) {
+  var submission = {
+    value: {},
+    error: [],
+    scope: ['']
+  };
 
   try {
-    var modifiedPayload = applyListCommand(payload);
-    value = unflatten(modifiedPayload.entries());
-
-    if (payload !== modifiedPayload) {
-      return {
-        state: 'modified',
-        form: {
-          value,
-          error: {}
+    var _loop = function _loop(name, value) {
+      var submissionType = getSubmissionType(name);
+
+      if (submissionType) {
+        if (typeof value !== 'string') {
+          throw new Error('The conform command could not be used on a file input');
         }
-      };
-    }
-  } catch (e) {
-    return {
-      state: 'rejected',
-      form: {
-        value,
-        error: {
-          message: e instanceof Error ? e.message : 'Submission failed'
+
+        if (typeof submission.type !== 'undefined') {
+          throw new Error('The conform command could only be set on a button');
         }
+
+        submission = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission), {}, {
+          type: submissionType,
+          data: value
+        });
+      } else {
+        var paths = getPaths(name);
+        var scopes = paths.reduce((result, path) => {
+          if (result.length === 0) {
+            if (typeof path !== 'string') {
+              throw new Error("Invalid name received: ".concat(name));
+            }
+
+            result.push(path);
+          } else {
+            var [lastName] = result.slice(-1);
+            result.push(getName([lastName, path]));
+          }
+
+          return result;
+        }, []);
+        submission.scope.push(...scopes);
+        setValue(submission.value, paths, prev => {
+          if (prev) {
+            throw new Error('Entry with the same name is not supported');
+          }
+
+          return value;
+        });
       }
     };
-  }
 
-  return {
-    state: 'accepted',
-    data: value,
-    form: {
-      value,
-      error: {}
+    for (var [name, value] of payload.entries()) {
+      _loop(name, value);
     }
-  };
-}
-function createValidate(handler) {
-  return (form, submitter) => {
-    var formData = getFormData(form, submitter);
 
-    for (var _field of form.elements) {
-      if (isFieldElement(_field)) {
-        handler(_field, formData);
-      }
+    switch (submission.type) {
+      case 'validate':
+        if (typeof submission.data !== 'undefined' && submission.data !== '') {
+          submission.scope = [submission.data];
+        }
+
+        break;
+
+      case 'list':
+        submission = handleList(submission);
+        break;
     }
-  };
-}
-function getFormElement(element) {
-  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+  } catch (e) {
+    submission.error.push(['', e instanceof Error ? e.message : 'Invalid payload received']);
+  } // Remove duplicates
 
-  if (!form) {
-    return null;
-  }
 
-  return form;
+  submission.scope = Array.from(new Set(submission.scope));
+  return submission;
 }
-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 parseListCommand(data) {
+  try {
+    var command = JSON.parse(data);
+
+    if (typeof command.type !== 'string' || !['prepend', 'append', 'replace', 'remove', 'reorder'].includes(command.type)) {
+      throw new Error('Unsupported list command type');
+    }
+
+    return command;
+  } catch (error) {
+    throw new Error("Invalid list command: \"".concat(data, "\"; ").concat(error));
+  }
 }
 function updateList(list, command) {
   switch (command.type) {
@@ -223,67 +256,43 @@ function updateList(list, command) {
       break;
 
     default:
-      throw new Error('Invalid list command');
+      throw new Error('Unknown list command received');
   }
 
   return list;
 }
-function applyListCommand(payload) {
-  var command = payload.get(listCommandKey);
-
-  if (!command) {
-    return payload;
-  }
-
-  payload.delete(listCommandKey);
-
-  if (command instanceof File) {
-    throw new Error("The \"".concat(listCommandKey, "\" key could not be used for file upload"));
+function handleList(submission) {
+  if (submission.type !== 'list') {
+    return submission;
   }
 
-  var result = new FormData();
-  var entries = [];
-  var [key, listCommand] = parseListCommand(command);
-
-  for (var [name, value] of payload) {
-    if (name.startsWith(key)) {
-      entries.push([name.replace(key, 'list'), value]);
-    } else {
-      result.append(name, value);
+  var command = parseListCommand(submission.data);
+  var paths = getPaths(command.scope);
+  setValue(submission.value, paths, list => {
+    if (!Array.isArray(list)) {
+      throw new Error('The list command can only be applied to a list');
     }
-  }
-
-  var {
-    list
-  } = unflatten(entries);
-
-  if (!Array.isArray(list)) {
-    throw new Error('The list command can only be applied to a list');
-  }
 
-  updateList(list, listCommand);
-
-  for (var [_name, _value] of flatten(list, key)) {
-    result.append(_name, _value);
-  }
-
-  return result;
+    return updateList(list, command);
+  });
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission), {}, {
+    scope: [command.scope]
+  });
 }
 
-exports.applyListCommand = applyListCommand;
-exports.createSubmission = createSubmission;
-exports.createValidate = createValidate;
-exports.flatten = flatten;
+exports.focusFirstInvalidField = focusFirstInvalidField;
 exports.getFormData = getFormData;
 exports.getFormElement = getFormElement;
-exports.getKey = getKey;
 exports.getName = getName;
 exports.getPaths = getPaths;
+exports.getSubmissionType = getSubmissionType;
+exports.handleList = handleList;
+exports.hasError = hasError;
 exports.isFieldElement = isFieldElement;
-exports.listCommandKey = listCommandKey;
+exports.parse = parse;
 exports.parseListCommand = parseListCommand;
-exports.serializeListCommand = serializeListCommand;
-exports.setFormError = setFormError;
+exports.reportValidity = reportValidity;
+exports.requestSubmit = requestSubmit;
+exports.requestValidate = requestValidate;
 exports.setValue = setValue;
-exports.unflatten = unflatten;
 exports.updateList = updateList;

package/module/index.js

@@ -1,8 +1,10 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+
 function isFieldElement(element) {
   return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
 }
 function getPaths(name) {
-  var pattern = /(\w+)\[(\d+)\]/;
+  var pattern = /(\w*)\[(\d+)\]/;
 
   if (!name) {
     return [];
@@ -15,6 +17,10 @@ function getPaths(name) {
       return key;
     }
 
+    if (matches[1] === '') {
+      return Number(matches[2]);
+    }
+
     return [matches[1], Number(matches[2])];
   });
 }
@@ -29,40 +35,37 @@ function getFormData(form, submitter) {
 }
 function getName(paths) {
   return paths.reduce((name, path) => {
-    if (name === '' || path === '') {
-      return [name, path].join('');
-    }
-
     if (typeof path === 'number') {
       return "".concat(name, "[").concat(path, "]");
     }
 
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+
     return [name, path].join('.');
   }, '');
 }
-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);
-
-  if (paths.length > 1) {
-    return null;
-  }
-
-  return typeof paths[0] === 'string' ? paths[0] : null;
+function hasError(error, name) {
+  return typeof error.find(_ref => {
+    var [fieldName, message] = _ref;
+    return fieldName === name && message !== '';
+  }) !== 'undefined';
 }
-function setFormError(form, errors) {
-  var firstErrorByName = Object.fromEntries([...errors].reverse());
+function reportValidity(form, state) {
+  var firstErrorByName = Object.fromEntries([...state.error].reverse());
 
-  for (var _element of form.elements) {
-    var _firstErrorByName$_el;
+  for (var element of form.elements) {
+    var _firstErrorByName$ele;
 
-    if (!isFieldElement(_element)) {
+    if (!isFieldElement(element) || !state.scope.includes(element.name)) {
       continue;
     }
 
-    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+    element.setCustomValidity((_firstErrorByName$ele = firstErrorByName[element.name]) !== null && _firstErrorByName$ele !== void 0 ? _firstErrorByName$ele : '');
   }
+
+  return form.reportValidity();
 }
 function setValue(target, paths, valueFn) {
   var length = paths.length;
@@ -80,115 +83,145 @@ function setValue(target, paths, valueFn) {
     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));
-    }
+function requestSubmit(form, submitter) {
+  var submitEvent = new SubmitEvent('submit', {
+    bubbles: true,
+    cancelable: true,
+    submitter
+  });
+  form.dispatchEvent(submitEvent);
+}
+function requestValidate(form, field) {
+  var button = document.createElement('button');
+  button.name = 'conform/validate';
+  button.value = field !== null && field !== void 0 ? field : '';
+  button.hidden = true;
+  form.appendChild(button);
+  requestSubmit(form, button);
+  form.removeChild(button);
+}
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
   }
 
-  return entries;
+  return form;
 }
-function unflatten(entries) {
-  var result = {};
-
-  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');
-      }
+function focusFirstInvalidField(form, fields) {
+  var currentFocus = document.activeElement;
 
-      return value;
-    });
-  };
+  if (!isFieldElement(currentFocus) || currentFocus.tagName !== 'BUTTON' || currentFocus.form !== form) {
+    return;
+  }
+
+  for (var field of form.elements) {
+    if (isFieldElement(field)) {
+      // Focus on the first non button field
+      if (!field.validity.valid && field.dataset.conformTouched && field.tagName !== 'BUTTON' && (!fields || fields.includes(field.name))) {
+        field.focus();
+        break;
+      }
+    }
+  }
+}
+function getSubmissionType(name) {
+  var prefix = 'conform/';
 
-  for (var [key, value] of entries) {
-    _loop(key, value);
+  if (!name.startsWith(prefix) || name.length <= prefix.length) {
+    return null;
   }
 
-  return result;
+  return name.slice(prefix.length);
 }
-function createSubmission(payload) {
-  var value = {};
+function parse(payload) {
+  var submission = {
+    value: {},
+    error: [],
+    scope: ['']
+  };
 
   try {
-    var modifiedPayload = applyListCommand(payload);
-    value = unflatten(modifiedPayload.entries());
-
-    if (payload !== modifiedPayload) {
-      return {
-        state: 'modified',
-        form: {
-          value,
-          error: {}
+    var _loop = function _loop(name, value) {
+      var submissionType = getSubmissionType(name);
+
+      if (submissionType) {
+        if (typeof value !== 'string') {
+          throw new Error('The conform command could not be used on a file input');
         }
-      };
-    }
-  } catch (e) {
-    return {
-      state: 'rejected',
-      form: {
-        value,
-        error: {
-          message: e instanceof Error ? e.message : 'Submission failed'
+
+        if (typeof submission.type !== 'undefined') {
+          throw new Error('The conform command could only be set on a button');
         }
+
+        submission = _objectSpread2(_objectSpread2({}, submission), {}, {
+          type: submissionType,
+          data: value
+        });
+      } else {
+        var paths = getPaths(name);
+        var scopes = paths.reduce((result, path) => {
+          if (result.length === 0) {
+            if (typeof path !== 'string') {
+              throw new Error("Invalid name received: ".concat(name));
+            }
+
+            result.push(path);
+          } else {
+            var [lastName] = result.slice(-1);
+            result.push(getName([lastName, path]));
+          }
+
+          return result;
+        }, []);
+        submission.scope.push(...scopes);
+        setValue(submission.value, paths, prev => {
+          if (prev) {
+            throw new Error('Entry with the same name is not supported');
+          }
+
+          return value;
+        });
       }
     };
-  }
 
-  return {
-    state: 'accepted',
-    data: value,
-    form: {
-      value,
-      error: {}
+    for (var [name, value] of payload.entries()) {
+      _loop(name, value);
     }
-  };
-}
-function createValidate(handler) {
-  return (form, submitter) => {
-    var formData = getFormData(form, submitter);
 
-    for (var _field of form.elements) {
-      if (isFieldElement(_field)) {
-        handler(_field, formData);
-      }
+    switch (submission.type) {
+      case 'validate':
+        if (typeof submission.data !== 'undefined' && submission.data !== '') {
+          submission.scope = [submission.data];
+        }
+
+        break;
+
+      case 'list':
+        submission = handleList(submission);
+        break;
     }
-  };
-}
-function getFormElement(element) {
-  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+  } catch (e) {
+    submission.error.push(['', e instanceof Error ? e.message : 'Invalid payload received']);
+  } // Remove duplicates
 
-  if (!form) {
-    return null;
-  }
 
-  return form;
+  submission.scope = Array.from(new Set(submission.scope));
+  return submission;
 }
-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 parseListCommand(data) {
+  try {
+    var command = JSON.parse(data);
+
+    if (typeof command.type !== 'string' || !['prepend', 'append', 'replace', 'remove', 'reorder'].includes(command.type)) {
+      throw new Error('Unsupported list command type');
+    }
+
+    return command;
+  } catch (error) {
+    throw new Error("Invalid list command: \"".concat(data, "\"; ").concat(error));
+  }
 }
 function updateList(list, command) {
   switch (command.type) {
@@ -219,51 +252,28 @@ function updateList(list, command) {
       break;
 
     default:
-      throw new Error('Invalid list command');
+      throw new Error('Unknown list command received');
   }
 
   return list;
 }
-function applyListCommand(payload) {
-  var command = payload.get(listCommandKey);
-
-  if (!command) {
-    return payload;
-  }
-
-  payload.delete(listCommandKey);
-
-  if (command instanceof File) {
-    throw new Error("The \"".concat(listCommandKey, "\" key could not be used for file upload"));
+function handleList(submission) {
+  if (submission.type !== 'list') {
+    return submission;
   }
 
-  var result = new FormData();
-  var entries = [];
-  var [key, listCommand] = parseListCommand(command);
-
-  for (var [name, value] of payload) {
-    if (name.startsWith(key)) {
-      entries.push([name.replace(key, 'list'), value]);
-    } else {
-      result.append(name, value);
+  var command = parseListCommand(submission.data);
+  var paths = getPaths(command.scope);
+  setValue(submission.value, paths, list => {
+    if (!Array.isArray(list)) {
+      throw new Error('The list command can only be applied to a list');
     }
-  }
-
-  var {
-    list
-  } = unflatten(entries);
-
-  if (!Array.isArray(list)) {
-    throw new Error('The list command can only be applied to a list');
-  }
 
-  updateList(list, listCommand);
-
-  for (var [_name, _value] of flatten(list, key)) {
-    result.append(_name, _value);
-  }
-
-  return result;
+    return updateList(list, command);
+  });
+  return _objectSpread2(_objectSpread2({}, submission), {}, {
+    scope: [command.scope]
+  });
 }
 
-export { applyListCommand, createSubmission, createValidate, flatten, getFormData, getFormElement, getKey, getName, getPaths, isFieldElement, listCommandKey, parseListCommand, serializeListCommand, setFormError, setValue, unflatten, updateList };
+export { focusFirstInvalidField, getFormData, getFormElement, getName, getPaths, getSubmissionType, handleList, hasError, isFieldElement, parse, parseListCommand, reportValidity, requestSubmit, requestValidate, setValue, 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.3.0",
+	"version": "0.4.0-pre.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {