@conform-to/dom 0.1.1 → 0.3.0

package/README.md

@@ -1,42 +1,11 @@
 # @conform-to/dom
 
-> A set of opinionated helpers interacting with the DOM elements
+> 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.
 
-## API Reference
+Conform is a form validation library built on top of the [Constraint Validation](https://caniuse.com/constraint-validation) API.
 
-- [createControlButton](#createControlButton)
-- [createFieldConfig](#createFieldConfig)
-- [getFieldElements](#getFieldElements)
-- [getName](#getName)
-- [getPaths](#getPaths)
-- [isFieldElement](#isFieldElement)
-- [parse](#parse)
-- [reportValidity](#reportValidity)
-- [setFieldState](#setFieldState)
-- [shouldSkipValidate](#shouldSkipValidate)
-- [setFieldState](#setFieldState)
-- [transform](#transform)
+- **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.
 
-### createControlButton
-
-### createFieldConfig
-
-### getFieldElements
-
-### getName
-
-### getPaths
-
-### isFieldElement
-
-### isFieldsetElement
-
-### parse
-
-### reportValidity
-
-### setFieldState
-
-### shouldSkipValidate
-
-### transform
+Checkout the [repository](https://github.com/edmundhung/conform) if you want to know more!

package/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+exports.defineProperty = _defineProperty;
+exports.objectSpread2 = _objectSpread2;

package/index.d.ts

@@ -1,76 +1,96 @@
-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;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     step?: string;
     multiple?: boolean;
     pattern?: string;
 };
-export interface FieldConfig<Type = any> {
-    name: string;
-    initialValue?: FieldsetData<Type, string>;
-    error?: FieldsetData<Type, string>;
-    form?: string;
-    constraint?: Constraint;
-}
-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 | 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 declare type FormResult<T> = {
-    state: 'processed';
-    value: FieldsetData<T, string> | null;
-    error: FieldsetData<T, string> | null;
+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';
+    form: FormState<T>;
 } | {
     state: 'rejected';
-    value: FieldsetData<T, string> | null;
-    error: FieldsetData<T, string>;
+    form: FormState<T>;
 } | {
     state: 'accepted';
-    value: T;
+    data: T;
+    form: FormState<T>;
 };
-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 createFieldConfig<Type extends Record<string, any>>(schema: Schema<Type>, options: {
-    name?: string;
-    form?: string;
-    initialValue?: FieldsetData<Type, string>;
-    error?: FieldsetData<Type, string>;
-}): {
-    [Key in keyof Type]-?: FieldConfig<Type[Key]>;
-};
-export declare function shouldSkipValidate(event: SubmitEvent): boolean;
 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 transform(entries: Array<[string, FormDataEntryValue]> | Iterable<[string, FormDataEntryValue]>): unknown;
-export declare function createControlButton(name: string, action: 'prepend' | 'append' | 'remove', data: any): {
-    type: 'submit';
-    name: string;
-    value: string;
-    formNoValidate: boolean;
+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;
+    };
+} | {
+    type: 'append';
+    payload: {
+        defaultValue: Schema;
+    };
+} | {
+    type: 'replace';
+    payload: {
+        defaultValue: Schema;
+        index: number;
+    };
+} | {
+    type: 'remove';
+    payload: {
+        index: number;
+    };
+} | {
+    type: 'reorder';
+    payload: {
+        from: number;
+        to: number;
+    };
 };
-export declare function parse(payload: FormData | URLSearchParams): FormResult<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,83 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/**
- * 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 createFieldConfig(schema, options) {
-  var result = {};
-
-  for (var key of Object.keys(schema.fields)) {
-    var _options$initialValue, _options$error;
-
-    var constraint = schema.fields[key];
-    var config = {
-      name: options.name ? "".concat(options.name, ".").concat(key) : key,
-      form: options.form,
-      initialValue: (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue[key],
-      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key],
-      constraint
-    };
-    result[key] = config;
-  }
-
-  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+)\]/;
 
@@ -96,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 === '') {
@@ -109,144 +44,246 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function transform(entries) {
-  var result = {};
-
-  for (var [key, value] of entries) {
-    var paths = getPaths(key);
-    var length = paths.length;
-    var lastIndex = length - 1;
-    var index = -1;
-    var pointer = result;
-
-    while (pointer != null && ++index < length) {
-      var _key = paths[index];
-      var next = paths[index + 1];
-      var newValue = value;
-
-      if (index != lastIndex) {
-        var _pointer$_key;
+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);
 
-        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 (paths.length > 1) {
+    return null;
+  }
 
+  return typeof paths[0] === 'string' ? paths[0] : null;
+}
+function setFormError(form, errors) {
+  var firstErrorByName = Object.fromEntries([...errors].reverse());
 
-      pointer[_key] = newValue; // }
+  for (var _element of form.elements) {
+    var _firstErrorByName$_el;
 
-      pointer = pointer[_key];
+    if (!isFieldElement(_element)) {
+      continue;
     }
-  }
 
-  return result;
+    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+  }
 }
-function createControlButton(name, action, data) {
-  return {
-    type: 'submit',
-    name: '__conform__',
-    value: [name, action, JSON.stringify(data)].join('::'),
-    formNoValidate: 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];
+  }
 }
-function parse(payload) {
-  var command = payload.get('__conform__');
-
-  if (command) {
-    payload.delete('__conform__');
+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));
+    }
   }
 
-  var value = transform(payload.entries());
+  return entries;
+}
+function unflatten(entries) {
+  var result = {};
 
-  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.');
+  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');
       }
 
-      var [name, action, json] = command.split('::');
-      var list = value;
+      return value;
+    });
+  };
 
-      for (var path of getPaths(name)) {
-        list = list[path];
+  for (var [key, value] of entries) {
+    _loop(key, value);
+  }
 
-        if (typeof list === 'undefined') {
-          break;
-        }
-      }
+  return result;
+}
+function createSubmission(payload) {
+  var value = {};
 
-      if (!Array.isArray(list)) {
-        throw new Error('');
-      }
+  try {
+    var modifiedPayload = applyListCommand(payload);
+    value = unflatten(modifiedPayload.entries());
 
-      switch (action) {
-        case 'prepend':
-          {
-            var initialValue = JSON.parse(json);
-            list.unshift(initialValue);
-            break;
-          }
-
-        case 'append':
-          {
-            var _initialValue = JSON.parse(json);
-
-            list.push(_initialValue);
-            break;
-          }
-
-        case 'remove':
-          var {
-            index
-          } = JSON.parse(json);
-          list.splice(index, 1);
-          break;
-
-        default:
-          throw new Error('Invalid action found; Only `prepend`, `append` and `remove` is accepted');
-      }
-    } catch (e) {
+    if (payload !== modifiedPayload) {
       return {
-        state: 'rejected',
-        value,
-        error: {
-          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        state: 'modified',
+        form: {
+          value,
+          error: {}
         }
       };
     }
-
+  } catch (e) {
     return {
-      state: 'processed',
-      value,
-      error: null
+      state: 'rejected',
+      form: {
+        value,
+        error: {
+          message: e instanceof Error ? e.message : 'Submission failed'
+        }
+      }
     };
   }
 
   return {
     state: 'accepted',
-    value
+    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 getFieldElements(fieldset, key) {
-  var _fieldset$name;
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
+  }
 
-  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 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':
+      {
+        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('Invalid list command');
+  }
+
+  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"));
+  }
+
+  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 {
+    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;
 }
 
-exports.createControlButton = createControlButton;
-exports.createFieldConfig = createFieldConfig;
-exports.getFieldElements = getFieldElements;
+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/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,42 @@
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };

package/module/index.js

@@ -1,80 +1,6 @@
-/**
- * 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 createFieldConfig(schema, options) {
-  var result = {};
-
-  for (var key of Object.keys(schema.fields)) {
-    var _options$initialValue, _options$error;
-
-    var constraint = schema.fields[key];
-    var config = {
-      name: options.name ? "".concat(options.name, ".").concat(key) : key,
-      form: options.form,
-      initialValue: (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue[key],
-      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key],
-      constraint
-    };
-    result[key] = config;
-  }
-
-  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+)\]/;
 
@@ -92,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 === '') {
@@ -105,133 +40,230 @@ function getName(paths) {
     return [name, path].join('.');
   }, '');
 }
-function transform(entries) {
-  var result = {};
-
-  for (var [key, value] of entries) {
-    var paths = getPaths(key);
-    var length = paths.length;
-    var lastIndex = length - 1;
-    var index = -1;
-    var pointer = result;
-
-    while (pointer != null && ++index < length) {
-      var _key = paths[index];
-      var next = paths[index + 1];
-      var newValue = value;
-
-      if (index != lastIndex) {
-        var _pointer$_key;
+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);
 
-        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 (paths.length > 1) {
+    return null;
+  }
 
+  return typeof paths[0] === 'string' ? paths[0] : null;
+}
+function setFormError(form, errors) {
+  var firstErrorByName = Object.fromEntries([...errors].reverse());
 
-      pointer[_key] = newValue; // }
+  for (var _element of form.elements) {
+    var _firstErrorByName$_el;
 
-      pointer = pointer[_key];
+    if (!isFieldElement(_element)) {
+      continue;
     }
-  }
 
-  return result;
+    _element.setCustomValidity((_firstErrorByName$_el = firstErrorByName[_element.name]) !== null && _firstErrorByName$_el !== void 0 ? _firstErrorByName$_el : '');
+  }
 }
-function createControlButton(name, action, data) {
-  return {
-    type: 'submit',
-    name: '__conform__',
-    value: [name, action, JSON.stringify(data)].join('::'),
-    formNoValidate: 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];
+  }
 }
-function parse(payload) {
-  var command = payload.get('__conform__');
-
-  if (command) {
-    payload.delete('__conform__');
+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));
+    }
   }
 
-  var value = transform(payload.entries());
+  return entries;
+}
+function unflatten(entries) {
+  var result = {};
 
-  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.');
+  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');
       }
 
-      var [name, action, json] = command.split('::');
-      var list = value;
+      return value;
+    });
+  };
 
-      for (var path of getPaths(name)) {
-        list = list[path];
+  for (var [key, value] of entries) {
+    _loop(key, value);
+  }
 
-        if (typeof list === 'undefined') {
-          break;
-        }
-      }
+  return result;
+}
+function createSubmission(payload) {
+  var value = {};
 
-      if (!Array.isArray(list)) {
-        throw new Error('');
-      }
+  try {
+    var modifiedPayload = applyListCommand(payload);
+    value = unflatten(modifiedPayload.entries());
 
-      switch (action) {
-        case 'prepend':
-          {
-            var initialValue = JSON.parse(json);
-            list.unshift(initialValue);
-            break;
-          }
-
-        case 'append':
-          {
-            var _initialValue = JSON.parse(json);
-
-            list.push(_initialValue);
-            break;
-          }
-
-        case 'remove':
-          var {
-            index
-          } = JSON.parse(json);
-          list.splice(index, 1);
-          break;
-
-        default:
-          throw new Error('Invalid action found; Only `prepend`, `append` and `remove` is accepted');
-      }
-    } catch (e) {
+    if (payload !== modifiedPayload) {
       return {
-        state: 'rejected',
-        value,
-        error: {
-          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        state: 'modified',
+        form: {
+          value,
+          error: {}
         }
       };
     }
-
+  } catch (e) {
     return {
-      state: 'processed',
-      value,
-      error: null
+      state: 'rejected',
+      form: {
+        value,
+        error: {
+          message: e instanceof Error ? e.message : 'Submission failed'
+        }
+      }
     };
   }
 
   return {
     state: 'accepted',
-    value
+    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 getFieldElements(fieldset, key) {
-  var _fieldset$name;
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+
+  if (!form) {
+    return null;
+  }
 
-  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 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':
+      {
+        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('Invalid list command');
+  }
+
+  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"));
+  }
+
+  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 {
+    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;
 }
 
-export { createControlButton, createFieldConfig, getFieldElements, 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.1.1",
+	"version": "0.3.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {