@conform-to/dom 1.0.5 → 1.1.0-pre.0

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.4 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0-pre.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,7 @@ export type Constraint = {
     pattern?: string;
 };
 export type FormMeta<FormError> = {
+    isValueUpdated: boolean;
     submissionStatus?: 'error' | 'success';
     defaultValue: Record<string, unknown>;
     initialValue: Record<string, unknown>;
@@ -42,7 +43,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>, 'isValueUpdated'> & {
     valid: Record<string, boolean>;
     dirty: Record<string, boolean>;
 };
@@ -119,6 +120,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,7 @@ 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 = {
+    isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
     initialValue,
@@ -37,7 +38,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 +67,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 +99,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) {
@@ -117,11 +117,13 @@ function handleIntent(meta, intent, fields, initialized) {
         if (initialized) {
           meta.initialValue = util.clone(meta.initialValue);
           meta.key = util.clone(meta.key);
-          submission.setListState(meta.key, intent, (defaultValue, name) => {
+          submission.setListState(meta.key, intent, defaultValue => {
             if (!Array.isArray(defaultValue) && !formdata.isPlainObject(defaultValue)) {
               return util.generateId();
             }
-            return getDefaultKey(defaultValue, name);
+            return Object.assign(getDefaultKey(defaultValue), {
+              [submission.root]: util.generateId()
+            });
           });
           submission.setListValue(meta.initialValue, intent);
         }
@@ -355,8 +357,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
@@ -365,7 +370,7 @@ function createFormContext(options) {
   function resolveTarget(event) {
     var form = getFormElement();
     var element = event.target;
-    if (!form || !dom.isFieldElement(element) || element.form !== form || element.name === '') {
+    if (!form || !dom.isFieldElement(element) || element.form !== form || !element.form.isConnected || element.name === '') {
       return null;
     }
     return element;
@@ -376,7 +381,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);
@@ -384,11 +397,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',
@@ -433,6 +442,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),
@@ -456,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();
+      updateFormMeta(createFormMeta(latestOptions, true));
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }
@@ -513,6 +522,33 @@ 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;
@@ -530,7 +566,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 } 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,7 @@ 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 = {
+    isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
     defaultValue,
     initialValue,
@@ -33,7 +34,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 +63,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 +95,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) {
@@ -113,11 +113,13 @@ function handleIntent(meta, intent, fields, initialized) {
         if (initialized) {
           meta.initialValue = clone(meta.initialValue);
           meta.key = clone(meta.key);
-          setListState(meta.key, intent, (defaultValue, name) => {
+          setListState(meta.key, intent, defaultValue => {
             if (!Array.isArray(defaultValue) && !isPlainObject(defaultValue)) {
               return generateId();
             }
-            return getDefaultKey(defaultValue, name);
+            return Object.assign(getDefaultKey(defaultValue), {
+              [root]: generateId()
+            });
           });
           setListValue(meta.initialValue, intent);
         }
@@ -351,8 +353,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
@@ -361,7 +366,7 @@ function createFormContext(options) {
   function resolveTarget(event) {
     var form = getFormElement();
     var element = event.target;
-    if (!form || !isFieldElement(element) || element.form !== form || element.name === '') {
+    if (!form || !isFieldElement(element) || element.form !== form || !element.form.isConnected || element.name === '') {
       return null;
     }
     return element;
@@ -372,7 +377,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);
@@ -380,11 +393,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',
@@ -429,6 +438,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),
@@ -452,8 +462,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();
+      updateFormMeta(createFormMeta(latestOptions, true));
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }
@@ -509,6 +518,33 @@ 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;
@@ -526,7 +562,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.5",
+	"version": "1.1.0-pre.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> = {
@@ -116,6 +126,10 @@ export declare function getIntent(serializedIntent: string | null | undefined):
 export declare function serializeIntent<Schema>(intent: Intent<Schema>): string;
 export declare function updateList(list: unknown, intent: InsertIntent | RemoveIntent | ReorderIntent): void;
 export declare function setListValue(data: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent): void;
+/**
+ * A placeholder symbol for the root value of a nested object
+ */
+export declare const root: unique symbol;
 export declare function setState(state: Record<string, unknown>, name: string, valueFn: (value: unknown) => unknown): void;
-export declare function setListState(state: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent, getDefaultValue?: (defaultValue: any, prefix?: string) => any): void;
+export declare function setListState(state: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent, getDefaultValue?: (defaultValue: any) => any): void;
 export declare function serialize<Schema>(defaultValue: DefaultValue<Schema>): FormValue<Schema>;

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 {
@@ -81,6 +77,15 @@ function parse(payload, options) {
           break;
         }
       case 'insert':
+        {
+          setListValue(context.payload, {
+            type: intent.type,
+            payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
+              defaultValue: serialize(intent.payload.defaultValue)
+            })
+          });
+          break;
+        }
       case 'remove':
       case 'reorder':
         {
@@ -168,7 +173,7 @@ function updateList(list, intent) {
   util.invariant(Array.isArray(list), "Failed to update list. The value is not an array.");
   switch (intent.type) {
     case 'insert':
-      list.splice((_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length, 0, serialize(intent.payload.defaultValue));
+      list.splice((_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length, 0, intent.payload.defaultValue);
       break;
     case 'remove':
       list.splice(intent.payload.index, 1);
@@ -187,9 +192,12 @@ function setListValue(data, intent) {
     return list;
   });
 }
-function setState(state, name, valueFn) {
-  var root = Symbol.for('root');
 
+/**
+ * A placeholder symbol for the root value of a nested object
+ */
+var root = Symbol.for('root');
+function setState(state, name, valueFn) {
   // The keys are sorted in desc so that the root value is handled last
   var keys = Object.keys(state).sort((prev, next) => next.localeCompare(prev));
   var target = {};
@@ -239,7 +247,7 @@ function setListState(state, intent, getDefaultValue) {
         updateList(list, {
           type: intent.type,
           payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
-            defaultValue: getDefaultValue === null || getDefaultValue === void 0 ? void 0 : getDefaultValue(intent.payload.defaultValue, intent.payload.name)
+            defaultValue: getDefaultValue === null || getDefaultValue === void 0 ? void 0 : getDefaultValue(intent.payload.defaultValue)
           })
         });
         break;
@@ -286,6 +294,7 @@ exports.getIntent = getIntent;
 exports.getSubmissionContext = getSubmissionContext;
 exports.parse = parse;
 exports.replySubmission = replySubmission;
+exports.root = root;
 exports.serialize = serialize;
 exports.serializeIntent = serializeIntent;
 exports.setListState = setListState;

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 {
@@ -77,6 +73,15 @@ function parse(payload, options) {
           break;
         }
       case 'insert':
+        {
+          setListValue(context.payload, {
+            type: intent.type,
+            payload: _objectSpread2(_objectSpread2({}, intent.payload), {}, {
+              defaultValue: serialize(intent.payload.defaultValue)
+            })
+          });
+          break;
+        }
       case 'remove':
       case 'reorder':
         {
@@ -164,7 +169,7 @@ function updateList(list, intent) {
   invariant(Array.isArray(list), "Failed to update list. The value is not an array.");
   switch (intent.type) {
     case 'insert':
-      list.splice((_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length, 0, serialize(intent.payload.defaultValue));
+      list.splice((_intent$payload$index = intent.payload.index) !== null && _intent$payload$index !== void 0 ? _intent$payload$index : list.length, 0, intent.payload.defaultValue);
       break;
     case 'remove':
       list.splice(intent.payload.index, 1);
@@ -183,9 +188,12 @@ function setListValue(data, intent) {
     return list;
   });
 }
-function setState(state, name, valueFn) {
-  var root = Symbol.for('root');
 
+/**
+ * A placeholder symbol for the root value of a nested object
+ */
+var root = Symbol.for('root');
+function setState(state, name, valueFn) {
   // The keys are sorted in desc so that the root value is handled last
   var keys = Object.keys(state).sort((prev, next) => next.localeCompare(prev));
   var target = {};
@@ -235,7 +243,7 @@ function setListState(state, intent, getDefaultValue) {
         updateList(list, {
           type: intent.type,
           payload: _objectSpread2(_objectSpread2({}, intent.payload), {}, {
-            defaultValue: getDefaultValue === null || getDefaultValue === void 0 ? void 0 : getDefaultValue(intent.payload.defaultValue, intent.payload.name)
+            defaultValue: getDefaultValue === null || getDefaultValue === void 0 ? void 0 : getDefaultValue(intent.payload.defaultValue)
           })
         });
         break;
@@ -275,4 +283,4 @@ function serialize(defaultValue) {
   }
 }
 
-export { INTENT, STATE, createSubmission, getIntent, getSubmissionContext, parse, replySubmission, serialize, serializeIntent, setListState, setListValue, setState, updateList };
+export { INTENT, STATE, createSubmission, getIntent, getSubmissionContext, parse, replySubmission, root, serialize, serializeIntent, setListState, setListValue, setState, updateList };