@conform-to/dom 1.0.6 → 1.1.0

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.6 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 

package/form.d.ts

@@ -33,6 +33,8 @@ export type Constraint = {
     pattern?: string;
 };
 export type FormMeta<FormError> = {
+    formId: string;
+    isValueUpdated: boolean;
     submissionStatus?: 'error' | 'success';
     defaultValue: Record<string, unknown>;
     initialValue: Record<string, unknown>;
@@ -42,7 +44,7 @@ export type FormMeta<FormError> = {
     key: Record<string, string | undefined>;
     validated: Record<string, boolean>;
 };
-export type FormState<FormError> = FormMeta<FormError> & {
+export type FormState<FormError> = Omit<FormMeta<FormError>, 'formId' | 'isValueUpdated'> & {
     valid: Record<string, boolean>;
     dirty: Record<string, boolean>;
 };
@@ -94,6 +96,7 @@ export type FormOptions<Schema, FormError = string[], FormValue = Schema> = {
 export type SubscriptionSubject = {
     [key in 'error' | 'initialValue' | 'value' | 'key' | 'valid' | 'dirty']?: SubscriptionScope;
 } & {
+    formId?: boolean;
     status?: boolean;
 };
 export type SubscriptionScope = {
@@ -107,7 +110,7 @@ export type ControlButtonProps = {
     formNoValidate: boolean;
 };
 export type FormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = {
-    formId: string;
+    getFormId(): string;
     submit(event: SubmitEvent): {
         formData: FormData;
         action: ReturnType<typeof getFormAction>;
@@ -119,6 +122,7 @@ export type FormContext<Schema extends Record<string, any> = any, FormError = st
     onInput(event: Event): void;
     onBlur(event: Event): void;
     onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
+    observe(): () => void;
     subscribe(callback: () => void, getSubject?: () => SubscriptionSubject | undefined): () => void;
     getState(): FormState<FormError>;
     getSerializedState(): string;

package/form.js

@@ -14,6 +14,8 @@ function createFormMeta(options, initialized) {
   var defaultValue = options.defaultValue ? submission.serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
+    formId: options.formId,
+    isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
     initialValue,
@@ -37,7 +39,7 @@ function getDefaultKey(defaultValue, prefix) {
     var [key, value] = _ref2;
     if (Array.isArray(value)) {
       for (var i = 0; i < value.length; i++) {
-        result[formdata.formatPaths([...formdata.getPaths(key), i])] = util.generateId();
+        result[formdata.formatName(key, i)] = util.generateId();
       }
     }
     return result;
@@ -66,10 +68,10 @@ function handleIntent(meta, intent, fields, initialized) {
     case 'update':
       {
         var {
-          name: _name2,
           validated,
           value
         } = intent.payload;
+        var _name2 = formdata.formatName(intent.payload.name, intent.payload.index);
         if (typeof value !== 'undefined') {
           updateValue(meta, _name2 !== null && _name2 !== void 0 ? _name2 : '', submission.serialize(value));
         }
@@ -98,8 +100,7 @@ function handleIntent(meta, intent, fields, initialized) {
       }
     case 'reset':
       {
-        var _intent$payload$name;
-        var _name3 = (_intent$payload$name = intent.payload.name) !== null && _intent$payload$name !== void 0 ? _intent$payload$name : '';
+        var _name3 = formdata.formatName(intent.payload.name, intent.payload.index);
         var _value = formdata.getValue(meta.defaultValue, _name3);
         updateValue(meta, _name3, _value);
         if (_name3) {
@@ -323,7 +324,7 @@ function createFormContext(options) {
     for (var subscriber of subscribers) {
       var _subscriber$getSubjec;
       var subject = (_subscriber$getSubjec = subscriber.getSubject) === null || _subscriber$getSubjec === void 0 ? void 0 : _subscriber$getSubjec.call(subscriber);
-      if (!subject || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
+      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
         subscriber.callback();
       }
     }
@@ -357,8 +358,11 @@ function createFormContext(options) {
       formData,
       submitter
     });
-    if (submission.status !== 'success' && submission.error !== null) {
-      report(submission.reply());
+    if (submission.status === 'success' || submission.error !== null) {
+      var _result2 = submission.reply();
+      report(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _result2), {}, {
+        status: _result2.status !== 'success' ? _result2.status : undefined
+      }));
     }
     return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
       submission
@@ -378,7 +382,15 @@ function createFormContext(options) {
       shouldRevalidate = shouldValidate
     } = latestOptions;
     var validated = meta.validated[element.name];
-    return validated ? shouldRevalidate === eventName : shouldValidate === eventName;
+    return validated ? shouldRevalidate === eventName && (eventName === 'onInput' || meta.isValueUpdated) : shouldValidate === eventName;
+  }
+  function updateFormValue(form) {
+    var formData = new FormData(form);
+    var result = submission.getSubmissionContext(formData);
+    updateFormMeta(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
+      isValueUpdated: true,
+      value: result.payload
+    }));
   }
   function onInput(event) {
     var element = resolveTarget(event);
@@ -386,11 +398,7 @@ function createFormContext(options) {
       return;
     }
     if (event.defaultPrevented || !willValidate(element, 'onInput')) {
-      var formData = new FormData(element.form);
-      var result = submission.getSubmissionContext(formData);
-      updateFormMeta(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
-        value: result.payload
-      }));
+      updateFormValue(element.form);
     } else {
       dispatch({
         type: 'validate',
@@ -412,18 +420,21 @@ function createFormContext(options) {
       }
     });
   }
+  function reset() {
+    updateFormMeta(createFormMeta(latestOptions, true));
+  }
   function onReset(event) {
     var element = getFormElement();
     if (event.type !== 'reset' || event.target !== element || event.defaultPrevented) {
       return;
     }
-    updateFormMeta(createFormMeta(latestOptions, true));
+    reset();
   }
   function report(result) {
     var _result$error, _result$state;
     var formElement = getFormElement();
     if (!result.initialValue) {
-      formElement === null || formElement === void 0 || formElement.reset();
+      reset();
       return;
     }
     var error = Object.entries((_result$error = result.error) !== null && _result$error !== void 0 ? _result$error : {}).reduce((result, _ref5) => {
@@ -435,6 +446,7 @@ function createFormContext(options) {
       return result;
     }, {});
     var update = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
+      isValueUpdated: false,
       submissionStatus: result.status,
       value: result.initialValue,
       validated: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta.validated), (_result$state = result.state) === null || _result$state === void 0 ? void 0 : _result$state.validated),
@@ -458,8 +470,7 @@ function createFormContext(options) {
     // Merge new options with the latest options
     Object.assign(latestOptions, options);
     if (latestOptions.formId !== currentFormId) {
-      var _getFormElement;
-      (_getFormElement = getFormElement()) === null || _getFormElement === void 0 || _getFormElement.reset();
+      reset();
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }
@@ -515,9 +526,36 @@ function createFormContext(options) {
       }
     });
   }
+  function observe() {
+    var observer = new MutationObserver(mutations => {
+      var form = getFormElement();
+      if (!form) {
+        return;
+      }
+      for (var mutation of mutations) {
+        var nodes = mutation.type === 'childList' ? [...mutation.addedNodes, ...mutation.removedNodes] : [mutation.target];
+        for (var node of nodes) {
+          var element = dom.isFieldElement(node) ? node : node instanceof HTMLElement ? node.querySelector('input,select,textarea') : null;
+          if ((element === null || element === void 0 ? void 0 : element.form) === form) {
+            updateFormValue(form);
+            return;
+          }
+        }
+      }
+    });
+    observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ['form', 'name']
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }
   return {
-    get formId() {
-      return latestOptions.formId;
+    getFormId() {
+      return meta.formId;
     },
     submit,
     onReset,
@@ -532,7 +570,8 @@ function createFormContext(options) {
     reorder: createFormControl('reorder'),
     subscribe,
     getState,
-    getSerializedState
+    getSerializedState,
+    observe
   };
 }
 

package/form.mjs

@@ -1,8 +1,8 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { flatten, formatPaths, getPaths, getValue, isPlainObject, setValue, normalize, getFormData, isPrefix } from './formdata.mjs';
+import { flatten, formatName, getValue, isPlainObject, setValue, normalize, getFormData, getPaths, formatPaths, isPrefix } from './formdata.mjs';
 import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit } from './dom.mjs';
 import { generateId, clone, invariant } from './util.mjs';
-import { serialize, setListState, setListValue, setState, getSubmissionContext, INTENT, serializeIntent, root } from './submission.mjs';
+import { serialize, setListState, setListValue, setState, INTENT, serializeIntent, root, getSubmissionContext } from './submission.mjs';
 
 function createFormMeta(options, initialized) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
@@ -10,6 +10,8 @@ function createFormMeta(options, initialized) {
   var defaultValue = options.defaultValue ? serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
+    formId: options.formId,
+    isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
     initialValue,
@@ -33,7 +35,7 @@ function getDefaultKey(defaultValue, prefix) {
     var [key, value] = _ref2;
     if (Array.isArray(value)) {
       for (var i = 0; i < value.length; i++) {
-        result[formatPaths([...getPaths(key), i])] = generateId();
+        result[formatName(key, i)] = generateId();
       }
     }
     return result;
@@ -62,10 +64,10 @@ function handleIntent(meta, intent, fields, initialized) {
     case 'update':
       {
         var {
-          name: _name2,
           validated,
           value
         } = intent.payload;
+        var _name2 = formatName(intent.payload.name, intent.payload.index);
         if (typeof value !== 'undefined') {
           updateValue(meta, _name2 !== null && _name2 !== void 0 ? _name2 : '', serialize(value));
         }
@@ -94,8 +96,7 @@ function handleIntent(meta, intent, fields, initialized) {
       }
     case 'reset':
       {
-        var _intent$payload$name;
-        var _name3 = (_intent$payload$name = intent.payload.name) !== null && _intent$payload$name !== void 0 ? _intent$payload$name : '';
+        var _name3 = formatName(intent.payload.name, intent.payload.index);
         var _value = getValue(meta.defaultValue, _name3);
         updateValue(meta, _name3, _value);
         if (_name3) {
@@ -319,7 +320,7 @@ function createFormContext(options) {
     for (var subscriber of subscribers) {
       var _subscriber$getSubjec;
       var subject = (_subscriber$getSubjec = subscriber.getSubject) === null || _subscriber$getSubjec === void 0 ? void 0 : _subscriber$getSubjec.call(subscriber);
-      if (!subject || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
+      if (!subject || subject.formId && prevMeta.formId !== nextMeta.formId || subject.status && prevState.submissionStatus !== nextState.submissionStatus || shouldNotify(prevState.error, nextState.error, cache.error, subject.error) || shouldNotify(prevState.initialValue, nextState.initialValue, cache.initialValue, subject.initialValue) || shouldNotify(prevState.key, nextState.key, cache.key, subject.key, (prev, next) => prev !== next) || shouldNotify(prevState.valid, nextState.valid, cache.valid, subject.valid, compareBoolean) || shouldNotify(prevState.dirty, nextState.dirty, cache.dirty, subject.dirty, compareBoolean) || shouldNotify(prevState.value, nextState.value, cache.value, subject.value)) {
         subscriber.callback();
       }
     }
@@ -353,8 +354,11 @@ function createFormContext(options) {
       formData,
       submitter
     });
-    if (submission.status !== 'success' && submission.error !== null) {
-      report(submission.reply());
+    if (submission.status === 'success' || submission.error !== null) {
+      var _result2 = submission.reply();
+      report(_objectSpread2(_objectSpread2({}, _result2), {}, {
+        status: _result2.status !== 'success' ? _result2.status : undefined
+      }));
     }
     return _objectSpread2(_objectSpread2({}, result), {}, {
       submission
@@ -374,7 +378,15 @@ function createFormContext(options) {
       shouldRevalidate = shouldValidate
     } = latestOptions;
     var validated = meta.validated[element.name];
-    return validated ? shouldRevalidate === eventName : shouldValidate === eventName;
+    return validated ? shouldRevalidate === eventName && (eventName === 'onInput' || meta.isValueUpdated) : shouldValidate === eventName;
+  }
+  function updateFormValue(form) {
+    var formData = new FormData(form);
+    var result = getSubmissionContext(formData);
+    updateFormMeta(_objectSpread2(_objectSpread2({}, meta), {}, {
+      isValueUpdated: true,
+      value: result.payload
+    }));
   }
   function onInput(event) {
     var element = resolveTarget(event);
@@ -382,11 +394,7 @@ function createFormContext(options) {
       return;
     }
     if (event.defaultPrevented || !willValidate(element, 'onInput')) {
-      var formData = new FormData(element.form);
-      var result = getSubmissionContext(formData);
-      updateFormMeta(_objectSpread2(_objectSpread2({}, meta), {}, {
-        value: result.payload
-      }));
+      updateFormValue(element.form);
     } else {
       dispatch({
         type: 'validate',
@@ -408,18 +416,21 @@ function createFormContext(options) {
       }
     });
   }
+  function reset() {
+    updateFormMeta(createFormMeta(latestOptions, true));
+  }
   function onReset(event) {
     var element = getFormElement();
     if (event.type !== 'reset' || event.target !== element || event.defaultPrevented) {
       return;
     }
-    updateFormMeta(createFormMeta(latestOptions, true));
+    reset();
   }
   function report(result) {
     var _result$error, _result$state;
     var formElement = getFormElement();
     if (!result.initialValue) {
-      formElement === null || formElement === void 0 || formElement.reset();
+      reset();
       return;
     }
     var error = Object.entries((_result$error = result.error) !== null && _result$error !== void 0 ? _result$error : {}).reduce((result, _ref5) => {
@@ -431,6 +442,7 @@ function createFormContext(options) {
       return result;
     }, {});
     var update = _objectSpread2(_objectSpread2({}, meta), {}, {
+      isValueUpdated: false,
       submissionStatus: result.status,
       value: result.initialValue,
       validated: _objectSpread2(_objectSpread2({}, meta.validated), (_result$state = result.state) === null || _result$state === void 0 ? void 0 : _result$state.validated),
@@ -454,8 +466,7 @@ function createFormContext(options) {
     // Merge new options with the latest options
     Object.assign(latestOptions, options);
     if (latestOptions.formId !== currentFormId) {
-      var _getFormElement;
-      (_getFormElement = getFormElement()) === null || _getFormElement === void 0 || _getFormElement.reset();
+      reset();
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }
@@ -511,9 +522,36 @@ function createFormContext(options) {
       }
     });
   }
+  function observe() {
+    var observer = new MutationObserver(mutations => {
+      var form = getFormElement();
+      if (!form) {
+        return;
+      }
+      for (var mutation of mutations) {
+        var nodes = mutation.type === 'childList' ? [...mutation.addedNodes, ...mutation.removedNodes] : [mutation.target];
+        for (var node of nodes) {
+          var element = isFieldElement(node) ? node : node instanceof HTMLElement ? node.querySelector('input,select,textarea') : null;
+          if ((element === null || element === void 0 ? void 0 : element.form) === form) {
+            updateFormValue(form);
+            return;
+          }
+        }
+      }
+    });
+    observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ['form', 'name']
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }
   return {
-    get formId() {
-      return latestOptions.formId;
+    getFormId() {
+      return meta.formId;
     },
     submit,
     onReset,
@@ -528,7 +566,8 @@ function createFormContext(options) {
     reorder: createFormControl('reorder'),
     subscribe,
     getState,
-    getSerializedState
+    getSerializedState,
+    observe
   };
 }
 

package/formdata.d.ts

@@ -13,7 +13,7 @@ export declare function getFormData(form: HTMLFormElement, submitter?: HTMLInput
  * const paths = getPaths('todos[0].content'); // ['todos', 0, 'content']
  * ```
  */
-export declare function getPaths(name: string): Array<string | number>;
+export declare function getPaths(name: string | undefined): Array<string | number>;
 /**
  * Returns a formatted name from the paths based on the JS syntax convention
  * @example
@@ -22,6 +22,10 @@ export declare function getPaths(name: string): Array<string | number>;
  * ```
  */
 export declare function formatPaths(paths: Array<string | number>): string;
+/**
+ * Format based on a prefix and a path
+ */
+export declare function formatName(prefix: string | undefined, path?: string | number): string;
 /**
  * Check if a name match the prefix paths
  */

package/formdata.js

@@ -65,6 +65,13 @@ function formatPaths(paths) {
   }, '');
 }
 
+/**
+ * Format based on a prefix and a path
+ */
+function formatName(prefix, path) {
+  return typeof path !== 'undefined' ? formatPaths([...getPaths(prefix), path]) : prefix !== null && prefix !== void 0 ? prefix : '';
+}
+
 /**
  * Check if a name match the prefix paths
  */
@@ -215,6 +222,7 @@ function flatten(data, options) {
 }
 
 exports.flatten = flatten;
+exports.formatName = formatName;
 exports.formatPaths = formatPaths;
 exports.getFormData = getFormData;
 exports.getPaths = getPaths;

package/formdata.mjs

@@ -61,6 +61,13 @@ function formatPaths(paths) {
   }, '');
 }
 
+/**
+ * Format based on a prefix and a path
+ */
+function formatName(prefix, path) {
+  return typeof path !== 'undefined' ? formatPaths([...getPaths(prefix), path]) : prefix !== null && prefix !== void 0 ? prefix : '';
+}
+
 /**
  * Check if a name match the prefix paths
  */
@@ -210,4 +217,4 @@ function flatten(data, options) {
   return result;
 }
 
-export { flatten, formatPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };
+export { flatten, formatName, formatPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "A set of opinionated helpers built on top of the Constraint Validation API",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.6",
+	"version": "1.1.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",

package/submission.d.ts

@@ -78,14 +78,24 @@ export type ResetIntent<Schema = any> = {
     type: 'reset';
     payload: {
         name?: FieldName<Schema>;
+        index?: never;
+    } | {
+        name: FieldName<Schema>;
+        index: Schema extends Array<unknown> ? number : never;
     };
 };
 export type UpdateIntent<Schema = unknown> = {
     type: 'update';
     payload: {
         name?: FieldName<Schema>;
+        index?: never;
         value?: NonNullable<DefaultValue<Schema>>;
         validated?: boolean;
+    } | {
+        name: FieldName<Schema>;
+        index: Schema extends Array<unknown> ? number : never;
+        value?: NonNullable<DefaultValue<Schema extends Array<infer Item> ? Item : unknown>>;
+        validated?: boolean;
     };
 };
 export type RemoveIntent<Schema extends Array<any> = any> = {

package/submission.js

@@ -54,9 +54,7 @@ function parse(payload, options) {
     switch (intent.type) {
       case 'update':
         {
-          var {
-            name
-          } = intent.payload;
+          var name = formdata.formatName(intent.payload.name, intent.payload.index);
           var _value = serialize(intent.payload.value);
           if (typeof _value !== 'undefined') {
             if (name) {
@@ -70,9 +68,7 @@ function parse(payload, options) {
         }
       case 'reset':
         {
-          var {
-            name: _name
-          } = intent.payload;
+          var _name = formdata.formatName(intent.payload.name, intent.payload.index);
           if (_name) {
             formdata.setValue(context.payload, _name, () => undefined);
           } else {

package/submission.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { setValue, isPlainObject, getValue, normalize, flatten, isPrefix } from './formdata.mjs';
+import { formatName, setValue, isPlainObject, getValue, normalize, flatten, isPrefix } from './formdata.mjs';
 import { invariant } from './util.mjs';
 
 /**
@@ -50,9 +50,7 @@ function parse(payload, options) {
     switch (intent.type) {
       case 'update':
         {
-          var {
-            name
-          } = intent.payload;
+          var name = formatName(intent.payload.name, intent.payload.index);
           var _value = serialize(intent.payload.value);
           if (typeof _value !== 'undefined') {
             if (name) {
@@ -66,9 +64,7 @@ function parse(payload, options) {
         }
       case 'reset':
         {
-          var {
-            name: _name
-          } = intent.payload;
+          var _name = formatName(intent.payload.name, intent.payload.index);
           if (_name) {
             setValue(context.payload, _name, () => undefined);
           } else {